ds
Agent
Subagent

Subagent

An agent session row or card, with model, state, time and steps, and a tree for children.

Trace the slow checkout pathhaiku-4.5 Reading services/checkout and the retry tests Running12 s6 steps
Replay the failed webhookshaiku-4.5 The fixture moved, so the replay stopped Error8 s2 steps
Map the retry call siteshaiku-4.5 4 files, 2 call sites Done38 s9 steps
Write the regression testsonnet-4.5 Waiting for a free slot Queued0 s0 steps

Show code

<ul class="subagents" aria-label="Subagents">
  <li>
    <article class="subagent" data-state="running" aria-current="true" aria-labelledby="sa-run">
      <span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
      <span class="subagent-main">
        <span class="subagent-head"><b class="subagent-name" id="sa-run">Trace the slow checkout path</b><span class="subagent-model">haiku-4.5</span></span>
        <span class="subagent-task">Reading services/checkout and the retry tests</span>
        <span class="subagent-meta"><span class="subagent-state">Running</span><span class="subagent-time">12 s</span><span class="subagent-steps">6 steps</span></span>
      </span>
      <button class="btn icon xs ghost subagent-open" type="button" aria-label="Open Trace the slow checkout path"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg></button>
    </article>
  </li>
  <li>
    <article class="subagent" data-state="error" aria-labelledby="sa-err">
      <span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span>
      <span class="subagent-main">
        <span class="subagent-head"><b class="subagent-name" id="sa-err">Replay the failed webhooks</b><span class="subagent-model">haiku-4.5</span></span>
        <span class="subagent-task">The fixture moved, so the replay stopped</span>
        <span class="subagent-meta"><span class="subagent-state">Error</span><span class="subagent-time">8 s</span><span class="subagent-steps">2 steps</span></span>
      </span>
      <button class="btn icon xs ghost subagent-open" type="button" aria-label="Retry Replay the failed webhooks"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg></button>
    </article>
  </li>
  <li>
    <article class="subagent" data-state="ok" aria-labelledby="sa-ok">
      <span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></span>
      <span class="subagent-main">
        <span class="subagent-head"><b class="subagent-name" id="sa-ok">Map the retry call sites</b><span class="subagent-model">haiku-4.5</span></span>
        <span class="subagent-task">4 files, 2 call sites</span>
        <span class="subagent-meta"><span class="subagent-state">Done</span><span class="subagent-time">38 s</span><span class="subagent-steps">9 steps</span></span>
      </span>
      <button class="btn icon xs ghost subagent-open" type="button" aria-label="Open Map the retry call sites"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg></button>
    </article>
  </li>
  <li>
    <article class="subagent" data-state="queued" aria-disabled="true" aria-labelledby="sa-q">
      <span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19h8"/><path d="m4 17 6-6-6-6"/></svg></span>
      <span class="subagent-main">
        <span class="subagent-head"><b class="subagent-name" id="sa-q">Write the regression test</b><span class="subagent-model">sonnet-4.5</span></span>
        <span class="subagent-task">Waiting for a free slot</span>
        <span class="subagent-meta"><span class="subagent-state">Queued</span><span class="subagent-time">0 s</span><span class="subagent-steps">0 steps</span></span>
      </span>
      <button class="btn icon xs ghost subagent-open" type="button" aria-label="Write the regression test" disabled><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg></button>
    </article>
  </li>
</ul>

A subagent is an agent session inside a turn, so it reads as a row in the thread, not a second app window. The mark and the state share --c, set by data-state. The name and task say what it is doing, and the model, elapsed time and step count answer the questions people ask while it runs.

The flat list is the row grammar of List: a mark, two lines and trailing facts. .subagent adds the session facts and states. If a row only needs a title and one line, use .list and .li directly.

Detail

Move the drain behind the queuesonnet-4.5 Edited services/checkout/retry.ts, then ran the checkout suite. 14 passed, 2 skipped. The row lock now clears before the retry burst starts. Done1 m 42 s11 steps

Code

<div class="subagents">
  <article class="subagent detail" data-state="ok" aria-labelledby="sa-detail">
    <span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/></svg></span>
    <span class="subagent-main">
      <span class="subagent-head"><b class="subagent-name" id="sa-detail">Move the drain behind the queue</b><span class="subagent-model">sonnet-4.5</span></span>
      <span class="subagent-task">Edited services/checkout/retry.ts, then ran the checkout suite. 14 passed, 2 skipped. The row lock now clears before the retry burst starts.</span>
      <span class="subagent-meta"><span class="subagent-state">Done</span><span class="subagent-time">1 m 42 s</span><span class="subagent-steps">11 steps</span></span>
    </span>
    <button class="btn icon xs ghost subagent-open" type="button" aria-label="Open Move the drain behind the queue"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg></button>
  </article>
</div>

.detail gives the card more room and lets the task run to two lines. Use it for the session a reader has opened, or when the task cannot be shortened without losing the point.

Tree

