@esso0428/pi-subagents 0.17.5 → 0.17.7

package/src/ui/fleet-list.ts

@@ -0,0 +1,558 @@
+/**
+ * fleet-list.ts — Claude Code-style "FleetView" list rendered below the editor.
+ *
+ * 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.
+ * A viewer stays open when its agent finishes; finished agents linger briefly in the list.
+ *
+ * Mechanics (see plan): the list is a `belowEditor` widget (render-only), and ALL key
+ * handling goes through `onTerminalInput` — which fires before the focused editor and
+ * can `consume` keys — gated on `getEditorText() === ""` so normal typing is untouched.
+ */
+
+import { Editor, isKeyRelease, Key, matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { hasAgentBadge, renderAgentName } from "../agent-color.js";
+import { readAgentHistory } from "../agent-history.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 { ConversationViewer, createStaticConversationSource, VIEWPORT_HEIGHT_PCT } from "./conversation-viewer.js";
+
+/** Widget key for the below-editor fleet list. */
+const FLEET_KEY = "fleet";
+/** Max agent rows shown at once; extras collapse into a "↓ N more" indicator. */
+const MAX_AGENT_ROWS = 5;
+/** Re-render cadence so elapsed/token stats tick while agents run. */
+const TICK_MS = 200;
+/** How long a finished agent lingers in the list before it drops out. */
+const FINISHED_LINGER_MS = 4000;
+
+/** Minimal UI surface the FleetView needs from `ctx.ui` (structural subset). */
+export type FleetUICtx = {
+  setWidget(
+    key: string,
+    content: undefined | ((tui: any, theme: Theme) => { render(width: number): string[]; invalidate(): void; dispose?(): void }),
+    options?: { placement?: "aboveEditor" | "belowEditor" },
+  ): void;
+  onTerminalInput(handler: (data: string) => { consume?: boolean; data?: string } | undefined): () => void;
+  getEditorText(): string;
+  notify(message: string, type?: "info" | "warning" | "error"): void;
+  custom<T>(
+    factory: (tui: any, theme: Theme, keybindings: any, done: (result: T) => void) => { render(width: number): string[]; invalidate(): void; dispose?(): void },
+    options?: { overlay?: boolean; overlayOptions?: unknown; onHandle?: (handle: unknown) => void },
+  ): 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 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 {
+  return `${Math.max(0, Math.round(ms / 1000))}s`;
+}
+
+/** `↓ 13.1k tokens` — down-arrow prefix, compact magnitude, plural "tokens". */
+export function formatFleetTokens(count: number): string {
+  let compact: string;
+  if (count >= 1_000_000) compact = `${(count / 1_000_000).toFixed(1)}M`;
+  else if (count >= 1_000) compact = `${(count / 1_000).toFixed(1)}k`;
+  else compact = `${count}`;
+  return `↓ ${compact} tokens`;
+}
+
+/**
+ * Place `right` flush to `width`, truncating `left` first so the stats survive.
+ * The final clamp guarantees the line never exceeds `width` (which would wrap and
+ * desync pi's line-diff → flicker) even on a terminal too narrow for the stats.
+ */
+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);
+  return truncateToWidth(leftClamped + " ".repeat(gap) + right, width);
+}
+
+export class FleetList {
+  private ui: FleetUICtx | undefined;
+  private tui: any | undefined;
+  private inputUnsub: (() => void) | undefined;
+  private widgetRegistered = false;
+  private timer: ReturnType<typeof setInterval> | undefined;
+
+  private enabled = true;
+  /** Whether arrow keys currently navigate the list (vs. flow to the editor). */
+  private active = false;
+  /** 0 = `main`, 1..N = subagents. */
+  private selectedIndex = 0;
+  /** 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,
+    private agentActivity: Map<string, AgentActivity>,
+    /**
+     * Read live at render time. Whether each row shows an estimated cost after
+     * its token count. Defaults to off — the extension supplies the user's
+     * `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,
+    private cwd?: string,
+  ) {}
+
+  // ---- Lifecycle ----
+
+  setCwd(cwd: string): void {
+    this.cwd = cwd;
+  }
+
+  setEnabled(enabled: boolean): void {
+    if (enabled === this.enabled) return;
+    this.enabled = enabled;
+    if (!enabled) this.active = false;
+    this.update();
+  }
+
+  /** Capture the UI context and (re)register the global input handler. */
+  setUICtx(ui: FleetUICtx, registerInput = true): void {
+    if (ui === this.ui) {
+      if (registerInput && !this.inputUnsub) this.inputUnsub = ui.onTerminalInput(data => this.handleKey(data));
+      return;
+    }
+    this.inputUnsub?.();
+    this.ui = ui;
+    this.widgetRegistered = false;
+    this.tui = undefined;
+    this.inputUnsub = registerInput ? ui.onTerminalInput(data => this.handleKey(data)) : undefined;
+  }
+
+  /** Ensure the re-render timer is running (called when an agent spawns). */
+  ensureTimer(): void {
+    if (!this.timer) this.timer = setInterval(() => this.update(), TICK_MS);
+  }
+
+  /**
+   * Called when an agent finishes. The viewer (if open on it) stays open so the
+   * final output remains readable, and the row lingers in the list — just refresh.
+   */
+  onAgentFinished(_id: string): void {
+    this.update();
+  }
+
+  dispose(): void {
+    if (this.timer) { clearInterval(this.timer); this.timer = undefined; }
+    this.inputUnsub?.();
+    this.inputUnsub = undefined;
+    if (this.viewerClose) { this.viewerClose(); 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;
+    this.tui = undefined;
+    this.active = false;
+    // Null last so a `viewerClose()` microtask above can't re-register the widget.
+    this.ui = undefined;
+  }
+
+  /** 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;
+
+    if (!hasRows) {
+      if (this.widgetRegistered) {
+        this.ui.setWidget(FLEET_KEY, undefined);
+        this.widgetRegistered = false;
+        this.tui = undefined;
+      }
+      if (this.timer) { clearInterval(this.timer); this.timer = undefined; }
+      this.active = false;
+      this.selectedIndex = 0;
+      return;
+    }
+
+    this.clampSelection();
+    this.ensureTimer(); // keep stats ticking whenever the list is shown (e.g. after a re-enable)
+
+    if (!this.widgetRegistered) {
+      this.ui.setWidget(FLEET_KEY, (tui, theme) => {
+        this.tui = tui;
+        return {
+          render: (w: number) => this.renderBar(w, theme),
+          invalidate: () => { this.widgetRegistered = false; this.tui = undefined; },
+        };
+      }, { placement: "belowEditor" });
+      this.widgetRegistered = true;
+    } else {
+      this.tui?.requestRender();
+    }
+  }
+
+  // ---- Roster ----
+
+  /**
+   * Agents shown in the list, ordered earliest-launched first so the ones you
+   * 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.
+   * (`listAgents()` is newest-first, so we re-sort.)
+   */
+  private agentRecords(): AgentRecord[] {
+    const now = Date.now();
+    return this.manager.listAgents()
+      .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)
+      ))
+      .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 })),
+    ];
+  }
+
+  private clampSelection(): void {
+    const max = this.roster().length - 1;
+    if (this.selectedIndex > max) this.selectedIndex = Math.max(0, max);
+    if (this.selectedIndex < 0) this.selectedIndex = 0;
+  }
+
+  // ---- Key handling ----
+
+  /** Returns `{consume:true}` to swallow a key, or undefined to let it through. */
+  handleKey(data: string): { consume?: boolean; data?: string } | undefined {
+    if (!this.enabled || !this.ui) return undefined;
+    // Input listeners receive BOTH key-press and key-release (the kitty protocol
+    // 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. 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
+    // anything but the editor owns the keyboard, stay out of its keys (#123).
+    if (!this.editorHasFocus()) {
+      if (this.active) this.deactivate();
+      return undefined;
+    }
+
+    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.roster().length > 1 && this.ui.getEditorText() === "") {
+        this.active = true;
+        this.selectedIndex = 0;
+        this.update();
+        return { consume: true };
+      }
+      return undefined;
+    }
+
+    // Active — arrows navigate, Enter opens, Esc / Up-past-top exits.
+    if (matchesKey(data, "down")) {
+      const max = this.roster().length - 1;
+      this.selectedIndex = Math.min(max, this.selectedIndex + 1);
+      this.update();
+      return { consume: true };
+    }
+    if (matchesKey(data, "up")) {
+      if (this.selectedIndex === 0) { this.deactivate(); return { consume: true }; }
+      this.selectedIndex -= 1;
+      this.update();
+      return { consume: true };
+    }
+    if (matchesKey(data, "escape")) { this.deactivate(); return { consume: true }; }
+    if (matchesKey(data, Key.enter)) { this.openSelected(); return { consume: true }; }
+
+    // Any other key cancels navigation and flows to the editor.
+    this.deactivate();
+    return undefined;
+  }
+
+  /**
+   * True when pi's prompt editor owns the keyboard. pi's editor is an `Editor`
+   * subclass (CustomEditor) while every dialog/selector is not, and the loader
+   * aliases pi-tui to pi's own copy, so `instanceof` is a reliable identity
+   * check. `focusedComponent` is TUI-private (no public accessor), hence the
+   * best-effort peek: unknowable focus (no tui seen yet, nothing focused)
+   * counts as the editor so activation keeps working.
+   */
+  private editorHasFocus(): boolean {
+    const focused = (this.tui as { focusedComponent?: unknown } | undefined)?.focusedComponent;
+    return focused == null || focused instanceof Editor;
+  }
+
+  private deactivate(): void {
+    this.active = false;
+    this.selectedIndex = 0;
+    this.update();
+  }
+
+  private openSelected(): void {
+    const entry = this.roster()[this.selectedIndex];
+    if (!entry || entry.kind === "main") {
+      // `main` = return to the prompt; the native transcript is already shown.
+      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;
+    const session = record.session ?? (record.transcriptPath && this.cwd
+      ? (() => {
+          const messages = readAgentHistory(this.cwd!, record.transcriptPath!);
+          return messages ? createStaticConversationSource(messages) : undefined;
+        })()
+      : undefined);
+    if (!session) {
+      this.ui.notify(`Agent is ${record.status} — no session available.`, "info");
+      return;
+    }
+    const isHistory = record.session === undefined;
+    const activity = this.agentActivity.get(record.id);
+    this.viewingAgentId = record.id;
+
+    void this.ui.custom<undefined>(
+      (tui, theme, keybindings, done) => {
+        this.viewerClose = () => done(undefined);
+        return new ConversationViewer(
+          tui,
+          session,
+          record,
+          activity,
+          theme,
+          done,
+          isHistory ? undefined : () => {
+            if (this.manager.abort(record.id)) this.ui?.notify(`Stopped "${record.description}".`, "info");
+          },
+          keybindings,
+          isHistory ? undefined : (message: string) => this.manager.steer(record.id, message),
+          this.showCost(),
+          this.viewerMarkdown,
+          this.onViewerMarkdown,
+        );
+      },
+      {
+        overlay: true,
+        overlayOptions: { anchor: "center", width: "90%", maxHeight: `${VIEWPORT_HEIGHT_PCT}%` },
+      },
+    ).then(() => this.clearViewer(), () => this.clearViewer());
+  }
+
+  /** Reset overlay state and return to the list (on close, auto-close, or error). */
+  private clearViewer(): 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
+    // update()'s clamp to settle.
+    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 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, rows.length);
+
+    const hint = this.active
+      ? "↑↓ select · enter view · esc back"
+      : "esc to interrupt · ← for agents · ↓ to manage";
+    const lines: string[] = [];
+    lines.push(truncateToWidth("  " + theme.fg("dim", hint), width));
+    lines.push("");
+    lines.push(truncateToWidth(`  ${this.bullet(0, sel, theme)} main`, width));
+
+    // 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(
+        row.kind === "workflow" ?
+          this.renderWorkflowRow(a + 1, sel, row.workflow, width, theme)
+        : this.renderAgentRow(a + 1, sel, row.record, width, theme),
+      );
+    }
+    if (hiddenBelow > 0) lines.push(rightAlign("", theme.fg("dim", `↓ ${hiddenBelow} more`), width));
+
+    return lines;
+  }
+
+  private bullet(rosterIndex: number, sel: number, theme: Theme): string {
+    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, record: AgentRecord, width: number, theme: Theme): string {
+    // The selected row renders in the theme's primary text color so it reads as
+    // one selection (#230). A configured badge survives — Claude Code's FleetView
+    // keeps the agent color on the selected row too and only bolds it — which also
+    // keeps the row's width fixed as the selection moves.
+    const selected = rosterIndex === sel;
+    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 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.
+    const tokens = getLifetimeTotal(record.lifetimeUsage);
+    const elapsedMs = (record.completedAt ?? Date.now()) - record.startedAt; // freezes once finished
+    const cost = this.showCost() ? formatCost(getLifetimeCost(record.lifetimeUsage)) : "";
+    const stats = `${formatFleetElapsed(elapsedMs)} · ${formatFleetTokens(tokens)}${cost ? ` · ${cost}` : ""}`;
+    const right = selected ? theme.fg("text", stats) : theme.fg("dim", stats);
+    return rightAlign(left, right, width);
+  }
+}

