@plannotator/ui 0.53.1 → 0.54.0

package/components/html-viewer/useHtmlAnnotation.ts

@@ -9,6 +9,12 @@ import type {
   UseAnnotationHighlighterReturn,
 } from "../../hooks/useAnnotationHighlighter";
 import { BRIDGE_PROTOCOL_VERSION } from "./bridge-script";
+import {
+  MAX_RICH_CLIPBOARD_HTML_LENGTH,
+  MAX_RICH_CLIPBOARD_OUTPUT_LENGTH,
+  sanitizeRichHtml,
+  type RichCopySource,
+} from "../../utils/richClipboard";
 import {
   parseHtmlElementContext,
   MAX_ELEMENT_CONTEXT_BYTES,
@@ -90,8 +96,27 @@ interface BridgeSelectionMessage {
   targetLabel?: string;
   /** Agent-facing element description (pinpoint clicks) — validated, size-capped. */
   context?: HtmlElementContext;
+  /** The bridge answers `rich-copy-request` for this text selection. */
+  richCopy?: boolean;
+  /** `text` was cut to MAX_SELECTION_TEXT_LENGTH (the page's selection is longer). */
+  textCut?: boolean;
 }
 
+/** The bridge's answer to `rich-copy-request`: the pending range's markup
+ *  (sanitized again here) and its text up to 256 KiB (`truncated` past it),
+ *  or too large for rich text. */
+interface BridgeRichCopyMessage {
+  type: `${typeof PREFIX}rich-copy`;
+  id: string;
+  html: string;
+  text: string;
+  truncated: boolean;
+  tooLarge: boolean;
+}
+
+/** How long the rich-text Copy waits for the bridge before copying the quote as plain text. */
+export const RICH_COPY_TIMEOUT_MS = 1500;
+
 /** One draft target in an in-flight multi-select comment. Index 0 is primary. */
 export interface HtmlDraftTarget {
   key: string;
@@ -119,10 +144,12 @@ interface BridgeRect {
 
 type BridgeMessage =
   | BridgeSelectionMessage
+  | BridgeRichCopyMessage
   | BridgeMultiTargetAddedMessage
   | { type: `${typeof PREFIX}multi-target-removed`; key: string }
   | { type: `${typeof PREFIX}pointer`; x: number; y: number; shift: boolean }
   | { type: `${typeof PREFIX}selection-clear` }
+  | { type: `${typeof PREFIX}pin-visibility`; visible: boolean }
   | { type: `${typeof PREFIX}selection-rect`; rect: BridgeRect }
   | { type: `${typeof PREFIX}keytype`; key: string }
   | { type: `${typeof PREFIX}mark-click`; id: string }
@@ -363,6 +390,8 @@ export function parseBridgeMessage(value: unknown): BridgeMessage | null {
       return {
         type: value.type,
         text: capSelectionText(value.text),
+        ...(value.richCopy === true ? { richCopy: true } : {}),
+        ...(value.textCut === true ? { textCut: true } : {}),
         rect,
         modeOverride: parseEditorMode(value.modeOverride),
         anchor: parseHtmlElementAnchor(value.anchor) ?? undefined,
@@ -395,6 +424,24 @@ export function parseBridgeMessage(value: unknown): BridgeMessage | null {
         : null;
     case `${PREFIX}selection-clear`:
       return { type: value.type };
+    case `${PREFIX}rich-copy`: {
+      // Oversized or malformed markup reads as none (plain text is copied).
+      if (typeof value.id !== "string" || value.id.length === 0 || value.id.length > 64) return null;
+      const text = typeof value.text === "string" && value.text.length <= MAX_RICH_CLIPBOARD_HTML_LENGTH
+        ? value.text : "";
+      const html = typeof value.html === "string" && value.html.length <= MAX_RICH_CLIPBOARD_HTML_LENGTH
+        ? value.html : "";
+      return {
+        type: value.type,
+        id: value.id,
+        html,
+        text,
+        truncated: value.truncated === true,
+        tooLarge: value.tooLarge === true,
+      };
+    }
+    case `${PREFIX}pin-visibility`:
+      return typeof value.visible === 'boolean' ? { type: value.type, visible: value.visible } : null;
     case `${PREFIX}selection-rect`: {
       const rect = parseBridgeRect(value.rect);
       return rect ? { type: value.type, rect } : null;
@@ -474,6 +521,12 @@ export function useHtmlAnnotation({
   UseAnnotationHighlighterReturn,
   "highlighterRef" | "highlightRange" | "highlightMathElement"
 > & {
+  /** Whether any pinned draft target is still displayed by the page. Always
+   *  true while no composer is open. */
+  pinVisible: boolean;
+  /** False once this draft's composer was hidden with its target: shown
+   *  again, it must not take focus from where the person is. */
+  composerAutoFocus: boolean;
   /** In-flight multi-select targets (index 0 = primary); empty outside pinpoint drafts. */
   draftTargets: HtmlDraftTarget[];
   /** Remove one draft target (chip X). Removing the last cancels the draft. */
@@ -495,6 +548,17 @@ export function useHtmlAnnotation({
   const [quickLabelPicker, setQuickLabelPicker] = useState<QuickLabelPickerState | null>(null);
   const [draftTargets, setDraftTargets] = useState<HtmlDraftTarget[]>([]);
   const [composerFocusToken, setComposerFocusToken] = useState(0);
+  const [pinVisible, setPinVisible] = useState(true);
+  const [composerWasHidden, setComposerWasHidden] = useState(false);
+  const pinVisibleRef = useRef(pinVisible);
+  pinVisibleRef.current = pinVisible;
+  // Visibility belongs to one draft: whatever closes the composer (save, 👍,
+  // close, Escape, a cancelled multi-select, disabling) resets it.
+  useEffect(() => {
+    if (commentPopover) return;
+    setPinVisible(true);
+    setComposerWasHidden(false);
+  }, [commentPopover]);
 
   const pendingTextRef = useRef<string>("");
   // Element anchor for the pending pinpoint selection — committed onto the
@@ -553,6 +617,9 @@ export function useHtmlAnnotation({
   hostCapRef.current = maxAdditionalTargets !== undefined;
 
   const anchorRef = useRef<HTMLDivElement | null>(null);
+  /** Rich-text Copy requests waiting for the bridge's markup, by id. An
+   *  answer with an id not in here (unsolicited, or after its timeout) is ignored. */
+  const richCopyRequestsRef = useRef(new Map<string, (answer: BridgeRichCopyMessage) => void>());
 
   /** Post into the iframe with the live token + targetOrigin when a live
    *  session is active; srcdoc posts keep targetOrigin "*" and no token. */
@@ -665,7 +732,22 @@ export function useHtmlAnnotation({
         return;
       }
 
+      if (type === `${PREFIX}rich-copy`) {
+        const answer = richCopyRequestsRef.current.get(message.id);
+        if (!answer) return;
+        richCopyRequestsRef.current.delete(message.id);
+        answer(message);
+        return;
+      }
+
+      if (type === `${PREFIX}pin-visibility`) {
+        setPinVisible(message.visible);
+        if (!message.visible && commentPopoverRef.current) setComposerWasHidden(true);
+      }
+
       if (type === `${PREFIX}selection`) {
+        setPinVisible(true);
+        setComposerWasHidden(false);
         pendingTextRef.current = message.text;
         pendingAnchorRef.current = message.anchor ?? null;
         pendingContextRef.current = message.context ?? null;
@@ -760,6 +842,35 @@ export function useHtmlAnnotation({
             element: anchor,
             source: null,
             selectionText: message.text,
+            // The markup is built only when Copy is pressed: ask
+            // the bridge for the pending range's HTML and wait a moment.
+            ...(message.richCopy ? {
+              getRichCopy: () => new Promise<RichCopySource>((resolve) => {
+                const id = `rc-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+                const requests = richCopyRequestsRef.current;
+                // Without an answer only the quote is here: plain text, marked
+                // as cut when the bridge cut it.
+                const quote = { html: "", text: message.text, truncated: message.textCut === true };
+                requests.set(id, (answer) => {
+                  const text = answer.text || quote.text;
+                  const truncated = answer.text ? answer.truncated : quote.truncated;
+                  if (answer.tooLarge) {
+                    resolve({ tooLarge: true, text, truncated });
+                    return;
+                  }
+                  const html = answer.html ? sanitizeRichHtml(answer.html) : null;
+                  if (html && html.length > MAX_RICH_CLIPBOARD_OUTPUT_LENGTH) {
+                    resolve({ tooLarge: true, text, truncated });
+                    return;
+                  }
+                  resolve({ html: html ?? "", text, truncated });
+                });
+                window.setTimeout(() => {
+                  if (requests.delete(id)) resolve(quote);
+                }, RICH_COPY_TIMEOUT_MS);
+                post({ type: `${PREFIX}rich-copy-request`, id });
+              }),
+            } : {}),
           });
         }
       }
@@ -803,6 +914,18 @@ export function useHtmlAnnotation({
           onHostDraftRef.current(null);
         }
         setToolbarState(null);
+        // The bridge closed the draft (its Escape rung) while the composer was
+        // hidden with its target: close the hidden composer too, or nothing on
+        // screen could ever close it. Its text stays in the draft store.
+        if (commentPopoverRef.current && !pinVisibleRef.current) {
+          post({ type: `${PREFIX}cancel-selection` });
+          setCommentPopover(null);
+          setDraftTargets([]);
+          pendingTextRef.current = "";
+          pendingAnchorRef.current = null;
+          pendingContextRef.current = null;
+          return;
+        }
         // Keep the captured text alive while a comment/quick-label is open: the user
         // is composing, and the selection collapsing or scrolling out of view must
         // not drop the annotation on submit. It's overwritten on the next selection.
@@ -1157,6 +1280,8 @@ export function useHtmlAnnotation({
 
   return {
     toolbarState,
+    pinVisible: pinVisible || !commentPopover,
+    composerAutoFocus: !composerWasHidden,
     commentPopover,
     quickLabelPicker,
     handleAnnotate,

package/components/imageZoom.ts

@@ -0,0 +1,265 @@
+/**
+ * The image lightbox's zoom math, kept pure so it can be tested without a
+ * layout engine. A viewport is a translate plus a scale on the image, where
+ * scale 1 is the image's own pixels (Actual size) and the translate is the
+ * image's top-left corner inside the stage, in CSS pixels.
+ *
+ * The rules: the smallest scale is Fit (never above 1, so a small image is
+ * not blown up), the largest is 8 (800%); an axis on which the image is
+ * smaller than the stage is centred, and an axis on which it is larger is
+ * kept covering the stage, so the image can never be panned out of sight.
+ */
+
+export interface ZoomSize {
+  readonly width: number;
+  readonly height: number;
+}
+
+export interface ZoomViewport {
+  readonly x: number;
+  readonly y: number;
+  readonly scale: number;
+}
+
+export interface ZoomLimits {
+  readonly min: number;
+  readonly max: number;
+}
+
+/** The share of the stage Fit may fill on each axis (1 = edge to edge). */
+export interface ZoomInset {
+  readonly x: number;
+  readonly y: number;
+}
+
+/** 800%: an image pixel is then 8 screen pixels, enough to read any screenshot. */
+export const LIGHTBOX_ZOOM_MAX = 8;
+/** Wheel zoom: factor = exp(-deltaY * sensitivity), with deltaY capped so a
+ * mouse notch (100 px) is about 1.28x, close to the diagram canvas's step,
+ * while a trackpad pinch (a few px per event) stays smooth. */
+export const WHEEL_ZOOM_SENSITIVITY = 0.01;
+export const WHEEL_ZOOM_DELTA_CAP = 25;
+/** A plain-wheel gesture keeps the meaning it started with (zoom or scroll)
+ * until the wheel rests this long, so wheeling in past the screen's edge
+ * does not flip from zooming to scrolling halfway through. */
+export const WHEEL_LATCH_MS = 250;
+/** A press that travels less than this is a tap (a click), not a pan. */
+export const TAP_SLOP_MOUSE_PX = 4;
+export const TAP_SLOP_TOUCH_PX = 10;
+/** Two taps this close in time and space are a double tap (or double click). */
+export const DOUBLE_TAP_MS = 300;
+export const DOUBLE_TAP_SLOP_PX = 24;
+/** A double click at Fit zooms to twice the Fit scale. */
+export const DOUBLE_TAP_ZOOM = 2;
+
+/**
+ * Which way Fit fits: the whole image (`contain`, the default), or its width
+ * (a tall screenshot read from the top) or height (a panorama read from the
+ * left). The smallest scale is always `contain`, so a reader can zoom out to
+ * the whole image from either.
+ */
+export type FitAxis = 'contain' | 'width' | 'height';
+
+const FULL: ZoomInset = { x: 1, y: 1 };
+
+function valid(size: ZoomSize | null | undefined): size is ZoomSize {
+  return !!size && size.width > 0 && size.height > 0;
+}
+
+export function clampNumber(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+/** The scale at which the whole image (or its width, or its height) fits the stage, never above 1. */
+export function fitScale(image: ZoomSize, stage: ZoomSize, inset: ZoomInset = FULL, axis: FitAxis = 'contain'): number {
+  if (!valid(image) || !valid(stage)) return 1;
+  const across = (stage.width * inset.x) / image.width;
+  const down = (stage.height * inset.y) / image.height;
+  if (axis === 'width') return Math.min(1, across);
+  if (axis === 'height') return Math.min(1, down);
+  return Math.min(1, across, down);
+}
+
+export function zoomLimits(image: ZoomSize, stage: ZoomSize, inset: ZoomInset = FULL): ZoomLimits {
+  const min = fitScale(image, stage, inset);
+  return { min, max: Math.max(min, LIGHTBOX_ZOOM_MAX) };
+}
+
+function placeAxis(position: number, content: number, room: number): number {
+  if (content <= room) return (room - content) / 2;
+  return clampNumber(position, room - content, 0);
+}
+
+/** The scale within the limits, and the image centred or covering the stage on each axis. */
+export function clampViewport(view: ZoomViewport, image: ZoomSize, stage: ZoomSize, limits: ZoomLimits): ZoomViewport {
+  const scale = clampNumber(view.scale, limits.min, limits.max);
+  return {
+    scale,
+    x: placeAxis(view.x, image.width * scale, stage.width),
+    y: placeAxis(view.y, image.height * scale, stage.height),
+  };
+}
+
+/** Fit: the whole image, centred (or its width from the top, or its height from the left). */
+export function fitViewport(image: ZoomSize, stage: ZoomSize, inset: ZoomInset = FULL, axis: FitAxis = 'contain'): ZoomViewport {
+  const limits = zoomLimits(image, stage, inset);
+  return clampViewport({ x: 0, y: 0, scale: fitScale(image, stage, inset, axis) }, image, stage, limits);
+}
+
+/**
+ * Actual size: the image's own pixels. An axis on which it is larger than the
+ * stage starts at its top or left edge (a tall screenshot is read from the
+ * top); an axis on which it is smaller is centred.
+ */
+export function actualViewport(image: ZoomSize, stage: ZoomSize, inset: ZoomInset = FULL): ZoomViewport {
+  const limits = zoomLimits(image, stage, inset);
+  return clampViewport({ x: 0, y: 0, scale: 1 }, image, stage, limits);
+}
+
+/** Zoom by `factor` about a point of the stage, so the pixel under it stays under it. */
+export function zoomAt(
+  view: ZoomViewport,
+  factor: number,
+  px: number,
+  py: number,
+  image: ZoomSize,
+  stage: ZoomSize,
+  limits: ZoomLimits,
+): ZoomViewport {
+  const scale = clampNumber(view.scale * factor, limits.min, limits.max);
+  const ratio = scale / view.scale;
+  return clampViewport({ x: px - (px - view.x) * ratio, y: py - (py - view.y) * ratio, scale }, image, stage, limits);
+}
+
+/** Move the image by a pointer's travel (or a scroll's, negated by the caller). */
+export function panBy(view: ZoomViewport, dx: number, dy: number, image: ZoomSize, stage: ZoomSize, limits: ZoomLimits): ZoomViewport {
+  return clampViewport({ x: view.x + dx, y: view.y + dy, scale: view.scale }, image, stage, limits);
+}
+
+/** Whether the image is larger than the stage on either axis (so there is something to pan). */
+export function overflows(view: ZoomViewport, image: ZoomSize, stage: ZoomSize): boolean {
+  return image.width * view.scale > stage.width + 0.5 || image.height * view.scale > stage.height + 0.5;
+}
+
+/** Whether a viewport is at the Fit scale (`limits.min`, or a given Fit scale). */
+export function atFit(view: ZoomViewport, limits: ZoomLimits | number): boolean {
+  const fit = typeof limits === 'number' ? limits : limits.min;
+  return Math.abs(view.scale - fit) < 1e-3;
+}
+
+/** The share of a stage that leaves `padding` CSS pixels on every side (at least a tenth). */
+export function paddingInset(stage: ZoomSize, padding: number): ZoomInset {
+  if (!valid(stage) || padding <= 0) return FULL;
+  return { x: Math.max(0.1, (stage.width - 2 * padding) / stage.width), y: Math.max(0.1, (stage.height - 2 * padding) / stage.height) };
+}
+
+/**
+ * A wheel event's travel in CSS pixels. Lines (Firefox's mouse wheel) count
+ * 16 px and pages the stage's height. Shift turns a vertical wheel sideways,
+ * as it does on a page (macOS already reports it as deltaX).
+ */
+export function wheelTravel(
+  event: { deltaX: number; deltaY: number; deltaMode: number; shiftKey: boolean },
+  pageHeight: number,
+): { dx: number; dy: number } {
+  const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? pageHeight : 1;
+  let dx = event.deltaX * unit;
+  let dy = event.deltaY * unit;
+  if (event.shiftKey && dx === 0) {
+    dx = dy;
+    dy = 0;
+  }
+  return { dx, dy };
+}
+
+/** The zoom factor for a wheel's vertical travel: up (negative) zooms in. */
+export function wheelZoomFactor(dy: number): number {
+  return Math.exp(-clampNumber(dy, -WHEEL_ZOOM_DELTA_CAP, WHEEL_ZOOM_DELTA_CAP) * WHEEL_ZOOM_SENSITIVITY);
+}
+
+// ---------------------------------------------------------------------------
+// Region boxes (#2100): a box drawn on the image is kept in the image's own
+// (natural) pixels, so it is the same box at every zoom and pan, and the
+// agent can crop exactly that spot. These convert between the stage (CSS
+// pixels, relative to the stage's top-left) and the image.
+// ---------------------------------------------------------------------------
+
+/** A rectangle in the image's own pixels (integers once made by `naturalBoxFromPoints`). */
+export interface NaturalBox {
+  readonly x: number;
+  readonly y: number;
+  readonly w: number;
+  readonly h: number;
+}
+
+/** A rectangle in stage pixels. */
+export interface StageRect {
+  readonly left: number;
+  readonly top: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+/** A stage point (CSS pixels from the stage's top-left) in the image's own pixels. Not clamped. */
+export function stageToNatural(view: ZoomViewport, px: number, py: number): { x: number; y: number } {
+  return { x: (px - view.x) / view.scale, y: (py - view.y) / view.scale };
+}
+
+/**
+ * The box two stage points span (a drag's start and end, in either
+ * direction), in the image's own pixels: clamped to the image, widened to
+ * whole pixels (floor the near edges, ceil the far ones), so the box always
+ * covers what the reviewer drew. Null when nothing of it is on the image.
+ */
+export function naturalBoxFromPoints(
+  view: ZoomViewport,
+  a: { x: number; y: number },
+  b: { x: number; y: number },
+  image: ZoomSize,
+): NaturalBox | null {
+  const p = stageToNatural(view, a.x, a.y);
+  const q = stageToNatural(view, b.x, b.y);
+  const x0 = clampNumber(Math.floor(Math.min(p.x, q.x)), 0, image.width);
+  const y0 = clampNumber(Math.floor(Math.min(p.y, q.y)), 0, image.height);
+  const x1 = clampNumber(Math.ceil(Math.max(p.x, q.x)), 0, image.width);
+  const y1 = clampNumber(Math.ceil(Math.max(p.y, q.y)), 0, image.height);
+  if (x1 - x0 < 1 || y1 - y0 < 1) return null;
+  return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+}
+
+/** Where a natural-pixel box is on the stage at a viewport. */
+export function naturalBoxToStage(view: ZoomViewport, box: NaturalBox): StageRect {
+  return { left: view.x + box.x * view.scale, top: view.y + box.y * view.scale, width: box.w * view.scale, height: box.h * view.scale };
+}
+
+/**
+ * The part of the image the stage shows now, in the image's own pixels:
+ * what Enter comments on in Region mode (the keyboard's way to a box: frame
+ * the spot with Actual size and the scroll keys, then press Enter). Null when
+ * nothing of the image is on the stage.
+ */
+export function visibleNaturalBox(view: ZoomViewport, image: ZoomSize, stage: ZoomSize): NaturalBox | null {
+  return naturalBoxFromPoints(view, { x: 0, y: 0 }, { x: stage.width, y: stage.height }, image);
+}
+
+/** The share of the stage a box fills when the viewer zooms to it. */
+export const ZOOM_TO_BOX_SHARE = 0.5;
+
+/**
+ * The viewport that shows a box large and centred: it fills `share` of the
+ * stage on its tighter axis, within the zoom limits (a box larger than that
+ * share at Fit stays at Fit), then the usual clamp keeps the image covering
+ * the stage, so a box at an edge sits as near the centre as the image allows.
+ */
+export function viewportForBox(
+  box: NaturalBox,
+  image: ZoomSize,
+  stage: ZoomSize,
+  limits: ZoomLimits,
+  share = ZOOM_TO_BOX_SHARE,
+): ZoomViewport {
+  const scale = clampNumber(Math.min((stage.width * share) / Math.max(1, box.w), (stage.height * share) / Math.max(1, box.h)), limits.min, limits.max);
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  return clampViewport({ scale, x: stage.width / 2 - cx * scale, y: stage.height / 2 - cy * scale }, image, stage, limits);
+}

package/components/plan-diff/PlanCleanDiffView.tsx

@@ -573,7 +573,7 @@ const DiffBlockRenderer: React.FC<DiffBlockRendererProps> = ({
   switch (block.type) {
     case "unchanged":
       return (
-        <div className={`plan-diff-unchanged ${unchangedClassName ?? DEFAULT_UNCHANGED_CLASS}`}>
+        <div className={`plan-diff-unchanged ${unchangedClassName ?? DEFAULT_UNCHANGED_CLASS}`} data-doc-text="">
           <MarkdownChunk content={block.content} />
         </div>
       );

package/components/plan-diff/PlanDiffViewer.tsx

@@ -36,6 +36,12 @@ interface PlanDiffViewerProps {
   selectedAnnotationId?: string | null;
   mode?: EditorMode;
   onOpenVscodeDiff?: (baseVersion: number) => Promise<{ ok?: boolean; error?: string }>;
+  /**
+   * Grow the diff card to the full height the parent gives it, like Viewer's
+   * `fillHeight`, so a short diff's card still runs to the bottom of the view.
+   * Default false: the card sizes to its content.
+   */
+  fillHeight?: boolean;
 }
 
 const defaultOpenVscodeDiff = async (
@@ -77,6 +83,7 @@ export const PlanDiffViewer: React.FC<PlanDiffViewerProps> = ({
   selectedAnnotationId,
   mode,
   onOpenVscodeDiff,
+  fillHeight = false,
 }) => {
   const [vscodeDiffLoading, setVscodeDiffLoading] = useState(false);
   const [vscodeDiffError, setVscodeDiffError] = useState<string | null>(null);
@@ -102,8 +109,12 @@ export const PlanDiffViewer: React.FC<PlanDiffViewerProps> = ({
   };
 
   return (
-    <div className="relative z-50 w-full" style={maxWidth ? { maxWidth } : { maxWidth: 832 }}>
-      <article className="w-full bg-card border border-border/50 rounded-xl shadow-xl p-5 md:p-8 lg:p-10 xl:p-12 relative">
+    <div
+      className={`relative z-50 w-full${fillHeight ? ' flex flex-col print:block' : ''}`}
+      data-viewer-fill-height={fillHeight ? '' : undefined}
+      style={maxWidth ? { maxWidth } : { maxWidth: 832 }}
+    >
+      <article className={`w-full ${fillHeight ? 'flex-1 ' : ''}bg-card border border-border/50 rounded-xl shadow-xl p-5 md:p-8 lg:p-10 xl:p-12 relative`} data-doc-text-root="">
         {/* Top-left: repo info + diff badge — matches Viewer layout (flex-col) so badge doesn't jump position */}
         <div className="absolute top-3 left-3 md:top-4 md:left-5 flex flex-col items-start gap-1 text-[9px] text-muted-foreground/50 font-mono">
           {repoInfo && (

package/components/plan-diff/PlanRawDiffView.tsx

@@ -67,7 +67,7 @@ export const PlanRawDiffView: React.FC<PlanRawDiffViewProps> = ({ blocks }) => {
   }, [blocks]);
 
   return (
-    <div className="font-mono text-[13px] leading-relaxed bg-muted/30 rounded-lg border border-border/30 overflow-x-auto">
+    <div className="font-mono text-[13px] leading-relaxed bg-muted/30 rounded-lg border border-border/30 overflow-x-auto" data-doc-text="">
       <div>
         {lines.map((line, index) => (
           <div

package/components/sidebar/FileBrowser.tsx

@@ -10,6 +10,7 @@ import { Search, X } from "lucide-react";
 import type { VaultNode } from "../../types";
 import type { DirState } from "../../hooks/useFileBrowser";
 import { CountBadge } from "./CountBadge";
+import { HostTitle } from "../HostTitle";
 import { ObsidianIconRaw } from "../icons/ObsidianIcons";
 import type { WorkspaceFileChange, WorkspaceStatusPayload } from "@plannotator/core/workspace-status-types";
 import { normalizeBrowserPath } from "@plannotator/core/browser-paths";
@@ -282,7 +283,9 @@ const TreeNode: React.FC<{
           <svg className="w-3 h-3 flex-shrink-0 text-muted-foreground/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
           </svg>
-          <span className="truncate">{node.name}</span>
+          <HostTitle title={node.name} cut>
+            <span className="truncate">{node.name}</span>
+          </HostTitle>
           <div className="ml-auto flex flex-shrink-0 items-center gap-1.5 text-[10px]">
             {(aggregateChange.additions > 0 || aggregateChange.deletions > 0) && (
               <>
@@ -360,7 +363,9 @@ const TreeNode: React.FC<{
       <svg className="w-3 h-3 flex-shrink-0 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
         <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
       </svg>
-      <span className={`truncate flex-1 min-w-0 ${isDeleted ? "line-through" : ""}`}>{displayName}</span>
+      <HostTitle title={node.name} cut>
+        <span className={`truncate flex-1 min-w-0 ${isDeleted ? "line-through" : ""}`}>{displayName}</span>
+      </HostTitle>
       <div className="ml-auto flex flex-shrink-0 items-center gap-1.5 text-[10px]">
         {isActive && selectionPending && (
           <span className="text-primary">Opening…</span>
@@ -455,10 +460,19 @@ const DirSection: React.FC<{
           selectionPending={selectionPending}
         />
       ))}
+      {dir.truncated && <FileLimitNote limit={dir.fileLimit} />}
     </div>
   );
 };
 
+/** The folder holds more supported files than the server lists; say so once, quietly, at the foot of its tree. */
+export const FileLimitNote: React.FC<{ limit?: number }> = ({ limit }) => (
+  <div data-file-limit-note className="px-2 pt-2 pb-1 text-[10px] leading-snug text-muted-foreground">
+    {limit ? `Showing the first ${limit.toLocaleString("en-US")} files.` : "Showing some of the files."}{" "}
+    Raise <code className="font-mono">PLANNOTATOR_FILE_BROWSER_MAX_FILES</code> to see more.
+  </div>
+);
+
 export const FileBrowser: React.FC<FileBrowserProps> = ({
   dirs,
   expandedFolders,

package/components/sidebar/SidebarTabs.tsx

@@ -24,6 +24,7 @@ interface SidebarTabsProps {
   hasFileAnnotations?: boolean;
   hasMessageAnnotations?: boolean;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export const SidebarTabs: React.FC<SidebarTabsProps> = ({
@@ -40,11 +41,13 @@ export const SidebarTabs: React.FC<SidebarTabsProps> = ({
   hasFileAnnotations,
   hasMessageAnnotations,
   className,
+  style,
 }) => {
   return (
     <div
       data-sidebar-tabs="true"
       className={`flex flex-col gap-1 pt-3 pl-0.5 flex-shrink-0 ${className ?? ""}`}
+      style={style}
     >
       {showAgentTerminalTab && onToggleAgentTerminal && (
         <button

package/config/index.ts

@@ -4,9 +4,12 @@ export { useConfigValue } from './useConfig';
 export {
   setReviewPanelView,
   setReviewDefaultDiffType,
+  getProviderReviewDefaultDiffType,
+  setProviderReviewDefaultDiffType,
   getPersistedReviewPanelView,
   setReviewAutoViewed,
   needsAutoViewedNotice,
   markAutoViewedNoticeSeen,
   type ReviewDefaultDiffType,
+  type VcsReviewSettingsDescriptor,
 } from './reviewView';

package/config/reviewView.ts

@@ -2,6 +2,20 @@ import { configStore } from './configStore';
 import { SETTINGS } from './settings';
 import { storage } from '../utils/storage';
 
+export interface ReviewSettingsDiffOption {
+  id: string;
+  label: string;
+  description: string;
+}
+
+/** The default-diff choices Settings → Review offers for one VCS. */
+export interface VcsReviewSettingsDescriptor {
+  id: string;
+  label: string;
+  defaultDiffType: string;
+  diffOptions: ReviewSettingsDiffOption[];
+}
+
 /**
  * The ONLY writers for the coupled setting pair (reviewPanelView,
  * defaultDiffType).
@@ -81,6 +95,32 @@ export function setReviewDefaultDiffType(
   }
 }
 
+/**
+ * The saved default diff for a VCS other than Git (today: Jujutsu), read from
+ * `reviewDefaults[id]`. Git keeps its original `defaultDiffType` setting and
+ * its coupled setter above; a value this VCS does not offer reads as its own
+ * default, never as a Git mode.
+ */
+export function getProviderReviewDefaultDiffType(
+  descriptor: VcsReviewSettingsDescriptor,
+  store: PanelViewConfigStore = configStore,
+): string {
+  const configured = store.get('reviewDefaults')[descriptor.id]?.defaultDiffType;
+  return configured && descriptor.diffOptions.some((option) => option.id === configured)
+    ? configured
+    : descriptor.defaultDiffType;
+}
+
+export function setProviderReviewDefaultDiffType(
+  providerId: string,
+  value: string,
+  store: PanelViewConfigStore = configStore,
+): void {
+  store.set('reviewDefaults', {
+    ...store.get('reviewDefaults'),
+    [providerId]: { defaultDiffType: value },
+  });
+}
 
 /**
  * One-time gate for the auto-mark-viewed notice — the toast that fires the
@@ -90,7 +130,7 @@ export function setReviewDefaultDiffType(
  * meaningful revision can re-show it.
  *
  * It lives beside the setting rather than in the review app because BOTH
- * writers of the setting (Settings > Git here, and the file-list gear in the
+ * writers of the setting (Settings → Review here, and the file-list gear in the
  * review app) must consume the gate: someone who found the switch has
  * demonstrably discovered the feature and must never be told about it.
  */