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

package/src/app/components/AppShell.tsx

@@ -0,0 +1,358 @@
+// The one app shell: a single header row over four full-height panes - Threads, Thread, Changes,
+// Project - divided by straight rules; each header cell's thin bottom rule shares the divider gray so
+// the whole header underline reads as one line joining the side rules.
+// The right region (Changes + Project) toggles as a unit: the Project pane is the right sidebar and is
+// always present when the region is on, Changes rides on top of it, and a thin rail holds the sidebar
+// toggle when the region is closed. Each pane owns its own header controls; the thread header never does.
+
+import React, { useEffect, useRef } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { BoxRenderable } from "@opentui/core";
+import { DARK, type Theme } from "../../appearance/theme";
+import { useFrameMeasure } from "../../ui/use-frame-measure";
+import { truncateTitle } from "../../ui/components/truncate-title";
+import { PanelColumn } from "./PanelColumn";
+import { IconButton } from "../../ui/components/primitives/IconButton";
+import { NERD, HEADER_UNDERLINE_CHARS } from "../../ui/components/primitives/icons";
+import { TooltipProvider } from "../../ui/components/Tooltip";
+import { RootOverlayProvider } from "../../ui/components/RootOverlay";
+import type { ExtensionUIContext } from "@cueloop/extension-api/client";
+import { ClientExtensionRegistry } from "../../integrations/client-extension-registry";
+import {
+  ExtensionZone,
+  useClientExtensionSnapshot,
+} from "../../integrations/components/ExtensionZone";
+import { WorkspacePanels } from "./WorkspacePanels";
+
+const EMPTY_EXTENSION_REGISTRY = new ClientExtensionRegistry();
+const EMPTY_EXTENSION_CONTEXT: ExtensionUIContext = { workspace: null, threadId: null };
+
+interface ExtensionInputs {
+  registry: ClientExtensionRegistry;
+  context: ExtensionUIContext;
+}
+
+function extensionInputs(
+  registry?: ClientExtensionRegistry,
+  context?: ExtensionUIContext,
+): ExtensionInputs {
+  return {
+    registry: registry ?? EMPTY_EXTENSION_REGISTRY,
+    context: context ?? EMPTY_EXTENSION_CONTEXT,
+  };
+}
+
+export type ProjectPanelMode = "changes" | "tree";
+
+/** The thread title on one line: it shrinks with the header and tails off in an ellipsis rather than wrapping. */
+function HeaderTitle({ title, color }: { title: string; color: string }): React.ReactNode {
+  const boxRef = useRef<BoxRenderable | null>(null);
+  const width = useFrameMeasure(
+    () => boxRef.current?.width ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+  const clipped = width > 0 ? truncateTitle(title, width) : title;
+
+  return (
+    <box ref={boxRef} style={{ flexShrink: 1, minWidth: 0 }}>
+      <text fg={color} wrapMode="none">
+        {clipped}
+      </text>
+    </box>
+  );
+}
+
+export interface AppShellProps {
+  sidebarOpen: boolean;
+  onToggleSidebar: () => void;
+  onOpenMenu: () => void;
+  threadsPanel: React.ReactNode;
+  threadTitle: string;
+  threadActions?: React.ReactNode;
+  threadPanel: React.ReactNode;
+  changesOpen: boolean;
+  projectOpen: boolean;
+  onToggleChanges: () => void;
+  onToggleProject: () => void;
+  onToggleRight: () => void;
+  projectMode: ProjectPanelMode;
+  changesPanel?: React.ReactNode;
+  changesFooter?: React.ReactNode;
+  projectPanel: React.ReactNode;
+  zoomHideThread?: boolean;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  theme?: Theme;
+  threadsWidth?: number;
+  projectWidth?: number;
+  onFocusPane?: (pane: FocusPane) => void;
+  focusedPane?: FocusPane;
+  extensionRegistry?: ClientExtensionRegistry;
+  extensionContext?: ExtensionUIContext;
+  onExtensionError?: (message: string) => void;
+}
+
+export type FocusPane = "threads" | "thread" | "changes" | "project";
+
+/** The right region's reserved width: the open project pane, nothing when the region is closed, else the collapsed rail. */
+function rightRegionColumns(
+  projectOpen: boolean,
+  projectWidth: number,
+  rightRegionClosed: boolean,
+  collapsedRailWidth: number,
+): number {
+  if (projectOpen) return projectWidth;
+
+  return rightRegionClosed ? 0 : collapsedRailWidth;
+}
+
+/** The Thread header's right cluster: the owner actions, plus the reopen control when the region is closed. */
+function threadHeaderRight(
+  threadActions: React.ReactNode,
+  reopenControl: React.ReactNode,
+  showReopen: boolean,
+): React.ReactNode {
+  if (!showReopen) return threadActions;
+
+  return (
+    <box style={{ flexDirection: "row", alignItems: "center" }}>
+      {threadActions ? <box style={{ paddingRight: 2 }}>{threadActions}</box> : null}
+      {reopenControl}
+    </box>
+  );
+}
+
+export function AppShell({
+  sidebarOpen,
+  onToggleSidebar,
+  onOpenMenu,
+  threadsPanel,
+  threadTitle,
+  threadActions,
+  threadPanel,
+  changesOpen,
+  projectOpen,
+  onToggleChanges,
+  onToggleProject,
+  onToggleRight,
+  projectMode,
+  changesPanel,
+  changesFooter,
+  projectPanel,
+  zoomHideThread,
+  footer,
+  children,
+  theme,
+  threadsWidth = 30,
+  projectWidth = 32,
+  onFocusPane,
+  focusedPane,
+  extensionRegistry,
+  extensionContext,
+  onExtensionError,
+}: AppShellProps): React.ReactNode {
+  const { registry, context } = extensionInputs(extensionRegistry, extensionContext);
+  const extensionSnapshot = useClientExtensionSnapshot(registry);
+
+  useEffect(() => {
+    if (extensionSnapshot.lastError) onExtensionError?.(extensionSnapshot.lastError);
+  }, [extensionSnapshot.lastError, onExtensionError]);
+
+  const tokens = theme ?? DARK;
+  const { width: terminalWidth } = useTerminalDimensions();
+  // with both panels closed the right region collapses to nothing: the reopen toggle
+  // rides the thread header, and the middle reclaims the width the rail would have taken
+  const rightRegionClosed = !projectOpen && !changesOpen;
+  // Thread and Changes would otherwise split the middle as two flexBasis-0 items, and Yoga adds the
+  // Changes left border on top of its share: at even widths the halves come out fractional, the
+  // Changes side rounds up, and the row overflows a cell under the Project border. Sizing the Thread
+  // pane to a whole number leaves Changes the lone flex item, which lays out exactly.
+  const collapsedRailWidth = 4;
+  const rightRegionWidth = rightRegionColumns(
+    projectOpen,
+    projectWidth,
+    rightRegionClosed,
+    collapsedRailWidth,
+  );
+  const middleWidth = terminalWidth - (sidebarOpen ? threadsWidth : 0) - rightRegionWidth;
+  const threadPaneWidth =
+    changesOpen && !zoomHideThread ? Math.max(20, Math.floor(middleWidth / 2)) : undefined;
+
+  // gear + sidebar toggle + product mark: global chrome, in the Threads header when open, else at the
+  // left of the Thread header when the Threads pane is collapsed
+  const brandChrome = (
+    <box style={{ flexDirection: "row", flexShrink: 0 }}>
+      <box onMouseUp={onOpenMenu} style={{ paddingRight: 2 }}>
+        <text fg={tokens.textMuted}>{NERD.settings}</text>
+      </box>
+      <IconButton
+        glyph={sidebarOpen ? NERD.sidebarLeft : NERD.sidebarLeftOff}
+        onPress={onToggleSidebar}
+        tip="Toggle Threads"
+        marginRight={2}
+        theme={tokens}
+      />
+      <text fg={tokens.accent}>cueloop</text>
+    </box>
+  );
+
+  // the reopen control - a divider tick then the toggle - shared by the collapsed
+  // rail and, when the rail is suppressed, the thread header
+  const reopenRightControl = (
+    <>
+      <text fg={tokens.border}>{"│"}</text>
+      <IconButton
+        glyph={NERD.sidebarRightOff}
+        onPress={onToggleRight}
+        tip="Toggle Sidebar"
+        marginLeft={1}
+        theme={tokens}
+      />
+    </>
+  );
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.background,
+      }}
+    >
+      <RootOverlayProvider>
+        <TooltipProvider theme={tokens}>
+          <box style={{ flexGrow: 1, flexDirection: "row" }}>
+            {sidebarOpen ? (
+              <PanelColumn
+                width={threadsWidth}
+                border="right"
+                header={brandChrome}
+                onFocus={() => onFocusPane?.("threads")}
+                theme={tokens}
+              >
+                {threadsPanel}
+                <ExtensionZone
+                  zone="threads.sidebar"
+                  registry={registry}
+                  context={context}
+                  onError={onExtensionError}
+                />
+              </PanelColumn>
+            ) : null}
+            {!zoomHideThread ? (
+              <PanelColumn
+                width={threadPaneWidth}
+                header={
+                  <box style={{ flexDirection: "row", minWidth: 0 }}>
+                    {!sidebarOpen ? (
+                      <box style={{ paddingRight: 2, flexShrink: 0 }}>{brandChrome}</box>
+                    ) : null}
+                    {threadTitle ? (
+                      <HeaderTitle title={threadTitle} color={tokens.textDim} />
+                    ) : null}
+                  </box>
+                }
+                // with the region closed, the reopen toggle rides the thread header instead of an empty column
+                headerRight={threadHeaderRight(
+                  extensionSnapshot.actions.length > 0 ? (
+                    <box style={{ flexDirection: "row", alignItems: "center" }}>
+                      {threadActions}
+                      <ExtensionZone
+                        zone="thread.header"
+                        registry={registry}
+                        context={context}
+                        onError={onExtensionError}
+                      />
+                    </box>
+                  ) : (
+                    threadActions
+                  ),
+                  reopenRightControl,
+                  rightRegionClosed,
+                )}
+                onFocus={() => onFocusPane?.("thread")}
+                theme={tokens}
+              >
+                {threadPanel}
+              </PanelColumn>
+            ) : null}
+            {changesOpen ? (
+              <box
+                onMouseDown={() => onFocusPane?.("changes")}
+                style={{
+                  flexDirection: "column",
+                  flexGrow: 1,
+                  flexBasis: 0,
+                  minWidth: 0,
+                  borderStyle: "single",
+                  // zoom drops the Thread pane, whose sidebar rule already divides here, so drop this
+                  // one then to avoid a double border
+                  border: zoomHideThread ? [] : ["left"],
+                  borderColor: tokens.border,
+                }}
+              >
+                <box style={{ flexGrow: 1, minHeight: 0 }}>{changesPanel}</box>
+                {zoomHideThread ? changesFooter : null}
+              </box>
+            ) : null}
+            {projectOpen ? (
+              <WorkspacePanels
+                width={projectWidth}
+                projectMode={projectMode}
+                projectPanel={projectPanel}
+                onToggleChanges={onToggleChanges}
+                onToggleProject={onToggleProject}
+                onToggleRight={onToggleRight}
+                onFocus={() => onFocusPane?.("project")}
+                focused={focusedPane === "project"}
+                registry={registry}
+                context={context}
+                theme={tokens}
+                onExtensionError={onExtensionError}
+              />
+            ) : rightRegionClosed ? null : (
+              // Changes open but Project closed: a divider tick above the continuous header underline holds the reopen toggle;
+              // the rule lives in the header only, never running the pane's full height. The extra column
+              // of right padding keeps the reopen icon off the terminal's last column, which squeezes it
+              <box style={{ flexDirection: "column", width: 4 }}>
+                <box
+                  customBorderChars={HEADER_UNDERLINE_CHARS}
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    height: 2,
+                    paddingRight: 1,
+                    backgroundColor: tokens.panel,
+                    borderStyle: "single",
+                    border: ["bottom"],
+                    borderColor: tokens.border,
+                  }}
+                >
+                  {reopenRightControl}
+                </box>
+              </box>
+            )}
+          </box>
+          {footer !== undefined ? (
+            <box
+              style={{
+                flexDirection: "row",
+                height: 1,
+                paddingLeft: 1,
+                paddingRight: 1,
+                borderStyle: "single",
+                border: ["top"],
+                borderColor: tokens.border,
+              }}
+            >
+              {footer}
+            </box>
+          ) : null}
+          {children}
+        </TooltipProvider>
+      </RootOverlayProvider>
+    </box>
+  );
+}

