@yuangc/vibe-review 1.0.0 → 1.1.0

package/client/edit-diff-data.test.ts

@@ -0,0 +1,21 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import type { ToolCallTimelineItem } from "@getpaseo/protocol/agent-types";
+import { editDiffFiles } from "./edit-diff-data.ts";
+
+const edit = (unifiedDiff?: string): ToolCallTimelineItem => ({
+  type: "tool_call", callId: "edit-1", name: "Edit", status: "completed", error: null,
+  detail: { type: "edit", filePath: "client/review.tsx", unifiedDiff },
+});
+
+test("Codex Edit patches use the existing split-diff file model", () => {
+  const files = editDiffFiles(edit("@@ -168 +168 @@\n-old\n+new"));
+  assert.equal(files?.[0]?.path, "client/review.tsx");
+  assert.equal(files?.[0]?.removed, 1);
+  assert.equal(files?.[0]?.added, 1);
+});
+
+test("edits without a usable patch keep Paseo's original card", () => {
+  assert.equal(editDiffFiles(edit()), null);
+  assert.equal(editDiffFiles(edit("tool result without diff markers")), null);
+});

package/client/edit-diff-data.ts

@@ -0,0 +1,12 @@
+import type { ToolCallTimelineItem } from "@getpaseo/protocol/agent-types";
+import { parseDiffFiles, type DiffFile } from "./diff.ts";
+
+/** Keep the native tool card until Paseo supplies an actual patch to render. */
+export function editDiffFiles(item: ToolCallTimelineItem): DiffFile[] | null {
+  if (item.detail.type !== "edit" || !item.detail.unifiedDiff?.trim()) return null;
+  if (!/^(?:diff --git |@@ |--- |\+\+\+ )/m.test(item.detail.unifiedDiff)) return null;
+  const files = parseDiffFiles(item.detail.unifiedDiff);
+  if (!files.length) return null;
+  if (files.length === 1 && files[0]!.path === "修改内容") files[0]!.path = item.detail.filePath;
+  return files;
+}

