@agent-native/core 0.43.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 { useEffect, useMemo, useRef, 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, InlineAnnotationNote, 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
@@ -440,14 +440,56 @@ function DiffRead({ data, blockId, title, summary, ctx, }) {
         ? 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.
+    // 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 = !hasAnnotations && !narrow;
+    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]);
@@ -503,9 +545,9 @@ function DiffRead({ data, blockId, title, summary, ctx, }) {
             next.add(index);
         return next;
     });
-    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
+    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`] }))] })] }));
+                                : `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
@@ -545,7 +587,7 @@ function isMarkerRangeStart(row, marker) {
     return lineNo === marker.range.start;
 }
 /* ── Unified view ──────────────────────────────────────────────────────────── */
-function UnifiedView({ rows, language, expanded, onToggleRun, markersForRow, anchoredRow, activeIndex, onActiveChange, ctx, }) {
+function UnifiedView({ rows, language, expanded, onToggleRun, markersForRow, anchoredRow, activeIndex, onActiveChange, }) {
     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]);
@@ -556,30 +598,22 @@ function UnifiedView({ rows, language, expanded, onToggleRun, markersForRow, anc
         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 [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) => renderRow(row, `run-${key}-${ri}`))] }, `run-${key}`));
+                                segment.rows.map((row, ri) => (_jsx(UnifiedRow, { row: row, ...rowProps }, `run-${key}-${ri}`)))] }, `run-${key}`));
                 }
-                return renderRow(segment, String(idx));
+                return _jsx(UnifiedRow, { row: segment, ...rowProps }, idx);
             }) }) }));
 }
 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 })] }));
+    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.
@@ -591,6 +625,16 @@ function UnifiedRow({ language, row, markersForRow, activeIndex, onActiveChange,
 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 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"] })] }));
 }
@@ -641,10 +685,10 @@ function SplitCell({ language, row, side, markersForRow, activeIndex, onActiveCh
     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 })] }));
+    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";