fix(web): sidebar v2 polish — hotkey hints, working duration, in-flight fade, icon order, settled sort, no list animation

[t3dotgg]

Six nits on the sidebar v2 beta (#4026), each small and independent:

1. Holding cmd made the status disappear. The jump hotkey hint rendered in the same slot as the status/time label, so holding the modifier blanked out "Working"/"Done" on every row. Hints now render as a floating pill at the row's right edge (pointer-events-none, no layout shift) and the status slot never yields.

2. No way to see how long a thread has been working. The Working label now shows elapsed time (Working 3m), counting from the running turn's start (request time until adoption, session transition as a fallback). The timer ticks in its own component so the row doesn't re-render every second. The icon is deliberately static — no continuous compositor animation.

3. Working threads were too prominent. Working/waiting isn't a state we care about — done and read (seen but unsettled) are. In-flight rows (working, approval, input) now fade to 70% opacity and use the receded title treatment; hover restores full opacity. The old pulsing blue "Working" text is now a quiet muted label. Failed keeps its full-prominence treatment.

4. Cloud icon shifted the harness icon. The cloud (remote environment) icon rendered right of the harness icon, so the harness position jumped between local and remote threads. Cloud now sits on the left; the harness is the stable trailing anchor on every row.

5. Settled threads sorted (and labeled) by message time, not settled time. The settled tail now orders by settledAt (most recently settled first) and the slim-row timestamp shows the same value, falling back to last activity for auto-settled threads that carry no stamp — label and order share one candidate chain so they can't disagree.

6. Too much shifting when a thread moved. Superseded by Stabilize sidebar settling animations #4280, which landed first and fixed this upstream by keying rows per variant so settles cross-fade instead of FLIP-sliding through the list. This branch is rebased on top and keeps that behavior.

Review follow-ups

• resolveWorkingStartedAt / settledTimeLabel skip malformed timestamps (shared firstValidTimestamp helper) instead of passing them to the formatter
• jump hint pill is pointer-events-none so it can't block the settle/un-settle hover buttons

Verification

• bun run typecheck (apps/web) passes
• apps/web unit tests: 163 files, 1448 passed (includes new tests for the settled sort, working-start resolution incl. malformed timestamps, and duration formatting)

🤖 Generated with Claude Code

Note

Polish sidebar v2 with hotkey hints, live working duration, in-flight fade, and stable settled sort

• Adds WorkingDuration, a self-ticking component in SidebarV2.tsx that shows elapsed time for in-flight "working" rows, updating every second from resolveWorkingStartedAt.
• Adds JumpHintBadge, a non-interactive overlay that shows the jump hotkey hint without affecting row layout.
• In-flight rows (working/approval/input) now fade to reduced opacity and restore on hover; working status uses a muted style instead of animated text.
• Replaces ad-hoc settled sorting with sortSettledThreadsForSidebarV2, which orders by settledAt descending with fallback to latestUserMessageAt and stable id-based tie-breaking.
• Removes the --animate-sidebar-working-text CSS animation and its keyframes from index.css.

^{Macroscope summarized 0b82dfc.}

[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

Run ID: f4e1ee9c-4f2f-448f-af82-e33e0df3cc35

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch sidebar-v2-nits

---

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

[macroscopeapp]

Approvability

Verdict: Needs human review

1 blocking correctness issue found. UI polish changes to sidebar with new sorting logic and duration display. An unresolved review comment identifies a potential bug in sortSettledThreadsForSidebarV2 where the timestamp fallback chain may cause incorrect ordering for auto-settled threads.

^{You can customize Macroscope's approvability policy. Learn more.}

[jakeleventhal]

#4026 (comment) for visbility

Dismissing prior approval to re-evaluate ea2f4bb

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.

There are 3 total unresolved issues (including 1 from previous review).

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

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

[macroscopeapp]

🟡 Medium components/Sidebar.logic.ts:497

sortSettledThreadsForSidebarV2 falls back to latestUserMessageAt then updatedAt for auto-settled threads, but it skips latestTurn.requestedAt, startedAt, and completedAt — which threadLastActivityAt includes. A long-running auto-settled thread sorts by the earlier user-message time rather than by when the turn actually completed, so it appears older than it should and ends up out of order. Include the latest-turn activity timestamps in the fallback chain.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file @apps/web/src/components/Sidebar.logic.ts around line 497:

`sortSettledThreadsForSidebarV2` falls back to `latestUserMessageAt` then `updatedAt` for auto-settled threads, but it skips `latestTurn.requestedAt`, `startedAt`, and `completedAt` — which `threadLastActivityAt` includes. A long-running auto-settled thread sorts by the earlier user-message time rather than by when the turn actually completed, so it appears older than it should and ends up out of order. Include the latest-turn activity timestamps in the fallback chain.