@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.71

package/src/components/KeybindsDialog.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import type { CheatsheetSection } from "../key-bindings";
+
+export interface KeybindsDialogProps {
+  sections: CheatsheetSection[];
+  theme?: Theme;
+}
+
+/** Rows a section takes: its title, its entries, and the blank line after it. */
+function sectionRows(section: CheatsheetSection): number {
+  return 1 + section.entries.length + 1;
+}
+
+/**
+ * Split the sections over `count` columns, filling each column to the
+ * balanced share of rows before starting the next, so a long cheatsheet
+ * reads top to bottom, then left to right.
+ */
+function columnsOf(sections: CheatsheetSection[], count: number): CheatsheetSection[][] {
+  const total = sections.reduce((sum, section) => sum + sectionRows(section), 0);
+  const share = Math.ceil(total / count);
+  const columns: CheatsheetSection[][] = [[]];
+  let filled = 0;
+
+  for (const section of sections) {
+    const column = columns[columns.length - 1]!;
+
+    if (filled > 0 && filled + sectionRows(section) > share && columns.length < count) {
+      columns.push([section]);
+      filled = sectionRows(section);
+    } else {
+      column.push(section);
+      filled += sectionRows(section);
+    }
+  }
+
+  return columns;
+}
+
+const COLUMN_WIDTH = 48;
+
+export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const totalRows = sections.reduce((sum, section) => sum + sectionRows(section), 0) + 1;
+  // a cheatsheet taller than the terminal folds into a second column
+  const columnCount =
+    totalRows + 3 > terminalHeight - 4 && terminalWidth >= COLUMN_WIDTH * 2 + 6 ? 2 : 1;
+  const columns = columnsOf(sections, columnCount);
+  const tallest = Math.max(
+    ...columns.map((column) => column.reduce((sum, section) => sum + sectionRows(section), 0)),
+  );
+  const width = Math.min(COLUMN_WIDTH * columnCount + 4, terminalWidth - 6);
+  const height = Math.min(terminalHeight - 4, tallest + 1 + 3);
+
+  return (
+    <Dialog
+      isOpen
+      title=" keybinds "
+      width={width}
+      height={height}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <box style={{ flexDirection: "row", flexGrow: 1 }}>
+          {columns.map((column, columnIndex) => (
+            <box key={columnIndex} style={{ flexDirection: "column", width: COLUMN_WIDTH }}>
+              {column.map((section) => (
+                <box key={section.title} style={{ flexDirection: "column" }}>
+                  <text fg={tokens.accent}>{section.title}</text>
+                  {section.entries.map((entry, index) => (
+                    <text key={index}>
+                      <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+                      <span fg={tokens.textMuted}>{entry.label}</span>
+                    </text>
+                  ))}
+                  <text> </text>
+                </box>
+              ))}
+            </box>
+          ))}
+        </box>
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/MenuBar.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { MenuBar } from "./MenuBar";
+
+export const meta: StoryMeta = { title: "Chrome/MenuBar" };
+
+const callbacks = { onSettings: () => {}, onKeybinds: () => {} };
+
+function BottomFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box
+      style={{ flexDirection: "column", width: "100%", height: "100%", justifyContent: "flex-end" }}
+    >
+      {children}
+    </box>
+  );
+}
+
+export const Open: Story = {
+  render: () => (
+    <BottomFrame>
+      <MenuBar open {...callbacks} />
+    </BottomFrame>
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 60, height: 8 },
+};

package/src/components/MenuBar.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+export interface MenuBarProps {
+  open: boolean;
+  onSettings: () => void;
+  onKeybinds: () => void;
+  theme?: Theme;
+}
+
+const DROPDOWN_OPTION_ROWS = 2;
+
+/** The settings gear's drop-down: Settings and Keybinds, below the top-left gear. */
+export function MenuBar({ open, onSettings, onKeybinds, theme }: MenuBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const dropdownHeight = DROPDOWN_OPTION_ROWS + 2;
+
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: 1,
+        top: 2,
+        width: 16,
+        height: dropdownHeight,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+        flexDirection: "column",
+      }}
+    >
+      <box onMouseUp={onSettings}>
+        <text fg={tokens.text}> Settings</text>
+      </box>
+      <box onMouseUp={onKeybinds}>
+        <text fg={tokens.text}> Keybinds</text>
+      </box>
+    </box>
+  );
+}

