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

package/src/components/AppShell.tsx

@@ -1,83 +1,131 @@
-// App shell: a grid of pane columns. Each column stacks a header cell over its body; the vertical
-// rules run full height (through the header), and each header cell's bottom rule joins into one
-// horizontal line across the columns. Rules only - no enclosing frames.
+// The one app shell: a single header row over four full-height panes - Threads, Thread, Changes,
+// Project - divided by straight rules; each header cell's thin bottom rule shares the divider gray so
+// the whole header underline reads as one line joining the side rules.
+// The right region (Changes + Project) toggles as a unit: the Project pane is the right sidebar and is
+// always present when the region is on, Changes rides on top of it, and a thin rail holds the sidebar
+// toggle when the region is closed. Each pane owns its own header controls; the thread header never does.
 
 import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
 import { DARK, type Theme } from "../theme";
-import type { BorderSides } from "@opentui/core";
+import { PanelColumn } from "./PanelColumn";
+import { IconButton } from "./primitives/IconButton";
+import { NERD, HEADER_UNDERLINE_CHARS } from "./primitives/icons";
+import { TooltipProvider } from "./Tooltip";
+import { RootOverlayProvider } from "./RootOverlay";
+
+export type ProjectPanelMode = "changes" | "tree";
 
 export interface AppShellProps {
-  headerHeight?: number;
-  sidebar?: React.ReactNode;
-  sidebarHeader?: React.ReactNode;
-  sidebarWidth?: number;
-  main: React.ReactNode;
-  mainHeader?: React.ReactNode;
-  inspector?: React.ReactNode;
-  inspectorHeader?: React.ReactNode;
-  inspectorWidth?: number;
+  sidebarOpen: boolean;
+  onToggleSidebar: () => void;
+  onOpenMenu: () => void;
+  threadsPanel: React.ReactNode;
+  /** The Thread header title; mirrors the selected sidebar thread, blank on a bare launch. */
+  threadTitle: string;
+  /** Owner actions at the right edge of the Thread header (Edit/Share) - the only thread-header controls. */
+  threadActions?: React.ReactNode;
+  threadPanel: React.ReactNode;
+  changesOpen: boolean;
+  projectOpen: boolean;
+  /** Toggle the Changes editor (also switches the Project tree to changed-files mode). */
+  onToggleChanges: () => void;
+  /** Toggle the Project tree to the full project view. */
+  onToggleProject: () => void;
+  /** Open or close the whole right region (the right sidebar). */
+  onToggleRight: () => void;
+  projectMode: ProjectPanelMode;
+  /** The Changes editor grid; rendered only when changesOpen. */
+  changesPanel?: React.ReactNode;
+  projectPanel: React.ReactNode;
+  /** Hide the Thread pane so Changes fills the middle (zoom); the sidebars stay. */
+  zoomHideThread?: boolean;
   footer?: React.ReactNode;
+  children?: React.ReactNode;
   theme?: Theme;
-}
-
-interface PaneColumnProps {
-  width?: number;
-  grow?: boolean;
-  side?: BorderSides;
-  header: React.ReactNode;
-  body: React.ReactNode;
-  headerHeight: number;
-  theme: Theme;
-}
-
-function PaneColumn({
-  width,
-  grow,
-  side,
-  header,
-  body,
-  headerHeight,
-  theme,
-}: PaneColumnProps): React.ReactNode {
-  return (
-    <box
-      style={{
-        flexDirection: "column",
-        ...(grow ? { flexGrow: 1 } : { width }),
-        borderStyle: "single",
-        border: side ? [side] : [],
-        borderColor: theme.border,
-      }}
-    >
-      <box
-        style={{
-          height: headerHeight,
-          borderStyle: "single",
-          border: ["bottom"],
-          borderColor: theme.border,
-        }}
-      >
-        {header}
-      </box>
-      <box style={{ flexGrow: 1 }}>{body}</box>
-    </box>
-  );
+  threadsWidth?: number;
+  projectWidth?: number;
 }
 
 export function AppShell({
-  headerHeight = 3,
-  sidebar,
-  sidebarHeader,
-  sidebarWidth = 28,
-  main,
-  mainHeader,
-  inspector,
-  inspectorHeader,
-  inspectorWidth = 40,
+  sidebarOpen,
+  onToggleSidebar,
+  onOpenMenu,
+  threadsPanel,
+  threadTitle,
+  threadActions,
+  threadPanel,
+  changesOpen,
+  projectOpen,
+  onToggleChanges,
+  onToggleProject,
+  onToggleRight,
+  projectMode,
+  changesPanel,
+  projectPanel,
+  zoomHideThread,
   footer,
+  children,
   theme,
+  threadsWidth = 30,
+  projectWidth = 32,
 }: AppShellProps): React.ReactNode {
   const tokens = theme ?? DARK;
+  const { width: terminalWidth } = useTerminalDimensions();
+  // Thread and Changes would otherwise split the middle as two flexBasis-0 items, and Yoga adds the
+  // Changes left border on top of its share: at even widths the halves come out fractional, the
+  // Changes side rounds up, and the row overflows a cell under the Project border. Sizing the Thread
+  // pane to a whole number leaves Changes the lone flex item, which lays out exactly.
+  const collapsedRailWidth = 4;
+  const middleWidth =
+    terminalWidth -
+    (sidebarOpen ? threadsWidth : 0) -
+    (projectOpen ? projectWidth : collapsedRailWidth);
+  const threadPaneWidth =
+    changesOpen && !zoomHideThread ? Math.max(20, Math.floor(middleWidth / 2)) : undefined;
+
+  // gear + sidebar toggle + product mark: global chrome, in the Threads header when open, else at the
+  // left of the Thread header when the Threads pane is collapsed
+  const brandChrome = (
+    <box style={{ flexDirection: "row", flexShrink: 0 }}>
+      <box onMouseUp={onOpenMenu} style={{ paddingRight: 2 }}>
+        <text fg={tokens.textMuted}>{NERD.settings}</text>
+      </box>
+      <IconButton
+        glyph={sidebarOpen ? NERD.sidebarLeft : NERD.sidebarLeftOff}
+        onPress={onToggleSidebar}
+        tip="Toggle Threads"
+        marginRight={2}
+        theme={tokens}
+      />
+      <text fg={tokens.accent}>cueloop</text>
+    </box>
+  );
+
+  const projectToggles = (
+    <box style={{ flexDirection: "row", flexShrink: 0, alignItems: "center" }}>
+      <IconButton
+        glyph="changes"
+        active={projectMode === "changes"}
+        onPress={onToggleChanges}
+        marginRight={2}
+        theme={tokens}
+      />
+      <IconButton
+        glyph="project"
+        active={projectMode === "tree"}
+        onPress={onToggleProject}
+        marginRight={2}
+        theme={tokens}
+      />
+      <IconButton
+        glyph={NERD.sidebarRight}
+        onPress={onToggleRight}
+        tip="Toggle Right Sidebar"
+        theme={tokens}
+      />
+    </box>
+  );
 
   return (
     <box
@@ -88,40 +136,104 @@ export function AppShell({
         backgroundColor: tokens.background,
       }}
     >
-      <box style={{ flexDirection: "row", flexGrow: 1 }}>
-        {sidebar !== undefined ? (
-          <PaneColumn
-            width={sidebarWidth}
-            side="right"
-            header={sidebarHeader}
-            body={sidebar}
-            headerHeight={headerHeight}
-            theme={tokens}
-          />
-        ) : null}
-        <PaneColumn
-          grow
-          header={mainHeader}
-          body={main}
-          headerHeight={headerHeight}
-          theme={tokens}
-        />
-        {inspector !== undefined ? (
-          <PaneColumn
-            width={inspectorWidth}
-            side="left"
-            header={inspectorHeader}
-            body={inspector}
-            headerHeight={headerHeight}
-            theme={tokens}
-          />
-        ) : null}
-      </box>
-      {footer !== undefined ? (
-        <box style={{ borderStyle: "single", border: ["top"], borderColor: tokens.border }}>
-          {footer}
-        </box>
-      ) : null}
+      <RootOverlayProvider>
+        <TooltipProvider theme={tokens}>
+          <box style={{ flexGrow: 1, flexDirection: "row" }}>
+            {sidebarOpen ? (
+              <PanelColumn width={threadsWidth} border="right" header={brandChrome} theme={tokens}>
+                {threadsPanel}
+              </PanelColumn>
+            ) : null}
+            {!zoomHideThread ? (
+              <PanelColumn
+                width={threadPaneWidth}
+                header={
+                  <box style={{ flexDirection: "row" }}>
+                    {!sidebarOpen ? <box style={{ paddingRight: 2 }}>{brandChrome}</box> : null}
+                    {threadTitle ? <text fg={tokens.textDim}>{threadTitle}</text> : null}
+                  </box>
+                }
+                headerRight={threadActions}
+                theme={tokens}
+              >
+                {threadPanel}
+              </PanelColumn>
+            ) : null}
+            {changesOpen ? (
+              <box
+                style={{
+                  flexDirection: "column",
+                  flexGrow: 1,
+                  flexBasis: 0,
+                  minWidth: 0,
+                  borderStyle: "single",
+                  // zoom drops the Thread pane, whose sidebar rule already divides here, so drop this
+                  // one then to avoid a double border
+                  border: zoomHideThread ? [] : ["left"],
+                  borderColor: tokens.border,
+                }}
+              >
+                {changesPanel}
+              </box>
+            ) : null}
+            {projectOpen ? (
+              <PanelColumn
+                width={projectWidth}
+                border="left"
+                header={null}
+                headerRight={projectToggles}
+                theme={tokens}
+              >
+                {projectPanel}
+              </PanelColumn>
+            ) : (
+              // collapsed: a divider tick above the continuous header underline holds the reopen toggle;
+              // the rule lives in the header only, never running the pane's full height. The extra column
+              // of right padding keeps the reopen icon off the terminal's last column, which squeezes it
+              <box style={{ flexDirection: "column", width: 4 }}>
+                <box
+                  customBorderChars={HEADER_UNDERLINE_CHARS}
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    height: 2,
+                    paddingRight: 1,
+                    backgroundColor: tokens.panel,
+                    borderStyle: "single",
+                    border: ["bottom"],
+                    borderColor: tokens.border,
+                  }}
+                >
+                  <text fg={tokens.border}>{"│"}</text>
+                  <IconButton
+                    glyph={NERD.sidebarRightOff}
+                    onPress={onToggleRight}
+                    tip="Toggle Right Sidebar"
+                    marginLeft={1}
+                    theme={tokens}
+                  />
+                </box>
+              </box>
+            )}
+          </box>
+          {footer !== undefined ? (
+            <box
+              style={{
+                flexDirection: "row",
+                height: 1,
+                paddingLeft: 1,
+                paddingRight: 1,
+                borderStyle: "single",
+                border: ["top"],
+                borderColor: tokens.border,
+              }}
+            >
+              {footer}
+            </box>
+          ) : null}
+          {children}
+        </TooltipProvider>
+      </RootOverlayProvider>
     </box>
   );
 }

