@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.91

package/src/components/AppHeader.tsx

@@ -0,0 +1,83 @@
+// The one workbench header, split into column-aligned segments so it reads the
+// same for every primitive: gear + left toggle over the Threads sidebar, the
+// current thread's title (mirroring the sidebar selection) plus the owner's
+// Edit/Share over the thread column, and a Changes label + right toggle over the
+// right column. Collapsing a column keeps its toggle reachable at the edge.
+
+import React from "react";
+import type { Theme } from "../theme";
+import { IconButton } from "./primitives/IconButton";
+import { NERD } from "./primitives/icons";
+
+export interface AppHeaderProps {
+  onOpenMenu: () => void;
+  sidebarOpen: boolean;
+  sidebarWidth?: number;
+  onToggleSidebar: () => void;
+  /** The center segment title; mirrors the selected sidebar thread, blank when none. */
+  title: string;
+  /** Owner actions rendered at the right edge of the thread segment (Edit/Share). */
+  editShare?: React.ReactNode;
+  changesOpen: boolean;
+  changesWidth?: number;
+  onToggleChanges: () => void;
+  theme?: Theme;
+}
+
+export function AppHeader({
+  onOpenMenu,
+  sidebarOpen,
+  sidebarWidth = 30,
+  onToggleSidebar,
+  title,
+  editShare,
+  changesOpen,
+  changesWidth = 32,
+  onToggleChanges,
+  theme,
+}: AppHeaderProps): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", height: 2, paddingTop: 1, backgroundColor: theme?.panel }}>
+      {/* over the Threads sidebar: settings gear + the left toggle, product mark */}
+      <box
+        style={{
+          flexDirection: "row",
+          width: sidebarOpen ? sidebarWidth : undefined,
+        }}
+      >
+        <box onMouseUp={onOpenMenu} style={{ paddingRight: 2 }}>
+          <text fg={theme?.textMuted}>{NERD.settings}</text>
+        </box>
+        <IconButton
+          glyph={sidebarOpen ? NERD.sidebarLeft : NERD.sidebarLeftOff}
+          onPress={onToggleSidebar}
+          marginRight={2}
+          theme={theme}
+        />
+        <text fg={theme?.accent}>cueloop</text>
+      </box>
+      {/* over the thread column: the title, then the owner's Edit/Share at its right edge */}
+      <box style={{ flexDirection: "row", flexGrow: 1, paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={theme?.textDim}>{title}</text>
+        <box style={{ flexGrow: 1 }} />
+        {editShare}
+      </box>
+      {/* over the right column: the Changes label when open, the right toggle always at the edge */}
+      <box
+        style={{
+          flexDirection: "row",
+          paddingRight: 1,
+          width: changesOpen ? changesWidth : undefined,
+        }}
+      >
+        {changesOpen ? <text fg={theme?.textDim}>Changes</text> : null}
+        <box style={{ flexGrow: 1 }} />
+        <IconButton
+          glyph={changesOpen ? NERD.sidebarRight : NERD.sidebarRightOff}
+          onPress={onToggleChanges}
+          theme={theme}
+        />
+      </box>
+    </box>
+  );
+}

package/src/components/AppShell.brand.test.tsx