package/client/edit-diff.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import type { PluginTimelineItemProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { z } from "zod";
+import { parseDiffFiles } from "./diff";
+import { FileTypeIcon } from "./file-icons";
+import { SplitDiff } from "./split-diff";
+
+export const EDIT_DIFF_KIND = "edit-diff";
+export const editDiffSchema = z.object({ path: z.string(), diff: z.string(), status: z.string() });
+
+export function EditDiffItem({ item, theme }: PluginTimelineItemProps<z.output<typeof editDiffSchema>>) {
+  const [openFile, setOpenFile] = useState<number | null>(null);
+  const [hoveredFile, setHoveredFile] = useState<number | null>(null);
+  const [wrapLines, setWrapLines] = useState(false);
+  const files = parseDiffFiles(item.data.diff);
+  if (files.length === 1) files[0]!.path = item.data.path;
+
+  return <View>{files.map((file, index) => {
+    const open = openFile === index;
+    const active = open || hoveredFile === index;
+    return <View key={`${index}:${file.path}`}>
+      <View style={styles.row}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Edit ${file.path}，新增 ${file.added} 行，删除 ${file.removed} 行`}
+          accessibilityState={{ expanded: open }}
+          onHoverIn={() => setHoveredFile(index)}
+          onHoverOut={() => setHoveredFile((current) => current === index ? null : current)}
+          onPress={() => { setOpenFile(open ? null : index); setWrapLines(false); }}
+          style={styles.fileButton}
+        >
+          <View style={styles.iconSlot}>
+            <View style={active ? styles.chevronNudge : styles.pencilNudge}>
+              <Icon name={open ? "ChevronDown" : active ? "ChevronRight" : "Pencil"} size={12} color={active ? theme.colors.foreground : theme.colors.foregroundMuted} />
+            </View>
+          </View>
+          <Text style={[styles.editLabel, { color: active ? theme.colors.foreground : theme.colors.foregroundMuted }]}>Edit</Text>
+          <FileTypeIcon fileName={file.path} />
+          <Text style={styles.path} numberOfLines={1}>{file.path}</Text>
+          {/* TODO(Paseo): Add a file-page shortcut here when timeline renderer props expose a supported openFile navigation API. */}
+        </Pressable>
+        {open ? <Pressable accessibilityRole="button" accessibilityLabel="折行显示" accessibilityState={{ selected: wrapLines }} onPress={() => setWrapLines((value) => !value)} style={styles.wrapButton}>
+          <Icon name="WrapText" size={14} color={theme.colors.foregroundMuted} />
+        </Pressable> : null}
+        <Text style={styles.added}>+{file.added}</Text>
+        <Text style={styles.removed}>-{file.removed}</Text>
+      </View>
+      {open ? <SplitDiff file={file} wrapLines={wrapLines} /> : null}
+    </View>;
+  })}</View>;
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 30, marginHorizontal: -13, paddingHorizontal: 8 },
+  fileButton: { flex: 1, minWidth: 0, minHeight: 30, flexDirection: "row", alignItems: "center", gap: 7 },
+  iconSlot: { width: 22, height: 22, alignItems: "center", justifyContent: "center", marginRight: -3 },
+  pencilNudge: { marginLeft: -1 },
+  chevronNudge: { marginLeft: -4, transform: [{ scale: 1.3 }] },
+  editLabel: { fontSize: 14 },
+  path: { fontSize: 14, flexShrink: 1, color: "#0133b3" },
+  wrapButton: { width: 20, height: 20, alignItems: "center", justifyContent: "center" },
+  added: { color: "#077d18", fontSize: 14, fontWeight: "600" },
+  removed: { color: "#b91c1c", fontSize: 14, fontWeight: "600" },
+});

package/client/file-tree.tsx

@@ -4,6 +4,7 @@ import { Icon } from "@getpaseo/plugin/client/react-native";
 import type { DiffFile } from "./diff";
 import { FileTypeIcon } from "./file-icons";
 import { SplitDiff } from "./split-diff";
+import { WrapToggleButton } from "./wrap-toggle";
 
 type FolderNode = { kind: "folder"; name: string; path: string; count: number; children: TreeNode[] };
 type FileNode = { kind: "file"; name: string; file: DiffFile; index: number };
@@ -51,7 +52,6 @@ export function FileTree({ files, collapseFoldersInitially = false }: { files: D
   });
   const [openFile, setOpenFile] = useState<number | null>(null);
   const [wrapLines, setWrapLines] = useState(false);
-  const [showWrapTooltip, setShowWrapTooltip] = useState(false);
   const nodes = buildFileTree(files);
 
   const toggleFolder = (path: string) => setCollapsed((current) => {
@@ -90,7 +90,6 @@ export function FileTree({ files, collapseFoldersInitially = false }: { files: D
           onPress={() => {
             setOpenFile(isOpen ? null : index);
             setWrapLines(false);
-            setShowWrapTooltip(false);
           }}
           style={styles.fileSelect}
         >
@@ -98,20 +97,7 @@ export function FileTree({ files, collapseFoldersInitially = false }: { files: D
           <FileTypeIcon fileName={node.name} />
           <Text style={[styles.fileName, fileNameColors[file.status]]} numberOfLines={1}>{node.name}</Text>
         </TouchableOpacity>
-        {isOpen ? <View style={styles.fileActions}>
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel="折行显示"
-            aria-pressed={wrapLines}
-            onHoverIn={() => setShowWrapTooltip(true)}
-            onHoverOut={() => setShowWrapTooltip(false)}
-            onPress={() => setWrapLines((current) => !current)}
-            style={[styles.actionButton, wrapLines && styles.actionButtonActive, showWrapTooltip && styles.actionButtonHover]}
-          >
-            <Icon name="WrapText" size={13} color="#64748b" />
-          </Pressable>
-          {showWrapTooltip ? <View style={styles.tooltip}><Text style={styles.tooltipText}>折行显示</Text></View> : null}
-        </View> : null}
+        {isOpen ? <View style={styles.fileActions}><WrapToggleButton active={wrapLines} onToggle={() => setWrapLines((current) => !current)} /></View> : null}
         <Text style={styles.added}>+{file.added}</Text>
         <Text style={styles.removed}>-{file.removed}</Text>
       </View>
@@ -127,11 +113,6 @@ const styles = StyleSheet.create({
   selected: { backgroundColor: "#e8f0ff", zIndex: 3 },
   fileSelect: { flex: 1, minHeight: 34, flexDirection: "row", alignItems: "center", gap: 6 },
   fileActions: { flexDirection: "row-reverse", alignItems: "center", gap: 4, position: "relative", zIndex: 2 },
-  actionButton: { width: 20, height: 20, borderRadius: 4, alignItems: "center", justifyContent: "center" },
-  actionButtonActive: { backgroundColor: "#cbcbcd" },
-  actionButtonHover: { backgroundColor: "#e5e7eb" },
-  tooltip: { position: "absolute", bottom: 24, right: 0, width: 72, paddingHorizontal: 9, paddingVertical: 5, borderRadius: 5, backgroundColor: "#1e293b", zIndex: 4 },
-  tooltipText: { color: "#fff", fontSize: 11, textAlign: "center" },
   folderName: { color: "#111827", fontSize: 12, fontWeight: "600", flexShrink: 1 },
   count: { color: "#6b7280", fontSize: 11 },
   fileIndent: { width: 15 },