design: pipeline status card and human gates UI for v0.9.0 milestone #18

[geoffjay]

Summary

Frontend scaffolding for the v0.10.0 Autonomous Development Pipeline ahead of the Conductor agent implementation. All components are production-quality with correct loading/empty/error states — they just need the backend to start returning data.

• PipelineStatusCard — new dashboard widget replacing the first "Coming Soon" stub. Three states: empty (conductor not yet deployed), loading (skeleton), populated (stack-indented merge queue + stats). Merge queue items show stack depth via └ prefix, an approval dot, and a CI indicator (running/passing/failing).
• PipelineGates — new Settings section that documents all 7 human interaction gates from the v0.10.0 spec (Define human interaction gates and tool policies for autonomous operation #611), grouped as always-human (4, locked) and configurable (3, with defaults). Read-only for now; becomes interactive once the conductor exposes a runtime settings endpoint.
• usePipelineStatus hook — stub returning null so the card renders its empty state. Contains a TODO comment with the exact memory service query pattern to replace it once the conductor (Create .agentd/agents/conductor.yml #603) starts writing pipeline digests.
• pipeline.ts types — PipelineStatus, PipelineQueueItem, PipelineGate, and the PIPELINE_GATES constant matching the v0.10.0 spec.

Design decisions

Stack depth rendering — queue items use └ tree characters (font-mono, muted) rather than indented boxes. Keeps the card compact on a narrow dashboard column while still conveying the stacking relationship visually.

Empty state copy — "Conductor not yet active / Deploy conductor.yml to activate the autonomous pipeline" — actionable and links the visual gap directly to the work needed (#603).

Gates as read-only reference — the configurable gates cannot be toggled in the UI yet because their runtime value comes from YAML, not a settings API. Displaying them statically is better than hiding them; operators should know what the system will do autonomously before deploying.

No new design tokens — all colours use existing semantic Tailwind classes (rose for always-human, green for autonomous-by-default, gray for human-by-default), consistent with StatusBadge and AgentRoleBadge patterns.

Depends on

• PR design: agent role badge system for v0.9.0 workforce expansion #600 (design/agent-role-badges) for the conductor role badge — independent merge order, no code conflict.

Follow-up (not in this PR)

• Wire usePipelineStatus to the memory service once the conductor writes pipeline digests (issues Create .agentd/agents/conductor.yml #603 / Create .agentd/workflows/conductor-sync.yml #604).
• Replace the gates: static list with a live fetch from the conductor settings endpoint when that lands.
• Add a /pipeline detail page for deep stack inspection (dependency graph view, per-PR drill-down).

Test plan

• Dashboard loads without errors; PipelineStatusCard shows "Conductor not yet active" empty state
• Empty state renders correctly in light and dark mode
• Settings page shows "Autonomous Pipeline Gates" section with correct gate groupings
• Always-human gates display Lock icon + red "Always human" pill
• Configurable gates display Settings2 icon + appropriate default pill
• No TypeScript errors (tsc --noEmit)
• Reduced-motion: CI spinner animate-spin is suppressed by motion-reduce:animate-none

🤖 Generated with Claude Code

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 55.39%. Comparing base (eeca345) to head (c598996).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #648      +/-   ##
==========================================
- Coverage   55.40%   55.39%   -0.02%     
==========================================
  Files         126      126              
  Lines       13518    13518              
==========================================
- Hits         7490     7488       -2     
- Misses       6028     6030       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.