Stacked Brief

Written for the variant you picked above: Dark

Build a composer for a coding agent as a vertical brief you fill in, then fold. A 40rem card (18px radius, 1px border) with a small mono 'BRIEF' title and '2 of 5' on the right, then a ladder of five rows — TASK, MODE, MODEL, CONTEXT, EFFORT — joined on the left by a 1px rail through 26px numbered dots (01–05, small mono). One row is open at a time; its dot fills with ink. Closed rows show their label in mono caps and their answer: the task's text; the mode's line icon and name in its colour (Agent grey, Plan amber, Debug coral, Multitask sky, Ask green); the maker's logo and model (Claude orange, OpenAI blue, Grok white on a black disc); '2 files · 7.6k tokens' or 'Message only'; effort as little rising bars and the level in its colour (Low grey, Medium green, High amber, Extra High violet, Max red). An answered row's dot becomes a green tick and the rail beneath it turns faintly green; the next unanswered row reads 'Next'. Any row header reopens it. Open rows: TASK — a bordered textarea and an ink 'Next ↵' button (Enter works). MODE and MODEL — tiles (10px radius, a hairline) with the icon or logo, the name and a one-line description; choosing one closes the row and opens the next unanswered one, moving focus there. CONTEXT — a checklist of files with token counts and a button that reads 'Use 2 files' or 'No files — just the message'. EFFORT — five tiles whose bars rise from 8px to 28px, each in its level's colour, the chosen one ringed. The footer, under a dashed rule, says 'Answer 3 more' until every line is set, then 'Ready · 24% of Opus 5.5' in green beside an ink 'Fold brief' button. Folding compresses the card — its height glides (450ms) and its radius grows to 30px — into one line: the task in semibold over a row of the mode, model, file count and effort, with a round 'open again' button and a round send button. Sending starts a fresh ladder that keeps the previous choices and asks for a new task. Selected variant — Dark (dark): Palette for this theme (Dark): --stbf-agent #d4d4d4; --stbf-ask #8fd18a; --stbf-card #171717; --stbf-claude #e08560; --stbf-debug #f08c7b; --stbf-done #8fd18a; --stbf-e0 #8e8e8e; --stbf-e1 #6cc08b; --stbf-e2 #e6c26b; --stbf-e3 #b48cf2; --stbf-e4 #f0645a; --stbf-faint #5a5a5a; --stbf-focus #8ab4f8; --stbf-go #ededed; --stbf-go-ink #111111; --stbf-hover rgb(255 255 255 / 0.05); --stbf-ink #ececec; --stbf-line #2a2a2a; --stbf-line-soft rgb(255 255 255 / 0.06); --stbf-multitask #7cc5ee; --stbf-muted #8c8c8c; --stbf-off #353535; --stbf-openai #5b9bff; --stbf-plan #e6c26b; --stbf-tile #1e1e1e; --stbf-xai #ffffff. 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: Answer each row — write the task and press Enter, then pick a mode, a model, files and an effort; each choice moves you to the next row. Click any row to change it. When all five are set, Fold brief collapses the ladder into one line; send from there, or open it again. Motion: Rows open with a 4px drop; answers slide in; dots turn into ticks; folding and unfolding glide the card's height and corner radius over 450ms. Reduced motion makes every change instant. Accessibility: Row headers are disclosure buttons with aria-expanded; mode, model and effort are radio groups and files are checkboxes; focus moves to the next row after each answer; the folded line and its buttons are labelled; progress and results are announced politely. Responsive behavior: Below 480px of its own width the tiles stack in one column, labels tighten and file rows grow to 40px; the textarea uses 16px text on phones. Touch: Every row, tile and file is a tap target; nothing depends on hover. 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

Answer each row — write the task and press Enter, then pick a mode, a model, files and an effort; each choice moves you to the next row. Click any row to change it. When all five are set, Fold brief collapses the ladder into one line; send from there, or open it again.

Motion

Rows open with a 4px drop; answers slide in; dots turn into ticks; folding and unfolding glide the card's height and corner radius over 450ms. Reduced motion makes every change instant.

Accessibility

Row headers are disclosure buttons with aria-expanded; mode, model and effort are radio groups and files are checkboxes; focus moves to the next row after each answer; the folded line and its buttons are labelled; progress and results are announced politely.

Responsive

Below 480px of its own width the tiles stack in one column, labels tighten and file rows grow to 40px; the textarea uses 16px text on phones.

On touch

Every row, tile and file is a tap target; nothing depends on hover.