@herbertgao/pi-subagents 0.17.0 → 0.18.0

package/src/ui/agent-mention.ts

@@ -0,0 +1,274 @@
+/**
+ * agent-mention.ts — what `@` can address, and the suggestions pi renders for it.
+ *
+ * A subagent is addressable whether or not it is currently running: a live
+ * record is messaged or resumed, an evicted one whose session is still on disk
+ * is reopened, and an agent *type* with no instance at all is started. That is
+ * the point of the handle — `@explore` means the Explore agent, not "the
+ * Explore process that happens to exist right now" — so the roster below unions
+ * all three, and the dispatcher and the popup read the same list.
+ *
+ * Rows are per *agent*, not per handle. An agent given a `name` holds two names
+ * (its alias and its type-derived handle) and both resolve, but it lists once,
+ * under the alias, with its type moved into the description so the row still
+ * says what it is.
+ *
+ * pi's `CombinedAutocompleteProvider` already owns `@`, where it means "attach a
+ * file". Extensions can wrap it (`ctx.ui.addAutocompleteProvider`), so this
+ * provider adds the `@` tokens that name an agent and delegates everything else
+ * — including all of `applyCompletion`, whose `@`-branch already inserts
+ * `item.value` plus a trailing space, which is exactly what a handle needs.
+ *
+ * Matching mirrors Claude Code: case-insensitive prefix, not fuzzy. What it does
+ * NOT mirror is Claude Code dropping files whenever an agent matches. Here `@` is
+ * pi's file picker first, and the handles are additive, so a token matching both
+ * lists both — agents first. Suppressing on any match sounds narrow and is not:
+ * an empty token prefix-matches every handle, so a bare `@` — the gesture people
+ * use to browse files — would offer no files at all, and a single letter
+ * beginning any handle would do the same.
+ *
+ * Both halves ship under ONE `prefix`, which is sound because wherever BOTH sides
+ * produce rows they measured the same span. pi's `extractAtPrefix` takes the
+ * token after the last of `{space, tab, ", ', =}` and keeps it only if it starts
+ * with `@`; `MENTION_TRIGGER` matches `@[\w-]*` at the cursor, after start-of-line
+ * or `[\s。、？！]`. Where those two disagree, exactly one side answers and there
+ * is nothing to merge: `@src/index.ts` and `@"my file` are pi's alone (no handle
+ * matches), `=@ex` is pi's alone (`=` is a delimiter to pi, not a boundary to us),
+ * and `。@ex` is ours alone (the reverse). A merged response therefore never
+ * carries a prefix from one side and an item from the other.
+ *
+ * Offering never-started types is a deliberate step beyond Claude Code, whose
+ * registry holds only live tasks, so an agent you had not launched yet was
+ * unaddressable.
+ */
+
+import type {
+  AutocompleteItem,
+  AutocompleteProvider,
+  AutocompleteSuggestions,
+} from "@earendil-works/pi-tui"
+import type { AgentManager } from "../agent-manager.js"
+import { handleBase, MENTION_TRIGGER } from "../mention.js"
+import type { AgentRecord, AgentTombstone } from "../types.js"
+
+/**
+ * One thing `@` can address, and what sending to it will do. `typeLabel` is the
+ * agent's `display_name`, resolved by the caller: this module stays independent
+ * of the type registry, but the popup must agree with FleetView and the widget,
+ * which both render the label rather than the raw type.
+ */
+export type MentionTarget =
+  | { kind: "record"; handle: string; record: AgentRecord; typeLabel: string }
+  | {
+      kind: "tombstone"
+      handle: string
+      entry: AgentTombstone
+      typeLabel: string
+    }
+  | { kind: "type"; handle: string; type: string; description: string }
+
+/** The registry facts the roster needs, so it stays independent of agent-types. */
+export type TypeInfo = { name: string; description: string }
+
+/**
+ * Everything `@` can reach, in the order the popup lists it: steerable agents
+ * first, then the other live ones earliest-launched, then agent types with no
+ * live instance. A type whose handle a record already holds is omitted — that
+ * name addresses the existing agent, which is what makes `@explore` mean
+ * "message the one that's running" and only otherwise "start one".
+ */
+export function mentionRoster(
+  manager: AgentManager,
+  types: readonly TypeInfo[],
+  // Identity by default: a caller with no registry to consult gets the raw
+  // type, which is also what `getConfig` falls back to when no label is set.
+  displayNameOf: (type: string) => string = (type) => type,
+): MentionTarget[] {
+  const live = (r: AgentRecord) =>
+    r.status === "running" || r.status === "queued"
+  const records = manager
+    .listAgents()
+    .filter((r) => r.handle !== undefined && r.parentAgentId === undefined)
+    .sort(
+      (a, b) => Number(live(b)) - Number(live(a)) || a.startedAt - b.startedAt,
+    )
+
+  const taken = new Set<string>()
+  const targets: MentionTarget[] = []
+
+  // One row per agent, not per handle. An aliased agent lists under its alias
+  // only — both names resolve, but showing two rows for one agent reads as two
+  // agents. The type handle stays addressable whether or not it is listed.
+  for (const record of records) {
+    const handle = record.alias ?? record.handle!
+    taken.add(handle.toLowerCase())
+    if (record.handle) taken.add(record.handle.toLowerCase())
+    targets.push({
+      kind: "record",
+      handle,
+      record,
+      typeLabel: displayNameOf(record.type),
+    })
+  }
+
+  // Then agents that are gone but whose conversation can be reopened. After the
+  // live ones: a running agent is the likelier target, and this keeps the
+  // ordering "what exists now, then what can be brought back, then what can be
+  // started".
+  for (const entry of manager.listTombstones()) {
+    const handle = entry.alias ?? entry.handle
+    if (taken.has(handle.toLowerCase())) continue
+    taken.add(handle.toLowerCase())
+    taken.add(entry.handle.toLowerCase())
+    targets.push({
+      kind: "tombstone",
+      handle,
+      entry,
+      typeLabel: displayNameOf(entry.type),
+    })
+  }
+
+  for (const type of types) {
+    const handle = handleBase(type.name)
+    if (taken.has(handle)) continue
+    taken.add(handle)
+    targets.push({
+      kind: "type",
+      handle,
+      type: type.name,
+      description: type.description,
+    })
+  }
+  return targets
+}
+
+export function createMentionProvider(
+  current: AutocompleteProvider,
+  roster: () => MentionTarget[],
+  isEnabled: () => boolean,
+): AutocompleteProvider {
+  // One warning per provider, not per keystroke: `getSuggestions` runs on every
+  // character typed after `@`, so an unguarded log would bury the terminal in
+  // the time it takes to finish a word.
+  let warnedInnerFailure = false
+  return {
+    // Only `@` — the contract is "characters that should naturally trigger
+    // THIS provider", and pi unions each wrapper's own set onto the outermost
+    // one itself (interactive-mode.js:432), so re-declaring the wrapped
+    // provider's characters here would both misreport us and duplicate that.
+    triggerCharacters: ["@"],
+
+    async getSuggestions(
+      lines,
+      cursorLine,
+      cursorCol,
+      options,
+    ): Promise<AutocompleteSuggestions | null> {
+      const mine = isEnabled()
+        ? mentionItems(roster(), lines[cursorLine] ?? "", cursorCol)
+        : null
+      // Asked unconditionally: pi owns `@` and must keep answering for it even
+      // when a handle matches too. That is the same work vanilla pi does on any
+      // `@` keystroke — a capped `fd` search, or nothing at all when the host
+      // configured no `fd` path — but we now do it on tokens we used to answer
+      // alone, so it must not be able to take the popup down with it. The
+      // wrapped provider is not always pi's: another extension may sit inside
+      // us, and before this it was never called for a token naming an agent.
+      // try/catch, not `.catch()`: a provider that throws SYNCHRONOUSLY never
+      // returns the promise a `.catch()` would attach to, and the throw escapes
+      // this method as a rejection — which pi does not handle either
+      // (components/editor.js:1892 awaits with no catch of its own).
+      let theirs: AutocompleteSuggestions | null = null
+      try {
+        theirs = await current.getSuggestions(
+          lines,
+          cursorLine,
+          cursorCol,
+          options,
+        )
+      } catch (err) {
+        // Safe to treat as "no files": pi discards any response whose request is
+        // no longer current, so an aborted search that surfaces as a rejection
+        // cannot leave a stale popup behind (`isAutocompleteRequestCurrent`).
+        // Warned rather than swallowed outright — the failure is invisible in
+        // the popup, and the same `console.warn` channel already carries this
+        // extension's other non-fatal failures.
+        if (!warnedInnerFailure) {
+          warnedInnerFailure = true
+          console.warn(
+            "[pi-subagents] the autocomplete provider below us failed; showing agent rows only:",
+            err,
+          )
+        }
+        theirs = null
+      }
+      if (!mine) return theirs
+      if (!theirs) return mine
+      // Agents first: there are a handful of them against pi's 20 file rows, and
+      // a handle buried under fuzzy path matches is a handle nobody finds. The
+      // prefix is ours by the span argument in the header — identical to pi's
+      // whenever both sides have something to say.
+      return { items: [...mine.items, ...theirs.items], prefix: mine.prefix }
+    },
+
+    applyCompletion(lines, cursorLine, cursorCol, item, prefix) {
+      return current.applyCompletion(lines, cursorLine, cursorCol, item, prefix)
+    },
+
+    shouldTriggerFileCompletion(lines, cursorLine, cursorCol) {
+      return (
+        current.shouldTriggerFileCompletion?.(lines, cursorLine, cursorCol) ??
+        true
+      )
+    },
+  }
+}
+
+/** Suggestions for the `@…` token under the cursor, or null when it names no agent. */
+function mentionItems(
+  roster: MentionTarget[],
+  line: string,
+  cursorCol: number,
+): AutocompleteSuggestions | null {
+  const match = MENTION_TRIGGER.exec(line.slice(0, cursorCol))
+  if (!match) return null
+
+  const typed = match[2].toLowerCase()
+  const items: AutocompleteItem[] = []
+  for (const target of roster) {
+    if (!target.handle.toLowerCase().startsWith(typed)) continue
+    items.push({
+      value: `@${target.handle}`,
+      label: `@${target.handle}`,
+      description: describeTarget(target),
+    })
+  }
+  return items.length > 0 ? { items, prefix: `@${match[2]}` } : null
+}
+
+/** Name the action that will actually happen, so the list never mispromises. */
+function describeTarget(target: MentionTarget): string {
+  if (target.kind === "type")
+    return `start agent · ${summarize(target.description)}`
+  if (target.kind === "tombstone") {
+    // No status: the record is gone, and "completed" would imply one is still
+    // being tracked. The type carries the identity the handle may not.
+    return `resume · ${target.typeLabel} · ${target.entry.description}`
+  }
+  const { status, description, alias } = target.record
+  const action =
+    status === "running" || status === "queued" ? "send message" : "resume"
+  // A row listed under its alias has lost the type its handle would have shown,
+  // so name it — `@auth-audit` alone says nothing about what the agent is.
+  // A type-derived row already reads as its type and would just repeat itself.
+  const identity = alias ? `${target.typeLabel} · ` : ""
+  return `${action} · ${identity}${status} · ${description}`
+}
+
+/** First sentence of an agent description, clipped — these run to paragraphs. */
+function summarize(description: string): string {
+  const first = (description.match(/^.*?[.!?](?=\s|$)/s)?.[0] ?? description)
+    .replace(/\s+/g, " ")
+    .trim()
+  return first.length > 60 ? `${first.slice(0, 59).trimEnd()}…` : first
+}

