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

package/src/components/InboxList.tsx

@@ -1,61 +1,216 @@
 /**
- * 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 Pinned / Projects / Threads tree. Selection stays
+ * with the keyboard grammar - the cursor indexes the flat thread order and this
+ * component renders the snapshot. A hovered or selected thread reveals a kebab
+ * that opens an inline pin / rename / delete menu; long titles fade on the right
+ * instead of wrapping. App supplies the surrounding chrome.
  */
 
-import React from "react";
-import type { ReviewSession } from "@cueloop/schema";
+import React, { useState } from "react";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
-import { Button } from "./primitives/Button";
+import { IconButton } from "./primitives/IconButton";
+import { NERD } from "./primitives/icons";
+import { fadeTitle } from "./fade-title";
+import { threadTitle, 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;
+  /** Ids of pinned threads; a pinned row carries the pin glyph and the menu offers Unpin. */
+  pinnedIds?: ReadonlySet<string>;
+  /** The column width, so titles fade to fit one line. */
+  width?: number;
+  /** Open a thread by clicking its row (the left sidebar case). */
+  onSelect?: (sessionId: string) => void;
+  /** Ask to delete a thread (the menu's Delete, wired to the confirm dialog). */
   onRequestDelete?: (id: string, title: string) => void;
+  /** Toggle a thread's pinned state (the menu's Pin/Unpin). */
+  onPin?: (id: string) => void;
+  /** Rename a thread's title (the menu's Rename). */
+  onRename?: (id: string, title: string) => void;
   theme?: Theme;
 }
 
+function ActionsMenu({
+  pinned,
+  onPin,
+  onRename,
+  onDelete,
+  tokens,
+}: {
+  pinned: boolean;
+  onPin?: () => void;
+  onRename?: () => void;
+  onDelete?: () => void;
+  tokens: Theme;
+}): React.ReactNode {
+  const item = (
+    glyph: string,
+    label: string,
+    color: string,
+    onPick?: () => void,
+  ): React.ReactNode =>
+    onPick !== undefined ? (
+      <box onMouseUp={onPick} style={{ flexDirection: "row", paddingLeft: 4, paddingRight: 1 }}>
+        <text fg={color}>{`${glyph} ${label}`}</text>
+      </box>
+    ) : null;
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        marginLeft: 3,
+        borderStyle: "single",
+        border: ["left"],
+        borderColor: tokens.border,
+      }}
+    >
+      {item(NERD.pin, pinned ? "Unpin" : "Pin", tokens.text, onPin)}
+      {item(NERD.file, "Rename", tokens.text, onRename)}
+      {item(NERD.close, "Delete", tokens.red, onDelete)}
+    </box>
+  );
+}
+
+interface ThreadRowProps {
+  title: string;
+  selected: boolean;
+  pinned: boolean;
+  titleWidth: number;
+  menuOpen: boolean;
+  onToggleMenu: () => void;
+  onSelect?: () => void;
+  onPin?: () => void;
+  onRename?: () => void;
+  onDelete?: () => void;
+  tokens: Theme;
+  theme?: Theme;
+}
+
+function ThreadRow(props: ThreadRowProps): React.ReactNode {
+  const { title, selected, pinned, titleWidth, menuOpen, onToggleMenu, tokens, theme } = props;
+  const [hovered, setHovered] = useState(false);
+  // the tail fades toward the row's own background, so it masks out instead of
+  // leaving a colored band over the selected (elevated) or hovered (panel) row
+  const rowBackground = selected ? tokens.elevated : hovered ? tokens.panel : tokens.background;
+  const segments = fadeTitle(
+    title,
+    titleWidth,
+    selected ? tokens.accent : tokens.textMuted,
+    rowBackground,
+  );
+  const hasActions =
+    props.onPin !== undefined || props.onRename !== undefined || props.onDelete !== undefined;
+
+  return (
+    <box style={{ flexDirection: "column" }} onMouseOut={() => setHovered(false)}>
+      <box
+        onMouseUp={props.onSelect}
+        onMouseOver={() => setHovered(true)}
+        style={{
+          flexDirection: "row",
+          backgroundColor: selected ? tokens.elevated : hovered ? tokens.panel : undefined,
+        }}
+      >
+        <text>
+          <span fg={tokens.textDim}>{pinned ? ` ${NERD.pin} ` : "   "}</span>
+          {segments.map((segment, index) => (
+            <span key={index} fg={segment.fg}>
+              {segment.text}
+            </span>
+          ))}
+        </text>
+        <box style={{ flexGrow: 1 }} />
+        {(hovered || menuOpen) && hasActions ? (
+          <IconButton
+            glyph={NERD.kebab}
+            active={menuOpen}
+            onPress={onToggleMenu}
+            marginRight={1}
+            theme={theme}
+          />
+        ) : null}
+      </box>
+      {menuOpen ? (
+        <ActionsMenu
+          pinned={pinned}
+          onPin={props.onPin}
+          onRename={props.onRename}
+          onDelete={props.onDelete}
+          tokens={tokens}
+        />
+      ) : null}
+    </box>
+  );
+}
+
 export function InboxList({
-  inbox,
+  rows,
   cursor,
+  activeId,
+  pinnedIds,
+  width = 30,
+  onSelect,
   onRequestDelete,
+  onPin,
+  onRename,
   theme,
 }: InboxListProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+  const [actionsForId, setActionsForId] = useState<string | null>(null);
+  // leave room for the 3-char prefix, the border, and the hover kebab so a row
+  // never wraps: the title fades to fit whatever is left
+  const titleWidth = Math.max(8, width - 9);
+  const closeMenu = (): void => setActionsForId(null);
 
   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>
+            );
+          }
 
