@cueloop/client 0.1.0-alpha.91 → 0.1.0-alpha.93

package/src/use-annotation-surface.tsx

@@ -14,7 +14,8 @@
 
 import React, { useContext, useEffect, useRef, useState } from "react";
 import type { KeyEvent, MouseEvent as TerminalMouseEvent, TextRenderable } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
+import { flushSync } from "@opentui/react";
+import { useSharedKeyboard } from "./use-shared-keyboard";
 import type { Annotation, Thread } from "@cueloop/schema";
 import type { Mark } from "./view-plan";
 import type { QuickAction } from "./config";
@@ -97,6 +98,13 @@ export interface AnnotationSurfaceOptions {
   onObserverBlocked?: (reason: "observer" | "resolved") => void;
   /** Reports the caret's block, so block-level primitives (cut, restore) act where the caret is. */
   onCursorChange?: (blockIndex: number) => void;
+  /** Scroll a visual row before crossing a tall gap; true defers the caret move. */
+  onVerticalStep?: (
+    fromBlock: number,
+    toBlock: number,
+    direction: -1 | 1,
+    targetY?: number,
+  ) => boolean;
   /** The rail's focused card; the discussion holding it takes focus here. */
   focusedAnnotationId?: string;
   /** Reports the focused discussion's root comment, so the rail follows. */
@@ -129,6 +137,10 @@ export interface AnnotationSurface {
   focusedDiscussion: string | null;
   /** The block to keep in view: an opening card, a focused discussion, else the caret. */
   revealBlockIndex: number;
+  /** Screen row of the mounted visual line carrying the caret. */
+  headVisualY: () => number | undefined;
+  /** Capture mounted lines before a viewport scroll, then keep an exiting caret at its visible edge. */
+  prepareViewportScroll: () => (delta: number, top: number, bottom: number) => void;
   /** The text a span covers, blocks joined by a space, for previews. */
   spanQuote: (span: TextSpan) => string;
   /** Ref callback for one visual line, so a drag can hit-test it. */
@@ -192,6 +204,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     onComposingChange,
     onObserverBlocked,
     onCursorChange,
+    onVerticalStep,
     focusedAnnotationId,
     onFocusAnnotation,
     onAnnotate,
@@ -336,15 +349,55 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
       x: entry.renderable.x,
       y: entry.renderable.y,
     }));
-  const verticalTextPosition = (position: TextPosition, direction: -1 | 1): TextPosition | null => {
+  const headVisualY = (): number | undefined => {
+    const textLength = textLengthOf(head.blockIndex);
+    const cell = Math.max(0, Math.min(textLength - 1, head.char));
+
+    return allGeometry().find(
+      (line) =>
+        line.blockIndex === head.blockIndex &&
+        line.start <= cell &&
+        (cell < line.end || line.start === line.end),
+    )?.y;
+  };
+  const prepareViewportScroll = (): ((delta: number, top: number, bottom: number) => void) => {
+    const lines = allGeometry().filter((line) => source.annotatable(line.blockIndex));
+    const oldHeadY = headVisualY();
+
+    return (delta, top, bottom) => {
+      if (delta === 0 || oldHeadY === undefined || compose || focusedDiscussion || caretIsSelection)
+        return;
+      const shiftedHeadY = oldHeadY - delta;
+
+      if (shiftedHeadY >= top && shiftedHeadY <= bottom) return;
+      const visible = lines
+        .filter((line) => line.y - delta >= top && line.y - delta <= bottom)
+        .toSorted((left, right) => left.y - right.y || left.x - right.x);
+      const target = delta < 0 ? visible.at(-1) : visible[0];
+
+      if (!target) return;
+      const next = { blockIndex: target.blockIndex, char: target.start };
+
+      flushSync(() => {
+        setCaret({ head: next, anchor: next });
+        setCursor(next.blockIndex);
+      });
+    };
+  };
+  const verticalTextPosition = (
+    position: TextPosition,
+    direction: -1 | 1,
+  ): { position: TextPosition; y: number } | null => {
+    const textLength = textLengthOf(position.blockIndex);
+    const cell = Math.max(0, Math.min(textLength - 1, position.char));
     const lines = allGeometry()
       .filter((line) => source.annotatable(line.blockIndex))
       .toSorted((left, right) => left.y - right.y || left.x - right.x);
     const currentIndex = lines.findIndex(
       (line) =>
         line.blockIndex === position.blockIndex &&
-        line.start <= position.char &&
-        position.char <= line.end,
+        line.start <= cell &&
+        (cell < line.end || line.start === line.end),
     );
     const target = currentIndex === -1 ? undefined : lines[currentIndex + direction];
 
@@ -353,8 +406,11 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     const column = Math.max(0, position.char - current.start);
 
     return {
-      blockIndex: target.blockIndex,
-      char: Math.min(target.end, target.start + column),
+      position: {
+        blockIndex: target.blockIndex,
+        char: Math.min(target.end, target.start + column),
+      },
+      y: target.y,
     };
   };
 
@@ -671,22 +727,31 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     );
   };
 
