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

package/src/components/ProjectTreeView.tsx

@@ -0,0 +1,82 @@
+// The Project pane in tree mode: the workspace's tracked files as a collapsible directory tree.
+// Folders start collapsed and expand on click; a file click opens it as a tab. The caller keys this
+// on the session id so switching sessions remounts it and never shows the previous repository's paths.
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Tree } from "./primitives/Tree";
+import { buildPathTree } from "./file-tree";
+
+export interface ProjectTreeViewProps {
+  loadFiles: () => Promise<string[]>;
+  onSelectFile: (path: string) => void;
+  theme?: Theme;
+}
+
+export function ProjectTreeView({
+  loadFiles,
+  onSelectFile,
+  theme,
+}: ProjectTreeViewProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const [paths, setPaths] = useState<readonly string[] | null>(null);
+  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(new Set());
+  const nodes = useMemo(() => (paths ? buildPathTree(paths) : []), [paths]);
+  const loadRef = useRef(loadFiles);
+  useEffect(() => {
+    loadRef.current = loadFiles;
+  });
+
+  useEffect(() => {
+    let alive = true;
+    void loadRef.current().then(
+      (files) => {
+        if (alive) setPaths(files);
+      },
+      () => {
+        if (alive) setPaths([]);
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  if (paths === null) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>loading...</text>
+      </box>
+    );
+  }
+  if (paths.length === 0) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>empty</text>
+      </box>
+    );
+  }
+
+  return (
+    <scrollbox style={{ flexGrow: 1 }} focused={false}>
+      <Tree
+        nodes={nodes}
+        expandedIds={expandedIds}
+        onSelect={onSelectFile}
+        onToggle={(id) =>
+          setExpandedIds((current) => {
+            const next = new Set(current);
+
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+
+            return next;
+          })
+        }
+        theme={theme}
+      />
+    </scrollbox>
+  );
+}

package/src/components/PromptDialog.tsx

