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

package/src/components/InboxList.tsx

@@ -1,39 +1,171 @@
 /**
- * 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.
+ * 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 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 type { InboxRow } from "./session-tree";
+import { fadeTitle } from "./fade-title";
+import { threadTitle, type InboxRow } from "./session-tree";
 
 export interface InboxListProps {
   rows: InboxRow[];
   cursor: number;
   /** 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 selected row's [delete] button). */
+  /** 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({
   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 }}>
@@ -58,30 +190,27 @@ export function InboxList({
             );
           }
 
-          const selected =
-            activeId !== undefined ? activeId === row.session.id : row.selectionIndex === cursor;
-          const title = row.session.artifact.meta.title ?? row.session.id;
+          const id = row.session.id;
+          const title = threadTitle(row.session);
 
           return (
-            <box
+            <ThreadRow
               key={row.id}
-              onMouseUp={onSelect ? () => onSelect(row.session.id) : undefined}
-              style={{
-                flexDirection: "row",
-                backgroundColor: selected ? tokens.elevated : undefined,
-              }}
-            >
-              <text fg={selected ? tokens.accent : tokens.textMuted}>
-                {"   "}
-                {title}
-              </text>
-              <box style={{ flexGrow: 1 }} />
-              {selected && onRequestDelete ? (
-                <Button onPress={() => onRequestDelete(row.session.id, title)} theme={theme}>
-                  {" [delete] "}
-                </Button>
-              ) : null}
-            </box>
+              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/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 },
+};

package/src/components/PanelColumn.tsx

@@ -0,0 +1,95 @@
+// A workbench panel: one full-height grid column with a file-tab header cell on
+// top and a body below. The header row carries the tabs on the left and optional
+// controls on the right, underlined by a thin rule in the same divider gray so the
+// header bottoms join the side rules into one grid. The side border runs from the top.
+
+import React, { useState } from "react";
+import type { Theme } from "../theme";
+import { NERD, HEADER_UNDERLINE_CHARS } from "./primitives/icons";
+
+export interface FileTabProps {
+  label: string;
+  active?: boolean;
+  /** When set, a close control reveals on hover (a disposable tab). */
+  onClose?: () => void;
+  theme?: Theme;
+}
+
+/** A file tab: the label in the accent when active, with a hover-revealed close. */
+export function FileTab({ label, active, onClose, theme }: FileTabProps): React.ReactNode {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <box
+      style={{ flexDirection: "row", paddingRight: 1 }}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+    >
+      <text fg={active ? theme?.accent : theme?.textDim}>{label}</text>
+      {onClose ? (
+        <box onMouseUp={onClose} style={{ paddingLeft: 1 }}>
+          <text fg={theme?.textDim}>{hovered ? NERD.close : " "}</text>
+        </box>
+      ) : null}
+    </box>
+  );
+}
+
+export interface PanelColumnProps {
+  /** Fixed column width; omit for the flex-growing center panel. */
+  width?: number;
+  /** Draw the divider on this side (the sidebar borders right, the rest border left). */
+  border?: "left" | "right";
+  /** Tabs and controls for the header cell. */
+  header: React.ReactNode;
+  /** Right-aligned header controls (toggles, search). */
+  headerRight?: React.ReactNode;
+  children: React.ReactNode;
+  theme?: Theme;
+}
+
+export function PanelColumn({
+  width,
+  border,
+  header,
+  headerRight,
+  children,
+  theme,
+}: PanelColumnProps): React.ReactNode {
+  return (
+    <box
+      style={{
+        width,
+        // grow panes split evenly and clip wide content (a long diff line) rather than stretching
+        flexGrow: width === undefined ? 1 : undefined,
+        flexBasis: width === undefined ? 0 : undefined,
+        minWidth: 0,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: border ? [border] : [],
+        borderColor: theme?.border,
+      }}
+    >
+      <box
+        customBorderChars={HEADER_UNDERLINE_CHARS}
+        style={{
+          flexDirection: "row",
+          height: 2,
+          paddingLeft: 1,
+          // right controls need the same breathing room as the left, or the rightmost icon renders
+          // squeezed against the terminal's last column
+          paddingRight: 1,
+          backgroundColor: theme?.panel,
+          borderStyle: "single",
+          border: ["bottom"],
+          borderColor: theme?.border,
+        }}
+      >
+        {header}
+        <box style={{ flexGrow: 1 }} />
+        {headerRight}
+      </box>
+      <box style={{ flexGrow: 1, flexDirection: "column" }}>{children}</box>
+    </box>
+  );
+}

package/src/components/ProjectTreeView.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ProjectTreeView } from "./ProjectTreeView";
+
+export const meta: StoryMeta = { title: "Surfaces/ProjectTreeView" };
+
+const SAMPLE = [
+  "packages/client/src/App.tsx",
+  "packages/client/src/components/AppShell.tsx",
+  "packages/daemon/src/api.ts",
+  "README.md",
+];
+
+export const Loaded: Story = {
+  render: () => (
+    <ProjectTreeView
+      loadFiles={() => Promise.resolve(SAMPLE)}
+      onSelectFile={() => {}}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 40, height: 16 },
+};

package/src/components/ProjectTreeView.test.tsx

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ProjectTreeView } from "./ProjectTreeView";
+import { clickText, waitForText } from "../test-support";
+import { DARK } from "../theme";
+
+test("renders the loaded files as a tree and opens a file on click", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ProjectTreeView
+      loadFiles={() => Promise.resolve(["src/App.tsx", "README.md"])}
+      onSelectFile={(path) => opened.push(path)}
+      theme={DARK}
+    />,
+    { width: 40, height: 16 },
+  );
+
+  await waitForText(setup, "README.md");
+  await clickText(setup, "README.md");
+
+  expect(opened).toContain("README.md");
+});
+
+test("shows an empty hint when there are no files", async () => {
+  const setup = await testRender(
+    <ProjectTreeView loadFiles={() => Promise.resolve([])} onSelectFile={() => {}} theme={DARK} />,
+    { width: 40, height: 8 },
+  );
+
+  await waitForText(setup, "empty");
+});