Agent layer

Turn

One step of an exchange. Everything else in this layer shows work; a turn is what the work happens inside — an answer is not a paragraph but a container for steps, a diff, an approval, a budget.

The component

You14:02

Add a share bar above the history strip.

Agent14:02

I'll put it above the strip and let one legend key both.

Markup

<div class="inst-stack inst-stack--loose">
  <div class="inst-turn" data-from="user">
    <div class="inst-turn-head"><span class="inst-turn-who">You</span><span>14:02</span></div>
    <div class="inst-turn-body">Add a share bar above the history strip.</div>
  </div>
  <div class="inst-turn">
    <div class="inst-turn-head"><span class="inst-turn-who">Agent</span><span>14:02</span></div>
    <div class="inst-turn-body">I'll put it above the strip and let one legend key both.</div>
    <div class="inst-turn-actions">
      <button class="inst-btn inst-btn--xs inst-btn--icon inst-btn--ghost" type="button" aria-label="Copy"><svg class="inst-icon" aria-hidden="true"><use href="#i-copy"/></svg></button>
      <button class="inst-btn inst-btn--xs inst-btn--icon inst-btn--ghost" type="button" aria-label="Retry"><svg class="inst-icon" aria-hidden="true"><use href="#i-refresh"/></svg></button>
      <button class="inst-btn inst-btn--xs inst-btn--icon inst-btn--ghost" type="button" aria-label="More"><svg class="inst-icon" aria-hidden="true"><use href="#i-more"/></svg></button>
    </div>
  </div>
</div>

Contract

What	Required	Why
`data-from="user"` on the person's turn	yes	The machine's turn is the default. Marking both would mean an attribute value with nothing to declare
A name in `inst-turn-who`	yes	Colour and indent are not carriers: the recess is the same film in every theme, and a screen reader gets neither
A time	no	Useful in a long thread, noise in a short one
`inst-turn-actions` keeps its space	yes, if present	Hover may strengthen an element, but it may not bring one into being. The row is laid out either way, so nothing moves under the cursor; the buttons fade in, and `@media (hover: none)` gives them at full strength where there is no cursor to reveal them with. A row that is not laid out at all does not exist on a touchscreen
A thread as a list	no	Turns are siblings in an `inst-stack--loose`; the kit does not add a second name for a column

The person's turn is recessed, the machine's has no surface at all: the answer is the one that holds steps, diffs and approvals, and each of those brings its own frame. A surface under them would put a plate inside a plate.

Accessibility


Who spoke	Named in the text, not by the surface. The recess is decoration and reaches no assistive technology
Streaming	An answer still arriving carries the caret; the text itself is the announcement
Actions	Real buttons with labels. They stand in the flow, so `Tab` reaches them in reading order

Composition

An answer that did work

In context

Agent14:02

Added, and the legend now keys the tones.

edit src/data.css 0.4 s

.inst-share { display: flex; }