pi-one-ui 0.1.1

package/extensions/transcript/renderer/tool/message-display.ts

@@ -0,0 +1,183 @@
+import {
+  BranchSummaryMessageComponent,
+  CompactionSummaryMessageComponent,
+  SkillInvocationMessageComponent,
+} from "@earendil-works/pi-coding-agent";
+import { Markdown, Spacer, Text } from "@earendil-works/pi-tui";
+import {
+  MESSAGE_DISPLAY_PATCH,
+  patchRegistry,
+} from "../../../tools/patch-keys.ts";
+import { config } from "../../../app/config/renderer.ts";
+import { showMoreHintText } from "./show-more-hint.ts";
+import { walkComponentTree } from "../../../tools/component-tree.ts";
+
+/**
+ * 接管三个消息组件（`<skill>` 块、压缩摘要、分支摘要），ccstyle on 时渲染为
+ * 与工具调用一致的单行风格（● Title · hint），off 时回退原生。
+ *
+ * 三者结构同构：Box + markdownTheme + updateDisplay，构造/setExpanded/invalidate
+ * 三条路径都经过 updateDisplay，patch 一处即可全覆盖。它们不走
+ * ToolExecutionComponent，无法复用其原型 patch，这里单独统一管理。
+ */
+
+// 与 renderer/index.ts renderCall 的成功勾一致：亮绿 ✓（truecolor ANSI）。
+const BRIGHT_GREEN = "\x1b[38;2;80;220;100m";
+const ANSI_FG_RESET = "\x1b[39m";
+
+/** 事件上下文中同步的最新主题（与 toolGrouping.setTheme 同一来源）。 */
+let displayTheme: any;
+
+export function setMessageDisplayTheme(theme: any): void {
+  displayTheme = theme;
+}
+
+/** 供工具展开面板背景等共享同一主题来源（ctx.ui.theme）。 */
+export function getMessageDisplayTheme(): any {
+  return displayTheme;
+}
+
+type DisplayKind = {
+  title(component: any): string;
+  body(component: any): string;
+};
+
+const SKILL_KIND: DisplayKind = {
+  title: (component) =>
+    `Skill ${String(component.skillBlock?.name ?? "skill")}`,
+  body: (component) => String(component.skillBlock?.content ?? ""),
+};
+
+const COMPACTION_KIND: DisplayKind = {
+  title: (component) =>
+    `Compacted from ${Number(component.message?.tokensBefore ?? 0).toLocaleString()} tokens`,
+  body: (component) => String(component.message?.summary ?? ""),
+};
+
+const BRANCH_KIND: DisplayKind = {
+  title: () => "Branch summary",
+  body: (component) => String(component.message?.summary ?? ""),
+};
+
+function ensureHintHover(component: any): void {
+  if (typeof component.setHintHovered === "function") return;
+  component.setHintHovered = function (this: any, hovered: boolean) {
+    if (this.hintHovered === hovered) return;
+    this.hintHovered = hovered;
+    this.invalidate?.();
+  };
+}
+
+function renderCcstyle(component: any, kind: DisplayKind): void {
+  const theme = displayTheme;
+  if (!theme) return; // 主题未就绪时保留原生渲染
+  if (component.bgFn) component.setBgFn?.(undefined); // 与工具调用一致，去掉灰底
+  if (component.paddingY !== 0) {
+    component._ccstyleOriginalPaddingY = component.paddingY;
+    component.paddingY = 0; // 工具组件 paddingY=0；原生 Box 默认 1，会上下各留一个空行
+  }
+  component.clear();
+  ensureHintHover(component);
+  const icon = `${BRIGHT_GREEN}✓${ANSI_FG_RESET}`; // 已完成消息，等同工具成功态
+  const title = theme.fg("toolTitle", kind.title(component));
+  if (!component.expanded) {
+    const hovered = component.hintHovered === true;
+    const hint = `${theme.fg("dim", " • ")}${theme.fg(hovered ? "text" : "dim", showMoreHintText())}`;
+    component.addChild(new Text(`${icon} ${title}${hint}`, 0, 0));
+    return;
+  }
+  // 展开卡与 tool 一致：userMessageBg + 上下左右 1 格
+  component.paddingX = 1;
+  component.paddingY = 1;
+  if (
+    typeof theme.bg === "function" &&
+    typeof component.setBgFn === "function"
+  ) {
+    component.setBgFn((text: string) => theme.bg("userMessageBg", text));
+  }
+  component.addChild(new Text(`${icon} ${title}`, 0, 0));
+  component.addChild(new Spacer(1));
+  component.addChild(
+    new Markdown(kind.body(component), 0, 0, component.markdownTheme, {
+      color: (text: string) => theme.fg("customMessageText", text),
+    }),
+  );
+}
+
+type PatchEntry = {
+  prototype: any;
+  installed: (...args: any[]) => void;
+  original: (...args: any[]) => void;
+};
+
+/** patch 三个消息组件的 updateDisplay，返回统一 dispose（/reload 链安全）。 */
+export function installMessageDisplayRendering(): () => void {
+  const previous = patchRegistry.get<{ dispose: () => void }>(
+    MESSAGE_DISPLAY_PATCH,
+  );
+  if (previous) previous.dispose();
+  const patch: { active: boolean; entries: PatchEntry[]; dispose: () => void } =
+    {
+      active: true,
+      entries: [],
+      dispose: () => {},
+    };
+  const installOne = (ComponentClass: any, kind: DisplayKind): void => {
+    const prototype = ComponentClass.prototype;
+    const original = prototype.updateDisplay;
+    const installed = function (this: any) {
+      if (patch.active && config.mode !== "off") {
+        try {
+          renderCcstyle(this, kind);
+          return;
+        } catch {
+          // 渲染失败回退原生
+        }
+      }
+      // 回退原生前恢复 paddingY，避免原生渲染丢失上下内边距
+      if (this._ccstyleOriginalPaddingY !== undefined) {
+        this.paddingY = this._ccstyleOriginalPaddingY;
+        delete this._ccstyleOriginalPaddingY;
+      }
+      original.call(this);
+    };
+    prototype.updateDisplay = installed;
+    patch.entries.push({ prototype, installed, original });
+  };
+  installOne(SkillInvocationMessageComponent, SKILL_KIND);
+  installOne(CompactionSummaryMessageComponent, COMPACTION_KIND);
+  installOne(BranchSummaryMessageComponent, BRANCH_KIND);
+  patch.dispose = () => {
+    patch.active = false;
+    for (const entry of patch.entries) {
+      if (entry.prototype.updateDisplay === entry.installed) {
+        entry.prototype.updateDisplay = entry.original;
+      }
+    }
+    patchRegistry.dispose(MESSAGE_DISPLAY_PATCH, patch);
+  };
+  patchRegistry.install(MESSAGE_DISPLAY_PATCH, patch);
+  return patch.dispose;
+}
+
+/** 三个消息组件共享的结构特征；CustomMessageComponent 用 rebuild 无 updateDisplay，不命中。 */
+export function isMessageDisplayComponent(value: any): boolean {
+  return Boolean(
+    value &&
+      typeof value === "object" &&
+      typeof value.markdownTheme === "object" &&
+      typeof value.setExpanded === "function" &&
+      typeof value.updateDisplay === "function" &&
+      typeof value.clear === "function",
+  );
+}
+
+/** 遍历当前 transcript，让已挂载的消息组件按当前 mode 重渲染（/ccstyle on|off 切换）。 */
+export function refreshMessageDisplays(root: any): void {
+  walkComponentTree(root, (value: any) => {
+    if (isMessageDisplayComponent(value)) {
+      value.invalidate?.();
+      return false;
+    }
+  });
+}

