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

package/client/activity/detail/detail.test.ts

@@ -0,0 +1,102 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { expect, it, vi } from "vitest";
+import { createToolCallData } from "../../../shared/activity/timeline";
+import { resolveActivityPalette } from "../../../shared/activity/palette";
+import { useActivityStyles } from "../styles";
+import { DetailBody } from "./index";
+
+vi.mock("react-native", async () => await import("react-native-web"));
+vi.mock("@getpaseo/plugin/client/react-native", async () => ({
+  ScrollView: (await import("react-native-web")).ScrollView,
+  Icon: () => null,
+  useRevealedText: (text: string) => text,
+}));
+
+const theme = {
+  colors: {
+    foreground: "#222222",
+    foregroundMuted: "#777777",
+    border: "#dddddd",
+    surface0: "#ffffff",
+    surface1: "#eeeeee",
+    accent: "#0066cc",
+    statusSuccess: "#00aa44",
+    statusWarning: "#cc8800",
+    statusDanger: "#cc2222",
+  },
+};
+const palette = resolveActivityPalette("default", theme.colors as never);
+
+function Body({ toolName, detail }: { toolName: string; detail: unknown }) {
+  const styles = useActivityStyles(theme as never, palette);
+  const data = createToolCallData({
+    type: "tool_call",
+    callId: "call",
+    name: toolName,
+    status: "completed",
+    error: null,
+    detail,
+  } as never);
+  return React.createElement(DetailBody, { data, theme, palette, styles } as never);
+}
+
+const render = (toolName: string, detail: unknown) =>
+  renderToStaticMarkup(React.createElement(Body, { toolName, detail }));
+
+// 每个 detail 类型都要落到自己的渲染器：断言各自独有的文案，而不是"渲染成功"。
+const cases: Array<[string, string, unknown, string]> = [
+  [
+    "shell",
+    "exec_command",
+    { type: "shell", command: "npm test", cwd: "/tmp", output: "ok" },
+    "Command",
+  ],
+  [
+    "read",
+    "read_file",
+    { type: "read", filePath: "src/a.ts", content: "const a = 1;" },
+    "Contents",
+  ],
+  [
+    "write",
+    "write_file",
+    { type: "write", filePath: "src/a.ts", content: "x" },
+    "Written contents",
+  ],
+  [
+    "edit",
+    "edit_file",
+    { type: "edit", filePath: "src/a.ts", unifiedDiff: "@@ -1 +1 @@\n-old\n+new\n" },
+    "Diff",
+  ],
+  [
+    "search",
+    "search_files",
+    { type: "search", query: "needle", filePaths: ["a.ts"] },
+    "Query: needle",
+  ],
+  ["fetch", "fetch_url", { type: "fetch", url: "https://x.test", result: "body" }, "Result"],
+  [
+    "worktree_setup",
+    "worktree_setup",
+    { type: "worktree_setup", branchName: "b", worktreePath: "/tmp/w" },
+    "Branch: b",
+  ],
+  [
+    "sub_agent",
+    "task",
+    { type: "sub_agent", subAgentType: "explore", log: "[read] a.ts" },
+    "Activity log",
+  ],
+  ["plain_text", "speak", { type: "plain_text", text: "hello" }, "hello"],
+  ["plan", "update_plan", { type: "plan", text: "- one\n- two" }, "- one"],
+  ["unknown", "mystery_tool", { type: "unknown", input: { a: 1 }, output: [1, 2] }, "Input"],
+];
+
+it.each(cases)(
+  "renders %s details through its own renderer",
+  (_type, toolName, detail, expected) => {
+    expect(render(toolName, detail)).toContain(expected);
+  },
+);

