@yuangc/vibe-review 0.0.0-stage → 0.0.0

package/client/clarify.ts

@@ -0,0 +1,127 @@
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { clarifyRpc } from "../shared/clarify";
+
+type Selection = { input: HTMLTextAreaElement; fullText: string; start: number; end: number; text: string };
+
+/** HACK(Paseo 0.11): the plugin API has no composer selection or draft replacement capability.
+ * This web-only adapter can be removed when Paseo exposes both to composer pills. */
+export function createClarifyController(client: PluginClientContext) {
+  if (typeof document === "undefined") return { open: (_agentId: string) => {}, dispose: () => {} };
+  let selection: Selection | null = null;
+  let card: HTMLDivElement | null = null;
+  let requestId = 0;
+
+  const isComposer = (input: Element | null): input is HTMLTextAreaElement =>
+    input instanceof HTMLTextAreaElement && input.hasAttribute("data-composer-input");
+  const visible = (input: HTMLTextAreaElement) => {
+    const box = input.getBoundingClientRect();
+    return box.width > 0 && box.height > 0;
+  };
+  const capture = () => {
+    const input = document.activeElement;
+    if (!isComposer(input) || !visible(input)) return;
+    const { selectionStart: start, selectionEnd: end, value: fullText } = input;
+    if (start < end) selection = { input, fullText, start, end, text: fullText.slice(start, end) };
+  };
+  const findInput = () => Array.from(document.querySelectorAll<HTMLTextAreaElement>("textarea[data-composer-input]")).find(visible) ?? null;
+  const insertAboveComposer = (input: HTMLTextAreaElement, content: HTMLDivElement) => {
+    // HACK(Paseo 0.11): insert into the host layout until composer slots are public.
+    const candidates = Array.from(document.querySelectorAll<HTMLElement>('button,[role="button"]'));
+    const trigger = candidates.find((node) => node.textContent?.trim() === "澄清表达" && node.getBoundingClientRect().width > 0);
+    if (!trigger) return false;
+    let common: HTMLElement | null = input.parentElement;
+    while (common && !common.contains(trigger)) common = common.parentElement;
+    if (!common) return false;
+    let composerWidth: string | null = null;
+    for (let node = input.parentElement; node && node !== common; node = node.parentElement) {
+      const maxWidth = window.getComputedStyle(node).maxWidth;
+      if (maxWidth.endsWith("px") && Number.parseFloat(maxWidth) > 0) {
+        composerWidth = maxWidth;
+        break;
+      }
+    }
+    content.style.maxWidth = composerWidth ?? `${input.getBoundingClientRect().width}px`;
+    content.style.marginInline = "auto";
+    let inputBranch: HTMLElement = input;
+    while (inputBranch.parentElement && inputBranch.parentElement !== common) inputBranch = inputBranch.parentElement;
+    common.insertBefore(content, inputBranch);
+    const gapAbove = content.getBoundingClientRect().top - trigger.getBoundingClientRect().bottom;
+    content.style.marginBottom = `${Math.max(0, Math.round(gapAbove))}px`;
+    return true;
+  };
+  const close = () => { requestId++; card?.remove(); card = null; };
+  const element = <K extends keyof HTMLElementTagNameMap>(tag: K, text: string, style = "") => {
+    const node = document.createElement(tag);
+    node.textContent = text;
+    node.style.cssText = style;
+    return node;
+  };
+  const button = (label: string, onClick: () => void, primary = false) => {
+    const isClose = label === "×";
+    const border = isClose ? "none" : `1px solid ${primary ? "#176b42" : "#d1d5db"}`;
+    const closeStyle = isClose ? "position:absolute;top:6px;right:8px;width:32px;height:32px;padding:0;font-size:24px;line-height:1;" : "padding:6px 11px;";
+    const node = element("button", label, `cursor:pointer;border:${border};border-radius:7px;${closeStyle}background:${primary ? "#176b42" : "transparent"};color:${primary ? "#fff" : "inherit"};font:inherit;${isClose ? "font-size:24px;" : ""}`);
+    node.type = "button";
+    if (isClose) node.setAttribute("aria-label", "关闭建议");
+    node.addEventListener("click", onClick);
+    return node;
+  };
+  const addLine = (text: string, muted = false) => card?.append(element("div", text, `white-space:pre-wrap;overflow-wrap:anywhere;${muted ? "opacity:.7;font-size:12px;" : ""}`));
+  const open = (agentId: string) => {
+    capture();
+    close();
+    const chosen = selection && selection.input.isConnected && visible(selection.input) ? selection : null;
+    const input = chosen?.input ?? findInput();
+    if (!input) return;
+    const dark = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+    card = document.createElement("div");
+    card.dataset.vibeClarify = "";
+    card.style.cssText = `position:relative;box-sizing:border-box;width:100%;max-height:45vh;overflow:auto;padding:14px 48px 14px 16px;display:flex;flex-direction:column;gap:9px;border-radius:9px;background:${dark ? "#20252c" : "#f8fafc"};color:${dark ? "#f8fafc" : "#1f2937"};font:13px system-ui,sans-serif`;
+    if (!insertAboveComposer(input, card)) { card = null; return; }
+    card.append(button("×", close));
+    if (!chosen || chosen.fullText !== input.value) {
+      addLine("先在消息输入框中选中要澄清的文字，再点击这个按钮。", true);
+      return;
+    }
+    addLine(`原文：${chosen.text}`, true);
+    addLine("正在整理措辞…", true);
+    const id = ++requestId;
+    void client.rpc(clarifyRpc, { agentId, text: chosen.text }).then((result) => {
+      if (!card || id !== requestId) return;
+      card.lastElementChild?.remove();
+      addLine(result.suggestion);
+      if (result.reason) addLine(result.reason, true);
+      const actions = element("div", "", "display:flex;gap:8px;align-items:center");
+      actions.append(button("采用建议", () => {
+        if (!chosen.input.isConnected || chosen.input.value !== chosen.fullText) {
+          addLine("输入内容已变化，请重新选中文字生成建议。", true);
+          return;
+        }
+        const next = chosen.fullText.slice(0, chosen.start) + result.suggestion + chosen.fullText.slice(chosen.end);
+        const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+        setter?.call(chosen.input, next);
+        chosen.input.dispatchEvent(new Event("input", { bubbles: true }));
+        chosen.input.focus();
+        chosen.input.setSelectionRange(chosen.start + result.suggestion.length, chosen.start + result.suggestion.length);
+        selection = null;
+        close();
+      }, true), button("忽略", close));
+      card.append(actions);
+    }, (error: unknown) => {
+      if (!card || id !== requestId) return;
+      card.lastElementChild?.remove();
+      addLine(error instanceof Error ? error.message : String(error));
+    });
+  };
+  document.addEventListener("selectionchange", capture);
+  document.addEventListener("select", capture, true);
+  document.addEventListener("keyup", capture, true);
+  document.addEventListener("mouseup", capture, true);
+  return { open, dispose: () => {
+    close();
+    document.removeEventListener("selectionchange", capture);
+    document.removeEventListener("select", capture, true);
+    document.removeEventListener("keyup", capture, true);
+    document.removeEventListener("mouseup", capture, true);
+  } };
+}

