Steering
Change the agent's course while it works, without starting over.
Steering shows a run you can nudge while it works: its steps, the log of what you told it and
what it said back, and a message box. A message waits for the step in progress, then the agent
takes it up from the next one — so you change its course without starting over. When your steer
touches work already done, the agent raises an amber heads-up with actions (like Leave it or
Redo the Pro card) and settles on an answer once you choose.
- Read Pricing v43 frames, 14 layers
- Update the Pro cardSetting the accent to violet
- Update the Team cardPricing v4, frame 3
- Export to stagingdesignme.studio/pricing
Usage
<!-- include core.css + steering.css -->
<div class="dm-ste dm-panel">
<div class="dm-ste-h">
<b>Redesign the pricing page</b>
<span class="dm-muted dm-ste-st"><span aria-live="polite">Step 2 of 4</span> · <span class="dm-num">0:07</span></span>
</div>
<ol class="dm-ste-steps" aria-label="Steps">
<li class="dm-ste-s dm-done"><span class="dm-ste-g"><!-- ok --></span><span class="dm-ste-t"><b>Read Pricing v4</b><span>3 frames, 14 layers</span></span></li>
<li class="dm-ste-s dm-run"><span class="dm-ste-g"><span class="dm-spin"></span></span><span class="dm-ste-t"><b>Update the Pro card</b><span>Setting the accent to violet</span></span></li>
</ol>
<form class="dm-ste-box">
<input placeholder="Steer the agent while it works" aria-label="Message the agent" />
<button class="dm-ste-go" aria-label="Send" disabled><!-- up --></button>
</form>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | string | The run's goal, like "Redesign the pricing page". |
steps | SteerStep[] | The steps of the run, each queued, running or done. |
messages | SteerMessage[] | What you sent and what the agent said back, in order. |
onSend | (text) => void | Called with the text when a message is sent. Add it to messages as queued, then mark it applied once taken up. |
value | string | The message being written. Leave it out to let the box keep its own draft. |
onValueChange | (value) => void | Called as the draft changes. |
placeholder | string | Defaults to "Steer the agent while it works", and "The run has finished" once every step is done. |
status | string | The line under the title. Defaults to "Step 2 of 4", or "Done". |
seconds | number | Seconds to show as m:ss. Leave it out to let the clock count until every step is done. |
summary | string | false | Shown once every step is done. Defaults to "Done in 0:14 · 1 change from you"; false hides it. |
SteerStep | { id; title; detail?; status; fromYou? } | A step; fromYou tags one your steer added. |
SteerMessage | { id; from; text; state?; warn?; actions?; answer? } | A log line; the agent's can carry an amber warn, actions and an answer. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The card
sits on a surface with the panel shadow; the running glyph spins in the accent, a done step turns
the tick green, your messages sit in a chip bubble on the right, and the agent's heads-up tints
amber until you answer it. All colours, radii and spacing come from the theme tokens, so in Soft the
card, pills and message box are rounder.