@cueloop/client 0.1.0-alpha.11 → 0.1.0-alpha.111

package/src/workbench/components/ChangesColumn.tsx

@@ -0,0 +1,210 @@
+// The right-hand Changes column: the diff's changed files as a directory tree.
+// A click on a file scrolls the diff to that file. Renders nothing when collapsed
+// so the diff reclaims the width. Mirrors the left Threads column on the far side.
+// Co-located here: the state hook that opens it by context and the header toggle.
+
+import { ScrollArea } from "../../ui/components/ScrollArea";
+import React, { useMemo, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { DiffFileContents, Thread } from "@cueloop/schema";
+import type { Theme } from "../../appearance/theme";
+import type { DiffRow } from "../../diff/view-diff";
+import { Tree } from "../../ui/components/primitives/Tree";
+import { allFolderIds, flattenTree } from "../../ui/components/primitives/tree-model";
+import { IconButton } from "../../ui/components/primitives/IconButton";
+import { NERD } from "../../ui/components/primitives/icons";
+import { buildFileTree } from "./file-tree";
+
+export interface DiffColumnsState {
+  changesOpen: boolean;
+  toggleChanges: () => void;
+  currentFilePath?: string;
+  scrollToFile: (path: string) => void;
+}
+
+/**
+ * Owns the right Changes column for a diff: context opens it when you enter a
+ * diff thread, and a file click scrolls the sheet to that file's first row.
+ * Resets on session change via the guarded render-time pattern, no effect.
+ */
+export function useDiffColumns(params: {
+  session: Thread | null;
+  rows: DiffRow[];
+  cursor: number;
+  setCursor: (index: number) => void;
+}): DiffColumnsState {
+  const { session, rows, cursor, setCursor } = params;
+  const contextDefault = session?.artifact.type === "diff";
+  const [changesOpen, setChangesOpen] = useState(contextDefault);
+  const [seenSessionId, setSeenSessionId] = useState(session?.id);
+
+  // entering another thread lets context decide again; within a thread the manual toggle stays
+  if (session?.id !== seenSessionId) {
+    setSeenSessionId(session?.id);
+    setChangesOpen(contextDefault);
+  }
+
+  return {
+    changesOpen,
+    toggleChanges: () => setChangesOpen((open) => !open),
+    currentFilePath: rows[cursor]?.file,
+    scrollToFile: (path: string) => {
+      const fileRowIndex = rows.findIndex((row) => row.kind === "file" && row.file === path);
+
+      if (fileRowIndex >= 0) setCursor(fileRowIndex);
+    },
+  };
+}
+
+/** The header toggle for the Changes column; shown only for a diff, where files exist to browse. */
+export function DiffChangesToggle({
+  isDiff,
+  open,
+  onToggle,
+  theme,
+}: {
+  isDiff: boolean;
+  open: boolean;
+  onToggle: () => void;
+  theme?: Theme;
+}): React.ReactNode {
+  if (!isDiff) return null;
+
+  return (
+    <IconButton
+      glyph={open ? NERD.sidebarRight : NERD.sidebarRightOff}
+      onPress={onToggle}
+      marginLeft={2}
+      theme={theme}
+    />
+  );
+}
+
+export interface ChangesColumnProps {
+  open: boolean;
+  files?: readonly DiffFileContents[];
+  selectedPath?: string;
+  onSelectFile: (path: string, persistent?: boolean) => void;
+  commentCounts?: ReadonlyMap<string, number>;
+  focused?: boolean;
+  width?: number;
+  theme?: Theme;
+}
+
+/**
+ * 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,
+  commentCounts,
+  focused = false,
+  theme,
+}: 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());
+  const [cursor, setCursor] = useState(0);
+  const expandedIds = useMemo(() => {
+    const expanded = allFolderIds(nodes);
+
+    for (const id of collapsedIds) expanded.delete(id);
+
+    return expanded;
+  }, [nodes, collapsedIds]);
+  const rows = useMemo(
+    () => flattenTree(nodes, { expandedIds, flattenEmptyDirectories: true }),
+    [nodes, expandedIds],
+  );
+  const cursorIndex = Math.min(cursor, Math.max(0, rows.length - 1));
+
+  const toggle = (id: string): void =>
+    setCollapsedIds((current) => {
+      const next = new Set(current);
+
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+
+      return next;
+    });
+
+  useKeyboard((key) => {
+    if (!focused || rows.length === 0) return;
+
+    if (key.name === "j" || key.name === "down")
+      return setCursor(Math.min(cursorIndex + 1, rows.length - 1));
+
+    if (key.name === "k" || key.name === "up") return setCursor(Math.max(cursorIndex - 1, 0));
+
+    const row = rows[cursorIndex];
+
+    if (!row) return;
+
+    if (key.name === "return" || key.name === "enter")
+      return row.isFolder ? toggle(row.id) : onSelectFile(row.id, true);
+
+    if (key.name === "l" && row.isFolder && collapsedIds.has(row.id)) return toggle(row.id);
+
+    if (key.name === "h" && row.isFolder && !collapsedIds.has(row.id)) return toggle(row.id);
+  });
+
+  return (
+    <ScrollArea
+      id="tree-scroll"
+      revealId={focused ? rows[cursorIndex]?.id : undefined}
+      gestureWheel
+    >
+      <Tree
+        nodes={nodes}
+        expandedIds={expandedIds}
+        selectedId={focused ? rows[cursorIndex]?.id : selectedPath}
+        singleLine
+        flattenEmptyDirectories
+        showStatus
+        onSelect={(id) => {
+          const index = rows.findIndex((row) => row.id === id);
+
+          if (index >= 0) setCursor(index);
+
+          onSelectFile(id);
+        }}
+        onDoubleSelect={(id) => onSelectFile(id, true)}
+        onToggle={toggle}
+        theme={theme}
+      />
+    </ScrollArea>
+  );
+}
+
+export function ChangesColumn({
+  open,
+  files = [],
+  selectedPath,
+  onSelectFile,
+  width = 32,
+  theme,
+}: ChangesColumnProps): React.ReactNode {
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        width,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: ["left"],
+        borderColor: theme?.border,
+      }}
+    >
+      <ChangesFileTree
+        files={files}
+        selectedPath={selectedPath}
+        onSelectFile={onSelectFile}
+        theme={theme}
+      />
+    </box>
+  );
+}

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

@@ -0,0 +1,184 @@
+/** The changed-files tree navigates by keyboard when focused: j/k move the cursor, Enter folds a folder
+ * or opens a file. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ScrollBoxRenderable, TextRenderable, type Renderable } from "@opentui/core";
+import type { DiffFileContents } from "@cueloop/schema";
+import { ChangesFileTree } from "./ChangesColumn";
+import { settle, waitForText } from "../../testing/test-support";
+import { DARK } from "../../appearance/theme";
+
+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;
+}
+
+const file = (path: string): DiffFileContents => ({
+  path,
+  oldContents: "",
+  newContents: "x",
+  status: "modified",
+});
+
+const files = [file("src/a.ts"), file("src/b.ts")];
+
+test("j moves onto a file and Enter opens it", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ChangesFileTree
+      files={files}
+      onSelectFile={(path) => opened.push(path)}
+      focused
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+
+  await settle(setup);
+  await waitForText(setup, "a.ts");
+
+  // folders open by default; cursor starts on the "src" folder, j steps onto a.ts
+  setup.mockInput.pressKey("j");
+  await settle(setup);
+  setup.mockInput.pressKey("RETURN");
+  await settle(setup);
+
+  expect(opened).toEqual(["src/a.ts"]);
+
+  setup.renderer.destroy();
+});
+
+test("Tab leaves the focused tree without opening a file", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ChangesFileTree
+      files={files}
+      onSelectFile={(path) => opened.push(path)}
+      focused
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+
+  await waitForText(setup, "a.ts");
+  setup.mockInput.pressKey("j");
+  setup.mockInput.pressKey("TAB");
+  await settle(setup);
+  expect(opened).toEqual([]);
+  setup.renderer.destroy();
+});
+
+test("keyboard navigation reveals the selected changed file", async () => {
+  const manyFiles = Array.from({ length: 35 }, (_, index) =>
+    file(`file-${String(index).padStart(2, "0")}.ts`),
+  );
+  const setup = await testRender(
+    <ChangesFileTree files={manyFiles} onSelectFile={() => {}} focused theme={DARK} />,
+    { width: 28, height: 8 },
+  );
+
+  await waitForText(setup, "file-00.ts");
+  const scrollbox = findById(setup.renderer.root, "tree-scroll");
+
+  if (!(scrollbox instanceof ScrollBoxRenderable)) throw new Error("tree scrollbox missing");
+
+  const scrollSteps: number[] = [];
+
+  for (const [index, key] of Array.from({ length: 15 }, () => "j").entries()) {
+    const before = scrollbox.scrollTop;
+
+    setup.mockInput.pressKey(key);
+    // eslint-disable-next-line no-await-in-loop
+    await settle(setup);
+    scrollSteps.push(scrollbox.scrollTop - before);
+    const row = scrollbox.content.findDescendantById(
+      `tree-row-file-${String(index + 1).padStart(2, "0")}.ts`,
+    );
+
+    expect(row?.y).toBeGreaterThanOrEqual(scrollbox.viewport.y);
+    expect(row?.y).toBeLessThan(scrollbox.viewport.y + scrollbox.viewport.height);
+  }
+
+  expect(scrollbox.scrollTop).toBeGreaterThan(0);
+  expect(Math.max(...scrollSteps)).toBe(1);
+  expect(setup.captureCharFrame()).toContain("file-15.ts");
+  setup.renderer.destroy();
+});
+
+test("without focus the keyboard opens nothing", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ChangesFileTree files={files} onSelectFile={(path) => opened.push(path)} theme={DARK} />,
+    { width: 40, height: 12 },
+  );
+
+  await settle(setup);
+  await waitForText(setup, "a.ts");
+
+  setup.mockInput.pressKey("j");
+  setup.mockInput.pressKey("RETURN");
+  await settle(setup);
+  expect(opened).toEqual([]);
+
+  setup.renderer.destroy();
+});
+
+test("a selected long filename has no empty continuation row", async () => {
+  for (const width of [33, 32, 31, 30, 29, 28, 27, 26, 25, 24]) {
+    const setup = await testRender(
+      <ChangesFileTree
+        files={[
+          file("packages/client/src/App.workbench.test.tsx"),
+          file("packages/client/src/next.ts"),
+        ]}
+        onSelectFile={() => {}}
+        focused
+        theme={DARK}
+      />,
+      { width, height: 12 },
+    );
+
+    await settle(setup);
+    setup.mockInput.pressKey("j");
+    await settle(setup);
+    const frame = setup.captureCharFrame().split("\n");
+    const selectedLine = frame.findIndex((line) => line.includes("App.wor"));
+    const row = findById(
+      setup.renderer.root,
+      "tree-row-packages/client/src/App.workbench.test.tsx",
+    );
+
+    expect(selectedLine).toBeGreaterThanOrEqual(0);
+    expect(frame[selectedLine + 1]).toContain("next.ts");
+    expect(row?.height).toBe(1);
+    setup.renderer.destroy();
+  }
+});
+
+test("horizontal name scrolling reveals the final extension beside the status", async () => {
+  const path = "src/sidebar-scroll.test.tsx";
+  const setup = await testRender(
+    <ChangesFileTree files={[file(path)]} onSelectFile={() => {}} focused theme={DARK} />,
+    { width: 24, height: 8 },
+  );
+
+  await waitForText(setup, "src");
+  const label = findById(setup.renderer.root, `tree-label-${path}`);
+
+  if (!(label instanceof TextRenderable)) throw new Error("file label missing");
+
+  expect(label.maxScrollX).toBeGreaterThan(0);
+  label.scrollX = label.maxScrollX;
+  await settle(setup);
+  expect(setup.captureCharFrame()).toContain(".tsx");
+  setup.renderer.destroy();
+});

package/src/workbench/components/EditorGrid.split.test.tsx

@@ -0,0 +1,119 @@
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import type { Renderable } from "@opentui/core";
+import { allowEventLoopUpdates } from "../../testing/test-support";
+import { EditorGrid } from "./EditorGrid";
+import { makeGroup, splitGroup, welcomeTab, type EditorNode } from "./editor-grid";
+import { WelcomePlayground } from "./WelcomePlayground";
+
+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 groupIds(node: EditorNode): string[] {
+  if (node.type === "group") return [node.id];
+
+  return node.children.flatMap(groupIds);
+}
+
+test("mixed splits keep each Welcome page inside its own tile", async () => {
+  const first = makeGroup([welcomeTab()]);
+  let tree: EditorNode = first;
+  let focusGroupId = first.id;
+
+  for (const direction of ["right", "up", "left", "down"] as const) {
+    const next = splitGroup(tree, focusGroupId, direction);
+
+    tree = next.tree;
+    focusGroupId = next.focusGroupId;
+  }
+
+  const setup = await testRender(
+    <EditorGrid
+      tree={tree}
+      focusedGroupId={focusGroupId}
+      onFocusGroup={() => {}}
+      onActivateTab={() => {}}
+      onCloseTab={() => {}}
+      onSplit={() => {}}
+      onZoom={() => {}}
+      zoomed={false}
+      renderTab={(_, focused) => <WelcomePlayground quickActions={[]} suspended={!focused} />}
+    />,
+    { width: 120, height: 48 },
+  );
+
+  allowEventLoopUpdates();
+  await setup.waitForVisualIdle();
+  expect(setup.renderer.listenerCount("frame")).toBeLessThan(10);
+  expect(setup.renderer.listenerCount("resize")).toBeLessThan(10);
+  expect(setup.renderer.keyInput.listenerCount("keypress")).toBeLessThan(10);
+
+  for (const id of groupIds(tree)) {
+    const group = findById(setup.renderer.root, `editor-group:${id}`);
+    const scroll = group && findById(group, "diff-scroll");
+
+    expect(group).toBeDefined();
+    expect(scroll).toBeDefined();
+    expect(scroll!.y).toBeGreaterThanOrEqual(group!.y + 2);
+    expect(scroll!.y + scroll!.height).toBeLessThanOrEqual(group!.y + group!.height);
+  }
+
+  setup.renderer.destroy();
+});
+
+test("Split is disabled at eight tiles and when a tile is too small", async () => {
+  const first = makeGroup([welcomeTab()]);
+  let tree: EditorNode = first;
+  let focusGroupId = first.id;
+
+  for (const direction of ["right", "up", "left", "down", "right", "up", "left"] as const) {
+    const next = splitGroup(tree, focusGroupId, direction);
+
+    tree = next.tree;
+    focusGroupId = next.focusGroupId;
+  }
+
+  for (const [candidate, width, height] of [
+    [tree, 240, 100],
+    [first, 40, 12],
+  ] as const) {
+    let splitCalls = 0;
+    const setup = await testRender(
+      <EditorGrid
+        tree={candidate}
+        focusedGroupId={first.id}
+        onFocusGroup={() => {}}
+        onActivateTab={() => {}}
+        onCloseTab={() => {}}
+        onSplit={() => {
+          splitCalls += 1;
+        }}
+        onZoom={() => {}}
+        zoomed={false}
+        renderTab={() => <text>body</text>}
+      />,
+      { width, height },
+    );
+
+    allowEventLoopUpdates();
+    await setup.waitForVisualIdle();
+    const button = findById(setup.renderer.root, `split-button:${first.id}`);
+
+    expect(button).toBeDefined();
+    await setup.mockMouse.click(button!.x, button!.y);
+    await setup.renderOnce();
+    expect(setup.captureCharFrame()).not.toContain("right →");
+    expect(splitCalls).toBe(0);
+    setup.renderer.destroy();
+  }
+});

package/src/workbench/components/EditorGrid.stories.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { EditorGrid } from "./EditorGrid";
+import { changesTab, fileTab, makeGroup, splitGroup, type EditorTab } from "./editor-grid";
+
+export const meta: StoryMeta = { title: "Surfaces/EditorGrid" };
+
+const noop = (): void => {};
+
+function renderTab(tab: EditorTab): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textMuted}>{tab.kind === "changes" ? "the whole diff" : tab.path}</text>
+    </box>
+  );
+}
+
+const oneGroup = makeGroup([changesTab(), fileTab("App.tsx", "src/App.tsx", "diff")]);
+const sourceGroup = makeGroup([fileTab("plugin.json", ".claude-plugin/plugin.json", "contents")]);
+const splitTree = splitGroup(sourceGroup, sourceGroup.id, "right").tree;
+
+export const OneGroup: Story = {
+  render: () => (
+    <EditorGrid
+      tree={oneGroup}
+      focusedGroupId={oneGroup.id}
+      onFocusGroup={noop}
+      onActivateTab={noop}
+      onCloseTab={noop}
+      onSplit={noop}
+      onZoom={noop}
+      zoomed={false}
+      renderTab={renderTab}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textMuted, DARK.border],
+  size: { width: 80, height: 16 },
+};
+
+export const SplitGroups: Story = {
+  render: () => (
+    <EditorGrid
+      tree={splitTree}
+      focusedGroupId={null}
+      onFocusGroup={noop}
+      onActivateTab={noop}
+      onCloseTab={noop}
+      onSplit={noop}
+      onZoom={noop}
+      zoomed={false}
+      renderTab={renderTab}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textMuted, DARK.border],
+  size: { width: 100, height: 16 },
+};
+
+/** The rightmost group takes the remainder after whole-cell leading groups and divider cells. */
+export const WholeCellSizing: Story = {
+  render: () => (
+    <box style={{ flexDirection: "column", width: 100, height: 16 }}>
+      <text fg={DARK.text}>Whole-cell split sizing</text>
+      <text fg={DARK.textMuted}>100 cells = 49 left + 1 divider + 50 right</text>
+      <text fg={DARK.textDim}>Fix the leading width; let the last group take the remainder.</text>
+      <box style={{ flexGrow: 1, minHeight: 0 }}>
+        <EditorGrid
+          tree={splitTree}
+          focusedGroupId={null}
+          onFocusGroup={noop}
+          onActivateTab={noop}
+          onCloseTab={noop}
+          onSplit={noop}
+          onZoom={noop}
+          zoomed={false}
+          renderTab={renderTab}
+          theme={DARK}
+        />
+      </box>
+    </box>
+  ),
+  expectedColors: [DARK.textMuted, DARK.border],
+  size: { width: 100, height: 16 },
+};