@agent-native/core 0.41.1 → 0.43.0

package/dist/client/blocks/library/DiffBlock.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { IconChevronRight, IconColumns, IconDotsVertical, IconFileDiff, IconList, } from "@tabler/icons-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { IconChevronRight, IconColumns, IconDotsVertical, IconFileDiff, IconList, IconPlus, IconTrash, } from "@tabler/icons-react";
 import { common, createLowlight } from "lowlight";
 import { cn } from "../../utils.js";
+import { AnnotationGutterMarker, InlineAnnotationNote, buildLineMarkerMap, hasRailAnnotations, resolveAnnotations, } from "./annotation-rail.js";
 import { DevInput, DevLabel, DevTextarea, DevSelect } from "./dev-doc-ui.js";
 /**
  * Split text into lines, each KEEPING its trailing newline (so the change
@@ -228,6 +229,19 @@ function SyntaxHighlightedLine({ code, language, }) {
     }, [code, language]);
     return _jsx(_Fragment, { children: highlighted ?? code });
 }
+/** The default side an annotation targets when `side` is omitted. */
+function annotationSide(annotation) {
+    return annotation.side === "before" ? "before" : "after";
+}
+/**
+ * Count 1-based source lines in a side's text, matching how `buildRows` numbers
+ * `oldNo`/`newNo`: a trailing newline does not add a phantom final line.
+ */
+function countLines(text) {
+    if (text === "")
+        return 0;
+    return splitLines(text).length;
+}
 /** Number of context lines above which an unchanged run is collapsed. */
 const COLLAPSE_THRESHOLD = 6;
 /** Context lines kept visible at each edge of a collapsed run. */
