@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.71

package/src/components/AppShell.tsx

@@ -0,0 +1,290 @@
+// 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 from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import { DARK, type Theme } from "../theme";
+import { PanelColumn } from "./PanelColumn";
+import { IconButton } from "./primitives/IconButton";
+import { NERD, HEADER_UNDERLINE_CHARS } from "./primitives/icons";
+import { TooltipProvider } from "./Tooltip";
+import { RootOverlayProvider } from "./RootOverlay";
+
+export type ProjectPanelMode = "changes" | "tree";
+
+export interface AppShellProps {
+  sidebarOpen: boolean;
+  onToggleSidebar: () => void;
+  onOpenMenu: () => void;
+  threadsPanel: React.ReactNode;
+  /** The Thread header title; mirrors the selected sidebar thread, blank on a bare launch. */
+  threadTitle: string;
+  /** Owner actions at the right edge of the Thread header (Edit/Share) - the only thread-header controls. */
+  threadActions?: React.ReactNode;
+  threadPanel: React.ReactNode;
+  changesOpen: boolean;
+  projectOpen: boolean;
+  /** Toggle the Changes editor (also switches the Project tree to changed-files mode). */
+  onToggleChanges: () => void;
+  /** Toggle the Project tree to the full project view. */
+  onToggleProject: () => void;
+  /** Open or close the whole right region (the right sidebar). */
+  onToggleRight: () => void;
+  projectMode: ProjectPanelMode;
+  /** The Changes editor grid; rendered only when changesOpen. */
+  changesPanel?: React.ReactNode;
+  /** The thread footer, shown beneath the Changes grid while the Thread pane is zoomed away. */
+  changesFooter?: React.ReactNode;
+  projectPanel: React.ReactNode;
+  /** Hide the Thread pane so Changes fills the middle (zoom); the sidebars stay. */
+  zoomHideThread?: boolean;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  theme?: Theme;
+  threadsWidth?: number;
+  projectWidth?: number;
+}
+
+/** 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,
+}: AppShellProps): React.ReactNode {
+  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>
+  );
+
+  const projectToggles = (
+    <box style={{ flexDirection: "row", flexShrink: 0, alignItems: "center" }}>
+      <IconButton
+        glyph="changes"
+        active={projectMode === "changes"}
+        onPress={onToggleChanges}
+        marginRight={2}
+        theme={tokens}
+      />
+      <IconButton
+        glyph="project"
+        active={projectMode === "tree"}
+        onPress={onToggleProject}
+        marginRight={2}
+        theme={tokens}
+      />
+      <IconButton
+        glyph={NERD.sidebarRight}
+        onPress={onToggleRight}
+        tip="Toggle Right Sidebar"
+        theme={tokens}
+      />
+    </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 Right 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} theme={tokens}>
+                {threadsPanel}
+              </PanelColumn>
+            ) : null}
+            {!zoomHideThread ? (
+              <PanelColumn
+                width={threadPaneWidth}
+                header={
+                  <box style={{ flexDirection: "row" }}>
+                    {!sidebarOpen ? <box style={{ paddingRight: 2 }}>{brandChrome}</box> : null}
+                    {threadTitle ? <text fg={tokens.textDim}>{threadTitle}</text> : null}
+                  </box>
+                }
+                // with the region closed, the reopen toggle rides the thread header instead of an empty column
+                headerRight={threadHeaderRight(
+                  threadActions,
+                  reopenRightControl,
+                  rightRegionClosed,
+                )}
+                theme={tokens}
+              >
+                {threadPanel}
+              </PanelColumn>
+            ) : null}
+            {changesOpen ? (
+              <box
+                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 ? (
+              <PanelColumn
+                width={projectWidth}
+                border="left"
+                header={null}
+                headerRight={projectToggles}
+                theme={tokens}
+              >
+                {projectPanel}
+              </PanelColumn>
+            ) : 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/components/AppShell.zoom.test.tsx

@@ -0,0 +1,135 @@
+/**
+ * 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 "./EditorGrid";
+import { changesTab, makeGroup } from "./editor-grid";
+import { NERD } from "./primitives/icons";
+import { allowEventLoopUpdates } from "../test-support";
+
+const grid = makeGroup([changesTab()]);
+
+async function zoomIconColumn(
+  width: number,
+  zoomed: boolean,
+  sidebarOpen: boolean,
+): Promise<number> {
+  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={grid}
+          focusedGroupId={grid.id}
+          onFocusGroup={() => {}}
+          onActivateTab={() => {}}
+          onCloseTab={() => {}}
+          onSplit={() => {}}
+          onZoom={() => {}}
+          zoomed={zoomed}
+          renderTab={() => <text>diff</text>}
+        />
+      }
+    />,
+    { width, height: 8 },
+  );
+
+  allowEventLoopUpdates();
+  await setup.waitForVisualIdle();
+  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);
+  });
+});

package/src/components/BareWorkbenchFileView.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { BareWorkbenchFileView, type WorkbenchCommenter } from "./BareWorkbenchFileView";
+
+export const meta: StoryMeta = { title: "Surfaces/BareWorkbenchFileView" };
+
+const SAMPLE = `export function add(a: number, b: number): number {\n  return a + b;\n}\n`;
+
+const controller: WorkbenchCommenter = {
+  repoReadFile: () => Promise.resolve(SAMPLE),
+  commentOnWorkbench: () => Promise.resolve(),
+};
+
+export const Loaded: Story = {
+  render: () => (
+    <BareWorkbenchFileView
+      path="src/add.ts"
+      controller={controller}
+      quickActions={[]}
+      onExit={() => {}}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 60, height: 12 },
+};

package/src/components/BareWorkbenchFileView.tsx

@@ -0,0 +1,64 @@
+// A project file in the bare launch shell: annotatable like any file, but no thread exists yet. The
+// first comment find-or-creates the per-repo workbench thread (controller.commentOnWorkbench), which
+// opens it - so this ephemeral view lives only until that first note promotes it to a real thread.
+
+import React from "react";
+import { SCHEMA_VERSION, type Anchor, type AnnotationTarget, type Thread } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { AnnotatableFileView } from "./AnnotatableFileView";
+
+/** The controller slice this view needs: read a file, and route a comment to the workbench thread. */
+export interface WorkbenchCommenter {
+  repoReadFile(path: string): Promise<string | null>;
+  commentOnWorkbench(anchor: Anchor, target: AnnotationTarget, body: string): Promise<void>;
+}
+
+/** An empty, unsaved thread: it holds no notes, just enough shape for the annotation surface. */
+function draftThread(): Thread {
+  return {
+    schemaVersion: SCHEMA_VERSION,
+    id: "workbench-draft",
+    workspace: { repoRoot: "", branch: "main" },
+    artifact: { type: "diff", content: "", meta: {} },
+    revisions: [],
+    annotations: [],
+    verdict: null,
+    status: "pending",
+    createdAt: "1970-01-01T00:00:00.000Z",
+  };
+}
+
+export interface BareWorkbenchFileViewProps {
+  path: string;
+  controller: WorkbenchCommenter;
+  quickActions: QuickAction[];
+  /** Reports whether the composer is open, so the shell suspends its inbox keys while typing. */
+  onComposingChange?: (composing: boolean) => void;
+  onExit: () => void;
+  theme?: Theme;
+}
+
+export function BareWorkbenchFileView(props: BareWorkbenchFileViewProps): React.ReactNode {
+  return (
+    <AnnotatableFileView
+      path={props.path}
+      loadContents={(path) => props.controller.repoReadFile(path)}
+      session={draftThread()}
+      quickActions={props.quickActions}
+      observer={false}
+      onComposingChange={props.onComposingChange}
+      onAddComment={(anchor: Anchor, body: string) =>
+        void props.controller.commentOnWorkbench(
+          anchor,
+          { kind: "file", path: props.path, rev: "worktree" },
+          body,
+        )
+      }
+      onReply={() => {}}
+      onUpdateAnnotation={() => {}}
+      onExit={props.onExit}
+      theme={props.theme}
+    />
+  );
+}

package/src/components/Breadcrumb.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./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: approve", tone: "green" },
+      ]}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.green],
+};

package/src/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 "../theme";
+import { useComponentTheme } from "./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/components/ChangesColumn.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { DiffFileContents } from "@cueloop/schema";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ChangesColumn } from "./ChangesColumn";
+
+export const meta: StoryMeta = { title: "Surfaces/ChangesColumn" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>{children}</box>;
+}
+
+const files: DiffFileContents[] = [
+  { path: "packages/client/src/App.tsx", oldContents: "a", newContents: "b", status: "modified" },
+  {
+    path: "packages/client/src/components/ChangesColumn.tsx",
+    oldContents: "",
+    newContents: "c",
+    status: "added",
+  },
+  { path: "packages/daemon/src/review.ts", oldContents: "d", newContents: "", status: "deleted" },
+  { path: "README.md", oldContents: "e", newContents: "f", status: "modified" },
+];
+
+export const Changed: Story = {
+  render: () => (
+    <Frame>
+      <ChangesColumn
+        open
+        files={files}
+        selectedPath="packages/client/src/App.tsx"
+        onSelectFile={() => {}}
+        theme={DARK}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.border],
+  size: { width: 60, height: 12 },
+};