@stigmer/react 3.0.9-dev.20260616060535 → 3.1.1

package/src/version-history/DiffViewer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
-import type { DiffHunk, DiffLine } from "./types";
+import type { DiffHunk, DiffLine } from "./types.js";
 
 /** Props for {@link DiffViewer}. */
 export interface DiffViewerProps {
@@ -63,8 +63,7 @@ export function DiffViewer({ hunks, filePath, className }: DiffViewerProps) {
       <table className="w-full border-collapse" role="table">
         <thead className="sr-only">
           <tr>
-            <th scope="col">Old line</th>
-            <th scope="col">New line</th>
+            <th scope="col">Line</th>
             <th scope="col">Change</th>
             <th scope="col">Content</th>
           </tr>
@@ -97,7 +96,7 @@ function HunkRows({
       {!isFirst && (
         <tr>
           <td
-            colSpan={4}
+            colSpan={3}
             className="select-none bg-diff-hunk-header-bg px-3 py-1 text-[11px] text-diff-hunk-header-fg"
             aria-label={`Hunk: ${header}`}
           >
@@ -144,13 +143,17 @@ function DiffLineRow({ line }: { readonly line: DiffLine }) {
         ? `Removed line ${line.oldLineNumber}: ${line.content}`
         : undefined;
 
+  // A single line-number gutter — the Cursor/VS Code inline-diff convention,
+  // more compact than GitHub's old+new pair. Each line shows the number from the
+  // side it belongs to: the new-file number for added/context lines, the
+  // old-file number for a removed line (which has no new-side number). The
+  // marker (+/-) and row color carry the change type.
+  const lineNumber = line.newLineNumber ?? line.oldLineNumber;
+
   return (
     <tr className={rowClass} aria-label={ariaLabel}>
       <td className={LINE_NUM_CLASSES}>
-        {line.oldLineNumber ?? ""}
-      </td>
-      <td className={LINE_NUM_CLASSES}>
-        {line.newLineNumber ?? ""}
+        {lineNumber ?? ""}
       </td>
       <td className={cn(MARKER_CLASSES, markerColor)} aria-hidden="true">
         {marker}

package/src/version-history/MultiFileDiffView.tsx

@@ -2,10 +2,10 @@
 
 import { useCallback, useState } from "react";
 import { cn } from "@stigmer/theme";
-import type { MultiFileDiffResult } from "./types";
-import { DiffViewer } from "./DiffViewer";
-import { DiffFileList } from "./DiffFileList";
-import { DiffSummary } from "./DiffSummary";
+import type { MultiFileDiffResult } from "./types.js";
+import { DiffViewer } from "./DiffViewer.js";
+import { DiffFileList } from "./DiffFileList.js";
+import { DiffSummary } from "./DiffSummary.js";
 
 /** Props for {@link MultiFileDiffView}. */
 export interface MultiFileDiffViewProps {

package/src/version-history/UnifiedDiffView.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useMemo } from "react";
+import { cn } from "@stigmer/theme";
+import { DiffViewer } from "./DiffViewer.js";
+import { parseUnifiedDiff } from "./parseUnifiedDiff.js";
+
+/** Props for {@link UnifiedDiffView}. */
+export interface UnifiedDiffViewProps {
+  /** A unified-diff patch string (e.g. Cursor's hunk-only `diffString`). */
+  readonly patch: string;
+  /** Additional CSS classes for the root container (e.g. a height cap). */
+  readonly className?: string;
+}
+
+/**
+ * The single canonical renderer for a unified-diff patch *string*.
+ *
+ * It parses the patch into hunks and renders them through {@link DiffViewer} —
+ * the same accessible table (line numbers, colored row backgrounds, a narrow
+ * `+`/`-` gutter column, `--stgm-diff-*` tokens) that a computed before/after
+ * diff uses — so a harness that only emits a ready unified diff (the Cursor
+ * harness's `diffString`) looks line-for-line identical to a native whole-file
+ * diff. The `---`/`+++`/`@@` preamble parses into metadata and never reaches the
+ * screen; a single-hunk diff shows no `@@` separator at all.
+ *
+ * Fallback: if the patch cannot be parsed into any hunk (a malformed or
+ * non-standard payload) it renders verbatim in a `<pre>` so we show something
+ * truthful rather than a misleading "No changes". Color is never the sole
+ * channel in either path — the gutter marker / literal prefix carries the change
+ * type for non-color readers.
+ *
+ * Internal to the SDK (not barrel-exported); consumed by {@link ResultView} and
+ * {@link FileChangeDiff}.
+ */
+export function UnifiedDiffView({ patch, className }: UnifiedDiffViewProps) {
+  const hunks = useMemo(() => parseUnifiedDiff(patch), [patch]);
+
+  if (hunks.length > 0) {
+    return <DiffViewer hunks={hunks} className={className} />;
+  }
+
+  // Unparseable but non-empty: show the raw patch rather than nothing.
+  const lines = patch.split("\n");
+  return (
+    <pre
+      className={cn(
+        "max-h-96 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-xs",
+        className,
+      )}
+    >
+      {lines.map((line, i) => (
+        <div
+          key={i}
+          className={cn(
+            line.startsWith("+") && !line.startsWith("+++") && "text-diff-added-fg",
+            line.startsWith("-") && !line.startsWith("---") && "text-diff-removed-fg",
+            line.startsWith("@@") && "text-diff-hunk-header-fg",
+          )}
+        >
+          {line || " "}
+        </div>
+      ))}
+    </pre>
+  );
+}

package/src/version-history/VersionTimeline.tsx

@@ -2,8 +2,8 @@
 
 import { useCallback, useState } from "react";
 import { cn } from "@stigmer/theme";
-import type { VersionTimelineProps } from "./types";
-import { VersionTimelineEntry } from "./VersionTimelineEntry";
+import type { VersionTimelineProps } from "./types.js";
+import { VersionTimelineEntry } from "./VersionTimelineEntry.js";
 
 /**
  * Accessible vertical timeline for version history.

package/src/version-history/VersionTimelineEntry.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
-import type { VersionTimelineEntryProps } from "./types";
+import type { VersionTimelineEntryProps } from "./types.js";
 
 /**
  * A single row in a version timeline.

package/src/version-history/__tests__/DiffViewer.test.tsx

@@ -0,0 +1,57 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { DiffViewer } from "../DiffViewer";
+import type { DiffHunk } from "../types";
+
+afterEach(cleanup);
+
+// A hunk exercising all three line types: an unchanged line, a removal, and an
+// addition — so the single-gutter numbering can be checked per type.
+const hunk: DiffHunk = {
+  oldStart: 1,
+  oldLines: 2,
+  newStart: 1,
+  newLines: 2,
+  lines: [
+    { type: "context", content: "keep", oldLineNumber: 1, newLineNumber: 1 },
+    { type: "removed", content: "gone", oldLineNumber: 2 },
+    { type: "added", content: "fresh", newLineNumber: 2 },
+  ],
+};
+
+/** The first cell of a row is the (single) line-number gutter. */
+function gutter(row: Element): string {
+  return row.querySelectorAll("td")[0]?.textContent ?? "";
+}
+
+describe("DiffViewer — single-column gutter (Cursor-style)", () => {
+  it("renders exactly one line-number column (3 cells per row, not 4)", () => {
+    const { container } = render(<DiffViewer hunks={[hunk]} />);
+    const firstRow = container.querySelector("tbody tr")!;
+    // gutter + marker + content — the old+new pair is collapsed to one.
+    expect(firstRow.querySelectorAll("td")).toHaveLength(3);
+  });
+
+  it("numbers each line from the side it belongs to (new for added/context, old for removed)", () => {
+    const { container } = render(<DiffViewer hunks={[hunk]} />);
+    const rows = Array.from(container.querySelectorAll("tbody tr"));
+
+    // context "keep" → its new-file number
+    expect(gutter(rows[0])).toBe("1");
+    expect(rows[0].textContent).toContain("keep");
+
+    // removed "gone" → its old-file number (it has no new-side number)
+    expect(gutter(rows[1])).toBe("2");
+    expect(rows[1].textContent).toContain("gone");
+
+    // added "fresh" → its new-file number
+    expect(gutter(rows[2])).toBe("2");
+    expect(rows[2].textContent).toContain("fresh");
+  });
+
+  it("renders a 'No changes' status (no table) for empty hunks", () => {
+    const { container } = render(<DiffViewer hunks={[]} />);
+    expect(container.querySelector("table")).toBeNull();
+    expect(container.textContent).toContain("No changes");
+  });
+});

package/src/version-history/__tests__/UnifiedDiffView.test.tsx

@@ -0,0 +1,50 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { UnifiedDiffView } from "../UnifiedDiffView";
+
+afterEach(cleanup);
+
+describe("UnifiedDiffView", () => {
+  it("renders a parseable patch through the DiffViewer table, not a raw dump", () => {
+    const patch =
+      "--- /dev/null\n+++ b/notes.md\n@@ -0,0 +1,2 @@\n+# Title\n+body\n";
+
+    const { container } = render(<UnifiedDiffView patch={patch} />);
+
+    // The accessible table is the renderer — not the old raw <pre>.
+    expect(container.querySelector("table")).not.toBeNull();
+    // Content is present...
+    expect(container.textContent).toContain("# Title");
+    expect(container.textContent).toContain("body");
+    // ...but the preamble never reaches the screen.
+    expect(container.textContent).not.toContain("/dev/null");
+    expect(container.textContent).not.toContain("+++");
+    // A single hunk shows no @@ separator (DiffViewer omits the first header).
+    expect(container.textContent).not.toContain("@@");
+  });
+
+  it("shows the subtle @@ separator only between hunks of a multi-hunk patch", () => {
+    const patch =
+      "--- a/f\n+++ b/f\n@@ -1,2 +1,2 @@\n ctx1\n-a\n+A\n@@ -10,2 +10,3 @@\n ctx2\n+added\n ctx3\n";
+
+    const { container } = render(<UnifiedDiffView patch={patch} />);
+
+    expect(container.querySelector("table")).not.toBeNull();
+    // The second hunk's header renders as a separator row.
+    expect(container.textContent).toContain("@@ -10,2 +10,3 @@");
+  });
+
+  it("falls back to a raw <pre> for an unparseable but non-empty patch", () => {
+    const { container } = render(<UnifiedDiffView patch="totally not a diff" />);
+
+    expect(container.querySelector("table")).toBeNull();
+    expect(container.querySelector("pre")).not.toBeNull();
+    expect(container.textContent).toContain("totally not a diff");
+  });
+
+  it("forwards className to the rendered container (e.g. a height cap)", () => {
+    const patch = "@@ -1 +1 @@\n-a\n+b\n";
+    const { container } = render(<UnifiedDiffView patch={patch} className="max-h-80" />);
+    expect(container.querySelector(".max-h-80")).not.toBeNull();
+  });
+});

package/src/version-history/__tests__/computeDiff.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { computeDiff } from "../computeDiff";
+
+describe("computeDiff", () => {
+  it("returns no hunks for identical text", () => {
+    expect(computeDiff("same\n", "same\n")).toEqual([]);
+  });
+
+  it("maps an addition with a new-side line number and no old-side number", () => {
+    const hunks = computeDiff("hello\n", "hello\nworld\n");
+    expect(hunks).toHaveLength(1);
+    const added = hunks[0].lines.find((l) => l.type === "added");
+    expect(added).toMatchObject({ type: "added", content: "world" });
+    expect(added?.newLineNumber).toBe(2);
+    expect(added?.oldLineNumber).toBeUndefined();
+  });
+
+  it("maps a replacement into a removed + added pair with correct numbers", () => {
+    const hunks = computeDiff("alpha\n", "beta\n");
+    expect(hunks[0].lines).toEqual([
+      { type: "removed", content: "alpha", oldLineNumber: 1 },
+      { type: "added", content: "beta", newLineNumber: 1 },
+    ]);
+  });
+
+  it("skips the no-newline marker when a side lacks a trailing newline", () => {
+    // structuredPatch emits "" here; the shared
+    // mapper must drop it rather than render it as a spurious context line.
+    const hunks = computeDiff("alpha", "beta");
+    expect(hunks[0].lines).toEqual([
+      { type: "removed", content: "alpha", oldLineNumber: 1 },
+      { type: "added", content: "beta", newLineNumber: 1 },
+    ]);
+  });
+});

package/src/version-history/__tests__/parseUnifiedDiff.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import { parseUnifiedDiff } from "../parseUnifiedDiff";
+import { computeDiff } from "../computeDiff";
+
+describe("parseUnifiedDiff", () => {
+  it("parses a /dev/null create, discarding the ---/+++ preamble", () => {
+    // The exact shape the Cursor harness emits for a new file (the screenshot
+    // case): the file headers must not survive into the rendered hunks.
+    const patch =
+      "--- /dev/null\n+++ b/Users/x/notes.md\n@@ -0,0 +1,3 @@\n+# Project Notes\n+\n+Minimal service\n";
+
+    const hunks = parseUnifiedDiff(patch);
+
+    expect(hunks).toHaveLength(1);
+    const lines = hunks[0].lines;
+    expect(lines.map((l) => l.type)).toEqual(["added", "added", "added"]);
+    expect(lines.map((l) => l.content)).toEqual(["# Project Notes", "", "Minimal service"]);
+    // Added lines carry a new-side number and no old-side number.
+    expect(lines.map((l) => l.newLineNumber)).toEqual([1, 2, 3]);
+    expect(lines.every((l) => l.oldLineNumber === undefined)).toBe(true);
+    // No preamble leaked into any content.
+    const allContent = lines.map((l) => l.content).join("\n");
+    expect(allContent).not.toContain("/dev/null");
+    expect(allContent).not.toContain("+++");
+  });
+
+  it("parses a header-less hunk-only edit with correct line numbers", () => {
+    const patch = "@@ -1,3 +1,3 @@\n line one\n-old middle\n+new middle\n line three\n";
+
+    const hunks = parseUnifiedDiff(patch);
+
+    expect(hunks).toHaveLength(1);
+    expect(hunks[0].lines).toEqual([
+      { type: "context", content: "line one", oldLineNumber: 1, newLineNumber: 1 },
+      { type: "removed", content: "old middle", oldLineNumber: 2 },
+      { type: "added", content: "new middle", newLineNumber: 2 },
+      { type: "context", content: "line three", oldLineNumber: 3, newLineNumber: 3 },
+    ]);
+  });
+
+  it("skips '\' markers", () => {
+    const patch =
+      "--- a/f\n+++ b/f\n@@ -1 +1 @@\n-alpha\n\\n+beta\n\\n";
+
+    const hunks = parseUnifiedDiff(patch);
+
+    expect(hunks).toHaveLength(1);
+    // The two metadata markers are gone; only the real change lines remain.
+    expect(hunks[0].lines).toEqual([
+      { type: "removed", content: "alpha", oldLineNumber: 1 },
+      { type: "added", content: "beta", newLineNumber: 1 },
+    ]);
+  });
+
+  it("parses a multi-hunk patch into independent, correctly-numbered hunks", () => {
+    const patch =
+      "--- a/f\n+++ b/f\n@@ -1,2 +1,2 @@\n ctx1\n-a\n+A\n@@ -10,2 +10,3 @@\n ctx2\n+added\n ctx3\n";
+
+    const hunks = parseUnifiedDiff(patch);
+
+    expect(hunks).toHaveLength(2);
+    expect(hunks[1].lines).toEqual([
+      { type: "context", content: "ctx2", oldLineNumber: 10, newLineNumber: 10 },
+      { type: "added", content: "added", newLineNumber: 11 },
+      { type: "context", content: "ctx3", oldLineNumber: 11, newLineNumber: 12 },
+    ]);
+  });
+
+  it("returns [] for an empty or unparseable patch (caller renders a raw fallback)", () => {
+    expect(parseUnifiedDiff("")).toEqual([]);
+    expect(parseUnifiedDiff("this is not a diff at all")).toEqual([]);
+  });
+
+  it("produces the same line shape as computeDiff for an equivalent change", () => {
+    // computeDiff (before/after text) and parseUnifiedDiff (a patch string) must
+    // map a change to identical DiffLines — they share mapPatchHunks.
+    const computed = computeDiff("alpha\n", "beta\n");
+    const parsed = parseUnifiedDiff("@@ -1 +1 @@\n-alpha\n+beta\n");
+
+    expect(parsed[0].lines).toEqual(computed[0].lines);
+  });
+});

package/src/version-history/computeDiff.ts

@@ -1,12 +1,15 @@
 import { structuredPatch } from "diff";
-import type { DiffHunk, DiffLine } from "./types";
+import { mapPatchHunks } from "./diff-hunks.js";
+import type { DiffHunk } from "./types.js";
 
 /**
  * Compute a unified diff between two text strings.
  *
  * Returns an array of {@link DiffHunk} objects, each containing the
  * changed and context lines with line numbers. Uses the `diff` library's
- * Myers algorithm internally.
+ * Myers algorithm internally, then maps the structured hunks through the
+ * shared {@link mapPatchHunks} (the same mapper `parseUnifiedDiff` uses), so a
+ * computed diff and a parsed unified diff render line-for-line identically.
  *
  * Pure function — no side effects, safe to call outside React.
  *
@@ -23,39 +26,5 @@ export function computeDiff(
     context: contextLines,
   });
 
-  return patch.hunks.map((hunk) => {
-    const lines: DiffLine[] = [];
-    let oldLine = hunk.oldStart;
-    let newLine = hunk.newStart;
-
-    for (const raw of hunk.lines) {
-      const prefix = raw[0];
-      const content = raw.slice(1);
-
-      if (prefix === "+") {
-        lines.push({ type: "added", content, newLineNumber: newLine });
-        newLine++;
-      } else if (prefix === "-") {
-        lines.push({ type: "removed", content, oldLineNumber: oldLine });
-        oldLine++;
-      } else {
-        lines.push({
-          type: "context",
-          content,
-          oldLineNumber: oldLine,
-          newLineNumber: newLine,
-        });
-        oldLine++;
-        newLine++;
-      }
-    }
-
-    return {
-      oldStart: hunk.oldStart,
-      oldLines: hunk.oldLines,
-      newStart: hunk.newStart,
-      newLines: hunk.newLines,
-      lines,
-    };
-  });
+  return mapPatchHunks(patch.hunks);
 }

package/src/version-history/computeMultiFileDiff.ts

@@ -1,5 +1,5 @@
-import type { DiffHunk, FileDiffEntry, MultiFileDiffResult } from "./types";
-import { computeDiff } from "./computeDiff";
+import type { DiffHunk, FileDiffEntry, MultiFileDiffResult } from "./types.js";
+import { computeDiff } from "./computeDiff.js";
 
 /**
  * Compute a multi-file diff between two snapshots of a file tree.

package/src/version-history/diff-hunks.ts

@@ -0,0 +1,63 @@
+import type { StructuredPatchHunk } from "diff";
+import type { DiffHunk, DiffLine } from "./types.js";
+
+/**
+ * Maps the `diff` library's structured-patch hunks into our presentation
+ * {@link DiffHunk} shape, assigning running old/new line numbers per line.
+ *
+ * This is the single source of truth for the hunk mapping, shared by
+ * {@link computeDiff} (which feeds it `structuredPatch` output computed from
+ * before/after text) and `parseUnifiedDiff` (which feeds it `parsePatch` output
+ * parsed from a unified-diff string). Both functions in the `diff` library emit
+ * the identical {@link StructuredPatchHunk} shape, so one mapper serves both and
+ * the two diff sources can never drift in how a `+`/`-`/context line becomes a
+ * {@link DiffLine}.
+ *
+ * `` markers are skipped: they are diff metadata, not
+ * content, and would otherwise be mis-rendered as a spurious context line.
+ *
+ * Pure function — no side effects, safe to call outside React.
+ */
+export function mapPatchHunks(
+  hunks: readonly StructuredPatchHunk[],
+): readonly DiffHunk[] {
+  return hunks.map((hunk) => {
+    const lines: DiffLine[] = [];
+    let oldLine = hunk.oldStart;
+    let newLine = hunk.newStart;
+
+    for (const raw of hunk.lines) {
+      // "" is a metadata marker, not a real line.
+      if (raw.startsWith("\\")) continue;
+
+      const prefix = raw[0];
+      const content = raw.slice(1);
+
+      if (prefix === "+") {
+        lines.push({ type: "added", content, newLineNumber: newLine });
+        newLine++;
+      } else if (prefix === "-") {
+        lines.push({ type: "removed", content, oldLineNumber: oldLine });
+        oldLine++;
+      } else {
+        // A context line (leading space) or an empty raw line.
+        lines.push({
+          type: "context",
+          content,
+          oldLineNumber: oldLine,
+          newLineNumber: newLine,
+        });
+        oldLine++;
+        newLine++;
+      }
+    }
+
+    return {
+      oldStart: hunk.oldStart,
+      oldLines: hunk.oldLines,
+      newStart: hunk.newStart,
+      newLines: hunk.newLines,
+      lines,
+    };
+  });
+}

package/src/version-history/index.ts

@@ -1,15 +1,16 @@
-export { VersionTimeline } from "./VersionTimeline";
-export { VersionTimelineEntry } from "./VersionTimelineEntry";
-export { DiffViewer } from "./DiffViewer";
-export type { DiffViewerProps } from "./DiffViewer";
-export { DiffFileList } from "./DiffFileList";
-export type { DiffFileListProps } from "./DiffFileList";
-export { DiffSummary } from "./DiffSummary";
-export type { DiffSummaryProps } from "./DiffSummary";
-export { MultiFileDiffView } from "./MultiFileDiffView";
-export type { MultiFileDiffViewProps } from "./MultiFileDiffView";
-export { computeDiff } from "./computeDiff";
-export { computeMultiFileDiff } from "./computeMultiFileDiff";
+export { VersionTimeline } from "./VersionTimeline.js";
+export { VersionTimelineEntry } from "./VersionTimelineEntry.js";
+export { DiffViewer } from "./DiffViewer.js";
+export type { DiffViewerProps } from "./DiffViewer.js";
+export { DiffFileList } from "./DiffFileList.js";
+export type { DiffFileListProps } from "./DiffFileList.js";
+export { DiffSummary } from "./DiffSummary.js";
+export type { DiffSummaryProps } from "./DiffSummary.js";
+export { MultiFileDiffView } from "./MultiFileDiffView.js";
+export type { MultiFileDiffViewProps } from "./MultiFileDiffView.js";
+export { computeDiff } from "./computeDiff.js";
+export { parseUnifiedDiff } from "./parseUnifiedDiff.js";
+export { computeMultiFileDiff } from "./computeMultiFileDiff.js";
 export type {
   VersionEntry,
   VersionTimelineProps,
@@ -19,4 +20,4 @@ export type {
   FileDiffEntry,
   MultiFileDiffResult,
   DiffViewMode,
-} from "./types";
+} from "./types.js";

package/src/version-history/parseUnifiedDiff.ts

@@ -0,0 +1,34 @@
+import { parsePatch } from "diff";
+import { mapPatchHunks } from "./diff-hunks.js";
+import type { DiffHunk } from "./types.js";
+
+/**
+ * Parses a unified-diff patch *string* into presentation {@link DiffHunk}s.
+ *
+ * This is the bridge that lets a harness which only emits a ready unified diff
+ * (the Cursor harness's `diffString` -> `view.unifiedDiff` / `FileChange.
+ * unifiedDiff`) render through the same accessible {@link DiffViewer} table as a
+ * computed before/after diff — instead of being dumped as a raw `<pre>` with the
+ * `--- /dev/null`, `+++ b/...`, `@@` preamble and inline `+`/`-` prefixes.
+ *
+ * The `---`/`+++` file headers parse into metadata and are discarded; only the
+ * hunks survive, mapped through the shared {@link mapPatchHunks}. A diff input is
+ * a single file's patch, but `parsePatch` can return multiple file entries, so
+ * their hunks are flattened defensively.
+ *
+ * Returns `[]` for an empty or unparseable patch, so callers can fall back to a
+ * truthful raw rendering rather than showing a misleading "No changes".
+ *
+ * Pure function — no side effects, safe to call outside React.
+ */
+export function parseUnifiedDiff(patch: string): readonly DiffHunk[] {
+  if (!patch) return [];
+
+  try {
+    return parsePatch(patch).flatMap((file) => mapPatchHunks(file.hunks));
+  } catch {
+    // parsePatch can throw on a badly malformed patch; degrade to "no hunks" so
+    // the caller renders its raw fallback instead of crashing the thread.
+    return [];
+  }
+}

package/src/workflow/ApprovalFormBuilder.tsx

@@ -3,8 +3,8 @@
 import { memo, useState, useCallback, useMemo } from "react";
 import { cn } from "@stigmer/theme";
 import type { JsonObject } from "@bufbuild/protobuf";
-import type { WorkflowGraphEdge } from "./workflow-graph-model";
-import { TASK_NAME_PATTERN, TASK_NAME_PATTERN_ERROR } from "./canvas-constants";
+import type { WorkflowGraphEdge } from "./workflow-graph-model.js";
+import { TASK_NAME_PATTERN, TASK_NAME_PATTERN_ERROR } from "./canvas-constants.js";
 
 // ---------------------------------------------------------------------------
 // Types

package/src/workflow/BranchConditionBuilder.tsx

@@ -3,8 +3,8 @@
 import { memo, useState, useCallback, useRef } from "react";
 import { cn } from "@stigmer/theme";
 import type { JsonObject } from "@bufbuild/protobuf";
-import type { WorkflowGraphEdge } from "./workflow-graph-model";
-import { TASK_NAME_PATTERN, TASK_NAME_PATTERN_ERROR } from "./canvas-constants";
+import type { WorkflowGraphEdge } from "./workflow-graph-model.js";
+import { TASK_NAME_PATTERN, TASK_NAME_PATTERN_ERROR } from "./canvas-constants.js";
 
 interface SwitchCaseEntry {
   name: string;

package/src/workflow/CanvasActionsContext.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { createContext } from "react";
-import type { WorkflowGraphModel } from "./workflow-graph-model";
+import type { WorkflowGraphModel } from "./workflow-graph-model.js";
 
 export interface CanvasActions {
   insertTaskOnEdge: (edgeId: string, kindString: string) => void;

package/src/workflow/CanvasContextMenu.tsx

@@ -4,9 +4,9 @@ import { memo, useCallback, useMemo } from "react";
 import { Menu } from "@base-ui/react/menu";
 import { Separator } from "@base-ui/react/separator";
 import { cn } from "@stigmer/theme";
-import { useStigmerPortalContainer } from "../portal-container";
-import { TrashIcon, DuplicateIcon, PlusIcon } from "./canvas-icons";
-import { getShortcutHint } from "./shortcut-registry";
+import { useStigmerPortalContainer } from "../portal-container.js";
+import { TrashIcon, DuplicateIcon, PlusIcon } from "./canvas-icons.js";
+import { getShortcutHint } from "./shortcut-registry.js";
 
 // ---------------------------------------------------------------------------
 // Types

package/src/workflow/CanvasTransitionEdge.tsx

@@ -4,12 +4,12 @@ import { memo, useCallback, useContext, useMemo, useRef, useState } from "react"
 import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from "@xyflow/react";
 import type { EdgeProps } from "@xyflow/react";
 import { cn } from "@stigmer/theme";
-import type { CanvasTransitionEdgeData } from "./workflow-graph-conversions";
-import type { EdgeExecutionState } from "./execution";
-import type { EdgeDiffStatus } from "./diff/types";
-import { CanvasActionsContext } from "./CanvasActionsContext";
-import { TaskPickerPopover } from "./TaskPickerPopover";
-import { useWorkflowGraphMode } from "./WorkflowGraphModeContext";
+import type { CanvasTransitionEdgeData } from "./workflow-graph-conversions.js";
+import type { EdgeExecutionState } from "./execution/index.js";
+import type { EdgeDiffStatus } from "./diff/types.js";
+import { CanvasActionsContext } from "./CanvasActionsContext.js";
+import { TaskPickerPopover } from "./TaskPickerPopover.js";
+import { useWorkflowGraphMode } from "./WorkflowGraphModeContext.js";
 
 // ---------------------------------------------------------------------------
 // Execution-state visual mapping (DD-T06-005)