@cueloop/client 0.1.0-alpha.112 → 0.1.0-alpha.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.112",
+  "version": "0.1.0-alpha.113",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,10 +27,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.112",
-    "@cueloop/extension-api": "0.1.0-alpha.112",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.112",
-    "@cueloop/schema": "0.1.0-alpha.112",
+    "@cueloop/daemon": "0.1.0-alpha.113",
+    "@cueloop/extension-api": "0.1.0-alpha.113",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.113",
+    "@cueloop/schema": "0.1.0-alpha.113",
     "@opentui/core": "^0.6.8",
     "@opentui/keymap": "0.6.8",
     "@opentui/react": "^0.6.8",

package/src/annotations/components/AnnotationCards.tsx

@@ -58,6 +58,7 @@ export function Composer({
   placeholder,
   agentEnabled = false,
   focusRequest,
+  containerRef,
 }: {
   seed: string;
   glyph: string | null;
@@ -68,6 +69,7 @@ export function Composer({
   placeholder?: string;
   agentEnabled?: boolean;
   focusRequest?: number;
+  containerRef?: React.RefObject<BoxRenderable | null>;
 }): React.ReactNode {
   const renderer = useRenderer();
   const editorRef = useRef<TextareaRenderable | null>(null);
@@ -115,7 +117,7 @@ export function Composer({
   }, [focusRequest]);
 
   return (
-    <box style={{ flexDirection: "row" }}>
+    <box ref={containerRef} style={{ flexDirection: "row" }}>
       {glyph !== null ? (
         <text selectable={false} fg={tokens.text} style={{ flexShrink: 0 }}>{`${glyph} `}</text>
       ) : null}
@@ -200,16 +202,18 @@ export function ComposerPalette({
   slashItems,
   slashIndex,
   tokens,
+  containerRef,
 }: {
   slashActive: boolean;
   slashItems: SlashItem[];
   slashIndex: number;
   tokens: Theme;
+  containerRef?: React.RefObject<BoxRenderable | null>;
 }): React.ReactNode {
   if (!slashActive) return null;
 
   return (
-    <box style={{ flexDirection: "column", marginLeft: 3 }}>
+    <box ref={containerRef} style={{ flexDirection: "column", marginLeft: 3 }}>
       <SlashList
         items={slashItems}
         selected={Math.min(slashIndex, Math.max(0, slashItems.length - 1))}

package/src/annotations/use-annotation-surface.tsx

@@ -13,7 +13,12 @@
  */
 
 import React, { useContext, useEffect, useEffectEvent, useRef, useState } from "react";
-import type { KeyEvent, MouseEvent as TerminalMouseEvent, TextRenderable } from "@opentui/core";
+import type {
+  BoxRenderable,
+  KeyEvent,
+  MouseEvent as TerminalMouseEvent,
+  TextRenderable,
+} from "@opentui/core";
 import { flushSync } from "@opentui/react";
 import { useSharedKeyboard } from "../keyboard/use-shared-keyboard";
 import { agentInputTarget, type Annotation, type Thread } from "@cueloop/schema";
@@ -133,6 +138,8 @@ export interface AnnotationSurface {
   cursor: number;
   head: TextPosition;
   compose: ComposeState | null;
+  composerRef: React.RefObject<BoxRenderable | null>;
+  composerPaletteRef: React.RefObject<BoxRenderable | null>;
   navMode: boolean;
   focusedDiscussion: string | null;
   revealBlockIndex: number;
@@ -312,6 +319,8 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
   const [caretOffset, setCaretOffset] = useState(0);
   const [slashIndex, setSlashIndex] = useState(0);
   const composerReady = useRef(false);
+  const composerRef = useRef<BoxRenderable | null>(null);
+  const composerPaletteRef = useRef<BoxRenderable | null>(null);
   const readComposerText = useRef<(() => string) | null>(null);
   const composeRef = useRef<ComposeState | null>(null);
   const promptDraft = useRef("");
@@ -1008,6 +1017,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
   const composerNode = compose ? (
     <Composer
       key={compose.seed}
+      containerRef={composerRef}
       seed={compose.seed}
       glyph={compose.kind === "prompt" ? null : "●"}
       tokens={tokens}
@@ -1028,6 +1038,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
   const paletteNode = (
     <ComposerPalette
       key="composer-palette"
+      containerRef={composerPaletteRef}
       slashActive={slashActive}
       slashItems={slashItems}
       slashIndex={slashIndex}
@@ -1343,6 +1354,8 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     cursor,
     head,
     compose,
+    composerRef,
+    composerPaletteRef,
     navMode,
     focusedDiscussion,
     revealBlockIndex,

package/src/app/App.workbench.test.tsx

@@ -785,7 +785,11 @@ describe("the bare-launch welcome shell", () => {
     const welcome = locateText(setup, "Welcome");
 
     await setup.mockMouse.click(welcome.column + 8, welcome.row);
-    await setup.mockMouse.click(diffToggleColumn(setup), HEADER_ROW);
+    const header = (await captureSettledFrame(setup)).split("\n")[HEADER_ROW]!;
+    const changesColumn = header.lastIndexOf("changes");
+
+    expect(changesColumn).toBeGreaterThanOrEqual(0);
+    await setup.mockMouse.click(changesColumn, HEADER_ROW);
     await waitForText(setup, "edited in the working tree");
     const frame = setup.captureCharFrame();
 

package/src/diff/components/DiffContentView.scroll.test.tsx

@@ -9,7 +9,7 @@ import { DiffContentView } from "./DiffContentView";
 import { diffRows, marksByRows } from "../view-diff";
 import { DARK } from "../../appearance/theme";
 import { annotationPaletteFor } from "../../annotations/annotation-palette";
-import { press, settle, typeText } from "../../testing/test-support";
+import { dragText, press, settle, typeText } from "../../testing/test-support";
 import { fixtureDiffSession } from "../../stories/story-fixtures";
 
 const noop = (): void => {};
@@ -380,6 +380,17 @@ test("opening a comment on the diff's last line reveals its composer", async ()
   await typeText(setup, "bottom comment");
 
   expect(setup.captureCharFrame()).toContain("● bottom comment");
+  const scrollbox = findById(setup.renderer.root, "diff-scroll");
+
+  if (!(scrollbox instanceof ScrollBoxRenderable)) throw new Error("diff scrollbox missing");
+
+  const before = scrollbox.scrollTop;
+
+  await press(setup, "enter");
+  await typeText(setup, "second draft line");
+  expect(setup.captureCharFrame()).toContain("● bottom comment");
+  expect(setup.captureCharFrame()).toContain("second draft line");
+  expect(scrollbox.scrollTop).toBe(before + 1);
   setup.renderer.destroy();
 }, 25000);
 
@@ -441,3 +452,174 @@ test("Up keeps the caret on the first screen row while wrapped lines scroll", as
   expect(scrolled).toBe(true);
   setup.renderer.destroy();
 });
+
+test("opening and typing a comment preserves a visible selection's screen position", async () => {
+  const rows = diffRows(tallPatch(100));
+  const setup = await testRender(
+    <DiffContentView
+      rows={rows}
+      session={fixtureDiffSession()}
+      marks={marksByRows([], rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 80, height: 20 },
+  );
+
+  try {
+    await settle(setup);
+    for (let step = 0; step < 60; step++) {
+      await press(setup, "down");
+    }
+    const scrollbox = findById(setup.renderer.root, "diff-scroll");
+
+    if (!(scrollbox instanceof ScrollBoxRenderable)) throw new Error("diff scrollbox missing");
+
+    const firstVisible = setup.captureCharFrame().match(/line (\d{2})/);
+
+    if (!firstVisible) throw new Error("diff rows missing");
+
+    const first = Number(firstVisible[1]);
+    const startText = `line ${String(first + 2).padStart(2, "0")}`;
+    const endText = `line ${String(first + 5).padStart(2, "0")}`;
+
+    expect(scrollbox.scrollTop).toBeGreaterThan(0);
+    await dragText(setup, startText, endText, endText.length);
+    const before = scrollbox.scrollTop;
+    const selectionRow = setup
+      .captureCharFrame()
+      .split("\n")
+      .findIndex((line) => line.includes(startText));
+
+    await typeText(setup, "h");
+    expect(setup.captureCharFrame()).toContain("● h");
+    expect(scrollbox.scrollTop).toBe(before);
+    await typeText(setup, "ello world");
+    expect(setup.captureCharFrame()).toContain("● hello world");
+    expect(scrollbox.scrollTop).toBe(before);
+    expect(
+      setup
+        .captureCharFrame()
+        .split("\n")
+        .findIndex((line) => line.includes(startText)),
+    ).toBe(selectionRow);
+  } finally {
+    setup.renderer.destroy();
+  }
+}, 25000);
+
+test("a visible new comment stays in place above a long existing discussion", async () => {
+  const rows = diffRows(tallPatch(60));
+  const annotation: Annotation = {
+    id: "long-discussion",
+    kind: "comment",
+    body: "Existing discussion text that wraps across many lines. ".repeat(80),
+    anchor: { quote: "line 20", prefix: "", suffix: "" },
+    createdAt: "2026-01-01T00:00:00Z",
+  };
+  const setup = await testRender(
+    <DiffContentView
+      rows={rows}
+      session={fixtureDiffSession({ annotations: [annotation] })}
+      marks={marksByRows([annotation], rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 80, height: 20 },
+  );
+
+  try {
+    await settle(setup);
+    const scrollbox = findById(setup.renderer.root, "diff-scroll");
+
+    if (!(scrollbox instanceof ScrollBoxRenderable)) throw new Error("diff scrollbox missing");
+
+    scrollbox.scrollBy(14);
+    await settle(setup);
+    await dragText(setup, "line 16", "line 20", "line 20".length);
+    const before = scrollbox.scrollTop;
+
+    await typeText(setup, "new comment");
+    expect(setup.captureCharFrame()).toContain("● new comment");
+    expect(scrollbox.scrollTop).toBe(before);
+    scrollbox.scrollBy(30);
+    await settle(setup);
+    expect(scrollbox.scrollTop).toBe(before + 30);
+  } finally {
+    setup.renderer.destroy();
+  }
+});
+
+test("typing reveals a held selection whose virtual row was scrolled out", async () => {
+  const rows = diffRows(tallPatch(100));
+  const setup = await testRender(
+    <DiffContentView
+      rows={rows}
+      session={fixtureDiffSession()}
+      marks={marksByRows([], rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 80, height: 20 },
+  );
+
+  try {
+    await settle(setup);
+    await dragText(setup, "line 04", "line 06", "line 06".length);
+    const scrollbox = findById(setup.renderer.root, "diff-scroll");
+
+    if (!(scrollbox instanceof ScrollBoxRenderable)) throw new Error("diff scrollbox missing");
+
+    scrollbox.scrollBy(70);
+    await settle(setup);
+    expect(setup.captureCharFrame()).not.toContain("line 06");
+    await typeText(setup, "held selection draft");
+    expect(setup.captureCharFrame()).toContain("● held selection draft");
+  } finally {
+    setup.renderer.destroy();
+  }
+});
+
+test("opening slash choices at the bottom reveals the input and its action list", async () => {
+  const rows = diffRows(tallPatch(24));
+  const setup = await testRender(
+    <DiffContentView
+      rows={rows}
+      session={fixtureDiffSession()}
+      marks={marksByRows([], rows)}
+      quickActions={[{ prompt: "Explain" }, { prompt: "Review" }, { prompt: "Test" }]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 60, height: 10 },
+  );
+
+  try {
+    await settle(setup);
+    for (let step = 0; step < rows.length + 2; step++) {
+      await press(setup, "down");
+    }
+    await typeText(setup, "/");
+    expect(setup.captureCharFrame()).toContain("● /");
+    expect(setup.captureCharFrame()).toContain("explain");
+    expect(setup.captureCharFrame()).toContain("review");
+    expect(setup.captureCharFrame()).toContain("test");
+  } finally {
+    setup.renderer.destroy();
+  }
+});

package/src/diff/components/DiffContentView.tsx

@@ -12,6 +12,7 @@ import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "re
 import {
   MacOSScrollAccel,
   createTextAttributes,
+  type BoxRenderable,
   type KeyEvent,
   type ScrollBoxRenderable,
 } from "@opentui/core";
@@ -693,18 +694,80 @@ export function DiffContentView({
     return distance > 1;
   };
 
-  // An opening card or focused discussion reveals its owning item. Ordinary caret
-  // movement reveals the exact visual line, since an item's first wrapped line may
-  // sit above the viewport while the caret is already on screen.
   const revealItem = layout.itemOfRow[surface.revealBlockIndex];
 
   useEffect(() => {
-    if (revealItem === undefined || (!surface.compose && !surface.focusedDiscussion)) return;
+    if (revealItem === undefined) return;
 
-    virtual.scrollToIndex(revealItem, surface.compose ? "end" : "auto");
+    if (surface.compose) {
+      if (!surface.composerRef.current) virtual.scrollToIndex(revealItem, "start");
+    } else if (surface.focusedDiscussion) {
+      virtual.scrollToIndex(revealItem, "auto");
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [surface.revealBlockIndex, surface.compose, surface.focusedDiscussion]);
 
+  const revealedComposer = useRef<{ node: BoxRenderable; height: number } | null>(null);
+  const composerBounds = useFrameMeasure<{
+    node: BoxRenderable;
+    top: number;
+    bottom: number;
+  } | null>(
+    () => {
+      const composer = surface.composerRef.current;
+      const palette = surface.composerPaletteRef.current;
+
+      if (!composer || composer.height <= 0) return null;
+
+      const composerBottom = composer.y + composer.height - 1;
+
+      return {
+        node: composer,
+        top: composer.y,
+        bottom:
+          palette && palette.height > 0
+            ? Math.max(composerBottom, palette.y + palette.height - 1)
+            : composerBottom,
+      };
+    },
+    (left, right) =>
+      left?.node === right?.node && left?.top === right?.top && left?.bottom === right?.bottom,
+    null,
+    Boolean(surface.compose),
+  );
+
+  useLayoutEffect(() => {
+    const scrollbox = scrollRef.current;
+
+    if (
+      !surface.compose ||
+      !composerBounds ||
+      !scrollbox ||
+      composerBounds.node !== surface.composerRef.current
+    )
+      return;
+
+    const height = composerBounds.bottom - composerBounds.top + 1;
+
+    // Only mounting or resizing the input can override a manual scroll.
+    if (
+      revealedComposer.current?.node === composerBounds.node &&
+      revealedComposer.current.height === height
+    )
+      return;
+
+    revealedComposer.current = { node: composerBounds.node, height };
+    const top = scrollbox.viewport.y;
+    const bottom = top + scrollbox.viewport.height - 1;
+
+    if (composerBounds.bottom > bottom) scrollbox.scrollBy(composerBounds.bottom - bottom);
+    else if (
+      composerBounds.top < top &&
+      composerBounds.bottom - composerBounds.top < scrollbox.viewport.height
+    )
+      scrollbox.scrollBy(composerBounds.top - top);
+  }, [surface.compose, surface.composerRef, composerBounds]);
+
   useLayoutEffect(() => {
     if (revealItem === undefined || surface.compose || surface.focusedDiscussion) return;
 

package/src/workbench/components/GridTabContent.test.tsx

@@ -0,0 +1,99 @@
+import { expect, mock, test } from "bun:test";
+import React, { useEffect, useState } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { GridTabContent } from "./GridTabContent";
+import { diffRows, type DiffRow } from "../../diff/view-diff";
+import { fixtureDiffSession } from "../../stories/story-fixtures";
+import { DARK } from "../../appearance/theme";
+import { press, waitForText } from "../../testing/test-support";
+
+function createTestFilePatch(secondName: string): string {
+  return [
+    "diff --git a/first.ts b/first.ts",
+    "--- /dev/null",
+    "+++ b/first.ts",
+    "@@ -0,0 +1,3 @@",
+    "+export const firstOld = 1;",
+    "+export const firstNext = 2;",
+    "+export const firstLast = 3;",
+    "diff --git a/second.ts b/second.ts",
+    "--- /dev/null",
+    "+++ b/second.ts",
+    "@@ -0,0 +1,1 @@",
+    `+export const ${secondName} = 4;`,
+    "",
+  ].join("\n");
+}
+
+test("a file tab follows file switches and fresh rows after cursor updates", async () => {
+  const initialRows = diffRows(createTestFilePatch("secondOld"));
+  const session = fixtureDiffSession();
+  const cursorChanges = mock((_rowIndex: number) => {});
+  const noop = () => {};
+  let changePath: (path: string) => void = noop;
+  let changeRows: (rows: DiffRow[]) => void = noop;
+  let changeView: (view: "diff" | "contents") => void = noop;
+
+  function FileReview() {
+    const [path, setPath] = useState("first.ts");
+    const [rows, setRows] = useState(initialRows);
+    const [fileView, setFileView] = useState<"diff" | "contents">("diff");
+    const [, setCursor] = useState(0);
+
+    useEffect(() => {
+      changePath = setPath;
+      changeRows = setRows;
+      changeView = setFileView;
+    }, []);
+
+    return (
+      <GridTabContent
+        tab={{ id: "file", kind: "file", path, label: path, fileView }}
+        rows={rows}
+        surface={{
+          session,
+          quickActions: [],
+          observer: false,
+          onCursorChange: (rowIndex) => {
+            cursorChanges(rowIndex);
+            setCursor(rowIndex);
+          },
+          onAnnotate: noop,
+          onReply: noop,
+          onUpdateAnnotation: noop,
+          onExit: noop,
+        }}
+        rejectedRows={new Set()}
+        dimmed={false}
+        readFile={async () => "Full file contents\n"}
+        onAddFileComment={noop}
+        theme={DARK}
+      />
+    );
+  }
+  const setup = await testRender(<FileReview />, { width: 100, height: 20 });
+
+  try {
+    await waitForText(setup, "firstOld");
+    await press(setup, "down");
+    await press(setup, "down");
+    expect(cursorChanges).toHaveBeenLastCalledWith(
+      initialRows.findIndex((row) => row.text.includes("firstLast")),
+    );
+    expect(setup.captureCharFrame()).toContain("firstLast");
+    changePath("second.ts");
+    await waitForText(setup, "secondOld");
+    expect(setup.captureCharFrame()).not.toContain("firstOld");
+    changeRows(diffRows(createTestFilePatch("secondFresh")));
+    await waitForText(setup, "secondFresh");
+    expect(setup.captureCharFrame()).not.toContain("secondOld");
+    changeView("contents");
+    await waitForText(setup, "Full file contents");
+    expect(setup.captureCharFrame()).not.toContain("secondFresh");
+    changeView("diff");
+    await waitForText(setup, "secondFresh");
+    expect(setup.captureCharFrame()).not.toContain("Full file contents");
+  } finally {
+    setup.renderer.destroy();
+  }
+});