package/client/commit-preview.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useRef, useState } from "react";
+import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { useRpc, type PluginTimelineItemProps } from "@getpaseo/plugin/client";
+import type { z } from "zod";
+import { cancelPiCommitRpc, commitPreviewSchema, confirmPiCommitRpc, getPiCommitPreviewRpc } from "../shared/commit";
+import { parseDiffFiles } from "./diff";
+import { FileTree } from "./file-tree";
+
+export function CommitPreviewItem({ item, agentId }: PluginTimelineItemProps<z.infer<typeof commitPreviewSchema>>) {
+  const [diff, setDiff] = useState<string | null>(null);
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [done, setDone] = useState("");
+  const [showPrompt, setShowPrompt] = useState(false);
+  const [previewRequest, setPreviewRequest] = useState(0);
+  const [previewState, setPreviewState] = useState<"loading" | "pending" | "finished" | "stale" | "unavailable">("loading");
+  const [messageFocused, setMessageFocused] = useState(false);
+  const getPreview = useRpc(getPiCommitPreviewRpc);
+  const getPreviewRef = useRef(getPreview);
+  getPreviewRef.current = getPreview;
+  const confirm = useRpc(confirmPiCommitRpc);
+  const cancel = useRpc(cancelPiCommitRpc);
+  const { proposalId, message, files, promptPreview } = item.data;
+  const [editedMessage, setEditedMessage] = useState(message);
+  const validMessage = editedMessage.trim().length > 0 && editedMessage.trim().length <= 80;
+  const submitted = /^已提交：([0-9a-f]{7,40})\s+([\s\S]+)$/.exec(done);
+
+  useEffect(() => {
+    let active = true;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const load = (attempt: number) => {
+      void getPreviewRef.current({ agentId, proposalId }).then(
+        (result) => {
+          if (!active) return;
+          setError("");
+          setPreviewState(result.state);
+          if (result.state === "finished") setDone(result.result ?? "已结束提交预览。");
+          if (result.state === "pending") setDiff(result.diff ?? null);
+        },
+        (reason: unknown) => {
+          if (!active) return;
+          const message = reason instanceof Error ? reason.message : String(reason);
+          if (attempt < 2 && /Transport closed|connection closed/i.test(message)) timer = setTimeout(() => load(attempt + 1), 500 * (attempt + 1));
+          else { setPreviewState("unavailable"); setError(message); }
+        },
+      );
+    };
+    load(0);
+    return () => { active = false; if (timer) clearTimeout(timer); };
+  }, [agentId, proposalId, previewRequest]);
+
+  useEffect(() => {
+    if (previewState !== "pending") return;
+    let active = true;
+    const refresh = () => {
+      void getPreviewRef.current({ agentId, proposalId }).then((result) => {
+        if (!active) return;
+        if (result.state === "finished") {
+          setDone(result.result ?? "已结束提交预览。");
+          setPreviewState("finished");
+        } else if (result.state === "stale") {
+          setPreviewState("stale");
+        } else if (result.diff) {
+          setDiff(result.diff);
+        }
+      }, () => { /* Retain the visible preview and retry after reconnect. */ });
+    };
+    const timer = setInterval(refresh, 3_000);
+    return () => { active = false; clearInterval(timer); };
+  }, [agentId, proposalId, previewState]);
+
+  const submit = () => {
+    if (busy || previewState !== "pending" || !diff || !validMessage) return;
+    setBusy(true);
+    void confirm({ agentId, proposalId, message: editedMessage.trim() }).then(
+      (result) => { setDone(`已提交：${result.summary}`); setPreviewState("finished"); },
+      (reason: unknown) => setError(reason instanceof Error ? reason.message : String(reason)),
+    ).finally(() => setBusy(false));
+  };
+  const dismiss = () => {
+    if (busy) return;
+    setBusy(true);
+    void cancel({ agentId, proposalId }).then(
+      () => { setDone("已取消提交。"); setPreviewState("finished"); },
+      (reason: unknown) => setError(reason instanceof Error ? reason.message : String(reason)),
+    ).finally(() => setBusy(false));
+  };
+
+  const promptToggle = promptPreview ? <TouchableOpacity accessibilityRole="button" accessibilityLabel={showPrompt ? "收起 commit 任务提示词" : "查看 commit 任务提示词"} onPress={() => setShowPrompt((value) => !value)} style={styles.promptToggle}>
+    <Text style={styles.promptToggleText}>{showPrompt ? "收起 commit 任务提示词" : "查看 commit 任务提示词"}</Text>
+  </TouchableOpacity> : null;
+
+  if (previewState === "loading" || previewState === "stale") return null;
+  if (previewState === "unavailable") return <View style={styles.card}>
+    <Text style={styles.error}>暂时无法读取提交预览。{error}</Text>
+    <TouchableOpacity accessibilityRole="button" onPress={() => { setError(""); setPreviewState("loading"); setPreviewRequest((value) => value + 1); }} style={styles.retry}>
+      <Text style={styles.promptToggleText}>重新读取预览</Text>
+    </TouchableOpacity>
+  </View>;
+
+  return <View style={styles.card}>
+    {done ? submitted ? <>
+      <Text selectable style={styles.done}>已提交 · {submitted[1]}</Text>
+      <Text selectable style={styles.doneMessage}>{submitted[2]}</Text>
+    </> : <Text selectable style={styles.done}>{done}</Text> : <>
+      <Text style={styles.heading}>提交预览</Text>
+      <Text style={styles.label}>Commit message</Text>
+      <TextInput accessibilityLabel="Commit message" value={editedMessage} onChangeText={setEditedMessage} onFocus={() => setMessageFocused(true)} onBlur={() => setMessageFocused(false)} editable={!busy} maxLength={80} selectTextOnFocus style={[styles.messageInput, messageFocused && styles.messageInputFocused]} />
+      {!validMessage ? <Text style={styles.error}>请输入不超过 80 个字符的提交标题。</Text> : null}
+      <Text style={styles.files}>{files.length} 个文件 · 请展开查看具体 diff</Text>
+      {diff === null && !error ? <Text style={styles.muted}>正在读取 diff…</Text> : null}
+      {diff ? <View style={styles.diff}><FileTree files={parseDiffFiles(diff)} /></View> : null}
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+      {error ? <TouchableOpacity accessibilityRole="button" onPress={() => { setError(""); setPreviewRequest((value) => value + 1); }} style={styles.retry}><Text style={styles.promptToggleText}>重新读取预览</Text></TouchableOpacity> : null}
+    </>}
+    {!done || promptToggle ? <View style={styles.actions}>
+      {promptToggle}
+      {!done ? <View style={styles.actionButtons}>
+        <TouchableOpacity onPress={dismiss} disabled={busy} style={styles.cancel}><Text style={styles.cancelText}>取消</Text></TouchableOpacity>
+        <TouchableOpacity onPress={submit} disabled={busy || !diff || Boolean(error) || !validMessage} style={[styles.confirm, (busy || !diff || error || !validMessage) ? styles.disabled : null]}><Text style={styles.confirmText}>{busy ? "处理中…" : "确认提交"}</Text></TouchableOpacity>
+      </View> : null}
+    </View> : null}
+    {showPrompt && promptPreview ? <ScrollView style={styles.promptBox} nestedScrollEnabled><Text selectable style={styles.promptText}>{promptPreview}</Text></ScrollView> : null}
+  </View>;
+}
+
+const styles = StyleSheet.create({
+  card: { alignSelf: "stretch", backgroundColor: "#fff", borderRadius: 10, borderWidth: StyleSheet.hairlineWidth, borderColor: "#d8dee6", padding: 14, gap: 10 },
+  heading: { color: "#111827", fontSize: 15, fontWeight: "700" },
+  label: { color: "#6b7280", fontSize: 11, fontWeight: "600" },
+  messageInput: { color: "#1f2937", fontSize: 13, lineHeight: 19, borderWidth: 1, borderColor: "#d8dee6", borderRadius: 8, paddingHorizontal: 10, paddingVertical: 8, outlineWidth: 0 },
+  messageInputFocused: { borderColor: "#15803d" },
+  files: { color: "#6b7280", fontSize: 12 },
+  diff: { backgroundColor: "#f8fafc", borderRadius: 8, overflow: "hidden" },
+  muted: { color: "#6b7280", fontSize: 12 },
+  error: { color: "#b91c1c", fontSize: 12 },
+  done: { color: "#166534", fontSize: 13 },
+  doneMessage: { color: "#166534", fontSize: 13, lineHeight: 20 },
+  actions: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 },
+  actionButtons: { flexDirection: "row", alignItems: "center", gap: 8, marginLeft: "auto" },
+  cancel: { minHeight: 36, paddingHorizontal: 15, justifyContent: "center", borderRadius: 8, backgroundColor: "#f3f4f6" },
+  cancelText: { color: "#374151", fontSize: 13, fontWeight: "600" },
+  confirm: { minHeight: 36, paddingHorizontal: 15, justifyContent: "center", borderRadius: 8, backgroundColor: "#4f46e5" },
+  confirmText: { color: "#fff", fontSize: 13, fontWeight: "600" },
+  disabled: { opacity: 0.55 },
+  promptToggle: { minHeight: 36, justifyContent: "center" },
+  promptToggleText: { color: "#4f46e5", fontSize: 12, fontWeight: "600" },
+  promptBox: { maxHeight: 320, backgroundColor: "#f8fafc", borderRadius: 8, padding: 10 },
+  promptText: { color: "#374151", fontFamily: "monospace", fontSize: 11, lineHeight: 17 },
+  retry: { alignSelf: "flex-start", paddingVertical: 4 },
+});