@@ -272,9 +286,32 @@ function buildRows(changes) {
  * Group rows into segments, collapsing interior runs of >COLLAPSE_THRESHOLD
  * context rows (keeping CONTEXT_EDGE visible at each side). Leading/trailing runs
  * collapse too, but keep only the inner edge visible.
+ *
+ * `isAnchored` marks context rows that carry an annotation (or sit adjacent to
+ * one): an anchored row is NEVER hidden inside a collapsed run, so a note that
+ * targets an unchanged line stays reachable. An anchor splits its run into the
+ * separately-collapsible spans on either side of it, with CONTEXT_EDGE rows kept
+ * visible around the anchor.
  */
-function segmentRows(rows) {
+function segmentRows(rows, isAnchored) {
     const segments = [];
+    // Collapse one contiguous context run [from, to) that contains NO anchors.
+    const collapseRun = (run, atStart, atEnd) => {
+        if (run.length <= COLLAPSE_THRESHOLD) {
+            for (const row of run)
+                segments.push(row);
+            return;
+        }
+        const head = atStart ? [] : run.slice(0, CONTEXT_EDGE);
+        const tail = atEnd ? [] : run.slice(run.length - CONTEXT_EDGE);
+        const hidden = run.slice(head.length, run.length - tail.length);
+        for (const row of head)
+            segments.push(row);
+        if (hidden.length > 0)
+            segments.push({ collapsed: true, rows: hidden });
+        for (const row of tail)
+            segments.push(row);
+    };
     let i = 0;
     while (i < rows.length) {
         if (rows[i].kind !== "context") {
@@ -286,23 +323,29 @@ function segmentRows(rows) {
         let j = i;
         while (j < rows.length && rows[j].kind === "context")
             j += 1;
-        const run = rows.slice(i, j);
-        if (run.length <= COLLAPSE_THRESHOLD) {
-            for (const row of run)
-                segments.push(row);
+        const fullRun = rows.slice(i, j);
+        const runAtStart = i === 0;
+        const runAtEnd = j === rows.length;
+        if (!isAnchored || !fullRun.some(isAnchored)) {
+            collapseRun(fullRun, runAtStart, runAtEnd);
         }
         else {
-            const atStart = i === 0;
-            const atEnd = j === rows.length;
-            const head = atStart ? [] : run.slice(0, CONTEXT_EDGE);
-            const tail = atEnd ? [] : run.slice(run.length - CONTEXT_EDGE);
-            const hidden = run.slice(head.length, run.length - tail.length);
-            for (const row of head)
-                segments.push(row);
-            if (hidden.length > 0)
-                segments.push({ collapsed: true, rows: hidden });
-            for (const row of tail)
-                segments.push(row);
+            // Walk the run, emitting anchored rows verbatim and collapsing the
+            // unanchored spans between them. An anchored row is always visible; the
+            // spans on each side of it collapse independently.
+            let spanStart = 0;
+            for (let k = 0; k <= fullRun.length; k += 1) {
+                const atAnchor = k < fullRun.length && isAnchored(fullRun[k]);
+                if (atAnchor || k === fullRun.length) {
+                    const span = fullRun.slice(spanStart, k);
+                    if (span.length > 0) {
+                        collapseRun(span, runAtStart && spanStart === 0, runAtEnd && k === fullRun.length);
+                    }
+                    if (k < fullRun.length)
+                        segments.push(fullRun[k]);
+                    spanStart = k + 1;
+                }
+            }
         }
         i = j;
     }
@@ -329,10 +372,42 @@ const SIGN = {
     removed: "−",
     context: " ",
 };
-const LINE_NO_CLASS = "select-none px-2 py-0 text-right font-mono text-[12px] leading-5 text-muted-foreground tabular-nums";
-const DIFF_LINE_CLASS = "block min-w-max flex-1 whitespace-pre px-2 py-0 font-mono text-[12px] leading-5 text-foreground";
+const LINE_NO_CLASS = "select-none px-2 py-0 text-right font-mono [font-size:var(--plan-code-size)] leading-5 text-muted-foreground tabular-nums";
+const DIFF_LINE_CLASS = "block min-w-max flex-1 whitespace-pre px-2 py-0 font-mono [font-size:var(--plan-code-size)] leading-5 text-foreground";
 const DEFAULT_VISIBLE_DIFF_LINES = 15;
 const MAX_DIFF_LCS_CELLS = 1_000_000;
+/**
+ * Below this rendered container width (px) a diff drops side-by-side `split`
+ * mode and falls back to `unified`: split's two line-number gutters double the
+ * width the code needs, exactly where space is tightest (e.g. a diff nested in a
+ * vertical-tabs content column). Measured from the block's own box, not the
+ * viewport, so the fallback fires by available width at any nesting depth.
+ */
+const SPLIT_MIN_WIDTH = 560;
+/**
+ * Observe the rendered inline width of an element. Returns a ref to attach plus
+ * the measured content-box width (null until the first ResizeObserver tick).
+ * Lets the diff pick an effective mode from the width it was actually handed — a
+ * measurement CSS container queries can't drive, since switching split↔unified
+ * is a structural (DOM) change, not a style toggle.
+ */
+function useContainerWidth() {
+    const ref = useRef(null);
+    const [width, setWidth] = useState(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry)
+                setWidth(entry.contentRect.width);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    return [ref, width];
+}
 function splitDiffFilename(filename) {
     const value = filename?.trim() || "diff";
     const segments = value.split("/").filter(Boolean);
@@ -345,21 +420,81 @@ function DiffLineText({ language, text }) {
     return (_jsx("span", { className: DIFF_LINE_CLASS, children: _jsx(SyntaxHighlightedLine, { code: code, language: language }) }));
 }
 /* ── Read ──────────────────────────────────────────────────────────────────── */
-function DiffRead({ data, blockId, title, summary }) {
+function DiffRead({ data, blockId, title, summary, ctx, }) {
     const [mode, setMode] = useState(data.mode ?? "unified");
     const [expanded, setExpanded] = useState(() => new Set());
     const [showAllRows, setShowAllRows] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const [containerRef, containerWidth] = useContainerWidth();
     const rows = useMemo(() => buildRows(diffLines(data.before, data.after)), [data.before, data.after]);
     const language = useMemo(() => resolveDiffLanguage(data), [data.filename, data.language]);
     const fileParts = useMemo(() => splitDiffFilename(data.filename), [data.filename]);
     const splitLineCount = useMemo(() => pairSplitRows(rows).length, [rows]);
+    // Resolve annotations against the side they target. A `before` annotation's
+    // `lines` ref is clamped to the OLD file's line count and matched on `oldNo`;
+    // an `after` (default) ref to the NEW file and matched on `newNo`. Markers are
+    // authoring-order across BOTH sides so a note ↔ row ↔ rail card share one id.
+    const beforeLineCount = useMemo(() => countLines(data.before), [data.before]);
+    const afterLineCount = useMemo(() => countLines(data.after), [data.after]);
+    const resolved = useMemo(() => resolveAnnotations(data.annotations, (annotation) => annotationSide(annotation) === "before"
+        ? beforeLineCount
+        : afterLineCount), [data.annotations, beforeLineCount, afterLineCount]);
+    const hasAnnotations = hasRailAnnotations(resolved);
+    // Effective render mode. Annotated diffs always render unified so the inline
+    // notes read in flow (there is no side rail); and any diff in a container
+    // narrower than SPLIT_MIN_WIDTH falls back to unified so split's doubled
+    // gutters never crush the code. `canSplit` also gates the mode toggle so it is
+    // hidden whenever split is unavailable.
+    const narrow = containerWidth != null && containerWidth < SPLIT_MIN_WIDTH;
+    const canSplit = !hasAnnotations && !narrow;
+    const effectiveMode = canSplit ? mode : "unified";
+    // Side-scoped line → markers maps so a row only lights from its own side.
+    const beforeMarkers = useMemo(() => buildLineMarkerMap(resolved.filter((r) => annotationSide(r.annotation) === "before")), [resolved]);
+    const afterMarkers = useMemo(() => buildLineMarkerMap(resolved.filter((r) => annotationSide(r.annotation) !== "before")), [resolved]);
+    const markersForRow = useMemo(() => {
+        return (row, side) => {
+            const out = [];
+            if ((side === undefined || side === "old") &&
+                row.oldNo != null &&
+                row.kind !== "added") {
+                out.push(...(beforeMarkers.get(row.oldNo) ?? []));
+            }
+            if ((side === undefined || side === "new") &&
+                row.newNo != null &&
+                row.kind !== "removed") {
+                out.push(...(afterMarkers.get(row.newNo) ?? []));
+            }
+            return out;
+        };
+    }, [beforeMarkers, afterMarkers]);
+    // A context row that carries a marker is an anchor: never collapse it away.
+    const anchoredRow = useMemo(() => {
+        if (!hasAnnotations)
+            return undefined;
+        return (row) => markersForRow(row).length > 0;
+    }, [hasAnnotations, markersForRow]);
     const added = rows.filter((r) => r.kind === "added").length;
     const removed = rows.filter((r) => r.kind === "removed").length;
     const unchanged = data.before === data.after;
-    const totalVisibleLineCount = mode === "split" ? splitLineCount : rows.length;
+    const totalVisibleLineCount = effectiveMode === "split" ? splitLineCount : rows.length;
     const shouldLimitRows = totalVisibleLineCount > DEFAULT_VISIBLE_DIFF_LINES;
-    const rowLimit = !showAllRows && shouldLimitRows ? DEFAULT_VISIBLE_DIFF_LINES : undefined;
-    const displayedRows = mode === "unified" && rowLimit ? rows.slice(0, rowLimit) : rows;
+    // Never truncate away an annotated row: extend the window past the last one.
+    const effectiveRowLimit = useMemo(() => {
+        if (showAllRows || !shouldLimitRows)
+            return undefined;
+        let limit = DEFAULT_VISIBLE_DIFF_LINES;
+        if (hasAnnotations) {
+            for (let idx = rows.length - 1; idx >= limit; idx -= 1) {
+                if (markersForRow(rows[idx]).length > 0) {
+                    limit = idx + 1;
+                    break;
+                }
+            }
+        }
+        return limit;
+    }, [showAllRows, shouldLimitRows, hasAnnotations, rows, markersForRow]);
+    const rowLimit = effectiveRowLimit;
+    const displayedRows = effectiveMode === "unified" && rowLimit ? rows.slice(0, rowLimit) : rows;
     const toggleRun = (index) => setExpanded((prev) => {
         const next = new Set(prev);
         if (next.has(index))
@@ -368,31 +503,93 @@ function DiffRead({ data, blockId, title, summary }) {
             next.add(index);
         return next;
     });
-    return (_jsxs("section", { className: "plan-block group/diff-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), _jsxs("div", { className: "overflow-hidden rounded-md border border-border bg-background", children: [_jsxs("div", { className: "flex min-h-10 flex-wrap items-center gap-2 border-b border-border bg-muted/60 px-3 py-1.5", children: [_jsx(IconFileDiff, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-1.5 font-mono", title: data.filename || undefined, children: [_jsx("span", { className: "min-w-0 max-w-[16rem] truncate text-[13px] font-semibold leading-5 text-foreground", children: fileParts.basename }), fileParts.directory && (_jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] leading-5 text-muted-foreground/70", children: fileParts.directory }))] }), _jsxs("span", { className: "ml-1 flex shrink-0 items-center gap-2 font-mono text-xs", children: [_jsxs("span", { className: "text-emerald-700 dark:text-emerald-300", children: ["+", added] }), _jsxs("span", { className: "text-destructive", children: ["\u2212", removed] })] }), _jsxs("div", { className: "pointer-events-none ml-auto flex shrink-0 items-center overflow-hidden rounded-md border border-border bg-background opacity-0 transition-opacity group-hover/diff-block:pointer-events-auto group-hover/diff-block:opacity-100 group-focus-within/diff-block:pointer-events-auto group-focus-within/diff-block:opacity-100", children: [_jsx(ModeButton, { active: mode === "unified", onClick: () => setMode("unified"), icon: _jsx(IconList, { className: "size-3.5" }), label: "Unified" }), _jsx(ModeButton, { active: mode === "split", onClick: () => setMode("split"), icon: _jsx(IconColumns, { className: "size-3.5" }), label: "Split" })] })] }), unchanged ? (_jsx("div", { className: "px-4 py-6 text-center font-mono text-sm text-muted-foreground", children: "No changes" })) : mode === "split" ? (_jsx(SplitView, { rows: rows, language: language, rowLimit: rowLimit })) : (_jsx(UnifiedView, { rows: displayedRows, language: language, expanded: expanded, onToggleRun: toggleRun })), !unchanged && shouldLimitRows && (_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-expanded": showAllRows, onClick: () => setShowAllRows((current) => !current), className: "flex h-7 w-full items-center justify-center gap-1.5 border-t border-border bg-background px-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground", children: [_jsx(IconChevronRight, { className: cn("size-3 shrink-0 transition-transform", showAllRows ? "-rotate-90" : "rotate-90") }), showAllRows
+    return (_jsxs("section", { ref: containerRef, className: "plan-block group/diff-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), summary && (_jsx("p", { className: "mb-3 text-sm leading-relaxed text-plan-muted", children: summary })), _jsxs("div", { className: "overflow-hidden rounded-md border border-border bg-background", children: [_jsxs("div", { className: "flex min-h-10 flex-wrap items-center gap-2 border-b border-border bg-muted/60 px-3 py-1.5", children: [_jsx(IconFileDiff, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-1.5 font-mono", title: data.filename || undefined, children: [_jsx("span", { className: "min-w-0 max-w-[16rem] truncate text-[13px] font-semibold leading-5 text-foreground", children: fileParts.basename }), fileParts.directory && (_jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] leading-5 text-muted-foreground/70", children: fileParts.directory }))] }), _jsxs("span", { className: "ml-1 flex shrink-0 items-center gap-2 font-mono text-xs", children: [_jsxs("span", { className: "text-emerald-700 dark:text-emerald-300", children: ["+", added] }), _jsxs("span", { className: "text-destructive", children: ["\u2212", removed] })] }), canSplit && (_jsxs("div", { className: "pointer-events-none ml-auto flex shrink-0 items-center overflow-hidden rounded-md border border-border bg-background opacity-0 transition-opacity group-hover/diff-block:pointer-events-auto group-hover/diff-block:opacity-100 group-focus-within/diff-block:pointer-events-auto group-focus-within/diff-block:opacity-100", children: [_jsx(ModeButton, { active: mode === "unified", onClick: () => setMode("unified"), icon: _jsx(IconList, { className: "size-3.5" }), label: "Unified" }), _jsx(ModeButton, { active: mode === "split", onClick: () => setMode("split"), icon: _jsx(IconColumns, { className: "size-3.5" }), label: "Split" })] }))] }), unchanged ? (_jsx("div", { className: "px-4 py-6 text-center font-mono text-sm text-muted-foreground", children: "No changes" })) : effectiveMode === "split" ? (_jsx(SplitView, { rows: rows, language: language, rowLimit: rowLimit, markersForRow: markersForRow, activeIndex: activeIndex, onActiveChange: setActiveIndex })) : (_jsx(UnifiedView, { rows: displayedRows, language: language, expanded: expanded, onToggleRun: toggleRun, markersForRow: markersForRow, anchoredRow: anchoredRow, activeIndex: activeIndex, onActiveChange: setActiveIndex, ctx: ctx })), !unchanged && shouldLimitRows && (_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-expanded": showAllRows, onClick: () => setShowAllRows((current) => !current), className: "flex h-7 w-full items-center justify-center gap-1.5 border-t border-border bg-background px-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground", children: [_jsx(IconChevronRight, { className: cn("size-3 shrink-0 transition-transform", showAllRows ? "-rotate-90" : "rotate-90") }), showAllRows
                                 ? "Show fewer"
-                                : `Show all ${totalVisibleLineCount} lines`] }))] }), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
+                                : `Show all ${totalVisibleLineCount} lines`] }))] })] }));
 }
 function ModeButton({ active, onClick, icon, label, }) {
     return (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: onClick, "aria-pressed": active, className: cn("flex cursor-pointer items-center gap-1 px-2 py-1 text-xs font-medium transition-colors", active
             ? "bg-accent text-accent-foreground"
             : "text-muted-foreground hover:bg-muted/80 hover:text-foreground"), children: [icon, label] }));
 }