+  const moveCaretVertical = (key: KeyEvent, vertical: -1 | 1): void => {
+    const nextBlock = nearestAnnotatable(source, cursor, vertical);
+    const visualTarget = verticalTextPosition(head, vertical);
+
+    if (!visualTarget && nextBlock === head.blockIndex) return;
+    const nextHead = visualTarget?.position ?? {
+      blockIndex: nextBlock,
+      char: key.shift ? Math.min(head.char, textLengthOf(nextBlock)) : 0,
+    };
+
+    if (onVerticalStep?.(head.blockIndex, nextHead.blockIndex, vertical, visualTarget?.y)) return;
+
+    setCaret({
+      head: nextHead,
+      anchor: key.shift ? caret.anchor : nextHead,
+    });
+    setFocusedDiscussion(null);
+    setCursor(nextHead.blockIndex);
+  };
+
   const handleCaretKey = (key: KeyEvent): boolean => {
     const vertical = verticalCaretDelta(key);
 
     if (vertical !== 0) {
-      const nextBlock = nearestAnnotatable(source, cursor, vertical);
-      const nextHead = verticalTextPosition(head, vertical) ?? {
-        blockIndex: nextBlock,
-        char: key.shift ? Math.min(head.char, textLengthOf(nextBlock)) : 0,
-      };
-
-      setCaret({
-        head: nextHead,
-        anchor: key.shift ? caret.anchor : nextHead,
-      });
-      setFocusedDiscussion(null);
-      setCursor(nextHead.blockIndex);
+      moveCaretVertical(key, vertical);
 
       return true;
     }
@@ -726,7 +791,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     openNewCompose(sequence);
   };
 
-  useKeyboard((key) => {
+  useSharedKeyboard((key) => {
     if (suspended) return;
     if (key.ctrl && key.name === "q") return onExit();
     const activeCompose = composeRef.current;
@@ -963,6 +1028,8 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     navMode,
     focusedDiscussion,
     revealBlockIndex,
+    headVisualY,
+    prepareViewportScroll,
     spanQuote,
     registerLine,
     onLineMouseDown,

package/src/use-changes-workbench.ts

@@ -7,13 +7,14 @@ import type { ProjectPanelMode } from "./components/AppShell";
 import type { LaunchLayout } from "./launch-layout";
 import {
   activateTab,
-  addTab,
   changesTab,
   closeTab,
   containsGroup,
-  fileTab,
   firstGroupId,
+  keepFileTab,
   makeGroup,
+  openChangesTab,
+  openFileTab,
   splitGroup,
   welcomeTab,
   type EditorNode,
@@ -73,9 +74,10 @@ export interface ChangesWorkbench {
   toggleZoom: () => void;
   focusGroup: (groupId: string) => void;
   activate: (groupId: string, tabId: string) => void;
+  keepTab: (groupId: string, tabId: string) => void;
   close: (groupId: string, tabId: string) => void;
   split: (groupId: string, direction: SplitDirection) => void;
-  openFile: (path: string, fileView: "diff" | "contents") => void;
+  openFile: (path: string, fileView: "diff" | "contents", persistent?: boolean) => void;
   /** Re-open defaults when the session changes: a diff opens the region in changed-files mode. */
   syncSession: (sessionId: string | undefined, isDiff: boolean) => void;
 }
@@ -121,16 +123,16 @@ export function useChangesWorkbench(options?: ChangesWorkbenchOptions): ChangesW
     }
   };
   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");
-    }
+    setChangesOpen(true);
+    setProjectOpen(true);
+    setProjectMode("changes");
+    setGrid((tree) => {
+      const result = openChangesTab(tree, focusedGroup ?? firstGroupId(tree));
+
+      setFocusedGroup(result.focusGroupId);
+
+      return result.tree;
+    });
   };
   const toggleProject = (): void => {
     setProjectOpen(true);
@@ -160,13 +162,22 @@ export function useChangesWorkbench(options?: ChangesWorkbenchOptions): ChangesW
       return result.tree;
     });
   };
