@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.90

package/src/components/primitives/IconButton.tsx

@@ -0,0 +1,62 @@
+// A clickable single-glyph button for header and footer controls: an icon in a
+// box that calls onPress, painted in the brand accent when active. alignSelf
+// center keeps it on the same row as sibling text or icons.
+
+import React from "react";
+import type { MouseEvent as TerminalMouseEvent } from "@opentui/core";
+import { DARK, type Theme } from "../../theme";
+import { useTooltip } from "../Tooltip";
+
+export interface IconButtonProps {
+  glyph: string;
+  onPress?: () => void;
+  /** Paint the glyph in the brand accent to mark the current mode or view. */
+  active?: boolean;
+  /** Dim the glyph and ignore presses. */
+  disabled?: boolean;
+  /** Override the resolved foreground (wins over active/disabled colouring). */
+  color?: string;
+  /** Label shown on hover, surfaced at the screen root so a tiny header cell cannot clip it. */
+  tip?: string;
+  marginLeft?: number;
+  marginRight?: number;
+  theme?: Theme;
+}
+
+export function IconButton({
+  glyph,
+  onPress,
+  active,
+  disabled,
+  color,
+  tip,
+  marginLeft,
+  marginRight,
+  theme,
+}: IconButtonProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const resolved = color ?? (disabled ? tokens.textDim : active ? tokens.accent : tokens.textMuted);
+  const { showTooltip, hideTooltip } = useTooltip();
+  // a button press is its own action - never let it bubble to a clickable row behind it
+  const handleMouseUp = (event: TerminalMouseEvent): void => {
+    event.stopPropagation();
+    hideTooltip();
+    onPress?.();
+  };
+
+  return (
+    <box
+      onMouseUp={disabled ? undefined : handleMouseUp}
+      onMouseOver={tip ? (event) => showTooltip(tip, event.x, event.y) : undefined}
+      onMouseOut={tip ? hideTooltip : undefined}
+      style={{
+        flexShrink: 0,
+        alignSelf: "center",
+        marginLeft,
+        marginRight,
+      }}
+    >
+      <text fg={resolved}>{glyph}</text>
+    </box>
+  );
+}

package/src/components/primitives/StatusBar.stories.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { StatusBar } from "./StatusBar";
+
+export const meta: StoryMeta = { title: "Primitives/StatusBar" };
+
+export const HintLine: Story = {
+  render: () => <StatusBar>j/k move · v span · c comment · q quit</StatusBar>,
+  expectedColors: [DARK.textDim],
+};

package/src/components/primitives/StatusBar.tsx

@@ -0,0 +1,23 @@
+/**
+ * One-row panel bar for the status/hint line. Content renders as dim text;
+ * callers pass richer spans as children when a segment needs another tone.
+ */
+
+import React from "react";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+
+export interface StatusBarProps {
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+export function StatusBar({ theme, children }: StatusBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box style={{ height: 1, backgroundColor: tokens.panel, paddingLeft: 1 }}>
+      <text fg={tokens.textDim}>{children}</text>
+    </box>
+  );
+}

package/src/components/primitives/Switch.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Switch } from "./Switch";
+
+export const meta: StoryMeta = { title: "Primitives/Switch" };
+
+export const On: Story = {
+  render: () => <Switch on onToggle={() => {}} theme={DARK} />,
+  expectedColors: [DARK.accent],
+  size: { width: 8, height: 1 },
+};
+
+export const Off: Story = {
+  render: () => <Switch on={false} onToggle={() => {}} theme={DARK} />,
+  size: { width: 8, height: 1 },
+};

package/src/components/primitives/Switch.tsx

@@ -0,0 +1,32 @@
+/**
+ * On/off switch: a pill with a knob that sits right (accent) when on and left
+ * (dim) when off. `onToggle` unifies a mouse click and keyboard activation, so
+ * the dialog grammar and a pointer both flip it.
+ */
+
+import React from "react";
+import type { MouseEvent } from "@opentui/core";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+
+export interface SwitchProps {
+  on: boolean;
+  onToggle: () => void;
+  theme?: Theme;
+}
+
+export function Switch({ on, onToggle, theme }: SwitchProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      onMouseUp={(event: MouseEvent) => {
+        event.stopPropagation();
+        onToggle();
+      }}
+      style={{ flexShrink: 0 }}
+    >
+      <text fg={on ? tokens.accent : tokens.textDim}>{on ? "(  ●)" : "(●  )"}</text>
+    </box>
+  );
+}

