@clanker-code/pi-subagents 0.10.5

package/src/ui/agent-tool-rendering.ts

@@ -0,0 +1,175 @@
+import { Text } from "@earendil-works/pi-tui";
+import { getModelLabelFromConfig } from "../agent-tool-description.js";
+import { getAgentConfig } from "../agent-types.js";
+import { extractText } from "../context.js";
+import { type AgentDetails, formatMs, formatTurns, getDisplayName, SPINNER } from "./agent-widget.js";
+
+export function compactPreview(text: string, maxLen = 80): string {
+  const oneLine = text.replace(/\s+/g, " ").trim();
+  if (oneLine.length <= maxLen) return oneLine;
+  return oneLine.slice(0, maxLen - 1).trimEnd() + "…";
+}
+
+export function tailPreview(text: string, maxLen = 100): string {
+  const oneLine = text.replace(/\s+/g, " ").trim();
+  if (oneLine.length <= maxLen) return oneLine;
+  return "…" + oneLine.slice(oneLine.length - (maxLen - 1));
+}
+
+export function snipMiddleLines(text: string, edgeLines = 20): string[] {
+  const lines = text.split("\n");
+  const maxLines = edgeLines * 2;
+  if (lines.length <= maxLines) return lines;
+  const omitted = lines.length - maxLines;
+  return [
+    ...lines.slice(0, edgeLines),
+    `... ${omitted} lines omitted; expand for full output ...`,
+    ...lines.slice(-edgeLines),
+  ];
+}
+
+/**
+ * Shape of the args passed to the Agent tool's `renderCall`. Mirrors the tool
+ * parameter schema — only the fields whose presence changes the call-time
+ * header are listed. Anything we can't decide at call time (e.g. an agent that
+ * inherits its model from the parent) is intentionally omitted here and is
+ * surfaced later by `renderResult`.
+ */
+export interface AgentCallArgs {
+  subagent_type?: string;
+  description?: string;
+  /** Explicit per-call model override (`provider/modelId` or fuzzy name). */
+  model?: string;
+  /** Agent ID being resumed; only set on resume calls. */
+  resume?: string;
+  /** Schedule expression; only set on schedule calls. */
+  schedule?: string;
+  /** Drop parent extension tools for this run. */
+  isolated?: boolean;
+  /** Isolation mode — currently only "worktree". */
+  isolation?: "worktree";
+}
+
+/**
+ * Resolve the model that this call will use, if it's knowable before execute().
+ * Resolution order: explicit `args.model` > agent config frontmatter > none.
+ * Inheritance from the parent session is decided inside execute() and surfaced
+ * by `renderResult` once the resolved model is available.
+ */
+function resolveCallModel(args: any): string | undefined {
+  if (typeof args.model === "string" && args.model) return args.model;
+  if (typeof args.subagent_type === "string") return getAgentConfig(args.subagent_type)?.model;
+  return undefined;
+}
+
+/** Build the dimmed badge list shown between the agent name and the description. */
+function buildCallBadges(args: any, theme: any): string {
+  const badges: string[] = [];
+  const callModel = resolveCallModel(args);
+  if (callModel) badges.push(getModelLabelFromConfig(callModel));
+  if (typeof args.resume === "string" && args.resume) {
+    badges.push(`resume: ${compactPreview(args.resume, 12)}`);
+  }
+  if (typeof args.schedule === "string" && args.schedule) {
+    badges.push(`schedule: ${compactPreview(args.schedule, 20)}`);
+  }
+  if (args.isolation === "worktree") badges.push("worktree");
+  if (args.isolated) badges.push("isolated");
+  if (badges.length === 0) return "";
+  const sep = " " + theme.fg("dim", "·") + " ";
+  return "  " + badges.map((b) => theme.fg("dim", b)).join(sep);
+}
+
+export function renderAgentCall(args: any, theme: any): Text {
+  const displayName = args.subagent_type ? getDisplayName(args.subagent_type) : "Agent";
+  const desc = args.description ?? "";
+  const badges = buildCallBadges(args, theme);
+  const descPart = desc ? "  " + theme.fg("muted", desc) : "";
+  return new Text("▸ " + theme.fg("toolTitle", theme.bold(displayName)) + badges + descPart, 0, 0);
+}
+
+function getResultText(content: unknown): string {
+  if (!Array.isArray(content)) return typeof content === "string" ? content : "";
+  return extractText(content);
+}
+
+export function renderAgentResult(result: any, { expanded, isPartial }: { expanded: boolean; isPartial: boolean }, theme: any): Text {
+  const details = result.details as AgentDetails | undefined;
+  if (!details) {
+    return new Text(getResultText(result.content), 0, 0);
+  }
+
+  const stats = (d: AgentDetails) => {
+    const parts: string[] = [];
+    if (d.modelName) parts.push(d.modelName);
+    if (d.tags) parts.push(...d.tags);
+    if (d.turnCount != null && d.turnCount > 0) {
+      parts.push(formatTurns(d.turnCount, d.maxTurns));
+    }
+    if (d.toolUses > 0) parts.push(`${d.toolUses} tool use${d.toolUses === 1 ? "" : "s"}`);
+    if (d.tokens) parts.push(d.tokens);
+    return parts.map(p => theme.fg("dim", p)).join(" " + theme.fg("dim", "·") + " ");
+  };
+
+  if (isPartial || details.status === "running") {
+    const frame = SPINNER[details.spinnerFrame ?? 0];
+    const s = stats(details);
+    let line = theme.fg("accent", frame) + (s ? " " + s : "");
+    line += "\n" + theme.fg("dim", `  ⎿  ${details.activity ?? "thinking…"}`);
+    return new Text(line, 0, 0);
+  }
+
+  if (details.status === "background") {
+    return new Text(theme.fg("dim", `  ⎿  Running in background (ID: ${details.agentId})`), 0, 0);
+  }
+
+  if (details.status === "completed" || details.status === "steered") {
+    const duration = formatMs(details.durationMs);
+    const isSteered = details.status === "steered";
+    const icon = isSteered ? theme.fg("warning", "✓") : theme.fg("success", "✓");
+    const s = stats(details);
+    let line = icon + (s ? " " + s : "");
+    line += " " + theme.fg("dim", "·") + " " + theme.fg("dim", duration);
+
+    const resultText = getResultText(result.content).trim();
+    if (expanded) {
+      if (resultText) {
+        for (const lineText of resultText.split("\n")) {
+          line += "\n" + theme.fg("dim", `  ${lineText}`);
+        }
+      }
+    } else {
+      const doneText = isSteered ? "Wrapped up (turn limit)" : "Done";
+      if (resultText) {
+        for (const lineText of snipMiddleLines(resultText)) {
+          line += "\n" + theme.fg("dim", `  ${lineText}`);
+        }
+      } else {
+        line += "\n" + theme.fg("dim", `  ⎿  ${doneText}`);
+      }
+    }
+    return new Text(line, 0, 0);
+  }
+
+  if (details.status === "stopped") {
+    const s = stats(details);
+    let line = theme.fg("dim", "■") + (s ? " " + s : "");
+    line += "\n" + theme.fg("dim", "  ⎿  Stopped");
+    return new Text(line, 0, 0);
+  }
+
+  const s = stats(details);
+  let line = theme.fg("error", "✗") + (s ? " " + s : "");
+  if (details.status === "error") {
+    line += "\n" + theme.fg("error", `  ⎿  Error: ${details.error ?? "unknown"}`);
+  } else {
+    line += "\n" + theme.fg("warning", "  ⎿  Aborted (max turns exceeded)");
+  }
+  return new Text(line, 0, 0);
+}
+
+export function renderSteerCall(args: { agent_id?: string; message?: string }, theme: any): Text {
+  const agentId = args.agent_id ? ` ${theme.fg("muted", args.agent_id)}` : "";
+  const preview = args.message ? `  ${theme.fg("dim", `“${compactPreview(args.message)}”`)}` : "";
+  return new Text(`▸ ${theme.fg("toolTitle", theme.bold("Steer Agent"))}${agentId}${preview}`, 0, 0);
+}