package/src/ui/schedule-menu.ts

@@ -11,6 +11,7 @@
 import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import type { SubagentScheduler } from "../schedule.js";
 import type { ScheduledSubagent } from "../types.js";
+import { selectItem } from "./select-item.js";
 
 /** Format an ISO timestamp as relative time ("in 4h", "2d ago", "—"). */
 function relTime(iso: string | undefined, now = Date.now()): string {
@@ -85,16 +86,16 @@ export async function showSchedulesMenu(
     return;
   }
 
-  const labels = jobs.map(j => formatJob(j, scheduler));
-  const choice = await ctx.ui.select(
+  // Numbered + item-paired: two jobs whose names agree in the first 18
+  // characters format identically, and matching the returned string back
+  // against a parallel label array cancelled whichever came first.
+  const job = await selectItem(
+    ctx.ui,
     `Scheduled jobs (${jobs.length}) — select to cancel`,
-    labels,
+    jobs,
+    j => formatJob(j, scheduler),
   );
-  if (!choice) return;
-
-  const idx = labels.indexOf(choice);
-  if (idx < 0) return;
-  const job = jobs[idx];
+  if (!job) return;
 
   const ok = await ctx.ui.confirm(`Cancel "${job.name}"?`, formatDetails(job, scheduler));
   if (!ok) return;

package/src/ui/select-item.ts

@@ -0,0 +1,45 @@
+/**
+ * select-item.ts — pick an item from a list via `ctx.ui.select`, safely.
+ *
+ * Pi's dialog API is `select(title, options: string[]) => Promise<string | undefined>`:
+ * strings in, string out, with no index or value form. Callers therefore have to
+ * map the returned string back to the item it came from, and the obvious way —
+ * `labels.indexOf(choice)` over a parallel array — silently resolves to the
+ * FIRST match whenever two rows format identically. Row formatters here truncate
+ * (job names to 18 chars, agent descriptions to whatever fits), and the text they
+ * truncate is LLM-authored, so collisions are ordinary rather than exotic.
+ *
+ * This numbers every row, which makes the labels unique by construction — no
+ * data-dependent branch that only executes in the case nobody exercises — and
+ * keeps each label paired with its item so a later edit that sorts or filters
+ * between building and resolving cannot desync them.
+ */
+
+/** Minimal shape of the `ctx.ui` surface this needs. */
+export interface SelectUI {
+  select(title: string, options: string[]): Promise<string | undefined>;
+}
+
+/**
+ * Show a numbered picker and return the chosen item (not its label).
+ *
+ * Returns undefined when the user escapes, or when the returned string is not
+ * one we offered.
+ */
+export async function selectItem<T>(
+  ui: SelectUI,
+  title: string,
+  items: readonly T[],
+  format: (item: T, index: number) => string,
+): Promise<T | undefined> {
+  // Pad the number so a 10+ item list keeps its columns aligned.
+  const width = String(items.length).length;
+  const rows = items.map((item, i) => ({
+    item,
+    label: `${String(i + 1).padStart(width)}. ${format(item, i)}`,
+  }));
+
+  const choice = await ui.select(title, rows.map(r => r.label));
+  if (!choice) return undefined;
+  return rows.find(r => r.label === choice)?.item;
+}