+/**
+ * The numbered marker pip(s) for a row plus the active-state it derives. Returns
+ * `null` when the row carries no annotation so unannotated diffs render an empty
+ * marker column (or no column at all when the whole diff is unannotated).
+ */
+function rowMarkerInfo(markers, activeIndex) {
+    if (markers.length === 0)
+        return null;
+    const isActive = markers.some((m) => m.index === activeIndex);
+    return { isActive, primaryIndex: markers[0].index };
+}
+/** Shared amber wash for an annotated row, brighter when active. */
+function annotatedRowBg(info) {
+    if (!info)
+        return null;
+    return info.isActive
+        ? "bg-amber-400/20 dark:bg-amber-300/15"
+        : "bg-amber-400/[0.07] dark:bg-amber-300/[0.07]";
+}
+/**
+ * Whether `row` is the FIRST line of `marker`'s resolved range. The numbered pip
+ * renders only on this line, so a multi-line annotation shows a single marker at
+ * the top of its span instead of repeating the same number down every line it
+ * covers. The amber band still washes the whole range (via `annotatedRowBg`), so
+ * the span stays visually grouped without the column of duplicate numbers.
+ */
+function isMarkerRangeStart(row, marker) {
+    if (!marker.range)
+        return false;
+    const lineNo = annotationSide(marker.annotation) === "before" ? row.oldNo : row.newNo;
+    return lineNo === marker.range.start;
+}
 /* ── Unified view ──────────────────────────────────────────────────────────── */
