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

package/src/components/EditorGrid.tsx

@@ -0,0 +1,338 @@
+// 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, { useRef, useState } from "react";
+import type { BoxRenderable } from "@opentui/core";
+import { DARK, type Theme } from "../theme";
+import { useFrameMeasure } from "../use-frame-measure";
+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: "Split Left", direction: "left", arrow: "←" },
+  { label: "Split Right", direction: "right", arrow: "→" },
+  { label: "Split Up", direction: "up", arrow: "↑" },
+  { label: "Split Down", direction: "down", arrow: "↓" },
+];
+
+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: its padding, the label, the close cell and its padding, the right rule. */
+function tabCellWidth(tab: EditorTab): number {
+  return tab.label.length + 5;
+}
+
+/** 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,
+): TabWindow {
+  // unmeasured strip: show everything, the header clips until the width is known
+  if (stripWidth <= 0) return { first: 0, end: tabs.length };
+  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 + tabCellWidth(tabs[end]!) + remaining > stripWidth) break;
+      used += tabCellWidth(tabs[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
+      style={{
+        flexDirection: "column",
+        flexShrink: 0,
+        borderStyle: "single",
+        borderColor: tokens.border,
+        // the panel token is transparent in the branded theme, so the menu reads terminal-through
+        backgroundColor: tokens.panel,
+      }}
+    >
+      {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 [menuOpen, setMenuOpen] = useState(false);
+  const active = group.tabs.find((tab) => tab.id === group.activeTabId) ?? group.tabs[0];
+  const isFile = active?.kind === "file";
+  // 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);
+  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);
+
+  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={() => setFirstVisible(tabWindow.first - 1)} style={{ flexShrink: 0 }}>
+              <text fg={tokens.textDim}>{"‹"}</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={() => setFirstVisible(tabWindow.first + 1)} style={{ flexShrink: 0 }}>
+              <text fg={tokens.textDim}>{"›"}</text>
+            </box>
+          ) : null}
+        </box>
+        <box style={{ flexDirection: "row", flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
+          <IconButton glyph="search" onPress={() => {}} marginRight={2} theme={tokens} />
+          <IconButton
+            glyph={NERD.zoom}
+            active={props.zoomed}
+            onPress={props.onZoom}
+            tip={props.zoomed ? "Zoom Out" : "Zoom In"}
+            marginRight={isFile ? 2 : 0}
+            theme={tokens}
+          />
+          {isFile ? (
+            <IconButton
+              glyph="split"
+              active={menuOpen}
+              onPress={() => setMenuOpen((open) => !open)}
+              theme={tokens}
+            />
+          ) : null}
+        </box>
+      </box>
+      {menuOpen ? (
+        <SplitMenu
+          onPick={(direction) => {
+            setMenuOpen(false);
+            props.onSplit(group.id, direction);
+          }}
+          tokens={tokens}
+        />
+      ) : null}
+      <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 not-found hint 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, "could not read missing.ts");
+  expect(setup.captureCharFrame()).toContain("could not read missing.ts");
+});

package/src/components/FileContentsView.tsx

@@ -0,0 +1,78 @@
+// A Changes file tab in contents mode: a workspace file rendered read-only with line numbers.
+// Loads on mount and whenever the path changes; a null read shows a "could not read" hint.
+
+import React, { useEffect, useRef, useState } from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+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);
+  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) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>{`could not read ${path}`}</text>
+      </box>
+    );
+  }
+  const lines = loaded.lines;
+
+  return (
+    <scrollbox style={{ flexGrow: 1 }} focused={false}>
+      <box style={{ flexDirection: "column", paddingTop: 1 }}>
+        {lines.map((line, index) => (
+          <box key={index} style={{ flexDirection: "row", paddingLeft: 1 }}>
+            <box style={{ width: 5 }}>
+              <text fg={tokens.textDim}>{String(index + 1).padStart(4)}</text>
+            </box>
+            <text fg={tokens.text}>{line.length > 0 ? line : " "}</text>
+          </box>
+        ))}
+      </box>
+    </scrollbox>
+  );
+}