@mystilleef/pi-subagent 0.3.1 → 0.4.0

package/src/ui.ts

@@ -12,13 +12,20 @@ import {
   extractSemanticToolTarget,
   normalizeSummaryValue,
 } from "./normalize.js";
+import {
+  formatContextPercent,
+  formatElapsed,
+  type ProgressStatus,
+  STATUS_BG,
+  STATUS_COLOR,
+  STATUS_ICON,
+  type SubagentProgressState,
+  type ThemeBg,
+} from "./progress-state.js";
 import { hasSubagentFailed } from "./result-details.js";
 import type { SubagentDetails, UsageStats } from "./types.js";
 
-/**
- * Background theme keys for subagent tool status.
- */
-export type ThemeBg = "toolPendingBg" | "toolSuccessBg" | "toolErrorBg";
+export type { ThemeBg };
 
 /**
  * Abstraction for theme-aware text formatting.
@@ -27,8 +34,35 @@ export type SubagentTheme = {
   fg: (color: ThemeColor, text: string) => string;
   bg: (color: ThemeBg, text: string) => string;
   bold: (text: string) => string;
+  italic?: (text: string) => string;
 };
 
+const ANSI_ITALIC_ON = "\x1b[3m";
+const ANSI_ITALIC_OFF = "\x1b[23m";
+const ANSI_STRIKETHROUGH_ON = "\x1b[9m";
+const ANSI_STRIKETHROUGH_OFF = "\x1b[29m";
+const ANSI_UNDERLINE_ON = "\x1b[4m";
+const ANSI_UNDERLINE_OFF = "\x1b[24m";
+
+function italicText(text: string, theme: SubagentTheme): string {
+  return theme.italic
+    ? theme.italic(text)
+    : `${ANSI_ITALIC_ON}${text}${ANSI_ITALIC_OFF}`;
+}
+
+/**
+ * Formats the shared subagent title from agent and optional instance name.
+ */
+export function formatSubagentTitle(
+  agent: string,
+  instanceName: string | undefined,
+  theme: SubagentTheme,
+): string {
+  const agentSegment = theme.fg("toolTitle", theme.bold(agent));
+  if (!instanceName) return agentSegment;
+  return `${agentSegment} ${theme.fg("accent", italicText(instanceName, theme))}`;
+}
+
 /**
  * Formats token counts into human-readable strings (e.g., "1.2k", "1.5M").
  */