package/src/app/components/AppShell.zoom.test.tsx

@@ -0,0 +1,149 @@
+/**
+ * Regression: the Changes header controls keep their column when zoom hides the Thread
+ * pane. Thread and Changes used to split the middle as two flexBasis-0 items, and Yoga
+ * added the Changes left border on top of its share, so at even terminal widths the
+ * Changes pane overflowed a cell under the Project border and the zoom icon appeared to
+ * jump left on zoom. The shell now sizes the Thread pane to a whole number.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { AppShell } from "./AppShell";
+import { EditorGrid } from "../../workbench/components/EditorGrid";
+import { changesTab, makeGroup, splitGroup } from "../../workbench/components/editor-grid";
+import { NERD } from "../../ui/components/primitives/icons";
+import { allowEventLoopUpdates, settle } from "../../testing/test-support";
+
+const grid = makeGroup([changesTab()]);
+
+async function zoomIconColumn(
+  width: number,
+  zoomed: boolean,
+  sidebarOpen: boolean,
+  splitEditor = false,
+): Promise<number> {
+  const editor = splitEditor
+    ? splitGroup(grid, grid.id, "right")
+    : { tree: grid, focusGroupId: grid.id };
+  const setup = await testRender(
+    <AppShell
+      sidebarOpen={sidebarOpen}
+      onToggleSidebar={() => {}}
+      onOpenMenu={() => {}}
+      threadsPanel={<text>threads</text>}
+      threadTitle="thread"
+      threadPanel={<text>body</text>}
+      changesOpen
+      projectOpen
+      onToggleChanges={() => {}}
+      onToggleProject={() => {}}
+      onToggleRight={() => {}}
+      projectMode="changes"
+      zoomHideThread={zoomed}
+      projectPanel={<text>project</text>}
+      changesPanel={
+        <EditorGrid
+          tree={editor.tree}
+          focusedGroupId={editor.focusGroupId}
+          onFocusGroup={() => {}}
+          onActivateTab={() => {}}
+          onCloseTab={() => {}}
+          onSplit={() => {}}
+          onZoom={() => {}}
+          zoomed={zoomed}
+          renderTab={() => <text>diff</text>}
+        />
+      }
+    />,
+    { width, height: 8 },
+  );
+
+  // Split widths commit through React after the frame measurement. Renderer idle alone
+  // can still expose the initial fractional split, before its whole-cell widths land.
+  await settle(setup);
+  const column = setup.captureCharFrame().split("\n")[0]!.indexOf(NERD.zoom);
+
+  setup.renderer.destroy();
+
+  return column;
+}
+
+describe("zoom icon in the shell", () => {
+  // even widths are where the fractional split used to overflow; odd widths never did
+  for (const width of [160, 161]) {
+    for (const sidebarOpen of [false, true]) {
+      test(`stays in its column when zoom toggles (width ${width}, sidebar ${sidebarOpen ? "open" : "closed"})`, async () => {
+        // Act
+        const unzoomed = await zoomIconColumn(width, false, sidebarOpen);
+        const zoomed = await zoomIconColumn(width, true, sidebarOpen);
+
+        // Assert
+        expect(unzoomed).toBeGreaterThan(0);
+        expect(zoomed).toBe(unzoomed);
+      });
+    }
+  }
+
+  test("the footer rides the Changes pane only while the Thread pane is zoomed away", async () => {
+    async function footerVisible(zoomed: boolean): Promise<boolean> {
+      const setup = await testRender(
+        <AppShell
+          sidebarOpen={false}
+          onToggleSidebar={() => {}}
+          onOpenMenu={() => {}}
+          threadsPanel={<text>threads</text>}
+          threadTitle="thread"
+          threadPanel={<text>body</text>}
+          changesOpen
+          projectOpen
+          onToggleChanges={() => {}}
+          onToggleProject={() => {}}
+          onToggleRight={() => {}}
+          projectMode="changes"
+          zoomHideThread={zoomed}
+          projectPanel={<text>project</text>}
+          changesFooter={<text>send message</text>}
+          changesPanel={<text>diff</text>}
+        />,
+        { width: 160, height: 8 },
+      );
+
+      allowEventLoopUpdates();
+      await setup.waitForVisualIdle();
+      const shown = setup.captureCharFrame().includes("send message");
+
+      setup.renderer.destroy();
+
+      return shown;
+    }
+
+    // Act
+    const [zoomed, unzoomed] = await Promise.all([footerVisible(true), footerVisible(false)]);
+
+    // Assert - the Thread pane carries the footer normally, so it must not double up in Changes
+    expect(zoomed).toBe(true);
+    expect(unzoomed).toBe(false);
+  });
+
+  test("the icon clears the Project border by its padding in both states", async () => {
+    // Act
+    const setupColumns = await Promise.all([
+      zoomIconColumn(160, false, false),
+      zoomIconColumn(160, true, false),
+    ]);
+
+    // Assert - width 160, project pane 32: the border sits at 128 and the glyph one padding cell
+    // before it, the same inset the right-sidebar icon keeps from its own edge
+    for (const column of setupColumns) expect(128 - column).toBe(2);
+  });
+
+  test("a split editor keeps the zoom icon clear of the Project border", async () => {
+    const columns = await Promise.all([
+      zoomIconColumn(160, false, false, true),
+      zoomIconColumn(160, true, false, true),
+    ]);
+
+    for (const column of columns) expect(128 - column).toBe(2);
+  });
+});

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { Breadcrumb } from "./Breadcrumb";
+
+export const meta: StoryMeta = { title: "Chrome/Breadcrumb" };
+
+export const SessionHeader: Story = {
+  render: () => (
+    <Breadcrumb
+      items={[
+        { label: "cueloop", tone: "accent" },
+        { label: "Migration Plan · rev 2", tone: "dim" },
+        { label: "resolved: approved", tone: "green" },
+      ]}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.green],
+};

package/src/app/components/Breadcrumb.tsx

@@ -0,0 +1,45 @@
+/**
+ * One-row breadcrumb trail: toned segments joined by " · " on the panel
+ * surface. The app header is a breadcrumb (product · artifact · revision)
+ * followed by state badges; each item picks a semantic tone.
+ */
+
+import React from "react";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+
+export type BreadcrumbTone = "accent" | "dim" | "text" | "green";
+
+export interface BreadcrumbItem {
+  label: string;
+  tone?: BreadcrumbTone;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  theme?: Theme;
+}
+
+export function Breadcrumb({ items, theme }: BreadcrumbProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const toneColor = (tone?: BreadcrumbTone): string =>
+    tone === "accent"
+      ? tokens.accent
+      : tone === "green"
+        ? tokens.green
+        : tone === "text"
+          ? tokens.text
+          : tokens.textDim;
+
+  return (
+    <box style={{ height: 1, backgroundColor: tokens.panel, paddingLeft: 1, flexDirection: "row" }}>
+      <text fg={tokens.text}>
+        {items.map((item, index) => (
+          <span key={index} fg={toneColor(item.tone)}>
+            {index === 0 ? item.label : ` · ${item.label}`}
+          </span>
+        ))}
+      </text>
+    </box>
+  );
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { MenuBar } from "./MenuBar";
+
+export const meta: StoryMeta = { title: "Chrome/MenuBar" };
+
+const callbacks = { onSettings: () => {}, onKeybinds: () => {} };
+
+function BottomFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box
+      style={{ flexDirection: "column", width: "100%", height: "100%", justifyContent: "flex-end" }}
+    >
+      {children}
+    </box>
+  );
+}
+
+export const Open: Story = {
+  render: () => (
+    <BottomFrame>
+      <MenuBar open {...callbacks} />
+    </BottomFrame>
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 60, height: 8 },
+};

package/src/app/components/MenuBar.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { FRAME_BORDER_STYLE } from "../../ui/components/primitives/frame";
+
+export interface MenuBarProps {
+  open: boolean;
+  onSettings: () => void;
+  onKeybinds: () => void;
+  theme?: Theme;
+}
+
+const DROPDOWN_OPTION_ROWS = 2;
+
+/** The settings gear's drop-down: Settings and Keybinds, below the top-left gear. */
+export function MenuBar({ open, onSettings, onKeybinds, theme }: MenuBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const dropdownHeight = DROPDOWN_OPTION_ROWS + 2;
+
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: 1,
+        top: 2,
+        width: 16,
+        height: dropdownHeight,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+        flexDirection: "column",
+      }}
+    >
+      <box onMouseUp={onSettings}>
+        <text fg={tokens.text}> Settings</text>
+      </box>
+      <box onMouseUp={onKeybinds}>
+        <text fg={tokens.text}> Keybinds</text>
+      </box>
+    </box>
+  );
+}