Agent Composer

Written for the variant you picked above: Dark

Build the input for a coding agent as one 46rem card (14px radius, a 1px border that brightens slightly while focused). The prompt is the surface; every other control lives on a single quiet row underneath it. Top of the card, only when files are attached: context chips — 24px tall, 6px radius, a faint fill and inner hairline, a tiny bold mono file-type badge coloured by type (TS blue, LOG ochre, SQL violet, folders as a folder glyph), the file name, and a 20px × that appears on hover or focus (always visible on touch). Hovering a chip shows its full path and token count. The prompt: a borderless textarea, 15px/24px, three lines tall and growing to twelve, placeholder 'Describe a task — @ to add files'. Typing '@' opens the file list filtered by what follows; Enter attaches the match as a chip and leaves the file's name in the sentence. The row, left to right: • Mode pill (30px, 8px radius): a 15px line icon + name + small chevron, text and icon in the mode's colour on a 12% tint of it. Modes and icons: Agent (an infinity loop, neutral grey), Plan (two bullets with lines, amber), Debug (a bug, coral), Multitask (two overlapping rings, sky blue), Ask (a speech bubble, green). The menu opens above the card: 34px single-line rows of icon + name, a tick on the current one, and a footer that describes whichever row is hovered or focused ('Edits files and runs commands until the task is done.') with its permissions in mono in that mode's colour. Shift+Tab in the textarea cycles modes. In Multitask, each non-empty line gets a small number in a left gutter (drawn from a mirror of the textarea so wrapped lines stay aligned): each line is its own task. • Model button: the maker's logo (OpenAI's mark, Claude's own starburst for Claude models, xAI's mark) at 15px + 'Claude Opus 5.5' + chevron. The button takes the model's colour like the mode pill does: Claude a warm orange, GPT-6 Astra a clear blue, Grok solid black with a white logo and a hairline. Its menu lists GPT-6 Astra, Claude Opus 5.5 and Grok 4.7 as logo + name, with the context window in small mono on the right and a tick on the current one. • Effort: five ascending 3px bars (4–14px) and the level's name in muted text (Low, Medium, High, Extra High, Max). Drag across the bars to scrub, click the name to step up, or use arrow keys; filled bars and the label take the level's colour — Low grey, Medium green, High amber, Extra High violet, Max red — and the rest stay dark grey. • On the right: a context ring (18px circle, stroke-dasharray from the percentage, amber past 65%, coral past 85%) that opens a breakdown — percentage of the window, a thin segmented bar (instructions, files, conversation, kept for thinking — higher effort reserves more), a legend with counts and 'Remove export-friday.log −21.4k'; a paperclip that opens a searchable file tree (folders expand with a caret, rows show the file-type badge, token count and a tick when attached); and one 32px round light button: a microphone while the prompt is empty (Web Speech dictation where available, a plain message where not), an up-arrow once there's text (it pops in), a stop square while a run is going. Sending (Enter; Shift+Enter for a new line): the prompt clears and a 36px line appears at the top of the card — a spinner, the mode's icon and name in its colour, the current step ('Editing exporter/retry.ts') and the brief, truncated and faint. Steps advance; when done the spinner becomes a green tick and the result stays there ('2 files changed · tests pass') until the next send. Selected variant — Dark (dark): Palette for this theme (Dark): --agcm-agent #d4d4d4; --agcm-ask #8fd18a; --agcm-card #181818; --agcm-chip #222222; --agcm-debug #f08c7b; --agcm-e0 #8e8e8e; --agcm-e1 #6cc08b; --agcm-e2 #e6c26b; --agcm-e3 #b48cf2; --agcm-e4 #f0645a; --agcm-faint #5e5e5e; --agcm-focus #8ab4f8; --agcm-full #f08c7b; --agcm-go #d6d6d6; --agcm-go-ink #121212; --agcm-go-on #f4f4f4; --agcm-hover rgb(255 255 255 / 0.06); --agcm-ink #e8e8e8; --agcm-line #2b2b2b; --agcm-line-soft rgb(255 255 255 / 0.06); --agcm-log #d0ad6b; --agcm-m-astra #5b9bff; --agcm-m-claude #e08560; --agcm-m-grok-bg #000000; --agcm-m-grok-ink #ffffff; --agcm-m-grok-line #3d3d3d; --agcm-md #a3a3a3; --agcm-multitask #7cc5ee; --agcm-muted #8e8e8e; --agcm-off #3a3a3a; --agcm-plan #e6c26b; --agcm-pop #1d1d1d; --agcm-pop-line #333333; --agcm-shadow 0 16px 40px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(0 0 0 / 0.4); --agcm-sql #cf93d9; --agcm-ts #74a8ff; --agcm-warn #e6c26b. 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: Type and press Enter (Shift+Enter for a new line, Shift+Tab to change mode). '@' or the paperclip adds files: ↑/↓ move, → and ← open and close folders, Space or Enter toggles, Escape closes. Mode and model menus: arrows, Home/End, Escape returns focus. Drag the effort bars, click the level name, or use arrow keys on it. The ring opens the context breakdown. The round button dictates, sends, or stops. Motion: Menus rise 4px in 160ms; chips scale in; the mode pill crossfades to the new colour; effort bars fill and lift slightly on hover; the ring eases to new values; the send arrow pops in; a spinner turns while a run is going. Reduced motion keeps every change instant. Accessibility: A labelled textarea; the '@' list is announced through aria-activedescendant; the file picker is a combobox over a multi-select listbox; mode and model are menu buttons with menuitemradio items (mode rows carry their description); effort is a slider with a spoken value and hint; the ring and the round button have descriptive labels that change with state; changes and run results are announced in a polite status region. Responsive behavior: Below 520px of its own width the model shows only its logo, targets grow to 36px, the run line drops the brief, and menus span the card's width. Below 360px the mode pill shows only its icon. The textarea uses 16px text on phones so it never zooms. Touch: Remove buttons are always visible on touch; effort can be tapped or dragged; every control is at least 36px on narrow widths. 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

Type and press Enter (Shift+Enter for a new line, Shift+Tab to change mode). '@' or the paperclip adds files: ↑/↓ move, → and ← open and close folders, Space or Enter toggles, Escape closes. Mode and model menus: arrows, Home/End, Escape returns focus. Drag the effort bars, click the level name, or use arrow keys on it. The ring opens the context breakdown. The round button dictates, sends, or stops.

Motion

Menus rise 4px in 160ms; chips scale in; the mode pill crossfades to the new colour; effort bars fill and lift slightly on hover; the ring eases to new values; the send arrow pops in; a spinner turns while a run is going. Reduced motion keeps every change instant.

Accessibility

A labelled textarea; the '@' list is announced through aria-activedescendant; the file picker is a combobox over a multi-select listbox; mode and model are menu buttons with menuitemradio items (mode rows carry their description); effort is a slider with a spoken value and hint; the ring and the round button have descriptive labels that change with state; changes and run results are announced in a polite status region.

Responsive

Below 520px of its own width the model shows only its logo, targets grow to 36px, the run line drops the brief, and menus span the card's width. Below 360px the mode pill shows only its icon. The textarea uses 16px text on phones so it never zooms.

On touch

Remove buttons are always visible on touch; effort can be tapped or dragged; every control is at least 36px on narrow widths.