Agent Receipt

Written for the variant you picked above: Dark

Build a composer for a coding agent where you don't configure anything up front. On the left a large prompt (14px radius, 17px/27px text, a small mono 'TASK' label, a hint 'The brief prints as you write. Change any line on it, then approve. ⌘↵'). On the right, a 22.5rem paper slip — a run brief that prints itself from what you typed. The slip: warm off-white paper (white on the light theme) with torn zigzag top and bottom edges (a conic-gradient mask) and a soft drop shadow, set in a monospace. 'RUN BRIEF' in spaced caps with 'No. 0042' on the right, the time and repository underneath, then a dashed rule. Lines, each a small caps label and a value: TASK (the first sentence, in a sans at 14px semibold); AGENT (the maker's logo — Claude's in orange, OpenAI's in blue, Grok's white on a black disc — and the model name); MODE (the mode's line icon and name in the mode's colour); CONTEXT ('3 files · 29.6k tokens' and the file names); EFFORT (five rising bars and the level, in the level's colour: Low grey, Medium green, High amber, Extra High violet, Max red). Under each value, a faint italic reason: 'you wrote “timeout”', 'you mentioned “retry” and “exporter”', 'long, careful work'. Then a dashed rule, 'EST. CONTEXT 34% of 1M', and a full-width ink 'RUN →' button. Inference is deterministic and visible: several lines → Multitask; words like bug, error, timeout → Debug; plan, design, migrate → Plan; a question → Ask; otherwise Agent. Named things map to files (retry/backoff → retry.ts, csv → csv-writer.ts, Fridays/timeout → the Friday log). Effort starts from the mode and moves with words like carefully or production (+1), critical (Max), or quick, just, typo (−1). The model follows: careful or large work → Claude Opus 5.5, quick answers → Grok 4.7, otherwise GPT-6 Astra. The slip reprints a beat after typing stops, and any line that changed flashes a pale highlighter yellow. Every value is a dotted-underlined button: it opens its options in place on the slip (pills for agent, mode and effort; a checklist of files with token counts). Choosing one marks the line 'set by you · use guess' and later typing no longer changes it. Empty, the slip shows dotted placeholder rules and 'Write a task — the brief prints here.' Approving (RUN or ⌘↵) slams an 'APPROVED' stamp onto the slip, rotated −12°, then the slip lifts away and a new numbered one prints in from the top; the approved order joins a short log under the prompt that turns from 'running' to 'done'. Selected variant — Dark (dark): Palette for this theme (Dark): --arcp-faint #5a5a5a; --arcp-focus #8ab4f8; --arcp-fresh rgb(255 214 102 / 0.45); --arcp-input #171717; --arcp-input-line #2a2a2a; --arcp-muted #8c8c8c; --arcp-ok #8fd18a; --arcp-page-ink #ececec; --arcp-paper #f2efe8; --arcp-paper-faint #a9a397; --arcp-paper-hover rgb(29 27 24 / 0.06); --arcp-paper-ink #1d1b18; --arcp-paper-line rgb(29 27 24 / 0.22); --arcp-paper-muted #6f6a60; --arcp-shadow drop-shadow(0 22px 28px rgb(0 0 0 / 0.55)) drop-shadow(0 2px 3px rgb(0 0 0 / 0.4)). 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 the task; the brief prints itself. Click any value on the slip to change it in place, or 'use guess' to hand it back. Approve with RUN or ⌘/Ctrl+Enter. Motion: The slip prints in from the top (550ms); changed lines flash a highlighter yellow; options open in place; approving stamps the slip with a short overshoot, then it lifts and fades as the next one prints. Reduced motion makes every change instant. Accessibility: A labelled textarea; the brief is a description list inside a labelled section and updates politely; every value is a button with aria-expanded that controls its group of pressed-state option buttons; approvals and changes are announced in a status region. Responsive behavior: Below 720px of its own width the slip sits under the prompt, centred and capped at 26rem; the prompt uses 16px text. Touch: Every line is a tap target and options are pill buttons; 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 the task; the brief prints itself. Click any value on the slip to change it in place, or 'use guess' to hand it back. Approve with RUN or ⌘/Ctrl+Enter.

Motion

The slip prints in from the top (550ms); changed lines flash a highlighter yellow; options open in place; approving stamps the slip with a short overshoot, then it lifts and fades as the next one prints. Reduced motion makes every change instant.

Accessibility

A labelled textarea; the brief is a description list inside a labelled section and updates politely; every value is a button with aria-expanded that controls its group of pressed-state option buttons; approvals and changes are announced in a status region.

Responsive

Below 720px of its own width the slip sits under the prompt, centred and capped at 26rem; the prompt uses 16px text.

On touch

Every line is a tap target and options are pill buttons; nothing depends on hover.