@cueloop/client 0.1.0-alpha.65 → 0.1.0-alpha.67

package/src/use-changes-workbench.ts

@@ -0,0 +1,151 @@
+// The Changes/Project right-region state machine: the Project pane is the right sidebar and is always
+// present when the region is on, the Changes editor rides on it and never stands alone, and the two
+// toggles are mutually-exclusive file-tree modes. Owns the editor grid (tabs and splits) too.
+
+import { useRef, useState } from "react";
+import type { ProjectPanelMode } from "./components/AppShell";
+import {
+  activateTab,
+  addTab,
+  changesTab,
+  closeTab,
+  containsGroup,
+  fileTab,
+  firstGroupId,
+  makeGroup,
+  splitGroup,
+  welcomeTab,
+  type EditorNode,
+  type SplitDirection,
+} from "./components/editor-grid";
+
+/** Seed the workbench for a bare launch: the region opens on a disposable Welcome tab. */
+export interface ChangesWorkbenchOptions {
+  seed?: "changes" | "welcome";
+}
+
+export interface ChangesWorkbench {
+  projectOpen: boolean;
+  changesOpen: boolean;
+  projectMode: ProjectPanelMode;
+  zoomed: boolean;
+  grid: EditorNode;
+  activeGroup: string;
+  toggleRight: () => void;
+  toggleChanges: () => void;
+  toggleProject: () => void;
+  toggleZoom: () => void;
+  focusGroup: (groupId: string) => void;
+  activate: (groupId: string, tabId: string) => void;
+  close: (groupId: string, tabId: string) => void;
+  split: (groupId: string, direction: SplitDirection) => void;
+  openFile: (path: string, fileView: "diff" | "contents") => void;
+  /** Re-open defaults when the session changes: a diff opens the region in changed-files mode. */
+  syncSession: (sessionId: string | undefined, isDiff: boolean) => void;
+}
+
+export function useChangesWorkbench(options?: ChangesWorkbenchOptions): ChangesWorkbench {
+  const welcomeSeed = options?.seed === "welcome";
+  const [projectOpen, setProjectOpen] = useState(welcomeSeed);
+  const [changesOpen, setChangesOpen] = useState(welcomeSeed);
+  const [projectMode, setProjectMode] = useState<ProjectPanelMode>("changes");
+  const [zoomed, setZoomed] = useState(false);
+  const [grid, setGrid] = useState<EditorNode>(() =>
+    makeGroup([welcomeSeed ? welcomeTab() : changesTab()]),
+  );
+  const [focusedGroup, setFocusedGroup] = useState<string | null>(null);
+  const rememberedChanges = useRef(welcomeSeed);
+  const seenSession = useRef<string | undefined>(undefined);
+
+  const syncSession = (sessionId: string | undefined, isDiff: boolean): void => {
+    if (sessionId === undefined || sessionId === seenSession.current) return;
+    seenSession.current = sessionId;
+    setProjectOpen(isDiff);
+    setChangesOpen(isDiff);
+    setProjectMode(isDiff ? "changes" : "tree");
+    rememberedChanges.current = isDiff;
+    setGrid(makeGroup([changesTab()]));
+    setFocusedGroup(null);
+  };
+
+  const toggleRight = (): void => {
+    if (projectOpen) {
+      rememberedChanges.current = changesOpen;
+      setChangesOpen(false);
+      setProjectOpen(false);
+      // zoom focuses the Changes editor; collapsing the region returns the Thread pane full width
+      setZoomed(false);
+    } else {
+      setProjectOpen(true);
+      setChangesOpen(rememberedChanges.current);
+      setProjectMode(rememberedChanges.current ? "changes" : "tree");
+    }
+  };
+  const toggleChanges = (): void => {
+    if (projectMode === "changes") {
+      setChangesOpen(false);
+      setProjectMode("tree");
+      // never leave zoom on with the Changes editor gone - the Thread pane would stay hidden
+      setZoomed(false);
+    } else {
+      setChangesOpen(true);
+      setProjectOpen(true);
+      setProjectMode("changes");
+    }
+  };
+  const toggleProject = (): void => {
+    setProjectOpen(true);
+    setProjectMode("tree");
+  };
+  const close = (groupId: string, tabId: string): void => {
+    setGrid((tree) => {
+      const pruned = closeTab(tree, groupId, tabId);
+      if (pruned === null) {
+        setChangesOpen(false);
+        setProjectMode("tree");
+        // leaving zoom on would hide the Thread pane with no editor to fill the gap
+        setZoomed(false);
+        return makeGroup([changesTab()]);
+      }
+      // re-home focus when the closed group was pruned away, so the next open has a live target
+      setFocusedGroup((current) =>
+        current !== null && containsGroup(pruned, current) ? current : firstGroupId(pruned),
+      );
+      return pruned;
+    });
+  };
+  const split = (groupId: string, direction: SplitDirection): void => {
+    setGrid((tree) => {
+      const result = splitGroup(tree, groupId, direction);
+      setFocusedGroup(result.focusGroupId);
+      return result.tree;
+    });
+  };
+  const openFile = (path: string, fileView: "diff" | "contents"): void => {
+    setProjectOpen(true);
+    setChangesOpen(true);
+    const label = path.split("/").pop() ?? path;
+    setGrid((tree) =>
+      addTab(tree, focusedGroup ?? firstGroupId(tree), fileTab(label, path, fileView)),
+    );
+  };
+
+  return {
+    projectOpen,
+    changesOpen,
+    projectMode,
+    zoomed,
+    grid,
+    activeGroup: focusedGroup ?? firstGroupId(grid),
+    toggleRight,
+    toggleChanges,
+    toggleProject,
+    toggleZoom: () => setZoomed((value) => !value),
+    focusGroup: setFocusedGroup,
+    activate: (groupId, tabId) => setGrid((tree) => activateTab(tree, groupId, tabId)),
+    close,
+    split,
+    openFile,
+    syncSession,
+  };
+}

