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

package/src/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/components/primitives/tree-model.ts

@@ -0,0 +1,137 @@
+// 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" };
+  }
+}

package/src/components/quick-actions-editor.stories.tsx

@@ -4,7 +4,7 @@ import { DEFAULT_QUICK_ACTIONS } from "../config";
 import type { Story, StoryMeta } from "./story";
 import { QuickActionsEditor } from "./quick-actions-editor";
 
-export const meta: StoryMeta = { title: "QuickActionsEditor" };
+export const meta: StoryMeta = { title: "Chrome/QuickActionsEditor" };
 
 /** The editor renders inside the settings body column. */
 function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {

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

@@ -0,0 +1,114 @@
+import { describe, expect, test } from "bun:test";
+import type { ReviewSession, WorkspaceKey } from "@cueloop/schema";
+import { groupInbox, projectName } from "./session-tree";
+
+function session(id: string, title: string, rootCommit?: string, remote?: string): ReviewSession {
+  const workspace: WorkspaceKey = { repoRoot: `/home/dev/${id}-checkout`, branch: "main" };
+  if (rootCommit !== undefined) workspace.rootCommit = rootCommit;
+  if (remote !== undefined) workspace.remote = remote;
+
+  return {
+    schemaVersion: "1",
+    id,
+    workspace,
+    artifact: { type: "plan", content: `# ${title}\n`, meta: { title } },
+    revisions: [],
+    annotations: [],
+    verdict: null,
+    status: "pending",
+    createdAt: "2026-01-01T00:00:00.000Z",
+  };
+}
+
+describe("projectName", () => {
+  test("prefers the remote basename and strips the .git suffix", () => {
+    // Arrange
+    const workspace: WorkspaceKey = {
+      repoRoot: "/tmp/whatever",
+      branch: "main",
+      remote: "git@github.com:acme/widget.git",
+    };
+
+    // Act
+    const name = projectName(workspace);
+
+    // Assert
+    expect(name).toBe("widget");
+  });
+
+  test("falls back to the working-tree folder name when there is no remote", () => {
+    // Arrange
+    const workspace: WorkspaceKey = { repoRoot: "/home/dev/cueloop", branch: "main" };
+
+    // Act
+    const name = projectName(workspace);
+
+    // Assert
+    expect(name).toBe("cueloop");
+  });
+});
+
+describe("groupInbox", () => {
+  test("splits repo-bound threads into Projects and the rest into Threads", () => {
+    // Arrange
+    const sessions = [
+      session("a", "Read the repo", "root-1", "git@github.com:acme/widget.git"),
+      session("b", "A loose idea"),
+    ];
+
+    // Act
+    const { rows, ordered } = groupInbox(sessions);
+
+    // Assert
+    const labels = rows.map((row) => `${row.kind}:${"label" in row ? row.label : row.id}`);
+    expect(labels).toEqual([
+      "section:Projects",
+      "project:widget",
+      "thread:a",
+      "section:Threads",
+      "thread:b",
+    ]);
+    expect(ordered.map((s) => s.id)).toEqual(["a", "b"]);
+  });
+
+  test("collapses threads sharing a root commit into one project", () => {
+    // Arrange
+    const sessions = [
+      session("a", "First", "root-1", "git@github.com:acme/widget.git"),
+      session("b", "Second", "root-1", "git@github.com:acme/widget.git"),
+    ];
+
+    // Act
+    const { rows, ordered } = groupInbox(sessions);
+
+    // Assert
+    const projectRows = rows.filter((row) => row.kind === "project");
+    expect(projectRows).toHaveLength(1);
+    expect(ordered).toHaveLength(2);
+  });
+
+  test("selectionIndex on each thread matches its position in ordered", () => {
+    // Arrange
+    const sessions = [session("a", "One", "root-1"), session("b", "Two")];
+
+    // Act
+    const { rows, ordered } = groupInbox(sessions);
+
+    // Assert
+    for (const row of rows) {
+      if (row.kind === "thread") expect(ordered[row.selectionIndex]!.id).toBe(row.id);
+    }
+  });
+
+  test("omits the Projects section when nothing is repo-bound", () => {
+    // Arrange
+    const sessions = [session("a", "Loose one"), session("b", "Loose two")];
+
+    // Act
+    const { rows } = groupInbox(sessions);
+
+    // Assert
+    expect(rows.some((row) => row.kind === "section" && row.label === "Projects")).toBe(false);
+    expect(rows.some((row) => row.kind === "section" && row.label === "Threads")).toBe(true);
+  });
+});

package/src/components/session-tree.ts

@@ -0,0 +1,94 @@
+/**
+ * Groups the pending inbox into Projects and Threads for the sidebar. Threads
+ * whose workspace carries a rootCommit gather under their project (keyed by that
+ * commit, so moving or re-cloning the repo never forks it); the rest are
+ * standalone Threads. The flat `ordered` sequence is what the inbox cursor
+ * walks, so the keyboard grammar keeps a single index across the two groups.
+ */
+
+import type { ReviewSession, WorkspaceKey } from "@cueloop/schema";
+
+/** A repo's display name: the remote basename when present, else the working-tree folder name. */
+export function projectName(workspace: WorkspaceKey): string {
+  const { remote, repoRoot } = workspace;
+
+  if (remote !== undefined) {
+    const cleaned = remote.replace(/\.git$/, "").replace(/\/+$/, "");
+    const base = cleaned
+      .split(/[/:]/)
+      .filter((part) => part.length > 0)
+      .at(-1);
+    if (base !== undefined) return base;
+  }
+
+  const dir = repoRoot
+    .replace(/\/+$/, "")
+    .split("/")
+    .filter((part) => part.length > 0)
+    .at(-1);
+
+  return dir ?? repoRoot;
+}
+
+export type InboxRow =
+  | { kind: "section"; id: string; label: string }
+  | { kind: "project"; id: string; label: string }
+  | { kind: "thread"; id: string; session: ReviewSession; selectionIndex: number };
+
+export interface GroupedInbox {
+  rows: InboxRow[];
+  /** Threads in display order; the inbox cursor indexes this. */
+  ordered: ReviewSession[];
+}
+
+function threadTitle(session: ReviewSession): string {
+  return session.artifact.meta.title ?? session.id;
+}
+
+interface ProjectGroup {
+  name: string;
+  sessions: ReviewSession[];
+}
+
+/** Group pending sessions into Projects (by root commit) then standalone Threads. */
+export function groupInbox(sessions: readonly ReviewSession[]): GroupedInbox {
+  const projects = new Map<string, ProjectGroup>();
+  const standalone: ReviewSession[] = [];
+
+  for (const session of sessions) {
+    const key = session.workspace.rootCommit;
+    if (key === undefined) {
+      standalone.push(session);
+      continue;
+    }
+
+    const existing = projects.get(key);
+    if (existing !== undefined) existing.sessions.push(session);
+    else projects.set(key, { name: projectName(session.workspace), sessions: [session] });
+  }
+
+  const rows: InboxRow[] = [];
+  const ordered: ReviewSession[] = [];
+  const pushThread = (session: ReviewSession): void => {
+    rows.push({ kind: "thread", id: session.id, session, selectionIndex: ordered.length });
+    ordered.push(session);
+  };
+
+  const projectEntries = [...projects.entries()].sort((a, b) => a[1].name.localeCompare(b[1].name));
+  if (projectEntries.length > 0) {
+    rows.push({ kind: "section", id: "section:projects", label: "Projects" });
+    for (const [key, project] of projectEntries) {
+      rows.push({ kind: "project", id: `project:${key}`, label: project.name });
+      for (const session of project.sessions) pushThread(session);
+    }
+  }
+
+  if (standalone.length > 0) {
+    rows.push({ kind: "section", id: "section:threads", label: "Threads" });
+    for (const session of standalone) pushThread(session);
+  }
+
+  return { rows, ordered };
+}
+
+export { threadTitle };