package/extensions/transcript/renderer/tool/names.ts

@@ -0,0 +1,195 @@
+import { config } from "../../../app/config/renderer.ts";
+import { oneLine } from "../../../tools/format.ts";
+
+function clip(value: unknown): string {
+  return oneLine(value, config.toolInputNameLength);
+}
+
+/**
+ * 工具名/标签人性化：与 default-mode 的 humanizeToolLabel、grouping 的 humanizeToolName
+ * 逐字相同，收敛为一个共享实现。
+ */
+export function humanizeToolLabel(label: string): string {
+  return label
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[_-]+/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+const AGENT_FAMILY_TOOL_NAMES = new Set([
+  "Agent",
+  "Agents",
+  "get_subagent_result",
+  "steer_subagent",
+]);
+
+/** default-mode（单工具卡）与 grouping（分组卡）在 agent/bash/grep/find/read/fallback 文案上不同。 */
+export type ToolCallSummaryVariant = "default" | "grouping";
+
+export type ToolCallSummaryOptions = {
+  /** 已解析标题；缺省为 humanizeToolLabel(toolName)。 */
+  title?: string;
+  /** 文案变体；缺省 "default"。 */
+  variant?: ToolCallSummaryVariant;
+};
+
+/**
+ * 单工具调用摘要（{ main, detail }）。
+ *
+ * default-mode 与 grouping 共用；opts.variant 保留两处各自逐字一致的输出，
+ * 不改动任何现有渲染字符串。
+ */
+export function toolCallSummary(
+  toolName: string,
+  args: any,
+  opts: ToolCallSummaryOptions = {},
+): { main: string; detail: string } {
+  const title = opts.title ?? humanizeToolLabel(toolName);
+  const variant = opts.variant ?? "default";
+  if (!args || typeof args !== "object") return { main: title, detail: "" };
+  const name = toolName.toLowerCase();
+  const value = (fallback: string, ...keys: string[]) => {
+    const found = keys
+      .map((key) => args[key])
+      .find((item) => typeof item === "string" && item);
+    return `${title} ${clip(found || fallback)}`;
+  };
+
+  if (
+    variant === "default" &&
+    AGENT_FAMILY_TOOL_NAMES.has(toolName) &&
+    args.agent_id
+  ) {
+    return { main: `${title} ${clip(args.agent_id)}`, detail: "" };
+  }
+  if (variant === "grouping" && (name === "agent" || name === "agents")) {
+    const displayName = args.subagent_type ?? args.agent_type ?? args.agent;
+    if (typeof displayName === "string" && displayName) {
+      return { main: `${title} ${displayName}`, detail: "" };
+    }
+    return {
+      main: value(
+        name === "agent" ? "launch agent" : "launch agents",
+        "description",
+        "prompt",
+      ),
+      detail: "",
+    };
+  }
+  if (
+    variant === "grouping" &&
+    (name === "get_subagent_result" || name === "steer_subagent")
+  ) {
+    return {
+      main: value(
+        name === "get_subagent_result" ? "agent result" : "steer agent",
+        "agent_id",
+      ),
+      detail: "",
+    };
+  }
+  if (variant === "default" && name === "agents") {
+    return {
+      main: value("launch agents", "description", "prompt"),
+      detail: "",
+    };
+  }
+  if (name === "skill") return { main: value("run skill", "name"), detail: "" };
+  if (name === "enterplanmode" || name === "enter_plan_mode") {
+    return { main: `${title} enable read-only planning`, detail: "" };
+  }
+  if (name === "exitplanmode" || name === "exit_plan_mode") {
+    return { main: `${title} present plan`, detail: "" };
+  }
+  if (name === "taskcreate")
+    return { main: value("create task", "subject"), detail: "" };
+  if (name === "tasklist") return { main: `${title} task list`, detail: "" };
+  if (name === "taskget" || name === "taskupdate") {
+    return { main: value("task", "taskId", "task_id"), detail: "" };
+  }
+  if (name === "taskoutput" || name === "taskstop") {
+    return { main: value("background task", "task_id", "taskId"), detail: "" };
+  }
+  if (name === "taskexecute") {
+    const ids = Array.isArray(args.task_ids)
+      ? args.task_ids
+      : Array.isArray(args.taskIds)
+        ? args.taskIds
+        : [];
+    const summary = ids.length
+      ? `${ids[0]}${ids.length > 1 ? ` (+${ids.length - 1} tasks)` : ""}`
+      : "start tasks";
+    return { main: `${title} ${summary}`, detail: "" };
+  }
+  if (toolName === "read") {
+    const details = [
+      args.offset !== undefined ? `offset=${args.offset}` : "",
+      args.limit !== undefined ? `limit=${args.limit}` : "",
+    ].filter(Boolean);
+    if (variant === "grouping") {
+      return {
+        main: `Read ${clip(args.path || "...")}`,
+        detail: details.length ? ` (${details.join(", ")})` : "",
+      };
+    }
+    return {
+      main: `${title}${args.path ? ` ${clip(args.path)}` : ""}`,
+      detail: details.length ? ` (${details.join(", ")})` : "",
+    };
+  }
+  if (variant === "grouping") {
+    if (toolName === "bash")
+      return { main: `Bash ${clip(args.command || "...")}`, detail: "" };
+    if (toolName === "grep") {
+      const pattern = clip(args.pattern || "...");
+      return {
+        main: `Grep ${JSON.stringify(pattern)}${args.path ? ` in ${clip(args.path)}` : ""}`,
+        detail: "",
+      };
+    }
+    if (toolName === "find") {
+      const pattern = clip(args.pattern || "...");
+      return {
+        main: `Find ${JSON.stringify(pattern)}${args.path ? ` in ${clip(args.path)}` : ""}`,
+        detail: "",
+      };
+    }
+  }
+  if (variant === "default") {
+    const preferred =
+      args.path ??
+      args.file_path ??
+      args.command ??
+      args.query ??
+      args.question ??
+      args.pattern ??
+      args.url ??
+      args.name ??
+      args.tool_use_id ??
+      args.toolCallId ??
+      args.id ??
+      args.message;
+    return {
+      main:
+        preferred !== undefined &&
+        preferred !== null &&
+        typeof preferred !== "object"
+          ? `${title} ${clip(preferred)}`
+          : title,
+      detail: "",
+    };
+  }
+  const preferred =
+    args.agent_id ??
+    args.path ??
+    args.file_path ??
+    args.url ??
+    args.description ??
+    args.query ??
+    args.name ??
+    args.prompt;
+  return {
+    main: `${title}${preferred === undefined ? "" : ` ${clip(preferred)}`}`,
+    detail: "",
+  };
+}