@abacus-ai/cli 1.106.25008 → 2.0.0-canary.1

package/src/components/tool-permissions/diff-preview.tsx

@@ -0,0 +1,359 @@
+import type { StructuredPatchHunk } from "diff";
+import type { ComponentProps } from "react";
+
+import { View, Text } from "@codellm/jar";
+import { structuredPatch, diffWordsWithSpace } from "diff";
+import { memo, useMemo, useEffect, useState } from "react";
+
+import { useTheme } from "../../theme/index.js";
+import { highlightLines } from "../../tools/utils/tool-ui-components.js";
+
+type DiffPreviewProps = Omit<ComponentProps<typeof View>, "children"> & {
+  filePath: string;
+  originalContent: string;
+  newContent: string;
+  dimmed?: boolean;
+};
+
+interface DiffLine {
+  type: "added" | "removed" | "unchanged" | "separator";
+  content: string;
+  highlightedContent?: string;
+  originalLineNumber?: number;
+  newLineNumber?: number;
+  skippedLines?: number;
+}
+
+interface WordPart {
+  value: string;
+  added?: boolean;
+  removed?: boolean;
+}
+
+function getWordDiff(oldLine: string, newLine: string): WordPart[] {
+  return diffWordsWithSpace(oldLine, newLine);
+}
+
+const DiffLineContent = memo(
+  ({
+    line,
+    pairedLine,
+    lineNumber,
+    dimmed = false,
+  }: {
+    line: DiffLine;
+    pairedLine?: DiffLine;
+    lineNumber: string;
+    dimmed?: boolean;
+  }) => {
+    const { colors } = useTheme();
+
+    if (line.type === "separator") {
+      return (
+        <View flexDirection="row">
+          <Text dimColor>{lineNumber} </Text>
+          <Text dimColor>⋮ {line.skippedLines} unchanged lines</Text>
+        </View>
+      );
+    }
+
+    if (line.type === "unchanged") {
+      return (
+        <View flexDirection="row">
+          <Text dimColor>{lineNumber} </Text>
+          <View flexShrink={1}>
+            <Text dimColor wrap="wrap">
+              {line.highlightedContent ?? line.content}
+            </Text>
+          </View>
+        </View>
+      );
+    }
+
+    if (line.type === "removed") {
+      const wdiff =
+        pairedLine?.type === "added" ? getWordDiff(line.content, pairedLine.content) : null;
+      return (
+        <View flexDirection="row" backgroundColor={colors.diffRemoved}>
+          <Text
+            backgroundColor={colors.diffRemoved}
+            color={colors.diffRemovedText}
+            dimColor={dimmed}
+          >
+            {lineNumber} -{" "}
+          </Text>
+          <View flexShrink={1}>
+            <Text color={colors.diffRemovedText} dimColor={dimmed} wrap="wrap">
+              {wdiff ? (
+                wdiff.map((part, i) =>
+                  part.removed ? (
+                    <Text key={i} backgroundColor={colors.diffRemovedHighlight} dimColor={dimmed}>
+                      {part.value}
+                    </Text>
+                  ) : part.added ? null : (
+                    <Text key={i} backgroundColor={colors.diffRemoved} dimColor={dimmed}>
+                      {part.value}
+                    </Text>
+                  ),
+                )
+              ) : (
+                <Text backgroundColor={colors.diffRemoved} dimColor={dimmed}>
+                  {line.highlightedContent ?? line.content}
+                </Text>
+              )}
+            </Text>
+          </View>
+        </View>
+      );
+    }
+
+    if (line.type === "added") {
+      const wdiff =
+        pairedLine?.type === "removed" ? getWordDiff(pairedLine.content, line.content) : null;
+      return (
+        <View flexDirection="row" backgroundColor={colors.diffAdded}>
+          <Text backgroundColor={colors.diffAdded} color={colors.diffAddedText} dimColor={dimmed}>
+            {lineNumber} +{" "}
+          </Text>
+          <View flexShrink={1}>
+            <Text color={colors.diffAddedText} dimColor={dimmed} wrap="wrap">
+              {wdiff ? (
+                wdiff.map((part, i) =>
+                  part.added ? (
+                    <Text key={i} backgroundColor={colors.diffAddedHighlight} dimColor={dimmed}>
+                      {part.value}
+                    </Text>
+                  ) : part.removed ? null : (
+                    <Text key={i} backgroundColor={colors.diffAdded} dimColor={dimmed}>
+                      {part.value}
+                    </Text>
+                  ),
+                )
+              ) : (
+                <Text backgroundColor={colors.diffAdded} dimColor={dimmed}>
+                  {line.highlightedContent ?? line.content}
+                </Text>
+              )}
+            </Text>
+          </View>
+        </View>
+      );
+    }
+
+    return null;
+  },
+);
+DiffLineContent.displayName = "DiffLineContent";
+
+export const DiffPreviewTitle = memo(
+  ({ filePath, hunks }: { filePath: string; hunks: StructuredPatchHunk[] }) => {
+    const { colors } = useTheme();
+    const numAdditions = hunks.reduce(
+      (count, hunk) => count + hunk.lines.filter((l) => l.startsWith("+")).length,
+      0,
+    );
+    const numRemovals = hunks.reduce(
+      (count, hunk) => count + hunk.lines.filter((l) => l.startsWith("-")).length,
+      0,
+    );
+
+    return (
+      <View flexDirection="row" gap={1}>
+        <Text bold>{filePath}</Text>
+        {(numAdditions > 0 || numRemovals > 0) && (
+          <Text dimColor>
+            {numAdditions > 0 && <Text color={colors.diffAddedText}>+{numAdditions}</Text>}
+            {numAdditions > 0 && numRemovals > 0 && <Text> </Text>}
+            {numRemovals > 0 && <Text color={colors.diffRemovedText}>-{numRemovals}</Text>}
+          </Text>
+        )}
+      </View>
+    );
+  },
+);
+DiffPreviewTitle.displayName = "DiffPreviewTitle";
+
+export const DiffPreview = memo(
+  ({ filePath, originalContent, newContent, dimmed = false, ...viewProps }: DiffPreviewProps) => {
+    // Defer heavy diff computation off the render cycle via setTimeout(0) to avoid
+    // blocking the event loop (and React's concurrent scheduler) on large files.
+    const [computedContent, setComputedContent] = useState(newContent);
+    const isProcessing = computedContent !== newContent;
+
+    useEffect(() => {
+      if (computedContent === newContent) return;
+      const id = setTimeout(() => setComputedContent(newContent), 0);
+      return () => clearTimeout(id);
+    }, [newContent, computedContent]);
+
+    const { diffLines, totalOriginalLines } = useMemo(() => {
+      const hlOrig = highlightLines(originalContent, filePath);
+      const hlNew = highlightLines(computedContent, filePath);
+
+      const patch = structuredPatch(
+        filePath,
+        filePath,
+        originalContent,
+        computedContent,
+        undefined,
+        undefined,
+        { context: 1 },
+      );
+
+      const lines: DiffLine[] = [];
+      let lastEndLine = 0;
+
+      for (let hunkIdx = 0; hunkIdx < patch.hunks.length; hunkIdx++) {
+        const hunk = patch.hunks[hunkIdx];
+        if (!hunk) continue;
+
+        const hunkStartLine = hunk.oldStart;
+
+        if (hunkIdx > 0 && hunkStartLine > lastEndLine + 1) {
+          const skipped = hunkStartLine - lastEndLine - 1;
+          if (skipped > 0) {
+            lines.push({
+              type: "separator",
+              content: "",
+              skippedLines: skipped,
+            });
+          }
+        }
+
+        let oldLineNum = hunk.oldStart;
+        let newLineNum = hunk.newStart;
+
+        for (const line of hunk.lines) {
+          const prefix = line[0];
+          const content = line.slice(1);
+
+          if (prefix === "\\") {
+            continue;
+          }
+
+          if (prefix === "+") {
+            lines.push({
+              type: "added",
+              content,
+              highlightedContent: hlNew[newLineNum - 1],
+              newLineNumber: newLineNum++,
+            });
+          } else if (prefix === "-") {
+            lines.push({
+              type: "removed",
+              content,
+              highlightedContent: hlOrig[oldLineNum - 1],
+              originalLineNumber: oldLineNum++,
+            });
+          } else {
+            lines.push({
+              type: "unchanged",
+              content,
+              highlightedContent: hlOrig[oldLineNum - 1],
+              originalLineNumber: oldLineNum++,
+              newLineNumber: newLineNum++,
+            });
+          }
+        }
+
+        lastEndLine = oldLineNum - 1;
+      }
+
+      const originalLines = originalContent.split("\n").length;
+
+      return {
+        diffLines: lines,
+        totalOriginalLines: originalLines,
+      };
+    }, [filePath, originalContent, computedContent]);
+
+    const linePairs = useMemo(() => {
+      const pairs = new Map<number, DiffLine>();
+      for (let i = 0; i < diffLines.length; i++) {
+        const current = diffLines[i];
+        if (!current) continue;
+
+        if (current.type === "removed") {
+          const next = diffLines[i + 1];
+          if (next && next.type === "added") {
+            pairs.set(i, next);
+            pairs.set(i + 1, current);
+          }
+        }
+      }
+      return pairs;
+    }, [diffLines]);
+
+    if (diffLines.length === 0) {
+      return (
+        <View flexDirection="column" {...viewProps}>
+          <View
+            borderStyle="singleDouble"
+            width="100%"
+            borderTop={false}
+            borderLeft={false}
+            borderRight={false}
+            borderBottom
+          />
+          <Text dimColor>No changes detected</Text>
+          <View
+            borderStyle="singleDouble"
+            width="100%"
+            borderTop={false}
+            borderLeft={false}
+            borderRight={false}
+            borderBottom
+          />
+        </View>
+      );
+    }
+
+    const maxLineNumber = Math.max(
+      totalOriginalLines,
+      ...diffLines
+        .filter((l) => l.type !== "separator")
+        .map((l) => l.originalLineNumber || l.newLineNumber || 0),
+    );
+    const maxLineNumberWidth = maxLineNumber.toString().length;
+
+    return (
+      <View flexDirection="column" {...viewProps}>
+        {isProcessing && (
+          <View marginBottom={0}>
+            <Text dimColor>Processing diff...</Text>
+          </View>
+        )}
+        <View flexDirection="column">
+          {diffLines.map((line, idx) => {
+            const pairedLine = linePairs.get(idx);
+
+            if (line.type === "separator") {
+              return (
+                <DiffLineContent
+                  key={`sep-${idx}`}
+                  line={line}
+                  lineNumber={" ".repeat(maxLineNumberWidth)}
+                  dimmed={dimmed}
+                />
+              );
+            }
+
+            const lineNum = line.originalLineNumber || line.newLineNumber || "";
+            const paddedLineNum = String(lineNum).padStart(maxLineNumberWidth, " ");
+
+            return (
+              <DiffLineContent
+                key={idx}
+                line={line}
+                pairedLine={pairedLine}
+                lineNumber={paddedLineNum}
+                dimmed={dimmed}
+              />
+            );
+          })}
+        </View>
+      </View>
+    );
+  },
+);
+DiffPreview.displayName = "DiffPreview";

package/src/components/tool-permissions/index.ts

@@ -0,0 +1,5 @@
+export { DiffPreview, DiffPreviewTitle } from "./diff-preview.js";
+export { PermissionOptions } from "./permission-options.js";
+export type { PermissionOption } from "./permission-options.js";
+export { ToolPermissionUI } from "./tool-permission-ui.js";
+export type { ToolPermissionResult } from "../../tools/types.js";