package/client/commit-result.tsx

@@ -0,0 +1,8 @@
+import type { PluginTimelineItemProps } from "@getpaseo/plugin/client";
+import type { z } from "zod";
+import { commitResultSchema } from "../shared/commit";
+
+export function CommitResultItem(_props: PluginTimelineItemProps<z.infer<typeof commitResultSchema>>) {
+  // Keep the timeline marker for recentCommitContext, but the preview card already shows the result.
+  return null;
+}

package/client/composer-fill.ts

@@ -0,0 +1,18 @@
+/** HACK(Paseo web): timeline renderers do not have a composer draft setter. */
+export function fillVisibleComposer(text: string): boolean {
+  if (typeof document === "undefined") return false;
+  const inputs = Array.from(document.querySelectorAll<HTMLTextAreaElement>("textarea[data-composer-input]")).filter((input) => {
+    const rect = input.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+  });
+  // Multiple visible agent panes make a document-wide lookup ambiguous.
+  if (inputs.length !== 1) return false;
+  const input = inputs[0];
+  const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+  if (!setter) return false;
+  setter.call(input, text);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  input.focus();
+  input.setSelectionRange(text.length, text.length);
+  return true;
+}

package/client/connector-masks.ts

@@ -0,0 +1,5 @@
+// Alpha masks for native trapezoid connectors; tintColor supplies the diff tone.
+export const topRising = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAD70lEQVR42u3UoQEAMAzDsG7//9yRfWGJhAf47O7OzBkg5/5dV0A3ACIA8QCIAMQDIAIQD4AIQDwAIgDxAIgAxAMgAhAPgAhAPAAiAPEAiADEAyACEA+ACEA8ACIA8QCIAMQDIAIQD4AIQDwAIgDxAIgAxAMgAhAPgAhAPAAiAPEAiADEAyACEA+ACEA8ACIA8QCIAMQDIAIQD4AIQDwAIgDxAIgAxAMgAhAPgAhAPAAiAPEAiADEAyACEA+ACEA8ACIA8QCIAMQDIAIQD4AIQDwAIgDxAIgAxAMgAhAPgAhAPAAiAPEAiADEAyACEA+ACEA8ACIA8QCIAMQDIAIQD4AIQDwAIgDxAIgAxAMgAhAPgAhAPAAiAPEAiADEAyACEA+ACEA8ACIA8QCIAALgAhFAAEQABEAEQABEAARABEAARAAEQARAAEQABEAEQABEAARABEAARAAEQARAAEQABEAEQABEAARABEAARAAEQARAAEQABEAEQABEAARABEAARAAEQARAAEQABEAEQABEAARABEAARAAEQARAAEQABEAEQABEAARABEAARAAEQAQQAEQAAUAEEABEAAFABBAARAABQAQQAEQAAUAEEABEAAFABBAARAABQAQQAEQAAUAEEABEAAFABBAARAABQAQQAEQAAUAEEABEAAFABBAARAABQAQQAEQAAUAEEABEAAFABBAARAABQAQQAEQAAUAEEABEAAFABBAARAABQAQQAERAAEAEBABEQABABAQAREAAQAQEAERAAEAEBABEQABABAQAREAAQAQEAERAAEAEBAARQAAQAQQAEUAAEAEEABFAABABBAARQAAQAQQAEUAAEAEEABFAABABBAARQAAQAQQAEUAAEAEEABFAABABBAARQAAQAQQAEUAAEAEEABFAABABAQAREAAQAQEAERAAEAEBABEQABABAQAREAAQAQEAERAAEAEBABEQABABAQAREAAQAQEAERAAEAEBABEQABABAQAREAAQAQEAERAAEAEBABEQABABAQAREAAQAQEAERAAEAEBABEQABABAQAREAAQAQEAERAAEAEBABEQABABAYB0BAQAwhEQAAhHQAAgHAEBgHAEBADCERAACEdAACAcAQGAcAQEAMIREAAIR0AAIBwBAYBwBAQAwhEQAAhHQAAgHAEBgHAEBADCERAACEdAACAcAQGAcAQEAMIREAAIR0AAIBwBAYBwBAQAwhEQAAhHQAAgHAEBgHAEBADCERAACEdAACAcAQGAcAQEAMIREAAIR0AAIBwBAYBwBAQAwhEQAAhHQAAgHAEBgHAEBADCERAACEdAACAcAQGAcAQe1aIEDeUBl8oAAAAASUVORK5CYII=";
+export const topFalling = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAD9UlEQVR42u3UAQ3AQBDDsG78Od8DiQ2hUvrd3YCk+20Azfi3zQFANH4HAOH4HQCE43cAEI7fAUA4fgcA4fgdAITjdwAQjt8BQDh+BwDh+B0AhON3ABCO3wFAOH4HAOH4HQCE43cAEI7fAUA4fgcA4fgdAITjdwAQjt8BQDh+BwDh+B0AhON3ABCO3wFAOH4HAOH4HQCE43cAEI7fAUA4fgcA4fgdAITjdwAQjt8BQDh+BwDh+B0AhON3ABCO3wFAOH4HAOH4HQCE43cAEI7fAUA4fgcA4fgdAITjdwAQjt8BQDh+BwDh+B0AhON3ABCO3wFAOH4HAOH4HQCE43cAEI7fAUA4fgcA4fgdAITjdwAQjt8BQDh+BwDh+B0AhON3ABCO3wFAOH4HAOH4HQDij3MAiN8BgPgdAIjfAYD4HQCI3wGA+B0AiN8BgPgdAIjfAYD4HQCI3wGA+B0AiN8BgPgdAIjfAYD4HQCI3wGA+B0AiN8BgPgdAIjfAYD4HQCI3wEgfhwA4scBIH4cAOLHASB+HADixwEgfhwA4scBIH4cAOLHASB+HADixwEgfhwA4ncAJkD8DgDE7wBA/A4AxO8AQPwOAMTvAED8DgDE7wBA/A4AxO8AED8OAPHjABA/DgDx4wAQPw4A8eMAED8OAPHjABA/DgDx4wAQPw4A8eMAED8OAPHjABA/DgDx4wAQPw4A8eMAED8OAPHjABA/DgDx4wAQPw5A/OAAxA8OQPzgAMSPA0D8OADEjwNA/DgAxI8DQPw4AMSPA0D8OADEjwNA/DgAxI8DQPw4AMSPA0D8OADEjwNA/DgAxI8DQPw4AMSPA0D8OADxmwAHIH5wAOIHByB+cADiBwcgfnAA4gcHIH5wAOIHByB+cADiBwcgfnAA4gcHIH5wAOIHByB+cADiBwcgfhwA4scBIH4cAOLHASB+HADixwEgfhyA+MEBiB8cgPjBAYgfHID4wQGIHxyA+MEBiB8cgPjBAYgfHID4wQGIHxyA+MEBiB8cgPjBAYgfHID4wQGIHxyA+MEBiB8cgPjBAYgfHID4oX4A4ofoAYgfogcgfogegPghegDih+gBiB+iByB+iB6A+CF6AOKH6AGIH6IHIH6IHoD4IXoA4ofoAYgfogcgfogegPghegDih+gBiB+iByB+iB6A+CF6AOKH6AGIH6IHIH6IHoD4IXoA4ofoAYgfogcgfogegPghegDih+gBiB+iByB+iB6A+CF6AOKH6AGIH6IHIH6IHoD4IXoA4ofoAYgfogcgfogegPghegDih+gBiB+iByB+iB6A+CF6AOKH6AGIH6IHIH6IHoD4IXoA4ofoAYgfogcgfoh61G4EDCKlQvoAAAAASUVORK5CYII=";
+export const bottomRising = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAD7ElEQVR42u3UQQHAQBCEsLn697wVQiKBB+/ubkDSt+3JAN0BzASgPQATgPgATADiAzABiA/ABCA+ABOA+ABMAOIDMAGID8AEID4AE4D4AEwA4gMwAYgPwAQgPgATgPgATADiAzABiA/ABCA+ABOA+ABMAOIDMAGID8AEID4AE4D4AEwA4gMwAYgPwAQgPgATgPgATADiAzABiA/ABCA+ABOA+ABMAOIDMAGID8AEID4AE4D4AEwA4gMwAYgPwAQgPgATgPgATADiAzABiA/ABCA+ABOA+ABMAOIDMAGID8AEID4AE4D4AEwA4gMwAYgPwAQgPgATgPgATADiAzABiA/ABCA+ABOA+ABMAOIDMAGID8AEID4AE4D4AEwA4gMwAYgPwAQgPgATgPgATAADkMAEMAATAAMwATAAEwADMAEwABMAAzABMAATAAMwATAAEwADMAEwABMAAzABMAATAAMwATAAEwADMAEwABMAAzABMAATAAMwATAAEwADMAEwABMAAzABMAATAAMwATAAEwADMAEwABMAAzABMAATAAMwATAAEwADMAEwABMAAzABDAATwAAwAQwAE8AAMAEMABPAADABDAATwAAwAQwAE8AAMAEMABPAADABDAATwAAwAQwAE8AAMAEMABPAADABDAATwAAwAQwAE8AAMAEMABPAADABDAATwAAwAQwAE8AAMAEMABPAADABDAATwAAwAQwAE8AAMAEMABPAADABDAATMAAwAQMAEzAAMAEDABMwADABAwATMAAwAQMAEzAAMAEDABMwADABAwATMAAwAQPABDAATAADwAQwAEwAA8AEMABMAAPABDAATAADwAQwAEwAA8AEMABMAAPABDAATAADwAQwAEwAA8AEMABMAAPABDAATAADwAQwAEwAA8AEMABMwADABAwATMAAwAQMAEzAAMAEDABMwADABAwATMAAwAQMAEzAAMAEDABMwADABAwATMAAwAQMAEzAAMAEDABMwADABAwATMAAwAQMAEzAAMAEDABMwADABAwATMAAwAQMAEzAAMAEDABMwADABAwATMAAwAQMAEzAAMAEDABMwAAgPQEDgPAEDADCEzAACE/AACA8AQOA8AQMAMITMAAIT8AAIDwBA4DwBAwAwhMwAAhPwAAgPAEDgPAEDADCEzAACE/AACA8AQOA8AQMAMITMAAIT8AAIDwBA4DwBAwAwhMwAAhPwAAgPAEDgPAEDADCEzAACE/AACA8AQOA8AQMAMITMAAIT8AAIDwBA4DwBAwAwhMwAAhPwAAgPAEDgPAEDADCEzAACE/AACA8AQOA8AQMAMITMAAIT+AHvfQG+2PA58QAAAAASUVORK5CYII=";
+export const bottomFalling = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAD9ElEQVR42u3WgQ0AIAzDMOD/n8shsU+YlGp32w6Q9JwAsq4BgGj8PgAIx28AIBy/AYBw/AYAwvEbAAjHbwAgHL8BgHD8BgDC8RsACMdvACAcvwGAcPwGAMLxGwAIx28AIBy/AYBw/AYAwvEbAAjHbwAgHL8BgHD8BgDC8RsACMdvACAcvwGAcPwGAMLxGwAIx28AIBy/AYBw/AYAwvEbAAjHbwAgHL8BgHD8BgDC8RsACMdvACAcvwGAcPwGAMLxGwAIx28AIBy/AYBw/AYAwvEbAAjHbwAgHL8BgHD8BgDC8RsACMdvACAcvwGAcPwGAMLxGwAIx28AIBy/AYBw/AYAwvEbAAjHbwAgHL8BgHD8BgDC8RsACMdvACAcvwGAcPwGAMLxGwAIx28AIBy/AUD8cQYA8RsAEL8BAPEbABC/AQDxGwAQvwEA8RsAEL8BAPEbABC/AQDxGwAQvwEA8RsAEL8BAPEbABC/AQDxGwAQvwEA8RsAEL8BAPEbABC/AQDxGwDEjwFA/BgAxI8BQPwYAMSPAUD8GADEjwFA/BgAxI8BQPwYAMSPAUD8GADEjwFA/AbACRC/AQDxGwAQvwEA8RsAEL8BAPEbABC/AQDxGwAQvwEA8RsAxI8BQPwYAMSPAUD8GADEjwFA/BgAxI8BQPwYAMSPAUD8GADEjwFA/BgAxI8BQPwYAMSPAUD8GADEjwFA/BgAxI8BQPwYAMSPAUD8GADEjwEQPxgA8YMBED8YAPFjABA/BgDxYwAQPwYA8WMAED8GAPFjABA/BgDxYwAQPwYA8WMAED8GAPFjABA/BgDxYwAQPwYA8WMAED8GAPFjABA/BkD8ToABED8YAPGDARA/GADxgwEQPxgA8YMBED8YAPGDARA/GADxgwEQPxgA8YMBED8YAPGDARA/GADxgwEQPwYA8WMAED8GAPFjABA/BgDxYwAQPwZA/GAAxA8GQPxgAMQPBkD8YADEDwZA/GAAxA8GQPxgAMQPBkD8YADEDwZA/GAAxA8GQPxgAMQPBkD8YADEDwZA/GAAxA8GQPxgAMQPBkD8UB8A8UN0AMQP0QEQP0QHQPwQHQDxQ3QAxA/RARA/RAdA/BAdAPFDdADED9EBED9EB0D8EB0A8UN0AMQP0QEQP0QHQPwQHQDxQ3QAxA/RARA/RAdA/BAdAPFDdADED9EBED9EB0D8EB0A8UN0AMQP0QEQP0QHQPwQHQDxQ3QAxA/RARA/RAdA/BAdAPFDdADED9EBED9EB0D8EB0A8UN0AMQP0QEQP0QHQPwQHQDxQ3QAxA/RARA/RAdA/BAdAPFDdADED9EBED9EB0D8EB0A8UN0AMQPQR+5+Ab7jPB0hAAAAABJRU5ErkJggg==";

