@cueloop/client 0.1.0-alpha.11 → 0.1.0-alpha.111

package/src/ui/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/ui/components/primitives/Tree.stories.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { DARK } from "../../../appearance/theme";
+import type { Story, StoryMeta } from "../../../stories/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/ui/components/primitives/Tree.tsx

@@ -0,0 +1,137 @@
+// OpenTUI renderer for the headless tree-model; the caller owns expansion and selection.
+
+import React, { useRef } from "react";
+import { DARK, type Theme } from "../../../appearance/theme";
+import { isDoubleClick, type ClickStamp } from "../../../annotations/thread-selection";
+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;
+  hideIcons?: boolean;
+  singleLine?: boolean;
+  selectedBackground?: string;
+  indentWidth?: number;
+  icons?: TreeIcons;
+  onSelect?: (id: string) => void;
+  onDoubleSelect?: (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,
+  singleLine = false,
+  selectedBackground,
+  indentWidth = 2,
+  icons = NERD_TREE_ICONS,
+  onSelect,
+  onDoubleSelect,
+  onToggle,
+  theme,
+}: TreeProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const selectedBackdrop = selectedBackground ?? tokens.elevated;
+  const rows = flattenTree(nodes, { expandedIds, flattenEmptyDirectories });
+  const lastClick = useRef<{ id: string; stamp: ClickStamp } | null>(null);
+
+  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",
+              justifyContent: "space-between",
+              height: singleLine ? 1 : undefined,
+              overflow: singleLine ? "hidden" : undefined,
+              paddingLeft: 1 + row.depth * indentWidth,
+              paddingRight: singleLine && status ? 0 : 1,
+              backgroundColor: selected ? selectedBackdrop : undefined,
+            }}
+            onMouseUp={(event) => {
+              const stamp = { time: Date.now(), x: event.x, y: event.y };
+              const doubleClick =
+                lastClick.current?.id === row.id && isDoubleClick(lastClick.current.stamp, stamp);
+
+              lastClick.current = { id: row.id, stamp };
+
+              if (row.isFolder) onToggle?.(row.id);
+              else {
+                onSelect?.(row.id);
+
+                if (doubleClick) onDoubleSelect?.(row.id);
+              }
+            }}
+          >
+            <box
+              style={{
+                flexDirection: "row",
+                flexShrink: 1,
+                minWidth: 0,
+                overflow: singleLine ? "hidden" : undefined,
+              }}
+            >
+              {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
+                  id={`tree-label-${row.id}`}
+                  fg={selected ? tokens.accent : labelColor}
+                  wrapMode={singleLine ? "none" : undefined}
+                  truncate={!singleLine}
+                >
+                  {singleLine ? `${row.label}  ` : row.label}
+                </text>
+              </box>
+            </box>
+            <box style={{ flexDirection: "row", flexShrink: 0 }}>
+              {row.badge !== undefined ? <text fg={tokens.textDim}>{row.badge}</text> : null}
+              {status ? <text fg={toneColor(status.tone, tokens)}> {status.letter}</text> : null}
+            </box>
+          </box>
+        );
+      })}
+    </box>
+  );
+}

package/src/ui/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/ui/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/ui/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: " ",
+};

package/src/ui/components/primitives/tree-model.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, test } from "bun:test";
+import { allFolderIds, flattenTree, statusMeta, type TreeNode } from "./tree-model";
+
+const TREE: TreeNode[] = [
+  {
+    id: "src",
+    label: "src",
+    children: [
+      { id: "src/a.ts", label: "a.ts", status: "modified" },
+      {
+        id: "src/nested",
+        label: "nested",
+        children: [
+          {
+            id: "src/nested/only",
+            label: "only",
+            children: [{ id: "deep", label: "deep.ts", status: "added" }],
+          },
+        ],
+      },
+    ],
+  },
+  { id: "readme", label: "README.md" },
+];
+
+describe("flattenTree", () => {
+  test("a collapsed folder shows only itself; expanding it reveals its children", () => {
+    // Act
+    const collapsed = flattenTree(TREE, { expandedIds: new Set() });
+    const rows = flattenTree(TREE, { expandedIds: new Set(["src"]) });
+
+    // Assert
+    expect(collapsed.map((row) => row.label)).toEqual(["src", "README.md"]);
+    expect(rows.map((row) => [row.label, row.depth, row.isFolder])).toEqual([
+      ["src", 0, true],
+      ["a.ts", 1, false],
+      ["nested", 1, true],
+      ["README.md", 0, false],
+    ]);
+    expect(rows.find((row) => row.label === "src")!.expanded).toBe(true);
+    expect(rows.find((row) => row.label === "a.ts")!.status).toBe("modified");
+  });
+
+  test("flattenEmptyDirectories collapses a single-subfolder chain into one row", () => {
+    // Act - src open but the chain itself collapsed (none of its ids expanded)
+    const collapsed = flattenTree(TREE, {
+      expandedIds: new Set(["src"]),
+      flattenEmptyDirectories: true,
+    });
+    // Act - expanding via any id along the chain opens it
+    const expanded = flattenTree(TREE, {
+      expandedIds: new Set(["src", "src/nested/only"]),
+      flattenEmptyDirectories: true,
+    });
+
+    // Assert
+    expect(collapsed.map((row) => row.label)).toEqual(["src", "a.ts", "nested/only", "README.md"]);
+    expect(expanded.map((row) => row.label)).toEqual([
+      "src",
+      "a.ts",
+      "nested/only",
+      "deep.ts",
+      "README.md",
+    ]);
+  });
+
+  test("without the flag the chain stays one folder per row", () => {
+    // Act
+    const rows = flattenTree(TREE, {
+      expandedIds: new Set(["src", "src/nested", "src/nested/only"]),
+    });
+
+    // Assert
+    expect(rows.map((row) => [row.label, row.depth])).toEqual([
+      ["src", 0],
+      ["a.ts", 1],
+      ["nested", 1],
+      ["only", 2],
+      ["deep.ts", 3],
+      ["README.md", 0],
+    ]);
+  });
+});
+
+describe("allFolderIds", () => {
+  test("collects every folder, not the leaves", () => {
+    // Assert
+    expect([...allFolderIds(TREE)].sort()).toEqual(["src", "src/nested", "src/nested/only"]);
+  });
+});
+
+describe("statusMeta", () => {
+  test("maps each status to a letter and a tone", () => {
+    // Assert
+    expect(statusMeta("added")).toEqual({ letter: "A", tone: "green" });
+    expect(statusMeta("deleted")).toEqual({ letter: "D", tone: "red" });
+    expect(statusMeta("ignored")).toEqual({ letter: "I", tone: "muted" });
+  });
+});

