@yuangc/paseo-plugin-workspace-overview 0.0.0-stage → 1.0.0

package/client/components/PaseoAssistantMessage.tsx

@@ -0,0 +1,216 @@
+import React, { useMemo, type ReactNode } from "react";
+import { Text, View, type TextStyle, type ViewStyle } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+
+function inlineMarkdown(text: string, styles: ReturnType<typeof createStyles>): ReactNode[] {
+  return text
+    .split(/(`[^`]+`|\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|~~[^~]+~~)/g)
+    .filter(Boolean)
+    .map((token, index) => {
+      if (token.startsWith("`") && token.endsWith("`")) {
+        return <Text key={index} style={styles.codeInline}>{token.slice(1, -1)}</Text>;
+      }
+      if (
+        (token.startsWith("**") && token.endsWith("**")) ||
+        (token.startsWith("__") && token.endsWith("__"))
+      ) {
+        return <Text key={index} style={styles.strong}>{token.slice(2, -2)}</Text>;
+      }
+      if (token.startsWith("~~") && token.endsWith("~~")) {
+        return <Text key={index} style={styles.strike}>{token.slice(2, -2)}</Text>;
+      }
+      if (
+        (token.startsWith("*") && token.endsWith("*")) ||
+        (token.startsWith("_") && token.endsWith("_"))
+      ) {
+        return <Text key={index} style={styles.em}>{token.slice(1, -1)}</Text>;
+      }
+      return <Text key={index} style={styles.text}>{token}</Text>;
+    });
+}
+
+function markdownBlocks(text: string, styles: ReturnType<typeof createStyles>): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  let codeBlock: { lines: string[] } | null = null;
+  let codeKey = 0;
+  let previousWasGap = false;
+
+  const lines = text.trim().split("\n");
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index];
+    const fence = /^\s*(```|~~~)/.test(line);
+    if (fence) {
+      if (codeBlock) {
+        nodes.push(<Text selectable key={`code-${codeKey++}`} style={styles.fence}>{codeBlock.lines.join("\n")}</Text>);
+        codeBlock = null;
+      } else {
+        codeBlock = { lines: [] };
+      }
+      continue;
+    }
+
+    if (codeBlock) {
+      codeBlock.lines.push(line);
+      continue;
+    }
+
+    if (!line.trim()) {
+      if (!previousWasGap && nodes.length > 0) {
+        nodes.push(<View key={`gap-${index}`} style={styles.gap} />);
+      }
+      previousWasGap = true;
+      continue;
+    }
+    previousWasGap = false;
+
+    if (/^\s{0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+      nodes.push(<View key={`hr-${index}`} style={styles.hr} />);
+      continue;
+    }
+
+    const heading = /^(#{1,6})\s+(.+)$/.exec(line);
+    if (heading) {
+      const level = heading[1].length;
+      const headingStyle =
+        level === 1 ? styles.heading1 :
+        level === 2 ? styles.heading2 :
+        level === 3 ? styles.heading3 :
+        level === 4 ? styles.heading4 :
+        level === 5 ? styles.heading5 :
+        styles.heading6;
+      nodes.push(<Text selectable key={index} style={headingStyle}>{inlineMarkdown(heading[2], styles)}</Text>);
+      continue;
+    }
+
+    const bullet = /^\s*[-*+]\s+(.+)$/.exec(line);
+    if (bullet) {
+      nodes.push(
+        <View key={index} style={styles.listItem}>
+          <Text style={styles.bulletMarker}>•</Text>
+          <Text selectable style={styles.listText}>{inlineMarkdown(bullet[1], styles)}</Text>
+        </View>,
+      );
+      continue;
+    }
+
+    const ordered = /^\s*(\d+)\.\s+(.+)$/.exec(line);
+    if (ordered) {
+      nodes.push(
+        <View key={index} style={styles.listItem}>
+          <Text style={styles.orderedMarker}>{ordered[1]}.</Text>
+          <Text selectable style={styles.listText}>{inlineMarkdown(ordered[2], styles)}</Text>
+        </View>,
+      );
+      continue;
+    }
+
+    const quote = /^>\s?(.*)$/.exec(line);
+    if (quote) {
+      nodes.push(
+        <View key={index} style={styles.blockquote}>
+          <Text selectable style={styles.paragraph}>{inlineMarkdown(quote[1], styles)}</Text>
+        </View>,
+      );
+      continue;
+    }
+
+    nodes.push(<Text selectable key={index} style={styles.paragraph}>{inlineMarkdown(line, styles)}</Text>);
+  }
+
+  if (codeBlock) {
+    nodes.push(<Text selectable key="code-tail" style={styles.fence}>{codeBlock.lines.join("\n")}</Text>);
+  }
+
+  return nodes;
+}
+
+function createStyles(theme: PluginSurfaceProps["theme"]) {
+  return {
+    root: { paddingVertical: 12, width: "100%" } as ViewStyle,
+    text: { color: theme.colors.foreground, fontSize: 15, lineHeight: 21, flexShrink: 1 } as TextStyle,
+    paragraph: { color: theme.colors.foreground, fontSize: 15, lineHeight: 21, marginBottom: 10 } as TextStyle,
+    strong: { color: theme.colors.foreground, fontSize: 15, lineHeight: 21, fontWeight: "600" } as TextStyle,
+    em: { color: theme.colors.foreground, fontSize: 15, lineHeight: 21, fontStyle: "italic" } as TextStyle,
+    strike: { color: theme.colors.foregroundMuted, fontSize: 15, lineHeight: 21, textDecorationLine: "line-through" } as TextStyle,
+    codeInline: {
+      color: theme.colors.foreground,
+      fontSize: 13,
+      fontFamily: "monospace",
+      backgroundColor: theme.colors.foregroundMuted + "18",
+      paddingHorizontal: 4,
+      paddingVertical: 2,
+      borderRadius: 4,
+    } as TextStyle,
+    heading1: {
+      color: theme.colors.foreground,
+      fontSize: 23,
+      lineHeight: 30,
+      fontWeight: "700",
+      marginTop: 18,
+      marginBottom: 10,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.foregroundMuted + "22",
+      paddingBottom: 6,
+    } as TextStyle,
+    heading2: {
+      color: theme.colors.foreground,
+      fontSize: 20,
+      lineHeight: 27,
+      fontWeight: "700",
+      marginTop: 18,
+      marginBottom: 10,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.foregroundMuted + "22",
+      paddingBottom: 6,
+    } as TextStyle,
+    heading3: { color: theme.colors.foreground, fontSize: 17, lineHeight: 24, fontWeight: "600", marginTop: 12, marginBottom: 6 } as TextStyle,
+    heading4: { color: theme.colors.foreground, fontSize: 16, lineHeight: 23, fontWeight: "600", marginTop: 12, marginBottom: 6 } as TextStyle,
+    heading5: { color: theme.colors.foreground, fontSize: 15, lineHeight: 22, fontWeight: "600", marginTop: 10, marginBottom: 4 } as TextStyle,
+    heading6: {
+      color: theme.colors.foregroundMuted,
+      fontSize: 15,
+      lineHeight: 22,
+      fontWeight: "600",
+      marginTop: 10,
+      marginBottom: 4,
+      textTransform: "uppercase",
+      letterSpacing: 0.5,
+    } as TextStyle,
+    fence: {
+      color: theme.colors.foreground,
+      backgroundColor: theme.colors.foregroundMuted + "12",
+      borderColor: theme.colors.foregroundMuted + "28",
+      borderWidth: 1,
+      borderRadius: 8,
+      padding: 12,
+      fontSize: 13,
+      lineHeight: 19,
+      fontFamily: "monospace",
+      marginVertical: 8,
+    } as TextStyle,
+    listItem: { flexDirection: "row", alignItems: "flex-start", marginBottom: 4, flexShrink: 1 } as ViewStyle,
+    bulletMarker: { color: theme.colors.foregroundMuted, marginRight: 4, fontSize: 15, lineHeight: 21, width: 14 } as TextStyle,
+    orderedMarker: { color: theme.colors.foregroundMuted, marginRight: 4, fontSize: 15, lineHeight: 21, minWidth: 18 } as TextStyle,
+    listText: { flex: 1, color: theme.colors.foreground, fontSize: 15, lineHeight: 21, minWidth: 0 } as TextStyle,
+    blockquote: {
+      backgroundColor: theme.colors.foregroundMuted + "0d",
+      borderLeftWidth: 4,
+      borderLeftColor: theme.colors.foregroundMuted + "33",
+      paddingHorizontal: 12,
+      paddingTop: 10,
+      paddingBottom: 0,
+      marginVertical: 8,
+      borderRadius: 8,
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    } as ViewStyle,
+    hr: { backgroundColor: theme.colors.foregroundMuted + "33", height: 1, marginVertical: 10 } as ViewStyle,
+    gap: { height: 10 } as ViewStyle,
+  };
+}
+
+export function PaseoAssistantMessage({ text, theme }: { text: string; theme: PluginSurfaceProps["theme"] }) {
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  if (!text.trim()) return null;
+  return <View style={styles.root}>{markdownBlocks(text, styles)}</View>;
+}

package/client/components/PaseoShellDetail.tsx

@@ -0,0 +1,128 @@
+import React, { useMemo } from "react";
+import { ScrollView, Text, View, type TextStyle, type ViewStyle } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+
+function shellOutputText(value: unknown): string {
+  if (value == null) return "";
+  const serialized = typeof value === "string" ? value : JSON.stringify(value);
+  const trimmed = serialized.replace(/^\n+/, "");
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return trimmed;
+  try {
+    const parsed = JSON.parse(trimmed) as unknown;
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) return trimmed;
+    const record = parsed as Record<string, unknown>;
+    if (record.type !== "tool_result") return trimmed;
+    if (typeof record.content === "string") return record.content.replace(/^\n+/, "");
+    if (Array.isArray(record.content)) {
+      const text = record.content
+        .map((part) => typeof part === "string"
+          ? part
+          : typeof part === "object" && part !== null && typeof (part as Record<string, unknown>).text === "string"
+            ? String((part as Record<string, unknown>).text)
+            : "")
+        .filter(Boolean)
+        .join("\n");
+      return text || trimmed;
+    }
+    return trimmed;
+  } catch {
+    return trimmed;
+  }
+}
+
+export function PaseoShellDetail({
+  command,
+  output,
+  error,
+  theme,
+}: {
+  command: string;
+  output?: unknown;
+  error?: unknown;
+  theme: PluginSurfaceProps["theme"];
+}) {
+  const normalizedCommand = command.replace(/\n+$/, "");
+  const normalizedOutput = shellOutputText(output);
+  const errorText = shellOutputText(error);
+  const styles = useMemo(() => ({
+    root: {
+      minWidth: 0,
+      backgroundColor: theme.colors.surface1,
+    } as ViewStyle,
+    commandBlock: {
+      minWidth: 0,
+      backgroundColor: theme.colors.surface1,
+    } as ViewStyle,
+    commandScroll: {
+      maxHeight: 400,
+    } as ViewStyle,
+    horizontalContent: {
+      minWidth: "100%",
+    } as ViewStyle,
+    codeLine: {
+      minWidth: "100%",
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+    } as ViewStyle,
+    code: {
+      color: theme.colors.foreground,
+      fontSize: 12,
+      lineHeight: 18,
+      fontFamily: "monospace",
+    } as TextStyle,
+    prompt: {
+      color: theme.colors.foregroundMuted,
+    } as TextStyle,
+    errorSection: {
+      gap: 8,
+      paddingTop: 8,
+    } as ViewStyle,
+    errorTitle: {
+      color: theme.colors.statusDanger,
+      fontSize: 12,
+      lineHeight: 16,
+      fontWeight: "600",
+      letterSpacing: 0.5,
+    } as TextStyle,
+    errorBox: {
+      borderWidth: 1,
+      borderColor: theme.colors.statusDanger,
+      borderRadius: 6,
+      backgroundColor: theme.colors.surface2,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+    } as ViewStyle,
+    errorCode: {
+      color: theme.colors.statusDanger,
+      fontSize: 12,
+      lineHeight: 18,
+      fontFamily: "monospace",
+    } as TextStyle,
+  }), [theme]);
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.commandBlock}>
+        <ScrollView style={styles.commandScroll} nestedScrollEnabled showsVerticalScrollIndicator>
+          <ScrollView horizontal nestedScrollEnabled showsHorizontalScrollIndicator contentContainerStyle={styles.horizontalContent}>
+            <View style={styles.codeLine}>
+              <Text selectable style={styles.code}>
+                <Text style={styles.prompt}>$ </Text>
+                {normalizedCommand}
+                {normalizedOutput ? `\n\n${normalizedOutput}` : ""}
+              </Text>
+            </View>
+          </ScrollView>
+        </ScrollView>
+      </View>
+      {errorText ? (
+        <View style={styles.errorSection}>
+          <Text style={styles.errorTitle}>错误</Text>
+          <ScrollView horizontal nestedScrollEnabled showsHorizontalScrollIndicator style={styles.errorBox}>
+            <Text selectable style={styles.errorCode}>{errorText}</Text>
+          </ScrollView>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/client/components/PaseoStreamBadge.tsx

@@ -0,0 +1,94 @@
+import React, { useMemo, useState, type ReactNode } from "react";
+import { Pressable, Text, View, type TextStyle, type ViewStyle } from "react-native";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+
+function detailText(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  try { return JSON.stringify(value, null, 2); } catch { return String(value); }
+}
+
+export function PaseoStreamBadge({
+  label,
+  secondaryLabel,
+  icon,
+  detail,
+  children,
+  loading = false,
+  error = false,
+  sequenceEnd = false,
+  borderlessWhenExpanded = false,
+  fullBleedDetail = false,
+  theme,
+}: {
+  label: string;
+  secondaryLabel?: string;
+  icon: string;
+  detail?: unknown;
+  children?: ReactNode;
+  loading?: boolean;
+  error?: boolean;
+  sequenceEnd?: boolean;
+  borderlessWhenExpanded?: boolean;
+  fullBleedDetail?: boolean;
+  theme: PluginSurfaceProps["theme"];
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const content = detailText(detail);
+  const interactive = content.length > 0 || Boolean(children);
+  const styles = useMemo(() => ({
+    root: { marginHorizontal: -13, marginBottom: sequenceEnd ? 16 : 4 } as ViewStyle,
+    header: {
+      minHeight: 32,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      flexDirection: "row",
+      alignItems: "center",
+      borderRadius: 8,
+      borderWidth: expanded ? 1 : 0,
+      borderColor: borderlessWhenExpanded ? "transparent" : theme.colors.foregroundMuted + "2a",
+      borderBottomLeftRadius: expanded ? 0 : 8,
+      borderBottomRightRadius: expanded ? 0 : 8,
+      backgroundColor: expanded ? theme.colors.foregroundMuted + "0d" : "transparent",
+    } as ViewStyle,
+    icon: { width: 22, height: 22, alignItems: "center", justifyContent: "center", marginRight: 4 } as ViewStyle,
+    label: { color: expanded || loading ? theme.colors.foreground : theme.colors.foregroundMuted, fontSize: 14 } as TextStyle,
+    secondary: { color: theme.colors.foregroundMuted, fontSize: 14, marginLeft: 8, flex: 1 } as TextStyle,
+    detail: {
+      borderWidth: borderlessWhenExpanded ? 0 : 1,
+      borderTopWidth: 0,
+      borderColor: theme.colors.foregroundMuted + "2a",
+      borderBottomLeftRadius: 8,
+      borderBottomRightRadius: 8,
+      paddingTop: fullBleedDetail ? 0 : 4,
+      paddingHorizontal: fullBleedDetail ? 0 : 13,
+      paddingBottom: fullBleedDetail || borderlessWhenExpanded ? 0 : 10,
+      maxHeight: borderlessWhenExpanded || fullBleedDetail ? 400 : 260,
+      overflow: "scroll",
+      backgroundColor: borderlessWhenExpanded ? "transparent" : fullBleedDetail ? theme.colors.surface1 : theme.colors.surface0,
+    } as ViewStyle,
+    detailText: { color: theme.colors.foreground, fontSize: 12, lineHeight: 18, fontFamily: "monospace" } as TextStyle,
+  }), [borderlessWhenExpanded, expanded, fullBleedDetail, loading, sequenceEnd, theme]);
+
+  return (
+    <View style={styles.root}>
+      <Pressable disabled={!interactive} onPress={() => setExpanded((value) => !value)} style={styles.header}>
+        <View style={styles.icon}>
+          <Icon
+            name={interactive && expanded ? "ChevronDown" : error ? "TriangleAlert" : icon}
+            color={error ? theme.colors.statusDanger : expanded ? theme.colors.foreground : theme.colors.foregroundMuted}
+            size={12}
+          />
+        </View>
+        <Text style={styles.label} numberOfLines={1}>{label}</Text>
+        {secondaryLabel ? <Text style={styles.secondary} numberOfLines={1}>{secondaryLabel}</Text> : null}
+      </Pressable>
+      {expanded ? (
+        <View style={styles.detail}>
+          {children ?? <Text selectable style={styles.detailText}>{content}</Text>}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/client/components/PaseoTimelineItem.tsx

@@ -0,0 +1,147 @@
+import React, { useMemo, useState } from "react";
+import { Pressable, Text, View, type TextStyle, type ViewStyle } from "react-native";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import type { AgentTimelineEntry } from "./agent-conversation-types";
+import { PaseoStreamBadge } from "./PaseoStreamBadge";
+import { PaseoAssistantMessage } from "./PaseoAssistantMessage";
+import { PaseoShellDetail } from "./PaseoShellDetail";
+import { PaseoToolDetail } from "./PaseoToolDetail";
+import type { AgentCapabilityFlags } from "@getpaseo/protocol/agent-types";
+
+type RewindMode = "conversation" | "files" | "both";
+
+function toolPresentation(item: AgentTimelineEntry["item"]): { label: string; secondary?: string; detail?: unknown; icon: string } {
+  const detail = item.detail as Record<string, unknown> | undefined;
+  const detailType = detail?.type;
+  const rawName = String(item.name ?? "Tool");
+  const secondary = typeof detail?.command === "string" ? detail.command
+    : typeof detail?.filePath === "string" ? detail.filePath
+      : typeof detail?.query === "string" ? detail.query
+        : typeof detail?.url === "string" ? detail.url
+          : typeof detail?.branchName === "string" ? detail.branchName
+            : typeof detail?.description === "string" ? detail.description
+              : typeof detail?.label === "string" ? detail.label
+                : typeof detail?.path === "string" ? detail.path : undefined;
+  return {
+    label: item.name === "thinking" ? "Thinking"
+      : detailType === "edit" ? "Edit"
+        : detailType === "write" ? "Write"
+          : detailType === "shell" ? "Shell"
+            : detailType === "read" ? "Read"
+              : detailType === "search" ? "Search"
+                : detailType === "fetch" ? "Fetch"
+                  : detailType === "worktree_setup" ? "Worktree Setup"
+                    : detailType === "sub_agent" && typeof detail?.subAgentType === "string" ? detail.subAgentType
+                      : detailType === "sub_agent" ? "Task"
+                        : detailType === "plan" ? "Plan" : rawName,
+    secondary,
+    detail: detail ?? item.result ?? item.error,
+    icon: item.name === "thinking" ? "Brain"
+      : detailType === "edit" || detailType === "write" ? "Pencil"
+        : detailType === "shell" ? "SquareTerminal"
+          : detailType === "read" ? "Eye"
+            : detailType === "search" ? "Search"
+              : detailType === "sub_agent" ? "Bot" : "Wrench",
+  };
+}
+
+function formatDuration(durationMs: number): string {
+  const seconds = Math.max(0, durationMs) / 1000;
+  if (seconds < 60) return `${seconds < 10 ? seconds.toFixed(1) : Math.round(seconds)}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainder = Math.round(seconds % 60);
+  return remainder ? `${minutes}m ${remainder}s` : `${minutes}m`;
+}
+
+export function PaseoTimelineItem({ entry, theme, durationMs, completedAt, rewindCapabilities, rewinding = false, onRewind }: { entry: AgentTimelineEntry; theme: PluginSurfaceProps["theme"]; durationMs?: number; completedAt?: string; rewindCapabilities?: AgentCapabilityFlags | null; rewinding?: boolean; onRewind?: (messageId: string, text: string, mode: RewindMode) => void }) {
+  const item = entry.item;
+  const [copied, setCopied] = useState(false);
+  const [rewindMenuOpen, setRewindMenuOpen] = useState(false);
+  const copyText = async (text: string) => {
+    const clipboard = (navigator as unknown as { clipboard?: { writeText(value: string): Promise<void> } }).clipboard;
+    if (!clipboard) return;
+    await clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  };
+  const styles = useMemo(() => ({
+    userRoot: { flexDirection: "row", justifyContent: "flex-end", marginVertical: 16 } as ViewStyle,
+    userBubble: { maxWidth: "92%", alignSelf: "flex-end", backgroundColor: theme.colors.surface2, borderRadius: 20, borderTopRightRadius: 4, paddingHorizontal: 16, paddingVertical: 16, minWidth: 0, flexShrink: 1 } as ViewStyle,
+    userText: { color: theme.colors.foreground, fontSize: 15, lineHeight: 21 } as TextStyle,
+    error: { flexDirection: "row", gap: 8, paddingVertical: 10, alignItems: "flex-start" } as ViewStyle,
+    errorText: { flex: 1, color: theme.colors.statusDanger, fontSize: 14, lineHeight: 20 } as TextStyle,
+    compact: { flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 12 } as ViewStyle,
+    compactLine: { height: 1, flex: 1, backgroundColor: theme.colors.foregroundMuted + "2a" } as ViewStyle,
+    compactText: { color: theme.colors.foregroundMuted, fontSize: 13 } as TextStyle,
+    copyButton: { width: 26, height: 26, borderRadius: 6, alignItems: "center", justifyContent: "center" } as ViewStyle,
+    assistantFooter: { flexDirection: "row", alignItems: "center", minHeight: 28, marginTop: 4 } as ViewStyle,
+    timing: { color: theme.colors.foregroundMuted, fontSize: 11 } as TextStyle,
+    userActions: { width: "100%", minWidth: 0, alignItems: "flex-end", justifyContent: "flex-end", paddingRight: 4 } as ViewStyle,
+    actionRow: { flexDirection: "row", alignItems: "center", gap: 2 } as ViewStyle,
+    rewindMenu: { minWidth: 210, borderWidth: 1, borderColor: theme.colors.border, borderRadius: 8, backgroundColor: theme.colors.surface1, paddingVertical: 4, marginTop: 2 } as ViewStyle,
+    rewindMenuItem: { minHeight: 34, paddingHorizontal: 10, justifyContent: "center" } as ViewStyle,
+  }), [theme]);
+
+  const copyButton = (text: string) => <Pressable
+    accessibilityRole="button"
+    accessibilityLabel={copied ? "已复制" : "复制消息"}
+    onPress={() => void copyText(text)}
+    style={styles.copyButton}
+  ><Icon name={copied ? "Check" : "Copy"} color={theme.colors.foregroundMuted} size={14} /></Pressable>;
+
+  if (item.type === "user_message") {
+    const messageId = typeof item.messageId === "string" ? item.messageId : null;
+    const rewindItems: Array<{ mode: RewindMode; label: string }> = [];
+    if (rewindCapabilities?.supportsRewindConversation) rewindItems.push({ mode: "conversation", label: "回退会话" });
+    if (rewindCapabilities?.supportsRewindFiles) rewindItems.push({ mode: "files", label: "回退文件" });
+    if (rewindCapabilities?.supportsRewindBoth) rewindItems.push({ mode: "both", label: "回退会话和文件" });
+    return <View style={styles.userRoot}><View style={styles.userActions}><View style={styles.userBubble}><Text selectable style={styles.userText}>{item.text}</Text></View><View style={styles.actionRow}>{copyButton(String(item.text ?? ""))}{messageId && rewindItems.length ? <Pressable accessibilityRole="button" accessibilityLabel={rewinding ? "正在回退" : "回退到此消息"} disabled={rewinding} onPress={() => setRewindMenuOpen((open) => !open)} style={styles.copyButton}><Icon name={rewinding ? "LoaderCircle" : "Undo2"} color={theme.colors.foregroundMuted} size={14} /></Pressable> : null}</View>{rewindMenuOpen && messageId ? <View accessibilityLabel="回退选项" style={styles.rewindMenu}>{rewindItems.map((option) => <Pressable key={option.mode} accessibilityRole="button" accessibilityLabel={option.label} onPress={() => { setRewindMenuOpen(false); onRewind?.(messageId, String(item.text ?? ""), option.mode); }} style={styles.rewindMenuItem}><Text style={{ color: theme.colors.foreground, fontSize: 13 }}>{option.label}</Text></Pressable>)}</View> : null}</View></View>;
+  }
+  if (item.type === "assistant_message") return <View><PaseoAssistantMessage text={item.text} theme={theme} /><View style={styles.assistantFooter}>{copyButton(String(item.text ?? ""))}{durationMs != null ? <Text accessibilityLabel={`完成于 ${completedAt ?? entry.timestamp}`} style={styles.timing}>Worked for {formatDuration(durationMs)}</Text> : null}</View></View>;
+  if (item.type === "reasoning") return <PaseoStreamBadge label="Thinking" icon="Brain" detail={item.text} loading={item.status !== "ready"} theme={theme} />;
+  if (item.type === "tool_call") {
+    const presentation = toolPresentation(item);
+    const shellDetail = item.detail?.type === "shell" ? item.detail : null;
+    const semanticDetail = item.detail && item.detail.type !== "shell" ? item.detail : null;
+    return (
+      <PaseoStreamBadge
+        label={presentation.label}
+        secondaryLabel={presentation.secondary}
+        icon={presentation.icon}
+        detail={undefined}
+        loading={item.status === "running" || item.status === "executing"}
+        error={item.status === "failed"}
+        fullBleedDetail={Boolean(shellDetail || semanticDetail)}
+        theme={theme}
+      >
+        {shellDetail ? (
+          <PaseoShellDetail
+            command={String(shellDetail.command ?? "")}
+            output={shellDetail.output}
+            error={item.status === "failed" ? item.error : null}
+            theme={theme}
+          />
+        ) : semanticDetail ? <PaseoToolDetail detail={semanticDetail} theme={theme} /> : null}
+      </PaseoStreamBadge>
+    );
+  }
+  if (item.type === "todo") {
+    const done = item.items?.filter((todo: { completed?: boolean }) => todo.completed).length ?? 0;
+    const total = item.items?.length ?? 0;
+    const detail = item.items?.map((todo: { completed?: boolean; text: string }) => `${todo.completed ? "✓" : "○"} ${todo.text}`).join("\n");
+    return <PaseoStreamBadge label="Updated tasks" secondaryLabel={`${done}/${total}`} icon="ListChecks" detail={detail} theme={theme} />;
+  }
+  if (item.type === "error") return <View style={styles.error}><Icon name="CircleX" color={theme.colors.statusDanger} size={16} /><Text selectable style={styles.errorText}>{item.message}</Text></View>;
+  if (item.type === "notification") {
+    const color = item.level === "error"
+      ? theme.colors.statusDanger
+      : item.level === "warning"
+        ? theme.colors.statusWarning
+        : theme.colors.foregroundMuted;
+    return <View style={styles.error}><Icon name={item.level === "error" ? "CircleX" : item.level === "warning" ? "TriangleAlert" : "Info"} color={color} size={16} /><Text selectable style={[styles.errorText, { color }]}>{item.message}</Text></View>;
+  }
+  if (item.type === "plugin") return <PaseoStreamBadge label={`Plugin · ${item.kind}`} icon="Puzzle" detail={item.data} theme={theme} />;
+  if (item.type === "compaction") return <View style={styles.compact}><View style={styles.compactLine} /><Icon name="Scissors" color={theme.colors.foregroundMuted} size={12} /><Text style={styles.compactText}>上下文已压缩</Text><View style={styles.compactLine} /></View>;
+  return null;
+}

package/client/components/PaseoToolCallGroup.tsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from "react";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import type { AgentTimelineEntry } from "./agent-conversation-types";
+import { PaseoStreamBadge } from "./PaseoStreamBadge";
+import { PaseoTimelineItem } from "./PaseoTimelineItem";
+
+function toolKind(entry: AgentTimelineEntry): "edit" | "command" | "read" | "search" | "paseo" | "other" {
+  const item = entry.item;
+  const detailType = item.detail?.type;
+  const name = String(item.name ?? "").toLowerCase();
+  if (name.startsWith("paseo_") || name.startsWith("mcp__paseo__")) return "paseo";
+  if (detailType === "edit" || detailType === "write" || /apply[_-]?patch|edit|write/.test(name)) return "edit";
+  if (detailType === "shell" || /exec|command|shell|terminal/.test(name)) return "command";
+  if (detailType === "read" || /read|view[_-]?image/.test(name)) return "read";
+  if (detailType === "search" || /search|find|grep|glob|web_search|llm_context/.test(name)) return "search";
+  return "other";
+}
+
+function groupSummary(entries: AgentTimelineEntry[]): string {
+  const editedFiles = new Set<string>();
+  const readFiles = new Set<string>();
+  const counts = { edit: 0, command: 0, read: 0, search: 0, paseo: 0, other: 0 };
+  for (const entry of entries) {
+    const kind = toolKind(entry);
+    const path = entry.item.detail?.filePath ?? entry.item.detail?.path;
+    if (kind === "edit" && typeof path === "string") editedFiles.add(path);
+    else if (kind === "read" && typeof path === "string") readFiles.add(path);
+    else counts[kind] += 1;
+  }
+  counts.edit += editedFiles.size;
+  counts.read += readFiles.size;
+  const parts: string[] = [];
+  if (counts.edit) parts.push(`编辑了 ${counts.edit} 个文件`);
+  if (counts.command) parts.push(`运行了 ${counts.command} 个命令`);
+  if (counts.read) parts.push(`读取了 ${counts.read} 个文件`);
+  if (counts.search) parts.push(`搜索了 ${counts.search} 次`);
+  if (counts.other) parts.push(`使用了 ${counts.other} 个其他工具`);
+  if (counts.paseo) parts.push(`调用了 Paseo ${counts.paseo} 次`);
+  if (parts.length <= 1) return parts[0] ?? "使用了工具";
+  return `${parts.slice(0, -1).join("，")}并${parts.at(-1)}`;
+}
+
+export function PaseoToolCallGroup({ entries, theme }: { entries: AgentTimelineEntry[]; theme: PluginSurfaceProps["theme"] }) {
+  const summary = useMemo(() => groupSummary(entries), [entries]);
+  const loading = entries.some((entry) => entry.item.status === "running" || entry.item.status === "executing");
+  const error = entries.some((entry) => entry.item.status === "failed");
+  return (
+    <PaseoStreamBadge label={summary} icon="Wrench" loading={loading} error={error} sequenceEnd borderlessWhenExpanded theme={theme}>
+      {entries.map((entry) => <PaseoTimelineItem key={`${entry.seqStart}:${entry.item.type}`} entry={entry} theme={theme} />)}
+    </PaseoStreamBadge>
+  );
+}