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

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");
+});

package/src/components/ProjectTreeView.tsx

@@ -0,0 +1,82 @@
+// The Project pane in tree mode: the workspace's tracked files as a collapsible directory tree.
+// Folders start collapsed and expand on click; a file click opens it as a tab. The caller keys this
+// on the session id so switching sessions remounts it and never shows the previous repository's paths.
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Tree } from "./primitives/Tree";
+import { buildPathTree } from "./file-tree";
+
+export interface ProjectTreeViewProps {
+  loadFiles: () => Promise<string[]>;
+  onSelectFile: (path: string) => void;
+  theme?: Theme;
+}
+
+export function ProjectTreeView({
+  loadFiles,
+  onSelectFile,
+  theme,
+}: ProjectTreeViewProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const [paths, setPaths] = useState<readonly string[] | null>(null);
+  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(new Set());
+  const nodes = useMemo(() => (paths ? buildPathTree(paths) : []), [paths]);
+  const loadRef = useRef(loadFiles);
+  useEffect(() => {
+    loadRef.current = loadFiles;
+  });
+
+  useEffect(() => {
+    let alive = true;
+    void loadRef.current().then(
+      (files) => {
+        if (alive) setPaths(files);
+      },
+      () => {
+        if (alive) setPaths([]);
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  if (paths === null) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>loading...</text>
+      </box>
+    );
+  }
+  if (paths.length === 0) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>empty</text>
+      </box>
+    );
+  }
+
+  return (
+    <scrollbox style={{ flexGrow: 1 }} focused={false}>
+      <Tree
+        nodes={nodes}
+        expandedIds={expandedIds}
+        onSelect={onSelectFile}
+        onToggle={(id) =>
+          setExpandedIds((current) => {
+            const next = new Set(current);
+
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+
+            return next;
+          })
+        }
+        theme={theme}
+      />
+    </scrollbox>
+  );
+}

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

@@ -46,7 +46,14 @@ export function PromptDialog({
   if (!isOpen) return null;
 
   return (
-    <Dialog isOpen title={title} width={Math.min(54, terminalWidth - 6)} height={7} theme={theme}>
+    <Dialog
+      isOpen
+      title={title}
+      width={Math.min(54, terminalWidth - 6)}
+      height={7}
+      background={tokens.elevated}
+      theme={theme}
+    >
       <box
         style={{
           flexDirection: "column",

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

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { RootOverlayProvider, useRootOverlay } from "./RootOverlay";
+
+export const meta: StoryMeta = { title: "Layout/RootOverlay" };
+
+// The provider renders whatever a descendant pushes after the rest of the tree, so it draws on top.
+function OverlayDemo(): React.ReactNode {
+  const { setOverlay } = useRootOverlay();
+
+  useEffect(() => {
+    setOverlay(
+      <box
+        style={{
+          position: "absolute",
+          top: 2,
+          left: 6,
+          borderStyle: "single",
+          borderColor: DARK.border,
+          backgroundColor: DARK.elevated,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <text fg={DARK.text}>floating overlay</text>
+      </box>,
+    );
+  }, [setOverlay]);
+
+  return <text fg={DARK.textDim}>base content under the overlay</text>;
+}
+
+export const FloatingNode: Story = {
+  render: () => (
+    <RootOverlayProvider>
+      <box style={{ padding: 1, backgroundColor: DARK.panel }}>
+        <OverlayDemo />
+      </box>
+    </RootOverlayProvider>
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 40, height: 6 },
+};

package/src/components/RootOverlay.tsx

@@ -0,0 +1,35 @@
+// A root overlay slot: OpenTUI has no z-index, so an overlay drawn inside a pane is sliced by the
+// next pane's border. Anything pushed here renders after every pane (last in draw order), so it sits
+// on top of the whole shell - the same trick the tooltip uses. Callers position their node with
+// absolute screen coordinates.
+
+import React, { createContext, useContext, useMemo, useState } from "react";
+
+interface RootOverlayApi {
+  setOverlay: (node: React.ReactNode) => void;
+  clearOverlay: () => void;
+}
+
+const RootOverlayContext = createContext<RootOverlayApi>({
+  setOverlay: () => {},
+  clearOverlay: () => {},
+});
+
+export function useRootOverlay(): RootOverlayApi {
+  return useContext(RootOverlayContext);
+}
+
+export function RootOverlayProvider({ children }: { children: React.ReactNode }): React.ReactNode {
+  const [overlay, setOverlay] = useState<React.ReactNode>(null);
+  const api = useMemo<RootOverlayApi>(
+    () => ({ setOverlay, clearOverlay: () => setOverlay(null) }),
+    [],
+  );
+
+  return (
+    <RootOverlayContext.Provider value={api}>
+      {children}
+      {overlay}
+    </RootOverlayContext.Provider>
+  );
+}

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,76 @@ 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}
+            hideIcons
+            onSelect={onCategorySelect}
+            onToggle={onCategorySelect}
+            theme={theme}
+          />
         </box>
-        <box style={{ width: 1, backgroundColor: tokens.border }} />
+        <box style={{ borderStyle: "single", border: ["left"], borderColor: 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: () => (