package/src/components/OverlayScrollbar.stories.tsx

@@ -0,0 +1,33 @@
+import React, { useRef } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { DARK } from "../theme";
+import { OverlayScrollbar } from "./OverlayScrollbar";
+import type { Story, StoryMeta } from "./story";
+
+export const meta: StoryMeta = { title: "Chrome/OverlayScrollbar" };
+
+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>
+      <OverlayScrollbar scrollbox={scrollRef} />
+    </box>
+  );
+}
+
+// At rest the overlay bar is hidden; the thumb only appears while the surface is scrolling.
+export const AtRest: Story = {
+  render: () => <TallSurface />,
+  size: { width: 24, height: 8 },
+};

package/src/components/OverlayScrollbar.test.tsx

@@ -0,0 +1,139 @@
+/**
+ * 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 { ScrollBoxRenderable, type Renderable } from "@opentui/core";
+import React from "react";
+import { DiffContentView } from "./DiffContentView";
+import { diffRows, marksByRows } from "../view-diff";
+import { allowEventLoopUpdates } from "../test-support";
+import { fixtureDiffSession } from "./story-fixtures";
+import { DARK } from "../theme";
+import { thumbGeometry } from "./OverlayScrollbar";
+
+const noop = (): void => {};
+
+function findById(node: Renderable, id: string): Renderable | undefined {
+  if (node.id === id) return node;
+  for (const child of node.getChildren()) {
+    const found = findById(child, id);
+
+    if (found) return found;
+  }
+
+  return undefined;
+}
+
+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(
+      <DiffContentView
+        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();
+    // the overlay bar hides at rest; a scroll reveals the thumb
+    const scroller = findById(setup.renderer.root, "diff-scroll");
+
+    if (!(scroller instanceof ScrollBoxRenderable))
+      throw new Error("diff-scroll is not a scrollbox");
+    const countThumbRows = (): number =>
+      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;
+
+    // the overlay bar reveals on a scroll and hides after an idle delay; alternate the offset to
+    // re-trigger the reveal until the thumb is captured, so a slow CI settle never races the hide
+    let thumbRows = 0;
+
+    for (let attempt = 0; attempt < 20 && thumbRows === 0; attempt++) {
+      scroller.scrollTo(attempt % 2 === 0 ? 4 : 5);
+      await setup.waitForVisualIdle();
+      thumbRows = countThumbRows();
+    }
+    const frame = setup.captureCharFrame().split("\n");
+
+    // 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/OverlayScrollbar.tsx

@@ -0,0 +1,129 @@
+/**
+ * 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. It is an overlay: the thumb appears while the
+ * surface is scrolling and hides once scrolling has been idle, so a resting surface shows none.
+ */
+
+import React, { useEffect, useRef, useState, 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";
+
+const HIDE_DELAY_MS = 1500;
+
+interface ScrollState {
+  top: number;
+  height: number;
+  viewport: number;
+}
+
+export interface ThumbGeometry {
+  row: number;
+  height: number;
+}
+
+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 OverlayScrollbarProps {
+  scrollbox: RefObject<ScrollBoxRenderable | null>;
+  theme?: Theme;
+}
+
+export function OverlayScrollbar({ scrollbox, theme }: OverlayScrollbarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const trackRef = useRef<BoxRenderable | null>(null);
+  const [visible, setVisible] = useState(false);
+  const draggingRef = useRef(false);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const prevTopRef = useRef<number | 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 reveal = (): void => {
+    setVisible(true);
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => {
+      if (!draggingRef.current) setVisible(false);
+    }, HIDE_DELAY_MS);
+  };
+
+  // reveal on real scroll movement, never on first mount, then hide once idle
+  useEffect(() => {
+    if (prevTopRef.current !== null && state.top !== prevTopRef.current) reveal();
+    prevTopRef.current = state.top;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.top]);
+
+  useEffect(
+    () => () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    },
+    [],
+  );
+
+  const geometry = thumbGeometry(state, track);
+  const thumb = visible ? geometry : null;
+
+  const scrollToTrackRow = (screenY: number): void => {
+    const box = scrollbox.current;
+
+    if (!box || !geometry) return;
+    const row = screenY - (trackRef.current?.y ?? 0) - Math.floor(geometry.height / 2);
+    const ratio = Math.min(1, Math.max(0, row / Math.max(1, track - geometry.height)));
+
+    box.scrollTo(Math.round(ratio * (state.height - state.viewport)));
+    reveal();
+  };
+
+  return (
+    <box
+      ref={trackRef}
+      style={{ width: 1, flexShrink: 0, flexDirection: "column" }}
+      onMouseDown={(event) => {
+        draggingRef.current = true;
+        scrollToTrackRow(event.y);
+      }}
+      onMouseDrag={(event) => scrollToTrackRow(event.y)}
+      onMouseUp={() => {
+        draggingRef.current = false;
+        reveal();
+      }}
+    >
+      {thumb ? (
+        <box
+          style={{
+            position: "absolute",
+            top: thumb.row,
+            left: 0,
+            width: 1,
+            height: thumb.height,
+            backgroundColor: tokens.textDim,
+          }}
+        />
+      ) : null}
+    </box>
+  );
+}

