@agent-native/core 0.42.0 → 0.44.0

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, 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, AnnotationNoteRail, buildLineMarkerMap, hasRailAnnotations, resolveAnnotations, } from "./annotation-rail.js";
+import { AnnotationGutterMarker, buildLineMarkerMap, hasRailAnnotations, rangeLabel, 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
@@ -372,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);
@@ -393,6 +425,7 @@ function DiffRead({ data, blockId, title, summary, ctx, }) {
     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]);
@@ -407,6 +440,56 @@ function DiffRead({ data, blockId, title, summary, ctx, }) {
         ? beforeLineCount
         : afterLineCount), [data.annotations, beforeLineCount, afterLineCount]);
     const hasAnnotations = hasRailAnnotations(resolved);
+    // Effective render mode. The right-margin popover works in both unified and
+    // split, so annotations no longer force a mode; only 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 (hidden when unavailable).
+    const narrow = containerWidth != null && containerWidth < SPLIT_MIN_WIDTH;
+    const canSplit = !narrow;
+    const effectiveMode = canSplit ? mode : "unified";
+    // Annotation popover (diff): a marked line shows its note as a hover popover
+    // pinned in the diff's right margin and aligned to that line — no inline notes
+    // and no permanent side rail, so the code keeps its full width. A short
+    // hover-intent delay lets the pointer travel from the line into the popover.
+    const clearTimer = useRef(null);
+    const handleActiveChange = useCallback((index) => {
+        if (clearTimer.current) {
+            clearTimeout(clearTimer.current);
+            clearTimer.current = null;
+        }
+        if (index == null) {
+            clearTimer.current = setTimeout(() => setActiveIndex(null), 120);
+        }
+        else {
+            setActiveIndex(index);
+        }
+    }, []);
+    useEffect(() => () => {
+        if (clearTimer.current)
+            clearTimeout(clearTimer.current);
+    }, []);
+    const activeAnnotation = activeIndex == null
+        ? null
+        : (resolved.find((r) => r.index === activeIndex && r.range) ?? null);
+    // Vertical center of the active marker's anchor row within the section, so the
+    // popover sits beside that line. Rows are in page flow (no inner vertical
+    // scroll), so a DOM measure on activeIndex change is stable.
+    const [popoverTop, setPopoverTop] = useState(null);
+    useLayoutEffect(() => {
+        const host = containerRef.current;
+        if (activeIndex == null || !host) {
+            setPopoverTop(null);
+            return;
+        }
+        const rowEl = host.querySelector(`[data-annot-row="${activeIndex}"]`);
+        if (!rowEl) {
+            setPopoverTop(null);
+            return;
+        }
+        const hostRect = host.getBoundingClientRect();
+        const rowRect = rowEl.getBoundingClientRect();
+        setPopoverTop(rowRect.top - hostRect.top + rowRect.height / 2);
+    }, [activeIndex, containerRef]);
     // 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]);
@@ -435,7 +518,7 @@ function DiffRead({ data, blockId, title, summary, ctx, }) {
     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;
     // Never truncate away an annotated row: extend the window past the last one.
     const effectiveRowLimit = useMemo(() => {
@@ -453,7 +536,7 @@ function DiffRead({ data, blockId, title, summary, ctx, }) {
         return limit;
     }, [showAllRows, shouldLimitRows, hasAnnotations, rows, markersForRow]);
     const rowLimit = effectiveRowLimit;
-    const displayedRows = mode === "unified" && rowLimit ? rows.slice(0, rowLimit) : rows;
+    const displayedRows = effectiveMode === "unified" && rowLimit ? rows.slice(0, rowLimit) : rows;
     const toggleRun = (index) => setExpanded((prev) => {
         const next = new Set(prev);
         if (next.has(index))
@@ -462,10 +545,9 @@ function DiffRead({ data, blockId, title, summary, ctx, }) {
             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 }), summary && (_jsx("p", { className: "mb-3 text-sm leading-relaxed text-plan-muted", children: summary })), _jsxs("div", { className: cn(hasAnnotations &&
-                    "grid items-start gap-3 md:grid-cols-[minmax(0,1fr)_minmax(190px,250px)]"), children: [_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, markersForRow: markersForRow, activeIndex: activeIndex, onActiveChange: setActiveIndex })) : (_jsx(UnifiedView, { rows: displayedRows, language: language, expanded: expanded, onToggleRun: toggleRun, markersForRow: markersForRow, anchoredRow: anchoredRow, activeIndex: activeIndex, onActiveChange: setActiveIndex })), !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`] }))] }), hasAnnotations && (_jsx(AnnotationNoteRail, { items: resolved, activeIndex: activeIndex, onActiveChange: setActiveIndex, ctx: ctx, showMarker: true }))] })] }));
+    return (_jsxs("section", { ref: containerRef, className: "relative 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: handleActiveChange })) : (_jsx(UnifiedView, { rows: displayedRows, language: language, expanded: expanded, onToggleRun: toggleRun, markersForRow: markersForRow, anchoredRow: anchoredRow, activeIndex: activeIndex, onActiveChange: handleActiveChange })), !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`] }))] }), activeAnnotation && popoverTop != null && (_jsx(AnnotationPopover, { item: activeAnnotation, top: popoverTop, onActiveChange: handleActiveChange, ctx: ctx }))] }));
 }
 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
