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

package/src/components/agent-launcher.stories.tsx

@@ -4,7 +4,7 @@ import type { Story, StoryMeta } from "./story";
 import { AgentLauncher } from "./agent-launcher";
 import { fixturePlanSession } from "./story-fixtures";
 
-export const meta: StoryMeta = { title: "AgentLauncher" };
+export const meta: StoryMeta = { title: "Chrome/AgentLauncher" };
 
 /** The launcher expects the rail's narrow, height-constrained column. */
 function RailFrame({ children }: { children: React.ReactNode }): React.ReactNode {

package/src/components/file-tree.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "bun:test";
+import type { DiffFileContents } from "@cueloop/schema";
+import { buildFileTree } from "./file-tree";
+
+function file(path: string, status: DiffFileContents["status"] = "modified"): DiffFileContents {
+  return { path, oldContents: "a", newContents: "b", status };
+}
+
+describe("buildFileTree", () => {
+  test("nests files under their directories and keeps the full path as the leaf id", () => {
+    // Arrange
+    const files = [file("src/app/main.ts"), file("src/app/util.ts"), file("README.md")];
+
+    // Act
+    const tree = buildFileTree(files);
+
+    // Assert - one src folder over one app folder over two leaves, plus a root file
+    expect(tree.map((node) => node.label)).toEqual(["src", "README.md"]);
+    const app = tree[0]!.children![0]!;
+
+    expect(app.label).toBe("app");
+    expect(app.children!.map((leaf) => leaf.id)).toEqual(["src/app/main.ts", "src/app/util.ts"]);
+  });
+
+  test("carries the git status onto each leaf so the tree can tint it", () => {
+    // Act
+    const tree = buildFileTree([file("a.ts", "added"), file("b.ts", "deleted")]);
+
+    // Assert
+    expect(tree.map((leaf) => leaf.status)).toEqual(["added", "deleted"]);
+  });
+
+  test("merges files that share a directory into one folder node", () => {
+    // Act
+    const tree = buildFileTree([file("pkg/one.ts"), file("pkg/two.ts")]);
+
+    // Assert
+    expect(tree).toHaveLength(1);
+    expect(tree[0]!.children).toHaveLength(2);
+  });
+
+  test("returns an empty tree for no changes", () => {
+    expect(buildFileTree([])).toEqual([]);
+  });
+});

package/src/components/file-tree.ts

@@ -0,0 +1,57 @@
+/**
+ * Builds a nested file tree from a diff's changed files, so the Changes column
+ * can browse them by directory. Each leaf keeps its repo-relative path as the id
+ * (what the diff rows are keyed by) and carries the git status for its tint.
+ */
+
+import type { DiffFileContents, DiffFileStatus } from "@cueloop/schema";
+import type { GitStatus, TreeNode } from "./primitives/tree-model";
+
+/** The diff file statuses are a subset of the tree's git statuses. */
+function gitStatusOf(status: DiffFileStatus): GitStatus {
+  return status;
+}
+
+interface MutableTreeNode {
+  id: string;
+  label: string;
+  status?: GitStatus;
+  children?: Map<string, MutableTreeNode>;
+}
+
+function freeze(node: MutableTreeNode): TreeNode {
+  if (node.children === undefined) return { id: node.id, label: node.label, status: node.status };
+
+  return {
+    id: node.id,
+    label: node.label,
+    children: [...node.children.values()].map(freeze),
+  };
+}
+
+/** Group changed files into a directory tree; leaves are keyed by their full path. */
+export function buildFileTree(files: readonly DiffFileContents[]): TreeNode[] {
+  const roots = new Map<string, MutableTreeNode>();
+
+  for (const file of files) {
+    const segments = file.path.split("/").filter((segment) => segment.length > 0);
+    let level = roots;
+    let prefix = "";
+
+    segments.forEach((segment, index) => {
+      prefix = prefix.length > 0 ? `${prefix}/${segment}` : segment;
+      const isLeaf = index === segments.length - 1;
+      let node = level.get(segment);
+
+      if (node === undefined) {
+        node = isLeaf
+          ? { id: file.path, label: segment, status: gitStatusOf(file.status) }
+          : { id: prefix, label: segment, children: new Map() };
+        level.set(segment, node);
+      }
+      if (!isLeaf) level = node.children!;
+    });
+  }
+
+  return [...roots.values()].map(freeze);
+}

package/src/components/pages/Workspace.stories.tsx

@@ -0,0 +1,181 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { AppShell } from "../AppShell";
+import { Tree } from "../primitives/Tree";
+import type { TreeNode } from "../primitives/tree-model";
+
+export const meta: StoryMeta = { title: "Pages/Workspace" };
+
+const NAVIGATION: TreeNode[] = [
+  {
+    id: "projects",
+    label: "Projects",
+    children: [
+      {
+        id: "cueloop",
+        label: "cueloop",
+        children: [
+          { id: "cueloop/review", label: "Review the app shell" },
+          { id: "cueloop/read", label: "Read Cueloop Repository" },
+        ],
+      },
+    ],
+  },
+  {
+    id: "threads",
+    label: "Threads",
+    children: [{ id: "threads/welcome", label: "Welcome to cueloop" }],
+  },
+];
+
+const CHANGED_FILES: TreeNode[] = [
+  {
+    id: "packages",
+    label: "packages",
+    children: [
+      {
+        id: "client",
+        label: "client",
+        children: [
+          { id: "client/AppShell.tsx", label: "AppShell.tsx", status: "modified" },
+          { id: "client/Workspace.stories.tsx", label: "Workspace.stories.tsx", status: "added" },
+        ],
+      },
+    ],
+  },
+  { id: "README.md", label: "README.md", status: "modified" },
+];
+
+interface CodeSampleLine {
+  number: number;
+  code: string;
+}
+
+const CODE_SAMPLE: readonly CodeSampleLine[] = [
+  { number: 17, code: "export function AppShell({" },
+  { number: 18, code: "  header," },
+  { number: 19, code: "  sidebar," },
+  { number: 20, code: "  main," },
+  { number: 21, code: "  inspector," },
+  { number: 22, code: "}: AppShellProps) {" },
+  { number: 23, code: "  const tokens = theme ?? DARK;" },
+  { number: 24, code: "  return <box>{main}</box>;" },
+];
+
+function Sidebar(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingTop: 1 }}>
+      <Tree
+        nodes={NAVIGATION}
+        expandedIds={new Set(["projects", "cueloop", "threads"])}
+        selectedId="cueloop/review"
+      />
+    </box>
+  );
+}
+
+function TranscriptLine({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <text fg={DARK.textMuted}>{children}</text>;
+}
+
+function CommentRow(): React.ReactNode {
+  return (
+    <box
+      style={{
+        border: ["left"],
+        borderStyle: "single",
+        borderColor: DARK.accent,
+        flexDirection: "column",
+        paddingLeft: 1,
+        marginTop: 1,
+        marginBottom: 1,
+      }}
+    >
+      <text fg={DARK.textDim}>markus commented on AppShell.tsx</text>
+      <text fg={DARK.text}>The single rules read cleaner than an enclosing frame here.</text>
+    </box>
+  );
+}
+
+function Main(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>Review the app shell</text>
+      <text> </text>
+      <TranscriptLine>
+        The three-pane layout divides regions with straight rules only.
+      </TranscriptLine>
+      <TranscriptLine>
+        Sidebar navigates, the transcript reads, the inspector shows code.
+      </TranscriptLine>
+      <CommentRow />
+      <TranscriptLine>Header and footer are thin label rows the shell rules itself.</TranscriptLine>
+    </box>
+  );
+}
+
+function CodePane(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <text fg={DARK.textMuted}>AppShell.tsx</text>
+      <text> </text>
+      {CODE_SAMPLE.map((line) => (
+        <box key={line.number} style={{ flexDirection: "row" }}>
+          <text fg={DARK.textDim}>{String(line.number).padStart(3, " ")} </text>
+          <text fg={DARK.text}>{line.code}</text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+function Inspector(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <CodePane />
+      <text> </text>
+      <text fg={DARK.textDim}>Changed files</text>
+      <Tree
+        nodes={CHANGED_FILES}
+        expandedIds={new Set(["packages", "client"])}
+        selectedId="client/AppShell.tsx"
+        showStatus
+      />
+    </box>
+  );
+}
+
+function Header(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textMuted}>Review the app shell</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>cueloop / main</text>
+    </box>
+  );
+}
+
+function Footer(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textDim}>2 files changed</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>Fable 5</text>
+    </box>
+  );
+}
+
+export const ThreePane: Story = {
+  render: () => (
+    <AppShell
+      sidebar={<Sidebar />}
+      main={<Main />}
+      mainHeader={<Header />}
+      inspector={<Inspector />}
+      footer={<Footer />}
+    />
+  ),
+  expectedColors: [DARK.border, DARK.accent],
+  size: { width: 160, height: 42 },
+};

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