package/client/diff.test.ts

@@ -0,0 +1,63 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { buildPaneRows, buildSplitDiffRows, parseDiffFiles } from "./diff.ts";
+
+test("snapshot diff renders only code rows, with correct file and line numbers", () => {
+  const diff = [
+    "diff --git a/src/edited.ts b/src/edited.ts",
+    "index 1234567..abcdef0 100644",
+    "--- a/src/edited.ts",
+    "+++ b/src/edited.ts",
+    "@@ -93,2 +95,3 @@",
+    " before",
+    "-old",
+    "+new",
+    "+another",
+    "diff --git a/src/new.ts b/src/new.ts",
+    "new file mode 100644",
+    "--- /dev/null",
+    "+++ b/src/new.ts",
+    "@@ -0,0 +1 @@",
+    "+created",
+    "diff --git a/src/deleted.ts b/src/deleted.ts",
+    "deleted file mode 100644",
+    "--- a/src/deleted.ts",
+    "+++ /dev/null",
+    "@@ -1 +0,0 @@",
+    "-removed",
+  ].join("\n");
+  const files = parseDiffFiles(diff);
+  assert.deepEqual(files.map((file) => file.path), ["src/edited.ts", "src/new.ts", "src/deleted.ts"]);
+  assert.deepEqual(files.map((file) => file.status), ["modified", "added", "deleted"]);
+  const rows = buildSplitDiffRows(files[0]!.lines);
+  assert.deepEqual(rows.map((row) => row.kind), ["context", "change"]);
+  assert.equal(rows[0]!.kind === "context" && rows[0].before.number, 93);
+  assert.equal(rows[0]!.kind === "context" && rows[0].after.number, 95);
+  assert.equal(rows[1]!.kind === "change" && rows[1].after.at(-1)?.number, 97);
+  assert.deepEqual(buildSplitDiffRows(files[1]!.lines).map((row) => row.kind), ["change"]);
+  assert.deepEqual(buildSplitDiffRows(files[2]!.lines).map((row) => row.kind), ["change"]);
+});
+
+test("pane rows flow independently and show only skipped ranges as waves", () => {
+  const files = parseDiffFiles([
+    "diff --git a/a.ts b/a.ts", "--- a/a.ts", "+++ b/a.ts",
+    "@@ -1,2 +1,3 @@", " same", "+extra", " next",
+    "@@ -20,2 +21,2 @@", " later", "-old", "+new",
+  ].join("\n"));
+  const rows = buildSplitDiffRows(files[0]!.lines);
+  const before = buildPaneRows(rows, "before");
+  const after = buildPaneRows(rows, "after");
+  assert.deepEqual(before.map((row) => row.kind), ["code", "change", "code", "wave", "code", "change"]);
+  assert.deepEqual(after.map((row) => row.kind), ["code", "change", "code", "wave", "code", "change"]);
+  assert.equal(before[1]!.kind === "change" && before[1].cells.length, 0);
+  assert.equal(after[1]!.kind === "change" && after[1].cells.length, 1);
+});
+
+test("legacy repeated edit markers do not appear as visible rows", () => {
+  const files = parseDiffFiles([
+    "diff --git a/a.ts b/a.ts", "@@ -1 +1 @@", "-first", "+second",
+    "diff --git a/a.ts b/a.ts", "@@ -1 +1 @@", "-second", "+final",
+  ].join("\n"));
+  assert.equal(files.length, 1);
+  assert.deepEqual(buildSplitDiffRows(files[0]!.lines).map((row) => row.kind), ["change", "change"]);
+});