-  const openFile = (path: string, fileView: "diff" | "contents"): void => {
+  const openFile = (path: string, fileView: "diff" | "contents", persistent = false): void => {
     setProjectOpen(true);
     setChangesOpen(true);
-    const label = path.split("/").pop() ?? path;
-    setGrid((tree) =>
-      addTab(tree, focusedGroup ?? firstGroupId(tree), fileTab(label, path, fileView)),
-    );
+    setGrid((tree) => {
+      const result = openFileTab(
+        tree,
+        focusedGroup ?? firstGroupId(tree),
+        path,
+        fileView,
+        persistent,
+      );
+
+      setFocusedGroup(result.focusGroupId);
+
+      return result.tree;
+    });
   };
 
   return {
@@ -182,6 +193,7 @@ export function useChangesWorkbench(options?: ChangesWorkbenchOptions): ChangesW
     toggleZoom: () => setZoomed((value) => !value),
     focusGroup: setFocusedGroup,
     activate: (groupId, tabId) => setGrid((tree) => activateTab(tree, groupId, tabId)),
+    keepTab: (groupId, tabId) => setGrid((tree) => keepFileTab(tree, groupId, tabId)),
     close,
     split,
     openFile,

package/src/use-frame-measure.ts

@@ -8,6 +8,45 @@
 import { useEffect, useState } from "react";
 import { useRenderer } from "@opentui/react";
 
+type Renderer = NonNullable<ReturnType<typeof useRenderer>>;
+type Measure = () => void;
+
+interface FrameSubscriptions {
+  measures: Set<Measure>;
+  notify: Measure;
+}
+
+const subscribers = new WeakMap<Renderer, FrameSubscriptions>();
+
+export function subscribeToFrames(renderer: Renderer, measure: Measure): () => void {
+  let subscription = subscribers.get(renderer);
+
+  if (!subscription) {
+    const measures = new Set<Measure>();
+    const notify = (): void => {
+      for (const subscriber of measures) subscriber();
+    };
+
+    subscription = { measures, notify };
+    subscribers.set(renderer, subscription);
+    renderer.on("frame", notify);
+    renderer.on("resize", notify);
+  }
+
+  const { measures, notify } = subscription;
+
+  measures.add(measure);
+
+  return () => {
+    measures.delete(measure);
+    if (measures.size > 0) return;
+
+    renderer.off("frame", notify);
+    renderer.off("resize", notify);
+    subscribers.delete(renderer);
+  };
+}
+
 export function useFrameMeasure<T>(
   read: () => T,
   isEqual: (left: T, right: T) => boolean,
@@ -27,13 +66,7 @@ export function useFrameMeasure<T>(
     };
 
     measure();
-    renderer?.on("frame", measure);
-    renderer?.on("resize", measure);
-
-    return () => {
-      renderer?.off("frame", measure);
-      renderer?.off("resize", measure);
-    };
+    if (renderer) return subscribeToFrames(renderer, measure);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [renderer, active]);
 

package/src/use-settings-dialog.tsx

@@ -4,7 +4,6 @@ import {
   persistActions,
   persistAutoClose,
   persistDiffView,
-  persistReviewSkill,
   persistReviewWorkspace,
   persistTheme,
   type AutoClose,
@@ -94,8 +93,6 @@ export function useSettingsDialog(params: {
   onSyncGithubIdentity: () => void;
   onRenameDisplayName: () => void;
   reviewSkill: string;
-  reviewSkillOptions: string[];
-  setReviewSkill: Dispatch<SetStateAction<string>>;
   reviewWorkspace: ReviewWorkspaceMode;
   setReviewWorkspace: Dispatch<SetStateAction<ReviewWorkspaceMode>>;
 }): SettingsDialogModel {
@@ -118,8 +115,6 @@ export function useSettingsDialog(params: {
     onSyncGithubIdentity,
     onRenameDisplayName,
     reviewSkill,
-    reviewSkillOptions,
-    setReviewSkill,
     reviewWorkspace,
     setReviewWorkspace,
   } = params;
@@ -210,8 +205,7 @@ export function useSettingsDialog(params: {
         {
           key: "reviewSkill",
           label: "Skill",
-          kind: "cycle",
-          options: reviewSkillOptions,
+          kind: "text",
         },
         {
           key: "reviewWorkspace",
@@ -281,12 +275,6 @@ export function useSettingsDialog(params: {
       onSyncGithubIdentity();
     } else if (rowKey === "displayName") {
       onRenameDisplayName();
-    } else if (rowKey === "reviewSkill") {
-      const current = Math.max(0, reviewSkillOptions.indexOf(reviewSkill));
-      const next = reviewSkillOptions[(current + 1) % reviewSkillOptions.length]!;
-
-      setReviewSkill(next);
-      persistReviewSkill(next);
     } else if (rowKey === "reviewWorkspace") {
       const next: ReviewWorkspaceMode = reviewWorkspace === "worktree" ? "current" : "worktree";
 

package/src/use-shared-keyboard.ts

@@ -0,0 +1,55 @@
+/** One keypress subscription per renderer, even when several editor tiles are mounted. */
+
+import { useEffect, useEffectEvent } from "react";
+import { useRenderer } from "@opentui/react";
+import type { KeyEvent } from "@opentui/core";
+
+type KeyInput = NonNullable<ReturnType<typeof useRenderer>>["keyInput"];
+type KeyHandler = (key: KeyEvent) => void;
+
+interface KeySubscriptions {
+  handlers: Set<KeyHandler>;
+  notify: KeyHandler;
+}
+
+const subscribers = new WeakMap<KeyInput, KeySubscriptions>();
+
+function subscribeToKeypress(input: KeyInput, handler: KeyHandler): () => void {
+  let subscription = subscribers.get(input);
+
+  if (!subscription) {
+    const handlers = new Set<KeyHandler>();
+    const notify = (key: KeyEvent): void => {
+      for (const subscriber of handlers) subscriber(key);
+    };
+
+    subscription = { handlers, notify };
+    subscribers.set(input, subscription);
+    input.on("keypress", notify);
+  }
+
+  const { handlers, notify } = subscription;
+
+  handlers.add(handler);
+
+  return () => {
+    handlers.delete(handler);
+    if (handlers.size > 0) return;
+
+    input.off("keypress", notify);
+    subscribers.delete(input);
+  };
+}
+
+export function useSharedKeyboard(handler: KeyHandler): void {
+  const renderer = useRenderer();
+  const stableHandler = useEffectEvent(handler);
+
+  useEffect(() => {
+    const input = renderer?.keyInput;
+
+    if (!input) return;
+
+    return subscribeToKeypress(input, stableHandler);
+  }, [renderer]);
+}

package/src/use-terminal-virtualizer.ts

@@ -12,6 +12,7 @@ import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "re
 import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
 import { useRenderer } from "@opentui/react";
 import { Virtualizer, type VirtualItem } from "@tanstack/virtual-core";
+import { subscribeToFrames } from "./use-frame-measure";
 
 export interface TerminalVirtualizerOptions {
   scrollbox: RefObject<ScrollBoxRenderable | null>;
@@ -29,6 +30,10 @@ export interface TerminalVirtualizer {
   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;
+  /** Measured or estimated visual-row offset of an item. */
+  startOfIndex: (index: number) => number | undefined;
+  /** Move the native viewport to an exact visual-row offset. */
+  scrollToOffset: (offset: number) => void;
 }
 
 /** Visible rows and one-row scrolling for a held mouse mark at a viewport edge. */
@@ -150,9 +155,8 @@ export function useTerminalVirtualizer(options: TerminalVirtualizerOptions): Ter
   // 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);
+    return renderer ? subscribeToFrames(renderer, read) : () => {};
   };
 
   const coreOptions = () => ({
@@ -255,5 +259,7 @@ export function useTerminalVirtualizer(options: TerminalVirtualizerOptions): Ter
       };
     },
     scrollToIndex: (index, align = "auto") => virtualizer.scrollToIndex(index, { align }),
+    startOfIndex: (index) => virtualizer.getOffsetForIndex(index, "start")?.[0],
+    scrollToOffset: (offset) => virtualizer.scrollToOffset(offset, { align: "start" }),
   };
 }