@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.71

package/src/components/SettingsDialog.tsx

@@ -0,0 +1,195 @@
+/**
+ * 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 { ScrollArea } from "./ScrollArea";
+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 {
+  id: string;
+  name: string;
+  description: string;
+  rows: SettingsRowDescriptor[];
+  /** A bespoke body (e.g. the quick-actions editor) rendered instead of typed rows. */
+  customBody?: React.ReactNode;
+}
+
+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";
+  onCategorySelect: (categoryId: string) => void;
+  onRowActivate: (row: SettingsRowDescriptor) => void;
+  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 (
+    <ScrollArea>
+      {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>
+      ))}
+    </ScrollArea>
+  );
+}
+
+export function SettingsDialog({
+  isOpen,
+  version,
+  categories,
+  values,
+  keybindsSections,
+  activeCategoryId,
+  activeRowIndex,
+  activeZone,
+  onCategorySelect,
+  onRowActivate,
+  theme,
+}: SettingsDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+
+  if (!isOpen) return null;
+  const category =
+    categories.find((candidate) => candidate.id === activeCategoryId) ?? categories[0];
+
+  if (!category) return null;
+  const onKeybinds = category.id === KEYBINDS_CATEGORY_ID;
+
+  return (
+    <Dialog
+      isOpen
+      title=" Settings "
+      width={Math.min(76, terminalWidth - 6)}
+      height={Math.min(22, terminalHeight - 4)}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box style={{ flexDirection: "row", flexGrow: 1 }}>
+        <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={{ 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 }} />
+          {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}
+                    />
+                  );
+                }
+
+                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, paddingRight: 1 }}>
+        <text fg={tokens.textDim}>
+          {activeZone === "nav"
+            ? "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

@@ -0,0 +1,18 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { CycleRow, TextRow, ToggleRow } from "./SettingsRows";
+
+export const meta: StoryMeta = { title: "Chrome/SettingsRows" };
+
+export const AllKinds: Story = {
+  render: () => (
+    <box style={{ flexDirection: "column", width: 50 }}>
+      <ToggleRow label="Line numbers" value={true} isActive={false} onPress={() => {}} />
+      <ToggleRow label="Hide whitespace" value={false} isActive={true} onPress={() => {}} />
+      <CycleRow label="Palette" value="dark" isActive={false} onPress={() => {}} />
+      <TextRow label="Vault path" value="~/vaults/notes" isActive={false} onPress={() => {}} />
+    </box>
+  ),
+  expectedColors: [DARK.green, DARK.accent, DARK.border],
+};

package/src/components/SettingsRows.tsx

@@ -0,0 +1,112 @@
+/**
+ * Typed settings rows for the settings dialog: toggle (on/off), cycle
+ * (enumerated options), and text (freeform value). Every row is one line -
+ * label column left, value right - and presses go through `onPress` so mouse
+ * and keyboard activation share one path.
+ */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+export interface SettingsRowDescriptor {
+  key: string;
+  label: string;
+  kind: "toggle" | "cycle" | "text";
+  options?: string[];
+  hint?: string;
+}
+
+interface RowShellProps {
+  label: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+function RowShell({ label, isActive, onPress, theme, children }: RowShellProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: 1,
+        backgroundColor: isActive ? tokens.border : undefined,
+      }}
+      onMouseUp={onPress}
+    >
+      <box style={{ width: 26, paddingLeft: 1 }}>
+        <text fg={isActive ? tokens.text : tokens.textMuted}>{label}</text>
+      </box>
+      {children}
+    </box>
+  );
+}
+
+export interface ToggleRowProps {
+  label: string;
+  value: boolean;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function ToggleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: ToggleRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={value ? tokens.green : tokens.accent}>{value ? "on" : "off"}</text>
+    </RowShell>
+  );
+}
+
+export interface CycleRowProps {
+  label: string;
+  value: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function CycleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: CycleRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={tokens.accent}>{value}</text>
+    </RowShell>
+  );
+}
+
+export interface TextRowProps {
+  label: string;
+  value: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function TextRow({ label, value, isActive, onPress, theme }: TextRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={tokens.accent}>{value}</text>
+    </RowShell>
+  );
+}