@@ -96,7 +130,7 @@ export function formatResultFooter(
     parts.push(`${usage.turns} turn${usage.turns > 1 ? "s" : ""}`);
   if (typeof durationMs === "number") parts.push(formatDuration(durationMs));
   if (usage.cost) parts.push(`$${usage.cost.toFixed(4)}`);
-  return `\n${parts.join(" · ")}`;
+  return parts.join(" · ");
 }
 
 /**
@@ -149,9 +183,10 @@ function makeMarkdownTheme(theme: SubagentTheme): MarkdownTheme {
     hr: fg("mdHr"),
     listBullet: fg("mdListBullet"),
     bold: (text) => theme.bold(text),
-    italic: (text) => `\x1b[3m${text}\x1b[23m`,
-    strikethrough: (text) => `\x1b[9m${text}\x1b[29m`,
-    underline: (text) => `\x1b[4m${text}\x1b[24m`,
+    italic: (text) => `${ANSI_ITALIC_ON}${text}${ANSI_ITALIC_OFF}`,
+    strikethrough: (text) =>
+      `${ANSI_STRIKETHROUGH_ON}${text}${ANSI_STRIKETHROUGH_OFF}`,
+    underline: (text) => `${ANSI_UNDERLINE_ON}${text}${ANSI_UNDERLINE_OFF}`,
   };
 }
 
@@ -199,20 +234,168 @@ export function renderSubagentResult(
     );
   }
   const failed = hasSubagentFailed(r);
+  const cancelled = r.stopReason === "aborted";
+  const resultStatus: ProgressStatus = cancelled
+    ? "cancelled"
+    : failed
+      ? "error"
+      : "success";
   const finalOutput = r.finalOutput ?? getFinalOutput(r.messages ?? []);
-  const bg = failed ? "toolErrorBg" : "toolSuccessBg";
-  const box = new Box(1, 1, (line) => theme.bg(bg, line));
+  const title = formatSubagentTitle(r.agent, r.instanceName, theme);
   const bodyText = stripOutcomeLineForResultUi(bodyOverride ?? finalOutput);
-  if (bodyText) {
-    box.addChild(
+  const usageStr = formatResultFooter(r.usage, r.model, r.durationMs);
+  return renderStatusCard(
+    {
+      status: resultStatus,
+      title,
+      variant: "full",
+      body: bodyText,
+      footer: usageStr,
+    },
+    theme,
+  );
+}
+
+type StatusCardVariant = "full" | "abridged";
+
+type StatusCardOptions = {
+  status: ProgressStatus;
+  title: string;
+  variant: StatusCardVariant;
+  metadata?: string;
+  body?: string;
+  footer?: string;
+};
+
+function renderStatusCard(
+  options: StatusCardOptions,
+  theme: SubagentTheme,
+): Box {
+  const box = new Box(1, 1, (line) =>
+    theme.bg(STATUS_BG[options.status], line),
+  );
+  const icon = theme.fg(
+    STATUS_COLOR[options.status],
+    STATUS_ICON[options.status],
+  );
+  const status = theme.fg("dim", `[${options.status}]`);
+  const metadata = options.metadata
+    ? ` ${theme.fg("muted", options.metadata)}`
+    : "";
+  box.addChild(new Text(`${icon} ${options.title} ${status}${metadata}`, 0, 0));
+  box.addChild(makeStatusCardBody(options, theme));
+  if (options.variant === "full" && options.footer)
+    box.addChild(new Text(theme.fg("dim", options.footer), 0, 0));
+  return box;
+}
+
+function makeStatusCardBody(
+  options: StatusCardOptions,
+  theme: SubagentTheme,
+): Box {
+  const body = new Box(2, options.variant === "full" ? 1 : 0);
+  const bodyText = options.body ?? "";
+  if (bodyText && options.variant === "full") {
+    body.addChild(
       new Markdown(bodyText, 0, 0, makeMarkdownTheme(theme), {
         color: (text) => theme.fg("toolOutput", text),
       }),
     );
+  } else if (bodyText) {
+    body.addChild(new Text(theme.fg("toolOutput", bodyText), 0, 0));
   } else {
-    box.addChild(new Text(theme.fg("muted", "(no output)"), 0, 0));
+    body.addChild(new Text(theme.fg("muted", "(no output)"), 0, 0));
   }
-  const usageStr = formatResultFooter(r.usage, r.model, r.durationMs);
-  if (usageStr) box.addChild(new Text(theme.fg("dim", usageStr), 0, 0));
+  return body;
+}
+
+const BODY_PREVIEW_MAX = 120;
+
+function selectRunsBoardBody(state: SubagentProgressState): string {
+  return (
+    [state.finalOutput, state.errorText, state.taskPreview].find(
+      (c): c is string => typeof c === "string" && c.trim().length > 0,
+    ) ?? ""
+  );
+}
+
+function renderJobCard(
+  state: SubagentProgressState,
+  theme: SubagentTheme,
+): Box {
+  const title = formatSubagentTitle(state.agent, state.instanceName, theme);
+  const elapsed = formatElapsed(
+    state.durationMs ?? Date.now() - state.startTime,
+  );
+  const ctxPercent = formatContextPercent(state);
+  const toolLabel = state.toolCount === 1 ? "tool" : "tools";
+  const metadata = `${state.toolCount} ${toolLabel} · ${ctxPercent} ctx · ${elapsed}`;
+  const bodyText = selectRunsBoardBody(state);
+  const preview =
+    bodyText.length > BODY_PREVIEW_MAX
+      ? `${bodyText.slice(0, BODY_PREVIEW_MAX - 1)}…`
+      : bodyText;
+  return renderStatusCard(
+    {
+      status: state.status,
+      title,
+      variant: "abridged",
+      metadata,
+      body: preview,
+    },
+    theme,
+  );
+}
+
+/** Sort states by startTime descending (newest first). */
+function sortByStartTimeDesc(
+  a: SubagentProgressState,
+  b: SubagentProgressState,
+): number {
+  return b.startTime - a.startTime;
+}
+
+/** Ordered section definitions: label → status filter for the runs board. */
+const BOARD_SECTIONS: [string, ProgressStatus][] = [
+  ["ACTIVE", "running"],
+  ["FAILED", "error"],
+  ["CANCELLED", "cancelled"],
+  ["SUCCEEDED", "success"],
+];
+
+/**
+ * Renders a unified job board for the `/jobs` command.
+ * Jobs render in status-specific sections, each sorted by `startTime` descending.
+ * Status icons preserve the existing /jobs contract for running and cancelled jobs.
+ */
+export function renderRunsBoard(
+  states: SubagentProgressState[],
+  theme: SubagentTheme,
+  width = 80,
+): Component {
+  if (states.length === 0) {
+    return new Text(theme.fg("muted", "No /run jobs in this session."), 0, 0);
+  }
+  const grouped = new Map<ProgressStatus, SubagentProgressState[]>();
+  for (const s of states) {
+    const bucket = grouped.get(s.status);
+    if (bucket) bucket.push(s);
+    else grouped.set(s.status, [s]);
+  }
+  for (const bucket of grouped.values()) bucket.sort(sortByStartTimeDesc);
+  const box = new Box(0, 0);
+  const addSection = (
+    label: string,
+    sectionStates: SubagentProgressState[],
+  ) => {
+    if (sectionStates.length === 0) return;
+    const sectionHeader = `${label} (${sectionStates.length})`;
+    const ruler = "─".repeat(Math.max(0, width - sectionHeader.length - 1));
+    box.addChild(new Text(theme.fg("dim", `${sectionHeader} ${ruler}`), 0, 0));
+    for (const state of sectionStates)
+      box.addChild(renderJobCard(state, theme));
+  };
+  for (const [label, status] of BOARD_SECTIONS)
+    addSection(label, grouped.get(status) ?? []);
   return box;
 }