-          return (
-            <box
-              key={session.id}
-              style={{
-                flexDirection: "row",
-                backgroundColor: selected ? tokens.cursorBackground : undefined,
-              }}
-            >
-              <text fg={selected ? tokens.text : tokens.textMuted}>
-                {selected ? "> " : "  "}
-                {title} · {session.workspace.branch} · {session.artifact.type}
+          if (row.kind === "project") {
+            return (
+              <text key={row.id}>
+                <span fg={tokens.blue}>{` ${NERD.folderOpen} `}</span>
+                <span fg={tokens.textMuted}>{row.label}</span>
               </text>
-              <box style={{ flexGrow: 1 }} />
-              {selected && onRequestDelete ? (
-                <Button onPress={() => onRequestDelete(session.id, title)} theme={theme}>
-                  {" [delete] "}
-                </Button>
-              ) : null}
-            </box>
+            );
+          }
+
+          const id = row.session.id;
+          const title = threadTitle(row.session);
+
+          return (
+            <ThreadRow
+              key={row.id}
+              title={title}
+              selected={activeId !== undefined ? activeId === id : row.selectionIndex === cursor}
+              pinned={pinnedIds?.has(id) ?? false}
+              titleWidth={titleWidth}
+              menuOpen={actionsForId === id}
+              onToggleMenu={() => setActionsForId(actionsForId === id ? null : id)}
+              onSelect={onSelect ? () => onSelect(id) : undefined}
+              onPin={onPin ? () => (onPin(id), closeMenu()) : undefined}
+              onRename={onRename ? () => (onRename(id, title), closeMenu()) : undefined}
+              onDelete={
+                onRequestDelete ? () => (onRequestDelete(id, title), closeMenu()) : undefined
+              }
+              tokens={tokens}
+              theme={theme}
+            />
           );
         })
       )}

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/PaneGrid.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PaneGrid } from "./PaneGrid";
+
+export const meta: StoryMeta = { title: "Layout/PaneGrid" };
+
+function Sidebar(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textDim}>Projects</text>
+      <text fg={DARK.text}> cueloop</text>
+      <box style={{ backgroundColor: DARK.elevated }}>
+        <text fg={DARK.accent}> Read Cueloop Repository</text>
+      </box>
+      <text> </text>
+      <text fg={DARK.textDim}>Threads</text>
+      <text fg={DARK.textMuted}> Welcome to cueloop</text>
+    </box>
+  );
+}
+
+function Main(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>read the repo</text>
+      <text> </text>
+      <text fg={DARK.textMuted}>Repository context loaded. main is clean.</text>
+      <text> </text>
+      <text fg={DARK.text}>Core architecture</text>
+      <text fg={DARK.textMuted}> - packages/schema is the dependency root</text>
+      <text fg={DARK.textMuted}> - packages/daemon owns session state</text>
+    </box>
+  );
+}
+
+function Inspector(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>cueloop/main</text>
+      <text fg={DARK.textDim}> No changes</text>
+    </box>
+  );
+}
+
+function Header(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textMuted}>Read Cueloop Repository</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>markdown.test.ts</text>
+    </box>
+  );
+}
+
+function Footer(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textDim}>cueloop / main</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>Fable 5</text>
+    </box>
+  );
+}
+
+export const ThreePane: Story = {
+  render: () => (
+    <PaneGrid
+      sidebar={<Sidebar />}
+      main={<Main />}
+      mainHeader={<Header />}
+      inspector={<Inspector />}
+      footer={<Footer />}
+    />
+  ),
+  expectedColors: [DARK.border, DARK.accent],
+  size: { width: 120, height: 28 },
+};
+
+export const SidebarAndMain: Story = {
+  render: () => <PaneGrid sidebar={<Sidebar />} main={<Main />} />,
+  expectedColors: [DARK.border],
+  size: { width: 90, height: 20 },
+};

