Plan Gate

Written for the variant you picked above: Dark

Build the control loop for a coding agent: a 46rem card (16px radius, 1px border) holding the agent's plan for one task, before and while it runs. Header: a small mono 'TASK' label over the task in 16px semibold ('Rotate the staging payments key and tell the team'); on the right the model (Claude's starburst mark in orange, 'Claude Opus 5.5') above a status pill with a dot — 'Drafting the plan', 'Waiting for your review' (amber dot), 'Running' (green, blinking), 'Waiting for you', 'A step failed' (red), 'Done'. The plan is a numbered list of steps that arrives one row at a time (240ms apart). Each row: a 24px numbered circle, the step's title in 14px medium, and under it the tool in mono ('vault.create'), and its risk class as a small coloured square and word — Read grey, Write blue, External amber, Irreversible red with the square turned 45°. On the right, a segmented gate control — Auto · Ask · Skip — and small up/down arrows. Irreversible steps offer only Ask and Skip: they can never run unattended. Read steps default to Auto, everything else to Ask. Skipped steps strike through. Titles are buttons: click to reword in place. Alt+↑/↓ on a focused row moves it. Footer: '6 steps · 4 gated — the agent stops at each gated step and shows you exactly what it will do' and an ink 'Run plan ⌘↵' button. Running: steps run in order with a spinner in their circle and turn into a green tick when done. A gated step stops, its row tints, and a gate opens under it showing the exact action — a '$ command' block, a red/green diff of a named file, or a chat-bubble message draft with 'To #deploys'. Buttons: Approve ⌘↵ (ink), Edit (the action becomes an editable mono textarea; 'Approve edited'), Deny (red; asks 'Why not? The agent replans around your reason.'), and Take over ('It's yours. The agent waits until you mark it done.'). Irreversible steps add a red line: 'This can't be undone.' Denying with a reason replans: the denied step stays struck with a red 'REMOVED' flag, a blue-tinted replacement appears after it with a 'NEW' flag (e.g. 'Schedule the old key to be revoked in 24 hours'), later steps are rewritten to match (the team note stops claiming the key is revoked), a banner says 'Replanned. You denied “…”: “reason”', and the run waits for you to Continue. One test step fails on its first attempt: its circle turns red and a gate shows the failing test with Retry and Skip step. While it runs the footer becomes a steering field — 'Steer: a note for the next step…' — whose note is queued and attached to the next step that starts ('↳ your note: …'), a done/total counter, Pause (edit what hasn't run, then Continue) and Cancel. Each finished step says how it got through: ran on its own, approved by you, edited then approved, done by you, skipped, denied. At the end a dashed receipt line totals them, with 'Draft a new plan'. Selected variant — Dark (dark): Palette for this theme (Dark): --plgt-add rgb(143 209 138 / 0.12); --plgt-card #151515; --plgt-claude #e08560; --plgt-code #0f0f0f; --plgt-del rgb(240 100 90 / 0.12); --plgt-external #e6c26b; --plgt-faint #5c5c5c; --plgt-focus #8ab4f8; --plgt-go #ededed; --plgt-go-ink #111111; --plgt-hover rgb(255 255 255 / 0.06); --plgt-ink #ececec; --plgt-irrev #f0645a; --plgt-line #2a2a2a; --plgt-line-soft rgb(255 255 255 / 0.06); --plgt-muted #8c8c8c; --plgt-new rgb(124 180 240 / 0.08); --plgt-ok #8fd18a; --plgt-raise #1c1c1c; --plgt-read #8e8e8e; --plgt-write #7cb4f0. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "dark". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Review the plan: set each step's gate (Auto, Ask, Skip), reword a step by clicking it, reorder with the arrows or Alt+↑/↓. Run with the button or ⌘/Ctrl+Enter. At a gate: Approve (⌘/Ctrl+Enter), Edit, Deny with a reason, or Take over. Type a note while it runs to steer the next step; pause to edit what hasn't run. Motion: Steps arrive 240ms apart; running steps show a spinner and settle into a tick; a gate opens under its step with a short drop; the status dot blinks while running. Reduced motion shows the whole plan at once and removes all motion. Accessibility: The plan is an ordered list labelled by the task; each gate is a radiogroup; reorder buttons are labelled with the step number; the open gate is a labelled group that receives focus; diff lines are announced as added or removed; every state change goes to a polite status region. Responsive behavior: Below 560px of its own width the header stacks, gate controls move under each step with larger targets, and an open gate's buttons stick to its bottom edge as a full-width action bar. Touch: Every control is a button with a 30px or larger target; reordering uses the arrow buttons rather than drag. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Review the plan: set each step's gate (Auto, Ask, Skip), reword a step by clicking it, reorder with the arrows or Alt+↑/↓. Run with the button or ⌘/Ctrl+Enter. At a gate: Approve (⌘/Ctrl+Enter), Edit, Deny with a reason, or Take over. Type a note while it runs to steer the next step; pause to edit what hasn't run.

Motion

Steps arrive 240ms apart; running steps show a spinner and settle into a tick; a gate opens under its step with a short drop; the status dot blinks while running. Reduced motion shows the whole plan at once and removes all motion.

Accessibility

The plan is an ordered list labelled by the task; each gate is a radiogroup; reorder buttons are labelled with the step number; the open gate is a labelled group that receives focus; diff lines are announced as added or removed; every state change goes to a polite status region.

Responsive

Below 560px of its own width the header stacks, gate controls move under each step with larger targets, and an open gate's buttons stick to its bottom edge as a full-width action bar.

On touch

Every control is a button with a 30px or larger target; reordering uses the arrow buttons rather than drag.