@cueloop/client 0.1.0-alpha.10 → 0.1.0-alpha.100

package/src/app/app-view-model.ts

@@ -0,0 +1,168 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { Thread, MessageOutcome } from "@cueloop/schema";
+import type { Mode } from "./intent-dispatch";
+import type { Intent, KeyState } from "../keyboard/keymap";
+import type { Completion } from "../thread/thread-controller";
+import type { WalkFile } from "../diff/walk";
+import type { QuickAction } from "../settings/config";
+import { viewedCount } from "../diff/walk";
+import type { ConfirmCardProps } from "../ui/components/ConfirmCard";
+import type { BreadcrumbItem } from "./components/Breadcrumb";
+
+export function computeRoleCapabilities(
+  readOnly: boolean,
+  role: "owner" | "observer" | "collaborator",
+) {
+  const observer = readOnly || role === "observer";
+
+  return { observer, isOwner: !observer && role === "owner" };
+}
+
+export function deriveReviewFlags(session: Thread | null) {
+  return {
+    isDiff: session?.artifact.type === "diff",
+    isPrototype: session?.artifact.type === "prototype",
+    resolved: session?.status === "resolved",
+  };
+}
+
+export function isWalking(isDiff: boolean, walk: { index: number } | null): boolean {
+  return isDiff && walk !== null;
+}
+
+/**
+ * A prototype renders as a kitty pixel mockup only in the opt-in experimental mode:
+ * the flag is on and the artifact carries an HTML entry. Otherwise it is the default
+ * markdown design doc, rendered through the thread/markdown path.
+ */
+export function isPixelPrototypeMode(
+  isPrototype: boolean,
+  prototypePixels: boolean,
+  prototypePath: string | undefined,
+): boolean {
+  return isPrototype && prototypePixels && Boolean(prototypePath);
+}
+
+export function resolveOverlay(
+  mode: Mode,
+  completionPhase: Completion["phase"],
+  walking: boolean,
+): KeyState["overlay"] {
+  if (mode.type === "compose" || mode.type === "railEdit") return "compose";
+  if (mode.type === "submit") return "submit";
+  if (mode.type === "confirmDelete") return "confirm";
+  if (
+    mode.type === "rename" ||
+    mode.type === "renameThread" ||
+    mode.type === "nameSelf" ||
+    mode.type === "treePrompt"
+  )
+    return "prompt";
+  if (mode.type === "spanActions") return "spanActions";
+  if (completionPhase === "prompt") return "completion-prompt";
+  if (completionPhase === "counting") return "completion-counting";
+  if (walking) return "walk";
+
+  return "none";
+}
+
+export function isCompletionOverlayPhase(
+  completion: Completion,
+): completion is { phase: "prompt" } | { phase: "counting"; remaining: number } {
+  return completion.phase === "prompt" || completion.phase === "counting";
+}
+
+export function buildHeaderItems(params: {
+  session: Thread;
+  resolved: boolean;
+  observer: boolean;
+  role: "owner" | "observer" | "collaborator";
+}): BreadcrumbItem[] {
+  const { session, resolved, observer, role } = params;
+
+  return [
+    { label: "cueloop", tone: "accent" },
+    ...(resolved
+      ? [
+          {
+            label: `resolved: ${session.message!.outcome.replace("_", " ")}`,
+            tone: "green" as const,
+          },
+        ]
+      : []),
+    ...(observer ? [{ label: "observer", tone: "dim" as const }] : []),
+    ...(role === "collaborator"
+      ? [{ label: "shared · your notes save as you go", tone: "dim" as const }]
+      : []),
+    {
+      label: `${session.artifact.meta.title ?? session.artifact.meta.planPath ?? session.id} · rev ${session.revisions.length}`,
+      tone: "dim",
+    },
+    { label: `submitted by ${session.artifact.meta.agent ?? "unknown"}`, tone: "dim" },
+  ];
+}
+
+export function buildRenderFlags(params: {
+  session: Thread;
+  isOwner: boolean;
+  isDiff: boolean;
+  isPixelPrototype: boolean;
+  resolved: boolean;
+  menuDialog: "keybinds" | "settings" | null;
+  resolvedIds: Set<string>;
+}) {
+  const { session, isOwner, isDiff, isPixelPrototype, resolved, menuDialog, resolvedIds } = params;
+
+  return {
+    showOwnerActions: isOwner && !isDiff && !resolved,
+    showDiffRefresh:
+      !resolved &&
+      (session.artifact.meta.prRefreshHeadSha !== undefined ||
+        (session.artifact.type === "diff" &&
+          session.artifact.meta.vcsChangeId !== undefined &&
+          session.artifact.meta.workbench !== true)),
+    prototypeCanComment: isOwner && !resolved,
+    chromeHidden: menuDialog !== null,
+    prototypePath: session.artifact.meta.prototypePath ?? "",
+    // a markdown prototype interleaves resolved cards like a plan; only the pixel mockup opts out
+    railResolvedIds: isDiff || isPixelPrototype ? null : resolvedIds,
+  };
+}
+
+interface DraftHandlerDeps {
+  liveInput: MutableRefObject<string>;
+  setMode: Dispatch<SetStateAction<Mode>>;
+  dispatch: (intent: Intent) => void;
+}
+
+export function buildSubmitConfirmState(
+  deps: DraftHandlerDeps & {
+    mode: Mode;
+    isDiff: boolean;
+    session: Thread;
+    walkFileList: WalkFile[];
+    viewedPaths: Set<string>;
+    quickActions: QuickAction[];
+  },
+): Omit<ConfirmCardProps, "theme"> | null {
+  const { mode, isDiff, session, walkFileList, viewedPaths, liveInput, setMode, dispatch } = deps;
+
+  if (mode.type !== "submit") return null;
+
+  return {
+    message: mode.message,
+    summary: mode.summary,
+    quickActions: deps.quickActions,
+    viewedSummary:
+      isDiff && session.viewedPaths !== undefined
+        ? `${viewedCount(walkFileList, viewedPaths)}/${walkFileList.length} files viewed`
+        : undefined,
+    onInput: (summary: string) => {
+      liveInput.current = summary;
+      setMode({ ...mode, summary });
+    },
+    onSelectMessage: (message: MessageOutcome) => setMode({ ...mode, message }),
+    onSubmit: () => dispatch({ type: "submitMessage" }),
+    onCancel: () => dispatch({ type: "closeOverlay" }),
+  };
+}