package/src/components/AppShell.zoom.test.tsx

@@ -0,0 +1,94 @@
+/**
+ * Regression: the Changes header controls keep their column when zoom hides the Thread
+ * pane. Thread and Changes used to split the middle as two flexBasis-0 items, and Yoga
+ * added the Changes left border on top of its share, so at even terminal widths the
+ * Changes pane overflowed a cell under the Project border and the zoom icon appeared to
+ * jump left on zoom. The shell now sizes the Thread pane to a whole number.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { AppShell } from "./AppShell";
+import { EditorGrid } from "./EditorGrid";
+import { changesTab, makeGroup } from "./editor-grid";
+import { NERD } from "./primitives/icons";
+import { allowEventLoopUpdates } from "../test-support";
+
+const grid = makeGroup([changesTab()]);
+
+async function zoomIconColumn(
+  width: number,
+  zoomed: boolean,
+  sidebarOpen: boolean,
+): Promise<number> {
+  const setup = await testRender(
+    <AppShell
+      sidebarOpen={sidebarOpen}
+      onToggleSidebar={() => {}}
+      onOpenMenu={() => {}}
+      threadsPanel={<text>threads</text>}
+      threadTitle="thread"
+      threadPanel={<text>body</text>}
+      changesOpen
+      projectOpen
+      onToggleChanges={() => {}}
+      onToggleProject={() => {}}
+      onToggleRight={() => {}}
+      projectMode="changes"
+      zoomHideThread={zoomed}
+      projectPanel={<text>project</text>}
+      changesPanel={
+        <EditorGrid
+          tree={grid}
+          focusedGroupId={grid.id}
+          onFocusGroup={() => {}}
+          onActivateTab={() => {}}
+          onCloseTab={() => {}}
+          onSplit={() => {}}
+          onZoom={() => {}}
+          zoomed={zoomed}
+          renderTab={() => <text>diff</text>}
+        />
+      }
+    />,
+    { width, height: 8 },
+  );
+
+  allowEventLoopUpdates();
+  await setup.waitForVisualIdle();
+  const column = setup.captureCharFrame().split("\n")[0]!.indexOf(NERD.zoom);
+
+  setup.renderer.destroy();
+
+  return column;
+}
+
+describe("zoom icon in the shell", () => {
+  // even widths are where the fractional split used to overflow; odd widths never did
+  for (const width of [160, 161]) {
+    for (const sidebarOpen of [false, true]) {
+      test(`stays in its column when zoom toggles (width ${width}, sidebar ${sidebarOpen ? "open" : "closed"})`, async () => {
+        // Act
+        const unzoomed = await zoomIconColumn(width, false, sidebarOpen);
+        const zoomed = await zoomIconColumn(width, true, sidebarOpen);
+
+        // Assert
+        expect(unzoomed).toBeGreaterThan(0);
+        expect(zoomed).toBe(unzoomed);
+      });
+    }
+  }
+
+  test("the icon clears the Project border by its padding in both states", async () => {
+    // Act
+    const setupColumns = await Promise.all([
+      zoomIconColumn(160, false, false),
+      zoomIconColumn(160, true, false),
+    ]);
+
+    // Assert - width 160, project pane 32: the border sits at 128 and the glyph one padding cell
+    // before it, the same inset the right-sidebar icon keeps from its own edge
+    for (const column of setupColumns) expect(128 - column).toBe(2);
+  });
+});

package/src/components/ChangesColumn.tsx

@@ -85,19 +85,24 @@ export interface ChangesColumnProps {
   /** The path whose diff the sheet is scrolled to, highlighted in the tree. */
   selectedPath?: string;
   onSelectFile: (path: string) => void;
