@zhushanwen/pi-subagent-workflow 8.7.0 → 8.8.1

package/src/interface/gui-mappers.ts

@@ -28,6 +28,22 @@ export function toGuiCtx(ctx: { mode: GuiContext["mode"]; hasUI: boolean } | und
 /** TreeItem.status 枚举（协议三态）。 */
 type TreeStatus = NonNullable<TreeItem["status"]>;
 
+/**
+ * 状态字符串是否为失败态（mapRunStatus/mapRunIcon 共享谓词——两映射仅返回值形态不同，
+ * 关键词表必须同步演化，抽单点防双写漂移）。入参须已 toLowerCase。
+ */
+function isFailedStatus(s: string): boolean {
+  return (
+    s.includes("failed") ||
+    s.includes("abort") ||
+    s.includes("cancel") ||
+    s.includes("crash") ||
+    s.includes("error") ||
+    s.includes("budget") ||
+    s.includes("time_limited")
+  );
+}
+
 /**
  * 把 workflow/subagent 状态字符串映射到 list-tree 的三态 status。
  *
@@ -42,17 +58,7 @@ type TreeStatus = NonNullable<TreeItem["status"]>;
 export function mapRunStatus(status: string): TreeStatus {
   const s = status.toLowerCase();
   if (s.includes("running")) return "running";
-  if (
-    s.includes("failed") ||
-    s.includes("abort") ||
-    s.includes("cancel") ||
-    s.includes("crash") ||
-    s.includes("error") ||
-    s.includes("budget") ||
-    s.includes("time_limited")
-  ) {
-    return "failed";
-  }
+  if (isFailedStatus(s)) return "failed";
   return "done";
 }
 
@@ -66,16 +72,6 @@ export function mapRunStatus(status: string): TreeStatus {
 export function mapRunIcon(status: string): TreeItemIcon {
   const s = status.toLowerCase();
   if (s.includes("running")) return "circle";
-  if (
-    s.includes("failed") ||
-    s.includes("abort") ||
-    s.includes("cancel") ||
-    s.includes("crash") ||
-    s.includes("error") ||
-    s.includes("budget") ||
-    s.includes("time_limited")
-  ) {
-    return "cross";
-  }
+  if (isFailedStatus(s)) return "cross";
   return "check";
 }

package/src/interface/helpers.ts

@@ -10,7 +10,11 @@
 
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 
-import type { WorkflowRun } from "@zhushanwen/subagent-core/orchestration/models/workflow-run.ts";
+// bounded JSON pretty 序列化（IF13/#19，TC5/ES5）已下沉 core shared
+// （u-core-atomic 逐字平移，输出与原本地实现字节一致；本地实现已删）。
+import { boundedPrettySerialize } from "@zhushanwen/subagent-core";
+
+import type { WorkflowRun } from "@zhushanwen/subagent-core";
 import {
   guiComponent,
   type GuiContext,
@@ -22,134 +26,8 @@ import { mapRunIcon, mapRunStatus } from "./gui-mappers.ts";
 
 // ── 常量 ─────────────────────────────────────────────────────
 
-const JSON_INDENT = 2;
 const MAX_RESULT_LENGTH = 8000;
 
-// ── bounded pretty 序列化（IF13/#19，TC5/ES5，helpers 私有）─────────
-
-/**
- * bounded JSON pretty 序列化：只生成会被保留的前缀（≤8000 输出与
- * JSON.stringify(value, null, JSON_INDENT) 逐字节一致；>8000 输出与
- * 全量序列化后 .slice(0, budget) + "\n... (truncated)" 逐字节一致——
- * 等价测试锚定，见 __tests__/helpers-bounded-serialize.test.ts）。
- *
- * 现状成本：全量 stringify 产生数 MB 中间串再丢弃 99%；本函数在输出字符流
- * 越过 budget 后停止一切生成。保真策略：原语（string/number/boolean/null/bigint）
- * 逐值复用 JSON.stringify（转义/Unicode/数字格式原生一致，零重实现），仅结构
- * 拼装（2 空格缩进/逗号/括号）自实现。
- *
- * 特殊值语义（TC5 a-d，与原生 JSON.stringify 全值域对齐）：
- * (a) 含 toJSON 的对象 → 该子树整体走一次 JSON.stringify(subtree)（原生会先调
- *     toJSON，如 Date 输出带引号序列化串；bounded 拼装展开会与原生不同）。注意
- *     边界：toJSON 返回对象时原生 pretty 会按缩进展开，本实现按原语串接其
- *     compact 形态——设计 TC5 锚定面为 Date 型（返回字符串）toJSON。
- * (b) 任何 stringify 抛出（BigInt → TypeError）→ 整体回退 String(value)（对齐
- *     旧实现整体 try/catch 的整串回退；禁止逐节点回退——输出形态与整串回退不同）。
- * (c) 对象属性值为 undefined/function/symbol → 拼装时跳过（原生省略）。
- * (d) 数组元素为 undefined/function/symbol → 序列化为 "null"（原生行为）。
- *
- * 截断边界（输出字符流层级，与对完整串 slice 逐字节等价）：逐段 append 时本段
- * 会使总长越过 budget → 只 append 本段前 (budget - 已累积) 字符（恰好 budget，
- * 可切在转义序列/括号中间，不补任何结构闭合）；越过（exceeded）才追加
- * "\n... (truncated)" 标记——恰好 ===budget 不加（> 判定）。
- *
- * 祖先 Set 循环引用守卫：命中 → 整体回退 String(value)（同 (b) 整串回退语义）。
- */
-function boundedPrettySerialize(value: unknown, budget: number): string {
-  const ancestors = new Set<object>();
-  let out = "";
-  let exceeded = false;
-
-  /** 逐段追加：越过 budget 时截到恰好 budget 并置 exceeded（后续生成全部剪枝）。 */
-  function append(s: string): void {
-    if (exceeded) return;
-    if (out.length + s.length <= budget) {
-      out += s;
-      return;
-    }
-    out += s.slice(0, budget - out.length);
-    exceeded = true;
-  }
-
-  function serialize(v: unknown, depth: number): void {
-    if (exceeded) return;
-    const t = typeof v;
-    // 原语逐值复用原生序列化；bigint 的 JSON.stringify 抛 TypeError → 顶层 catch
-    // 整体回退 (b)；NaN/Infinity → "null"（原生行为）
-    if (v === null || t === "string" || t === "number" || t === "boolean" || t === "bigint") {
-      append(JSON.stringify(v));
-      return;
-    }
-    if (t === "object" && v !== null) {
-      const obj = v as object;
-      if (ancestors.has(obj)) {
-        // 循环引用 → 整体回退 String(value)（旧实现同款整串回退）
-        throw new TypeError("circular reference");
-      }
-      // (a) toJSON 子树整体 stringify（Reflect.get 取属性，避免不安全断言）
-      if (typeof Reflect.get(obj, "toJSON") === "function") {
-        append(JSON.stringify(obj));
-        return;
-      }
-      ancestors.add(obj);
-      const childIndent = " ".repeat(JSON_INDENT * (depth + 1));
-      const closeIndent = " ".repeat(JSON_INDENT * depth);
-      if (Array.isArray(obj)) {
-        const arr = obj as unknown[];
-        if (arr.length === 0) {
-          append("[]");
-        } else {
-          append("[\n");
-          for (let i = 0; i < arr.length && !exceeded; i++) {
-            if (i > 0) append(",\n");
-            append(childIndent);
-            const el = arr[i];
-            // (d) 数组元素 undefined/function/symbol → "null"
-            if (el === undefined || typeof el === "function" || typeof el === "symbol") {
-              append("null");
-            } else {
-              serialize(el, depth + 1);
-            }
-          }
-          append("\n" + closeIndent + "]");
-        }
-      } else {
-        // (c) 对象属性 undefined/function/symbol 跳过（Object.entries 同原生：
-        // 只取 own enumerable，symbol 键天然不出现；getter 求值语义与原生一致）
-        const entries = Object.entries(obj).filter(
-          ([, val]) => val !== undefined && typeof val !== "function" && typeof val !== "symbol",
-        );
-        if (entries.length === 0) {
-          append("{}");
-        } else {
-          append("{\n");
-          for (let i = 0; i < entries.length && !exceeded; i++) {
-            if (i > 0) append(",\n");
-            append(childIndent + JSON.stringify(entries[i][0]) + ": ");
-            serialize(entries[i][1], depth + 1);
-          }
-          append("\n" + closeIndent + "}");
-        }
-      }
-      ancestors.delete(obj);
-      return;
-    }
-    // 顶层 undefined/function/symbol（调用方守卫后不可达；防御兜底对齐原生 "null"）
-    append(JSON.stringify(v) ?? "null");
-  }
-
-  try {
-    serialize(value, 0);
-    return exceeded ? out + "\n... (truncated)" : out;
-  } catch {
-    // (b) 整体回退：String(value)（超 budget 仍截断 + 标记，与旧实现截断路径一致）
-    const fallback = String(value);
-    return fallback.length > budget
-      ? fallback.slice(0, budget) + "\n... (truncated)"
-      : fallback;
-  }
-}
-
 /**
  * notifiedRunIds 去重窗口大小。
  *
@@ -164,10 +42,11 @@ const RUN_ID_DISPLAY_LENGTH = 8;
 /**
  * notifyDone 的 details 结构（通过 pi.sendMessage 透传给前端）。
  *
- * 抽取为显式接口替代裸 Record<string, unknown>，明确 __gui__ 契约，
- * 便于其他 notify 路径复用（S#7）。
+ * 抽取为显式接口替代裸 Record<string, unknown>，明确 __gui__ 契约。
+ * 模块私有（原 export 已删）：无跨文件消费者，测试经 notifyDone 公共入口
+ * 观察并内联类型。
  */
-export interface WorkflowNotifyDetails {
+interface WorkflowNotifyDetails {
   runId: string;
   name: string;
   status: string;

package/src/interface/list-component.ts

@@ -1,4 +1,4 @@
-// src/tui/list-component.ts
+// src/interface/list-component.ts
 //
 // /subagents list 全屏带框左右分屏组件实现。
 // 从 list-view.ts 抽出（文件行数控制）：list-view.ts 保留 factory / key 处理，
@@ -11,26 +11,36 @@
 import type { Component } from "@earendil-works/pi-tui";
 import { visibleWidth } from "@earendil-works/pi-tui";
 
-import { computeElapsedSeconds } from "@zhushanwen/subagent-core/execution/execution-record.ts";
-import type { SubagentService } from "@zhushanwen/subagent-core/execution/subagent-service.ts";
-import type { SubagentRecord } from "@zhushanwen/subagent-core/execution/types.ts";
-import { displayAgentName } from "@zhushanwen/subagent-core/shared/agent-ref.ts";
+import { computeElapsedSeconds } from "@zhushanwen/subagent-core";
+import type { DisplayItem } from "@zhushanwen/subagent-core";
+import type { SubagentService } from "@zhushanwen/subagent-core";
+import type { SubagentRecord } from "@zhushanwen/subagent-core";
+import { displayAgentName } from "@zhushanwen/subagent-core";
 import {
   firstLine,
   formatDisplayItem,
   formatElapsedSeconds,
   formatEventLine,
   formatTokens,
-  padToVisible,
   sanitizeLabel,
-  segFillColored,
   shortId,
   spinnerGlyph,
   statusGlyph,
   type ThemeLike,
+} from "./format.ts";
+import {
+  b,
+  dash,
+  dashes,
+  padToVisible,
+  plainBorder,
+  segFillColored,
+  termRows,
+  titleBorder,
   truncLine,
+  walled,
   wrapText,
-} from "./format.ts";
+} from "./tui-kit.ts";
 import {
   applyFilter,
   type DetailKeyContext,
@@ -61,8 +71,6 @@ const BORDER_WIDTH = 2;
 const SPLIT_FIXED_LINES = 6;
 /** 终端最小行数（低于此回退紧凑空列表框）。 */
 const MIN_TERM_ROWS = 8;
-/** terminal.rows 读不到时的兜底行数（防 duck-type 失败）。 */
-const TERM_ROWS_FALLBACK = 24;
 /** 自画视觉边距：框外左右各 1 列空白（盖住底下对话流）。 */
 const PAD_COLS = 2;
 /** 自画视觉边距：框外顶底各 1 行空白。 */
@@ -145,7 +153,7 @@ export class SubagentsListComponent implements Component {
     if (this.frameRecords !== undefined && Date.now() - this.frameAt <= FRAME_TTL_MS) {
       return this.frameRecords;
     }
-    const records = this.service.collectRecords(LIST_LIMIT);
+    const records = this.service.queries.collectRecords(LIST_LIMIT);
     this.frameRecords = records;
     this.frameAt = Date.now();
     return records;
@@ -153,7 +161,7 @@ export class SubagentsListComponent implements Component {
 
   /** [perf] 选中项详情数据：优先全量（懒加载 + per-file 缓存），拿不到回退 light。 */
   private fullRecordOf(r: SubagentRecord): SubagentRecord {
-    return this.service.getFullRecord(r.id) ?? r;
+    return this.service.queries.getFullRecord(r.id) ?? r;
   }
 
   invalidate(): void {
@@ -162,7 +170,7 @@ export class SubagentsListComponent implements Component {
   }
 
   render(width: number): string[] {
-    const rows = this.termRows();
+    const rows = termRows(this.tui);
     const key = `${width}x${rows}`;
     if (key === this.cachedKey && this.cachedLines) return this.cachedLines;
     const lines = this.buildLines(width, rows);
@@ -180,7 +188,7 @@ export class SubagentsListComponent implements Component {
     // contentLines = 详情内容总行数（含元数据/段头/eventLog/result/error，单一数据源）。
     // 与 renderRightDetail 的 viewH + max 计算保持一致。
     // [perf] 详情长度需重数据：选中项懒加载全量（带缓存）。
-    const innerRows = Math.max(MIN_INNER_ROWS, this.termRows() - PAD_ROWS);
+    const innerRows = Math.max(MIN_INNER_ROWS, termRows(this.tui) - PAD_ROWS);
     const bodyH = Math.max(1, innerRows - SPLIT_FIXED_LINES);
     const detailCtx: DetailKeyContext = {
       viewportHeight: bodyH,
@@ -199,12 +207,6 @@ export class SubagentsListComponent implements Component {
     }
   }
 
-  /** 安全读 terminal.rows（兜底防 duck-type 失败）。 */
-  private termRows(): number {
-    const rows = this.tui.terminal?.rows;
-    return typeof rows === "number" && rows > 0 ? rows : TERM_ROWS_FALLBACK;
-  }
-
   // ── 内部：渲染 ──────────────────────────────────────────
 
   /**
@@ -267,32 +269,9 @@ export class SubagentsListComponent implements Component {
     return result;
   }
 
-  // ── 边框着色 helper（统一 borderMuted，避 ANSI 嵌套失色）──
-
-  /** 着色框线字符（borderMuted）。所有 ╭╮╰╯├┤┬┴─│ 统一走这里。 */
-  private b(s: string): string {
-    return this.theme.fg("borderMuted", s);
-  }
-  /** 着色单字符填充用的 `─`（供 segFillColored 的 fillStyled）。 */
-  private dash(): string {
-    return this.theme.fg("borderMuted", "─");
-  }
-  /** 满宽 `─` 填充串（borderMuted）。n 次单字符着色，ANSI 自然延续。 */
-  private dashes(n: number): string {
-    return this.dash().repeat(Math.max(0, n));
-  }
-  /** 顶/底框行：`╭` + 着色标题填充 + `╮`（或 ╰╯）。每段独立着色，无嵌套。 */
-  private titleBorder(left: string, titleStyled: string, right: string, contentWidth: number): string {
-    return this.b(left) + segFillColored(titleStyled, this.dash(), contentWidth) + this.b(right);
-  }
-  /** 纯线顶/底框（无标题）：`╭` + `─`×W + `╮`。 */
-  private plainBorder(left: string, right: string, contentWidth: number): string {
-    return this.b(left) + this.dashes(contentWidth) + this.b(right);
-  }
-  /** 内容行墙：`│` + 内容(pad 到 contentWidth) + `│`，墙字符 borderMuted。 */
-  private walled(content: string, contentWidth: number): string {
-    return `${this.b("│")}${padToVisible(content, contentWidth)}${this.b("│")}`;
-  }
+  // ── 边框着色 helper 家族（b/dash/dashes/titleBorder/plainBorder/walled）──
+  // 已收敛 ./tui-kit.ts 自由函数形态（post-convergence C4，WorkflowsView 形态胜出）；
+  // 此处经 kit 导入消费，边框字符统一 borderMuted（避 ANSI 嵌套失色）。
 
   // ── 分支 1：终端太小 ──────────────────────────────────
 
@@ -301,9 +280,9 @@ export class SubagentsListComponent implements Component {
     const contentWidth = Math.max(1, width - BORDER_WIDTH);
     const msg = t.fg("warning", `Terminal too small (need >=${MIN_TERM_ROWS} rows)`);
     return [
-      this.plainBorder("╭", "╮", contentWidth),
-      this.walled(padToVisible(msg, contentWidth), contentWidth),
-      this.plainBorder("╰", "╯", contentWidth),
+      plainBorder(t, "╭", "╮", contentWidth),
+      walled(t, padToVisible(msg, contentWidth), contentWidth),
+      plainBorder(t, "╰", "╯", contentWidth),
     ];
   }
 
@@ -314,16 +293,83 @@ export class SubagentsListComponent implements Component {
     const contentWidth = Math.max(1, width - BORDER_WIDTH);
     const title = t.fg("accent", t.bold(` ${TITLE_SPLIT} `));
     return [
-      this.titleBorder("╭", title, "╮", contentWidth),
-      this.walled("", contentWidth),
-      this.walled(truncLine(t.fg("dim", "(no subagent records)"), contentWidth), contentWidth),
-      this.walled("", contentWidth),
-      this.walled(truncLine(t.fg("dim", "Esc to exit"), contentWidth), contentWidth),
-      this.plainBorder("╰", "╯", contentWidth),
+      titleBorder(t, "╭", title, "╮", contentWidth),
+      walled(t, "", contentWidth),
+      walled(t, truncLine(t.fg("dim", "(no subagent records)"), contentWidth), contentWidth),
+      walled(t, "", contentWidth),
+      walled(t, truncLine(t.fg("dim", "Esc to exit"), contentWidth), contentWidth),
+      plainBorder(t, "╰", "╯", contentWidth),
     ];
   }
 
   // ── 分支 3：分屏满屏框（detailMode 控制右侧预览 vs 完整翻屏）──
+  // 主函数只留「顶框 → filter 行 → 分区线 → body → 底分区线 → footer → 底框」编排，
+  // 各段文案/内容构建拆至 splitBox* 私有方法。
+
+  /** filter 行文案：阶段 2 锚定提示 / filter 输入态（光标 _）/ 空态。 */
+  private splitBoxFilterLine(selected: SubagentRecord | null, inDetail: boolean): string {
+    const t = this.theme;
+    return inDetail
+      ? t.fg("dim", `Pinned: ${selected?.agent ? displayAgentName(selected.agent) : ""} · Esc to return to list`)
+      : (this.state.filterText
+        ? `${t.fg("dim", "filter: ")}${t.bold(this.state.filterText)}${t.fg("accent", "_")}`
+        : `${t.fg("dim", "filter: ")}${t.fg("accent", "_")}`);
+  }
+
+  /** 分区线右标题：阶段 2 带滚动位置指示（detailScrollInfo），否则固定 " Detail "。 */
+  private splitBoxRightTitle(
+    inDetail: boolean,
+    selectedFull: SubagentRecord | null,
+    bodyH: number,
+    detailContent: string[] | null,
+  ): string {
+    const t = this.theme;
+    return inDetail
+      ? t.fg("accent", t.bold(` ${TITLE_RIGHT}${this.detailScrollInfo(selectedFull, bodyH, detailContent?.length)} `))
+      : t.fg("accent", t.bold(` ${TITLE_RIGHT} `));
+  }
+
+  /** body 左右列内容：filter 无匹配时双提示占位（保留分屏布局）；
+   *  否则左列视口窗口（选中行居中，到列表顶/底贴边）+ 右列预览 or 完整翻屏。 */
+  private splitBoxBodyLines(
+    records: SubagentRecord[],
+    selectedFull: SubagentRecord | null,
+    inDetail: boolean,
+    leftWidth: number,
+    rightWidth: number,
+    bodyH: number,
+    detailContent: string[] | null,
+  ): { leftLines: string[]; rightLines: string[] } {
+    const t = this.theme;
+    if (records.length === 0) {
+      // filter 无匹配：保留分屏布局，左右都显示提示
+      return {
+        leftLines: [t.fg("dim", `(no match for "${this.state.filterText}")`)],
+        rightLines: [t.fg("dim", "(no record selected)")],
+      };
+    }
+    // 左列视口窗口：选中行尽量居中，到列表顶/底贴边。
+    // 保证 leftLines.length <= bodyH → bodyRows = bodyH 恒定，帧行不溢出终端（无残影）。
+    const maxLeftStart = Math.max(0, records.length - bodyH);
+    const leftStart = Math.max(0, Math.min(
+      Math.floor(this.state.selectedIdx - bodyH / VERT_CENTER_DIVISOR),
+      maxLeftStart,
+    ));
+    return {
+      leftLines: this.renderLeftColumn(records, leftWidth, leftStart, bodyH),
+      rightLines: inDetail
+        ? this.renderRightDetail(selectedFull, rightWidth, bodyH, detailContent)
+        : this.renderRightPreview(selectedFull, rightWidth, bodyH),
+    };
+  }
+
+  /** footer 双文案：阶段 2 滚动提示（running 时附取消提示）/ 阶段 1 导航提示。 */
+  private splitBoxFooter(inDetail: boolean, selected: SubagentRecord | null): string {
+    const t = this.theme;
+    return inDetail
+      ? t.fg("dim", "Esc back to list · Up/Dn/PgUp/PgDn/Home/End scroll detail" + this.cancelHint(selected))
+      : t.fg("dim", "Up/Dn navigate · Enter detail · type to filter · Esc exit");
+  }
 
   private renderSplitBox(records: SubagentRecord[], width: number, rows: number): string[] {
     const t = this.theme;
@@ -331,7 +377,7 @@ export class SubagentsListComponent implements Component {
     // 左右列宽：左按比例，右占余下（减去分隔符 1 列）
     const leftWidth = Math.max(COL_MIN_WIDTH, Math.floor(contentWidth * LEFT_COL_RATIO));
     const rightWidth = Math.max(COL_MIN_WIDTH, contentWidth - leftWidth - 1);
-    const sep = this.b("│");
+    const sep = b(t, "│");
 
     // 满屏可用 body 高 = 内框高 - 固定行（顶框/filter/分区线/底分区线/footer/底框 = 6）
     // rows 参数已是内框高（顶底空白边距已在 buildLines 扣除）。
@@ -349,65 +395,37 @@ export class SubagentsListComponent implements Component {
     const lines: string[] = [];
 
     // 顶框（嵌入标题，分段着色）
-    lines.push(this.titleBorder("╭", t.fg("accent", t.bold(` ${TITLE_SPLIT} `)), "╮", contentWidth));
+    lines.push(titleBorder(t, "╭", t.fg("accent", t.bold(` ${TITLE_SPLIT} `)), "╮", contentWidth));
 
     // filter 行（阶段 2 时隐藏 filter 提示，显示锚定提示）
-    const filterLine = inDetail
-      ? t.fg("dim", `Pinned: ${selected?.agent ? displayAgentName(selected.agent) : ""} · Esc to return to list`)
-      : (this.state.filterText
-        ? `${t.fg("dim", "filter: ")}${t.bold(this.state.filterText)}${t.fg("accent", "_")}`
-        : `${t.fg("dim", "filter: ")}${t.fg("accent", "_")}`);
-    lines.push(this.walled(padToVisible(truncLine(filterLine, contentWidth), contentWidth), contentWidth));
+    lines.push(walled(t, padToVisible(truncLine(this.splitBoxFilterLine(selected, inDetail), contentWidth), contentWidth), contentWidth));
 
     // 分区线（嵌入左/右标题，分段着色）
     const leftTitleStyled = t.fg("accent", t.bold(` ${TITLE_LEFT} `));
-    const rightTitleStyled = inDetail
-      ? t.fg("accent", t.bold(` ${TITLE_RIGHT}${this.detailScrollInfo(selectedFull, bodyH, detailContent?.length)} `))
-      : t.fg("accent", t.bold(` ${TITLE_RIGHT} `));
+    const rightTitleStyled = this.splitBoxRightTitle(inDetail, selectedFull, bodyH, detailContent);
     lines.push(
-      this.b("├") + segFillColored(leftTitleStyled, this.dash(), leftWidth)
-      + this.b("┬") + segFillColored(rightTitleStyled, this.dash(), rightWidth) + this.b("┤"),
+      b(t, "├") + segFillColored(leftTitleStyled, dash(t), leftWidth)
+        + b(t, "┬") + segFillColored(rightTitleStyled, dash(t), rightWidth) + b(t, "┤"),
     );
 
     // body：左列 record 列表 + 右列（预览 or 完整翻屏）
-    let leftLines: string[];
-    let rightLines: string[];
-    if (records.length === 0) {
-      // filter 无匹配：保留分屏布局，左右都显示提示
-      leftLines = [t.fg("dim", `(no match for "${this.state.filterText}")`)];
-      rightLines = [t.fg("dim", "(no record selected)")];
-    } else {
-      // 左列视口窗口：选中行尽量居中，到列表顶/底贴边。
-      // 保证 leftLines.length <= bodyH → bodyRows = bodyH 恒定，帧行不溢出终端（无残影）。
-      const maxLeftStart = Math.max(0, records.length - bodyH);
-      const leftStart = Math.max(0, Math.min(
-        Math.floor(this.state.selectedIdx - bodyH / VERT_CENTER_DIVISOR),
-        maxLeftStart,
-      ));
-      leftLines = this.renderLeftColumn(records, leftWidth, leftStart, bodyH);
-      rightLines = inDetail
-        ? this.renderRightDetail(selectedFull, rightWidth, bodyH, detailContent)
-        : this.renderRightPreview(selectedFull, rightWidth, bodyH);
-    }
+    const { leftLines, rightLines } = this.splitBoxBodyLines(records, selectedFull, inDetail, leftWidth, rightWidth, bodyH, detailContent);
     const bodyRows = Math.max(leftLines.length, rightLines.length, bodyH);
     for (let i = 0; i < bodyRows; i++) {
       const l = leftLines[i] ?? "";
       const r = rightLines[i] ?? "";
       const row = `${padToVisible(truncLine(l, leftWidth), leftWidth)}${sep}${padToVisible(truncLine(r, rightWidth), rightWidth)}`;
-      lines.push(this.walled(padToVisible(row, contentWidth), contentWidth));
+      lines.push(walled(t, padToVisible(row, contentWidth), contentWidth));
     }
 
     // 底分区线
-    lines.push(this.b("├") + this.dashes(leftWidth) + this.b("┴") + this.dashes(rightWidth) + this.b("┤"));
+    lines.push(b(t, "├") + dashes(t, leftWidth) + b(t, "┴") + dashes(t, rightWidth) + b(t, "┤"));
 
     // footer（双文案）
-    const footer = inDetail
-      ? t.fg("dim", "Esc back to list · Up/Dn/PgUp/PgDn/Home/End scroll detail" + this.cancelHint(selected))
-      : t.fg("dim", "Up/Dn navigate · Enter detail · type to filter · Esc exit");
-    lines.push(this.walled(padToVisible(truncLine(footer, contentWidth), contentWidth), contentWidth));
+    lines.push(walled(t, padToVisible(truncLine(this.splitBoxFooter(inDetail, selected), contentWidth), contentWidth), contentWidth));
 
     // 底框
-    lines.push(this.plainBorder("╰", "╯", contentWidth));
+    lines.push(plainBorder(t, "╰", "╯", contentWidth));
 
     return lines;
   }
@@ -550,14 +568,24 @@ export class SubagentsListComponent implements Component {
     return visible;
   }
 
-  /** 详情内容行（单一数据源：renderRightDetail 渲染 + detailScrollInfo 算长度都走这里）。 */
+  /** 详情内容行（单一数据源：renderRightDetail 渲染 + detailScrollInfo 算长度都走这里）。
+   *  只做分段编排；各段构建见 push*Section 家族（顺序 = 原 buildDetailContent 单函数内行序）。 */
   private buildDetailContent(record: SubagentRecord, width: number): string[] {
-    const t = this.theme;
     const content: string[] = [];
+    this.pushTaskSection(content, record, width);
+    this.pushMetaSection(content, record, width);
+    this.pushActivitySection(content, record, width);
+    this.pushOutputSection(content, record, width);
+    this.pushTailSections(content, record, width);
+    return content;
+  }
 
-    // 任务提示词（最重要信息，置顶）。streaming 时 result 未产出，这是「它在干嘛」的唯一线索。
-    // detail 模式完整换行展示（word-wrap），不截断——task 是判断 subagent 行为的核心依据，
-    // 截断成省略号会丢信息。首行带 `task: ` 前缀，续行缩进对齐（缩进宽度 = 前缀可见宽度）。
+  /**
+   * task 段：完整 word-wrap 置顶（streaming 时这是「它在干嘛」的唯一线索，不截断）。
+   * 首行带 `task: ` 前缀，续行缩进对齐（缩进宽度 = 前缀可见宽度）。
+   */
+  private pushTaskSection(content: string[], record: SubagentRecord, width: number): void {
+    const t = this.theme;
     const taskPrefix = "task: ";
     const taskWrapWidth = Math.max(1, width - visibleWidth(taskPrefix));
     const taskLines = wrapText(record.task, taskWrapWidth);
@@ -572,7 +600,11 @@ export class SubagentsListComponent implements Component {
     if (taskLines.length === 0) {
       content.push(truncLine(t.fg("accent", `${taskPrefix}(empty)`), width));
     }
+  }
 
+  /** 元数据段：id/mode/status/turns/tokens 行 + model/thinking 行 + parent/children 层级行。 */
+  private pushMetaSection(content: string[], record: SubagentRecord, width: number): void {
+    const t = this.theme;
     // 元数据：第 1 行 id + 状态 + turns + tokens
     content.push(truncLine(
       t.fg("dim", `${record.id} · ${record.mode} · ${record.status} · ${record.turns} turns · ${formatTokens(record.totalTokens)}`),
@@ -597,14 +629,21 @@ export class SubagentsListComponent implements Component {
       t.fg("dim", `children: ${childIds.length > 0 ? childIds.join(", ") : "(none)"}`),
       width,
     ));
+  }
 
-    // 当前活动（仅内存 running 源；磁盘重建为 undefined）。streaming 可观测性。
+  /** 当前活动行（仅内存 running 源；磁盘重建为 undefined）。streaming 可观测性。 */
+  private pushActivitySection(content: string[], record: SubagentRecord, width: number): void {
     if (record.currentActivity) {
-      content.push(truncLine(t.fg("accent", `▸ ${record.currentActivity.label}`), width));
+      content.push(truncLine(this.theme.fg("accent", `▸ ${record.currentActivity.label}`), width));
     }
+  }
 
-
-
+  /**
+   * Output 段：标题 + displayItems（text 完整 word-wrap / toolCall 单行）。
+   * displayItems 为空但 eventLog 有数据时回退 eventLog（旧数据兼容）。
+   */
+  private pushOutputSection(content: string[], record: SubagentRecord, width: number): void {
+    const t = this.theme;
     content.push("");
     content.push(truncLine(t.fg("accent", t.bold("── Output ──")), width));
 
@@ -621,21 +660,31 @@ export class SubagentsListComponent implements Component {
       content.push(truncLine(t.fg("dim", "(no output)"), width));
     } else {
       for (const item of record.displayItems) {
-        if (item.type === "text") {
-          // detail 模式：text 完整换行展示（word-wrap），不截断。subagent 的正文输出
-          // 可能很长（报告/分析），截断成省略号会丢信息——detail 有翻屏，完整性优先。
-          // wrapText 输入纯文本，每行单独着色 toolOutput。
-          const textLines = wrapText(item.text ?? "", width);
-          for (const tl of textLines) {
-            content.push(truncLine(t.fg("toolOutput", tl), width));
-          }
-        } else {
-          // toolCall：单行足够（name + args 摘要 + ✓/✗），truncLine 截断。
-          content.push(truncLine(formatDisplayItem(item, t), width));
-        }
+        this.pushDisplayItemLines(content, item, width);
       }
     }
+  }
+
+  /** 单个 displayItem 行：text 完整 word-wrap（每行单独着色），toolCall 单行（name + args 摘要 + ✓/✗）。 */
+  private pushDisplayItemLines(content: string[], item: DisplayItem, width: number): void {
+    const t = this.theme;
+    if (item.type === "text") {
+      // detail 模式：text 完整换行展示（word-wrap），不截断。subagent 的正文输出
+      // 可能很长（报告/分析），截断成省略号会丢信息——detail 有翻屏，完整性优先。
+      // wrapText 输入纯文本，每行单独着色 toolOutput。
+      const textLines = wrapText(item.text ?? "", width);
+      for (const tl of textLines) {
+        content.push(truncLine(t.fg("toolOutput", tl), width));
+      }
+    } else {
+      // toolCall：单行足够（name + args 摘要 + ✓/✗），truncLine 截断。
+      content.push(truncLine(formatDisplayItem(item, t), width));
+    }
+  }
 
+  /** 尾段：result（word-wrap 完整展示）/ error（首行）/ session 文件路径，各自前置空行。 */
+  private pushTailSections(content: string[], record: SubagentRecord, width: number): void {
+    const t = this.theme;
     if (record.result) {
       content.push("");
       content.push(truncLine(t.fg("accent", "Result:"), width));
@@ -652,8 +701,6 @@ export class SubagentsListComponent implements Component {
       content.push("");
       content.push(truncLine(t.fg("dim", `session: ${record.sessionFile}`), width));
     }
-
-    return content;
   }
 
   /** 详情内容总行数（供 detailScrollInfo 算 max，不重复生成）。 */