package/src/ui/components/primitives/tree-model.ts

@@ -0,0 +1,144 @@
+// Headless tree model mirrored from @pierre/trees (DOM-only): share the model, render our own.
+
+export type GitStatus = "added" | "modified" | "deleted" | "renamed" | "untracked" | "ignored";
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  children?: TreeNode[];
+  status?: GitStatus;
+  badge?: string;
+  icon?: string;
+}
+
+export interface FlattenOptions {
+  expandedIds: ReadonlySet<string>;
+  flattenEmptyDirectories?: boolean;
+}
+
+export interface VisibleRow {
+  id: string;
+  label: string;
+  depth: number;
+  isFolder: boolean;
+  expanded: boolean;
+  status?: GitStatus;
+  badge?: string;
+  icon?: string;
+}
+
+function isFolder(node: TreeNode): boolean {
+  return node.children !== undefined;
+}
+
+interface CollapsedChain {
+  label: string;
+  tail: TreeNode;
+  chainIds: string[];
+}
+
+// flattenEmptyDirectories: fold a chain of single-subfolder folders into one row.
+function collapseChain(node: TreeNode): CollapsedChain {
+  let tail = node;
+  const labels = [node.label];
+  const chainIds = [node.id];
+
+  while (tail.children?.length === 1 && isFolder(tail.children[0]!)) {
+    tail = tail.children[0]!;
+    labels.push(tail.label);
+    chainIds.push(tail.id);
+  }
+
+  return { label: labels.join("/"), tail, chainIds };
+}
+
+export function flattenTree(nodes: readonly TreeNode[], options: FlattenOptions): VisibleRow[] {
+  const rows: VisibleRow[] = [];
+  const walk = (list: readonly TreeNode[], depth: number): void => {
+    for (const node of list) {
+      if (!isFolder(node)) {
+        const leaf: VisibleRow = {
+          id: node.id,
+          label: node.label,
+          depth,
+          isFolder: false,
+          expanded: false,
+        };
+
+        if (node.status !== undefined) leaf.status = node.status;
+
+        if (node.badge !== undefined) leaf.badge = node.badge;
+
+        if (node.icon !== undefined) leaf.icon = node.icon;
+
+        rows.push(leaf);
+        continue;
+      }
+
+      const collapsed = options.flattenEmptyDirectories
+        ? collapseChain(node)
+        : { label: node.label, tail: node, chainIds: [node.id] };
+      // open when any id along a collapsed chain is expanded
+      const expanded = collapsed.chainIds.some((id) => options.expandedIds.has(id));
+      const row: VisibleRow = {
+        id: node.id,
+        label: collapsed.label,
+        depth,
+        isFolder: true,
+        expanded,
+      };
+
+      if (node.badge !== undefined) row.badge = node.badge;
+
+      if (node.icon !== undefined) row.icon = node.icon;
+
+      rows.push(row);
+
+      if (expanded) walk(collapsed.tail.children ?? [], depth + 1);
+    }
+  };
+
+  walk(nodes, 0);
+
+  return rows;
+}
+
+export function allFolderIds(nodes: readonly TreeNode[]): Set<string> {
+  const ids = new Set<string>();
+  const walk = (list: readonly TreeNode[]): void => {
+    for (const node of list) {
+      if (isFolder(node)) {
+        ids.add(node.id);
+        walk(node.children ?? []);
+      }
+    }
+  };
+
+  walk(nodes);
+
+  return ids;
+}
+
+export type TreeTone = "green" | "blue" | "red" | "muted";
+
+export interface StatusMeta {
+  letter: string;
+  tone: TreeTone;
+}
+
+export function statusMeta(status: GitStatus): StatusMeta {
+  switch (status) {
+    case "added":
+      return { letter: "A", tone: "green" };
+    case "modified":
+      return { letter: "M", tone: "blue" };
+    case "deleted":
+      return { letter: "D", tone: "red" };
+    case "renamed":
+      return { letter: "R", tone: "blue" };
+    case "untracked":
+      return { letter: "U", tone: "green" };
+    case "ignored":
+      return { letter: "I", tone: "muted" };
+  }
+}