Agent Chat

Usage

Coding agent workbench

Side copilot

A docked assistant for an existing page, such as a docs editor, CMS body, or ticket reply, that only suggests edits for you to apply.

Overview

A coding agent's full session on one request; a person answers its questions and approves each write.

• It plays once in view and stops at the write gate; reduced motion shows everything up to the gate at once.
• After 3 idle seconds the questionnaire takes the recommended picks; clicking any option makes it wait for you to send.
• The write gate never opens by itself: Allow writes, tests, and summarizes; Deny skips the write and tests and exports a patch.
• Stop marks the running tool card as stopped; clicking a changed file scrolls the transcript to its code, never the page.
• In the docs column (640–959px) the side panel switches between Tasks, Changes, and Preview, and ≥ 1200px adds the agent list; narrow (< 640px) hides the panel.
• Side copilot: the page changes only when you click Apply, with Undo; "Read-only · explain" leaves the bar with Explain alone.
• Side copilot: the selection bar follows the text through scrolling and reflow; narrow (< 640px) folds the copilot into a toolbar button that opens a bottom sheet.

Customization

• To wire a real agent, replace the demo timeline with your event stream; rows hold only id and kind, so streamed events only update state.
• Keep a permanent tail item at the end of TxConversationStream, so each message mounts once and card state and entrance motion never replay.
• Tier permissions by risk: a risk="read" call runs and leaves a trace; write and execute always wait for a person.
• Hold the questionnaire's answers in a controlled v-model and v-model:index; stop auto-picking once the reader touches the card.
• Side copilot: make selection.rects a getter that measures the Range live, and call updatePosition() after layout changes.

Related components