@springbrand/message-panel 0.1.3-alpha.0 → 0.1.3-alpha.2

package/cloud-os/chat/tool-presentation.ts

@@ -0,0 +1,542 @@
+import {
+  Blueprint,
+  BracketsCurly,
+  Brain,
+  Clock,
+  Code,
+  File as FileIcon,
+  FolderOpen,
+  Globe,
+  LinkSimple,
+  ListChecks,
+  MagnifyingGlass,
+  PencilSimple,
+  Plus,
+  Question,
+  Robot,
+  ShieldCheck,
+  Sparkle,
+  Terminal,
+  UsersThree,
+} from "@phosphor-icons/react";
+
+/**
+ * cloud-os 的工具行文案层。
+ *
+ * cloudflare-os-main 里这块(getToolCallSummary / describeToolCallCount /
+ * getToolIcon / buildToolCallGroups)是**穷举 gadgets 自己那十几个工具名**的
+ * switch。UIMessage 协议下工具名是开放集合,穷举不成立,所以这里按「规范化
+ * 工具种类」重写查表:动词表、复数表、图标表逐条对应原文件的同名函数,
+ * 分组算法(buildToolCallGroups)则是逐行搬过来的。
+ */
+
+export type PhosphorIcon = typeof MagnifyingGlass;
+
+type UnknownRecord = Record<string, unknown>;
+
+export type CloudOsToolKind =
+  | "read"
+  | "write"
+  | "edit"
+  | "bash"
+  | "glob"
+  | "grep"
+  | "list"
+  | "web-search"
+  | "web-fetch"
+  | "javascript"
+  | "tasks"
+  | "agent"
+  | "skill"
+  | "ask-user"
+  | "suggestions"
+  | "schedule"
+  | "create-agent"
+  | "publish-extension"
+  | "mcp"
+  | "generic";
+
+export interface CloudOsToolCall {
+  /** 稳定 id:展开态跨流式 → 落库要保持。 */
+  toolCallId: string;
+  toolName: string;
+  kind: CloudOsToolKind;
+  input: UnknownRecord;
+  output: unknown;
+  outputText: string;
+  errorText: string;
+  /** UIMessage 的 part.state 原值。 */
+  state: string;
+  running: boolean;
+  failed: boolean;
+  /** 等待授权中(approval-requested)。 */
+  awaitingApproval: boolean;
+  raw: unknown;
+}
+
+export interface ToolCallGroup {
+  key: string;
+  Icon: PhosphorIcon;
+  label: string;
+  detailLines: string[];
+  calls: CloudOsToolCall[];
+  hasError: boolean;
+  hasRunning: boolean;
+}
+
+// ── 基础工具 ────────────────────────────────────────────────────────────────
+
+function recordOf(value: unknown): UnknownRecord {
+  return value != null && typeof value === "object" && !Array.isArray(value)
+    ? (value as UnknownRecord)
+    : {};
+}
+
+function stringField(record: UnknownRecord, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) return value.trim();
+  }
+  return "";
+}
+
+export function safeStringify(value: unknown): string {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export function normalizeOutputText(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => {
+        const record = recordOf(item);
+        return typeof record.text === "string" ? record.text : safeStringify(item);
+      })
+      .filter(Boolean)
+      .join("\n\n");
+  }
+  const record = recordOf(value);
+  if (typeof record.text === "string") return record.text;
+  if (typeof record.content === "string") return record.content;
+  if (Array.isArray(record.content)) return normalizeOutputText(record.content);
+  return safeStringify(value);
+}
+
+function filenameOf(path: string): string {
+  const trimmed = path.trim().replace(/\/+$/, "");
+  return trimmed.split("/").pop() || trimmed;
+}
+
+function hostnameOf(url: string): string {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}
+
+function truncate(value: string, maxLength: number): string {
+  return value.length <= maxLength ? value : `${value.slice(0, maxLength - 1)}…`;
+}
+
+function humanize(name: string): string {
+  const spaced = name
+    .replace(/^mcp__/, "")
+    .replace(/__/g, " ")
+    .replace(/[_-]+/g, " ")
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .trim();
+  return spaced
+    ? spaced.replace(/\b\w/g, (character) => character.toUpperCase())
+    : "Tool";
+}
+
+export function lowerFirst(text: string): string {
+  return text ? text[0].toLowerCase() + text.slice(1) : text;
+}
+
+export function pluralize(
+  count: number,
+  singular: string,
+  plural = `${singular}s`,
+): string {
+  return `${count} ${count === 1 ? singular : plural}`;
+}
+
+function formatTimes(count: number): string {
+  return pluralize(count, "time");
+}
+
+// ── 工具名 → 规范种类 ───────────────────────────────────────────────────────
+
+export function toolNameOfPart(part: unknown): string | null {
+  const record = recordOf(part);
+  const type = typeof record.type === "string" ? record.type : "";
+  if (type === "dynamic-tool") {
+    return typeof record.toolName === "string" ? record.toolName : "dynamic";
+  }
+  return type.startsWith("tool-") ? type.slice(5) : null;
+}
+
+export function canonicalToolKind(name: string): CloudOsToolKind {
+  const normalized = name.trim().replaceAll("-", "_").toLowerCase();
+  if (normalized.startsWith("mcp__")) return "mcp";
+  if (["read", "read_file", "read_text_file", "read_document"].includes(normalized)) {
+    return "read";
+  }
+  if (["write", "write_file", "create_file", "save_file"].includes(normalized)) {
+    return "write";
+  }
+  if (["edit", "edit_file", "apply_patch", "patch_file"].includes(normalized)) {
+    return "edit";
+  }
+  if (
+    ["bash", "shell", "exec", "exec_command", "run_command", "terminal"].includes(
+      normalized,
+    )
+  ) {
+    return "bash";
+  }
+  if (["glob", "find", "find_file", "find_files"].includes(normalized)) return "glob";
+  if (["grep", "rg", "search_files", "search_code"].includes(normalized)) return "grep";
+  if (["ls", "list_directory", "list_files"].includes(normalized)) return "list";
+  if (["web_search", "search_web", "search_query"].includes(normalized)) {
+    return "web-search";
+  }
+  if (["web_fetch", "fetch_url", "open_url", "fetch_page"].includes(normalized)) {
+    return "web-fetch";
+  }
+  if (
+    ["javascript", "js_exec", "node_repl", "execute_javascript", "execute_code"].includes(
+      normalized,
+    )
+  ) {
+    return "javascript";
+  }
+  if (["todo_write", "update_todo", "update_plan"].includes(normalized)) return "tasks";
+  if (
+    [
+      "task",
+      "agent",
+      "run_agent",
+      "run_temporary_agent",
+      "subagents",
+      "fanout",
+      "extract",
+      "dispatch_background",
+      "explore",
+      "research",
+    ].includes(normalized)
+  ) {
+    return "agent";
+  }
+  if (["skill", "read_skill", "read_skill_resource"].includes(normalized)) return "skill";
+  if (["ask_user", "ask_user_question", "request_user_input"].includes(normalized)) {
+    return "ask-user";
+  }
+  if (["suggest_followups", "suggestions"].includes(normalized)) return "suggestions";
+  if (["schedule", "cancel_schedule"].includes(normalized)) return "schedule";
+  if (normalized === "create_agent") return "create-agent";
+  if (normalized === "publish_extension") return "publish-extension";
+  return "generic";
+}
+
+// ── 图标(对应原 getToolIcon)────────────────────────────────────────────────
+
+const KIND_ICONS: Record<CloudOsToolKind, PhosphorIcon> = {
+  read: FileIcon,
+  write: FileIcon,
+  edit: PencilSimple,
+  bash: Terminal,
+  glob: MagnifyingGlass,
+  grep: MagnifyingGlass,
+  list: FolderOpen,
+  "web-search": MagnifyingGlass,
+  "web-fetch": Globe,
+  javascript: Code,
+  tasks: ListChecks,
+  agent: UsersThree,
+  skill: Sparkle,
+  "ask-user": Question,
+  suggestions: Sparkle,
+  schedule: Clock,
+  "create-agent": Robot,
+  "publish-extension": Blueprint,
+  mcp: LinkSimple,
+  generic: BracketsCurly,
+};
+
+export function getToolIcon(kind: CloudOsToolKind | undefined): PhosphorIcon {
+  return kind ? KIND_ICONS[kind] : Question;
+}
+
+export const ReasoningIcon = Brain;
+export const ApprovalIcon = ShieldCheck;
+export const CreateIcon = Plus;
+
+// ── 单条摘要(对应原 getToolCallSummary)──────────────────────────────────────
+
+export function getToolCallSummary(call: CloudOsToolCall): {
+  verb: string;
+  target?: string;
+} {
+  const { kind, input, toolName, running } = call;
+  const path = stringField(input, "file_path", "path", "filename", "target");
+  const filename = path ? filenameOf(path) : "";
+  switch (kind) {
+    case "read":
+      return { verb: running ? "Reading" : "Read", target: filename || undefined };
+    case "write":
+      return { verb: running ? "Writing" : "Wrote", target: filename || undefined };
+    case "edit":
+      return { verb: running ? "Editing" : "Edited", target: filename || undefined };
+    case "bash": {
+      const command =
+        stringField(input, "description") || stringField(input, "command", "cmd");
+      return {
+        verb: running ? "Running" : "Ran",
+        target: command ? truncate(command, 60) : undefined,
+      };
+    }
+    case "glob":
+    case "grep": {
+      const pattern = stringField(input, "pattern", "glob", "query");
+      return {
+        verb: running ? "Searching" : "Searched",
+        target: pattern ? truncate(pattern, 40) : undefined,
+      };
+    }
+    case "list":
+      return { verb: running ? "Listing" : "Listed", target: filename || undefined };
+    case "web-search": {
+      const query = stringField(input, "query", "q");
+      return {
+        verb: running ? "Searching web" : "Searched web",
+        target: query ? truncate(query, 50) : undefined,
+      };
+    }
+    case "web-fetch": {
+      const url = stringField(input, "url");
+      return {
+        verb: running ? "Fetching" : "Fetched",
+        target: url ? hostnameOf(url) : undefined,
+      };
+    }
+    case "javascript": {
+      const firstLine = stringField(input, "code")
+        .split("\n")
+        .map((line) => line.trim())
+        .find((line) => line.length > 0);
+      return {
+        verb: running ? "Running code" : "Ran code",
+        target: firstLine ? truncate(firstLine, 60) : undefined,
+      };
+    }
+    case "tasks":
+      return { verb: running ? "Updating plan" : "Updated plan" };
+    case "agent": {
+      const name =
+        stringField(input, "subagentName", "agent", "name", "agentType") ||
+        humanize(toolName);
+      return { verb: running ? "Running" : "Ran", target: name };
+    }
+    case "skill": {
+      const skill = stringField(input, "skill", "name") || filename;
+      return {
+        verb: running ? "Reading instructions" : "Read instructions",
+        target: skill || undefined,
+      };
+    }
+    case "ask-user":
+      return { verb: running ? "Asking" : "Asked a question" };
+    case "suggestions":
+      return { verb: "Suggested follow-ups" };
+    case "schedule": {
+      const label = stringField(input, "label", "title");
+      return {
+        verb: toolName === "cancel_schedule" ? "Cancelled schedule" : "Scheduled",
+        target: label || undefined,
+      };
+    }
+    case "create-agent":
+      return {
+        verb: running ? "Creating agent" : "Created agent",
+        target: stringField(input, "name") || undefined,
+      };
+    case "publish-extension":
+      return {
+        verb: running ? "Publishing extension" : "Published extension",
+        target: stringField(input, "name") || undefined,
+      };
+    case "mcp": {
+      const [, server = "", ...rest] = toolName.split("__");
+      return {
+        verb: running ? "Calling" : "Called",
+        target: rest.length ? `${humanize(rest.join(" "))} · ${humanize(server)}` : undefined,
+      };
+    }
+    case "generic":
+      break;
+  }
+  const displayName = humanize(toolName);
+  return { verb: running ? `Using ${displayName}` : `Used ${displayName}` };
+}
+
+// ── 计数摘要(对应原 describeToolCallCount)──────────────────────────────────
+
+export function describeToolCallCount(
+  kind: CloudOsToolKind,
+  toolName: string,
+  count: number,
+): string {
+  switch (kind) {
+    case "read":
+      return `Read ${pluralize(count, "file")}`;
+    case "write":
+      return `Wrote ${pluralize(count, "file")}`;
+    case "edit":
+      return count === 1 ? "Made 1 edit" : `Made ${count} edits`;
+    case "bash":
+      return count === 1 ? "Ran a command" : `Ran ${pluralize(count, "command")}`;
+    case "glob":
+    case "grep":
+      return `Ran ${pluralize(count, "search")}`;
+    case "list":
+      return `Listed ${pluralize(count, "directory", "directories")}`;
+    case "web-search":
+      return count === 1 ? "Searched web" : `Searched web ${formatTimes(count)}`;
+    case "web-fetch":
+      return `Fetched ${pluralize(count, "page")}`;
+    case "javascript":
+      return count === 1 ? "Ran code" : `Ran code ${formatTimes(count)}`;
+    case "tasks":
+      return count === 1 ? "Updated plan" : `Updated plan ${formatTimes(count)}`;
+    case "agent":
+      return `Ran ${pluralize(count, "sub-agent")}`;
+    case "skill":
+      return `Read ${pluralize(count, "instruction set")}`;
+    case "ask-user":
+      return count === 1 ? "Asked a question" : `Asked ${count} questions`;
+    case "suggestions":
+      return "Suggested follow-ups";
+    case "schedule":
+      return `Managed ${pluralize(count, "schedule")}`;
+    case "create-agent":
+      return `Created ${pluralize(count, "agent")}`;
+    case "publish-extension":
+      return `Published ${pluralize(count, "extension")}`;
+    case "mcp":
+    case "generic":
+      break;
+  }
+  const displayName = humanize(toolName);
+  return count === 1 ? `Used ${displayName}` : `Used ${displayName} ${formatTimes(count)}`;
+}
+
+// ── UIMessage part → CloudOsToolCall ────────────────────────────────────────
+
+const RUNNING_STATES = new Set([
+  "input-streaming",
+  "input-available",
+  "approval-responded",
+  "running",
+  "",
+]);
+
+export function toCloudOsToolCall(
+  part: unknown,
+  fallbackId: string,
+  isActive: boolean,
+): CloudOsToolCall {
+  const record = recordOf(part);
+  const toolName = toolNameOfPart(part) ?? stringField(record, "name") ?? "tool";
+  const data = recordOf(record.data);
+  const input =
+    record.input != null
+      ? recordOf(record.input)
+      : data.input != null
+        ? recordOf(data.input)
+        : data;
+  const output = record.output ?? data.output ?? record.result;
+  const errorText = stringField(record, "errorText", "error");
+  const state = stringField(record, "state", "status");
+  const failed =
+    state === "output-error" ||
+    state === "output-denied" ||
+    state === "failed" ||
+    Boolean(errorText);
+  const awaitingApproval = state === "approval-requested";
+  return {
+    toolCallId:
+      stringField(record, "toolCallId", "id") || fallbackId,
+    toolName,
+    kind: canonicalToolKind(toolName),
+    input,
+    output,
+    outputText: normalizeOutputText(output),
+    errorText,
+    state,
+    running: isActive && !failed && RUNNING_STATES.has(state),
+    failed,
+    awaitingApproval,
+    raw: part,
+  };
+}
+
+// ── 分组(逐行对应原 buildToolCallGroups)────────────────────────────────────
+
+export function buildToolCallGroups(calls: CloudOsToolCall[]): ToolCallGroup[] {
+  if (calls.length === 0) return [];
+
+  const distinctKinds = Array.from(new Set(calls.map((call) => call.kind)));
+  const detailLines = Array.from(
+    new Set(
+      calls
+        .map((call) => getToolCallSummary(call).target)
+        .filter((target): target is string => Boolean(target)),
+    ),
+  );
+  const labelParts: string[] = [];
+
+  if (calls.length === 1) {
+    const summary = getToolCallSummary(calls[0]);
+    labelParts.push(`${summary.verb}${summary.target ? ` ${summary.target}` : ""}`);
+  } else if (distinctKinds.length === 1) {
+    const summary = getToolCallSummary(calls[0]);
+    labelParts.push(
+      detailLines.length === 1 && summary.target
+        ? `${summary.verb} ${summary.target}`
+        : describeToolCallCount(calls[0].kind, calls[0].toolName, calls.length),
+    );
+  } else if (distinctKinds.length <= 3) {
+    labelParts.push(
+      ...distinctKinds.map((kind) => {
+        const ofKind = calls.filter((call) => call.kind === kind);
+        return describeToolCallCount(kind, ofKind[0].toolName, ofKind.length);
+      }),
+    );
+  } else {
+    labelParts.push(`${calls.length} tool calls`);
+  }
+
+  return [
+    {
+      // 用第一条 work item 的 id 作 key:展开态在「流式 → 已落库」之间要活下来。
+      key: `group-${calls[0].toolCallId}`,
+      Icon: getToolIcon(calls[0].kind),
+      label: labelParts
+        .map((part, index) => (index === 0 ? part : lowerFirst(part)))
+        .join(", "),
+      detailLines,
+      calls,
+      hasError: calls.some((call) => call.failed),
+      hasRunning: calls.some((call) => call.running),
+    },
+  ];
+}