package/src/components/ShellHeader.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ShellHeader } from "./ShellHeader";
+import { NERD } from "./primitives/icons";
+
+export const meta: StoryMeta = { title: "Layout/ShellHeader" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const ReviewSurface: Story = {
+  render: () => (
+    <Frame>
+      <ShellHeader
+        leftIcons={[{ glyph: NERD.settings }]}
+        leftLabel="Read Cueloop Repository"
+        tabs={[{ label: "Changes", active: true }]}
+        rightIcons={[
+          { glyph: NERD.expand },
+          { glyph: NERD.diff, active: true },
+          { glyph: NERD.listTree },
+        ]}
+        onToggleSidebar={() => {}}
+        onToggleInspector={() => {}}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted],
+  size: { width: 120, height: 3 },
+};
+
+export const InspectorCollapsed: Story = {
+  render: () => (
+    <Frame>
+      <ShellHeader
+        leftIcons={[{ glyph: NERD.settings }]}
+        leftLabel="Read Cueloop Repository"
+        rightIcons={[{ glyph: NERD.search }, { glyph: NERD.expand }]}
+        onToggleSidebar={() => {}}
+        sidebarOpen={false}
+        onToggleInspector={() => {}}
+        inspectorOpen={false}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.textMuted],
+  size: { width: 120, height: 3 },
+};

package/src/components/ShellHeader.tsx

@@ -0,0 +1,137 @@
+// The app shell's top bar: left panel toggle + icons + label, an optional title, right icons + panel toggle.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import { NERD } from "./primitives/icons";
+
+export interface ShellTab {
+  label: string;
+  active?: boolean;
+}
+
+// A header icon; active paints it in the brand accent to mark the current view or mode.
+export interface ShellIcon {
+  glyph: string;
+  active?: boolean;
+  onPress?: () => void;
+}
+
+export interface ShellHeaderProps {
+  leftIcons?: readonly ShellIcon[];
+  leftLabel?: string;
+  titleIcon?: string;
+  title?: string;
+  tabs?: readonly ShellTab[];
+  rightIcons?: readonly ShellIcon[];
+  sidebarOpen?: boolean;
+  onToggleSidebar?: () => void;
+  inspectorOpen?: boolean;
+  onToggleInspector?: () => void;
+  theme?: Theme;
+}
+
+function IconView({
+  icon,
+  tokens,
+  marginRight,
+}: {
+  icon: ShellIcon;
+  tokens: Theme;
+  marginRight: number;
+}): React.ReactNode {
+  const color = icon.active ? tokens.accent : tokens.textMuted;
+
+  // alignSelf center keeps the clickable box on the same row as sibling icons
+  return (
+    <box onMouseUp={icon.onPress} style={{ alignSelf: "center", marginRight }}>
+      <text fg={color}>{icon.glyph}</text>
+    </box>
+  );
+}
+
+export function ShellHeader({
+  leftIcons = [],
+  leftLabel,
+  titleIcon,
+  title,
+  tabs = [],
+  rightIcons = [],
+  sidebarOpen = true,
+  onToggleSidebar,
+  inspectorOpen = true,
+  onToggleInspector,
+  theme,
+}: ShellHeaderProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: "100%",
+        alignItems: "center",
+        paddingLeft: 2,
+        paddingRight: 2,
+      }}
+    >
+      <box style={{ flexDirection: "row", alignItems: "center" }}>
+        {onToggleSidebar !== undefined ? (
+          <IconView
+            icon={{
+              glyph: sidebarOpen ? NERD.sidebarLeft : NERD.sidebarLeftOff,
+              onPress: onToggleSidebar,
+            }}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ) : null}
+        {leftIcons.map((icon, index) => (
+          <IconView
+            key={`left-${index}-${icon.glyph}`}
+            icon={icon}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ))}
+        {leftLabel !== undefined ? (
+          <text fg={tokens.textMuted}>
+            {leftLabel}
+            {"  "}
+          </text>
+        ) : null}
+        {titleIcon !== undefined ? <text fg={tokens.textDim}>{titleIcon} </text> : null}
+        {title !== undefined ? <text fg={tokens.text}>{title}</text> : null}
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box style={{ flexDirection: "row", alignItems: "center" }}>
+        {tabs.map((tab, index) => (
+          <text
+            key={`tab-${index}-${tab.label}`}
+            fg={tab.active ? tokens.accent : tokens.textMuted}
+          >
+            {tab.label}
+            {"   "}
+          </text>
+        ))}
+        {rightIcons.map((icon, index) => (
+          <IconView
+            key={`right-${index}-${icon.glyph}`}
+            icon={icon}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ))}
+        {onToggleInspector !== undefined ? (
+          <IconView
+            icon={{
+              glyph: inspectorOpen ? NERD.sidebarRight : NERD.sidebarRightOff,
+              onPress: onToggleInspector,
+            }}
+            tokens={tokens}
+            marginRight={0}
+          />
+        ) : null}
+      </box>
+    </box>
+  );
+}

