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

package/src/components/InboxList.stories.tsx

@@ -2,9 +2,10 @@ import React from "react";
 import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { InboxList } from "./InboxList";
+import { groupInbox } from "./session-tree";
 import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
 
-export const meta: StoryMeta = { title: "InboxList" };
+export const meta: StoryMeta = { title: "Surfaces/InboxList" };
 
 /** InboxList is the body under App's header/menu chrome; a frame gives it height. */
 function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {
@@ -12,19 +13,33 @@ function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode
 }
 
 export const TwoPending: Story = {
-  render: () => (
-    <BodyFrame>
-      <InboxList inbox={[fixturePlanSession(), fixtureDiffSession()]} cursor={0} />
-    </BodyFrame>
-  ),
-  expectedColors: [DARK.cursorBackground],
+  render: () => {
+    const plan = fixturePlanSession();
+    // one repo-bound thread (a project) and one standalone thread
+    const projectPlan = {
+      ...plan,
+      workspace: {
+        ...plan.workspace,
+        rootCommit: "root-1",
+        remote: "git@github.com:acme/widget.git",
+      },
+    };
+    const { rows } = groupInbox([projectPlan, fixtureDiffSession()]);
+
+    return (
+      <BodyFrame>
+        <InboxList rows={rows} cursor={0} />
+      </BodyFrame>
+    );
+  },
+  expectedColors: [DARK.accent],
   size: { width: 80, height: 12 },
 };
 
 export const Empty: Story = {
   render: () => (
     <BodyFrame>
-      <InboxList inbox={[]} cursor={0} />
+      <InboxList rows={[]} cursor={0} />
     </BodyFrame>
   ),
   size: { width: 80, height: 8 },

package/src/components/InboxList.tsx

@@ -1,28 +1,35 @@
 /**
- * The pending-review inbox: a cursor-driven session list. Selection stays with
- * the keyboard grammar; the list only renders the snapshot. The selected row
- * carries a [delete] word-button (click, or `d` in the grammar) that asks the
- * caller to confirm removal. App supplies the surrounding header and MenuBar
- * chrome (the same as plan/diff review); this is the flex-growing body.
+ * The pending-review inbox: a Projects and Threads tree. Selection stays with
+ * the keyboard grammar - the cursor indexes the flat thread order and this
+ * component only renders the snapshot. The selected thread carries a [delete]
+ * word-button (click, or `d` in the grammar). App supplies the surrounding
+ * header and MenuBar chrome; this is the flex-growing body.
  */
 
 import React from "react";
-import type { ReviewSession } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { Button } from "./primitives/Button";
+import { NERD } from "./primitives/icons";
+import type { InboxRow } from "./session-tree";
 
 export interface InboxListProps {
-  inbox: ReviewSession[];
+  rows: InboxRow[];
   cursor: number;
-  /** Ask to delete a plan (the selected row's [delete] button). */
+  /** The open thread's id; highlights it instead of the cursor (the left sidebar case). */
+  activeId?: string;
+  /** Open a thread by clicking its row (the left sidebar case). */
+  onSelect?: (sessionId: string) => void;
+  /** Ask to delete a thread (the selected row's [delete] button). */
   onRequestDelete?: (id: string, title: string) => void;
   theme?: Theme;
 }
 
 export function InboxList({
-  inbox,
+  rows,
   cursor,
+  activeId,
+  onSelect,
   onRequestDelete,
   theme,
 }: InboxListProps): React.ReactNode {
@@ -30,28 +37,47 @@ export function InboxList({
 
   return (
     <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
-      {inbox.length === 0 ? (
+      {rows.length === 0 ? (
         <text fg={tokens.textDim}>nothing waiting for review</text>
       ) : (
-        inbox.map((session, index) => {
-          const selected = index === cursor;
-          const title = session.artifact.meta.title ?? session.id;
+        rows.map((row) => {
+          if (row.kind === "section") {
+            return (
+              <text key={row.id} fg={tokens.textDim}>
+                {row.label}
+              </text>
+            );
+          }
+
+          if (row.kind === "project") {
+            return (
+              <text key={row.id}>
+                <span fg={tokens.blue}>{` ${NERD.folderOpen} `}</span>
+                <span fg={tokens.textMuted}>{row.label}</span>
+              </text>
+            );
+          }
+
+          const selected =
+            activeId !== undefined ? activeId === row.session.id : row.selectionIndex === cursor;
+          const title = row.session.artifact.meta.title ?? row.session.id;
 
           return (
             <box
-              key={session.id}
+              key={row.id}
+              onMouseUp={onSelect ? () => onSelect(row.session.id) : undefined}
               style={{
                 flexDirection: "row",
-                backgroundColor: selected ? tokens.cursorBackground : undefined,
+                backgroundColor: selected ? tokens.elevated : undefined,
               }}
             >
-              <text fg={selected ? tokens.text : tokens.textMuted}>
-                {selected ? "> " : "  "}
-                {title} · {session.workspace.branch} · {session.artifact.type}
+              <text fg={selected ? tokens.accent : tokens.textMuted}>
+                {"   "}
+                {title}
               </text>
               <box style={{ flexGrow: 1 }} />
               {selected && onRequestDelete ? (
-                <Button onPress={() => onRequestDelete(session.id, title)} theme={theme}>
+                <Button onPress={() => onRequestDelete(row.session.id, title)} theme={theme}>
                   {" [delete] "}
                 </Button>
               ) : null}

package/src/components/KeybindsDialog.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { KeybindsDialog } from "./KeybindsDialog";
 
-export const meta: StoryMeta = { title: "KeybindsDialog" };
+export const meta: StoryMeta = { title: "Overlays/KeybindsDialog" };
 
 const SECTIONS = [
   {

package/src/components/MarkerPopover.stories.tsx

@@ -4,7 +4,7 @@ import { DEFAULT_QUICK_ACTIONS } from "../config";
 import type { Story, StoryMeta } from "./story";
 import { MarkerPopover } from "./MarkerPopover";
 
-export const meta: StoryMeta = { title: "MarkerPopover" };
+export const meta: StoryMeta = { title: "Overlays/MarkerPopover" };
 
 const callbacks = {
   onComment: () => {},

package/src/components/MenuBar.stories.tsx

@@ -3,9 +3,9 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { MenuBar } from "./MenuBar";
 
-export const meta: StoryMeta = { title: "MenuBar" };
+export const meta: StoryMeta = { title: "Chrome/MenuBar" };
 
-const callbacks = { onToggle: () => {}, onSettings: () => {}, onKeybinds: () => {} };
+const callbacks = { onSettings: () => {}, onKeybinds: () => {} };
 
 function BottomFrame({ children }: { children: React.ReactNode }): React.ReactNode {
   return (
@@ -17,19 +17,10 @@ function BottomFrame({ children }: { children: React.ReactNode }): React.ReactNo
   );
 }
 
-export const Closed: Story = {
-  render: () => (
-    <BottomFrame>
-      <MenuBar open={false} version="0.1.0-alpha.32" {...callbacks} />
-    </BottomFrame>
-  ),
-  size: { width: 60, height: 8 },
-};
-
 export const Open: Story = {
   render: () => (
     <BottomFrame>
-      <MenuBar open version="0.1.0-alpha.32" {...callbacks} />
+      <MenuBar open {...callbacks} />
     </BottomFrame>
   ),
   expectedColors: [DARK.text],

package/src/components/MenuBar.tsx

@@ -1,75 +1,44 @@
 import React from "react";
-import { useTerminalDimensions } from "@opentui/react";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { FRAME_BORDER_STYLE } from "./primitives/frame";
 
 export interface MenuBarProps {
   open: boolean;
-  version: string;
-  /** The transient status line, shown between the menu and the version. */
-  status?: string;
-  onToggle: () => void;
   onSettings: () => void;
   onKeybinds: () => void;
   theme?: Theme;
 }
 
-const DROPUP_OPTION_ROWS = 2;
+const DROPDOWN_OPTION_ROWS = 2;
 
-export function MenuBar({
-  open,
-  version,
-  status,
-  onToggle,
-  onSettings,
-  onKeybinds,
-  theme,
-}: MenuBarProps): React.ReactNode {
+/** 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 { height: terminalHeight } = useTerminalDimensions();
-  const dropupHeight = DROPUP_OPTION_ROWS + 2;
+  const dropdownHeight = DROPDOWN_OPTION_ROWS + 2;
+
+  if (!open) return null;
 
   return (
-    <>
-      {open ? (
-        <box
-          style={{
-            position: "absolute",
-            left: 1,
-            top: Math.max(0, terminalHeight - 1 - dropupHeight),
-            width: 16,
-            height: dropupHeight,
-            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>
-      ) : null}
-      <box
-        style={{
-          flexDirection: "row",
-          height: 1,
-          backgroundColor: tokens.panel,
-          paddingLeft: 1,
-          paddingRight: 1,
-        }}
-      >
-        <box onMouseUp={onToggle}>
-          <text fg={tokens.textDim}>menu</text>
-        </box>
-        {status ? <text fg={tokens.accent}>{`  ${status}`}</text> : null}
-        <box style={{ flexGrow: 1 }} />
-        <text fg={tokens.textDim}>v{version}</text>
+    <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>
   );
 }

package/src/components/PromptDialog.stories.tsx

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

package/src/components/PrototypeSheet.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { PrototypeSheet } from "./PrototypeSheet";
 
-export const meta: StoryMeta = { title: "PrototypeSheet" };
+export const meta: StoryMeta = { title: "Surfaces/PrototypeSheet" };
 
 // The story renderer reports no kitty graphics, so the sheet shows its fallback.
 export const Unsupported: Story = {

package/src/components/ReviewPanel.stories.tsx

@@ -5,7 +5,7 @@ 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 = {

package/src/components/ReviewRail.stories.tsx

@@ -4,7 +4,7 @@ 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 = {

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: () => (