fix(web): Keep plan task counts visible

[stickerdaniel]

Closes #8222.

What Changed

Plan progress pills now scroll inside a width-capped strip with faded edges. The active task uses the remaining space, and the completed/total count stays pinned on the right. Short plans keep their compact layout.

Why

Long plans could push both the active task and count outside the row.

UI Changes

Before · 62 steps	After · 62 steps	After · 5 steps, no overflow

Verified with real 62-step and 5-step plans at 1280×800. The focused test, formatting, targeted lint, and web typecheck pass.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change
• This change does not involve animation

---

Note

Low Risk
Chat UI layout-only change in the collapsed turn-plan row, covered by a new render test.

Overview
Fixes long turn-plan rows where progress pills could crowd out the active task label and completed/total counter.

In TurnPlanTimelineRow, multi-step progress pills move into a 50%-width clipped strip with faded edges and horizontal wheel scrolling; the current step label uses flex-1 so it keeps the middle space and truncates; the N/M counter stays a fixed sibling on the right.

Adds a static markup test with a 48-step plan to lock in the layout classes and 3/48 counter visibility.

^{Reviewed by Cursor Bugbot for commit e8d6a6d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Keep plan task counter outside the scrollable pills container in TurnPlanTimelineRow

• Wraps the progress pills in a width-constrained, horizontally clipped span with a faded edge mask and wheel-scroll support in MessagesTimeline.tsx
• The plan label span gains flex-1 to fill remaining space while keeping truncation
• The completed/total counter stays a separate sibling, remaining visible regardless of pill scroll position
• Adds a test asserting the container classes, mask, and counter placement for a 48-step plan
• Behavioral Change: progress pills now have max-w-[50%] and overflow-x-hidden; wheel events adjust scrollLeft via onWheel

^{Macroscope summarized e8d6a6d.}

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cef94806-a7cd-4582-b7db-3b5cecaf88f9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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.}

[macroscopeapp]

One finding on the new horizontally scrollable progress-pill container: it is aria-hidden but, as a scrollable box, Chromium (Electron 41 / Chrome 127+) makes it keyboard focusable by default once it overflows, which adds a hidden tab stop inside the plan toggle button. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is a small, localized UI fix that keeps the plan counter visible, but the new clipped progress strip may hide the active task and is not navigable through keyboard, touch, or ordinary vertical-wheel input. The resulting indicator behavior and accessibility need human verification.

^{You can add or adjust custom eligibility rules. Learn more.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit fc0323f. Configure here.}

[macroscopeapp]

One finding on the new plan-progress strip: the clipped segment bar can contradict the counter for long plans, and its only scroll affordance is mouse-wheel-only.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

The strip is aria-hidden with overflow-x-hidden, so this wheel handler is its only way to move: keyboard, touch, and plain vertical-wheel users can never reach the clipped pills, and nothing scrolls the in-progress pill into view. For the long plans this PR targets, the visible window only fits ~(0.5 * row width) / 12px pills, so once the active step passes it the bar renders entirely bg-success while the counter still reads e.g. 30/48 — the indicator ends up contradicting the count this change is restoring.

Consider letting the pills shrink to fit the capped width instead of clipping them (inner children something like min-w-px max-w-2.5 flex-1 inside a plain flex ... max-w-[50%] span). That keeps the full plan and the active segment visible at any length and lets the mask, the hidden overflow, and this wheel handler go away.

^{Posted via Macroscope — UI Consistency}

[stickerdaniel]

Superseded by #8734, which removed the affected historical plan row. I verified current main against the original 62-step thread: the row no longer renders, and the active task summary omits segments above 10 while keeping the count visible.