Fix trajectory viewer showing wrong data by using unique step IDs

[khaliqgant]

Summary

• Root cause: Step IDs were generated as step-0, step-1, etc. regardless of trajectory
• This caused React key collisions when switching between trajectories
• React reused DOM elements with the same keys, displaying stale data

Technical Details

When viewing trajectory A and switching to trajectory B:

• Trajectory A steps: step-0, step-1, step-2
• Trajectory B steps: step-0, step-1, step-2 (same keys!)

React sees the same keys and reuses the existing DOM elements, potentially displaying old data from trajectory A instead of the new data from trajectory B.

Fix

Include trajectory ID in step IDs to ensure uniqueness:

• Trajectory A steps: traj_abc-step-0, traj_abc-step-1
• Trajectory B steps: traj_xyz-step-0, traj_xyz-step-1 (different keys!)

Now React properly unmounts old steps and mounts new ones when switching trajectories.

Test plan

• Open trajectory panel
• View steps for trajectory A
• Click on trajectory B
• Verify trajectory B's steps are displayed (not A's)
• Switch back to A, verify A's steps shown correctly

🤖 Generated with Claude Code

[my-senior-dev-pr-review]

🤖 My Senior Dev — Analysis Complete

👤 For @khaliqgant

📁 Expert in src/dashboard/react-components/ (6 edits) • ⚡ 23rd PR this month

View your contributor analytics →

---

📊 1 file reviewed • 3 need attention

⚠️ Needs Attention:

• src/trajectory/integration.ts — Significant concern regarding the reliance on potentially invalid trajectory IDs leading to 'unknown' being used, which may cause non-unique step IDs and affect UI behavior.

---

🚀 Open Interactive Review →

The full interface unlocks features not available in GitHub:

• 💬 AI Chat — Ask questions on any file, get context-aware answers
• 🔍 Smart Hovers — See symbol definitions and usage without leaving the diff
• 📚 Code Archeology — Understand how files evolved over time (/archeology)
• 🎯 Learning Insights — See how this PR compares to similar changes

---

💬 Chat here: @my-senior-dev explain this change — or try @chaos-monkey @security-auditor @optimizer @skeptic @junior-dev

📖 View all 12 personas & slash commands

You can interact with me by mentioning @my-senior-dev in any comment:

In PR comments or on any line of code:

• Ask questions about the code or PR
• Request explanations of specific changes
• Get suggestions for improvements

Slash commands:

• /help — Show all available commands
• /archeology — See the history and evolution of changed files
• /profile — Performance analysis and suggestions
• /expertise — Find who knows this code best
• /personas — List all available AI personas

AI Personas (mention to get their perspective):

Persona	Focus
@chaos-monkey 🐵	Edge cases & failure scenarios
@skeptic 🤨	Challenge assumptions
@optimizer ⚡	Performance & efficiency
@security-auditor 🔒	Security vulnerabilities
@accessibility-advocate ♿	Inclusive design
@junior-dev 🌱	Simple explanations
@tech-debt-collector 💳	Code quality & shortcuts
@ux-champion 🎨	User experience
@devops-engineer 🚀	Deployment & scaling
@documentation-nazi 📚	Documentation gaps
@legacy-whisperer 🏛️	Working with existing code
@test-driven-purist ✅	Testing & TDD

For the best experience, view this PR on myseniordev.com — includes AI chat, file annotations, and interactive reviews.

[khaliqgant]

AI Conversation Transcript

👤 khaliqgant

so how was this loading in a trajectory at all?

🤖 AI Assistant

The code in question is part of a function that likely retrieves and processes steps from a trajectory, which is a series of events or actions taken in a certain context (like a simulation, animation, or user actions).

Here's how it relates to loading a trajectory:

1. Trajectory Identification: The trajectory is identified by an ID, which is retrieved using const trajId = trajectory.id || 'unknown';. This line attempts to get the id of the trajectory being processed. If the ID is not available, it defaults to 'unknown'.

2. Event Processing: The nested loops iterate over trajectory.chapters and their respective events. For each event, a step is created and pushed into the steps array. This is where the line in question comes into play:

   id: `${trajId}-step-${stepIndex++}`,

   Here, the step ID is constructed using the trajectory ID and the current step index. This helps in ensuring that each step has a unique identifier, which is crucial for rendering in frameworks like React.

3. Output: The function likely returns the constructed steps array, which contains all the processed steps of the trajectory, each identified uniquely based on the trajectory ID and step index.

If the trajectory ID is invalid or missing, the function defaults to using 'unknown', which could lead to non-unique step IDs if multiple trajectories are processed without valid IDs. This is a potential issue that could affect how the trajectory is displayed or interacted with, as outlined in the AI analysis summary.

---

From My Senior Dev