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

package/src/components/AppShell.tsx

@@ -0,0 +1,239 @@
+// 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;
+  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;
+}
+
+export function AppShell({
+  sidebarOpen,
+  onToggleSidebar,
+  onOpenMenu,
+  threadsPanel,
+  threadTitle,
+  threadActions,
+  threadPanel,
+  changesOpen,
+  projectOpen,
+  onToggleChanges,
+  onToggleProject,
+  onToggleRight,
+  projectMode,
+  changesPanel,
+  projectPanel,
+  zoomHideThread,
+  footer,
+  children,
+  theme,
+  threadsWidth = 30,
+  projectWidth = 32,
+}: AppShellProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const { width: terminalWidth } = useTerminalDimensions();
+  // 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 middleWidth =
+    terminalWidth -
+    (sidebarOpen ? threadsWidth : 0) -
+    (projectOpen ? projectWidth : collapsedRailWidth);
+  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>
+  );
+
+  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>
+                }
+                headerRight={threadActions}
+                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,
+                }}
+              >
+                {changesPanel}
+              </box>
+            ) : null}
+            {projectOpen ? (
+              <PanelColumn
+                width={projectWidth}
+                border="left"
+                header={null}
+                headerRight={projectToggles}
+                theme={tokens}
+              >
+                {projectPanel}
+              </PanelColumn>
+            ) : (
+              // collapsed: 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,
+                  }}
+                >
+                  <text fg={tokens.border}>{"│"}</text>
+                  <IconButton
+                    glyph={NERD.sidebarRightOff}
+                    onPress={onToggleRight}
+                    tip="Toggle Right Sidebar"
+                    marginLeft={1}
+                    theme={tokens}
+                  />
+                </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,94 @@
+/**
+ * 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 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/Breadcrumb.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { Breadcrumb } from "./Breadcrumb";
 
-export const meta: StoryMeta = { title: "Breadcrumb" };
+export const meta: StoryMeta = { title: "Chrome/Breadcrumb" };
 
 export const SessionHeader: Story = {
   render: () => (

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 },
+};

package/src/components/ChangesColumn.tsx

@@ -0,0 +1,170 @@
+// The right-hand Changes column: the diff's changed files as a directory tree.
+// A click on a file scrolls the diff to that file. Renders nothing when collapsed
+// so the diff reclaims the width. Mirrors the left Threads column on the far side.
+// Co-located here: the state hook that opens it by context and the header toggle.
+
+import React, { useMemo, useState } from "react";
+import type { DiffFileContents, ReviewSession } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import type { DiffRow } from "../view-diff";
+import { Tree } from "./primitives/Tree";
+import { allFolderIds } from "./primitives/tree-model";
+import { IconButton } from "./primitives/IconButton";
+import { NERD } from "./primitives/icons";
+import { buildFileTree } from "./file-tree";
+
+export interface DiffColumnsState {
+  changesOpen: boolean;
+  toggleChanges: () => void;
+  /** The path under the diff cursor, highlighted in the Changes tree. */
+  currentFilePath?: string;
+  scrollToFile: (path: string) => void;
+}
+
+/**
+ * Owns the right Changes column for a diff: context opens it when you enter a
+ * diff thread, and a file click scrolls the sheet to that file's first row.
+ * Resets on session change via the guarded render-time pattern, no effect.
+ */
+export function useDiffColumns(params: {
+  session: ReviewSession | null;
+  rows: DiffRow[];
+  cursor: number;
+  setCursor: (index: number) => void;
+}): DiffColumnsState {
+  const { session, rows, cursor, setCursor } = params;
+  const contextDefault = session?.artifact.type === "diff";
+  const [changesOpen, setChangesOpen] = useState(contextDefault);
+  const [seenSessionId, setSeenSessionId] = useState(session?.id);
+
+  // entering another thread lets context decide again; within a thread the manual toggle stays
+  if (session?.id !== seenSessionId) {
+    setSeenSessionId(session?.id);
+    setChangesOpen(contextDefault);
+  }
+
+  return {
+    changesOpen,
+    toggleChanges: () => setChangesOpen((open) => !open),
+    currentFilePath: rows[cursor]?.file,
+    scrollToFile: (path: string) => {
+      const fileRowIndex = rows.findIndex((row) => row.kind === "file" && row.file === path);
+
+      if (fileRowIndex >= 0) setCursor(fileRowIndex);
+    },
+  };
+}
+
+/** The header toggle for the Changes column; shown only for a diff, where files exist to browse. */
+export function DiffChangesToggle({
+  isDiff,
+  open,
+  onToggle,
+  theme,
+}: {
+  isDiff: boolean;
+  open: boolean;
+  onToggle: () => void;
+  theme?: Theme;
+}): React.ReactNode {
+  if (!isDiff) return null;
+
+  return (
+    <IconButton
+      glyph={open ? NERD.sidebarRight : NERD.sidebarRightOff}
+      onPress={onToggle}
+      marginLeft={2}
+      theme={theme}
+    />
+  );
+}
+
+export interface ChangesColumnProps {
+  open: boolean;
+  files?: readonly DiffFileContents[];
+  /** The path whose diff the sheet is scrolled to, highlighted in the tree. */
+  selectedPath?: string;
+  onSelectFile: (path: string) => void;
+  /** Comments per file path, shown as a dot-and-count badge on each entry. */
+  commentCounts?: ReadonlyMap<string, number>;
+  width?: number;
+  theme?: Theme;
+}
+
+/**
+ * The changed-files tree on its own, with no surrounding column frame: the body
+ * a workbench Project pane renders. A file click scrolls the diff to that file.
+ */
+export function ChangesFileTree({
+  files = [],
+  selectedPath,
+  onSelectFile,
+  commentCounts,
+  theme,
+}: Omit<ChangesColumnProps, "open" | "width">): React.ReactNode {
+  const nodes = useMemo(() => buildFileTree(files, commentCounts), [files, commentCounts]);
+  // every folder opens by default so each changed file is reachable; the user
+  // only ever names the folders they fold shut, so a new file set stays open
+  const [collapsedIds, setCollapsedIds] = useState<ReadonlySet<string>>(new Set());
+  const expandedIds = useMemo(() => {
+    const expanded = allFolderIds(nodes);
+
+    for (const id of collapsedIds) expanded.delete(id);
+
+    return expanded;
+  }, [nodes, collapsedIds]);
+
+  return (
+    <scrollbox style={{ flexGrow: 1 }} focused={false}>
+      <Tree
+        nodes={nodes}
+        expandedIds={expandedIds}
+        selectedId={selectedPath}
+        flattenEmptyDirectories
+        showStatus
+        onSelect={onSelectFile}
+        onToggle={(id) =>
+          setCollapsedIds((current) => {
+            const next = new Set(current);
+
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+
+            return next;
+          })
+        }
+        theme={theme}
+      />
+    </scrollbox>
+  );
+}
+
+export function ChangesColumn({
+  open,
+  files = [],
+  selectedPath,
+  onSelectFile,
+  width = 32,
+  theme,
+}: ChangesColumnProps): React.ReactNode {
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        width,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: ["left"],
+        borderColor: theme?.border,
+      }}
+    >
+      <ChangesFileTree
+        files={files}
+        selectedPath={selectedPath}
+        onSelectFile={onSelectFile}
+        theme={theme}
+      />
+    </box>
+  );
+}

package/src/components/CodeBlock.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { CodeBlock } from "./CodeBlock";
 
-export const meta: StoryMeta = { title: "CodeBlock" };
+export const meta: StoryMeta = { title: "Primitives/CodeBlock" };
 
 const SNIPPET = `export function gate(full: number) {
   // threshold

package/src/components/CompletionOverlay.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { CompletionOverlay } from "./CompletionOverlay";
 
-export const meta: StoryMeta = { title: "CompletionOverlay" };
+export const meta: StoryMeta = { title: "Overlays/CompletionOverlay" };
 
 export const ApprovedPrompt: Story = {
   render: () => <CompletionOverlay verdict="approve" completion={{ phase: "prompt" }} status="" />,

package/src/components/ConfirmCard.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { ConfirmCard } from "./ConfirmCard";
 
-export const meta: StoryMeta = { title: "ConfirmCard" };
+export const meta: StoryMeta = { title: "Cards/ConfirmCard" };
 
 const callbacks = {
   onInput: () => {},

package/src/components/ConfirmCard.tsx

@@ -98,11 +98,10 @@ export function ConfirmCard({
 
   return (
     <Card
-      title=" submit review "
+      title=" send message "
       contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 2 : 0)}
       borderColor={tokens.text}
-      backgroundColor="transparent"
-      marginRight={1}
+      backgroundColor={tokens.elevated}
       theme={theme}
     >
       {viewedSummary !== undefined ? <text fg={tokens.textDim}>{viewedSummary}</text> : null}
@@ -118,7 +117,7 @@ export function ConfirmCard({
       <box style={{ height: 1 }} />
       <Toolbar>
         <Button variant="solid" marginRight={2} onPress={onSubmit} theme={theme}>
-          {" Submit "}
+          {" send message "}
         </Button>
         <Button onPress={onCancel} theme={theme}>
           {" Cancel "}

package/src/components/ConfirmDialog.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { ConfirmDialog } from "./ConfirmDialog";
 
-export const meta: StoryMeta = { title: "ConfirmDialog" };
+export const meta: StoryMeta = { title: "Overlays/ConfirmDialog" };
 
 const callbacks = { onConfirm: () => {}, onCancel: () => {} };