paseo-plugin-chat-view 0.0.0-stage → 0.1.0

package/shared/activity/text.ts

@@ -0,0 +1,202 @@
+import type { JsonValue } from "@getpaseo/protocol/agent-types";
+
+/** 文本预算（行数/字符数上限）、宽松 JSON 格式化，以及任意值转可读文本。 */
+
+export function compactText(value: string, maxLength = 180): string | undefined {
+  const normalized = value.replace(/\s+/g, " ").trim();
+  if (!normalized) return undefined;
+  return normalized.length > maxLength ? `${normalized.slice(0, maxLength - 1)}…` : normalized;
+}
+
+export const PREVIEW_LINES = 20;
+
+export const PREVIEW_CHARS = 4_000;
+
+export const MAX_FORMAT_CHARS = 100_000;
+
+export interface TextPreview {
+  text: string;
+  truncated: boolean;
+  totalLines: number;
+  totalChars: number;
+}
+
+export function previewText(
+  text: string,
+  maxLines = PREVIEW_LINES,
+  maxChars = PREVIEW_CHARS,
+): TextPreview {
+  const lines = text.split("\n");
+  const totalLines = lines.length;
+  const totalChars = text.length;
+
+  if (totalLines <= maxLines && totalChars <= maxChars) {
+    return { text, truncated: false, totalLines, totalChars };
+  }
+
+  const candidate = text.slice(0, maxChars + 1);
+  const candidateLines = candidate.split("\n");
+  let preview = candidateLines.slice(0, maxLines).join("\n").slice(0, maxChars);
+
+  // Guard against splitting a UTF-16 surrogate pair
+  const last = preview.charCodeAt(preview.length - 1);
+  const next = text.charCodeAt(preview.length);
+  if (
+    preview.length < text.length &&
+    last >= 0xd800 &&
+    last <= 0xdbff &&
+    next >= 0xdc00 &&
+    next <= 0xdfff
+  ) {
+    preview = preview.slice(0, -1);
+  }
+
+  return {
+    text: preview,
+    truncated: preview.length < text.length,
+    totalLines,
+    totalChars,
+  };
+}
+
+function looksLikeJson(source: string): boolean {
+  return /^\s*[[{"]/.test(source.slice(0, 256));
+}
+
+export interface JsonFormat {
+  text: string | null;
+  limited: boolean;
+}
+
+/** Change whitespace only. Preserve large numbers, key order, duplicate keys and escapes. */
+
+export function formatJson(source: string): JsonFormat {
+  if (source.length > MAX_FORMAT_CHARS || !source.trim()) {
+    return { text: null, limited: source.length > MAX_FORMAT_CHARS && looksLikeJson(source) };
+  }
+  try {
+    JSON.parse(source);
+  } catch {
+    return { text: null, limited: false };
+  }
+  const tokens = source.match(/"(?:\\[\s\S]|[^"\\])*"|[{}[\],:]|[^\s{}[\],:]+/g) ?? [];
+  let depth = 0;
+  const out: string[] = [];
+  let length = 0;
+  const push = (value: string) => {
+    out.push(value);
+    length += value.length;
+  };
+  const line = () => push("\n" + "  ".repeat(Math.min(depth, 40)));
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    if (token === "{" || token === "[") {
+      push(token);
+      depth += 1;
+      if (tokens[index + 1] !== "}" && tokens[index + 1] !== "]") line();
+    } else if (token === "}" || token === "]") {
+      depth -= 1;
+      if (tokens[index - 1] !== "{" && tokens[index - 1] !== "[") line();
+      push(token);
+    } else if (token === ",") {
+      push(token);
+      line();
+    } else if (token === ":") {
+      push(": ");
+    } else {
+      push(token);
+    }
+    if (length > MAX_FORMAT_CHARS) return { text: null, limited: true };
+  }
+  return { text: out.join(""), limited: false };
+}
+
+export function prettyJson(source: string): string | null {
+  return formatJson(source).text;
+}
+
+export function extractCodeInput(
+  toolName: string,
+  value: unknown,
+): { code: string; language: string } | undefined {
+  let decoded = value;
+  if (typeof value === "string" && value.length <= 1_000_000) {
+    try {
+      decoded = JSON.parse(value);
+    } catch {
+      // may be literal JS
+    }
+  }
+  const record =
+    decoded !== null && typeof decoded === "object" && !Array.isArray(decoded)
+      ? (decoded as Record<string, unknown>)
+      : undefined;
+  const name = toolName
+    .trim()
+    .toLowerCase()
+    .replace(/^(?:functions|tools)\./, "")
+    .replace(/^mcp__.*?__/, "")
+    .replace(/^mcp_/, "");
+
+  const codeTool = ["exec", "mcpscript", "mcp_script", "run_script"].includes(name);
+  if (codeTool) {
+    const code =
+      record?.code ??
+      (typeof decoded === "string" && !decoded.slice(0, 256).trimStart().startsWith("{")
+        ? decoded
+        : undefined);
+    if (typeof code === "string") {
+      return { code, language: "javascript" };
+    }
+  }
+
+  if (name === "evaluate_browser" || name === "browser_evaluate") {
+    const code = record?.expression ?? record?.code;
+    if (typeof code === "string") {
+      return { code, language: "javascript" };
+    }
+  }
+
+  return undefined;
+}
+
+export function toJsonValue(value: unknown): JsonValue {
+  try {
+    const serialized = JSON.stringify(value);
+    return serialized === undefined ? null : (JSON.parse(serialized) as JsonValue);
+  } catch {
+    return null;
+  }
+}
+
+export function formatUnknownValue(value: unknown): string {
+  if (typeof value === "string") {
+    const formatted = prettyJson(value);
+    return formatted ?? value;
+  }
+  try {
+    const raw = JSON.stringify(value);
+    if (raw === undefined) return String(value);
+    const formatted = prettyJson(raw);
+    return formatted ?? JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
+export function formatError(error: unknown): string | undefined {
+  if (error === null || error === undefined) return undefined;
+  const text = typeof error === "string" ? error : formatUnknownValue(error);
+  return compactText(text, 400);
+}
+
+export function formatReasoningText(text: string): string {
+  if (!text) return "";
+  const parts = text.split(/(```[\s\S]*?(?:```|$)|`[^`\n]+`)/g);
+  return parts
+    .map((part, index) => {
+      if (index % 2 === 1) return part;
+      return part.replace(/(\*\*[^*\s\n](?:[^*\n]*?[^*\s\n])?\*\*)\s*(?=\*\*)/g, "$1\n\n");
+    })
+    .join("");
+}

package/shared/activity/timeline.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { getActivityExpansionState, getReasoningExpansionState } from "./timeline";
+
+describe("reasoning expansion", () => {
+  it("keeps the latest completed thinking block open", () => {
+    expect(getReasoningExpansionState(false, true, null)).toBe(true);
+  });
+
+  it("collapses an older block when a newer block exists", () => {
+    expect(getReasoningExpansionState(false, false, null)).toBe(false);
+  });
+
+  it("keeps streaming reasoning open regardless of tool activity", () => {
+    expect(getReasoningExpansionState(true, false, false)).toBe(true);
+  });
+
+  it("respects an explicit user toggle", () => {
+    expect(getReasoningExpansionState(false, true, false)).toBe(false);
+    expect(getReasoningExpansionState(false, false, true)).toBe(true);
+  });
+
+  it("uses the same latest-item rule for tool calls", () => {
+    expect(getActivityExpansionState(false, true, null)).toBe(true);
+    expect(getActivityExpansionState(false, false, null)).toBe(false);
+  });
+});

package/shared/activity/timeline.ts

@@ -0,0 +1,108 @@
+import type { AgentTimelineItem } from "@getpaseo/protocol/agent-types";
+import { z } from "zod";
+import { formatError, formatReasoningText, toJsonValue } from "./text";
+import { resolveToolCallPresentation } from "./tool-presentation";
+
+export const REASONING_RENDERER_KIND = "colorful-reasoning";
+export const TOOL_CALL_RENDERER_KIND = "colorful-tool-call";
+export const REASONING_RENDERER_VERSION = 1;
+export const TOOL_CALL_RENDERER_VERSION = 1;
+
+export const reasoningItemDataSchema = z.object({
+  callId: z.string().optional(),
+  turnIndex: z.number().int().optional(),
+  turnId: z.string().optional(),
+  text: z.string(),
+  phase: z.enum(["streaming", "complete"]),
+});
+
+export const diffStatsSchema = z.object({
+  additions: z.number().int().nonnegative(),
+  deletions: z.number().int().nonnegative(),
+});
+
+export const toolCallPresentationSchema = z.object({
+  category: z.enum(["shell", "file", "search", "agent", "plan", "communication", "unknown"]),
+  icon: z.string(),
+  label: z.string(),
+  summary: z.string().optional(),
+  filePath: z.string().optional(),
+  fileIcon: z.string().optional(),
+  language: z.string().optional(),
+  diffStats: diffStatsSchema.optional(),
+});
+
+export const toolCallItemDataSchema = z.object({
+  callId: z.string().optional(),
+  turnIndex: z.number().int().optional(),
+  turnId: z.string().optional(),
+  name: z.string(),
+  status: z.enum(["running", "completed", "failed", "canceled"]),
+  detail: z.json(),
+  errorText: z.string().optional(),
+  presentation: toolCallPresentationSchema,
+});
+
+export type ReasoningItemData = z.output<typeof reasoningItemDataSchema>;
+export type ToolCallItemData = z.output<typeof toolCallItemDataSchema>;
+
+export function getActivityExpansionState(
+  isStreaming: boolean,
+  isLatest: boolean,
+  userExpanded: boolean | null,
+): boolean {
+  return isStreaming || (userExpanded !== null ? userExpanded : isLatest);
+}
+
+export function getReasoningExpansionState(
+  isStreaming: boolean,
+  isLatest: boolean,
+  userExpanded: boolean | null,
+): boolean {
+  return getActivityExpansionState(isStreaming, isLatest, userExpanded);
+}
+
+export function createReasoningData(
+  item: Extract<AgentTimelineItem, { type: "reasoning" }>,
+  phase: ReasoningItemData["phase"],
+  turnIndex?: number,
+  callId?: string,
+  turnId?: string,
+): ReasoningItemData {
+  return {
+    ...(callId ? { callId } : {}),
+    ...(turnIndex !== undefined ? { turnIndex } : {}),
+    ...(turnId ? { turnId } : {}),
+    text: formatReasoningText(item.text),
+    phase,
+  };
+}
+
+export function createToolCallData(
+  item: Extract<AgentTimelineItem, { type: "tool_call" }>,
+  turnIndex?: number,
+  callId?: string,
+  turnId?: string,
+): ToolCallItemData {
+  const presentation = resolveToolCallPresentation(item);
+  const errorText = formatError(item.error);
+  return {
+    callId: callId ?? item.callId,
+    ...(turnIndex !== undefined ? { turnIndex } : {}),
+    ...(turnId ? { turnId } : {}),
+    name: item.name,
+    status: item.status,
+    detail: toJsonValue(item.detail),
+    ...(errorText ? { errorText } : {}),
+    presentation: {
+      category: presentation.category,
+      icon: presentation.icon,
+      label: presentation.label,
+      ...(presentation.summary ? { summary: presentation.summary } : {}),
+      ...(presentation.filePath ? { filePath: presentation.filePath } : {}),
+      ...(presentation.fileIcon ? { fileIcon: presentation.fileIcon } : {}),
+      ...(presentation.language ? { language: presentation.language } : {}),
+      ...(presentation.diffStats ? { diffStats: presentation.diffStats } : {}),
+    },
+  };
+}

package/shared/activity/tool-presentation.test.ts

@@ -0,0 +1,154 @@
+import { describe, expect, it } from "vitest";
+import {
+  parseSubAgentActionLog,
+  paseoToolCategory,
+  paseoToolIcon,
+  paseoToolLabel,
+  paseoToolResult,
+  paseoToolSummary,
+  resolveSubAgentActionPresentation,
+  resolveToolCallPresentation,
+  unwrapPaseoToolOutput,
+} from "./tool-presentation";
+import { paseoToolLeafName } from "./paseo-tools";
+
+describe("tool call presentation", () => {
+  it("maps known tool details to screenshot-style presentation", () => {
+    expect(
+      resolveToolCallPresentation({
+        name: "edit",
+        detail: { type: "edit", filePath: "src/web/main.tsx", oldString: "", newString: "x" },
+      }),
+    ).toMatchObject({
+      category: "file",
+      icon: "FileCode2",
+      label: "Edit File",
+      summary: "src/web/main.tsx",
+      language: "typescript",
+      diffStats: { additions: 1, deletions: 0 },
+    });
+    expect(
+      resolveToolCallPresentation({
+        name: "bash",
+        detail: { type: "shell", command: "bun run typecheck && bun test" },
+      }),
+    ).toEqual({
+      category: "shell",
+      icon: "SquareTerminal",
+      label: "Shell Command",
+      summary: "bun run typecheck && bun test",
+    });
+  });
+
+  it("maps sub-agent actions to readable inline progress rows", () => {
+    expect(resolveSubAgentActionPresentation("read", "README.md")).toEqual({
+      icon: "FileText",
+      label: "Read File",
+      summaryIcon: "FileText",
+    });
+    expect(resolveSubAgentActionPresentation("find_files")).toEqual({
+      icon: "Search",
+      label: "Find Files",
+    });
+    expect(resolveSubAgentActionPresentation("shell", "git status")).toEqual({
+      icon: "SquareTerminal",
+      label: "Shell Command",
+    });
+  });
+
+  it("recovers Claude-style sub-agent actions from the provider log", () => {
+    expect(parseSubAgentActionLog("[Read] README.md\n[Shell] git status\nnot an action")).toEqual([
+      { index: 0, toolName: "Read", summary: "README.md" },
+      { index: 1, toolName: "Shell", summary: "git status" },
+    ]);
+  });
+
+  it("gives namespaced Paseo tools a specialized title, icon, and summary", () => {
+    const input = {
+      title: "Random Number Agent 3",
+      provider: "pi/plexus/gpt-5.6-luna",
+    };
+    expect(paseoToolLabel("mcp__paseo__create_agent")).toBe("Create Agent");
+    expect(paseoToolLabel("mcp_paseo_create_agent")).toBe("Create Agent");
+    expect(paseoToolIcon("paseo.create_agent")).toBe("Bot");
+    expect(paseoToolLeafName("paseo_create_agent")).toBe("create_agent");
+    expect(paseoToolLeafName("mcp_paseo_create_agent")).toBe("create_agent");
+    expect(paseoToolLeafName("mcp__paseo__future_tool")).toBeNull();
+    expect(paseoToolCategory("paseo_remote.create_agent")).toBe("agent");
+    expect(paseoToolSummary("mcp__paseo__create_agent", input)).toBe(
+      "Random Number Agent 3 · pi/plexus/gpt-5.6-luna",
+    );
+    expect(paseoToolLabel("mcp__github__create_issue")).toBeNull();
+    expect(
+      resolveToolCallPresentation({
+        name: "mcp_paseo_create_agent",
+        detail: { type: "unknown", input, output: { agentId: "agt_123" } },
+      }),
+    ).toMatchObject({
+      category: "agent",
+      icon: "Bot",
+      label: "Paseo Create Agent",
+      summary: "Random Number Agent 3 · pi/plexus/gpt-5.6-luna",
+    });
+    expect(
+      resolveToolCallPresentation({
+        name: "mcp__github__search_repositories",
+        detail: { type: "unknown", input: { query: "paseo" }, output: {} },
+      }),
+    ).toMatchObject({
+      category: "search",
+      icon: "BookMarked",
+      label: "GitHub Repository Search",
+      summary: "paseo",
+    });
+    expect(
+      resolveToolCallPresentation({
+        name: "mcp__paseo__create_agent",
+        detail: { type: "unknown", input, output: { agentId: "agt_123" } },
+      }),
+    ).toMatchObject({
+      category: "agent",
+      icon: "Bot",
+      label: "Paseo Create Agent",
+      summary: "Random Number Agent 3 · pi/plexus/gpt-5.6-luna",
+    });
+  });
+
+  it("unwraps MCP text envelopes with diagnostic prefixes", () => {
+    const output = {
+      content: [
+        {
+          type: "text",
+          text: 'availableModes_count=0\\n\\n{"agentId":"agt_123","status":"running"}',
+        },
+      ],
+    };
+    expect(unwrapPaseoToolOutput(output)).toEqual({
+      agentId: "agt_123",
+      status: "running",
+    });
+    expect(paseoToolResult({ ok: true, result: { browserId: "tab-1" } })).toEqual({
+      browserId: "tab-1",
+    });
+    expect(
+      paseoToolResult({
+        ok: false,
+        error: { code: "browser_timeout", message: "Timed out" },
+      }),
+    ).toEqual({
+      ok: false,
+      error: { code: "browser_timeout", message: "Timed out" },
+    });
+  });
+
+  it("uses valid Activity icon for get_agent_activity", () => {
+    expect(paseoToolIcon("paseo_get_agent_activity")).toBe("Activity");
+    expect(paseoToolIcon("mcp_paseo_get_agent_activity")).toBe("Activity");
+    expect(
+      resolveToolCallPresentation({
+        name: "mcp_paseo_get_agent_activity",
+        detail: { type: "unknown", input: { agentId: "agt_1" }, output: {} },
+      }).icon,
+    ).toBe("Activity");
+  });
+});