package/src/components/PaneGrid.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PaneGrid } from "./PaneGrid";
+
+export const meta: StoryMeta = { title: "Layout/PaneGrid" };
+
+function Sidebar(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textDim}>Projects</text>
+      <text fg={DARK.text}> cueloop</text>
+      <box style={{ backgroundColor: DARK.elevated }}>
+        <text fg={DARK.accent}> Read Cueloop Repository</text>
+      </box>
+      <text> </text>
+      <text fg={DARK.textDim}>Threads</text>
+      <text fg={DARK.textMuted}> Welcome to cueloop</text>
+    </box>
+  );
+}
+
+function Main(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>read the repo</text>
+      <text> </text>
+      <text fg={DARK.textMuted}>Repository context loaded. main is clean.</text>
+      <text> </text>
+      <text fg={DARK.text}>Core architecture</text>
+      <text fg={DARK.textMuted}> - packages/schema is the dependency root</text>
+      <text fg={DARK.textMuted}> - packages/daemon owns session state</text>
+    </box>
+  );
+}
+
+function Inspector(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>cueloop/main</text>
+      <text fg={DARK.textDim}> No changes</text>
+    </box>
+  );
+}
+
+function Header(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textMuted}>Read Cueloop Repository</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>markdown.test.ts</text>
+    </box>
+  );
+}
+
+function Footer(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textDim}>cueloop / main</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>Fable 5</text>
+    </box>
+  );
+}
+
+export const ThreePane: Story = {
+  render: () => (
+    <PaneGrid
+      sidebar={<Sidebar />}
+      main={<Main />}
+      mainHeader={<Header />}
+      inspector={<Inspector />}
+      footer={<Footer />}
+    />
+  ),
+  expectedColors: [DARK.border, DARK.accent],
+  size: { width: 120, height: 28 },
+};
+
+export const SidebarAndMain: Story = {
+  render: () => <PaneGrid sidebar={<Sidebar />} main={<Main />} />,
+  expectedColors: [DARK.border],
+  size: { width: 90, height: 20 },
+};

package/src/components/PaneGrid.tsx

@@ -0,0 +1,128 @@
+// A generic pane grid: a row of columns, each stacking a header cell over its body, with the
+// vertical rules run full height and every header cell's bottom rule joined into one horizontal
+// line. Rules only - no enclosing frames. This is the layout primitive for dev surfaces (the
+// storybook runner); the product's four-pane workbench is AppShell.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import type { BorderSides } from "@opentui/core";
+
+export interface PaneGridProps {
+  headerHeight?: number;
+  sidebar?: React.ReactNode;
+  sidebarHeader?: React.ReactNode;
+  sidebarWidth?: number;
+  main: React.ReactNode;
+  mainHeader?: React.ReactNode;
+  inspector?: React.ReactNode;
+  inspectorHeader?: React.ReactNode;
+  inspectorWidth?: number;
+  footer?: 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>
+  );
+}
+
+export function PaneGrid({
+  headerHeight = 3,
+  sidebar,
+  sidebarHeader,
+  sidebarWidth = 28,
+  main,
+  mainHeader,
+  inspector,
+  inspectorHeader,
+  inspectorWidth = 40,
+  footer,
+  theme,
+}: PaneGridProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        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}
+    </box>
+  );
+}