package/src/components/ThreadFooter.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ThreadFooter } from "./ThreadFooter";
+
+export const meta: StoryMeta = { title: "Chrome/ThreadFooter" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const Default: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="main" onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted],
+  size: { width: 80, height: 2 },
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="design/tui" canSubmit={false} onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 2 },
+};

package/src/components/ThreadFooter.test.tsx

@@ -0,0 +1,31 @@
+/** The thread footer keeps its repo/branch context on one line: a long branch truncates to fit rather
+ * than wrapping and pushing the send control onto a second row. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ThreadFooter } from "./ThreadFooter";
+import { DARK } from "../theme";
+
+test("a long branch truncates on one line and keeps the send control in place", async () => {
+  const setup = await testRender(
+    <box style={{ width: 60, height: 3, backgroundColor: DARK.background }}>
+      <box style={{ flexGrow: 1 }} />
+      <ThreadFooter
+        repo="cueloop"
+        branch="design/tui-tree-and-edgy-really-long-name"
+        onSubmit={() => {}}
+        theme={DARK}
+      />
+    </box>,
+    { width: 60, height: 3 },
+  );
+  await setup.renderOnce();
+
+  const lines = setup.captureCharFrame().split("\n");
+  const footerRow = lines.find((line) => line.includes("cueloop"))!;
+  // the repo/branch context and the send control share the single footer row
+  expect(footerRow).toContain("send message");
+  // the branch is clipped, not wrapped: it never reaches its tail on a second row
+  expect(setup.captureCharFrame()).not.toContain("long-name");
+});

package/src/components/ThreadFooter.tsx

@@ -0,0 +1,54 @@
+// The thread's bottom band: a header-like bar under the thread column, or the
+// Changes column when a zoom drops the thread column. It carries the repo/branch
+// context on the left and a written, clickable "Send message" control on the right.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import { NERD } from "./primitives/icons";
+
+export interface ThreadFooterProps {
+  repo: string;
+  branch: string;
+  onSubmit?: () => void;
+  /** When false the send control dims and does not fire (e.g. an observer). */
+  canSubmit?: boolean;
+  theme?: Theme;
+}
+
+export function ThreadFooter({
+  repo,
+  branch,
+  onSubmit,
+  canSubmit = true,
+  theme,
+}: ThreadFooterProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: 2,
+        alignItems: "center",
+        paddingLeft: 1,
+        paddingRight: 1,
+        backgroundColor: tokens.panel,
+        borderStyle: "single",
+        border: ["top"],
+        borderColor: tokens.border,
+      }}
+    >
+      <box style={{ flexShrink: 1, minWidth: 0, marginRight: 2 }}>
+        <text truncate>
+          <span fg={tokens.blue}>{`${NERD.folderClosed} `}</span>
+          <span fg={tokens.textMuted}>{repo}</span>
+          <span fg={tokens.textDim}>{` / ${branch}`}</span>
+        </text>
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box onMouseUp={canSubmit ? onSubmit : undefined} style={{ flexShrink: 0 }}>
+        <text fg={canSubmit ? tokens.accent : tokens.textDim}>send message</text>
+      </box>
+    </box>
+  );
+}

package/src/components/ThreadTree.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ThreadTree } from "./ThreadTree";
+import { groupInbox } from "./session-tree";
+import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "Surfaces/ThreadTree" };
+
+/** ThreadTree is the body under App's header/menu chrome; a frame gives it height. */
+function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ flexDirection: "column", width: "100%", height: "100%" }}>{children}</box>;
+}
+
+export const TwoPending: Story = {
+  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>
+        <ThreadTree rows={rows} cursor={0} />
+      </BodyFrame>
+    );
+  },
+  expectedColors: [DARK.accent],
+  size: { width: 80, height: 12 },
+};
+
+export const Empty: Story = {
+  render: () => (
+    <BodyFrame>
+      <ThreadTree rows={[]} cursor={0} />
+    </BodyFrame>
+  ),
+  size: { width: 80, height: 8 },
+};