package/src/app/components/AppHeader.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { AppHeader } from "./AppHeader";
+import { Button } from "../../ui/components/primitives/Button";
+import { Toolbar } from "../../ui/components/primitives/Toolbar";
+
+export const meta: StoryMeta = { title: "Chrome/AppHeader" };
+
+export const NoThread: Story = {
+  render: () => (
+    <AppHeader
+      onOpenMenu={() => {}}
+      sidebarOpen
+      onToggleSidebar={() => {}}
+      title=""
+      changesOpen={false}
+      onToggleChanges={() => {}}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 80, height: 3 },
+};
+
+export const ThreadWithActions: Story = {
+  render: () => (
+    <AppHeader
+      onOpenMenu={() => {}}
+      sidebarOpen
+      onToggleSidebar={() => {}}
+      title="Review the accent change"
+      editShare={
+        <Toolbar>
+          <Button onPress={() => {}} theme={DARK}>
+            {" Edit "}
+          </Button>
+          <Button onPress={() => {}} theme={DARK}>
+            {" Share "}
+          </Button>
+        </Toolbar>
+      }
+      changesOpen
+      onToggleChanges={() => {}}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 80, height: 3 },
+};

package/src/app/components/AppHeader.tsx

@@ -0,0 +1,81 @@
+// 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 "../../appearance/theme";
+import { IconButton } from "../../ui/components/primitives/IconButton";
+import { NERD } from "../../ui/components/primitives/icons";
+
+export interface AppHeaderProps {
+  onOpenMenu: () => void;
+  sidebarOpen: boolean;
+  sidebarWidth?: number;
+  onToggleSidebar: () => void;
+  title: string;
+  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/app/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 "../../ui/components/primitives/icons";
+import { settle } from "../../testing/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/app/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 "../../integrations/client-extension-registry";
+import { settle } from "../../testing/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/app/components/AppShell.stories.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/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 },
+};