fix(frontend): anchor Inspect turn before the working dots

[ardaerzin]

Context

Follow-up to #5159. The working dots rendered first in the meta row under the last turn, with "Inspect turn" after them. Two visual defects: when the run settled the dots unmounted and the button jumped left by the dots' width, and while a run was busy the last turn's button sat indented relative to the buttons on older turns above it.

Changes

Pure JSX reorder in AgentChatPanel: the "Inspect turn" affordance now renders first and the dots trail it (Inspect turn · · ·). The button's left edge is anchored and aligned across all turns at all times; the dots appear and vanish at the trailing end of the line, where nothing follows them, so settling moves nothing. In chat mode (no inspect button) the dots stand alone as before.

Keeping the dots on the left with permanently reserved width was considered and rejected: it would indent every turn's button forever for a transient signal.

Tests / notes

• eslint and prettier clean. The diff swaps two existing JSX blocks inside the same row; no logic or types changed.

What to QA

• In Build mode, send a message and let the run finish. "Inspect turn" does not move when the dots disappear.
• While a run streams, compare the last turn's "Inspect turn" with older turns above: their left edges line up.
• Regression: in maximized chat mode the dots still show alone under the latest content while the run is busy.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	Jul 8, 2026 3:19pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 006a2502-6a57-47e1-ae01-0531d837c5d8

📥 Commits

Reviewing files that changed from the base of the PR and between 589cf60 and 153ab23.

📒 Files selected for processing (1)

• web/oss/src/components/AgentChatSlice/AgentChatPanel.tsx

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Adjusted the chat message meta row so the “Inspect turn” control appears before the loading indicator.
  • Improved the ordering of the inline status elements beneath the latest message for a clearer, more consistent interface.

Walkthrough

The change adjusts rendering order within AgentChatPanel's meta row so that the WorkingDots indicator now appears after the "Inspect turn" button instead of before it, along with an updated inline comment explaining the layout.

Changes

Meta-row Rendering Update

Layer / File(s)	Summary
Reorder WorkingDots relative to Inspect turn button web/oss/src/components/AgentChatSlice/AgentChatPanel.tsx	Meta-row inline comment and wrapper updated; WorkingDots now renders after the "Inspect turn" button instead of before it.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Possibly related PRs

• Agenta-AI/agenta#5008: Also modifies the renderMessage meta-row logic in the same file, extending it with trace-based timestamp handling that may overlap with this reordering change.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the UI change: reordering Inspect turn ahead of the working dots to anchor the button.
Description check	✅ Passed	The description accurately describes the JSX reorder and the resulting layout fix, which matches the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fe-fix/agent-chat-meta-row-no-shift

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[ardaerzin]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.