package/src/ui/agent-widget-tree.ts

@@ -0,0 +1,169 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { getConfig } from "../agent-types.js";
+import type { AgentInvocation, SubagentType } from "../types.js";
+import type { AgentActivity, Theme } from "./agent-widget.js";
+
+export type WidgetDisplayMode = "auto" | "rich" | "compact";
+
+export interface WidgetAgentSnapshot {
+  id: string;
+  parentAgentId?: string;
+  depth?: number;
+  type: SubagentType;
+  description: string;
+  status: string;
+  startedAt: number;
+  completedAt?: number;
+  error?: string;
+  toolUses: number;
+  invocation?: AgentInvocation;
+  activity?: AgentActivity;
+}
+
+export interface WidgetTreeNode {
+  snapshot: WidgetAgentSnapshot;
+  children: WidgetTreeNode[];
+  orphaned?: boolean;
+}
+
+function statusRank(status: string): number {
+  if (status === "running") return 0;
+  if (status === "queued") return 1;
+  return 2;
+}
+
+function sortNodes(a: WidgetTreeNode, b: WidgetTreeNode): number {
+  const status = statusRank(a.snapshot.status) - statusRank(b.snapshot.status);
+  if (status !== 0) return status;
+  return a.snapshot.startedAt - b.snapshot.startedAt;
+}
+
+export interface RenderTreeOptions {
+  mode: WidgetDisplayMode;
+  width: number;
+  maxLines: number;
+  theme: Theme;
+  frame: string;
+  now?: number;
+}
+
+export function buildAgentTree(records: WidgetAgentSnapshot[]): WidgetTreeNode[] {
+  const nodes = new Map<string, WidgetTreeNode>();
+  for (const record of records) nodes.set(record.id, { snapshot: record, children: [] });
+
+  const roots: WidgetTreeNode[] = [];
+  for (const node of nodes.values()) {
+    const parentId = node.snapshot.parentAgentId;
+    const parent = parentId ? nodes.get(parentId) : undefined;
+    if (parent) {
+      parent.children.push(node);
+    } else {
+      if (parentId) node.orphaned = true;
+      roots.push(node);
+    }
+  }
+
+  function sortDeep(items: WidgetTreeNode[]) {
+    items.sort(sortNodes);
+    for (const item of items) sortDeep(item.children);
+  }
+
+  sortDeep(roots);
+  return roots;
+}
+
+export function chooseEffectiveMode(
+  mode: WidgetDisplayMode,
+  width: number,
+  richLineCount: number,
+  maxLines: number,
+): "rich" | "compact" {
+  if (mode === "rich" || mode === "compact") return mode;
+  if (width < 88) return "compact";
+  if (richLineCount > maxLines) return "compact";
+  return "rich";
+}
+
+function formatElapsed(startedAt: number, now: number): string {
+  const seconds = Math.max(0, Math.floor((now - startedAt) / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return rest > 0 ? `${minutes}m ${rest}s` : `${minutes}m`;
+}
+
+function statusIcon(snapshot: WidgetAgentSnapshot, frame: string, theme: Theme): string {
+  if (snapshot.status === "running") return theme.fg("accent", frame);
+  if (snapshot.status === "queued") return theme.fg("muted", "◦");
+  if (snapshot.status === "completed") return theme.fg("success", "✓");
+  if (snapshot.status === "stopped") return theme.fg("dim", "■");
+  return theme.fg("error", "✗");
+}
+
+function displayName(type: SubagentType): string {
+  return getConfig(type).displayName;
+}
+
+function collectRows(
+  nodes: WidgetTreeNode[],
+  options: RenderTreeOptions,
+  mode: "rich" | "compact",
+  prefix = "",
+): string[] {
+  const rows: string[] = [];
+  nodes.forEach((node, index) => {
+    const isLast = index === nodes.length - 1;
+    const connector = isLast ? "└─" : "├─";
+    const childPrefix = prefix + (isLast ? "   " : "│  ");
+    const s = node.snapshot;
+    const name = displayName(s.type);
+    const elapsed = formatElapsed(s.startedAt, options.now ?? Date.now());
+    const stats: string[] = [];
+    if (s.activity?.turnCount) stats.push(`↻${s.activity.turnCount}`);
+    if (s.toolUses > 0) stats.push(`${s.toolUses} tool${s.toolUses === 1 ? "" : "s"}`);
+    stats.push(elapsed);
+    const orphan = node.orphaned ? " ⚠ orphan" : "";
+    const error = s.error ? ` error: ${s.error}` : "";
+    rows.push(`${prefix}${connector} ${statusIcon(s, options.frame, options.theme)} ${options.theme.bold(name)}  ${options.theme.fg("muted", s.description)} ${options.theme.fg("dim", `· ${stats.join(" · ")}${orphan}${error}`)}`);
+
+    if (mode === "rich" && s.status === "running") {
+      const activity = s.activity?.activityDescription ?? "thinking…";
+      rows.push(`${childPrefix}${options.theme.fg("dim", `⎿ ${activity}`)}`);
+    }
+
+    rows.push(...collectRows(node.children, options, mode, childPrefix));
+  });
+  return rows;
+}
+
+function applyOverflow(lines: string[], maxLines: number, width: number, hiddenLabel = "agents"): string[] {
+  if (lines.length <= maxLines) return lines.map(line => truncateToWidth(line, width));
+  if (maxLines <= 1) return [truncateToWidth(`+${lines.length} more ${hiddenLabel} hidden`, width)];
+  const visible = lines.slice(0, maxLines - 1);
+  const hidden = lines.length - visible.length;
+  visible.push(`└─ +${hidden} more ${hiddenLabel} hidden`);
+  return visible.map(line => truncateToWidth(line, width));
+}
+
+export function renderAgentTree(records: WidgetAgentSnapshot[], options: RenderTreeOptions): string[] {
+  const tree = buildAgentTree(records);
+  const now = options.now ?? Date.now();
+  const active = records.filter(r => r.status === "running").length;
+  const queued = records.filter(r => r.status === "queued").length;
+  const maxDepth = records.reduce((max, r) => Math.max(max, r.depth ?? 0), 0);
+  let mode: "rich" | "compact";
+  let rows: string[];
+  if (options.mode === "rich" || options.mode === "compact") {
+    mode = options.mode;
+    rows = collectRows(tree, { ...options, now }, mode);
+  } else {
+    const richRows = collectRows(tree, { ...options, now }, "rich");
+    mode = chooseEffectiveMode(options.mode, options.width, richRows.length + 1, options.maxLines);
+    rows = mode === "rich" ? richRows : collectRows(tree, { ...options, now }, "compact");
+  }
+  const suffix = mode === "rich" && records.length > 0
+    ? options.theme.fg("dim", ` ${active} running · ${queued} queued · depth ${maxDepth}/4`)
+    : "";
+  const heading = `${active > 0 ? options.theme.fg("accent", "●") : options.theme.fg("dim", "○")} ${options.theme.fg(active > 0 ? "accent" : "dim", "Agents")}${suffix}`;
+  return applyOverflow([heading, ...rows], options.maxLines, options.width);
+}