package/src/use-frame-measure.ts

@@ -0,0 +1,38 @@
+/**
+ * Read a layout-dependent value after every rendered frame (and resize),
+ * committing only on change. Layout lands after the commit, so a timer
+ * would race the visual-idle wait; measuring on the frame event converges
+ * deterministically within a frame or two.
+ */
+
+import { useEffect, useState } from "react";
+import { useRenderer } from "@opentui/react";
+
+export function useFrameMeasure<T>(
+  read: () => T,
+  isEqual: (left: T, right: T) => boolean,
+  initial: T,
+): T {
+  const renderer = useRenderer();
+  const [value, setValue] = useState(initial);
+
+  useEffect(() => {
+    const measure = (): void => {
+      const next = read();
+
+      setValue((current) => (isEqual(current, next) ? current : next));
+    };
+
+    measure();
+    renderer?.on("frame", measure);
+    renderer?.on("resize", measure);
+
+    return () => {
+      renderer?.off("frame", measure);
+      renderer?.off("resize", measure);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [renderer]);
+
+  return value;
+}

package/src/use-settings-dialog.tsx

@@ -3,8 +3,10 @@ import {
   DEFAULT_QUICK_ACTIONS,
   persistActions,
   persistAutoClose,
+  persistDiffView,
   persistTheme,
   type AutoClose,
+  type DiffViewMode,
   type QuickAction,
 } from "./config";
 import {
@@ -15,10 +17,8 @@ import {
   type ThemeName,
 } from "./theme-presets";
 import type { Theme } from "./theme";
-import type { ReviewPanelMode } from "./review-panel";
 import type { SettingsCategory } from "./components/SettingsDialog";
 import { QuickActionsEditor } from "./components/quick-actions-editor";
-import type { ReviewController } from "./session-controller";
 
 export interface SettingsNav {
   categoryId: string;
@@ -74,15 +74,14 @@ export function useSettingsDialog(params: {
   appearance: Appearance;
   autoClose: AutoClose;
   setAutoClose: Dispatch<SetStateAction<AutoClose>>;
-  reviewMode: ReviewPanelMode;
-  setReviewMode: Dispatch<SetStateAction<ReviewPanelMode>>;
+  diffView: DiffViewMode;
+  setDiffView: Dispatch<SetStateAction<DiffViewMode>>;
   themeName: ThemeName;
   setThemeName: Dispatch<SetStateAction<ThemeName>>;
   themeOverrides: Partial<Theme>;
   setTheme: Dispatch<SetStateAction<Theme>>;
   quickActions: QuickAction[];
   setQuickActions: Dispatch<SetStateAction<QuickAction[]>>;
-  controller: ReviewController;
   setMenuDialog: Dispatch<SetStateAction<"keybinds" | "settings" | null>>;
 }): SettingsDialogModel {
   const {
@@ -90,15 +89,14 @@ export function useSettingsDialog(params: {
     appearance,
     autoClose,
     setAutoClose,
-    reviewMode,
-    setReviewMode,
+    diffView,
+    setDiffView,
     themeName,
     setThemeName,
     themeOverrides,
     setTheme,
     quickActions,
     setQuickActions,
-    controller,
     setMenuDialog,
   } = params;
 
@@ -142,18 +140,11 @@ export function useSettingsDialog(params: {
           kind: "cycle",
           options: ["off", "3s", "10s"],
         },
-      ],
-    },
-    {
-      id: "display",
-      name: "Display",
-      description: "the review panel",
-      rows: [
         {
-          key: "reviewPanel",
-          label: "Review panel",
+          key: "diffView",
+          label: "Diff view (when zoomed)",
           kind: "cycle",
-          options: ["expanded", "compact", "hidden"],
+          options: ["Unified", "Split"],
         },
       ],
     },
@@ -191,10 +182,16 @@ export function useSettingsDialog(params: {
         />
       ),
     },
+    {
+      id: "keybinds",
+      name: "Keybinds",
+      description: "keyboard reference",
+      rows: [],
+    },
   ];
   const settingsValues = {
     autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
-    reviewPanel: reviewMode,
+    diffView: diffView === "split" ? "Split" : "Unified",
     theme: THEME_LABELS[themeName],
   };
   const cycleSetting = (rowKey: string): void => {
@@ -203,12 +200,11 @@ export function useSettingsDialog(params: {
 
       setAutoClose(next);
       persistAutoClose(next);
-    } else if (rowKey === "reviewPanel") {
-      const order: ReviewPanelMode[] = ["expanded", "compact", "hidden"];
-      const next = order[(order.indexOf(reviewMode) + 1) % order.length]!;
+    } else if (rowKey === "diffView") {
+      const next: DiffViewMode = diffView === "unified" ? "split" : "unified";
 
-      setReviewMode(next);
-      controller.saveReviewPanel({ mode: next });
+      setDiffView(next);
+      persistDiffView(next);
     } else if (rowKey === "theme") {
       const next = THEME_NAMES[(THEME_NAMES.indexOf(themeName) + 1) % THEME_NAMES.length]!;
 
@@ -219,6 +215,9 @@ export function useSettingsDialog(params: {
   };
 
   const onCategorySelect = (categoryId: string): void => {
+    // the nav tree carries a synthetic Settings group folder; clicking it must
+    // not become the active category, or the key handler dereferences nothing
+    if (!settingsCategories.some((category) => category.id === categoryId)) return;
     setActionsExpandedIndex(null);
     setSettingsNav({ categoryId, rowIndex: 0, zone: "body" });
   };

package/src/use-terminal-virtualizer.ts

@@ -0,0 +1,233 @@
+/**
+ * Row virtualization for an OpenTUI scrollbox, driven by @tanstack/virtual-core.
+ * The core is DOM-free at heart: it only reaches the scroll container through the
+ * observe/scroll callbacks given here, so a terminal scrollbox stands in for the
+ * element - offsets and sizes are terminal rows, the "scroll event" is the
+ * renderer's frame event, and a mounted row's height is read off its renderable.
+ * Callers render `items` with a spacer of `items[0].start` rows above and
+ * `totalSize - last.end` below, and hand each row's box to `measureRef(index)`.
+ */
+
+import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
+import { Virtualizer, type VirtualItem } from "@tanstack/virtual-core";
+
+export interface TerminalVirtualizerOptions {
+  scrollbox: RefObject<ScrollBoxRenderable | null>;
+  count: number;
+  /** Rows an item occupies before it is measured (its wrapped visual lines). */
+  estimateSize: (index: number) => number;
+  /** Items this many rows beyond the viewport stay mounted, so a scroll step never shows a gap. */
+  overscan: number;
+}
+
+export interface TerminalVirtualizer {
+  items: VirtualItem[];
+  totalSize: number;
+  /** Ref callback for an item's row box, so its real height (cards included) replaces the estimate. */
+  measureRef: (index: number) => (renderable: BoxRenderable | null) => void | (() => void);
+  /** Scroll the item into view; "auto" only scrolls when it is off screen. */
+  scrollToIndex: (index: number, align?: "auto" | "start" | "center" | "end") => void;
+}
+
+/**
+ * The scroll container as the core reads it: the offset and the extents it clamps a scroll
+ * target with. These are the `Element` members of the same names, so the view passes as one.
+ */
+interface ScrollContainerView {
+  readonly scrollTop: number;
+  readonly scrollHeight: number;
+  readonly clientHeight: number;
+  readonly scrollWidth: number;
+  readonly clientWidth: number;
+}
+
+/** A mounted row as the core measures it: its height under the `Element` member name. */
+interface RowView {
+  readonly clientHeight: number;
+}
+
+type CoreVirtualizer = Virtualizer<Element, Element>;
+
+function scrollContainerView(scrollbox: ScrollBoxRenderable): ScrollContainerView {
+  return {
+    get scrollTop() {
+      return scrollbox.scrollTop;
+    },
+    get scrollHeight() {
+      return scrollbox.scrollHeight;
+    },
+    get clientHeight() {
+      return scrollbox.viewport.height;
+    },
+    get scrollWidth() {
+      return scrollbox.scrollWidth;
+    },
+    get clientWidth() {
+      return scrollbox.viewport.width;
+    },
+  };
+}
+
+function rowView(renderable: BoxRenderable): RowView {
+  return {
+    get clientHeight() {
+      return renderable.height;
+    },
+  };
+}
+
+/**
+ * The core's element generics are DOM-typed, but every way it touches the container or a row
+ * (rect, offset, scroll, measurement, index lookup) is replaced here with a renderable-aware
+ * callback, so a view exposing just the members it reads stands in for the element.
+ */
+function asElement(view: ScrollContainerView | RowView): Element {
+  // SAFETY: the core never calls DOM methods on this value; its DOM defaults are all overridden.
+  return view as Element;
+}
+
+export function useTerminalVirtualizer(options: TerminalVirtualizerOptions): TerminalVirtualizer {
+  const renderer = useRenderer();
+  const [, setRevision] = useState(0);
+  // one stable view per mounted row box, so the core's element cache keeps its identity
+  const viewOfRenderable = useRef(new WeakMap<BoxRenderable, Element>());
+  const indexOfView = useRef(new WeakMap<Element, number>());
+  const container = useRef<{ scrollbox: ScrollBoxRenderable; view: Element } | null>(null);
+
+  const scrollContainer = (): Element | null => {
+    const scrollbox = options.scrollbox.current;
+
+    if (!scrollbox) return null;
+    if (container.current?.scrollbox !== scrollbox) {
+      container.current = { scrollbox, view: asElement(scrollContainerView(scrollbox)) };
+    }
+
+    return container.current.view;
+  };
+  const viewFor = (renderable: BoxRenderable): Element => {
+    const known = viewOfRenderable.current.get(renderable);
+
+    if (known) return known;
+    const view = asElement(rowView(renderable));
+
+    viewOfRenderable.current.set(renderable, view);
+
+    return view;
+  };
+
+  // the offset reporter the core registered, so a scroll the core asks for reports at once
+  const reportOffset = useRef<(() => void) | null>(null);
+
+  // a frame-event poll stands in for scroll and resize events: the renderer fires it after every
+  // render, and the callbacks only fire the core when the value actually changed
+  const onFrame = (read: () => void): (() => void) => {
+    read();
+    renderer?.on("frame", read);
+
+    return () => renderer?.off("frame", read);
+  };
+
+  const coreOptions = () => ({
+    count: options.count,
+    overscan: options.overscan,
+    estimateSize: options.estimateSize,
+    getScrollElement: scrollContainer,
+    observeElementRect: (
+      _instance: CoreVirtualizer,
+      callback: (rect: { width: number; height: number }) => void,
+    ) => {
+      let last = { width: -1, height: -1 };
+
+      return onFrame(() => {
+        const scrollbox = options.scrollbox.current;
+
+        if (!scrollbox) return;
+        const next = { width: scrollbox.viewport.width, height: scrollbox.viewport.height };
+
+        if (next.width === last.width && next.height === last.height) return;
+        last = next;
+        callback(next);
+      });
+    },
+    observeElementOffset: (
+      _instance: CoreVirtualizer,
+      callback: (offset: number, isScrolling: boolean) => void,
+    ) => {
+      let last = -1;
+      const report = (): void => {
+        const scrollbox = options.scrollbox.current;
+
+        if (!scrollbox || scrollbox.scrollTop === last) return;
+        last = scrollbox.scrollTop;
+        callback(last, false);
+      };
+      const stop = onFrame(report);
+
+      reportOffset.current = report;
+
+      return () => {
+        reportOffset.current = null;
+        stop();
+      };
+    },
+    // report the new offset in the same tick: the item window then follows the scroll at once,
+    // instead of one frame later with the target rows still unmounted
+    scrollToFn: (offset: number) => {
+      options.scrollbox.current?.scrollTo({ x: 0, y: Math.max(0, Math.round(offset)) });
+      reportOffset.current?.();
+    },
+    // a box measures 0 until Yoga has laid it out; keep the estimate rather than collapse the row
+    measureElement: (element: Element) =>
+      element.clientHeight > 0
+        ? element.clientHeight
+        : options.estimateSize(indexOfView.current.get(element) ?? -1),
+    onChange: () => setRevision((revision) => revision + 1),
+  });
+
+  const [virtualizer] = useState<CoreVirtualizer>(() => {
+    const instance = new Virtualizer<Element, Element>(coreOptions());
+
+    // the core looks an item's index up through a DOM attribute; ours is remembered per row view
+    instance.indexFromElement = (element) => indexOfView.current.get(element) ?? -1;
+
+    return instance;
+  });
+
+  virtualizer.setOptions(coreOptions());
+  useLayoutEffect(() => {
+    virtualizer._willUpdate();
+  });
+  useEffect(() => virtualizer._didMount(), [virtualizer]);
+  // no ResizeObserver here: a mounted row's height settles after layout and grows when a card
+  // opens under it, so every frame re-reads the mounted rows (the core only notifies on change)
+  useEffect(
+    () =>
+      onFrame(() => {
+        for (const element of virtualizer.elementsCache.values()) {
+          virtualizer.measureElement(element);
+        }
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [virtualizer, renderer],
+  );
+
+  return {
+    items: virtualizer.getVirtualItems(),
+    totalSize: virtualizer.getTotalSize(),
+    measureRef: (index) => (renderable) => {
+      if (!renderable) return;
+      const view = viewFor(renderable);
+
+      indexOfView.current.set(view, index);
+      virtualizer.measureElement(view);
+
+      // the row unmounted: forget its view so the frame re-measure stops reading it
+      return () => {
+        if (virtualizer.elementsCache.get(index) === view) virtualizer.elementsCache.delete(index);
+      };
+    },
+    scrollToIndex: (index, align = "auto") => virtualizer.scrollToIndex(index, { align }),
+  };
+}

package/src/view-diff.ts

@@ -6,6 +6,19 @@
  */
 
 import { parsePatchFiles, type FileDiffMetadata } from "@pierre/diffs";
+import {
+  isAddressed,
+  resolveAnchor,
+  type Annotation,
+  type Block,
+  type ReviewSession,
+} from "@cueloop/schema";
+import { spanRangeInBlock, type TextSpan } from "./thread-selection";
+import type { Mark } from "./view-plan";
+import { discussionsFrom } from "./discussions";
+
+// the diff sheet reads marks over rows as a diff concept; re-export so it need not reach into view-plan
+export type { Mark } from "./view-plan";
 
 export type DiffRowKind = "file" | "hunk" | "ctx" | "add" | "del";
 
@@ -66,12 +79,113 @@ export function diffRows(patchText: string): DiffRow[] {
   return rows;
 }
 
+/** Added and removed line counts per file path, for the file band's badge; base rows only. */
+export function fileChangeCounts(
+  rows: DiffRow[],
+): Map<string, { additions: number; deletions: number }> {
+  const counts = new Map<string, { additions: number; deletions: number }>();
+
+  for (const row of rows) {
+    if (row.kind !== "add" && row.kind !== "del") continue;
+    const entry = counts.get(row.file) ?? { additions: 0, deletions: 0 };
+
+    if (row.kind === "add") entry.additions += 1;
+    else entry.deletions += 1;
+    counts.set(row.file, entry);
+  }
+
+  return counts;
+}
+
 function fileLabel(file: FileDiffMetadata): string {
   return file.prevName && file.prevName !== file.name
     ? `${file.prevName} → ${file.name}`
     : file.name;
 }
 
+/** Row text carries the patch's trailing newline; anchors and rendering strip it. */
+export function diffRowText(row: DiffRow): string {
+  return row.text.replace(/\n$/, "");
+}
+
+/**
+ * The diff rows as anchor blocks, one per row in row order, so a comment span anchors
+ * with the same quote/context/position selectors a plan block does. Header rows are
+ * blocks too (indices stay 1:1 with the rows) but hold no comment.
+ */
+export function diffRowBlocks(rows: DiffRow[]): Block[] {
+  return rows.map((row, index) => ({
+    kind: "code",
+    text: row.kind === "file" || row.kind === "hunk" ? "" : diffRowText(row),
+    lineStart: index,
+    lineEnd: index,
+  }));
+}
+
+/**
+ * Resolve annotations against the diff rows and group marks per row index, with
+ * character ranges and the whole span, so the diff sheet paints and threads them
+ * exactly as the plan view does its blocks.
+ */
+export function marksByRows(
+  annotations: Annotation[],
+  rows: DiffRow[],
+  focusedId?: string,
+): Map<number, Mark[]> {
+  const blocks = diffRowBlocks(rows);
+  const marksByIndex = new Map<number, Mark[]>();
+
+  for (const annotation of annotations) {
+    // an addressed annotation keeps its record but paints no highlight
+    if (isAddressed(annotation)) continue;
+    const resolved = resolveAnchor(annotation.anchor, blocks);
+
+    if (!resolved) continue;
+    const span: TextSpan = {
+      start: { blockIndex: resolved.blockIndex, char: resolved.start },
+      end: { blockIndex: resolved.endBlockIndex, char: resolved.end },
+    };
+
+    // a span paints on every row it covers; the mark carries the whole span
+    for (let rowIndex = resolved.blockIndex; rowIndex <= resolved.endBlockIndex; rowIndex++) {
+      const range = spanRangeInBlock(span, rowIndex, blocks[rowIndex]!.text.length);
+
+      if (!range) continue;
+      const marks = marksByIndex.get(rowIndex) ?? [];
+
+      marks.push({
+        start: range.start,
+        end: range.end,
+        role: annotation.id === focusedId ? "mark-focus" : "mark-comment",
+        annotationId: annotation.id,
+        span,
+      });
+      marksByIndex.set(rowIndex, marks);
+    }
+  }
+
+  return marksByIndex;
+}
+
+/**
+ * Comments per file path across the diff: each discussion counts its comments (root plus
+ * replies) toward the file its span ends in. Feeds the changed-files tree and tab badges, so a
+ * file whose tab is closed still shows it carries feedback.
+ */
+export function commentCountsByFile(session: ReviewSession, rows: DiffRow[]): Map<string, number> {
+  const discussions = discussionsFrom(session, marksByRows(session.annotations, rows));
+  const counts = new Map<string, number>();
+
+  for (const discussion of discussions) {
+    const file = rows[discussion.blockIndex]?.file;
+
+    if (file === undefined) continue;
+    counts.set(file, (counts.get(file) ?? 0) + discussion.annotations.length);
+  }
+
+  return counts;
+}
+
 /** Quote-primary anchor for a diff row: neighbors as context selectors. */
 export function diffRowAnchor(rows: DiffRow[], rowIndex: number) {
   const row = rows[rowIndex]!;