@cueloop/client 0.1.0-alpha.8 → 0.1.0-alpha.81

package/src/components/EditorGrid.tsx

@@ -0,0 +1,426 @@
+// Renders the Changes pane's editor grid: recursive branches split into rows/columns, each leaf an
+// editor group with its own tab strip and header controls. The caller supplies renderTab so the grid
+// stays layout-only - a tab becomes a diff, a file's contents, or the aggregate Changes view upstream.
+
+import React, { useEffect, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { BoxRenderable } from "@opentui/core";
+import { DARK, type Theme } from "../theme";
+import { useFrameMeasure } from "../use-frame-measure";
+import { useRootOverlay } from "./RootOverlay";
+import { useMenuControl } from "./menu-control";
+import { IconButton } from "./primitives/IconButton";
+import { NERD, HEADER_UNDERLINE_CHARS } from "./primitives/icons";
+import type { EditorGroup, EditorNode, EditorTab, SplitDirection } from "./editor-grid";
+
+export interface EditorGridProps {
+  tree: EditorNode;
+  focusedGroupId: string | null;
+  onFocusGroup: (groupId: string) => void;
+  onActivateTab: (groupId: string, tabId: string) => void;
+  onCloseTab: (groupId: string, tabId: string) => void;
+  onSplit: (groupId: string, direction: SplitDirection) => void;
+  onZoom: () => void;
+  zoomed: boolean;
+  /** The body of a group's active tab; `groupFocused` tells a keyboard-owning body whether it has the keys. */
+  renderTab: (tab: EditorTab, groupFocused: boolean) => React.ReactNode;
+  /** Comments per file path, shown as a dot-and-count badge on a file tab. */
+  commentCounts?: ReadonlyMap<string, number>;
+  theme?: Theme;
+}
+
+const SPLIT_ITEMS: ReadonlyArray<{ label: string; direction: SplitDirection; arrow: string }> = [
+  { label: "left", direction: "left", arrow: "←" },
+  { label: "right", direction: "right", arrow: "→" },
+  { label: "up", direction: "up", arrow: "↑" },
+  { label: "down", direction: "down", arrow: "↓" },
+];
+
+const MENU_WIDTH = 12;
+
+/** An arrow key maps straight to its split direction; other keys leave the menu untouched. */
+function splitDirectionForKey(name: string): SplitDirection | null {
+  const item = SPLIT_ITEMS.find((entry) => entry.direction === name);
+
+  return item ? item.direction : null;
+}
+
+function EditorTabButton({
+  tab,
+  active,
+  commentCount,
+  onSelect,
+  onClose,
+  tokens,
+}: {
+  tab: EditorTab;
+  active: boolean;
+  /** Comments on this tab's file, shown as a dot-and-count badge; 0 shows nothing. */
+  commentCount: number;
+  onSelect: () => void;
+  onClose: () => void;
+  tokens: Theme;
+}): React.ReactNode {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <box
+      id={tab.id}
+      onMouseUp={onSelect}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+      style={{
+        flexDirection: "row",
+        // a tab keeps the width of its name; the strip scrolls when the row overflows
+        flexShrink: 0,
+        paddingLeft: 1,
+        paddingRight: 1,
+        backgroundColor: active ? tokens.background : undefined,
+        borderStyle: "single",
+        border: ["right"],
+        borderColor: tokens.border,
+      }}
+    >
+      <text fg={active ? tokens.textMuted : tokens.textDim} style={{ wrapMode: "none" }}>
+        {tab.label}
+      </text>
+      {commentCount > 0 ? (
+        <text
+          fg={tokens.textDim}
+          style={{ flexShrink: 0, wrapMode: "none" }}
+        >{` ● ${commentCount}`}</text>
+      ) : null}
+      <box
+        onMouseUp={(event) => {
+          event.stopPropagation();
+          onClose();
+        }}
+        style={{ paddingLeft: 1 }}
+      >
+        <text fg={tokens.textDim}>{hovered ? NERD.close : " "}</text>
+      </box>
+    </box>
+  );
+}
+
+/** Cells a tab occupies: padding, label, the ` ● N` comment badge when present, the close cell, the right rule. */
+export function tabCellWidth(tab: EditorTab, commentCount = 0): number {
+  const badge = commentCount > 0 ? 3 + String(commentCount).length : 0;
+
+  return tab.label.length + 5 + badge;
+}
+
+/** The run of tabs `[first, end)` the strip shows. */
+export interface TabWindow {
+  first: number;
+  end: number;
+}
+
+/** The run of tabs that fits the strip and contains the active tab; markers take a cell each side. */
+export function visibleTabWindow(
+  tabs: EditorTab[],
+  firstVisible: number,
+  activeIndex: number,
+  stripWidth: number,
+  commentCount: (tab: EditorTab) => number = () => 0,
+): TabWindow {
+  // unmeasured strip: show everything, the header clips until the width is known
+  if (stripWidth <= 0) return { first: 0, end: tabs.length };
+  const width = (index: number): number => tabCellWidth(tabs[index]!, commentCount(tabs[index]!));
+  const fitEnd = (first: number): number => {
+    let used = first > 0 ? 1 : 0;
+    let end = first;
+
+    while (end < tabs.length) {
+      const remaining = end + 1 < tabs.length ? 1 : 0;
+
+      if (used + width(end) + remaining > stripWidth) break;
+      used += width(end);
+      end++;
+    }
+
+    // always show at least the tab the window starts on, even when it is wider than the strip
+    return Math.max(end, Math.min(first + 1, tabs.length));
+  };
+  let first = Math.min(Math.max(0, firstVisible), Math.max(0, activeIndex));
+  let end = fitEnd(first);
+
+  // the active tab past the right edge pulls the window along until it fits
+  while (activeIndex >= end && first < activeIndex) {
+    first++;
+    end = fitEnd(first);
+  }
+
+  return { first, end };
+}
+
+function SplitMenu({
+  onPick,
+  tokens,
+}: {
+  onPick: (direction: SplitDirection) => void;
+  tokens: Theme;
+}): React.ReactNode {
+  return (
+    <box
+      onMouseUp={(event) => event.stopPropagation()}
+      style={{
+        width: MENU_WIDTH,
+        flexDirection: "column",
+        borderStyle: "single",
+        borderColor: tokens.border,
+        backgroundColor: tokens.elevated,
+      }}
+    >
+      {SPLIT_ITEMS.map((item) => (
+        <box
+          key={item.direction}
+          onMouseUp={() => onPick(item.direction)}
+          style={{ flexDirection: "row", paddingLeft: 1, paddingRight: 1 }}
+        >
+          <text fg={tokens.text}>{item.label}</text>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>{item.arrow}</text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+function EditorGroupPane({
+  group,
+  props,
+}: {
+  group: EditorGroup;
+  props: EditorGridProps;
+}): React.ReactNode {
+  const tokens = props.theme ?? DARK;
+  const menuControl = useMenuControl();
+  const { setOverlay, clearOverlay } = useRootOverlay();
+  const menuId = `split:${group.id}`;
+  const menuOpen = menuControl.openMenuId === menuId;
+  const splitRef = useRef<BoxRenderable | null>(null);
+  const anchor = useFrameMeasure(
+    () => ({
+      x: splitRef.current?.x ?? 0,
+      y: splitRef.current?.y ?? 0,
+      width: splitRef.current?.width ?? 0,
+    }),
+    (left, right) => left.x === right.x && left.y === right.y && left.width === right.width,
+    { x: 0, y: 0, width: 0 },
+    menuOpen,
+  );
+  const active = group.tabs.find((tab) => tab.id === group.activeTabId) ?? group.tabs[0];
+  const isFile = active?.kind === "file";
+
+  useKeyboard((key) => {
+    if (!menuOpen) return;
+    if (key.name === "escape") return menuControl.closeMenu();
+    const direction = splitDirectionForKey(key.name);
+    if (direction) {
+      props.onSplit(group.id, direction);
+      menuControl.closeMenu();
+    }
+  });
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    setOverlay(
+      "split-menu",
+      <box
+        onMouseUp={menuControl.closeMenu}
+        style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }}
+      >
+        <box
+          style={{
+            position: "absolute",
+            top: anchor.y + 1,
+            left: Math.max(0, anchor.x + anchor.width - MENU_WIDTH),
+          }}
+        >
+          <SplitMenu
+            onPick={(direction) => {
+              props.onSplit(group.id, direction);
+              menuControl.closeMenu();
+            }}
+            tokens={tokens}
+          />
+        </box>
+      </box>,
+    );
+
+    return () => clearOverlay("split-menu");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuOpen, anchor, tokens]);
+  // The strip windows its tabs rather than scrolling a nested scrollbox (which stalls the
+  // renderer inside this header): tabs keep the width of their names, only the run that fits
+  // renders, and the window follows the active tab so a tab opened past the edge is never hidden.
+  const stripRef = useRef<BoxRenderable | null>(null);
+  const stripWidth = useFrameMeasure(
+    () => stripRef.current?.width ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+  const [firstVisible, setFirstVisible] = useState(0);
+  // a zoom re-anchors the strip to the leftmost tab, so the new width fills from the left
+  // and the step markers disappear when every tab now fits
+  const [wasZoomed, setWasZoomed] = useState(props.zoomed);
+
+  if (wasZoomed !== props.zoomed) {
+    setWasZoomed(props.zoomed);
+    setFirstVisible(0);
+  }
+  const activeIndex = Math.max(
+    0,
+    group.tabs.findIndex((tab) => tab.id === active?.id),
+  );
+  // derived every render: the manual offset is a floor the active tab can pull the window past
+  const tabWindow = visibleTabWindow(group.tabs, firstVisible, activeIndex, stripWidth, (tab) =>
+    tab.path ? (props.commentCounts?.get(tab.path) ?? 0) : 0,
+  );
+
+  return (
+    <box
+      onMouseDown={() => props.onFocusGroup(group.id)}
+      style={{ flexDirection: "column", flexGrow: 1, flexBasis: 0, minWidth: 0, minHeight: 0 }}
+    >
+      <box
+        customBorderChars={HEADER_UNDERLINE_CHARS}
+        style={{
+          flexDirection: "row",
+          // pin the controls to the right edge so their column never shifts with the container
+          // width parity; a lone flexGrow tab strip would drag them a cell on zoom
+          justifyContent: "space-between",
+          height: 2,
+          // match the pane headers: the panel token is transparent in the branded theme, so the
+          // header reads as terminal-through rather than a raised box
+          backgroundColor: tokens.panel,
+          borderStyle: "single",
+          border: ["bottom"],
+          borderColor: tokens.border,
+        }}
+      >
+        {/* the tab strip windows its tabs: the run that fits renders in full, edge markers step
+            the window, and the controls stay pinned on the right */}
+        <box
+          ref={stripRef}
+          style={{ flexDirection: "row", flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 0 }}
+        >
+          {tabWindow.first > 0 ? (
+            <box
+              onMouseUp={(event) => {
+                event.stopPropagation();
+                setFirstVisible(tabWindow.first - 1);
+              }}
+              style={{ flexShrink: 0 }}
+            >
+              <text fg={tokens.textDim} selectable={false}>
+                {"‹"}
+              </text>
+            </box>
+          ) : null}
+          {group.tabs.slice(tabWindow.first, tabWindow.end).map((tab) => (
+            <EditorTabButton
+              key={tab.id}
+              tab={tab}
+              active={tab.id === active?.id}
+              commentCount={tab.path ? (props.commentCounts?.get(tab.path) ?? 0) : 0}
+              onSelect={() => props.onActivateTab(group.id, tab.id)}
+              onClose={() => props.onCloseTab(group.id, tab.id)}
+              tokens={tokens}
+            />
+          ))}
+          {tabWindow.end < group.tabs.length ? (
+            <box
+              onMouseUp={(event) => {
+                event.stopPropagation();
+                setFirstVisible(tabWindow.first + 1);
+              }}
+              style={{ flexShrink: 0 }}
+            >
+              <text fg={tokens.textDim} selectable={false}>
+                {"›"}
+              </text>
+            </box>
+          ) : null}
+        </box>
+        <box style={{ flexDirection: "row", flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
+          {/* search sits out until it does something; split takes its place */}
+          {isFile ? (
+            <box ref={splitRef} style={{ flexShrink: 0, marginRight: 2 }}>
+              <IconButton
+                glyph="split"
+                active={menuOpen}
+                onPress={() => menuControl.toggleMenu(menuId)}
+                theme={tokens}
+              />
+            </box>
+          ) : null}
+          <IconButton
+            glyph={NERD.zoom}
+            active={props.zoomed}
+            onPress={props.onZoom}
+            tip={props.zoomed ? "Zoom Out" : "Zoom In"}
+            theme={tokens}
+          />
+        </box>
+      </box>
+      <box style={{ flexGrow: 1, flexDirection: "column" }}>
+        {active ? props.renderTab(active, props.focusedGroupId === group.id) : null}
+      </box>
+    </box>
+  );
+}
+
+function GridNode({ node, props }: { node: EditorNode; props: EditorGridProps }): React.ReactNode {
+  if (node.type === "group") {
+    return <EditorGroupPane group={node} props={props} />;
+  }
+  const tokens = props.theme ?? DARK;
+  const horizontal = node.orientation === "horizontal";
+  return (
+    <box
+      style={{
+        flexDirection: horizontal ? "row" : "column",
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: 0,
+        minHeight: 0,
+      }}
+    >
+      {node.children.map((child, index) => (
+        <React.Fragment key={child.id}>
+          {index > 0 ? (
+            <box
+              style={{
+                borderStyle: "single",
+                border: [horizontal ? "left" : "top"],
+                borderColor: tokens.border,
+              }}
+            />
+          ) : null}
+          <box
+            style={{
+              flexDirection: "column",
+              flexGrow: 1,
+              flexBasis: 0,
+              minWidth: 0,
+              minHeight: 0,
+            }}
+          >
+            <GridNode node={child} props={props} />
+          </box>
+        </React.Fragment>
+      ))}
+    </box>
+  );
+}
+
+/** The Changes pane body: the editor grid of groups and splits, each rendering its active tab. */
+export function EditorGrid(props: EditorGridProps): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1, minWidth: 0, minHeight: 0 }}>
+      <GridNode node={props.tree} props={props} />
+    </box>
+  );
+}

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

