feat(web): React UI v2.0 — Phase 3 Tasks 32-35 (Shell components)

[aksOps]

Summary

Phase 3 Batch A of React UI v2.0 — the four visual shell components. Task 36 (App wiring) follows in a separate PR.

• Task 32 — <Topbar> (web/src/shell/Topbar.tsx, 48 px) — brand mark + name + breadcrumb (app/env) + health pill + search box + approvals badge (amber, only when count>0) + New Session button + user identity. Props-driven; emits onSearch/onNew/onApprovalsClick intents. 7 tests.
• Task 33 — <Statusbar> (web/src/shell/Statusbar.tsx, 24 px) — connection state dot + SSE event counter + vm_seq (color-coded by state: in-sync/replaying/divergent) + optional p95 latency + runtime/ui versions. 3 tests.
• Task 34 — <SessionsRail> (web/src/shell/SessionsRail.tsx, 220 px) — sessions list with Active/Recent grouping (status-based), filter input, accent left-rail for active row, amber pending dot for awaiting_input sessions, empty state, onSelect callback. 8 tests.
• Task 35 — <FlowStrip> (web/src/shell/FlowStrip.tsx, 92 px) — the signature visual. Inline SVG agent graph with horizontal layout, breathing halo CSS animation on the active node (4 s ease-in-out), status-driven colors (idle / active / done / gated / error). Particles deferred to v2.1; v1 hero treatment is the halo. Respects prefers-reduced-motion. 5 tests.

Validation

• cd web && npm install → 0 vulnerabilities
• npm run typecheck → exit 0
• npx vitest run → 87 passed / 0 failed (Phase 2's 64 + 23 new)
• npm run build → clean, 10 kB CSS (added halo + modal keyframes), 194 kB JS

Nothing touches src/runtime/ — no dist/app.py regen.

Design notes

• All four components are props-driven — Task 36 (App wiring) is where hooks (useUiHints, useApprovalsQueue, useSessionList, useAgentDefinitions, useSessionFull) get composed and their results passed down. This keeps each component unit-testable without QueryClient/Context plumbing.
• <Topbar> onClick={onSearch} originally fired twice (bubbling from inner input). Fixed by wiring the click on the outer wrapper only — bubbling from the readonly input still reaches it. Documented in commit + reviewer notes.
• <FlowStrip> v1 lays out agents in declaration order with cubic-bezier edges between neighbors. Topology-aware layout honoring routes is a v2.1 enhancement once the spec hardens.
• Pending dot on <SessionsRail> rows uses status === 'awaiting_input' as the v1 signal (no per-session approval-count fetch). Refined in v2.1 if needed.

Test plan

• Vitest: 87/87 pass
• Typecheck: exit 0
• Build: clean
• Pytest backend stays green
• CI: lint + type + test + sonar + bundle + skill-lint
• CI: SonarCloud quality gate

🤖 Generated with Claude Code

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud