Prompt studio

Mod+Enter

Runs the prompt for the selected test case from anywhere in the card, including the editors and the variable fields.

{{

In the editor, opens the list of known variables. Arrow up and down move, Enter or Tab inserts the variable as a chip, Escape closes the list. Typing a new name then }} creates a variable and a field for it.

Backspace, Delete

Remove a chip whole when the caret is beside it. Option or Ctrl with Backspace removes a word.

Mod+Z, Shift+Mod+Z

Undo and redo inside the editor. Typing within a short pause is one step.

Arrow leftorArrow right

On the System and User tabs, the test case control and the effort control, move the selection.

Arrow uporArrow down

In the version menu and the model menu, move between rows and select them.

Escape

Closes an open menu. In compare mode, returns to editing.

Tab

Moves through the version chip, model chip, tabs, editor, each variable field, the test cases, Run, and Copy or Retry.

• The editor is a role="textbox" with aria-multiline and an accessible name per tab; while the {{ list is open it points at the list with aria-controls and at the highlighted option with aria-activedescendant.
• System and User are real tabs with tabpanels. The hidden panel is inert, so it leaves the tab order and the reading order.
• Every variable field has a visible label in its variable's color, paired with a colored dot. Clicking a chip focuses its field.
• Status is never color alone: the version chip says Production or Latest, the run status pairs an icon with Reply, Stopped or Run failed, and an empty variable's chips switch to a dashed outline.
• The diff uses ins and del elements with visually hidden Added and Removed prefixes, plus a visible + or minus sign before each change and a strikethrough on removals.
• Version rows and model rows are radios in a labelled group. The Production marker is text, and the menu's status line says which version production serves.
• Runs, results, errors, promotions, undos and compare mode are announced through one polite status region, including when a run is simulated.
• Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring, inset on menu rows and segmented options.

• Promoting a version glides the Production marker from its old row to the new one on the critically damped smooth spring, with no overshoot. Undo glides it back.
• The reply streams in chunks of three to six whole words every 40ms on a requestAnimationFrame clock, about 100 words a second, and a backlog widens the chunks. Each chunk only fades in over 150ms; settled text never moves. Thinking lasts 0.5 to 1.2 seconds by effort.
• The output panel follows its content's height on the smooth spring. A rerun holds the panel at its current height until the new reply is in, then settles, so nothing collapses and regrows.
• Labels that change (version state, model name, effort, run status, the footer) use one crossfade: the old label fades out in 100ms while the new one fades in from 2px over 160ms, and the chip width follows on a fast spring without bounce. No blur, no per-letter motion.
• Tab and test case highlights slide on a critically damped spring. Token counts roll their digits with tabular numerals in a fixed slot. Editing a value flashes its chips once.
• The working label uses a calm shimmer that stops on Reply, Stopped or Run failed.
• Reduced motion removes the glides, the chunk fade, the shimmer and every height animation while keeping each state, label and announcement.

• The card is up to 760px wide and reads well from 320px. It uses container queries, so it adapts to its slot, not the viewport.
• Below 560px of container width the variable fields fall into two columns, and below 340px into one.
• Below 480px the test cases and Run each take a full row, and the model chip wraps under the title.
• System and User share one editor slot sized to the taller text, so switching tabs never changes the card's height.

• The editor rebuilds a few dozen DOM nodes per keystroke from the string, well under a millisecond for prompt sized text.
• The word diff trims the shared start and end before its longest common subsequence pass, so typical edits compare a few dozen tokens.
• Streaming appends one chunk per tick and never re-renders earlier chunks; the clock stops when the reply is complete, stopped or failed.
• Only one run is active at a time; starting another cancels the first and aborts its signal.

• Choose it when a team edits a prompt template, tries it on saved cases and promotes a version to production, inside a product page or settings screen.
• Write placeholders as {{name}} in the system and user text. Pass `variables` to fix the color order; values in test cases are matched by name.
• Wire onRun to stream real replies. Return an async iterable of text deltas, or a promise of the full text, and respect the AbortSignal: Stop aborts it. The footer estimates tokens and cost from the model prices you pass.
• Keep onPromote as the source of truth: the card updates its own pointer optimistically and calls back, and Undo calls it again with the ids swapped.
• Model prices outside Anthropic in the sample list are illustrative. Pass your own models with real prices for cost estimates.
• Without props it renders the full demo: a Fernwood support reply prompt with four versions, v4 in production and three saved cases. Without onRun, the first run of the Past window case returns a simulated overload error so the retry path can be seen.

The full library index for assistants is at /llms.txt.