package/client/activity/detail/dispatch.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+
+import { exaToolKind } from "../../../shared/activity/exa";
+import { githubToolKind } from "../../../shared/activity/github";
+import { paseoToolLeafName } from "../../../shared/activity/paseo-tools";
+import { extractCodeInput, formatUnknownValue } from "../../../shared/activity/text";
+import { ExaToolDetail } from "../tools/exa";
+import { GithubToolDetail } from "../tools/github";
+import { PaseoToolDetail } from "../tools/paseo/index";
+import { DetailRenderProps, HighlightedCodeBlock } from "./parts";
+
+/** Unknown payloads: hand them to the tool-specific panels, or show raw JSON. */
+export function UnknownDetail({
+  data,
+  detail,
+  theme,
+  palette,
+  styles,
+}: DetailRenderProps<"unknown">) {
+  if (githubToolKind(data.name)) {
+    return (
+      <GithubToolDetail
+        toolName={data.name}
+        input={detail.input}
+        output={detail.output}
+        theme={theme}
+        palette={palette}
+        styles={styles}
+      />
+    );
+  }
+  if (exaToolKind(data.name)) {
+    return (
+      <ExaToolDetail
+        toolName={data.name}
+        input={detail.input}
+        output={detail.output}
+        theme={theme}
+        styles={styles}
+      />
+    );
+  }
+  if (paseoToolLeafName(data.name)) {
+    return (
+      <PaseoToolDetail
+        toolName={data.name}
+        input={detail.input}
+        output={detail.output}
+        theme={theme}
+        palette={palette}
+        styles={styles}
+      />
+    );
+  }
+  const codeInput = extractCodeInput(data.name, detail.input);
+  if (codeInput) {
+    return (
+      <>
+        <HighlightedCodeBlock
+          code={codeInput.code}
+          language={codeInput.language}
+          label="Input"
+          styles={styles}
+          theme={theme}
+        />
+        <HighlightedCodeBlock
+          code={formatUnknownValue(detail.output)}
+          language="json"
+          label="Output"
+          styles={styles}
+          theme={theme}
+        />
+      </>
+    );
+  }
+  return (
+    <>
+      <HighlightedCodeBlock
+        code={formatUnknownValue(detail.input)}
+        language="json"
+        label="Input"
+        styles={styles}
+        theme={theme}
+      />
+      <HighlightedCodeBlock
+        code={formatUnknownValue(detail.output)}
+        language="json"
+        label="Output"
+        styles={styles}
+        theme={theme}
+      />
+    </>
+  );
+}

package/client/activity/detail/file.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { Text } from "react-native";
+
+import { MAX_DIFF_CHARS } from "../../../shared/activity/diff";
+import { DetailRenderProps, DiffBlock, HighlightedCodeBlock, PathRow } from "./parts";
+
+/** Everything that shows file contents: reads, writes, and edits as a diff. */
+export function ReadDetail({ data, detail, theme, styles }: DetailRenderProps<"read">) {
+  return (
+    <>
+      <PathRow icon={data.presentation.fileIcon ?? "Eye"} path={detail.filePath} styles={styles} />
+      {detail.content ? (
+        <HighlightedCodeBlock
+          code={detail.content}
+          language={data.presentation.language ?? "text"}
+          label="Contents"
+          styles={styles}
+          theme={theme}
+        />
+      ) : (
+        <Text style={styles.empty}>No file contents returned.</Text>
+      )}
+    </>
+  );
+}
+
+export function WriteDetail({ data, detail, theme, styles }: DetailRenderProps<"write">) {
+  return (
+    <>
+      <PathRow
+        icon={data.presentation.fileIcon ?? "Pencil"}
+        path={detail.filePath}
+        styles={styles}
+      />
+      {detail.content ? (
+        <HighlightedCodeBlock
+          code={detail.content}
+          language={data.presentation.language ?? "text"}
+          label="Written contents"
+          styles={styles}
+          theme={theme}
+        />
+      ) : null}
+    </>
+  );
+}
+
+export function EditDetail({ data, detail, theme, styles, palette }: DetailRenderProps<"edit">) {
+  const isOversized =
+    (detail.unifiedDiff?.length ??
+      (detail.oldString?.length ?? 0) + (detail.newString?.length ?? 0)) > MAX_DIFF_CHARS;
+
+  if (isOversized && detail.unifiedDiff === undefined) {
+    return (
+      <>
+        <PathRow
+          icon={data.presentation.fileIcon ?? "Pencil"}
+          path={detail.filePath}
+          styles={styles}
+        />
+        {detail.oldString ? (
+          <HighlightedCodeBlock
+            code={detail.oldString}
+            language={data.presentation.language ?? "text"}
+            label="Before"
+            styles={styles}
+            theme={theme}
+          />
+        ) : null}
+        {detail.newString ? (
+          <HighlightedCodeBlock
+            code={detail.newString}
+            language={data.presentation.language ?? "text"}
+            label="After"
+            styles={styles}
+            theme={theme}
+          />
+        ) : null}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <PathRow
+        icon={data.presentation.fileIcon ?? "Pencil"}
+        path={detail.filePath}
+        styles={styles}
+      />
+      <DiffBlock detail={detail} palette={palette} styles={styles} />
+    </>
+  );
+}

package/client/activity/detail/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Text } from "react-native";
+
+import { FetchDetail, SearchDetail } from "./search";
+import { EditDetail, ReadDetail, WriteDetail } from "./file";
+import { ShellDetail, WorktreeSetupDetail } from "./terminal";
+import { PlainTextDetail, PlanDetail, SubAgentDetail } from "./texts";
+import { UnknownDetail } from "./dispatch";
+import { asToolCallDetail, type DetailRenderProps } from "./parts";
+
+/** The detail module's surface: the dispatcher plus the primitives the activity rows reuse. */
+export { DetailLabel, HighlightedCodeBlock, asToolCallDetail } from "./parts";
+
+/**
+ * One renderer per detail type, so a new protocol detail cannot be forgotten: the record stops
+ * compiling until it is registered.
+ */
+const RENDERERS: {
+  [K in DetailRenderProps["detail"]["type"]]: (props: DetailRenderProps<K>) => React.ReactNode;
+} = {
+  shell: ShellDetail,
+  read: ReadDetail,
+  write: WriteDetail,
+  edit: EditDetail,
+  search: SearchDetail,
+  fetch: FetchDetail,
+  worktree_setup: WorktreeSetupDetail,
+  sub_agent: SubAgentDetail,
+  plain_text: PlainTextDetail,
+  plan: PlanDetail,
+  unknown: UnknownDetail,
+};
+
+export function DetailBody(props: Omit<DetailRenderProps, "detail">): React.ReactNode {
+  const detail = asToolCallDetail(props.data.detail);
+  if (!detail) return <Text style={props.styles.empty}>Tool details unavailable.</Text>;
+  const render = RENDERERS[detail.type] as (props: DetailRenderProps) => React.ReactNode;
+  return render({ ...props, detail });
+}