@@ -46,7 +46,14 @@ export function PromptDialog({
   if (!isOpen) return null;
 
   return (
-    <Dialog isOpen title={title} width={Math.min(54, terminalWidth - 6)} height={7} theme={theme}>
+    <Dialog
+      isOpen
+      title={title}
+      width={Math.min(54, terminalWidth - 6)}
+      height={7}
+      background={tokens.elevated}
+      theme={theme}
+    >
       <box
         style={{
           flexDirection: "column",

package/src/components/RootOverlay.stories.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { RootOverlayProvider, useRootOverlay } from "./RootOverlay";
+
+export const meta: StoryMeta = { title: "Layout/RootOverlay" };
+
+// The provider renders whatever a descendant pushes after the rest of the tree, so it draws on top.
+function OverlayDemo(): React.ReactNode {
+  const { setOverlay } = useRootOverlay();
+
+  useEffect(() => {
+    setOverlay(
+      <box
+        style={{
+          position: "absolute",
+          top: 2,
+          left: 6,
+          borderStyle: "single",
+          borderColor: DARK.border,
+          backgroundColor: DARK.elevated,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <text fg={DARK.text}>floating overlay</text>
+      </box>,
+    );
+  }, [setOverlay]);
+
+  return <text fg={DARK.textDim}>base content under the overlay</text>;
+}
+
+export const FloatingNode: Story = {
+  render: () => (
+    <RootOverlayProvider>
+      <box style={{ padding: 1, backgroundColor: DARK.panel }}>
+        <OverlayDemo />
+      </box>
+    </RootOverlayProvider>
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 40, height: 6 },
+};

package/src/components/RootOverlay.tsx

@@ -0,0 +1,35 @@
+// A root overlay slot: OpenTUI has no z-index, so an overlay drawn inside a pane is sliced by the
+// next pane's border. Anything pushed here renders after every pane (last in draw order), so it sits
+// on top of the whole shell - the same trick the tooltip uses. Callers position their node with
+// absolute screen coordinates.
+
+import React, { createContext, useContext, useMemo, useState } from "react";
+
+interface RootOverlayApi {
+  setOverlay: (node: React.ReactNode) => void;
+  clearOverlay: () => void;
+}
+
+const RootOverlayContext = createContext<RootOverlayApi>({
+  setOverlay: () => {},
+  clearOverlay: () => {},
+});
+
+export function useRootOverlay(): RootOverlayApi {
+  return useContext(RootOverlayContext);
+}
+
+export function RootOverlayProvider({ children }: { children: React.ReactNode }): React.ReactNode {
+  const [overlay, setOverlay] = useState<React.ReactNode>(null);
+  const api = useMemo<RootOverlayApi>(
+    () => ({ setOverlay, clearOverlay: () => setOverlay(null) }),
+    [],
+  );
+
+  return (
+    <RootOverlayContext.Provider value={api}>
+      {children}
+      {overlay}
+    </RootOverlayContext.Provider>
+  );
+}

package/src/components/SettingsDialog.tsx

@@ -123,12 +123,13 @@ export function SettingsDialog({
             nodes={navTree(categories)}
             expandedIds={new Set(["settings"])}
             selectedId={category.id}
+            hideIcons
             onSelect={onCategorySelect}
             onToggle={onCategorySelect}
             theme={theme}
           />
         </box>
-        <box style={{ width: 1, backgroundColor: tokens.border }} />
+        <box style={{ borderStyle: "single", border: ["left"], borderColor: tokens.border }} />
         <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 2, paddingRight: 1 }}>
           <text fg={tokens.text}>{category.name}</text>
           <text fg={tokens.textDim}>{category.description}</text>

package/src/components/SurfaceScrollbar.stories.tsx

@@ -0,0 +1,34 @@
+import React, { useRef } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { DARK } from "../theme";
+import { SurfaceScrollbar } from "./SurfaceScrollbar";
+import type { Story, StoryMeta } from "./story";
+
+export const meta: StoryMeta = { title: "Chrome/SurfaceScrollbar" };
+
+function TallSurface(): React.ReactNode {
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  return (
+    <box style={{ width: 24, height: 8, flexDirection: "row", backgroundColor: DARK.background }}>
+      <scrollbox
+        ref={scrollRef}
+        style={{ flexGrow: 1 }}
+        focused={false}
+        verticalScrollbarOptions={{ visible: false }}
+      >
+        {Array.from({ length: 24 }, (_unused, index) => (
+          <text key={index} fg={DARK.textMuted}>{`row ${index + 1}`}</text>
+        ))}
+      </scrollbox>
+      <SurfaceScrollbar scrollbox={scrollRef} />
+    </box>
+  );
+}
+
+// The mirrored bar: content three times the viewport puts a thumb a third as tall at the top.
+export const ThumbAtTop: Story = {
+  render: () => <TallSurface />,
+  expectedColors: [DARK.textDim],
+  size: { width: 24, height: 8 },
+};

package/src/components/SurfaceScrollbar.test.tsx

@@ -0,0 +1,111 @@
+/**
+ * The mirrored scrollbar: thumb geometry follows the scroll state, and on a surface it
+ * draws as the panel's rightmost column, past the discussion dots - not inside the
+ * scrollbox's own viewport row.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { DiffSheet } from "./DiffSheet";
+import { diffRows, marksByRows } from "../view-diff";
+import { allowEventLoopUpdates } from "../test-support";
+import { fixtureDiffSession } from "./story-fixtures";
+import { DARK } from "../theme";
+import { thumbGeometry } from "./SurfaceScrollbar";
+
+const noop = (): void => {};
+
+function hex(color: { toInts(): [number, number, number, number] }): string {
+  const [red, green, blue] = color.toInts();
+
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
+describe("thumbGeometry", () => {
+  test("nothing to scroll draws no thumb", () => {
+    // Arrange / Act / Assert - content fits the viewport
+    expect(thumbGeometry({ top: 0, height: 10, viewport: 14 }, 14)).toBeNull();
+  });
+
+  test("the thumb's height is the viewport's share of the content, at least one row", () => {
+    // Act
+    const tall = thumbGeometry({ top: 0, height: 44, viewport: 14 }, 14);
+    const tiny = thumbGeometry({ top: 0, height: 10_000, viewport: 14 }, 14);
+
+    // Assert
+    expect(tall).toEqual({ row: 0, height: 4 });
+    expect(tiny?.height).toBe(1);
+  });
+
+  test("the thumb reaches the track's end at the maximum scroll offset", () => {
+    // Act - scrolled to the bottom
+    const thumb = thumbGeometry({ top: 30, height: 44, viewport: 14 }, 14);
+
+    // Assert - its last row is the track's last row
+    expect(thumb).toEqual({ row: 10, height: 4 });
+  });
+});
+
+describe("the diff sheet's scrollbar", () => {
+  const body = Array.from({ length: 40 }, (_unused, index) => `+line ${index} of the change;`).join(
+    "\n",
+  );
+  const patch = `diff --git a/x.ts b/x.ts\n--- a/x.ts\n+++ b/x.ts\n@@ -0,0 +1,40 @@\n${body}\n`;
+
+  test("draws as the rightmost column, past the discussion dot", async () => {
+    // Arrange - a diff taller than the viewport, with one discussion so the dot rail has a dot
+    const rows = diffRows(patch);
+    const session = fixtureDiffSession({
+      annotations: [
+        {
+          id: "a1",
+          kind: "comment",
+          body: "hm",
+          anchor: { quote: "line 7 of the change;", prefix: "", suffix: "" },
+          createdAt: "2026-01-01T00:00:00Z",
+        },
+      ],
+    });
+    const width = 60;
+    const setup = await testRender(
+      <DiffSheet
+        rows={rows}
+        session={session}
+        marks={marksByRows(session.annotations, rows)}
+        quickActions={[]}
+        observer={false}
+        onAnnotate={noop}
+        onReply={noop}
+        onUpdateAnnotation={noop}
+        onExit={noop}
+      />,
+      { width, height: 14 },
+    );
+
+    allowEventLoopUpdates();
+    await setup.waitForVisualIdle();
+    const frame = setup.captureCharFrame().split("\n");
+    const thumbRows = setup.captureSpans().lines.filter((line) => {
+      let column = 0;
+
+      for (const span of line.spans) {
+        column += span.text.length;
+        if (column >= width) return span.bg !== undefined && hex(span.bg) === DARK.textDim;
+      }
+
+      return false;
+    }).length;
+
+    // Assert - the thumb occupies the last column at the top (scroll offset 0), and the dot sits
+    // to its left in the rail, so the order reads content, dots, scrollbar
+    expect(thumbRows).toBe(4);
+    const dotLine = frame.find((line) => line.includes("○"));
+
+    expect(dotLine).toBeDefined();
+    expect(dotLine!.indexOf("○")).toBeLessThan(width - 1);
+    // let the async highlight settle before the renderer goes away
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    setup.renderer.destroy();
+  });
+});

package/src/components/SurfaceScrollbar.tsx

@@ -0,0 +1,93 @@
+/**
+ * A one-cell vertical scrollbar that mirrors a scrollbox's scroll state, so the bar can sit
+ * where the layout wants it (the panel's rightmost column, past the discussion dots) instead
+ * of inside the scrollbox's own viewport row. Reads the scroll position each frame, draws the
+ * thumb, and a click or drag on the track scrolls the box.
+ */
+
+import React, { useRef, type RefObject } from "react";
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useFrameMeasure } from "../use-frame-measure";
+import { useComponentTheme } from "./theme-context";
+
+interface ScrollState {
+  top: number;
+  height: number;
+  viewport: number;
+}
+
+/** The thumb's row and height for a viewport of `track` rows over the scroll state. */
+export interface ThumbGeometry {
+  row: number;
+  height: number;
+}
+
+/** Where the thumb sits: proportional to the scroll offset, never shorter than one row, or null when nothing scrolls. */
+export function thumbGeometry(state: ScrollState, track: number): ThumbGeometry | null {
+  if (track <= 0 || state.height <= state.viewport || state.viewport <= 0) return null;
+  const height = Math.max(1, Math.round((state.viewport / state.height) * track));
+  const maxTop = state.height - state.viewport;
+  const row = Math.round((state.top / maxTop) * (track - height));
+
+  return { row: Math.min(track - height, Math.max(0, row)), height };
+}
+
+export interface SurfaceScrollbarProps {
+  scrollbox: RefObject<ScrollBoxRenderable | null>;
+  theme?: Theme;
+}
+
+export function SurfaceScrollbar({ scrollbox, theme }: SurfaceScrollbarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const trackRef = useRef<BoxRenderable | null>(null);
+  const state = useFrameMeasure<ScrollState>(
+    () => ({
+      top: scrollbox.current?.scrollTop ?? 0,
+      height: scrollbox.current?.scrollHeight ?? 0,
+      viewport: scrollbox.current?.viewport.height ?? 0,
+    }),
+    (left, right) =>
+      left.top === right.top && left.height === right.height && left.viewport === right.viewport,
+    { top: 0, height: 0, viewport: 0 },
+  );
+  const track = useFrameMeasure(
+    () => trackRef.current?.height ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+  const thumb = thumbGeometry(state, track);
+
+  // a row on the track maps to the scroll offset that puts the thumb's top there
+  const scrollToTrackRow = (screenY: number): void => {
+    const box = scrollbox.current;
+
+    if (!box || !thumb) return;
+    const row = screenY - (trackRef.current?.y ?? 0) - Math.floor(thumb.height / 2);
+    const ratio = Math.min(1, Math.max(0, row / Math.max(1, track - thumb.height)));
+
+    box.scrollTo(Math.round(ratio * (state.height - state.viewport)));
+  };
+
+  return (
+    <box
+      ref={trackRef}
+      style={{ width: 1, flexShrink: 0, flexDirection: "column" }}
+      onMouseDown={(event) => scrollToTrackRow(event.y)}
+      onMouseDrag={(event) => scrollToTrackRow(event.y)}
+    >
+      {thumb ? (
+        <box
+          style={{
+            position: "absolute",
+            top: thumb.row,
+            left: 0,
+            width: 1,
+            height: thumb.height,
+            backgroundColor: tokens.textDim,
+          }}
+        />
+      ) : null}
+    </box>
+  );
+}

package/src/components/ThreadFooter.stories.tsx

@@ -16,7 +16,7 @@ export const Default: Story = {
     </Frame>
   ),
   expectedColors: [DARK.accent, DARK.textMuted],
-  size: { width: 80, height: 1 },
+  size: { width: 80, height: 2 },
 };
 
 export const ReadOnly: Story = {
@@ -26,5 +26,5 @@ export const ReadOnly: Story = {
     </Frame>
   ),
   expectedColors: [DARK.textDim],
-  size: { width: 80, height: 1 },
+  size: { width: 80, height: 2 },
 };

package/src/components/ThreadFooter.test.tsx

@@ -0,0 +1,31 @@
+/** The thread footer keeps its repo/branch context on one line: a long branch truncates to fit rather
+ * than wrapping and pushing the send control onto a second row. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ThreadFooter } from "./ThreadFooter";
+import { DARK } from "../theme";
+
+test("a long branch truncates on one line and keeps the send control in place", async () => {
+  const setup = await testRender(
+    <box style={{ width: 60, height: 3, backgroundColor: DARK.background }}>
+      <box style={{ flexGrow: 1 }} />
+      <ThreadFooter
+        repo="cueloop"
+        branch="design/tui-tree-and-edgy-really-long-name"
+        onSubmit={() => {}}
+        theme={DARK}
+      />
+    </box>,
+    { width: 60, height: 3 },
+  );
+  await setup.renderOnce();
+
+  const lines = setup.captureCharFrame().split("\n");
+  const footerRow = lines.find((line) => line.includes("cueloop"))!;
+  // the repo/branch context and the send control share the single footer row
+  expect(footerRow).toContain("send message");
+  // the branch is clipped, not wrapped: it never reaches its tail on a second row
+  expect(setup.captureCharFrame()).not.toContain("long-name");
+});

package/src/components/ThreadFooter.tsx

@@ -28,20 +28,25 @@ export function ThreadFooter({
     <box
       style={{
         flexDirection: "row",
-        height: 1,
+        height: 2,
         alignItems: "center",
         paddingLeft: 1,
         paddingRight: 1,
         backgroundColor: tokens.panel,
+        borderStyle: "single",
+        border: ["top"],
+        borderColor: tokens.border,
       }}
     >
-      <text>
-        <span fg={tokens.blue}>{`${NERD.folderClosed} `}</span>
-        <span fg={tokens.textMuted}>{repo}</span>
-        <span fg={tokens.textDim}>{` / ${branch}`}</span>
-      </text>
+      <box style={{ flexShrink: 1, minWidth: 0, marginRight: 2 }}>
+        <text truncate>
+          <span fg={tokens.blue}>{`${NERD.folderClosed} `}</span>
+          <span fg={tokens.textMuted}>{repo}</span>
+          <span fg={tokens.textDim}>{` / ${branch}`}</span>
+        </text>
+      </box>
       <box style={{ flexGrow: 1 }} />
-      <box onMouseUp={canSubmit ? onSubmit : undefined}>
+      <box onMouseUp={canSubmit ? onSubmit : undefined} style={{ flexShrink: 0 }}>
         <text fg={canSubmit ? tokens.accent : tokens.textDim}>send message</text>
       </box>
     </box>