@assistant-ui/react-ink 0.0.6 → 0.0.8

package/src/primitives/diff/DiffView.test.tsx

@@ -0,0 +1,340 @@
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "ink-testing-library";
+import { parsePatch, computeDiff, foldContext } from "./diff-utils";
+import { DiffContent } from "./DiffContent";
+import { DiffHeader } from "./DiffHeader";
+import { DiffRoot } from "./DiffRoot";
+import { DiffView } from "./DiffView";
+
+const renderFrame = async (node: ReactElement) => {
+  const instance = render(node);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  return instance.lastFrame() ?? "";
+};
+
+afterEach(() => {
+  cleanup();
+});
+
+const SAMPLE_PATCH = `diff --git a/hello.txt b/hello.txt
+index 1234567..abcdefg 100644
+--- a/hello.txt
++++ b/hello.txt
+@@ -1,3 +1,4 @@
+ line 1
+-line 2
++line 2 modified
++line 2.5 added
+ line 3
+`;
+
+describe("parsePatch", () => {
+  it("parses a unified diff string", () => {
+    const files = parsePatch(SAMPLE_PATCH);
+    expect(files).toHaveLength(1);
+    const file = files[0]!;
+    expect(file.oldName).toBe("hello.txt");
+    expect(file.newName).toBe("hello.txt");
+    expect(file.additions).toBe(2);
+    expect(file.deletions).toBe(1);
+
+    const types = file.lines.map((l) => l.type);
+    expect(types).toContain("add");
+    expect(types).toContain("del");
+    expect(types).toContain("normal");
+  });
+
+  it("strips CRLF line endings from parsed patch lines", () => {
+    const patch = `diff --git a/x.txt b/x.txt
+--- a/x.txt
++++ b/x.txt
+@@ -1,2 +1,2 @@
+ a\r
+-b\r
++c\r
+`;
+
+    expect(parsePatch(patch)).toEqual([
+      {
+        oldName: "x.txt",
+        newName: "x.txt",
+        additions: 1,
+        deletions: 1,
+        lines: [
+          {
+            type: "normal",
+            content: "a",
+            oldLineNumber: 1,
+            newLineNumber: 1,
+          },
+          {
+            type: "del",
+            content: "b",
+            oldLineNumber: 2,
+          },
+          {
+            type: "add",
+            content: "c",
+            newLineNumber: 2,
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("ignores no-newline markers in unified diff patches", () => {
+    const patch = `diff --git a/a.txt b/a.txt
+--- a/a.txt
++++ b/a.txt
+@@ -1 +1 @@
+-old
+\
++new
+\
+`;
+
+    expect(parsePatch(patch)).toEqual([
+      {
+        oldName: "a.txt",
+        newName: "a.txt",
+        additions: 1,
+        deletions: 1,
+        lines: [
+          {
+            type: "del",
+            content: "old",
+            oldLineNumber: 1,
+          },
+          {
+            type: "add",
+            content: "new",
+            newLineNumber: 1,
+          },
+        ],
+      },
+    ]);
+  });
+});
+
+describe("computeDiff", () => {
+  it("diffs two strings", () => {
+    const result = computeDiff("alpha\nbeta\n", "alpha\ngamma\n");
+    expect(result.additions).toBeGreaterThan(0);
+    expect(result.deletions).toBeGreaterThan(0);
+    const types = result.lines.map((l) => l.type);
+    expect(types).toContain("add");
+    expect(types).toContain("del");
+    expect(types).toContain("normal");
+  });
+
+  it("preserves blank-line additions and deletions", () => {
+    expect(computeDiff("a\n", "a\n\n")).toEqual({
+      additions: 1,
+      deletions: 0,
+      lines: [
+        {
+          type: "normal",
+          content: "a",
+          oldLineNumber: 1,
+          newLineNumber: 1,
+        },
+        {
+          type: "add",
+          content: "",
+          newLineNumber: 2,
+        },
+      ],
+    });
+
+    expect(computeDiff("a\n\n", "a\n")).toEqual({
+      additions: 0,
+      deletions: 1,
+      lines: [
+        {
+          type: "normal",
+          content: "a",
+          oldLineNumber: 1,
+          newLineNumber: 1,
+        },
+        {
+          type: "del",
+          content: "",
+          oldLineNumber: 2,
+        },
+      ],
+    });
+  });
+
+  it("strips CRLF line endings from computed diffs", () => {
+    expect(computeDiff("a\r\nb\r\n", "a\r\nc\r\n")).toEqual({
+      additions: 1,
+      deletions: 1,
+      lines: [
+        {
+          type: "normal",
+          content: "a",
+          oldLineNumber: 1,
+          newLineNumber: 1,
+        },
+        {
+          type: "del",
+          content: "b",
+          oldLineNumber: 2,
+        },
+        {
+          type: "add",
+          content: "c",
+          newLineNumber: 2,
+        },
+      ],
+    });
+  });
+});
+
+describe("foldContext", () => {
+  it("folds unchanged regions beyond contextLines", () => {
+    const lines = [
+      ...Array.from({ length: 10 }, (_, i) => ({
+        type: "normal" as const,
+        content: `line ${i}`,
+        oldLineNumber: i + 1,
+        newLineNumber: i + 1,
+      })),
+      { type: "add" as const, content: "new line", newLineNumber: 11 },
+      ...Array.from({ length: 10 }, (_, i) => ({
+        type: "normal" as const,
+        content: `line ${i + 11}`,
+        oldLineNumber: i + 11,
+        newLineNumber: i + 12,
+      })),
+    ];
+
+    const result = foldContext(lines, 2);
+    const folds = result.filter((l) => l.type === "fold");
+    expect(folds.length).toBeGreaterThan(0);
+    const totalHidden = folds.reduce(
+      (sum, f) => sum + (f.type === "fold" ? f.hiddenCount : 0),
+      0,
+    );
+    expect(totalHidden).toBe(16);
+  });
+});
+
+describe("DiffView", () => {
+  it("supports composing primitives from prepared files", async () => {
+    const frame = await renderFrame(
+      <DiffRoot
+        files={[
+          {
+            oldName: "before.txt",
+            newName: "after.txt",
+            additions: 1,
+            deletions: 1,
+            lines: [
+              {
+                type: "del",
+                content: "before",
+                oldLineNumber: 1,
+              },
+              {
+                type: "add",
+                content: "after",
+                newLineNumber: 1,
+              },
+            ],
+          },
+        ]}
+      >
+        <DiffHeader />
+        <DiffContent />
+      </DiffRoot>,
+    );
+
+    expect(frame).toContain("before.txt");
+    expect(frame).toContain("after.txt");
+    expect(frame).toContain("+1");
+    expect(frame).toContain("-1");
+  });
+
+  it("renders a basic patch", async () => {
+    const frame = await renderFrame(<DiffView patch={SAMPLE_PATCH} />);
+    expect(frame).toContain("hello.txt");
+    expect(frame).toContain("+");
+    expect(frame).toContain("-");
+  });
+
+  it("renders from oldFile/newFile", async () => {
+    const frame = await renderFrame(
+      <DiffView
+        oldFile={{ content: "hello\nworld\n", name: "test.txt" }}
+        newFile={{ content: "hello\nearth\n", name: "test.txt" }}
+      />,
+    );
+    expect(frame).toContain("test.txt");
+    expect(frame).toContain("+");
+    expect(frame).toContain("-");
+  });
+
+  it("hides line numbers when showLineNumbers=false", async () => {
+    const withNumbers = await renderFrame(<DiffView patch={SAMPLE_PATCH} />);
+    const withoutNumbers = await renderFrame(
+      <DiffView patch={SAMPLE_PATCH} showLineNumbers={false} />,
+    );
+    expect(withNumbers.length).toBeGreaterThan(withoutNumbers.length);
+  });
+
+  it("truncates with maxLines", async () => {
+    const manyLines = Array.from({ length: 50 }, (_, i) => `+line${i}`).join(
+      "\n",
+    );
+    const patch = `diff --git a/big.txt b/big.txt
+--- a/big.txt
++++ b/big.txt
+@@ -0,0 +1,50 @@
+${manyLines}
+`;
+    const frame = await renderFrame(<DiffView patch={patch} maxLines={5} />);
+    expect(frame).toContain("more lines");
+  });
+
+  it("folds context lines", async () => {
+    const normalBefore = Array.from({ length: 10 }, (_, i) => ` line${i}`).join(
+      "\n",
+    );
+    const normalAfter = Array.from({ length: 10 }, (_, i) => ` after${i}`).join(
+      "\n",
+    );
+    const patch = `diff --git a/ctx.txt b/ctx.txt
+--- a/ctx.txt
++++ b/ctx.txt
+@@ -1,21 +1,22 @@
+${normalBefore}
++inserted
+${normalAfter}
+`;
+    const frame = await renderFrame(
+      <DiffView patch={patch} contextLines={2} />,
+    );
+    expect(frame).toContain("lines hidden");
+  });
+
+  it("renders multi-file patches", async () => {
+    const patch = `diff --git a/a.txt b/a.txt
+--- a/a.txt
++++ b/a.txt
+@@ -1 +1 @@
+-old a
++new a
+diff --git a/b.txt b/b.txt
+--- a/b.txt
++++ b/b.txt
+@@ -1 +1 @@
+-old b
++new b
+`;
+    const frame = await renderFrame(<DiffView patch={patch} />);
+    expect(frame).toContain("a.txt");
+    expect(frame).toContain("b.txt");
+  });
+});

package/src/primitives/diff/DiffView.tsx

@@ -0,0 +1,204 @@
+import { type ComponentProps, useMemo } from "react";
+import { Box, Text } from "ink";
+import { DiffContent } from "./DiffContent";
+import { useDiffContext } from "./DiffContext";
+import { DiffRoot } from "./DiffRoot";
+import { computeDiff, parsePatch } from "./diff-utils";
+import type {
+  DiffFileInput,
+  FoldedRegion,
+  ParsedFile,
+  ParsedLine,
+} from "./types";
+
+export type DiffViewProps = Omit<ComponentProps<typeof Box>, "children"> & {
+  patch?: string | undefined;
+  oldFile?: DiffFileInput | undefined;
+  newFile?: DiffFileInput | undefined;
+  showLineNumbers?: boolean | undefined;
+  contextLines?: number | undefined;
+  maxLines?: number | undefined;
+};
+
+interface DiffViewInnerProps {
+  showLineNumbers: boolean | undefined;
+  contextLines: number | undefined;
+  maxLines: number | undefined;
+}
+
+const INDICATOR: Record<string, string> = {
+  add: "+",
+  del: "-",
+  normal: " ",
+};
+
+const isDevNull = (n: string | undefined) => !n || n === "/dev/null";
+
+const StyledLine = ({
+  line,
+  showLineNumbers,
+}: {
+  line: ParsedLine;
+  showLineNumbers: boolean;
+}) => {
+  const lineNum =
+    line.type === "del"
+      ? line.oldLineNumber
+      : line.type === "add"
+        ? line.newLineNumber
+        : line.oldLineNumber;
+  const numStr = lineNum !== undefined ? String(lineNum) : "";
+  const padded = numStr.padStart(4);
+  const content = `${INDICATOR[line.type]} ${line.content}`;
+
+  return (
+    <Box>
+      {showLineNumbers && <Text dimColor>{padded} </Text>}
+      {line.type === "add" ? (
+        <Text color="green">{content}</Text>
+      ) : line.type === "del" ? (
+        <Text color="red">{content}</Text>
+      ) : (
+        <Text>{content}</Text>
+      )}
+    </Box>
+  );
+};
+
+const StyledFold = ({ region }: { region: FoldedRegion }) => (
+  <Text dimColor>{`  --- ${region.hiddenCount} lines hidden ---`}</Text>
+);
+
+const DiffViewInner = ({
+  showLineNumbers,
+  contextLines,
+  maxLines,
+}: DiffViewInnerProps) => {
+  const { files } = useDiffContext();
+  const shouldShowLineNumbers = showLineNumbers ?? true;
+
+  if (files.length === 0) {
+    return <Text dimColor>No diff content</Text>;
+  }
+
+  return (
+    <>
+      {files.map((file, i) => {
+        const renamed =
+          !isDevNull(file.oldName) &&
+          !isDevNull(file.newName) &&
+          file.oldName !== file.newName;
+        const displayName = isDevNull(file.newName)
+          ? file.oldName
+          : file.newName;
+
+        return (
+          <Box key={i} flexDirection="column">
+            <Box gap={1}>
+              {renamed ? (
+                <>
+                  <Text bold dimColor>
+                    {file.oldName}
+                  </Text>
+                  <Text dimColor>{"->"}</Text>
+                  <Text bold>{file.newName}</Text>
+                </>
+              ) : (
+                <Text bold>{displayName}</Text>
+              )}
+              <Text color="green">+{file.additions}</Text>
+              <Text color="red">-{file.deletions}</Text>
+            </Box>
+            <DiffContent
+              fileIndex={i}
+              contextLines={contextLines}
+              maxLines={maxLines}
+              renderLine={({ line }) => (
+                <StyledLine
+                  line={line}
+                  showLineNumbers={shouldShowLineNumbers}
+                />
+              )}
+              renderFold={({ region }) => <StyledFold region={region} />}
+            />
+            {i < files.length - 1 && <Text> </Text>}
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const getDiffViewFiles = ({
+  patch,
+  oldFile,
+  newFile,
+}: {
+  patch?: string | undefined;
+  oldFile?: DiffFileInput | undefined;
+  newFile?: DiffFileInput | undefined;
+}): ParsedFile[] => {
+  if (patch) {
+    return parsePatch(patch);
+  }
+
+  if (!oldFile || !newFile) {
+    return [];
+  }
+
+  const { lines, additions, deletions } = computeDiff(
+    oldFile.content,
+    newFile.content,
+  );
+
+  return [
+    {
+      oldName: oldFile.name,
+      newName: newFile.name,
+      lines,
+      additions,
+      deletions,
+    },
+  ];
+};
+
+export const DiffView = ({
+  patch,
+  oldFile,
+  newFile,
+  showLineNumbers,
+  contextLines,
+  maxLines,
+  ...boxProps
+}: DiffViewProps) => {
+  const oldContent = oldFile?.content;
+  const oldName = oldFile?.name;
+  const newContent = newFile?.content;
+  const newName = newFile?.name;
+
+  const files = useMemo(
+    () =>
+      getDiffViewFiles({
+        patch,
+        oldFile:
+          oldContent !== undefined
+            ? { content: oldContent, name: oldName }
+            : undefined,
+        newFile:
+          newContent !== undefined
+            ? { content: newContent, name: newName }
+            : undefined,
+      }),
+    [patch, oldContent, oldName, newContent, newName],
+  );
+
+  return (
+    <DiffRoot files={files} {...boxProps}>
+      <DiffViewInner
+        showLineNumbers={showLineNumbers}
+        contextLines={contextLines}
+        maxLines={maxLines}
+      />
+    </DiffRoot>
+  );
+};

package/src/primitives/diff/diff-utils.ts

@@ -0,0 +1,149 @@
+import { diffLines } from "diff";
+import parseDiff from "parse-diff";
+import type {
+  ParsedLine,
+  ParsedFile,
+  DisplayLine,
+  FoldedRegion,
+} from "./types";
+
+const NO_NEWLINE_MARKER = "\";
+
+const stripTrailingCarriageReturn = (content: string) => {
+  return content.endsWith("\r") ? content.slice(0, -1) : content;
+};
+
+const parseChangeContent = (content: string) => {
+  const normalized = stripTrailingCarriageReturn(content);
+  if (normalized === NO_NEWLINE_MARKER) return null;
+  return stripTrailingCarriageReturn(normalized.slice(1));
+};
+
+const splitDiffLines = (value: string) => {
+  const normalized = value.endsWith("\n") ? value.slice(0, -1) : value;
+  if (normalized.length === 0) {
+    return value.length > 0 ? [""] : [];
+  }
+  return normalized.split("\n").map(stripTrailingCarriageReturn);
+};
+
+export function parsePatch(patch: string): ParsedFile[] {
+  const files = parseDiff(patch);
+  return files.map((file) => {
+    const lines: ParsedLine[] = [];
+    let additions = 0;
+    let deletions = 0;
+
+    for (const chunk of file.chunks) {
+      let oldLine = chunk.oldStart;
+      let newLine = chunk.newStart;
+
+      for (const change of chunk.changes) {
+        const content = parseChangeContent(change.content);
+        if (content === null) continue;
+
+        if (change.type === "add") {
+          additions++;
+          lines.push({
+            type: "add",
+            content,
+            newLineNumber: newLine++,
+          });
+        } else if (change.type === "del") {
+          deletions++;
+          lines.push({
+            type: "del",
+            content,
+            oldLineNumber: oldLine++,
+          });
+        } else {
+          lines.push({
+            type: "normal",
+            content,
+            oldLineNumber: oldLine++,
+            newLineNumber: newLine++,
+          });
+        }
+      }
+    }
+
+    return {
+      oldName: file.from,
+      newName: file.to,
+      lines,
+      additions,
+      deletions,
+    };
+  });
+}
+
+export function computeDiff(
+  oldContent: string,
+  newContent: string,
+): { lines: ParsedLine[]; additions: number; deletions: number } {
+  const changes = diffLines(oldContent, newContent);
+  const lines: ParsedLine[] = [];
+  let oldLine = 1;
+  let newLine = 1;
+  let additions = 0;
+  let deletions = 0;
+
+  for (const change of changes) {
+    for (const content of splitDiffLines(change.value)) {
+      if (change.added) {
+        additions++;
+        lines.push({ type: "add", content, newLineNumber: newLine++ });
+      } else if (change.removed) {
+        deletions++;
+        lines.push({ type: "del", content, oldLineNumber: oldLine++ });
+      } else {
+        lines.push({
+          type: "normal",
+          content,
+          oldLineNumber: oldLine++,
+          newLineNumber: newLine++,
+        });
+      }
+    }
+  }
+
+  return { lines, additions, deletions };
+}
+
+export function foldContext(
+  lines: ParsedLine[],
+  contextLines: number,
+): DisplayLine[] {
+  const ctx = Math.max(0, contextLines);
+  const keep = new Set<number>();
+
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i]!.type !== "normal") {
+      for (
+        let j = Math.max(0, i - ctx);
+        j <= Math.min(lines.length - 1, i + ctx);
+        j++
+      ) {
+        keep.add(j);
+      }
+    }
+  }
+
+  const result: DisplayLine[] = [];
+  let i = 0;
+  while (i < lines.length) {
+    if (keep.has(i)) {
+      result.push(lines[i]!);
+      i++;
+    } else {
+      let hiddenCount = 0;
+      while (i < lines.length && !keep.has(i)) {
+        hiddenCount++;
+        i++;
+      }
+      result.push({ type: "fold", hiddenCount } satisfies FoldedRegion);
+    }
+  }
+
+  return result;
+}

package/src/primitives/diff/index.ts

@@ -0,0 +1,25 @@
+export { DiffRoot as Root, type DiffRootProps as RootProps } from "./DiffRoot";
+export {
+  DiffHeader as Header,
+  type DiffHeaderProps as HeaderProps,
+} from "./DiffHeader";
+export {
+  DiffContent as Content,
+  type DiffContentProps as ContentProps,
+} from "./DiffContent";
+export {
+  DiffLine as Line,
+  type DiffLineProps as LineProps,
+} from "./DiffLine";
+export {
+  DiffStats as Stats,
+  type DiffStatsProps as StatsProps,
+} from "./DiffStats";
+export type {
+  ParsedLine,
+  ParsedFile,
+  DiffFileInput,
+  DiffLineType,
+  DisplayLine,
+  FoldedRegion,
+} from "./types";