package/src/ui/agent-widget.ts

@@ -7,7 +7,7 @@
 
 import { truncateToWidth } from "@earendil-works/pi-tui"
 import { renderAgentName } from "../agent-color.js"
-import type { AgentManager } from "../agent-manager.js"
+import { type AgentManager, isTopLevelAgent } from "../agent-manager.js"
 import { getConfig } from "../agent-types.js"
 import type { AgentInvocation, SubagentType, WidgetMode } from "../types.js"
 import {
@@ -99,7 +99,7 @@ export interface AgentDetails {
   activity?: string
   /** Current spinner frame index (for animated running indicator). */
   spinnerFrame?: number
-  /** Short model name if different from parent (e.g. "haiku", "sonnet"). */
+  /** Short label for the model the run used, e.g. "haiku 4.5". */
   modelName?: string
   /** Notable config tags (e.g. ["thinking: high", "isolated"]). */
   tags?: string[]
@@ -223,7 +223,13 @@ export function getPromptModeLabel(type: SubagentType): string | undefined {
   return config.promptMode === "append" ? "twin" : undefined
 }
 
-/** Mode label is not included — callers add it where they want it. */
+/**
+ * Mode label is not included — callers add it where they want it.
+ *
+ * Both model forms come back so each surface can pick by width; the
+ * "(asked X)" annotation is applied here rather than by callers, so a value the
+ * spawn did not honor cannot be rendered as though it had been (#182).
+ */
 export function buildInvocationTags(invocation: AgentInvocation | undefined): {
   modelName?: string
   modelId?: string
@@ -330,7 +336,13 @@ export class AgentWidget {
      * supplies the user's `showCost` setting.
      */
     private showCost: () => boolean = () => false,
-    /** Whether running rows show the model and thinking level. */
+    /**
+     * Read live at render time, like `mode`. Whether running agents name the
+     * model driving them and the thinking level it is running at. Defaults to
+     * off — the extension supplies the user's `showModel` setting — because the
+     * row is already dense and the same pair is on the tool result and in the
+     * conversation viewer unconditionally.
+     */
     private showModel: () => boolean = () => false,
   ) {}
 
@@ -346,7 +358,7 @@ export class AgentWidget {
    *   - `all`: every agent.
    */
   private widgetAgents() {
-    const all = this.manager.listAgents().filter((a) => !a.parentAgentId)
+    const all = this.manager.listAgents().filter(isTopLevelAgent)
     switch (this.mode()) {
       case "off":
         return []
@@ -542,6 +554,9 @@ export class AgentWidget {
 
       const parts: string[] = []
       if (this.showModel()) {
+        // Leading, and paired: a thinking level means nothing without the model
+        // it applies to. The tag is taken from buildInvocationTags rather than
+        // rebuilt so the "(asked X)" annotation survives.
         const { modelName, tags } = buildInvocationTags(a.invocation)
         if (modelName) parts.push(modelName)
         const thinkingTag = tags.find((tag) => tag.startsWith("thinking: "))

package/src/ui/conversation-viewer.ts

@@ -156,8 +156,21 @@ function capResult(text: string): { text: string; elided: number } {
   }
 }
 
+/**
+ * `999` · `1.5k` · `8.4M` — a magnitude cue, not an exact count, past 1000.
+ *
+ * The bracket is chosen against the *rounded* value, so 999,999 reads `1M`
+ * rather than the `1000.0k` a naive `< 1e6` test produces.
+ */
+function humanCount(n: number): string {
+  if (n < 1_000) return `${n}`
+  const thousands = n < 999_950
+  const value = thousands ? n / 1_000 : n / 1_000_000
+  return `${value.toFixed(1).replace(/\.0$/, "")}${thousands ? "k" : "M"}`
+}
+
 function truncationNote(elided: number): string {
-  return `... (truncated, ${elided} more character${elided === 1 ? "" : "s"})`
+  return `... (truncated, ${humanCount(elided)} more character${elided === 1 ? "" : "s"})`
 }
 
 export class ConversationViewer implements Component {

package/src/ui/fleet-list.ts

@@ -20,8 +20,8 @@ import {
   visibleWidth,
 } from "@earendil-works/pi-tui"
 import { hasAgentBadge, renderAgentName } from "../agent-color.js"
-import type { AgentManager } from "../agent-manager.js"
-import type { AgentRecord } from "../types.js"
+import { type AgentManager, isTopLevelAgent } from "../agent-manager.js"
+import type { AgentRecord, ViewerMarkdownMode } from "../types.js"
 import { getLifetimeCost, getLifetimeTotal } from "../usage.js"
 import { type AgentActivity, formatCost, type Theme } from "./agent-widget.js"
 import {
@@ -78,9 +78,30 @@ export type FleetUICtx = {
   ): Promise<T>
 }
 
+/**
+ * A workflow run, as the fleet list needs to see it.
+ *
+ * Narrow on purpose: the list knows nothing about `WorkflowTask`, the runtime
+ * or the dialog, so it stays as testable as it was when it only held agents.
+ * The extension maps its tasks into this shape and injects an opener.
+ */
+export interface FleetWorkflow {
+  id: string
+  /** The `meta.name` of the run, or its id when the script named nothing. */
+  name: string
+  status: "running" | "completed" | "failed" | "killed" | "paused"
+  doneCount: number
+  totalCount: number
+  startedAt: number
+  /** Set once the run settles, which is what freezes its clock. */
+  completedAt?: number
+  tokens: number
+}
+
 type MainEntry = { kind: "main" }
 type AgentEntry = { kind: "agent"; record: AgentRecord }
-type FleetEntry = MainEntry | AgentEntry
+type WorkflowEntry = { kind: "workflow"; workflow: FleetWorkflow }
+type FleetEntry = MainEntry | WorkflowEntry | AgentEntry
 
 /** `11s` — integer seconds, no decimal/suffix (matches Claude Code, unlike formatMs). */
 export function formatFleetElapsed(ms: number): string {
@@ -124,6 +145,17 @@ export class FleetList {
   /** Set while a conversation overlay is open; calling it closes the overlay. */
   private viewerClose: (() => void) | undefined
   private viewingAgentId: string | undefined
+  /** Injected by the extension; absent until workflows are wired (or at all). */
+  private workflowSource: (() => readonly FleetWorkflow[]) | undefined
+  private openWorkflow: ((id: string) => Promise<void> | void) | undefined
+  /**
+   * Set while the workflow inspector is up.
+   *
+   * It does the two jobs `viewerClose` does for an agent's overlay — keep the
+   * list out of the dialog's keys, and remember which row to come back to —
+   * minus the close handle, because that overlay belongs to the extension.
+   */
+  private viewingWorkflowId: string | undefined
 
   constructor(
     private manager: AgentManager,
@@ -134,6 +166,18 @@ export class FleetList {
      * `showCost` setting.
      */
     private showCost: () => boolean = () => false,
+    /**
+     * The user's `viewerMarkdown` setting, for a conversation overlay opened
+     * from here. Read live rather than captured, because the viewer's `m` key
+     * changes it while the overlay is up. Omitted → the viewer's own default.
+     */
+    private viewerMarkdown?: () => ViewerMarkdownMode,
+    /**
+     * Persist a mode chosen with `m` in that overlay, so the key means the same
+     * thing here as it does from `/agents` — one setting, not one per entry
+     * point. Omitted → `m` still cycles, viewer-locally.
+     */
+    private onViewerMarkdown?: (mode: ViewerMarkdownMode) => void,
   ) {}
 
   // ---- Lifecycle ----
@@ -180,6 +224,9 @@ export class FleetList {
       this.viewerClose = undefined
     }
     this.viewingAgentId = undefined
+    // No handle to close the workflow inspector with, but the list is going
+    // away — leaving the id set would keep it swallowing input forever.
+    this.viewingWorkflowId = undefined
     if (this.ui && this.widgetRegistered)
       this.ui.setWidget(FLEET_KEY, undefined)
     this.widgetRegistered = false
@@ -189,12 +236,16 @@ export class FleetList {
     this.ui = undefined
   }
 
-  /** Re-register/refresh the below-editor widget; clears it when no agents remain. */
+  /** Re-register/refresh the below-editor widget; clears it when nothing remains. */
   update(): void {
     if (!this.ui) return
-    const hasAgents = this.enabled && this.agentRecords().length > 0
+    // A run with no agents of its own left in the list is still worth a row —
+    // it is the thing the user opens to see what its children did. Read off the
+    // roster for the same reason activation does: two counts of "is there
+    // anything here" drifted apart once before.
+    const hasRows = this.enabled && this.roster().length > 1
 
-    if (!hasAgents) {
+    if (!hasRows) {
       if (this.widgetRegistered) {
         this.ui.setWidget(FLEET_KEY, undefined)
         this.widgetRegistered = false
@@ -249,7 +300,7 @@ export class FleetList {
       .listAgents()
       .filter(
         (a) =>
-          !a.parentAgentId &&
+          isTopLevelAgent(a) &&
           a.session &&
           (a.status === "running" ||
             a.status === "queued" ||
@@ -260,9 +311,49 @@ export class FleetList {
       .sort((a, b) => a.startedAt - b.startedAt)
   }
 
+  /**
+   * Wire workflow runs into the list.
+   *
+   * Injected rather than constructed here because the fleet list predates
+   * workflows and must keep working without them — a session with the feature
+   * switched off never calls this, and the roster is agents-only exactly as
+   * before.
+   */
+  setWorkflowSource(
+    source: () => readonly FleetWorkflow[],
+    open: (id: string) => Promise<void> | void,
+  ): void {
+    this.workflowSource = source
+    this.openWorkflow = open
+  }
+
+  /** Live runs, plus recently settled ones — the same linger the agents get. */
+  private workflows(): FleetWorkflow[] {
+    if (!this.workflowSource) return []
+    const now = Date.now()
+    return [...this.workflowSource()]
+      .filter(
+        (run) =>
+          run.status === "running" ||
+          run.status === "paused" ||
+          (run.completedAt != null &&
+            now - run.completedAt < FINISHED_LINGER_MS),
+      )
+      .sort((a, b) => a.startedAt - b.startedAt)
+  }
+
+  /**
+   * Runs sit above the agents rather than interleaved by start time: a run owns
+   * most of the agents under it, so listing the container first is what makes
+   * the list read as a hierarchy rather than a shuffle.
+   */
   private roster(): FleetEntry[] {
     return [
       { kind: "main" },
+      ...this.workflows().map((workflow) => ({
+        kind: "workflow" as const,
+        workflow,
+      })),
       ...this.agentRecords().map((record) => ({
         kind: "agent" as const,
         record,
@@ -285,8 +376,10 @@ export class FleetList {
     // emits both, and matchesKey matches either) — act on press only, or every
     // tap would move/fire twice. Repeats still pass through for held-key nav.
     if (isKeyRelease(data)) return undefined
-    // While an overlay is open, let it own all input.
-    if (this.viewerClose) return undefined
+    // While an overlay is open, let it own all input. Checked before the focus
+    // test below, which would otherwise read the dialog holding the keyboard as
+    // "the user left the list" and reset the selection out from under it.
+    if (this.viewerClose || this.viewingWorkflowId) return undefined
     // Input listeners fire BEFORE the focused component, and dialogs
     // (ctx.ui.select/confirm/input, pi's own menus) swap the prompt editor out
     // while getEditorText() still reads the detached — empty — editor. So when
@@ -299,9 +392,12 @@ export class FleetList {
     if (!this.active) {
       // Activate: ↓ or ← at an empty prompt moves focus into the list.
       const isActivator = matchesKey(data, "down") || matchesKey(data, "left")
+      // Gated on the roster, not the agents: a session whose only row is a
+      // workflow run still has somewhere to go, and requiring an agent would
+      // render the row but refuse to move into it.
       if (
         isActivator &&
-        this.agentRecords().length > 0 &&
+        this.roster().length > 1 &&
         this.ui.getEditorText() === ""
       ) {
         this.active = true
@@ -369,6 +465,17 @@ export class FleetList {
       this.deactivate()
       return
     }
+    if (entry.kind === "workflow") {
+      // The extension owns this overlay and closes it, so there is no
+      // `viewerClose` to hold — but the list still has to know one is up, and
+      // still has to put the cursor back on the run when it comes down.
+      this.viewingWorkflowId = entry.workflow.id
+      void Promise.resolve(this.openWorkflow?.(entry.workflow.id)).then(
+        () => this.clearViewer(),
+        () => this.clearViewer(),
+      )
+      return
+    }
     const record = entry.record
     if (!this.ui) return
     if (!record.session) {
@@ -400,6 +507,8 @@ export class FleetList {
             keybindings,
             (message: string) => this.manager.steer(record.id, message),
             this.showCost(),
+            this.viewerMarkdown,
+            this.onViewerMarkdown,
           )
         },
         {
@@ -423,25 +532,31 @@ export class FleetList {
     // still feels natural if the list reordered (an earlier agent finished)
     // while the overlay was open. If that agent is gone, leave the index for
     // update()'s clamp to settle.
-    if (this.viewingAgentId) {
-      const idx = this.roster().findIndex(
-        (e) => e.kind === "agent" && e.record.id === this.viewingAgentId,
+    const viewed = this.viewingAgentId ?? this.viewingWorkflowId
+    if (viewed !== undefined) {
+      const idx = this.roster().findIndex((e) =>
+        e.kind === "agent"
+          ? e.record.id === viewed
+          : e.kind === "workflow"
+            ? e.workflow.id === viewed
+            : false,
       )
       if (idx >= 0) this.selectedIndex = idx
     }
     this.viewerClose = undefined
     this.viewingAgentId = undefined
+    this.viewingWorkflowId = undefined
     this.update()
   }
 
   // ---- Rendering ----
 
   private renderBar(width: number, theme: Theme): string[] {
-    const agents = this.roster().slice(1) as AgentEntry[]
-    if (agents.length === 0) return []
+    const rows = this.roster().slice(1) as (WorkflowEntry | AgentEntry)[]
+    if (rows.length === 0) return []
     // Clamp locally so a render between a roster shrink and the next update()
     // (e.g. on terminal resize) never loses the selection marker.
-    const sel = Math.min(this.selectedIndex, agents.length)
+    const sel = Math.min(this.selectedIndex, rows.length)
 
     const hint = this.active
       ? "↑↓ select · enter view · esc back"
@@ -451,17 +566,20 @@ export class FleetList {
     lines.push("")
     lines.push(truncateToWidth(`  ${this.bullet(0, sel, theme)} main`, width))
 
-    // Window the agent rows so the selected one stays visible.
-    const visible = Math.min(MAX_AGENT_ROWS, agents.length)
-    const selAgent = Math.max(0, sel - 1)
-    const start = selAgent < visible ? 0 : selAgent - visible + 1
-    const hiddenBelow = agents.length - (start + visible)
+    // Window the rows so the selected one stays visible.
+    const visible = Math.min(MAX_AGENT_ROWS, rows.length)
+    const selRow = Math.max(0, sel - 1)
+    const start = selRow < visible ? 0 : selRow - visible + 1
+    const hiddenBelow = rows.length - (start + visible)
 
     if (start > 0)
       lines.push(rightAlign("", theme.fg("dim", `↑ ${start} more`), width))
     for (let a = start; a < start + visible; a++) {
+      const row = rows[a]
       lines.push(
-        this.renderAgentRow(a + 1, sel, agents[a].record, width, theme),
+        row.kind === "workflow"
+          ? this.renderWorkflowRow(a + 1, sel, row.workflow, width, theme)
+          : this.renderAgentRow(a + 1, sel, row.record, width, theme),
       )
     }
     if (hiddenBelow > 0)
@@ -476,6 +594,33 @@ export class FleetList {
     return rosterIndex === sel ? theme.fg("accent", "●") : theme.fg("dim", "○")
   }
 
+  /**
+   * A run's row. Shaped like an agent's — bullet, kind, name, stats flush right
+   * — so the two read as one list, with the agent count where an agent has its
+   * description and the same elapsed/token tail.
+   */
+  private renderWorkflowRow(
+    rosterIndex: number,
+    sel: number,
+    workflow: FleetWorkflow,
+    width: number,
+    theme: Theme,
+  ): string {
+    const selected = rosterIndex === sel
+    const kind = theme.fg(selected ? "text" : "muted", "workflow")
+    const name = selected ? theme.fg("text", workflow.name) : workflow.name
+    const left = `  ${this.bullet(rosterIndex, sel, theme)} ${kind}  ${name}`
+    // Frozen once the run settles, exactly as an agent's clock is.
+    const elapsed = (workflow.completedAt ?? Date.now()) - workflow.startedAt
+    const agents = `${workflow.doneCount}/${workflow.totalCount} agent${workflow.totalCount === 1 ? "" : "s"}`
+    const stats = `${agents} · ${formatFleetElapsed(elapsed)} · ${formatFleetTokens(workflow.tokens)}`
+    return rightAlign(
+      left,
+      selected ? theme.fg("text", stats) : theme.fg("dim", stats),
+      width,
+    )
+  }
+
   private renderAgentRow(
     rosterIndex: number,
     sel: number,