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

package/src/components/ChangesColumn.tsx

@@ -0,0 +1,147 @@
+// 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;
+  width?: number;
+  theme?: Theme;
+}
+
+export function ChangesColumn({
+  open,
+  files = [],
+  selectedPath,
+  onSelectFile,
+  width = 32,
+  theme,
+}: ChangesColumnProps): React.ReactNode {
+  const nodes = useMemo(() => buildFileTree(files), [files]);
+  // 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]);
+
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        width,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: ["left"],
+        borderColor: theme?.border,
+      }}
+    >
+      <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>
+    </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: () => {} };
 

package/src/components/DiffSheet.stories.tsx

@@ -4,7 +4,7 @@ import type { Story, StoryMeta } from "./story";
 import { DiffSheet } from "./DiffSheet";
 import { FIXTURE_PATCH, fixtureDiffRows } from "./story-fixtures";
 
-export const meta: StoryMeta = { title: "DiffSheet" };
+export const meta: StoryMeta = { title: "Surfaces/DiffSheet" };
 
 export const SignedRows: Story = {
   render: () => <DiffSheet rows={fixtureDiffRows()} cursor={0} annotations={[]} />,

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/KeybindsDialog.tsx

@@ -10,13 +10,52 @@ export interface KeybindsDialogProps {
   theme?: Theme;
 }
 
+/** Rows a section takes: its title, its entries, and the blank line after it. */
+function sectionRows(section: CheatsheetSection): number {
+  return 1 + section.entries.length + 1;
+}
+
+/**
+ * Split the sections over `count` columns, filling each column to the
+ * balanced share of rows before starting the next, so a long cheatsheet
+ * reads top to bottom, then left to right.
+ */
+function columnsOf(sections: CheatsheetSection[], count: number): CheatsheetSection[][] {
+  const total = sections.reduce((sum, section) => sum + sectionRows(section), 0);
+  const share = Math.ceil(total / count);
+  const columns: CheatsheetSection[][] = [[]];
+  let filled = 0;
+
+  for (const section of sections) {
+    const column = columns[columns.length - 1]!;
+
+    if (filled > 0 && filled + sectionRows(section) > share && columns.length < count) {
+      columns.push([section]);
+      filled = sectionRows(section);
+    } else {
+      column.push(section);
+      filled += sectionRows(section);
+    }
+  }
+
+  return columns;
+}
+
+const COLUMN_WIDTH = 48;
+
 export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
-  const contentRows =
-    sections.reduce((sum, section) => sum + 1 + section.entries.length + 1, 0) + 1;
-  const width = Math.min(52, terminalWidth - 6);
-  const height = Math.min(terminalHeight - 4, contentRows + 3);
+  const totalRows = sections.reduce((sum, section) => sum + sectionRows(section), 0) + 1;
+  // a cheatsheet taller than the terminal folds into a second column
+  const columnCount =
+    totalRows + 3 > terminalHeight - 4 && terminalWidth >= COLUMN_WIDTH * 2 + 6 ? 2 : 1;
+  const columns = columnsOf(sections, columnCount);
+  const tallest = Math.max(
+    ...columns.map((column) => column.reduce((sum, section) => sum + sectionRows(section), 0)),
+  );
+  const width = Math.min(COLUMN_WIDTH * columnCount + 4, terminalWidth - 6);
+  const height = Math.min(terminalHeight - 4, tallest + 1 + 3);
 
   return (
     <Dialog
@@ -36,19 +75,24 @@ export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.
           paddingTop: 1,
         }}
       >
-        {sections.map((section) => (
-          <box key={section.title} style={{ flexDirection: "column" }}>
-            <text fg={tokens.accent}>{section.title}</text>
-            {section.entries.map((entry, index) => (
-              <text key={index}>
-                <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
-                <span fg={tokens.textMuted}>{entry.label}</span>
-              </text>
-            ))}
-            <text> </text>
-          </box>
-        ))}
-        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row", flexGrow: 1 }}>
+          {columns.map((column, columnIndex) => (
+            <box key={columnIndex} style={{ flexDirection: "column", width: COLUMN_WIDTH }}>
+              {column.map((section) => (
+                <box key={section.title} style={{ flexDirection: "column" }}>
+                  <text fg={tokens.accent}>{section.title}</text>
+                  {section.entries.map((entry, index) => (
+                    <text key={index}>
+                      <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+                      <span fg={tokens.textMuted}>{entry.label}</span>
+                    </text>
+                  ))}
+                  <text> </text>
+                </box>
+              ))}
+            </box>
+          ))}
+        </box>
         <box style={{ flexDirection: "row" }}>
           <box style={{ flexGrow: 1 }} />
           <text fg={tokens.textDim}>[esc]</text>

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 = {