+  /** Comments per file path, shown as a dot-and-count badge on each entry. */
+  commentCounts?: ReadonlyMap<string, number>;
   width?: number;
   theme?: Theme;
 }
 
-export function ChangesColumn({
-  open,
+/**
+ * The changed-files tree on its own, with no surrounding column frame: the body
+ * a workbench Project pane renders. A file click scrolls the diff to that file.
+ */
+export function ChangesFileTree({
   files = [],
   selectedPath,
   onSelectFile,
-  width = 32,
+  commentCounts,
   theme,
-}: ChangesColumnProps): React.ReactNode {
-  const nodes = useMemo(() => buildFileTree(files), [files]);
+}: Omit<ChangesColumnProps, "open" | "width">): React.ReactNode {
+  const nodes = useMemo(() => buildFileTree(files, commentCounts), [files, commentCounts]);
   // every folder opens by default so each changed file is reachable; the user
   // only ever names the folders they fold shut, so a new file set stays open
   const [collapsedIds, setCollapsedIds] = useState<ReadonlySet<string>>(new Set());
@@ -109,6 +114,39 @@ export function ChangesColumn({
     return expanded;
   }, [nodes, collapsedIds]);
 
+  return (
+    <scrollbox style={{ flexGrow: 1 }} focused={false}>
+      <Tree
+        nodes={nodes}
+        expandedIds={expandedIds}
+        selectedId={selectedPath}
+        flattenEmptyDirectories
+        showStatus
+        onSelect={onSelectFile}
+        onToggle={(id) =>
+          setCollapsedIds((current) => {
+            const next = new Set(current);
+
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+
+            return next;
+          })
+        }
+        theme={theme}
+      />
+    </scrollbox>
+  );
+}
+
+export function ChangesColumn({
+  open,
+  files = [],
+  selectedPath,
+  onSelectFile,
+  width = 32,
+  theme,
+}: ChangesColumnProps): React.ReactNode {
   if (!open) return null;
 
   return (
@@ -121,27 +159,12 @@ export function ChangesColumn({
         borderColor: theme?.border,
       }}
     >
-      <scrollbox style={{ flexGrow: 1 }} focused={false}>
-        <Tree
-          nodes={nodes}
-          expandedIds={expandedIds}
-          selectedId={selectedPath}
-          flattenEmptyDirectories
-          showStatus
-          onSelect={onSelectFile}
-          onToggle={(id) =>
-            setCollapsedIds((current) => {
-              const next = new Set(current);
-
-              if (next.has(id)) next.delete(id);
-              else next.add(id);
-
-              return next;
-            })
-          }
-          theme={theme}
-        />
-      </scrollbox>
+      <ChangesFileTree
+        files={files}
+        selectedPath={selectedPath}
+        onSelectFile={onSelectFile}
+        theme={theme}
+      />
     </box>
   );
 }

package/src/components/DiffSheet.scroll.test.tsx

@@ -1,15 +1,18 @@
-/** Keyboard scroll is smooth: cursor-follow never drifts past wrapped cards. */
+/** Keyboard scroll is smooth: the caret-follow reveal never scrolls the caret off screen, nor rebounds. */
 
 import { expect, test } from "bun:test";
-import React, { useState } from "react";
+import React from "react";
 import { testRender } from "@opentui/react/test-utils";
-import { useKeyboard } from "@opentui/react";
 import { ScrollBoxRenderable, type Renderable } from "@opentui/core";
 import type { Annotation } from "@cueloop/schema";
 import { DiffSheet } from "./DiffSheet";
-import { diffRows, type DiffRow } from "../view-diff";
+import { diffRows, marksByRows } from "../view-diff";
 import { DARK } from "../theme";
+import { annotationPaletteFor } from "../annotation-palette";
 import { press } from "../test-support";
+import { fixtureDiffSession } from "./story-fixtures";
+
+const noop = (): void => {};
 
 /** Find a renderable by id anywhere in the tree (getRenderable is not recursive). */
 function findById(node: Renderable, id: string): Renderable | undefined {
@@ -46,26 +49,9 @@ function tallPatch(count: number): string {
   ].join("\n");
 }
 
-/** DiffSheet with j-driven cursor, mirroring the App's down-navigation. */
-function ScrollHarness({
-  rows,
-  annotations,
-}: {
-  rows: DiffRow[];
-  annotations: Annotation[];
-}): React.ReactNode {
-  const [cursor, setCursor] = useState(0);
-
-  useKeyboard((key) => {
-    if (key.name === "j") setCursor((current) => Math.min(rows.length - 1, current + 1));
-  });
-
-  return <DiffSheet rows={rows} cursor={cursor} annotations={annotations} />;
-}
-
-test("scrolling down past wrapped annotation cards keeps the cursor pinned and the scroll monotonic", async () => {
-  // Arrange - a tall diff whose annotation bodies would wrap at this width; the
-  // wrapped card is exactly the layout the cursor-follow model used to mis-measure
+test("walking the caret down past wrapped discussion cards keeps it on screen and the scroll monotonic", async () => {
+  // Arrange - a tall diff whose comment bodies wrap at this width, so the cards
+  // between rows are taller than one line
   const rows = diffRows(tallPatch(40));
   const longBody =
     "this is a deliberately long annotation body that would wrap across the narrow test viewport";
@@ -73,39 +59,52 @@ test("scrolling down past wrapped annotation cards keeps the cursor pinned and t
     id: `a${rowIndex}`,
     kind: "comment",
     body: longBody,
-    anchor: { quote: rows[rowIndex]!.text, prefix: "", suffix: "" },
+    anchor: { quote: rows[rowIndex]!.text.replace(/\n$/, ""), prefix: "", suffix: "" },
     createdAt: "2026-01-01T00:00:00Z",
   }));
-  const setup = await testRender(<ScrollHarness rows={rows} annotations={annotations} />, {
-    width: 60,
-    height: 12,
-  });
+  const setup = await testRender(
+    <DiffSheet
+      rows={rows}
+      session={fixtureDiffSession({ annotations })}
+      marks={marksByRows(annotations, rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 60, height: 12 },
+  );
 
   await setup.waitForVisualIdle();
   const found = findById(setup.renderer.root, "diff-scroll");
 
   if (!(found instanceof ScrollBoxRenderable)) throw new Error("diff-scroll is not a scrollbox");
   const scrollbox = found;
+  const caretCell = annotationPaletteFor(DARK).caretCell;
 
-  // the cursor row is the one painted with the cursor background
-  const cursorScreenRow = (): number => {
+  // the caret row is the one painting the caret cell
+  const caretScreenRow = (): number => {
     const lines = setup.captureSpans().lines;
 
     for (let index = 0; index < lines.length; index++) {
-      if (lines[index]!.spans.some((span) => hex(span.bg) === DARK.cursorBackground)) return index;
+      if (lines[index]!.spans.some((span) => hex(span.bg) === caretCell)) return index;
     }
 
     return -1;
   };
 
-  // Act - walk the cursor down through the whole diff, sampling the scroll each step
+  // Act - walk the caret down through every code row, sampling the scroll each step
   const scrollTops: number[] = [];
   const screenRows: number[] = [];
+  const codeRowCount = rows.filter((row) => row.kind === "add").length;
 
-  for (let step = 0; step < rows.length; step++) {
+  for (let step = 0; step < codeRowCount; step++) {
+    await setup.waitForVisualIdle();
     scrollTops.push(scrollbox.scrollTop);
-    screenRows.push(cursorScreenRow());
-    await press(setup, "j");
+    screenRows.push(caretScreenRow());
+    await press(setup, "down");
   }
 
   // Assert - scrollTop only ever grows going down (never rebounds/jitters)
@@ -113,26 +112,10 @@ test("scrolling down past wrapped annotation cards keeps the cursor pinned and t
     expect(scrollTops[step]!).toBeGreaterThanOrEqual(scrollTops[step - 1]!);
   }
 
-  // Assert - the cursor never scrolls off screen (the pre-fix bug walked it off
-  // the viewport as it passed each wrapped card)
+  // Assert - the caret never scrolls off screen while it walks past each wrapped card
   expect(screenRows.every((row) => row >= 0)).toBe(true);
-
-  // Assert - through the steady scroll region (not the initial fill, not the
-  // final clamp at the content end) the cursor holds ONE stable row near the
-  // bottom; pre-fix it drifted down a row per wrapped card
-  const maxScroll = scrollbox.scrollHeight - scrollbox.height;
-  const steadyRows = screenRows.filter(
-    (_, step) => scrollTops[step]! > 0 && scrollTops[step]! < maxScroll,
-  );
-
-  expect(steadyRows.length).toBeGreaterThan(0);
-  expect(new Set(steadyRows).size).toBe(1);
-  const pinnedRow = steadyRows[0]!;
-  const viewportBottom = scrollbox.height;
-
-  // the cursor sits a couple of rows inside the bottom edge, per the follow rule
-  expect(viewportBottom - pinnedRow).toBeGreaterThanOrEqual(2);
-  expect(viewportBottom - pinnedRow).toBeLessThanOrEqual(3);
+  // and the walk did scroll: the tall diff does not fit the viewport
+  expect(scrollTops[scrollTops.length - 1]!).toBeGreaterThan(0);
 
   setup.renderer.destroy();
 }, 25000);