-function UnifiedView({ rows, language, expanded, onToggleRun, }) {
-    const segments = useMemo(() => segmentRows(rows), [rows]);
+function UnifiedView({ rows, language, expanded, onToggleRun, markersForRow, anchoredRow, activeIndex, onActiveChange, ctx, }) {
+    const segments = useMemo(() => segmentRows(rows, anchoredRow), [rows, anchoredRow]);
+    // Any annotation present ⇒ reserve the marker column so rows stay aligned.
+    const showMarkerColumn = useMemo(() => rows.some((row) => markersForRow(row).length > 0), [rows, markersForRow]);
+    const rowProps = {
+        language,
+        markersForRow,
+        activeIndex,
+        onActiveChange,
+        showMarkerColumn,
+    };
+    // A diff row plus any notes anchored to it: each annotation renders ONE
+    // full-width inline note directly under the FIRST line of its range (matched
+    // by `isMarkerRangeStart`), so the row's numbered pip and its note read as a
+    // single GitHub-style unit and the note never repeats down a multi-line span.
+    const renderRow = (row, key) => {
+        const notes = markersForRow(row).filter((marker) => isMarkerRangeStart(row, marker));
+        return (_jsxs("div", { children: [_jsx(UnifiedRow, { row: row, ...rowProps }), notes.map((item) => (_jsx(InlineAnnotationNote, { item: item, active: item.index === activeIndex, onActiveChange: onActiveChange, ctx: ctx }, `note-${item.index}`)))] }, key));
+    };
     let runIndex = 0;
-    return (_jsx("div", { className: "overflow-x-auto", children: _jsx("div", { className: "w-max min-w-full font-mono text-[13px] leading-5", children: segments.map((segment, idx) => {
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsx("div", { className: "w-max min-w-full font-mono [font-size:var(--plan-code-size)] leading-5", children: segments.map((segment, idx) => {
                 if ("collapsed" in segment) {
                     const key = runIndex++;
                     const open = expanded.has(key);
                     return (_jsxs("div", { children: [_jsx(CollapsedRow, { count: segment.rows.length, open: open, onClick: () => onToggleRun(key) }), open &&
-                                segment.rows.map((row, ri) => (_jsx(UnifiedRow, { row: row, language: language }, `run-${key}-${ri}`)))] }, `run-${key}`));
+                                segment.rows.map((row, ri) => renderRow(row, `run-${key}-${ri}`))] }, `run-${key}`));
                 }
-                return _jsx(UnifiedRow, { row: segment, language: language }, idx);
+                return renderRow(segment, String(idx));
             }) }) }));
 }
-function UnifiedRow({ language, row }) {
-    return (_jsxs("div", { className: cn("flex min-h-5 min-w-full", ROW_BG[row.kind]), children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]"), children: row.oldNo ?? "" }), _jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]"), children: row.newNo ?? "" }), _jsx("span", { className: cn("w-6 shrink-0 select-none py-0 text-center font-semibold leading-5", GUTTER_BG[row.kind], SIGN_COLOR[row.kind]), children: SIGN[row.kind] }), _jsx(DiffLineText, { text: row.text, language: language })] }));
+function UnifiedRow({ language, row, markersForRow, activeIndex, onActiveChange, showMarkerColumn, }) {
+    const markers = markersForRow(row);
+    const info = rowMarkerInfo(markers, activeIndex);
+    const startMarker = markers.find((marker) => isMarkerRangeStart(row, marker));
+    return (_jsxs("div", { className: cn("flex min-h-5 min-w-full", ROW_BG[row.kind], annotatedRowBg(info)), onMouseEnter: info ? () => onActiveChange(info.primaryIndex) : undefined, onMouseLeave: info ? () => onActiveChange(null) : undefined, children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]"), children: row.oldNo ?? "" }), _jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]"), children: row.newNo ?? "" }), _jsx("span", { className: cn("w-6 shrink-0 select-none py-0 text-center font-semibold leading-5", GUTTER_BG[row.kind], SIGN_COLOR[row.kind]), children: SIGN[row.kind] }), showMarkerColumn && (_jsx(MarkerCell, { startMarker: startMarker, active: startMarker != null && startMarker.index === activeIndex })), _jsx(DiffLineText, { text: row.text, language: language })] }));
+}
+/**
+ * The fixed-width marker column rendered between the sign gutter and the code.
+ * `startMarker` is set only on the FIRST line of an annotation's range, so the
+ * numbered pip appears once at the top of a span; every other row (the rest of a
+ * span, and every unannotated row in a diff that has annotations) renders an
+ * empty spacer so the code text stays aligned.
+ */
+function MarkerCell({ startMarker, active, }) {
+    return (_jsx("span", { className: "flex w-6 shrink-0 select-none items-center justify-center py-0", children: startMarker != null && (_jsx(AnnotationGutterMarker, { marker: startMarker.marker, active: active })) }));
 }
 function CollapsedRow({ count, open, onClick, }) {
     return (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: onClick, className: "flex w-full cursor-pointer items-center gap-2 border-y border-border bg-muted/70 px-3 py-1 text-left text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: [_jsx(IconDotsVertical, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [open ? "Hide" : "Show", " ", count, " unchanged line", count === 1 ? "" : "s"] })] }));
@@ -426,28 +623,57 @@ function pairSplitRows(rows) {
     }
     return out;
 }
-function SplitView({ language, rowLimit, rows, }) {
+function SplitView({ language, rowLimit, rows, markersForRow, activeIndex, onActiveChange, }) {
     const pairs = useMemo(() => pairSplitRows(rows), [rows]);
     const displayedPairs = rowLimit ? pairs.slice(0, rowLimit) : pairs;
-    return (_jsxs("div", { className: "flex w-full bg-background font-mono text-[12px] leading-5", children: [_jsx("div", { className: "min-w-0 flex-1 overflow-x-auto border-r border-border", children: _jsx("div", { className: "inline-block min-w-full", children: displayedPairs.map((pair, idx) => (_jsx(SplitCell, { row: pair.left, side: "old", language: language }, `old-${idx}`))) }) }), _jsx("div", { className: "min-w-0 flex-1 overflow-x-auto", children: _jsx("div", { className: "inline-block min-w-full", children: displayedPairs.map((pair, idx) => (_jsx(SplitCell, { row: pair.right, side: "new", language: language }, `new-${idx}`))) }) })] }));
+    // Reserve the marker column on a side only if any visible row there has one.
+    const showOldMarkers = useMemo(() => displayedPairs.some((pair) => pair.left && markersForRow(pair.left, "old").length > 0), [displayedPairs, markersForRow]);
+    const showNewMarkers = useMemo(() => displayedPairs.some((pair) => pair.right && markersForRow(pair.right, "new").length > 0), [displayedPairs, markersForRow]);
+    const cellProps = { language, markersForRow, activeIndex, onActiveChange };
+    return (_jsxs("div", { className: "flex w-full bg-background font-mono [font-size:var(--plan-code-size)] leading-5", children: [_jsx("div", { className: "min-w-0 flex-1 overflow-x-auto border-r border-border", children: _jsx("div", { className: "inline-block min-w-full", children: displayedPairs.map((pair, idx) => (_jsx(SplitCell, { row: pair.left, side: "old", showMarkerColumn: showOldMarkers, ...cellProps }, `old-${idx}`))) }) }), _jsx("div", { className: "min-w-0 flex-1 overflow-x-auto", children: _jsx("div", { className: "inline-block min-w-full", children: displayedPairs.map((pair, idx) => (_jsx(SplitCell, { row: pair.right, side: "new", showMarkerColumn: showNewMarkers, ...cellProps }, `new-${idx}`))) }) })] }));
 }
-function SplitCell({ language, row, side, }) {
+function SplitCell({ language, row, side, markersForRow, activeIndex, onActiveChange, showMarkerColumn, }) {
     if (!row) {
-        return (_jsxs("div", { className: "flex min-h-5 min-w-full bg-muted/40 opacity-70", children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]") }), _jsx("span", { className: "w-6 shrink-0 bg-muted/60" }), _jsx("span", { className: DIFF_LINE_CLASS, children: " " })] }));
+        return (_jsxs("div", { className: "flex min-h-5 min-w-full bg-muted/40 opacity-70", children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]") }), _jsx("span", { className: "w-6 shrink-0 bg-muted/60" }), showMarkerColumn && _jsx("span", { className: "w-6 shrink-0" }), _jsx("span", { className: DIFF_LINE_CLASS, children: " " })] }));
     }
     const sign = side === "old" ? "−" : "+";
     const showSign = row.kind !== "context";
-    return (_jsxs("div", { className: cn("flex min-h-5 min-w-full", ROW_BG[row.kind]), children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]"), children: side === "old" ? (row.oldNo ?? "") : (row.newNo ?? "") }), _jsx("span", { className: cn("w-6 shrink-0 select-none py-0 text-center font-semibold leading-5", GUTTER_BG[row.kind], SIGN_COLOR[row.kind]), children: showSign ? sign : " " }), _jsx(DiffLineText, { text: row.text, language: language })] }));
+    const markers = markersForRow(row, side);
+    const info = rowMarkerInfo(markers, activeIndex);
+    const startMarker = markers.find((marker) => isMarkerRangeStart(row, marker));
+    return (_jsxs("div", { className: cn("flex min-h-5 min-w-full", ROW_BG[row.kind], annotatedRowBg(info)), onMouseEnter: info ? () => onActiveChange(info.primaryIndex) : undefined, onMouseLeave: info ? () => onActiveChange(null) : undefined, children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]"), children: side === "old" ? (row.oldNo ?? "") : (row.newNo ?? "") }), _jsx("span", { className: cn("w-6 shrink-0 select-none py-0 text-center font-semibold leading-5", GUTTER_BG[row.kind], SIGN_COLOR[row.kind]), children: showSign ? sign : " " }), showMarkerColumn && (_jsx(MarkerCell, { startMarker: startMarker, active: startMarker != null && startMarker.index === activeIndex })), _jsx(DiffLineText, { text: row.text, language: language })] }));
 }
 /* ── Edit (panel) ──────────────────────────────────────────────────────────── */
 const codeAreaClass = "min-h-[140px] font-mono text-xs leading-5";
 function DiffEdit({ data, onChange, editable }) {
     const patch = (next) => onChange({ ...data, ...next });
     const mode = data.mode ?? "unified";
+    const annotations = data.annotations ?? [];
+    const updateAnnotation = (index, next) => patch({
+        annotations: annotations.map((annotation, i) => i === index ? { ...annotation, ...next } : annotation),
+    });
+    const removeAnnotation = (index) => patch({ annotations: annotations.filter((_, i) => i !== index) });
+    const addAnnotation = () => {
+        if (annotations.length >= 80)
+            return; // schema max
+        patch({
+            annotations: [
+                ...annotations,
+                { side: "after", lines: "1", label: "", note: "" },
+            ],
+        });
+    };
     return (_jsxs("div", { className: "flex flex-col gap-3", "data-plan-interactive": true, children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-filename", className: "text-xs", children: "Filename" }), _jsx(DevInput, { id: "diff-filename", value: data.filename ?? "", placeholder: "src/add.ts", disabled: !editable, onChange: (event) => patch({ filename: event.target.value || undefined }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-language", className: "text-xs", children: "Language" }), _jsx(DevInput, { id: "diff-language", value: data.language ?? "", placeholder: "ts", disabled: !editable, onChange: (event) => patch({ language: event.target.value || undefined }) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { className: "text-xs", children: "Layout" }), _jsx(DevSelect, { value: mode, disabled: !editable, onValueChange: (value) => patch({ mode: value }), options: [
                             { value: "unified", label: "Unified" },
                             { value: "split", label: "Split (side-by-side)" },
-                        ] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-before", className: "text-xs", children: "Before" }), _jsx(DevTextarea, { id: "diff-before", spellCheck: false, className: codeAreaClass, value: data.before, disabled: !editable, onChange: (event) => patch({ before: event.target.value }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-after", className: "text-xs", children: "After" }), _jsx(DevTextarea, { id: "diff-after", spellCheck: false, className: codeAreaClass, value: data.after, disabled: !editable, onChange: (event) => patch({ after: event.target.value }) })] })] }));
+                        ] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-before", className: "text-xs", children: "Before" }), _jsx(DevTextarea, { id: "diff-before", spellCheck: false, className: codeAreaClass, value: data.before, disabled: !editable, onChange: (event) => patch({ before: event.target.value }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-after", className: "text-xs", children: "After" }), _jsx(DevTextarea, { id: "diff-after", spellCheck: false, className: codeAreaClass, value: data.after, disabled: !editable, onChange: (event) => patch({ after: event.target.value }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(DevLabel, { className: "text-xs", children: "Annotations" }), editable && annotations.length < 80 && (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: addAnnotation, className: "flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-plan-muted transition-colors hover:bg-plan-block/60 hover:text-plan-text", children: [_jsx(IconPlus, { className: "size-3.5" }), "Add annotation"] }))] }), annotations.length === 0 && (_jsx("p", { className: "text-xs text-plan-muted", children: "No annotations yet. Add one to anchor a note to a line range on the before or after side." })), annotations.map((annotation, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-plan-line bg-plan-block/30 p-2", children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-[110px_110px_minmax(0,1fr)_auto]", children: [_jsx(DevSelect, { "aria-label": `Annotation ${index + 1} side`, value: annotation.side ?? "after", disabled: !editable, onValueChange: (value) => updateAnnotation(index, {
+                                            side: value,
+                                        }), options: [
+                                            { value: "after", label: "After" },
+                                            { value: "before", label: "Before" },
+                                        ] }), _jsx(DevInput, { "aria-label": `Annotation ${index + 1} lines`, value: annotation.lines, placeholder: "3-5", disabled: !editable, onChange: (event) => updateAnnotation(index, { lines: event.target.value }) }), _jsx(DevInput, { "aria-label": `Annotation ${index + 1} label`, value: annotation.label ?? "", placeholder: "Label (optional)", disabled: !editable, onChange: (event) => updateAnnotation(index, {
+                                            label: event.target.value || undefined,
+                                        }) }), editable && (_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": `Remove annotation ${index + 1}`, onClick: () => removeAnnotation(index), className: "flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-plan-muted transition-colors hover:bg-muted hover:text-foreground", children: _jsx(IconTrash, { className: "size-4" }) }))] }), _jsx(DevTextarea, { "aria-label": `Annotation ${index + 1} note`, className: "min-h-[60px] text-sm", value: annotation.note, placeholder: "Explain what these lines do\u2026", disabled: !editable, onChange: (event) => updateAnnotation(index, { note: event.target.value }) })] }, index)))] })] }));
 }
 export { DiffRead, DiffEdit };
 //# sourceMappingURL=DiffBlock.js.map