Skip to content

feat(web): show running indicator for active sessions in sidebar#2075

Open
cal-gooo wants to merge 1 commit intoMoonshotAI:mainfrom
cal-gooo:feat/sidebar-running-indicator
Open

feat(web): show running indicator for active sessions in sidebar#2075
cal-gooo wants to merge 1 commit intoMoonshotAI:mainfrom
cal-gooo:feat/sidebar-running-indicator

Conversation

@cal-gooo
Copy link
Copy Markdown

@cal-gooo cal-gooo commented Apr 26, 2026

Summary

Adds a subtle "alive" marker to each running session in the sidebar so users can tell at a glance which sessions are busy without opening them.

  • SessionRunningIndicator component rendered next to the title for running sessions in both list and grouped views
  • A session is considered running when its session.status.state is busy or restarting
  • Three-layer composition, all CSS-only (no Framer Motion — many rows may animate at once): solid emerald core with drop-shadow, soft breathing halo, and a rotating orbital arc (conic-gradient + radial mask). Durations are intentionally offset (1.4s / 1.9s / 2.4s) so the layers never re-sync — gives it an organic "alive" feel rather than a mechanical spinner
  • Uses new --session-running* CSS tokens with light/dark variants so it matches the existing shadcn-style theme
  • Respects prefers-reduced-motion
  • Accessible: <output role="status" aria-label="Session is running">

Preview

Sidebar running indicator preview — light and dark

Left half is the light theme, right half is dark. Top: a sample sidebar with running and non-running rows interleaved. Bottom: the indicator enlarged so you can see the three animation layers.

Testing

Adds vitest + @testing-library/react to web/ (no prior JS test runner existed) and a SessionRunningIndicator test suite covering default label, semantic element, base class + core layer, custom label, and className merging.

web$ npm test
 Test Files  1 passed (1)
      Tests  5 passed (5)

Test plan

  • cd web && npm test — vitest suite passes
  • cd web && npm run typecheck — clean
  • cd web && npm run lint — clean (two pre-existing useSimplifiedLogicExpression errors in approval-dialog.tsx and session-files-panel.tsx were auto-fixed; behavior unchanged)
  • cd web && npm run build — clean
  • Manual: start a chat in a session and confirm the indicator appears on that row in the sidebar, then disappears after the turn completes

🤖 Generated with Claude Code


Open in Devin Review

Adds a subtle three-layer "alive" marker (core dot, breathing halo,
rotating orbital arc) to each running session row in the sidebar, so
users can tell at a glance which sessions are busy without opening
them. Derived from `session.status.state` (busy/restarting).

Also sets up vitest + testing-library in web/ and ships unit tests
for the new component. Two unrelated useSimplifiedLogicExpression
violations flagged by biome in approval-dialog.tsx and
session-files-panel.tsx were auto-fixed so `npm run lint` stays
clean after adding the new code.
Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.

Open in Devin Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant