@cueloop/client 0.1.0-alpha.64 → 0.1.0-alpha.66

package/src/components/ReviewPanel.stories.tsx

@@ -5,10 +5,24 @@ import type { Story, StoryMeta } from "./story";
 import { ReviewPanel } from "./ReviewPanel";
 import { FIXTURE_ANNOTATIONS, fixturePlanSession } from "./story-fixtures";
 
-export const meta: StoryMeta = { title: "ReviewPanel" };
+export const meta: StoryMeta = { title: "Surfaces/ReviewPanel" };
+
+/** An empty Tree tab: the stories here show the review tab. */
+const tree = {
+  rows: [],
+  canMove: true,
+  canFork: true,
+  onSelect: () => {},
+  onGo: () => {},
+  onBranch: () => {},
+  onLabel: () => {},
+  onFork: () => {},
+  onForkAndShare: () => {},
+};
 
 const rail = {
   session: fixturePlanSession(),
+  tree,
   authorNames: {},
   selectedId: FIXTURE_ANNOTATIONS[0]!.id,
   resolvedIds: new Set(FIXTURE_ANNOTATIONS.map((annotation) => annotation.id)),

package/src/components/ReviewRail.stories.tsx

@@ -4,10 +4,24 @@ import type { Story, StoryMeta } from "./story";
 import { ReviewRail } from "./ReviewRail";
 import { FIXTURE_ANNOTATIONS, fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
 
-export const meta: StoryMeta = { title: "ReviewRail" };
+export const meta: StoryMeta = { title: "Surfaces/ReviewRail" };
+
+/** An empty Tree tab: the stories here show the review tab. */
+const tree = {
+  rows: [],
+  canMove: true,
+  canFork: true,
+  onSelect: () => {},
+  onGo: () => {},
+  onBranch: () => {},
+  onLabel: () => {},
+  onFork: () => {},
+  onForkAndShare: () => {},
+};
 
 const callbacks = {
   curationItems: [],
+  tree,
   onTabChange: () => {},
   onSelectCard: () => {},
   onActivateCard: () => {},

package/src/components/ReviewRail.tsx

@@ -1,5 +1,5 @@
 /**
- * The right review rail: tab strip (Review/Agent), the scrollable annotation
+ * The right review rail: tab strip (Review/Tree/Agent), the scrollable annotation
  * stack, and the pinned submit affordance. The confirm card sits OUTSIDE the
  * scrollbox so the stack scrolls while the card stays at the rail bottom.
  * Card reveal goes through the scrollbox's own scrollChildIntoView - no
@@ -18,11 +18,12 @@ import { Toolbar } from "./primitives/Toolbar";
 import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
 import { ConfirmCard, type ConfirmCardProps } from "./ConfirmCard";
 import { AgentLauncher, type AgentTerminalHandle } from "./agent-launcher";
+import { TreePane, type TreePaneProps } from "./TreePane";
 import { Card } from "./primitives/Card";
 import { truncateToSingleLine } from "./truncate-text";
 import { resolveDisplayName } from "../attribution";
 
-export type RailTab = "review" | "agent";
+export type RailTab = "review" | "agent" | "tree";
 
 export interface RailCardEdit extends AnnotationDraft {
   id: string;
@@ -65,6 +66,8 @@ export interface ReviewRailProps {
   onLaunchHarness: (command: string, seedText?: string) => void;
   /** In-tab agent terminal handle (embedded path); null when detached. Lets the app route keys to it. */
   onAgentTerminal?: (handle: AgentTerminalHandle | null) => void;
+  /** The Tree tab: the session's history rows and the primitives that move it. */
+  tree: Omit<TreePaneProps, "theme">;
   /** Rail column width; the app derives it from the persisted review layout. */
   width?: number;
   /**
@@ -95,6 +98,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
     onSubmitRequest,
     onLaunchHarness,
     onAgentTerminal,
+    tree,
     width = 34,
     onCollapse,
     theme,
@@ -188,16 +192,19 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
       <Tabs
         selectedKey={railTab}
         onSelectionChange={(key) => {
-          if (key === "review" || key === "agent") onTabChange(key);
+          if (key === "review" || key === "agent" || key === "tree") onTabChange(key);
         }}
         theme={theme}
       >
         <TabList>
           <Tab id="review">Review</Tab>
+          <Tab id="tree">Tree</Tab>
           <Tab id="agent">Agent</Tab>
         </TabList>
       </Tabs>
-      {railTab === "agent" ? (
+      {railTab === "tree" ? (
+        <TreePane {...tree} theme={theme} />
+      ) : railTab === "agent" ? (
         <box style={{ flexGrow: 1, flexDirection: "column" }}>
           <AgentLauncher
             session={session}
@@ -223,7 +230,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
         </box>
       )}
       {/* the confirm card keeps full width, above the footer row */}
-      {railTab !== "agent" && submitConfirm ? (
+      {railTab === "review" && submitConfirm ? (
         <ConfirmCard {...submitConfirm} theme={theme} />
       ) : null}
       {/* footer row: collapse chevron left-bound, the submit affordance inline
@@ -234,7 +241,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
             <text fg={tokens.textDim}>{">"}</text>
           </box>
         ) : null}
-        {railTab !== "agent" && !submitConfirm ? (
+        {railTab === "review" && !submitConfirm ? (
           session.status === "resolved" ? (
             <text fg={tokens.green}>resolved: {session.verdict!.kind.replace("_", " ")}</text>
           ) : (

package/src/components/SettingsDialog.stories.tsx

@@ -4,7 +4,7 @@ import { THEME_PRESETS } from "../theme-presets";
 import type { Story, StoryMeta } from "./story";
 import { SettingsDialog, type SettingsCategory } from "./SettingsDialog";
 
-export const meta: StoryMeta = { title: "SettingsDialog" };
+export const meta: StoryMeta = { title: "Overlays/SettingsDialog" };
 
 const CATEGORIES: SettingsCategory[] = [
   {
@@ -62,6 +62,8 @@ export const NavZone: Story = {
   render: () => (
     <SettingsDialog
       isOpen
+      version="0.1.0-alpha.32"
+      keybindsSections={[]}
       categories={CATEGORIES}
       values={VALUES}
       activeCategoryId="general"
@@ -79,6 +81,8 @@ export const BodyZone: Story = {
   render: () => (
     <SettingsDialog
       isOpen
+      version="0.1.0-alpha.32"
+      keybindsSections={[]}
       categories={CATEGORIES}
       values={VALUES}
       activeCategoryId="display"
@@ -96,6 +100,8 @@ export const AppearanceThemed: Story = {
   render: () => (
     <SettingsDialog
       isOpen
+      version="0.1.0-alpha.32"
+      keybindsSections={[]}
       categories={CATEGORIES}
       values={VALUES}
       activeCategoryId="appearance"

package/src/components/SettingsDialog.tsx

@@ -1,17 +1,20 @@
 /**
- * The settings overlay, promoted from the design prototype: a centered
- * Dialog with a left category nav and a right body of typed rows, all driven
- * by one settings record. The component is controlled - the caller owns the
- * open flag, the active category/row/zone, and value changes - so the app's
- * keyboard grammar (and the stories catalog) can drive it without a second
- * key handler inside. The modal sizes itself from the terminal dimensions.
+ * The settings overlay: a centered Dialog whose left nav is a tree - a Settings
+ * group over its categories, plus Keybinds as a sibling leaf - and whose right
+ * body shows the active category's typed rows or the keybinds cheatsheet. The
+ * component is controlled: the caller owns the open flag, the active
+ * category/row/zone, and value changes, so the app's keyboard grammar (and the
+ * stories catalog) drive it without a second key handler inside.
  */
 
 import React from "react";
 import { useTerminalDimensions } from "@opentui/react";
 import type { Theme } from "../theme";
+import type { CheatsheetSection } from "../key-bindings";
 import { useComponentTheme } from "./theme-context";
 import { Dialog } from "./primitives/Dialog";
+import { Tree } from "./primitives/Tree";
+import type { TreeNode } from "./primitives/tree-model";
 import { CycleRow, TextRow, ToggleRow, type SettingsRowDescriptor } from "./SettingsRows";
 
 export interface SettingsCategory {
@@ -25,10 +28,17 @@ export interface SettingsCategory {
 
 export type SettingsValues = Record<string, string | boolean>;
 
+/** The category id whose right pane shows the keybinds cheatsheet rather than rows. */
+const KEYBINDS_CATEGORY_ID = "keybinds";
+
 export interface SettingsDialogProps {
   isOpen: boolean;
+  /** The client version, shown in the dialog footer (its home now the menu bar is gone). */
+  version: string;
   categories: SettingsCategory[];
   values: SettingsValues;
+  /** The keybinds cheatsheet, shown when the Keybinds leaf is active. */
+  keybindsSections: CheatsheetSection[];
   activeCategoryId: string;
   activeRowIndex: number;
   activeZone: "nav" | "body";
@@ -37,10 +47,50 @@ export interface SettingsDialogProps {
   theme?: Theme;
 }
 
+/** The left nav tree: a Settings group over its categories, then Keybinds as a leaf. */
+function navTree(categories: SettingsCategory[]): TreeNode[] {
+  const children = categories
+    .filter((category) => category.id !== KEYBINDS_CATEGORY_ID)
+    .map((category) => ({ id: category.id, label: category.name }));
+  const nodes: TreeNode[] = [{ id: "settings", label: "Settings", children }];
+  const keybinds = categories.find((category) => category.id === KEYBINDS_CATEGORY_ID);
+
+  if (keybinds !== undefined) nodes.push({ id: keybinds.id, label: keybinds.name });
+
+  return nodes;
+}
+
+function KeybindsBody({
+  sections,
+  tokens,
+}: {
+  sections: CheatsheetSection[];
+  tokens: Theme;
+}): React.ReactNode {
+  return (
+    <scrollbox style={{ flexGrow: 1 }} focused={false}>
+      {sections.map((section) => (
+        <box key={section.title} style={{ flexDirection: "column" }}>
+          <text fg={tokens.accent}>{section.title}</text>
+          {section.entries.map((entry, index) => (
+            <text key={`${section.title}-${index}`}>
+              <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+              <span fg={tokens.textMuted}>{entry.label}</span>
+            </text>
+          ))}
+          <text> </text>
+        </box>
+      ))}
+    </scrollbox>
+  );
+}
+
 export function SettingsDialog({
   isOpen,
+  version,
   categories,
   values,
+  keybindsSections,
   activeCategoryId,
   activeRowIndex,
   activeZone,
@@ -56,6 +106,7 @@ export function SettingsDialog({
     categories.find((candidate) => candidate.id === activeCategoryId) ?? categories[0];
 
   if (!category) return null;
+  const onKeybinds = category.id === KEYBINDS_CATEGORY_ID;
 
   return (
     <Dialog
@@ -67,80 +118,75 @@ export function SettingsDialog({
       theme={theme}
     >
       <box style={{ flexDirection: "row", flexGrow: 1 }}>
-        <box style={{ flexDirection: "column", width: 18, paddingLeft: 1, paddingRight: 1 }}>
-          <text fg={tokens.textDim}>SETTINGS</text>
-          {categories.map((candidate) => {
-            const isActive = candidate.id === category.id;
-
-            return (
-              <box
-                key={candidate.id}
-                style={{
-                  backgroundColor: isActive && activeZone === "nav" ? tokens.border : undefined,
-                }}
-                onMouseUp={() => onCategorySelect(candidate.id)}
-              >
-                <text
-                  fg={isActive ? tokens.accent : tokens.textMuted}
-                >{`${isActive ? "› " : "  "}${candidate.name}`}</text>
-              </box>
-            );
-          })}
+        <box style={{ flexDirection: "column", width: 20, paddingLeft: 1, paddingRight: 1 }}>
+          <Tree
+            nodes={navTree(categories)}
+            expandedIds={new Set(["settings"])}
+            selectedId={category.id}
+            onSelect={onCategorySelect}
+            onToggle={onCategorySelect}
+            theme={theme}
+          />
         </box>
         <box style={{ width: 1, backgroundColor: tokens.border }} />
         <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 2, paddingRight: 1 }}>
           <text fg={tokens.text}>{category.name}</text>
           <text fg={tokens.textDim}>{category.description}</text>
           <box style={{ height: 1 }} />
-          {category.customBody}
-          {category.rows.map((row, rowIndex) => {
-            const isActive = activeZone === "body" && rowIndex === activeRowIndex;
-            const value = values[row.key];
+          {onKeybinds ? <KeybindsBody sections={keybindsSections} tokens={tokens} /> : null}
+          {onKeybinds ? null : category.customBody}
+          {onKeybinds
+            ? null
+            : category.rows.map((row, rowIndex) => {
+                const isActive = activeZone === "body" && rowIndex === activeRowIndex;
+                const value = values[row.key];
 
-            if (row.kind === "toggle") {
-              return (
-                <ToggleRow
-                  key={row.key}
-                  label={row.label}
-                  value={value === true}
-                  isActive={isActive}
-                  onPress={() => onRowActivate(row)}
-                  theme={theme}
-                />
-              );
-            }
-            if (row.kind === "cycle") {
-              return (
-                <CycleRow
-                  key={row.key}
-                  label={row.label}
-                  value={String(value ?? "")}
-                  isActive={isActive}
-                  onPress={() => onRowActivate(row)}
-                  theme={theme}
-                />
-              );
-            }
+                if (row.kind === "toggle") {
+                  return (
+                    <ToggleRow
+                      key={row.key}
+                      label={row.label}
+                      value={value === true}
+                      isActive={isActive}
+                      onPress={() => onRowActivate(row)}
+                      theme={theme}
+                    />
+                  );
+                }
+                if (row.kind === "cycle") {
+                  return (
+                    <CycleRow
+                      key={row.key}
+                      label={row.label}
+                      value={String(value ?? "")}
+                      isActive={isActive}
+                      onPress={() => onRowActivate(row)}
+                      theme={theme}
+                    />
+                  );
+                }
 
-            return (
-              <TextRow
-                key={row.key}
-                label={row.label}
-                value={String(value ?? "")}
-                isActive={isActive}
-                onPress={() => onRowActivate(row)}
-                theme={theme}
-              />
-            );
-          })}
+                return (
+                  <TextRow
+                    key={row.key}
+                    label={row.label}
+                    value={String(value ?? "")}
+                    isActive={isActive}
+                    onPress={() => onRowActivate(row)}
+                    theme={theme}
+                  />
+                );
+              })}
         </box>
       </box>
-      <box style={{ flexDirection: "row", height: 1, paddingLeft: 1 }}>
+      <box style={{ flexDirection: "row", height: 1, paddingLeft: 1, paddingRight: 1 }}>
         <text fg={tokens.textDim}>
           {activeZone === "nav"
-            ? "j/k category · l/enter into settings · esc close"
+            ? "j/k nav · l/tab open · esc close"
             : "j/k row · l/space change · h back · esc close"}
         </text>
+        <box style={{ flexGrow: 1 }} />
+        <text fg={tokens.textDim}>{`cueloop v${version}`}</text>
       </box>
     </Dialog>
   );

package/src/components/SettingsRows.stories.tsx

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

package/src/components/ShellHeader.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ShellHeader } from "./ShellHeader";
+import { NERD } from "./primitives/icons";
+
+export const meta: StoryMeta = { title: "Layout/ShellHeader" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const ReviewSurface: Story = {
+  render: () => (
+    <Frame>
+      <ShellHeader
+        leftIcons={[{ glyph: NERD.settings }]}
+        leftLabel="Read Cueloop Repository"
+        tabs={[{ label: "Changes", active: true }]}
+        rightIcons={[
+          { glyph: NERD.expand },
+          { glyph: NERD.diff, active: true },
+          { glyph: NERD.listTree },
+        ]}
+        onToggleSidebar={() => {}}
+        onToggleInspector={() => {}}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted],
+  size: { width: 120, height: 3 },
+};
+
+export const InspectorCollapsed: Story = {
+  render: () => (
+    <Frame>
+      <ShellHeader
+        leftIcons={[{ glyph: NERD.settings }]}
+        leftLabel="Read Cueloop Repository"
+        rightIcons={[{ glyph: NERD.search }, { glyph: NERD.expand }]}
+        onToggleSidebar={() => {}}
+        sidebarOpen={false}
+        onToggleInspector={() => {}}
+        inspectorOpen={false}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.textMuted],
+  size: { width: 120, height: 3 },
+};

package/src/components/ShellHeader.tsx

@@ -0,0 +1,137 @@
+// The app shell's top bar: left panel toggle + icons + label, an optional title, right icons + panel toggle.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import { NERD } from "./primitives/icons";
+
+export interface ShellTab {
+  label: string;
+  active?: boolean;
+}
+
+// A header icon; active paints it in the brand accent to mark the current view or mode.
+export interface ShellIcon {
+  glyph: string;
+  active?: boolean;
+  onPress?: () => void;
+}
+
+export interface ShellHeaderProps {
+  leftIcons?: readonly ShellIcon[];
+  leftLabel?: string;
+  titleIcon?: string;
+  title?: string;
+  tabs?: readonly ShellTab[];
+  rightIcons?: readonly ShellIcon[];
+  sidebarOpen?: boolean;
+  onToggleSidebar?: () => void;
+  inspectorOpen?: boolean;
+  onToggleInspector?: () => void;
+  theme?: Theme;
+}
+
+function IconView({
+  icon,
+  tokens,
+  marginRight,
+}: {
+  icon: ShellIcon;
+  tokens: Theme;
+  marginRight: number;
+}): React.ReactNode {
+  const color = icon.active ? tokens.accent : tokens.textMuted;
+
+  // alignSelf center keeps the clickable box on the same row as sibling icons
+  return (
+    <box onMouseUp={icon.onPress} style={{ alignSelf: "center", marginRight }}>
+      <text fg={color}>{icon.glyph}</text>
+    </box>
+  );
+}
+
+export function ShellHeader({
+  leftIcons = [],
+  leftLabel,
+  titleIcon,
+  title,
+  tabs = [],
+  rightIcons = [],
+  sidebarOpen = true,
+  onToggleSidebar,
+  inspectorOpen = true,
+  onToggleInspector,
+  theme,
+}: ShellHeaderProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: "100%",
+        alignItems: "center",
+        paddingLeft: 2,
+        paddingRight: 2,
+      }}
+    >
+      <box style={{ flexDirection: "row", alignItems: "center" }}>
+        {onToggleSidebar !== undefined ? (
+          <IconView
+            icon={{
+              glyph: sidebarOpen ? NERD.sidebarLeft : NERD.sidebarLeftOff,
+              onPress: onToggleSidebar,
+            }}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ) : null}
+        {leftIcons.map((icon, index) => (
+          <IconView
+            key={`left-${index}-${icon.glyph}`}
+            icon={icon}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ))}
+        {leftLabel !== undefined ? (
+          <text fg={tokens.textMuted}>
+            {leftLabel}
+            {"  "}
+          </text>
+        ) : null}
+        {titleIcon !== undefined ? <text fg={tokens.textDim}>{titleIcon} </text> : null}
+        {title !== undefined ? <text fg={tokens.text}>{title}</text> : null}
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box style={{ flexDirection: "row", alignItems: "center" }}>
+        {tabs.map((tab, index) => (
+          <text
+            key={`tab-${index}-${tab.label}`}
+            fg={tab.active ? tokens.accent : tokens.textMuted}
+          >
+            {tab.label}
+            {"   "}
+          </text>
+        ))}
+        {rightIcons.map((icon, index) => (
+          <IconView
+            key={`right-${index}-${icon.glyph}`}
+            icon={icon}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ))}
+        {onToggleInspector !== undefined ? (
+          <IconView
+            icon={{
+              glyph: inspectorOpen ? NERD.sidebarRight : NERD.sidebarRightOff,
+              onPress: onToggleInspector,
+            }}
+            tokens={tokens}
+            marginRight={0}
+          />
+        ) : null}
+      </box>
+    </box>
+  );
+}

package/src/components/ThreadFooter.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ThreadFooter } from "./ThreadFooter";
+
+export const meta: StoryMeta = { title: "Chrome/ThreadFooter" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const Default: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="main" onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted],
+  size: { width: 80, height: 1 },
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="design/tui" canSubmit={false} onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 1 },
+};