feat(web): symphony kanban page with workflow-run drill-through

[Ddell12]

Summary

• Problem: Phase 3 wired /api/symphony/* into the Archon server, but operators had no UI — managing the autonomous tracker dispatcher meant curl-ing JSON.
• Why it matters: Replaces the standalone symphoney-codex/web/ Next.js workspace and unblocks Phase 5 retirement of that repo.
• What changed: Adds a /symphony route to @archon/web that renders running, retrying, and historical dispatches as a kanban with lifecycle / tracker-state / repository group-by, polls every 5s via TanStack Query, and deep-links each card to Archon's existing /workflows/runs/:runId page for execution detail.
• What did not change (scope boundary): No new API endpoints; no issue creation modal (no POST /api/symphony/issues exists); no per-issue detail sheet; no SSE streaming (5s polling is the v1 contract); no idle column (no idle-issue listing endpoint); no React Testing Library (tests stay at the lib boundary).

UX Journey

Before

Operator                Archon server
────────                ─────────────
curl /api/symphony/state ──▶ JSON snapshot
curl /api/symphony/dispatches?status=failed ──▶ JSON list
curl -X POST /api/symphony/dispatch -d '{"dispatch_key":"linear:APP-1"}' ──▶ JSON ack

(no UI; operators read raw JSON)

After

Operator                  Web UI                   Archon server
────────                  ──────                   ─────────────
opens /symphony  ───────▶ [SymphonyPage]
                           [SymphonyKanban]  ────▶ GET /api/symphony/state          (5s poll)
                                            ────▶ GET /api/symphony/dispatches      (5s poll)
sees kanban    ◀────────  cards by lifecycle
clicks View Run──────────▶ navigates to /workflows/runs/:runId  (existing Archon UI)
clicks Dispatch──────────▶ POST /api/symphony/dispatch
clicks Cancel  ──────────▶ POST /api/symphony/cancel
clicks Refresh ──────────▶ POST /api/symphony/refresh

Architecture Diagram

Before

@archon/server
  └─ routes/api.symphony.ts ──▶ /api/symphony/*  (Phase 3)

@archon/web
  ├─ App.tsx                (no /symphony route)
  ├─ TopNav.tsx             (no Symphony tab)
  └─ lib/api.generated.d.ts (no Symphony schemas)

After

@archon/server
  └─ routes/api.symphony.ts ──▶ /api/symphony/*  (unchanged)

@archon/web
  ├─ App.tsx                              [~] adds <Route path="/symphony">
  ├─ components/layout/TopNav.tsx          [~] adds Symphony tab (Inbox icon)
  ├─ lib/api.generated.d.ts                [~] regen, now includes Symphony*
  ├─ lib/symphony/                         [+] new lib
  │   ├─ types.ts                          [+] re-export of generated schemas + SymphonyCard
  │   ├─ client.ts                         [+] typed fetch wrappers
  │   ├─ transform.ts                      [+] state ∪ dispatches → SymphonyCard[] dedup
  │   ├─ group.ts                          [+] lifecycle/status/repository
  │   ├─ use-symphony.ts                   [+] TanStack Query hooks
  │   └─ {transform,group,client}.test.ts  [+] 25 bun tests
  ├─ components/symphony/                  [+] new components
  │   ├─ SymphonyKanban.tsx                [+] container, group toggle, refresh
  │   ├─ SymphonyColumn.tsx                [+] one column
  │   └─ SymphonyCard.tsx                  [+] card with View Run / Dispatch / Cancel
  └─ routes/SymphonyPage.tsx               [+] page chrome

Connection inventory (list every module-to-module edge, mark changes):

From	To	Status	Notes
@archon/web SymphonyPage	SymphonyKanban	new	route mounts the kanban
SymphonyKanban	useSymphonyCards	new	TanStack Query, 5s polling
useSymphonyCards	symphony/client	new	6 typed wrappers
symphony/client	/api/symphony/*	new	6 endpoints
symphony/client	api.generated.d.ts	new	typed responses
SymphonyCard	react-router <Link>	new	deep-links into /workflows/runs/:runId
TopNav	App.tsx route table	modified	one new tab
App.tsx	SymphonyPage	new	/symphony route
symphony/use-symphony	@tanstack/react-query	unchanged	reuses existing client

Label Snapshot

• Risk: risk: low
• Size: size: M
• Scope: web
• Module: web:symphony

Test plan

• bun --filter @archon/web test — 25 new tests across transform, group, client (live state vs. stale terminal dispatch dedup, lifecycle column ordering, dispatch_key serialisation, error path)
• bun run type-check — green across all packages
• bun run lint --max-warnings 0 — green
• bun run format:check — green
• Manual smoke in Chrome: /symphony renders, the live APP-293 completed dispatch appears with correct View Run → /workflows/runs/ba375719… deep link, group toggle (Lifecycle / Tracker state / Repository) rebuckets without errors, no console errors
• Verified types via bun --filter @archon/web generate:types against a server with ~/.archon/symphony.yaml mounted; SymphonyStateResponse | SymphonyDispatchRow | … now in api.generated.d.ts
• Live-state integration smoke (Linear → running → View Run → dashboard) requires a freshly dispatched workflow; defer to Phase 5 retirement validation

Known pre-existing failure: 3 @archon/workflows DAG loader tests fail on dev (unrelated to this PR; reproduces on a clean stash). Tracked in repo memory.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Rate limit exceeded

@Ddell12 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 36 minutes and 8 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 36866d01-99eb-427d-8a54-05145bd0e4b8

📥 Commits

Reviewing files that changed from the base of the PR and between a7b2cec and 79f51a1.

📒 Files selected for processing (16)

• packages/web/src/App.tsx
• packages/web/src/components/layout/TopNav.tsx
• packages/web/src/components/symphony/SymphonyCard.tsx
• packages/web/src/components/symphony/SymphonyColumn.tsx
• packages/web/src/components/symphony/SymphonyKanban.tsx
• packages/web/src/components/symphony/index.ts
• packages/web/src/lib/api.generated.d.ts
• packages/web/src/lib/symphony/client.test.ts
• packages/web/src/lib/symphony/client.ts
• packages/web/src/lib/symphony/group.test.ts
• packages/web/src/lib/symphony/group.ts
• packages/web/src/lib/symphony/transform.test.ts
• packages/web/src/lib/symphony/transform.ts
• packages/web/src/lib/symphony/types.ts
• packages/web/src/lib/symphony/use-symphony.ts
• packages/web/src/routes/SymphonyPage.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch phase-4-web-page

---

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

_{Review rate limit: 0/1 reviews remaining, refill in 36 minutes and 8 seconds.}

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