@@ -0,0 +1,58 @@
+/**
+ * The collapsed-sidebar brand row keeps the gear, the Threads toggle, and the
+ * "cueloop" mark on one line. A long thread title used to shrink the brand box
+ * until "cueloop" and the toggle wrapped onto the header's underline row; the
+ * title truncates instead, so the brand never shrinks.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { AppShell } from "./AppShell";
+import { NERD } from "./primitives/icons";
+import { settle } from "../test-support";
+
+const LONG_TITLE = "working tree @ GRO-1981-fe-billing-promo-cookie-migration";
+
+async function brandFrame(): Promise<string[]> {
+  const setup = await testRender(
+    <AppShell
+      sidebarOpen={false}
+      onToggleSidebar={() => {}}
+      onOpenMenu={() => {}}
+      threadsPanel={<text>threads</text>}
+      threadTitle={LONG_TITLE}
+      threadPanel={<text>Select a thread</text>}
+      changesOpen
+      projectOpen
+      onToggleChanges={() => {}}
+      onToggleProject={() => {}}
+      onToggleRight={() => {}}
+      projectMode="changes"
+      projectPanel={<text>project</text>}
+      changesPanel={<text>diff</text>}
+    />,
+    { width: 160, height: 12 },
+  );
+
+  await settle(setup);
+  await settle(setup);
+  const lines = setup.captureCharFrame().split("\n");
+
+  setup.renderer.destroy();
+
+  return lines;
+}
+
+describe("collapsed-sidebar brand row", () => {
+  test("the Threads toggle stays on the cueloop row and the title tails off in an ellipsis", async () => {
+    const lines = await brandFrame();
+    const brandRow = lines.findIndex((line) => line.includes("cueloop"));
+    const toggleRow = lines.findIndex((line) => line.includes(NERD.sidebarLeftOff));
+
+    expect(brandRow).toBeGreaterThanOrEqual(0);
+    expect(toggleRow).toBe(brandRow);
+    expect(lines[brandRow]).toContain("…");
+    expect(lines[brandRow]).not.toContain(LONG_TITLE);
+  });
+});

package/src/components/AppShell.extensions.test.tsx

@@ -0,0 +1,191 @@
+import { describe, expect, test } from "bun:test";
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import {
+  ClientExtensionRegistry,
+  loadInstalledClientExtensions,
+} from "../client-extension-registry";
+import { settle } from "../test-support";
+import { AppShell } from "./AppShell";
+
+function shell(
+  registry?: ClientExtensionRegistry,
+  onExtensionError?: (message: string) => void,
+): React.ReactNode {
+  return (
+    <AppShell
+      sidebarOpen
+      onToggleSidebar={() => {}}
+      onOpenMenu={() => {}}
+      threadsPanel={<text>threads list</text>}
+      threadTitle="Thread"
+      threadPanel={<text>thread body</text>}
+      changesOpen={false}
+      projectOpen
+      onToggleChanges={() => {}}
+      onToggleProject={() => {}}
+      onToggleRight={() => {}}
+      projectMode="tree"
+      focusedPane="project"
+      projectPanel={<text>project files</text>}
+      extensionRegistry={registry}
+      extensionContext={{ workspace: "/repo", threadId: "thread-1" }}
+      onExtensionError={onExtensionError}
+    />
+  );
+}
+
+describe("app shell extension zones", () => {
+  test("an empty registry preserves the built-in shell frame", async () => {
+    const plain = await testRender(shell(), { width: 100, height: 16 });
+    const extended = await testRender(shell(new ClientExtensionRegistry()), {
+      width: 100,
+      height: 16,
+    });
+
+    await settle(plain);
+    await settle(extended);
+    expect(extended.captureCharFrame()).toBe(plain.captureCharFrame());
+    plain.renderer.destroy();
+    extended.renderer.destroy();
+  });
+
+  test("renders a sidebar section and workspace tab without replacing built-in content", async () => {
+    const registry = new ClientExtensionRegistry();
+
+    await registry.load("example", (api) => {
+      api.registerSection({
+        id: "summary",
+        zone: "threads.sidebar",
+        title: "Summary",
+        Component: () => <text>extension summary</text>,
+      });
+      api.registerView({
+        id: "details",
+        zone: "workspace.panels",
+        title: "Details",
+        Component: () => <text>extension details</text>,
+      });
+    });
+    const setup = await testRender(shell(registry), { width: 100, height: 16 });
+
+    await settle(setup);
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("extension summary");
+    expect(frame).toContain("Details");
+    expect(frame).toContain("project files");
+    setup.mockInput.pressKey("]");
+    await settle(setup);
+    expect(setup.captureCharFrame()).toContain("extension details");
+    expect(setup.captureCharFrame()).not.toContain("project files");
+    setup.mockInput.pressKey("[");
+    await settle(setup);
+    expect(setup.captureCharFrame()).toContain("project files");
+    setup.renderer.destroy();
+  });
+
+  test("an installed client entry can use the host React hooks", async () => {
+    const root = mkdtempSync(join(tmpdir(), "cueloop-client-extension-test-"));
+    const packageRoot = join(root, "node_modules", "example-client");
+
+    try {
+      mkdirSync(packageRoot, { recursive: true });
+      writeFileSync(
+        join(root, "package.json"),
+        JSON.stringify({ dependencies: { "example-client": "1.0.0" } }),
+      );
+      writeFileSync(
+        join(packageRoot, "package.json"),
+        JSON.stringify({ cueloop: { client: "./client.js" } }),
+      );
+      writeFileSync(
+        join(packageRoot, "client.js"),
+        `export default (api) => {
+        const React = api.react;
+        api.registerSection({ id: "hook", zone: "threads.sidebar", title: "Host hook",
+          Component: () => { const [count] = React.useState(1); return React.createElement("text", null, String(count)); }
+        });
+      };`,
+      );
+      const registry = new ClientExtensionRegistry();
+
+      await loadInstalledClientExtensions(registry, root);
+      const setup = await testRender(shell(registry), { width: 100, height: 16 });
+
+      await settle(setup);
+      expect(registry.errors).toEqual([]);
+      expect(setup.captureCharFrame()).toContain("Host hook");
+      expect(setup.captureCharFrame()).toContain("1");
+      setup.renderer.destroy();
+    } finally {
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+
+  test("reports a failed client entry through the host error callback", async () => {
+    const registry = new ClientExtensionRegistry();
+    const errors: string[] = [];
+    const setup = await testRender(
+      shell(registry, (message) => errors.push(message)),
+      { width: 100, height: 16 },
+    );
+
+    registry.reportError("Client extension example: failed to load");
+    await settle(setup);
+    expect(errors).toEqual(["Client extension example: failed to load"]);
+    setup.renderer.destroy();
+  });
+
+  test("reports failed visibility callbacks for each UI zone", async () => {
+    const registry = new ClientExtensionRegistry();
+    const errors: string[] = [];
+    const when = () => {
+      throw new Error("visibility broke");
+    };
+
+    await registry.load("broken", (api) => {
+      api.registerSection({
+        id: "section",
+        zone: "threads.sidebar",
+        title: "Hidden section",
+        Component: () => <text>section body</text>,
+        when,
+      });
+      api.registerAction({
+        id: "action",
+        zone: "thread.header",
+        label: "Hidden action",
+        onPress() {},
+        when,
+      });
+      api.registerView({
+        id: "view",
+        zone: "workspace.panels",
+        title: "Hidden view",
+        Component: () => <text>view body</text>,
+        when,
+      });
+    });
+    const setup = await testRender(
+      shell(registry, (message) => errors.push(message)),
+      {
+        width: 100,
+        height: 16,
+      },
+    );
+
+    await settle(setup);
+    expect(errors).toEqual([
+      "Extension broken:section visibility failed: Error: visibility broke",
+      "Extension broken:action visibility failed: Error: visibility broke",
+      "Extension broken:view visibility failed: Error: visibility broke",
+    ]);
+    expect(setup.captureCharFrame()).not.toContain("Hidden section");
+    expect(setup.captureCharFrame()).not.toContain("Hidden view");
+    setup.renderer.destroy();
+  });
+});

package/src/components/AppShell.stories.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AppShell } from "./AppShell";
+
+export const meta: StoryMeta = { title: "Layout/AppShell" };
+
+function Threads(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textDim}>Pinned</text>
+      <text fg={DARK.accent}> Read Cueloop Repository</text>
+      <text> </text>
+      <text fg={DARK.textDim}>Threads</text>
+      <text fg={DARK.textMuted}> A standalone thought</text>
+    </box>
+  );
+}
+
+function Thread(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>the conversation renders here</text>
+    </box>
+  );
+}
+
+function Changes(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textMuted}>the editor grid renders here</text>
+    </box>
+  );
+}
+
+function Project(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textDim}>No changes</text>
+    </box>
+  );
+}
+
+const noop = (): void => {};
+
+export const FourPane: Story = {
+  render: () => (
+    <AppShell
+      sidebarOpen
+      onToggleSidebar={noop}
+      onOpenMenu={noop}
+      threadsPanel={<Threads />}
+      threadTitle="Read Cueloop Repository"
+      threadPanel={<Thread />}
+      changesOpen
+      projectOpen
+      onToggleChanges={noop}
+      onToggleProject={noop}
+      onToggleRight={noop}
+      projectMode="changes"
+      changesPanel={<Changes />}
+      projectPanel={<Project />}
+    />
+  ),
+  expectedColors: [DARK.border, DARK.accent],
+  size: { width: 130, height: 28 },
+};
+
+export const CollapsedRightRail: Story = {
+  render: () => (
+    <AppShell
+      sidebarOpen
+      onToggleSidebar={noop}
+      onOpenMenu={noop}
+      threadsPanel={<Threads />}
+      threadTitle="Read Cueloop Repository"
+      threadPanel={<Thread />}
+      changesOpen={false}
+      projectOpen={false}
+      onToggleChanges={noop}
+      onToggleProject={noop}
+      onToggleRight={noop}
+      projectMode="tree"
+      projectPanel={<Project />}
+    />
+  ),
+  expectedColors: [DARK.border],
+  size: { width: 100, height: 22 },
+};