@@ -491,6 +573,19 @@ function annotatedRowBg(info) {
         ? "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, markersForRow, anchoredRow, activeIndex, onActiveChange, }) {
     const segments = useMemo(() => segmentRows(rows, anchoredRow), [rows, anchoredRow]);
@@ -504,7 +599,7 @@ function UnifiedView({ rows, language, expanded, onToggleRun, markersForRow, anc
         showMarkerColumn,
     };
     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);
@@ -517,15 +612,28 @@ function UnifiedView({ rows, language, expanded, onToggleRun, markersForRow, anc
 function UnifiedRow({ language, row, markersForRow, activeIndex, onActiveChange, showMarkerColumn, }) {
     const markers = markersForRow(row);
     const info = rowMarkerInfo(markers, activeIndex);
-    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, { marker: markers[0]?.marker, info: info })), _jsx(DiffLineText, { text: row.text, language: language })] }));
+    const startMarker = markers.find((marker) => isMarkerRangeStart(row, marker));
+    return (_jsxs("div", { "data-annot-row": startMarker ? startMarker.index : undefined, 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.
- * When `marker` is undefined the cell is an empty spacer so every row in a diff
- * with annotations keeps its code text aligned.
+ * `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 })) }));
+}
+/**
+ * The hover popover for a diff annotation, pinned in the diff's right margin and
+ * vertically centered on the annotated line (`top` is measured by the caller).
+ * It shows the marker pip, line range, optional label, and the markdown note —
+ * beside the code instead of interrupting the diff flow — and keeps the
+ * annotation active while hovered so the pointer can travel from line to note.
  */
-function MarkerCell({ marker, info, }) {
-    return (_jsx("span", { className: "flex w-6 shrink-0 select-none items-center justify-center py-0", children: marker != null && info != null && (_jsx(AnnotationGutterMarker, { marker: marker, active: info.isActive })) }));
+function AnnotationPopover({ item, top, onActiveChange, ctx, }) {
+    return (_jsxs("div", { role: "tooltip", style: { top }, onMouseEnter: () => onActiveChange(item.index), onMouseLeave: () => onActiveChange(null), className: "absolute right-2 z-20 w-[min(17rem,calc(100%-3rem))] -translate-y-1/2 rounded-lg border border-amber-400/70 bg-background px-3 py-2.5 shadow-xl dark:border-amber-300/45", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5", children: [_jsx(AnnotationGutterMarker, { marker: item.marker, active: true }), _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: rangeLabel(item) }), item.annotation.label && (_jsx("span", { className: "text-[13px] font-semibold text-foreground", children: item.annotation.label }))] }), _jsx("div", { className: "plan-annotation-note mt-1 text-[13px] leading-relaxed text-foreground/85", children: ctx.renderMarkdown ? (ctx.renderMarkdown(item.annotation.note)) : (_jsx("p", { children: item.annotation.note })) })] }));
 }
 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"] })] }));
@@ -566,7 +674,7 @@ function SplitView({ language, rowLimit, rows, markersForRow, activeIndex, onAct
     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 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", 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}`))) }) })] }));
+    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, markersForRow, activeIndex, onActiveChange, showMarkerColumn, }) {
     if (!row) {
@@ -576,10 +684,11 @@ function SplitCell({ language, row, side, markersForRow, activeIndex, onActiveCh
     const showSign = row.kind !== "context";
     const markers = markersForRow(row, side);
     const info = rowMarkerInfo(markers, activeIndex);
-    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, { marker: markers[0]?.marker, info: info })), _jsx(DiffLineText, { text: row.text, language: language })] }));
+    const startMarker = markers.find((marker) => isMarkerRangeStart(row, marker));
+    return (_jsxs("div", { "data-annot-row": startMarker ? startMarker.index : undefined, 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";
+const codeAreaClass = "min-h-[140px] font-mono [font-size:var(--plan-code-size)] leading-5";
 function DiffEdit({ data, onChange, editable }) {
     const patch = (next) => onChange({ ...data, ...next });
     const mode = data.mode ?? "unified";