package/src/components/primitives/Tabs.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Tab, TabList, Tabs } from "./Tabs";
+
+export const meta: StoryMeta = { title: "Primitives/Tabs" };
+
+export const TwoTabs: Story = {
+  render: () => (
+    <Tabs selectedKey="review" onSelectionChange={() => {}}>
+      <TabList>
+        <Tab id="review">Review (2)</Tab>
+        <Tab id="agent">Agent</Tab>
+      </TabList>
+    </Tabs>
+  ),
+  expectedColors: [DARK.accent, DARK.textDim],
+};
+
+export const SecondSelected: Story = {
+  render: () => (
+    <Tabs selectedKey="agent" onSelectionChange={() => {}}>
+      <TabList>
+        <Tab id="review">Review (0)</Tab>
+        <Tab id="agent">Agent</Tab>
+      </TabList>
+    </Tabs>
+  ),
+};

package/src/components/primitives/Tabs.tsx

@@ -0,0 +1,102 @@
+/**
+ * Tabs / TabList / Tab: a transparent, full-width rounded strip of clickable
+ * text tabs. The composition follows the ARIA tabs pattern: Tabs owns the
+ * controlled selection (`selectedKey` + `onSelectionChange`), TabList renders
+ * the strip, Tab declares one item. Selection stays controlled from outside so
+ * the keyboard grammar remains the key owner; each tab click sets the key.
+ */
+
+import React, { createContext, useContext } from "react";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+interface TabsContextValue {
+  selectedKey: string;
+  onSelectionChange: (key: string) => void;
+  /** Text color of the selected tab; defaults to the accent token. */
+  selectedColor?: string;
+  theme?: Theme;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+export interface TabsProps {
+  selectedKey: string;
+  onSelectionChange: (key: string) => void;
+  selectedColor?: string;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+export function Tabs({
+  selectedKey,
+  onSelectionChange,
+  selectedColor,
+  theme,
+  children,
+}: TabsProps): React.ReactNode {
+  return (
+    <TabsContext.Provider value={{ selectedKey, onSelectionChange, selectedColor, theme }}>
+      {children}
+    </TabsContext.Provider>
+  );
+}
+
+export interface TabProps {
+  id: string;
+  children: string;
+}
+
+/** Declarative item: TabList collects Tab children into the native strip. */
+export function Tab(_props: TabProps): React.ReactNode {
+  return null;
+}
+
+export interface TabListProps {
+  children: React.ReactNode;
+}
+
+export function TabList({ children }: TabListProps): React.ReactNode {
+  const tabs = useContext(TabsContext);
+
+  if (!tabs) throw new Error("TabList must render inside Tabs");
+  const tokens = useComponentTheme(tabs.theme);
+  const items: { id: string; label: string }[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement<TabProps>(child)) {
+      items.push({ id: child.props.id, label: child.props.children });
+    }
+  });
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: 3,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+        flexDirection: "row",
+        paddingLeft: 1,
+      }}
+    >
+      {items.map((item) => {
+        const selected = item.id === tabs.selectedKey;
+
+        return (
+          <box
+            key={item.id}
+            style={{ marginRight: 2 }}
+            onMouseUp={() => tabs.onSelectionChange(item.id)}
+          >
+            <text fg={selected ? (tabs.selectedColor ?? tokens.accent) : tokens.textDim}>
+              {item.label}
+            </text>
+          </box>
+        );
+      })}
+    </box>
+  );
+}

package/src/components/primitives/Toolbar.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type { Story, StoryMeta } from "../story";
+import { Button } from "./Button";
+import { Toolbar } from "./Toolbar";
+
+export const meta: StoryMeta = { title: "Primitives/Toolbar" };
+
+export const ActionRow: Story = {
+  render: () => (
+    <Toolbar>
+      <Button variant="solid" marginRight={2} onPress={() => {}}>
+        {" Submit "}
+      </Button>
+      <Button onPress={() => {}}>{" Cancel "}</Button>
+    </Toolbar>
+  ),
+};

package/src/components/primitives/Toolbar.tsx

@@ -0,0 +1,14 @@
+/**
+ * Horizontal action row: children flow left to right on one row. The classic
+ * home of Button groups (Save/Cancel, Submit/Cancel).
+ */
+
+import React from "react";
+
+export interface ToolbarProps {
+  children: React.ReactNode;
+}
+
+export function Toolbar({ children }: ToolbarProps): React.ReactNode {
+  return <box style={{ flexDirection: "row", height: 1 }}>{children}</box>;
+}

