Add Done column to pipeline board. Adds the 'done' stage to
PipelineState, exposes it via the WebSocket and REST API, and
renders a Done column in the frontend pipeline board view.
Squash merge from feature/story-166_story_add_done_column_to_pipeline_board.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add `hiddenRosterAgents: ReadonlySet<string>` to LozengeFlyContext:
- Derived from pipeline: any agent currently assigned to a work item
- `flyingOutAgents` state keeps badge hidden for 500 ms during the
fly-out animation so the returning clone lands before the badge reappears
- Union of both sets exposed as `hiddenRosterAgents` in context
- Update AgentPanel: wrap each RosterBadge in a collapsing div
controlled by `hiddenRosterAgents`. The div transitions max-width
0→300px / opacity 0→1 so the roster gap closes/opens smoothly.
- Add tests covering:
- `hiddenRosterAgents` is empty when no agents are assigned
- Badge hidden immediately when agent appears in pipeline
- Badge hidden during fly-out (0–499 ms) and visible after (≥500 ms)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Implements Story 74: agent lozenges now animate as fixed-position overlays
that fly from the roster badge in AgentPanel to the story slot in StagePanel
(and back when the agent is removed), satisfying all acceptance criteria.
Key changes:
- LozengeFlyContext.tsx (new): coordinates FLIP animations via React context.
LozengeFlyProvider tracks pipeline changes, hides slot lozenges during
fly-in (useLayoutEffect before paint), then creates a portal-rendered
fixed-position clone that transitions from roster → slot (or reverse).
z-index 9999 ensures the clone travels above all other UI elements.
- AgentPanel.tsx: RosterBadge registers its DOM element with the context
so fly animations know the correct start/end coordinates.
- StagePanel.tsx: AgentLozenge registers its DOMRect on every render via
useLayoutEffect (for fly-out) and reads pendingFlyIns to stay hidden
while a fly-in clone is in flight. Added align-self: flex-start so the
lozenge maintains its intrinsic width and never stretches in the panel.
- Chat.tsx: right-column panels wrapped in LozengeFlyProvider.
- LozengeFlyContext.test.tsx (new): 10 tests covering fixed width,
fly-in/fly-out clone creation, portal placement, opacity lifecycle,
and idle vs active visual distinction.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