@@ -0,0 +1,68 @@
+/**
+ * Regression: the header controls (search, zoom, split) stay pinned to the right
+ * edge whatever the container width parity. A lone flexGrow tab strip used to
+ * underfill by a cell at even widths, dragging the zoom icon a column left when
+ * zoom widened the pane; space-between pins the controls so the column is stable.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { EditorGrid } from "./EditorGrid";
+import { changesTab, fileTab, makeGroup } from "./editor-grid";
+import { allowEventLoopUpdates } from "../test-support";
+
+const grid = makeGroup([changesTab(), fileTab("App.tsx", "src/App.tsx", "diff")]);
+
+async function zoomIconInsetFromRight(width: number, zoomed: boolean): Promise<number> {
+  const setup = await testRender(
+    <EditorGrid
+      tree={grid}
+      focusedGroupId={grid.id}
+      onFocusGroup={() => {}}
+      onActivateTab={() => {}}
+      onCloseTab={() => {}}
+      onSplit={() => {}}
+      onZoom={() => {}}
+      zoomed={zoomed}
+      renderTab={() => <text>body</text>}
+    />,
+    { width, height: 6 },
+  );
+
+  allowEventLoopUpdates();
+  await setup.waitForVisualIdle();
+  const line = setup
+    .captureCharFrame()
+    .split("\n")
+    .find((row) => row.includes("⛶"));
+  const inset = line ? width - line.indexOf("⛶") : -1;
+
+  setup.renderer.destroy();
+
+  return inset;
+}
+
+describe("zoom icon position", () => {
+  test("stays a fixed inset from the right edge across width parities", async () => {
+    // Act - even and odd widths flip the flexGrow rounding the old layout was sensitive to
+    const insets = await Promise.all([
+      zoomIconInsetFromRight(100, false),
+      zoomIconInsetFromRight(101, false),
+      zoomIconInsetFromRight(102, false),
+    ]);
+
+    // Assert - one inset for all widths: the icon is pinned right, not drifting with parity
+    expect(new Set(insets).size).toBe(1);
+    expect(insets[0]).toBeGreaterThan(0);
+  });
+
+  test("does not shift when zoom becomes active", async () => {
+    // Act
+    const inactive = await zoomIconInsetFromRight(100, false);
+    const active = await zoomIconInsetFromRight(100, true);
+
+    // Assert - active only recolours the glyph; it must not move
+    expect(active).toBe(inactive);
+  });
+});

package/src/components/FileContentsView.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { FileContentsView } from "./FileContentsView";
+
+export const meta: StoryMeta = { title: "Surfaces/FileContentsView" };
+
+const SAMPLE = `export function add(a: number, b: number): number {\n  return a + b;\n}\n`;
+
+export const Loaded: Story = {
+  render: () => (
+    <FileContentsView path="src/add.ts" loadContents={() => Promise.resolve(SAMPLE)} theme={DARK} />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 60, height: 12 },
+};

package/src/components/FileContentsView.test.tsx

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { FileContentsView } from "./FileContentsView";
+import { waitForText } from "../test-support";
+import { DARK } from "../theme";
+
+test("renders the loaded file contents", async () => {
+  const setup = await testRender(
+    <FileContentsView
+      path="src/add.ts"
+      loadContents={() => Promise.resolve("const answer = 42;\n")}
+      theme={DARK}
+    />,
+    { width: 60, height: 10 },
+  );
+
+  await waitForText(setup, "const answer = 42;");
+});
+
+test("shows a centered File deleted message when the file cannot be read", async () => {
+  const setup = await testRender(
+    <FileContentsView path="missing.ts" loadContents={() => Promise.resolve(null)} theme={DARK} />,
+    { width: 60, height: 10 },
+  );
+
+  await waitForText(setup, "File deleted");
+  expect(setup.captureCharFrame()).toContain("File deleted");
+});

package/src/components/FileContentsView.tsx

@@ -0,0 +1,98 @@
+// A Changes/Project file tab in contents mode: a workspace file rendered read-only with line
+// numbers, for surfaces with no thread to anchor notes to (the bare-launch welcome shell).
+// Loads on mount and whenever the path changes; a null read renders a centered "File deleted".
+// Syntax highlighting comes from the native code renderable (tree-sitter), the language
+// auto-detected from the path; unknown languages simply render unstyled.
+
+import { ScrollArea } from "./ScrollArea";
+import React, { useEffect, useRef, useState } from "react";
+import type { CodeRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { filetypeForPath, syntaxStyleFor } from "./syntax-highlight";
+
+export interface FileContentsViewProps {
+  path: string;
+  loadContents: (path: string) => Promise<string | null>;
+  theme?: Theme;
+}
+
+/** A finished read for a specific path; `lines` is null when the file could not be read. */
+interface FileLoad {
+  path: string;
+  lines: string[] | null;
+}
+
+export function FileContentsView({
+  path,
+  loadContents,
+  theme,
+}: FileContentsViewProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const [loaded, setLoaded] = useState<FileLoad | null>(null);
+  // The gutter mirrors the code renderable's line info, so it needs the mounted
+  // instance; a state-backed ref rebinds the target once the code renderable exists.
+  const [codeTarget, setCodeTarget] = useState<CodeRenderable | null>(null);
+  const loadRef = useRef(loadContents);
+  useEffect(() => {
+    loadRef.current = loadContents;
+  });
+
+  useEffect(() => {
+    let alive = true;
+    void loadRef.current(path).then(
+      (contents) => {
+        if (alive) setLoaded({ path, lines: contents === null ? null : contents.split("\n") });
+      },
+      () => {
+        if (alive) setLoaded({ path, lines: null });
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, [path]);
+
+  if (loaded === null || loaded.path !== path) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>loading...</text>
+      </box>
+    );
+  }
+  if (loaded.lines === null) {
+    // a file that no longer reads in the Changes/Project view is one the working tree deleted;
+    // the bottom pad lifts the text one row so it lines up with the footer-shortened thread empty state
+    return (
+      <box
+        style={{ flexGrow: 1, alignItems: "center", justifyContent: "center", paddingBottom: 2 }}
+      >
+        <text fg={tokens.textDim}>File deleted</text>
+      </box>
+    );
+  }
+  const content = loaded.lines.join("\n");
+
+  return (
+    <ScrollArea>
+      <line-number
+        target={codeTarget ?? undefined}
+        showLineNumbers
+        fg={tokens.textDim}
+        minWidth={5}
+        paddingRight={1}
+        style={{ paddingTop: 1, paddingLeft: 1 }}
+      >
+        <code
+          ref={setCodeTarget}
+          content={content}
+          filetype={filetypeForPath(path)}
+          syntaxStyle={syntaxStyleFor(tokens)}
+          selectable={false}
+          style={{ wrapMode: "none", fg: tokens.text }}
+        />
+      </line-number>
+    </ScrollArea>
+  );
+}

package/src/components/GridTabContent.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { GridTabContent, type DiffSurfaceProps } from "./GridTabContent";
+import { fixtureDiffRows, fixtureDiffSession } from "./story-fixtures";
+import { changesTab, fileTab } from "./editor-grid";
+
+export const meta: StoryMeta = { title: "Surfaces/GridTabContent" };
+
+const noop = (): void => {};
+
+function surface(): DiffSurfaceProps {
+  return {
+    session: fixtureDiffSession({ annotations: [] }),
+    quickActions: DEFAULT_QUICK_ACTIONS,
+    observer: false,
+    onAnnotate: noop,
+    onReply: noop,
+    onUpdateAnnotation: noop,
+    onExit: noop,
+  };
+}
+
+/** The whole-diff Changes tab: every changed file in one scroll container. */
+export const ChangesTab: Story = {
+  render: () => (
+    <GridTabContent
+      tab={changesTab()}
+      rows={fixtureDiffRows()}
+      surface={surface()}
+      rejectedRows={new Set()}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 80, height: 18 },
+};
+
+/** A single-file diff tab: that file's rows alone, indexed on their own. */
+export const FileDiffTab: Story = {
+  render: () => (
+    <GridTabContent
+      tab={fileTab("store.ts", "src/store.ts", "diff")}
+      rows={fixtureDiffRows()}
+      surface={surface()}
+      rejectedRows={new Set()}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 80, height: 18 },
+};