package/client/diff.ts

@@ -0,0 +1,153 @@
+/** Group unified diffs by file for the review card. */
+export interface DiffLine {
+  type: "add" | "remove" | "context" | "header";
+  content: string;
+}
+
+export interface DiffFile {
+  path: string;
+  status: "added" | "modified" | "deleted";
+  added: number;
+  removed: number;
+  lines: DiffLine[];
+}
+
+export interface DiffCell {
+  number?: number;
+  text: string;
+  type: "context" | "add" | "remove";
+}
+
+export type SplitDiffRow =
+  | { kind: "header"; label: string }
+  | { kind: "context"; before: DiffCell; after: DiffCell }
+  | { kind: "change"; before: DiffCell[]; after: DiffCell[]; tone: "modify" | "add" | "remove" };
+
+export type PaneRow =
+  | { kind: "wave"; key: string; index: number }
+  | { kind: "code"; key: string; cell: DiffCell }
+  | { kind: "change"; key: string; index: number; cells: DiffCell[]; tone: "modify" | "add" | "remove" };
+
+/** Each side flows independently. A skipped source range gets a small wave divider. */
+export function buildPaneRows(rows: SplitDiffRow[], side: "before" | "after"): PaneRow[] {
+  const result: PaneRow[] = [];
+  let lastNumber: number | undefined;
+  rows.forEach((row, index) => {
+    if (row.kind === "header") return;
+    const cells = row.kind === "context" ? [row[side]] : row[side];
+    const first = cells[0]?.number;
+    if (first !== undefined && (lastNumber === undefined ? first > 1 : first !== lastNumber + 1)) {
+      result.push({ kind: "wave", key: `wave-${index}`, index });
+    }
+    if (row.kind === "context") result.push({ kind: "code", key: `code-${index}`, cell: row[side] });
+    else result.push({ kind: "change", key: `change-${index}`, index, cells: row[side], tone: row.tone });
+    const last = cells.at(-1)?.number;
+    if (last !== undefined) lastNumber = last;
+  });
+  return result;
+}
+
+/** Keep each change run together so different line counts can share one block height. */
+export function buildSplitDiffRows(lines: DiffLine[]): SplitDiffRow[] {
+  const rows: SplitDiffRow[] = [];
+  let beforeNumber: number | undefined;
+  let afterNumber: number | undefined;
+  let removed: DiffCell[] = [];
+  let added: DiffCell[] = [];
+
+  const flushChanges = () => {
+    if (removed.length || added.length) rows.push({
+      kind: "change",
+      before: removed,
+      after: added,
+      tone: removed.length && added.length ? "modify" : removed.length ? "remove" : "add",
+    });
+    removed = [];
+    added = [];
+  };
+
+  for (const line of lines) {
+    if (line.type === "header") {
+      flushChanges();
+      const hunk = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/.exec(line.content);
+      if (hunk) {
+        beforeNumber = Number(hunk[1]);
+        afterNumber = Number(hunk[2]);
+      } else if (line.content === "再次修改") {
+        beforeNumber = undefined;
+        afterNumber = undefined;
+      }
+      // Hunk coordinates only set line numbers; they are not visible diff rows.
+      continue;
+    }
+
+    const text = line.content.slice(1);
+    if (line.type === "remove") {
+      if (beforeNumber === undefined) beforeNumber = 1;
+      removed.push({ number: beforeNumber++, text, type: "remove" });
+    } else if (line.type === "add") {
+      if (afterNumber === undefined) afterNumber = 1;
+      added.push({ number: afterNumber++, text, type: "add" });
+    } else {
+      flushChanges();
+      const content = line.content.startsWith(" ") ? text : line.content;
+      rows.push({ kind: "context", before: { number: beforeNumber, text: content, type: "context" }, after: { number: afterNumber, text: content, type: "context" } });
+      if (beforeNumber !== undefined) beforeNumber++;
+      if (afterNumber !== undefined) afterNumber++;
+    }
+  }
+  flushChanges();
+  return rows;
+}
+
+export function parseDiffFiles(diffText?: string): DiffFile[] {
+  if (!diffText?.trim()) return [];
+  const files: DiffFile[] = [];
+  const byPath = new Map<string, DiffFile>();
+  let current: DiffFile | undefined;
+  const startFile = (path: string) => {
+    current = byPath.get(path);
+    if (current) {
+      current.lines.push({ type: "header", content: "再次修改" });
+    } else {
+      current = { path, status: "modified", added: 0, removed: 0, lines: [] };
+      byPath.set(path, current);
+      files.push(current);
+    }
+  };
+
+  for (const line of diffText.replace(/\r\n/g, "\n").split("\n")) {
+    const gitHeader = /^diff --git a\/(.+) b\/(.+)$/.exec(line);
+    if (gitHeader) {
+      startFile(gitHeader[2]);
+      continue;
+    }
+    const newFile = /^\+\+\+ (?:b\/)?(.+?)(?: \(new file\))?$/.exec(line);
+    if (newFile && newFile[1] !== "/dev/null") {
+      if (!current || current.path !== newFile[1]) startFile(newFile[1]);
+      continue;
+    }
+    if (line.startsWith("new file mode ") || line === "--- /dev/null") {
+      if (current) current.status = "added";
+      continue;
+    }
+    if (line.startsWith("deleted file mode ") || line === "+++ /dev/null") {
+      if (current) current.status = "deleted";
+      continue;
+    }
+    if (/^--- (?:a\/|\/dev\/null)/.test(line) || /^(?:index |old mode |new mode |similarity index |dissimilarity index |rename from |rename to |copy from |copy to )/.test(line)) continue;
+    if (!current) startFile("修改内容");
+    if (line.startsWith("+")) {
+      current!.added++;
+      current!.lines.push({ type: "add", content: line });
+    } else if (line.startsWith("-")) {
+      current!.removed++;
+      current!.lines.push({ type: "remove", content: line });
+    } else if (line.startsWith("@@") || line.startsWith("\\ No newline")) {
+      current!.lines.push({ type: "header", content: line });
+    } else if (line.length) {
+      current!.lines.push({ type: "context", content: line });
+    }
+  }
+  return files.filter((file) => file.lines.length || file.added || file.removed);
+}