package/client/activity/detail/parts.tsx

@@ -0,0 +1,221 @@
+import type { ToolCallDetail } from "@getpaseo/protocol/agent-types";
+import React, { useMemo, useState, type ReactNode } from "react";
+import { Icon, ScrollView } from "@getpaseo/plugin/client/react-native";
+import { Pressable, Text, View, type TextStyle } from "react-native";
+
+import type { ActivityPalette } from "../../../shared/activity/palette";
+import { diffLinesForDetail, type DiffLine } from "../../../shared/activity/diff";
+import { PREVIEW_LINES, previewText } from "../../../shared/activity/text";
+import type { ToolCallItemData } from "../../../shared/activity/timeline";
+import { useHighlightTokens, type HighlightToken } from "../highlight";
+import { useActivityStyles, type Theme } from "../styles";
+
+export type ActivityStyles = ReturnType<typeof useActivityStyles>;
+
+/** Everything a per-case detail renderer needs; `detail` is narrowed to the case it renders. */
+export interface DetailRenderProps<K extends ToolCallDetail["type"] = ToolCallDetail["type"]> {
+  data: ToolCallItemData;
+  detail: Extract<ToolCallDetail, { type: K }>;
+  theme: Theme;
+  palette: ActivityPalette;
+  styles: ActivityStyles;
+}
+
+/** Detail payloads arrive from the wire, so the shape is only known after a runtime check. */
+export function asToolCallDetail(value: ToolCallItemData["detail"]): ToolCallDetail | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const type = Reflect.get(value, "type");
+  if (typeof type !== "string") return null;
+  return value as unknown as ToolCallDetail;
+}
+
+export function DetailLabel({ children, style }: { children: ReactNode; style: TextStyle }) {
+  return <Text style={style}>{children}</Text>;
+}
+
+export function PathRow({
+  icon,
+  path,
+  styles,
+}: {
+  icon: string;
+  path: string;
+  styles: ActivityStyles;
+}) {
+  return (
+    <View style={styles.pathRow}>
+      <Icon name={icon} color={styles.pathText.color} size={12} />
+      <Text selectable style={styles.pathText}>
+        {path}
+      </Text>
+    </View>
+  );
+}
+
+function TokenizedLines({ lines, styles }: { lines: HighlightToken[][]; styles: ActivityStyles }) {
+  return (
+    <View>
+      {lines.map((line, lineIndex) => (
+        <Text key={`line-${lineIndex}`} selectable style={styles.codeLine}>
+          {line.length === 0
+            ? " "
+            : line.map((token, tokenIndex) => {
+                const tokenStyle: TextStyle = {
+                  color: token.color ?? styles.codeLine.color,
+                  ...(token.fontStyle && token.fontStyle & 1 ? { fontStyle: "italic" } : {}),
+                  ...(token.fontStyle && token.fontStyle & 2 ? { fontWeight: "700" } : {}),
+                  ...(token.fontStyle && token.fontStyle & 4
+                    ? { textDecorationLine: "underline" }
+                    : {}),
+                };
+                return (
+                  <Text key={`${lineIndex}-${tokenIndex}`} style={tokenStyle}>
+                    {token.content}
+                  </Text>
+                );
+              })}
+        </Text>
+      ))}
+    </View>
+  );
+}
+
+export function HighlightedCodeBlock({
+  code,
+  language,
+  theme,
+  label,
+  styles,
+}: {
+  code: string;
+  language: string;
+  theme: Theme;
+  label?: string;
+  styles: ActivityStyles;
+}) {
+  const [showAll, setShowAll] = useState(false);
+  const preview = useMemo(() => previewText(code), [code]);
+  const displayCode = showAll ? code : preview.text;
+  const tokens = useHighlightTokens(displayCode, language, theme.colors);
+
+  return (
+    <View style={styles.section}>
+      {label ? <DetailLabel style={styles.detailLabel}>{label}</DetailLabel> : null}
+      <ScrollView horizontal nestedScrollEnabled style={styles.codeScroll}>
+        <View style={styles.codeSurface}>
+          {tokens ? (
+            <TokenizedLines lines={tokens} styles={styles} />
+          ) : (
+            <Text selectable style={styles.codeLine}>
+              {displayCode || " "}
+            </Text>
+          )}
+        </View>
+      </ScrollView>
+      {preview.truncated ? (
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => setShowAll(!showAll)}
+          style={styles.showMoreButton}
+        >
+          <Text style={styles.showMoreText}>
+            {showAll
+              ? "Show less"
+              : `Show all (${preview.totalLines} lines, ${preview.totalChars.toLocaleString()} chars)`}
+          </Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+export function DiffBlock({
+  detail,
+  palette,
+  styles,
+}: {
+  detail: Extract<ToolCallDetail, { type: "edit" }>;
+  palette: ActivityPalette;
+  styles: ActivityStyles;
+}) {
+  const [showAll, setShowAll] = useState(false);
+  const lines = useMemo(() => diffLinesForDetail(detail), [detail]);
+  const isTruncated = lines.length > PREVIEW_LINES;
+  const displayLines = showAll || !isTruncated ? lines : lines.slice(0, PREVIEW_LINES);
+
+  return (
+    <View style={styles.section}>
+      <DetailLabel style={styles.detailLabel}>Diff</DetailLabel>
+      <ScrollView horizontal nestedScrollEnabled style={styles.codeScroll}>
+        <View style={styles.diffSurface}>
+          {displayLines.length === 0 ? (
+            <Text style={styles.empty}>No changed lines.</Text>
+          ) : (
+            displayLines.map((line, index) => (
+              <DiffRow
+                key={`${line.kind}-${index}`}
+                line={line}
+                palette={palette}
+                styles={styles}
+              />
+            ))
+          )}
+        </View>
+      </ScrollView>
+      {isTruncated ? (
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => setShowAll(!showAll)}
+          style={styles.showMoreButton}
+        >
+          <Text style={styles.showMoreText}>
+            {showAll ? "Show less" : `Show all (${lines.length} lines)`}
+          </Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+export function DiffRow({
+  line,
+  palette,
+  styles,
+}: {
+  line: DiffLine;
+  palette: ActivityPalette;
+  styles: ActivityStyles;
+}) {
+  const rowStyle =
+    line.kind === "add"
+      ? styles.diffAdded
+      : line.kind === "remove"
+        ? styles.diffRemoved
+        : line.kind === "meta"
+          ? styles.diffMeta
+          : undefined;
+  const marker =
+    line.kind === "add" ? "+" : line.kind === "remove" ? "-" : line.kind === "meta" ? "" : " ";
+  const markerColor =
+    line.kind === "add"
+      ? palette.statusColors.completed
+      : line.kind === "remove"
+        ? palette.statusColors.failed
+        : line.kind === "meta"
+          ? palette.categoryColors.search
+          : palette.categoryColors.unknown;
+  return (
+    <View style={[styles.diffLine, rowStyle]}>
+      <Text style={[styles.diffMarker, { color: markerColor }]}>{marker}</Text>
+      <Text
+        selectable
+        style={[
+          styles.diffText,
+          { color: line.kind === "meta" ? markerColor : styles.codeLine.color },
+        ]}
+      >
+        {line.text || " "}
+      </Text>
+    </View>
+  );
+}

package/client/activity/detail/search.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Text, View } from "react-native";
+
+import { fileIconForPath } from "../../../shared/activity/file-kind";
+import { DetailRenderProps, HighlightedCodeBlock, PathRow } from "./parts";
+
+/** Search and fetch results, including web hits and page bodies. */
+export function SearchDetail({ detail, theme, styles }: DetailRenderProps<"search">) {
+  return (
+    <>
+      <Text style={styles.detailText}>Query: {detail.query}</Text>
+      {detail.filePaths?.map((filePath) => (
+        <PathRow key={filePath} icon={fileIconForPath(filePath)} path={filePath} styles={styles} />
+      ))}
+      {detail.content ? (
+        <HighlightedCodeBlock code={detail.content} language="text" styles={styles} theme={theme} />
+      ) : null}
+      {detail.webResults?.map((result) => (
+        <View key={result.url} style={styles.section}>
+          <Text selectable style={styles.detailText}>
+            {result.title}
+          </Text>
+          <Text selectable style={styles.mutedText}>
+            {result.url}
+          </Text>
+        </View>
+      ))}
+      {detail.annotations?.map((annotation, index) => (
+        <Text key={`${annotation}-${index}`} selectable style={styles.mutedText}>
+          {annotation}
+        </Text>
+      ))}
+    </>
+  );
+}
+
+export function FetchDetail({ detail, theme, styles }: DetailRenderProps<"fetch">) {
+  return (
+    <>
+      <Text selectable style={styles.detailText}>
+        {detail.url}
+      </Text>
+      {detail.result ? (
+        <HighlightedCodeBlock
+          code={detail.result}
+          language="text"
+          label="Result"
+          styles={styles}
+          theme={theme}
+        />
+      ) : null}
+      {detail.code !== undefined ? (
+        <Text style={styles.mutedText}>
+          HTTP {detail.code} {detail.codeText ?? ""}
+        </Text>
+      ) : null}
+    </>
+  );
+}

package/client/activity/detail/terminal.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Text } from "react-native";
+
+import { DetailRenderProps, HighlightedCodeBlock } from "./parts";
+
+/** Command execution and the worktree setup that precedes it. */
+export function ShellDetail({ detail, theme, styles }: DetailRenderProps<"shell">) {
+  return (
+    <>
+      <HighlightedCodeBlock
+        code={`$ ${detail.command}`}
+        language="bash"
+        label="Command"
+        styles={styles}
+        theme={theme}
+      />
+      {detail.output ? (
+        <HighlightedCodeBlock
+          code={detail.output}
+          language="ansi"
+          label="Output"
+          styles={styles}
+          theme={theme}
+        />
+      ) : null}
+      {detail.exitCode !== undefined && detail.exitCode !== null ? (
+        <Text style={styles.mutedText}>Exit code {detail.exitCode}</Text>
+      ) : null}
+    </>
+  );
+}
+
+export function WorktreeSetupDetail({
+  detail,
+  theme,
+  styles,
+}: DetailRenderProps<"worktree_setup">) {
+  return (
+    <>
+      <Text style={styles.detailText}>Branch: {detail.branchName}</Text>
+      <Text style={styles.mutedText}>Path: {detail.worktreePath}</Text>
+      {detail.log ? (
+        <HighlightedCodeBlock
+          code={detail.log}
+          language="ansi"
+          label="Setup log"
+          styles={styles}
+          theme={theme}
+        />
+      ) : null}
+    </>
+  );
+}