Split-Brief Composer

Written for the variant you picked above: Dark

Build a composer for a coding agent as two surfaces in one 62rem card (18px radius): on the left 'WHAT SHOULD HAPPEN?' and on the right 'HOW SHOULD THE AGENT DO IT?', with small mono caps headings. The left is the card's surface and holds a large borderless prompt (19px/30px, at least 300px tall) and a footer under a dashed rule: a word count (or 'Plain words are fine — the right side reads them.'), ⌘ ↵ key hints and a round send button. The right is a slightly different surface with a hairline between them. The right side has four groups, each with a mono caps legend: MODE as pills with the mode's line icon (Agent, Plan, Debug, Multitask, Ask); MODEL as pills with the maker's logo (Claude's orange, OpenAI's blue, Grok's white on a black disc); EFFORT as five steps whose bars rise from 8px to 24px and fill up to the chosen level in the level's colour (Low grey, Medium green, High amber, Extra High violet, Max red); CONTEXT as a list of files with checkboxes, token counts, and in the legend the total and the share of the chosen model's window. A selected pill gets a 13% tint and a 1.5px ring in its own colour. The right side reads the left a beat after typing stops, using plain keyword rules (timeout or error → Debug; plan or migrate → Plan; a question → Ask; several lines → Multitask; carefully or production → more effort; named things → files), but it only suggests: a blue '• suggested' tag appears on the pill it would choose, a dashed blue outline on the effort step it would raise to, an italic reason under the group ('Suggested Debug: you wrote “time out”.'), and files you named float to the top with a blue outline and 'mentioned · add'. A blue 'Apply 3 suggestions' button in the header takes them all at once. Nothing is ever changed for you. Below 720px of its own width the two stack: the prompt on top, and the right side collapses into a drawer row 'HOW Agent · Astra · Medium · 0 files ⌄' with a blue count of suggestions; tapping it opens the groups beneath. Selected variant — Dark (dark): Palette for this theme (Dark): --spbf-agent #d4d4d4; --spbf-ask #8fd18a; --spbf-card #161616; --spbf-claude #e08560; --spbf-debug #f08c7b; --spbf-e0 #8e8e8e; --spbf-e1 #6cc08b; --spbf-e2 #e6c26b; --spbf-e3 #b48cf2; --spbf-e4 #f0645a; --spbf-faint #5a5a5a; --spbf-focus #8ab4f8; --spbf-go #ededed; --spbf-go-ink #111111; --spbf-hover rgb(255 255 255 / 0.05); --spbf-ink #ececec; --spbf-line #2a2a2a; --spbf-line-soft rgb(255 255 255 / 0.06); --spbf-multitask #7cc5ee; --spbf-muted #8c8c8c; --spbf-off #353535; --spbf-openai #5b9bff; --spbf-opt #222222; --spbf-plan #e6c26b; --spbf-side #1b1b1b; --spbf-sug #8ab4f8; --spbf-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: Write on the left. On the right, pick a mode, model, effort and files, or accept what it suggests — one at a time by choosing the tagged option, or all at once with Apply. ⌘/Ctrl+Enter sends. On narrow screens the right side is a drawer you open from its summary row. Motion: Suggestion tags and the Apply button fade in, the tag's dot pings twice, effort bars fill to the new level, the drawer chevron turns; reduced motion makes every change instant. Accessibility: Two labelled regions; mode, model and effort are radio groups, files are checkboxes, each option names itself and describes what it does; suggestions are visible text inside the option they apply to; the drawer toggle has aria-expanded; changes are announced politely. Responsive behavior: Below 720px of its own width the surfaces stack, the right side becomes a drawer with a summary and suggestion count, and targets grow to 38–40px. Touch: Every option 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

Write on the left. On the right, pick a mode, model, effort and files, or accept what it suggests — one at a time by choosing the tagged option, or all at once with Apply. ⌘/Ctrl+Enter sends. On narrow screens the right side is a drawer you open from its summary row.

Motion

Suggestion tags and the Apply button fade in, the tag's dot pings twice, effort bars fill to the new level, the drawer chevron turns; reduced motion makes every change instant.

Accessibility

Two labelled regions; mode, model and effort are radio groups, files are checkboxes, each option names itself and describes what it does; suggestions are visible text inside the option they apply to; the drawer toggle has aria-expanded; changes are announced politely.

Responsive

Below 720px of its own width the surfaces stack, the right side becomes a drawer with a summary and suggestion count, and targets grow to 38–40px.

On touch

Every option is a tap target; nothing depends on hover.