@@ -4,7 +4,7 @@ import type { Story, StoryMeta } from "../story";
 import { Button } from "./Button";
 import { Toolbar } from "./Toolbar";
 
-export const meta: StoryMeta = { title: "primitives/Button" };
+export const meta: StoryMeta = { title: "Primitives/Button" };
 
 export const Variants: Story = {
   render: () => (

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

@@ -3,7 +3,7 @@ import { DARK } from "../../theme";
 import type { Story, StoryMeta } from "../story";
 import { Card } from "./Card";
 
-export const meta: StoryMeta = { title: "primitives/Card" };
+export const meta: StoryMeta = { title: "Primitives/Card" };
 
 export const Titled: Story = {
   render: () => (

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

@@ -3,7 +3,7 @@ import { DARK } from "../../theme";
 import type { Story, StoryMeta } from "../story";
 import { Dialog } from "./Dialog";
 
-export const meta: StoryMeta = { title: "primitives/Dialog" };
+export const meta: StoryMeta = { title: "Primitives/Dialog" };
 
 export const Open: Story = {
   render: () => (

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { IconButton } from "./IconButton";
+import { NERD } from "./icons";
+
+export const meta: StoryMeta = { title: "Primitives/IconButton" };
+
+function Row({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", padding: 1, backgroundColor: DARK.panel }}>{children}</box>
+  );
+}
+
+export const States: Story = {
+  render: () => (
+    <Row>
+      <IconButton glyph={NERD.settings} onPress={() => {}} marginRight={3} />
+      <IconButton glyph={NERD.listTree} active onPress={() => {}} marginRight={3} />
+      <IconButton glyph={NERD.diff} disabled marginRight={3} />
+      <IconButton glyph={NERD.submit} onPress={() => {}} />
+    </Row>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted, DARK.textDim],
+  size: { width: 40, height: 3 },
+};
+
+export const Submit: Story = {
+  render: () => (
+    <Row>
+      <IconButton glyph={NERD.submit} active onPress={() => {}} />
+    </Row>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 20, height: 3 },
+};

package/src/components/primitives/IconButton.tsx

@@ -0,0 +1,43 @@
+// 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 { DARK, type Theme } from "../../theme";
+
+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;
+  marginLeft?: number;
+  marginRight?: number;
+  theme?: Theme;
+}
+
+export function IconButton({
+  glyph,
+  onPress,
+  active,
+  disabled,
+  color,
+  marginLeft,
+  marginRight,
+  theme,
+}: IconButtonProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const resolved = color ?? (disabled ? tokens.textDim : active ? tokens.accent : tokens.textMuted);
+
+  return (
+    <box
+      onMouseUp={disabled ? undefined : onPress}
+      style={{ alignSelf: "center", marginLeft, marginRight }}
+    >
+      <text fg={resolved}>{glyph}</text>
+    </box>
+  );
+}

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

@@ -3,7 +3,7 @@ import { DARK } from "../../theme";
 import type { Story, StoryMeta } from "../story";
 import { StatusBar } from "./StatusBar";
 
-export const meta: StoryMeta = { title: "primitives/StatusBar" };
+export const meta: StoryMeta = { title: "Primitives/StatusBar" };
 
 export const HintLine: Story = {
   render: () => <StatusBar>j/k move · v span · c comment · q quit</StatusBar>,

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

@@ -3,7 +3,7 @@ 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 meta: StoryMeta = { title: "Primitives/Tabs" };
 
 export const TwoTabs: Story = {
   render: () => (

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

@@ -3,7 +3,7 @@ import type { Story, StoryMeta } from "../story";
 import { Button } from "./Button";
 import { Toolbar } from "./Toolbar";
 
-export const meta: StoryMeta = { title: "primitives/Toolbar" };
+export const meta: StoryMeta = { title: "Primitives/Toolbar" };
 
 export const ActionRow: Story = {
   render: () => (

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,87 @@
+// 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;
+  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,
+  indentWidth = 2,
+  icons = NERD_TREE_ICONS,
+  onSelect,
+  onToggle,
+  theme,
+}: TreeProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+  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 ? tokens.elevated : undefined,
+            }}
+            onMouseUp={() => (row.isFolder ? onToggle?.(row.id) : onSelect?.(row.id))}
+          >
+            <text fg={row.isFolder ? tokens.blue : tokens.textDim}>
+              {row.icon ?? rowGlyph(row.isFolder, row.expanded, icons)}{" "}
+            </text>
+            <text fg={selected ? tokens.accent : labelColor}>{row.label}</text>
+            <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/icons.ts

@@ -0,0 +1,38 @@
+// 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: "±",
+  listTree: "",
+  sidebarLeft: "",
+  sidebarLeftOff: "",
+  sidebarRight: "",
+  sidebarRightOff: "",
+  submit: "",
+} 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: " ",
+};