Coordinate the retry fixsonnet-4.5 Three children: read, patch, verify Running1 m 08 s14 steps

Read the retry pathhaiku-4.5 12 files Done22 s7 steps

Move the drain behind the queuesonnet-4.5 services/checkout/retry.ts Running14 s3 steps

Run the checkout suitehaiku-4.5 Waiting for the patch Queued0 s0 steps

Show code

<div class="subagent-tree">
  <details class="subagent-group" open>
    <summary class="subagent" data-state="running">
      <span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/></svg></span>
      <span class="subagent-main">
        <span class="subagent-head"><b class="subagent-name">Coordinate the retry fix</b><span class="subagent-model">sonnet-4.5</span></span>
        <span class="subagent-task">Three children: read, patch, verify</span>
        <span class="subagent-meta"><span class="subagent-state">Running</span><span class="subagent-time">1 m 08 s</span><span class="subagent-steps">14 steps</span></span>
      </span>
      <svg class="i subagent-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
    </summary>
    <div class="subagent-kids">
      <div class="subagent" data-state="ok">
        <span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
        <span class="subagent-main">
          <span class="subagent-head"><b class="subagent-name">Read the retry path</b><span class="subagent-model">haiku-4.5</span></span>
          <span class="subagent-task">12 files</span>
          <span class="subagent-meta"><span class="subagent-state">Done</span><span class="subagent-time">22 s</span><span class="subagent-steps">7 steps</span></span>
        </span>
      </div>
      <div class="subagent" data-state="running">
        <span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></span>
        <span class="subagent-main">
          <span class="subagent-head"><b class="subagent-name">Move the drain behind the queue</b><span class="subagent-model">sonnet-4.5</span></span>
          <span class="subagent-task">services/checkout/retry.ts</span>
          <span class="subagent-meta"><span class="subagent-state">Running</span><span class="subagent-time">14 s</span><span class="subagent-steps">3 steps</span></span>
        </span>
      </div>
      <div class="subagent" data-state="queued">
        <span class="subagent-mark"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19h8"/><path d="m4 17 6-6-6-6"/></svg></span>
        <span class="subagent-main">
          <span class="subagent-head"><b class="subagent-name">Run the checkout suite</b><span class="subagent-model">haiku-4.5</span></span>
          <span class="subagent-task">Waiting for the patch</span>
          <span class="subagent-meta"><span class="subagent-state">Queued</span><span class="subagent-time">0 s</span><span class="subagent-steps">0 steps</span></span>
        </span>
      </div>
    </div>
  </details>
</div>

Parent and child sessions nest on a rail. The parent is a native details summary, so Enter and Space open it and focus stays put. Children are the same card with the same facts. Keep the rail to one level: a subagent that spawns its own workers is a session tree, and a deep tree belongs in a dedicated view.

API

Class	On	What it does
`.subagents`	ul	The flat list. A grid of rows with a gap.
`.subagent`	ul > li > article, a, button, summary	One agent session. `data-state`: running, ok, error, queued.
`.subagent-mark`	span	The glyph on a wash of the state colour.
`.subagent-main`	span	The middle column: head, task and metadata.
`.subagent-head`	span	Name and model. Wraps rather than truncating the model.
`.subagent-name`	b	One sentence naming the task.
`.subagent-model`	span	The model id, in a quiet mono tag.
`.subagent-task`	span	What it is doing now, or what it finished. Truncates.
`.subagent-meta`	span	State, elapsed and steps, separated by middots.
`.subagent-state`	span	A dot and a word. The word carries the state without colour.
`.subagent-time`	span	Elapsed time in mono, tabular.
`.subagent-steps`	span	The step count in mono, tabular.
`.subagent-open`	button	The trailing action. Give it an `aria-label` with the session name.
`.subagent.detail`	.subagent	More padding, two task lines.
`.subagent-tree`	div	The nested variant.
`.subagent-group`	details	A parent and its children. The summary is the parent row.
`.subagent-chev`	svg	Rotates when the group opens.
`.subagent-kids`	div	The child rows, on a rail.
`aria-current="true"`	.subagent	The selected session.
`aria-disabled="true"`	.subagent	A queued or otherwise unavailable session.

Name the task in the row: "Trace the slow checkout path", not "Subagent 2".
Show the model, elapsed time and steps for every running session.
Use the state word and the dot together.

Don't

A spinner as the only running signal.
Hiding the model at 390px. The row wraps instead.
A tree three levels deep. Link to the session instead.

Accessibility

A clickable row is an a or a button, so it is focusable and activates with Enter and Space. A read-only row is an article named with aria-labelledby.
The state is written out. The dot is --c plus a word, and the icon is decorative.
In the tree, the parent row is a native details summary. The children follow in reading order and keep their own state words.
The running scan line and the pulsing dot stop under prefers-reduced-motion. The state word remains.
At 390px the row keeps its mark, name, model, state, time and steps. The task truncates, and the metadata wraps.