package/src/components/PaneGrid.tsx

@@ -0,0 +1,128 @@
+// A generic pane grid: a row of columns, each stacking a header cell over its body, with the
+// vertical rules run full height and every header cell's bottom rule joined into one horizontal
+// line. Rules only - no enclosing frames. This is the layout primitive for dev surfaces (the
+// storybook runner); the product's four-pane workbench is AppShell.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import type { BorderSides } from "@opentui/core";
+
+export interface PaneGridProps {
+  headerHeight?: number;
+  sidebar?: React.ReactNode;
+  sidebarHeader?: React.ReactNode;
+  sidebarWidth?: number;
+  main: React.ReactNode;
+  mainHeader?: React.ReactNode;
+  inspector?: React.ReactNode;
+  inspectorHeader?: React.ReactNode;
+  inspectorWidth?: number;
+  footer?: React.ReactNode;
+  theme?: Theme;
+}
+
+interface PaneColumnProps {
+  width?: number;
+  grow?: boolean;
+  side?: BorderSides;
+  header: React.ReactNode;
+  body: React.ReactNode;
+  headerHeight: number;
+  theme: Theme;
+}
+
+function PaneColumn({
+  width,
+  grow,
+  side,
+  header,
+  body,
+  headerHeight,
+  theme,
+}: PaneColumnProps): React.ReactNode {
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        ...(grow ? { flexGrow: 1 } : { width }),
+        borderStyle: "single",
+        border: side ? [side] : [],
+        borderColor: theme.border,
+      }}
+    >
+      <box
+        style={{
+          height: headerHeight,
+          borderStyle: "single",
+          border: ["bottom"],
+          borderColor: theme.border,
+        }}
+      >
+        {header}
+      </box>
+      <box style={{ flexGrow: 1 }}>{body}</box>
+    </box>
+  );
+}
+
+export function PaneGrid({
+  headerHeight = 3,
+  sidebar,
+  sidebarHeader,
+  sidebarWidth = 28,
+  main,
+  mainHeader,
+  inspector,
+  inspectorHeader,
+  inspectorWidth = 40,
+  footer,
+  theme,
+}: PaneGridProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.background,
+      }}
+    >
+      <box style={{ flexDirection: "row", flexGrow: 1 }}>
+        {sidebar !== undefined ? (
+          <PaneColumn
+            width={sidebarWidth}
+            side="right"
+            header={sidebarHeader}
+            body={sidebar}
+            headerHeight={headerHeight}
+            theme={tokens}
+          />
+        ) : null}
+        <PaneColumn
+          grow
+          header={mainHeader}
+          body={main}
+          headerHeight={headerHeight}
+          theme={tokens}
+        />
+        {inspector !== undefined ? (
+          <PaneColumn
+            width={inspectorWidth}
+            side="left"
+            header={inspectorHeader}
+            body={inspector}
+            headerHeight={headerHeight}
+            theme={tokens}
+          />
+        ) : null}
+      </box>
+      {footer !== undefined ? (
+        <box style={{ borderStyle: "single", border: ["top"], borderColor: tokens.border }}>
+          {footer}
+        </box>
+      ) : null}
+    </box>
+  );
+}

package/src/components/PanelColumn.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PanelColumn, FileTab } from "./PanelColumn";
+
+export const meta: StoryMeta = { title: "Surfaces/PanelColumn" };
+
+export const WithFileTab: Story = {
+  render: () => (
+    <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>
+      <PanelColumn
+        width={40}
+        border="left"
+        header={<FileTab label="Welcome" active onClose={() => {}} theme={DARK} />}
+        theme={DARK}
+      >
+        <box style={{ paddingLeft: 1, paddingTop: 1 }}>
+          <text fg={DARK.textDim}>panel body</text>
+        </box>
+      </PanelColumn>
+    </box>
+  ),
+  expectedColors: [DARK.accent, DARK.border],
+  size: { width: 50, height: 8 },
+};