@nredd/pi-subagents 0.22.0-nredd.6 → 0.22.0-nredd.8

package/src/ui/fleet-list.ts

@@ -1,6 +1,7 @@
 /**
  * fleet-list.ts — Claude Code-style "FleetView" list rendered below the editor.
  *
+ * Starts as a one-line state/count summary; ctrl+shift+a toggles the full list.
  * Shows `main` + each running/queued subagent as a navigable list. Pressing ↓ (or
  * ←) at an empty prompt activates the list; ↑/↓ move the selection (filled ● marker),
  * Enter opens the selected agent's live conversation overlay, Esc returns to the prompt.
@@ -11,16 +12,28 @@
  * can `consume` keys — gated on `getEditorText() === ""` so normal typing is untouched.
  */
 
-import { isKeyRelease, Key, matchesKey, type ScrollViewScrollbar, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { isKeyRelease, isKeyRepeat, Key, matchesKey, type ScrollViewScrollbar, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { hasAgentBadge, renderAgentName } from "../agent-color.js";
-import { type AgentManager, isTopLevelAgent } from "../agent-manager.js";
+import { type AgentManager, isTopLevelAgent, markConsumed } from "../agent-manager.js";
 import { type Clock, realClock, type TimerHandle } from "../clock.js";
 import type { RunningDetached } from "../detached-results.js";
 import { describeModelCall } from "../model-call.js";
 import type { AgentRecord, ViewerMarkdownMode } from "../types.js";
 import { getLifetimeCost, getLifetimeTotal } from "../usage.js";
-import { type AgentActivity, buildInvocationTags, formatCost, type Theme } from "./agent-widget.js";
+import { type AgentActivity, buildInvocationTags, fgPreservingNestedStyles, formatCost, type Theme } from "./agent-widget.js";
 import { ConversationViewer, getConversationOverlayOptions, type ViewerBackgroundAction } from "./conversation-viewer.js";
+import { fallbackFlag, hasFallback, withLeadingFlag } from "./fallback-flag.js";
+import { FleetJournal, type FleetJournalEntry, type FleetSnapshot, fleetAlert, MAX_COMPACT_ALERT_COUNT } from "./fleet-state.js";
+
+/** Matches the todo/monitor disclosure shortcut family; arrows keep their navigation roles. */
+export const FLEET_COLLAPSE_KEY = "ctrl+shift+a";
+/** Quiet-period debounce bounds journal writes per toggle burst; shutdown flushes immediately. */
+export const FLEET_DISCLOSURE_SETTLE_MS = 300;
+
+/** Existing result-consumption semantics also acknowledge a failed fleet row. */
+function isOutstandingFailure(record: AgentRecord): boolean {
+  return (record.status === "error" || record.status === "aborted") && !record.resultConsumed;
+}
 
 /** Widget key for the below-editor fleet list. */
 const FLEET_KEY = "fleet";
@@ -67,6 +80,8 @@ export interface FleetWorkflow {
   /** Set once the run settles, which is what freezes its clock. */
   completedAt?: number;
   tokens: number;
+  /** Stable, weakly observed owner when the source rebuilds its display projection each tick. */
+  observationKey?: object;
 }
 
 type MainEntry = { kind: "main" };
@@ -97,20 +112,123 @@ function rightAlign(left: string, right: string, width: number): string {
   const rightW = visibleWidth(right);
   const maxLeft = Math.max(0, width - rightW - 1);
   const leftClamped = truncateToWidth(left, maxLeft);
-  const gap = Math.max(1, width - visibleWidth(leftClamped) - rightW);
+  const gap = Math.max(leftClamped ? 1 : 0, width - visibleWidth(leftClamped) - rightW);
   return truncateToWidth(leftClamped + " ".repeat(gap) + right, width);
 }
 
-/** Agent-row tail columns, left to right; text pads right, numbers pad left. */
+/**
+ * Agent-row tail columns, left to right; text pads right, numbers pad left.
+ * `drop` ranks how early a column goes on a narrow terminal (1 first); an
+ * undefined rank is never dropped, so state, elapsed, tokens and cost survive
+ * and the description is what truncates (#144).
+ */
 const TAIL_SLOTS = [
-  { align: "end" }, // model
-  { align: "end" }, // thinking level
-  { align: "end" }, // live model-call activity
+  { align: "end" }, // state: glyph + label
+  { align: "end", drop: 3 }, // model
+  { align: "end", drop: 2 }, // thinking level
+  { align: "end", drop: 1 }, // live model-call activity
   { align: "start" }, // elapsed
   { align: "start" }, // tokens
   { align: "start" }, // cost
 ] as const;
 
+/** Columns reserved for the bullet, name and the start of the description. */
+const MIN_LEFT_WIDTH = 24;
+
+/** Which bucket a state counts under in an overflow summary. */
+type StateBucket = "running" | "queued" | "paused" | "done" | "stopped" | "failed";
+
+/** How one agent or run state reads: a glyph AND a word, so colour is never the only cue. */
+interface FleetState {
+  glyph: string;
+  label: string;
+  color: string;
+  bucket: StateBucket;
+}
+
+/** The state of an agent record. */
+function agentState(status: AgentRecord["status"]): FleetState {
+  switch (status) {
+    case "queued": return { glyph: "◦", label: "queued", color: "muted", bucket: "queued" };
+    case "running": return { glyph: "▶", label: "running", color: "accent", bucket: "running" };
+    case "completed": return { glyph: "✓", label: "done", color: "success", bucket: "done" };
+    case "steered": return { glyph: "✓", label: "limit", color: "warning", bucket: "done" };
+    case "stopped": return { glyph: "■", label: "stopped", color: "dim", bucket: "stopped" };
+    case "aborted": return { glyph: "✗", label: "aborted", color: "error", bucket: "failed" };
+    case "error": return { glyph: "✗", label: "failed", color: "error", bucket: "failed" };
+  }
+}
+
+/** The bucket a workflow run counts under in an overflow summary. */
+function workflowBucket(status: FleetWorkflow["status"]): StateBucket {
+  switch (status) {
+    case "running": return "running";
+    case "paused": return "paused";
+    case "completed": return "done";
+    case "failed":
+    case "killed": return "failed";
+  }
+}
+
+const BUCKET_ORDER: readonly StateBucket[] = ["running", "queued", "paused", "failed", "stopped", "done"];
+
+/** `3 running, 1 failed` for the rows an indicator hides. */
+function summarizeHidden(rows: readonly (WorkflowEntry | AgentEntry)[]): string {
+  const counts = new Map<StateBucket, number>();
+  for (const row of rows) {
+    const bucket = row.kind === "workflow" ? workflowBucket(row.workflow.status) : agentState(row.record.status).bucket;
+    counts.set(bucket, (counts.get(bucket) ?? 0) + 1);
+  }
+  return BUCKET_ORDER.filter(b => counts.has(b)).map(b => `${counts.get(b)} ${b}`).join(", ");
+}
+
+/** One bounded line, including zero agents; the controller still hides an empty fleet. */
+export function renderFleetSummary(
+  agents: readonly AgentRecord[],
+  workflows: readonly FleetWorkflow[],
+  parked: number,
+  showCost: boolean,
+  width: number,
+  theme: Theme,
+  overflowFailures = 0,
+): string {
+  const rows: (AgentEntry | WorkflowEntry)[] = [
+    ...agents.map(record => ({ kind: "agent" as const, record })),
+    ...workflows.map(workflow => ({ kind: "workflow" as const, workflow })),
+  ];
+  const failed = rows.filter(row => row.kind === "agent"
+    ? agentState(row.record.status).bucket === "failed"
+    : workflowBucket(row.workflow.status) === "failed").length + overflowFailures;
+  const paused = workflows.filter(run => run.status === "paused").length;
+  const fallback = agents.filter(hasFallback).length;
+  // Actionable counts lead. Cap ONLY compact counts, then remove spaces before
+  // dropping any alert: all four fit at 20 columns even for arbitrarily large fleets.
+  const alerts = [
+    { count: failed, label: "failed", key: "E" },
+    { count: parked, label: "parked", key: "P" },
+    { count: paused, label: "paused", key: "B" },
+    { count: fallback, label: "fallback", key: "F" },
+  ].filter(alert => alert.count > 0);
+  let flagText = alerts.length ? `[${alerts.map(a => `${a.count} ${a.label}`).join(", ")}]` : "";
+  if (visibleWidth(flagText) > width) {
+    const compact = alerts.map(a => `${a.key}${a.count > MAX_COMPACT_ALERT_COUNT ? `${MAX_COMPACT_ALERT_COUNT}+` : a.count}`);
+    flagText = `[${compact.join(" ")}]`;
+    if (visibleWidth(flagText) > width) flagText = `[${compact.join("")}]`;
+    // Below the supported 20-column floor, shed lowest-priority alerts first.
+    // Failure is first and never becomes the shared helper's misleading [fb].
+    while (visibleWidth(flagText) > width && compact.length > 1) {
+      compact.pop();
+      flagText = `[${compact.join("")}]`;
+    }
+    if (visibleWidth(flagText) > width) flagText = width > 0 ? "!" : "";
+  }
+  const flag = theme.fg(failed ? "error" : "warning", flagText);
+  const cost = showCost ? formatCost(agents.reduce((sum, agent) => sum + getLifetimeCost(agent.lifetimeUsage), 0)) : "";
+  const summary = [summarizeHidden(rows), overflowFailures ? `${overflowFailures} more failed` : ""].filter(Boolean).join(", ") || "0 running";
+  const text = `agents: ${summary}${parked ? `, ${parked} parked` : ""}${cost ? ` · ${cost}` : ""} · ${FLEET_COLLAPSE_KEY} to expand`;
+  return withLeadingFlag("", alerts.length ? flag : "", theme.fg("dim", text), width);
+}
+
 export class FleetList {
   private ui: FleetUICtx | undefined;
   private tui: any | undefined;
@@ -121,6 +239,14 @@ export class FleetList {
   private timer: TimerHandle | undefined;
 
   private enabled = true;
+  /** Explicit session choice. Navigation temporarily reveals rows without changing it. */
+  private readonly journal = new FleetJournal();
+  private disclosureTimer: TimerHandle | undefined;
+  /** Weak observation prevents repeated journal lookups, without retaining manager records. */
+  private readonly observed = new WeakMap<AgentRecord, boolean>();
+  private readonly observedWorkflows = new WeakMap<object, number>();
+  /** Quota parking has no AgentRecord; the scheduler supplies its enabled-job count. */
+  private parkedSource: () => number = () => 0;
   /** Whether arrow keys currently navigate the list (vs. flow to the editor). */
   private active = false;
   /** 0 = `main`, 1..N = subagents. */
@@ -181,8 +307,56 @@ export class FleetList {
      */
     private detachedSource: () => readonly RunningDetached[] = () => [],
     private readonly clock: Clock = realClock,
+    /** @internal Host/test session lookup; a session can disappear after roster construction. */
+    private readonly options: { sessionFor?: (record: AgentRecord) => AgentRecord["session"] } = {},
   ) {}
 
+  /** UI-only disclosure; never claims a dialog's key or touches running work. */
+  toggleCollapse(): void {
+    if (!this.enabled || !this.ui || this.viewerClose || this.viewingWorkflowId || !this.editorHasFocus()) return;
+    this.journal.collapsed = this.active ? true : !this.journal.collapsed;
+    this.disclosureTimer?.cancel();
+    this.disclosureTimer = this.clock.setTimeout(() => this.flushState(), FLEET_DISCLOSURE_SETTLE_MS);
+    this.active = false;
+    this.selectedIndex = 0;
+    this.update();
+  }
+
+  /** Restore the last valid active-branch disclosure entry without writing another entry. */
+  restoreSession(
+    entries: readonly FleetJournalEntry[] | (() => readonly FleetJournalEntry[]),
+    persist: (state: FleetSnapshot) => void,
+  ): void {
+    this.disclosureTimer?.cancel();
+    this.disclosureTimer = undefined;
+    this.journal.restore(typeof entries === "function" ? entries : () => entries, persist);
+    this.active = false;
+    this.selectedIndex = 0;
+  }
+
+  /** Flush while the activation's appendEntry/context is still valid. */
+  flushState(): void {
+    this.disclosureTimer?.cancel();
+    this.disclosureTimer = undefined;
+    this.journal.flushDisclosure();
+  }
+
+  /** Terminal callback and detached-notice ingress, never dependent on a render tick. */
+  ingestFailure(value: unknown): void {
+    const alert = fleetAlert(value);
+    if (alert) this.journal.report(alert);
+  }
+
+  /** Shared semantic edge for result consumption, RPC and successful human inspection. */
+  acknowledgeFailure(id: string): void {
+    this.journal.acknowledge(id);
+  }
+
+  /** Inject scheduler display data, without coupling the fleet to scheduling behavior. */
+  setParkedSource(source: () => number): void {
+    this.parkedSource = source;
+  }
+
   // ---- Lifecycle ----
 
   setEnabled(enabled: boolean): void {
@@ -217,6 +391,7 @@ export class FleetList {
   }
 
   dispose(): void {
+    this.flushState();
     if (this.timer) { this.timer.cancel(); this.timer = undefined; }
     this.inputUnsub?.();
     this.inputUnsub = undefined;
@@ -237,11 +412,9 @@ export class FleetList {
   /** Re-register/refresh the below-editor widget; clears it when nothing remains. */
   update(): void {
     if (!this.ui) return;
-    // 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;
+    // Summary existence includes pending starts and quota parking: neither has
+    // an openable row yet. Navigation still uses the openable roster only.
+    const hasRows = this.enabled && (this.agentRecords(true).length > 0 || this.workflows().length > 0 || this.journal.count > 0 || this.parkedSource() > 0);
 
     if (!hasRows) {
       if (this.widgetRegistered) {
@@ -302,22 +475,45 @@ export class FleetList {
    * started sooner sit at the top. Every row is openable (has a session), so Enter
    * never dead-ends. Included: running/queued, plus the agent currently being
    * viewed, plus recently-finished ones (they linger briefly before dropping out).
-   * Pending agents with no session yet are hidden until they start.
+   * Pending agents have no openable row; includePending counts them in the summary.
    * (`listAgents()` is newest-first, so we re-sort.)
    */
-  private agentRecords(): AgentRecord[] {
+  private agentRecords(includePending = false): AgentRecord[] {
     const now = this.clock.now();
     // Orphans are live objects, so a settled one is simply skipped; the
     // registry drops it itself. Own records win if an id appears in both.
     const own = this.manager.listAgents();
     const ownIds = new Set(own.map(a => a.id));
     const orphans = this.detachedSource().map(d => d.record).filter(r => !ownIds.has(r.id));
-    return [...own, ...orphans]
-      .filter(a => isTopLevelAgent(a) && a.session && (
-        a.status === "running" || a.status === "queued"
-        || a.id === this.viewingAgentId
-        || (a.completedAt != null && now - a.completedAt < FINISHED_LINGER_MS)
-      ))
+    const records = new Map([...own, ...orphans].map(a => [a.id, a]));
+    for (const a of records.values()) {
+      if (!isTopLevelAgent(a) || (a.status !== "error" && a.status !== "aborted")) continue;
+      const consumed = !!a.resultConsumed;
+      if (this.observed.get(a) === consumed) continue;
+      this.observed.set(a, consumed);
+      if (consumed) this.acknowledgeFailure(a.id);
+      else this.ingestFailure(a);
+    }
+    for (const alert of this.journal.alerts) {
+      if (alert.state !== "error" && alert.state !== "aborted") continue;
+      const live = records.get(alert.id);
+      if (!live || !isOutstandingFailure(live)) records.set(`fleet-alert:${alert.id}`, {
+        id: alert.id, type: alert.type, description: alert.description, status: alert.state,
+        startedAt: alert.timestamp, completedAt: alert.timestamp, toolUses: 0, compactionCount: 0,
+        lifetimeUsage: { input: 0, output: 0, cacheWrite: 0, cost: 0 },
+      });
+    }
+    return [...records.values()]
+      .filter(a => {
+        if (!isTopLevelAgent(a)) return false;
+        if (isOutstandingFailure(a)) return this.journal.alerts.some(alert => alert.id === a.id);
+        // Consumed failures may linger as expanded history, never as outstanding alerts.
+        if (includePending && (a.status === "error" || a.status === "aborted")) return false;
+        return (includePending || a.session) && (
+          a.status === "running" || a.status === "queued" || a.id === this.viewingAgentId
+          || (a.completedAt != null && now - a.completedAt < FINISHED_LINGER_MS)
+        );
+      })
       .sort((a, b) => a.startedAt - b.startedAt);
   }
 
@@ -347,14 +543,31 @@ export class FleetList {
 
   /** Live runs, plus recently settled ones — the same linger the agents get. */
   private workflows(): FleetWorkflow[] {
-    if (!this.workflowSource) return [];
     const now = this.clock.now();
-    return [...this.workflowSource()]
-      .filter(run =>
-        run.status === "running"
-        || run.status === "paused"
-        || (run.completedAt != null && now - run.completedAt < FINISHED_LINGER_MS)
-      )
+    const runs = new Map((this.workflowSource?.() ?? []).map(run => [run.id, run]));
+    for (const run of runs.values()) {
+      if (run.status === "failed" || run.status === "killed") {
+        const key = run.observationKey ?? run;
+        const timestamp = run.completedAt ?? run.startedAt;
+        if (this.observedWorkflows.get(key) === timestamp) continue;
+        this.observedWorkflows.set(key, timestamp);
+        this.ingestFailure({ id: run.id, type: "workflow", description: run.name, status: run.status, startedAt: run.startedAt, completedAt: run.completedAt });
+      }
+    }
+    for (const alert of this.journal.alerts) {
+      if (alert.state !== "failed" && alert.state !== "killed") continue;
+      const live = runs.get(alert.id);
+      if (!live || (live.status !== "failed" && live.status !== "killed")) runs.set(`fleet-alert:${alert.id}`, {
+        id: alert.id, name: alert.description, status: alert.state, startedAt: alert.timestamp,
+        completedAt: alert.timestamp, doneCount: 0, totalCount: 0, tokens: 0,
+      });
+    }
+    return [...runs.values()]
+      .filter(run => {
+        if (run.status === "failed" || run.status === "killed") return this.journal.alerts.some(alert => alert.id === run.id);
+        return run.status === "running" || run.status === "paused"
+          || (run.completedAt != null && now - run.completedAt < FINISHED_LINGER_MS);
+      })
       .sort((a, b) => a.startedAt - b.startedAt);
   }
 
@@ -399,6 +612,13 @@ export class FleetList {
       return undefined;
     }
 
+    if (matchesKey(data, FLEET_COLLAPSE_KEY)) {
+      // Kitty event type 2 is auto-repeat; arrows deliberately still repeat.
+      if (isKeyRepeat(data)) return { consume: true };
+      this.toggleCollapse();
+      return { consume: true };
+    }
+
     if (!this.active) {
       // Activate: ↓ or ← at an empty prompt moves focus into the list.
       const isActivator = matchesKey(data, "down") || matchesKey(data, "left");
@@ -465,23 +685,36 @@ export class FleetList {
       return;
     }
     if (entry.kind === "workflow") {
+      if (!this.workflowSource?.().some(run => run.id === entry.workflow.id) || !this.openWorkflow) {
+        this.ui?.notify(`workflow: ${entry.workflow.name} (${entry.workflow.status}).`, "error");
+        this.acknowledgeFailure(entry.workflow.id);
+        this.update();
+        return;
+      }
       // 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(true),
         () => this.clearViewer(),
       );
       return;
     }
     const record = entry.record;
     if (!this.ui) return;
-    if (!record.session) {
+    const session = this.options.sessionFor ? this.options.sessionFor(record) : record.session;
+    if (!session) {
+      if (isOutstandingFailure(record)) {
+        this.ui.notify(record.error ?? `${record.type}: ${record.description} (${record.status}).`, "error");
+        markConsumed(record, this.clock.now());
+        this.acknowledgeFailure(record.id);
+        this.update();
+        return;
+      }
       this.ui.notify(`Agent is ${record.status} — no session available.`, "info");
       return;
     }
-    const session = record.session;
     const activity = this.activityFor(record.id);
     const orphan = this.detachedFor(record.id);
     this.viewingAgentId = record.id;
@@ -515,11 +748,11 @@ export class FleetList {
         overlay: true,
         overlayOptions: () => overlayOptions,
       },
-    ).then(() => this.clearViewer(), () => this.clearViewer());
+    ).then(() => this.clearViewer(true), () => this.clearViewer());
   }
 
   /** Reset overlay state and return to the list (on close, auto-close, or error). */
-  private clearViewer(): void {
+  private clearViewer(acknowledge = false): void {
     // Keep the cursor on the agent we were viewing — re-resolve by id so it
     // 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
@@ -533,6 +766,17 @@ export class FleetList {
       );
       if (idx >= 0) this.selectedIndex = idx;
     }
+    if (acknowledge && this.viewingAgentId) {
+      const record = this.agentRecords(true).find(a => a.id === this.viewingAgentId);
+      if (record && isOutstandingFailure(record)) {
+        markConsumed(record, this.clock.now());
+        this.acknowledgeFailure(record.id);
+      }
+    }
+    if (acknowledge && this.viewingWorkflowId) {
+      const run = this.workflows().find(run => run.id === this.viewingWorkflowId);
+      if (run?.status === "failed" || run?.status === "killed") this.acknowledgeFailure(run.id);
+    }
     this.viewerClose = undefined;
     this.viewingAgentId = undefined;
     this.viewingWorkflowId = undefined;
@@ -543,16 +787,21 @@ export class FleetList {
 
   private renderBar(width: number, theme: Theme): string[] {
     const rows = this.roster().slice(1) as (WorkflowEntry | AgentEntry)[];
-    if (rows.length === 0) return [];
+    if ((this.journal.collapsed && !this.active) || rows.length === 0) {
+      return [renderFleetSummary(this.agentRecords(true), this.workflows(), this.parkedSource(), this.showCost(), width, theme, this.journal.overflowCount)];
+    }
     // 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, rows.length);
 
     const hint = this.active
       ? "↑↓ select · enter view · esc back"
-      : "esc to interrupt · ← for agents · ↓ to manage";
+      : `esc to interrupt · ← for agents · ↓ to manage · ${FLEET_COLLAPSE_KEY} to collapse`;
     const lines: string[] = [];
-    lines.push(truncateToWidth("  " + theme.fg("dim", hint), width));
+    // Overflow details are deliberately bounded, but their exact failure count stays visible.
+    lines.push(this.journal.overflowCount
+      ? renderFleetSummary(this.agentRecords(true), this.workflows(), this.parkedSource(), this.showCost(), width, theme, this.journal.overflowCount)
+      : truncateToWidth("  " + theme.fg("dim", hint), width));
     lines.push("");
     lines.push(truncateToWidth(`  ${this.bullet(0, sel, theme)} main`, width));
 
@@ -567,15 +816,26 @@ export class FleetList {
 
     // Both indicator slots remain in the row block, blank at an edge, so every
     // overflowing roster has the same height.
-    // Column widths come from the visible agent rows so every tail lines up.
+    // Column widths come from EVERY agent row, not the window, so scrolling
+    // never shifts a column; a column too wide for the terminal is dropped
+    // lowest-value first, never state, elapsed, tokens or cost.
     const cells = new Map<AgentRecord, string[]>();
-    for (const r of rows.slice(start, start + visible)) {
-      if (r.kind === "agent") cells.set(r.record, this.tailCells(r.record));
+    for (const r of rows) {
+      if (r.kind === "agent") cells.set(r.record, this.tailCells(r.record, theme));
     }
-    const colWidths = TAIL_SLOTS.map((_, i) =>
-      Math.max(0, ...[...cells.values()].map(c => visibleWidth(c[i]))));
-    if (start > 0) lines.push(rightAlign("", theme.fg("dim", `↑ ${start} more`), width));
-    else if (overflow) lines.push("");
+    // Reserve the widest leading flag across ALL rows before fitting optional
+    // columns, so a fallback cannot hide the alias or shift columns on scroll.
+    const flagWidth = Math.max(0, ...[...cells.keys()].map(record => {
+      const flag = fallbackFlag(theme, record);
+      return flag ? visibleWidth(flag) + 1 : 0;
+    }));
+    const colWidths = this.fitColumns(
+      TAIL_SLOTS.map((_, i) => Math.max(0, ...[...cells.values()].map(c => visibleWidth(c[i])))),
+      width - flagWidth,
+    );
+    if (start > 0) {
+      lines.push(rightAlign("", theme.fg("dim", `↑ ${start} more: ${summarizeHidden(rows.slice(0, start))}`), width));
+    } else if (overflow) lines.push("");
     for (let a = start; a < start + visible; a++) {
       const row = rows[a];
       lines.push(
@@ -584,8 +844,9 @@ export class FleetList {
         : this.renderAgentRow(a + 1, sel, row.record, width, theme, cells.get(row.record) ?? [], colWidths),
       );
     }
-    if (hiddenBelow > 0) lines.push(rightAlign("", theme.fg("dim", `↓ ${hiddenBelow} more`), width));
-    else if (overflow) lines.push("");
+    if (hiddenBelow > 0) {
+      lines.push(rightAlign("", theme.fg("dim", `↓ ${hiddenBelow} more: ${summarizeHidden(rows.slice(start + visible))}`), width));
+    } else if (overflow) lines.push("");
     // pi stacks below-editor widgets directly on its footer with no spacer (#351).
     lines.push("");
 
@@ -619,8 +880,26 @@ export class FleetList {
     return rightAlign(left, selected ? theme.fg("text", stats) : theme.fg("dim", stats), width);
   }
 
+  /** Zero the widths of droppable columns, lowest value first, until the tail leaves room for the description. */
+  private fitColumns(widths: number[], width: number): number[] {
+    const fitted = [...widths];
+    const tail = () => {
+      const used = fitted.filter(w => w > 0);
+      return used.reduce((sum, w) => sum + w, 0) + 3 * Math.max(0, used.length - 1);
+    };
+    const droppable = TAIL_SLOTS
+      .map((slot, i) => ({ i, rank: "drop" in slot ? slot.drop : 0 }))
+      .filter(c => c.rank > 0)
+      .sort((x, y) => x.rank - y.rank);
+    for (const { i } of droppable) {
+      if (width - tail() >= MIN_LEFT_WIDTH) break;
+      fitted[i] = 0;
+    }
+    return fitted;
+  }
+
   /** One agent's stats tail as {@link TAIL_SLOTS} cells; "" where a slot has no value. */
-  private tailCells(record: AgentRecord): string[] {
+  private tailCells(record: AgentRecord, theme: Theme): string[] {
     // The record, not the activity tracker — see the note in AgentWidget's
     // running line: only the record carries a nested child's spend, and only it
     // outlives the agent.
@@ -632,15 +911,18 @@ export class FleetList {
       // Leading, and paired: a thinking level means nothing without its model.
       const { modelName, tags } = buildInvocationTags(record.invocation);
       model = modelName ?? "";
-      thinking = tags.find(tag => tag.startsWith("thinking: ")) ?? "";
+      // `think:high` here, so the configured level cannot read as a duplicate
+      // of the live `thinking · 4s` activity beside it.
+      thinking = (tags.find(tag => tag.startsWith("thinking: ")) ?? "").replace(/^thinking: /, "think:");
     }
+    const state = agentState(record.status);
     // What the in-flight model call is doing, only while the agent is running:
     // a finished row has no call to describe.
     const call = record.status === "running"
       ? describeModelCall(this.activityFor(record.id)?.modelCall, this.clock.now())
       : undefined;
     const cost = this.showCost() ? formatCost(getLifetimeCost(record.lifetimeUsage)) : "";
-    return [model, thinking, call ?? "", formatFleetElapsed(elapsedMs), formatFleetTokens(tokens), cost];
+    return [theme.fg(state.color, `${state.glyph} ${state.label}`), model, thinking, call ?? "", formatFleetElapsed(elapsedMs), formatFleetTokens(tokens), cost];
   }
 
   private renderAgentRow(
@@ -660,16 +942,44 @@ export class FleetList {
     const name = renderAgentName(record.type, theme, selected
       ? { fallbackColor: "text", bold: hasAgentBadge(record.type) }
       : { fallbackColor: "muted" });
-    const description = selected ? theme.fg("text", record.description) : record.description;
-    const left = `  ${this.bullet(rosterIndex, sel, theme)} ${name}  ${description}`;
+    // The spawner's `name` leads when there is one, so two agents of one type
+    // with similar descriptions stay distinguishable after truncation.
+    const label = record.alias ? `${record.alias}: ${record.description}` : record.description;
+    const description = selected ? theme.fg("text", label) : label;
+    let prefix = `  ${this.bullet(rosterIndex, sel, theme)} `;
+    const left = `${name}  ${description}`;
     // Fixed-width slots (blank where a row has no value) keep each column at the
     // same cells on every row; an all-empty column is dropped.
-    const stats = TAIL_SLOTS.map((slot, i) => {
+    let stats = TAIL_SLOTS.map((slot, i) => {
       if (colWidths[i] === 0) return undefined;
       const pad = " ".repeat(colWidths[i] - visibleWidth(cells[i] ?? ""));
       return slot.align === "end" ? (cells[i] ?? "") + pad : pad + (cells[i] ?? "");
     }).filter((c): c is string => c !== undefined).join(" · ");
-    const right = selected ? theme.fg("text", stats) : theme.fg("dim", stats);
-    return rightAlign(left, right, width);
+    let flag = fallbackFlag(theme, record);
+    if (flag && visibleWidth(prefix + flag) + 1 + visibleWidth(stats) > width) {
+      // Description space is exhausted and fitColumns already dropped activity,
+      // thinking and model. Use the SHARED helper's compact marker, never slice
+      // the flag, before sacrificing any spend cell. Rendering an empty body in
+      // the flag budget selects [fb] or ! with the same policy as every renderer.
+      const flagBudget = Math.max(1, width - visibleWidth(prefix) - visibleWidth(stats) - 1);
+      flag = withLeadingFlag("", flag, "", flagBudget).trimEnd();
+    }
+    // Every row preserves spend, not just rows carrying a fallback marker.
+    const markerWidth = flag ? visibleWidth(flag) + 1 : 0;
+    if (visibleWidth(prefix) + markerWidth + visibleWidth(stats) > width) {
+      // A state word and padded separators are not spend. Keep its glyph and
+      // unpadded elapsed/tokens/cost, then remove navigation padding if needed.
+      const spend = cells.slice(4).filter(Boolean);
+      stats = [agentState(record.status).glyph, ...spend].join(" ");
+      if (visibleWidth(prefix) + markerWidth + visibleWidth(stats) > width) prefix = "";
+      const remaining = width - markerWidth;
+      if (visibleWidth(stats) > remaining) stats = spend.join(" ");
+      // Only when all three cannot physically fit may elapsed yield to spend.
+      if (visibleWidth(stats) > remaining) stats = spend.slice(1).join(" ");
+    }
+    const right = fgPreservingNestedStyles(theme, selected ? "text" : "dim", stats);
+    // The flag leads the row (even with `showModel` off: a substituted model is
+    // not cosmetic) and the name/description/tail are laid out in what is left.
+    return withLeadingFlag(prefix, flag, inner => rightAlign(left, right, inner), width);
   }
 }