package/src/components/primitives/Tree.stories.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Tree } from "./Tree";
+import type { TreeNode } from "./tree-model";
+
+export const meta: StoryMeta = { title: "Primitives/Tree" };
+
+const FILES: TreeNode[] = [
+  {
+    id: "packages",
+    label: "packages",
+    children: [
+      {
+        id: "schema",
+        label: "schema",
+        children: [
+          { id: "schema/types.ts", label: "types.ts", status: "modified" },
+          { id: "schema/tree-model.ts", label: "tree-model.ts", status: "added" },
+        ],
+      },
+      {
+        id: "daemon",
+        label: "daemon",
+        children: [{ id: "daemon/api.ts", label: "api.ts", status: "modified" }],
+      },
+    ],
+  },
+  { id: "README.md", label: "README.md" },
+  { id: "old.ts", label: "old.ts", status: "deleted" },
+];
+
+const DEEP: TreeNode[] = [
+  {
+    id: "src",
+    label: "src",
+    children: [
+      {
+        id: "src/components",
+        label: "components",
+        children: [
+          {
+            id: "src/components/primitives",
+            label: "primitives",
+            children: [
+              { id: "src/components/primitives/Tree.tsx", label: "Tree.tsx", status: "added" },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const PROJECTS: TreeNode[] = [
+  {
+    id: "projects",
+    label: "Projects",
+    children: [
+      {
+        id: "cueloop",
+        label: "cueloop",
+        children: [{ id: "cueloop/read", label: "Read Cueloop Repository" }],
+      },
+    ],
+  },
+  {
+    id: "threads",
+    label: "Threads",
+    children: [{ id: "threads/welcome", label: "Welcome to cueloop" }],
+  },
+];
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ width: 40, height: "100%", backgroundColor: DARK.panel, paddingTop: 1 }}>
+      {children}
+    </box>
+  );
+}
+
+export const FileTree: Story = {
+  render: () => (
+    <Frame>
+      <Tree
+        nodes={FILES}
+        expandedIds={new Set(["packages", "schema", "daemon"])}
+        selectedId="schema/tree-model.ts"
+        showStatus
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.green, DARK.red],
+  size: { width: 44, height: 16 },
+};
+
+export const FlattenedChain: Story = {
+  render: () => (
+    <Frame>
+      <Tree
+        nodes={DEEP}
+        expandedIds={new Set(["src", "src/components/primitives"])}
+        flattenEmptyDirectories
+        showStatus
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.green],
+  size: { width: 44, height: 10 },
+};
+
+export const ProjectsThreads: Story = {
+  render: () => (
+    <Frame>
+      <Tree
+        nodes={PROJECTS}
+        expandedIds={new Set(["projects", "cueloop", "threads"])}
+        selectedId="cueloop/read"
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 44, height: 12 },
+};

package/src/components/primitives/Tree.tsx

@@ -0,0 +1,100 @@
+// OpenTUI renderer for the headless tree-model; the caller owns expansion and selection.
+
+import React from "react";
+import { DARK, type Theme } from "../../theme";
+import { flattenTree, statusMeta, type TreeNode, type TreeTone } from "./tree-model";
+import { NERD_TREE_ICONS, type TreeIcons } from "./icons";
+
+export interface TreeProps {
+  nodes: readonly TreeNode[];
+  expandedIds: ReadonlySet<string>;
+  selectedId?: string;
+  flattenEmptyDirectories?: boolean;
+  showStatus?: boolean;
+  /** Drop the folder/file glyph prefix, for a plain text tree (e.g. the settings nav). */
+  hideIcons?: boolean;
+  /** The selected row's backdrop; defaults to `elevated` (invisible on an elevated dialog, use `border` there). */
+  selectedBackground?: string;
+  indentWidth?: number;
+  icons?: TreeIcons;
+  onSelect?: (id: string) => void;
+  onToggle?: (id: string) => void;
+  theme?: Theme;
+}
+
+function rowGlyph(isFolder: boolean, expanded: boolean, icons: TreeIcons): string {
+  if (!isFolder) return icons.leaf;
+
+  return expanded ? icons.expanded : icons.collapsed;
+}
+
+function toneColor(tone: TreeTone, theme: Theme): string {
+  if (tone === "green") return theme.green;
+  if (tone === "blue") return theme.blue;
+  if (tone === "red") return theme.red;
+
+  return theme.textDim;
+}
+
+export function Tree({
+  nodes,
+  expandedIds,
+  selectedId,
+  flattenEmptyDirectories,
+  showStatus,
+  hideIcons,
+  selectedBackground,
+  indentWidth = 2,
+  icons = NERD_TREE_ICONS,
+  onSelect,
+  onToggle,
+  theme,
+}: TreeProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const selectedBackdrop = selectedBackground ?? tokens.elevated;
+  const rows = flattenTree(nodes, { expandedIds, flattenEmptyDirectories });
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {rows.map((row) => {
+        const selected = row.id === selectedId;
+        const status = showStatus && row.status !== undefined ? statusMeta(row.status) : null;
+        const labelColor = selected
+          ? tokens.text
+          : status
+            ? toneColor(status.tone, tokens)
+            : row.isFolder
+              ? tokens.text
+              : tokens.textMuted;
+
+        return (
+          <box
+            key={row.id}
+            id={`tree-row-${row.id}`}
+            style={{
+              flexDirection: "row",
+              paddingLeft: 1 + row.depth * indentWidth,
+              paddingRight: 1,
+              backgroundColor: selected ? selectedBackdrop : undefined,
+            }}
+            onMouseUp={() => (row.isFolder ? onToggle?.(row.id) : onSelect?.(row.id))}
+          >
+            {hideIcons ? null : (
+              <text fg={row.isFolder ? tokens.blue : tokens.textDim}>
+                {row.icon ?? rowGlyph(row.isFolder, row.expanded, icons)}{" "}
+              </text>
+            )}
+            <box style={{ flexShrink: 1, minWidth: 0 }}>
+              <text fg={selected ? tokens.accent : labelColor} truncate>
+                {row.label}
+              </text>
+            </box>
+            <box style={{ flexGrow: 1 }} />
+            {row.badge !== undefined ? <text fg={tokens.textDim}>{row.badge}</text> : null}
+            {status ? <text fg={toneColor(status.tone, tokens)}> {status.letter}</text> : null}
+          </box>
+        );
+      })}
+    </box>
+  );
+}

package/src/components/primitives/frame.test.ts

@@ -0,0 +1,12 @@
+/**
+ * Locks the single frame border rule: every bordered frame reads this token, so
+ * a drift back to rounded (or any other style) fails here first, before the
+ * slower VRT snapshots catch it.
+ */
+
+import { expect, test } from "bun:test";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+test("frames use the square border style", () => {
+  expect(FRAME_BORDER_STYLE).toBe("single");
+});

package/src/components/primitives/frame.ts

@@ -0,0 +1,17 @@
+/**
+ * The one frame border rule for the design system. Every bordered frame -
+ * cards, dialogs, and the stories gallery chrome - reads its corner style
+ * from FRAME_BORDER_STYLE, so the corner decision lives in a single place and
+ * can never drift between frames. Buttons stay text-first and borderless: the
+ * frame they sit in carries the border, not the button.
+ */
+
+import type { BorderStyle } from "@opentui/core";
+
+/** Corner style shared by every bordered frame in the app: square, not rounded. */
+export const FRAME_BORDER_STYLE: BorderStyle = "single";
+
+/** Every frame's border title renders lowercase, so the convention holds without each caller minding case. */
+export function frameTitle(title: string | undefined): string | undefined {
+  return title?.toLowerCase();
+}

package/src/components/primitives/icons.ts

@@ -0,0 +1,61 @@
+// Nerd Font glyphs (Private Use Area / codicons) plus the plus-minus diff mark; render as icons under a Nerd Font, tofu without one.
+
+export const NERD = {
+  folderClosed: "",
+  folderOpen: "",
+  file: "",
+  chevronRight: "",
+  chevronDown: "",
+  settings: "",
+  search: "",
+  expand: "",
+  diff: "",
+  copy: "",
+  unfold: "",
+  kebab: "⋮",
+  star: "★",
+  close: "✕",
+  listTree: "",
+  sidebarLeft: "",
+  sidebarLeftOff: "",
+  sidebarRight: "",
+  sidebarRightOff: "",
+  submit: "",
+  zoom: "⛶",
+  split: "",
+} as const;
+
+// The thin rule under each pane header: an overline sits at the top edge of its cell so it hugs the
+// header text (unlike the default light-horizontal, which floats mid-cell); painted in divider gray upstream.
+export const HEADER_UNDERLINE_CHARS = {
+  topLeft: "\u250c",
+  topRight: "\u2510",
+  bottomLeft: "\u2514",
+  bottomRight: "\u2518",
+  horizontal: "\u203e",
+  vertical: "\u2502",
+  topT: "\u252c",
+  bottomT: "\u2534",
+  leftT: "\u251c",
+  rightT: "\u2524",
+  cross: "\u253c",
+} as const;
+
+export interface TreeIcons {
+  collapsed: string;
+  expanded: string;
+  leaf: string;
+}
+
+export const NERD_TREE_ICONS: TreeIcons = {
+  collapsed: NERD.folderClosed,
+  expanded: NERD.folderOpen,
+  leaf: NERD.file,
+};
+
+// Fallback for terminals without a Nerd Font.
+export const ASCII_TREE_ICONS: TreeIcons = {
+  collapsed: "▸",
+  expanded: "▾",
+  leaf: " ",
+};