@cueloop/client 0.1.0-alpha.10 → 0.1.0-alpha.101

package/src/thread/components/ThreadTree.tsx

@@ -0,0 +1,267 @@
+/**
+ * The sidebar thread tree: a Starred / Projects / Threads listing. Selection stays
+ * with the keyboard grammar - the cursor indexes the flat thread order and this
+ * component renders the snapshot. A hovered or selected thread reveals a kebab
+ * that opens a floating pin / rename / delete menu below the row (so the list
+ * never shifts); a long title clips to an ellipsis rather than wrapping. App
+ * supplies the surrounding chrome.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import type { BoxRenderable } from "@opentui/core";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { useFrameMeasure } from "../../ui/use-frame-measure";
+import { useRootOverlay } from "../../ui/components/RootOverlay";
+import { useMenuControl } from "../../ui/components/menu-control";
+import { IconButton } from "../../ui/components/primitives/IconButton";
+import { NERD } from "../../ui/components/primitives/icons";
+import { truncateTitle } from "../../ui/components/truncate-title";
+import { threadTitle, type InboxRow } from "./thread-tree";
+
+export interface ThreadTreeProps {
+  rows: InboxRow[];
+  cursor: number;
+  activeId?: string;
+  focused?: boolean;
+  pinnedIds?: ReadonlySet<string>;
+  width?: number;
+  onSelect?: (sessionId: string) => void;
+  onRequestDelete?: (id: string, title: string) => void;
+  onPin?: (id: string) => void;
+  onRename?: (id: string, title: string) => void;
+  onCreateThread?: () => void;
+  theme?: Theme;
+}
+
+const MENU_WIDTH = 12;
+
+/** Columns per nesting level in the sidebar cascade: section → project → thread. */
+const SIDEBAR_INDENT = 2;
+
+function ActionsMenu({
+  pinned,
+  onPin,
+  onRename,
+  onDelete,
+  tokens,
+}: {
+  pinned: boolean;
+  onPin?: () => void;
+  onRename?: () => void;
+  onDelete?: () => void;
+  tokens: Theme;
+}): React.ReactNode {
+  const item = (label: string, color: string, onPick?: () => void): React.ReactNode =>
+    onPick !== undefined ? (
+      <box onMouseUp={onPick} style={{ paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={color}>{label}</text>
+      </box>
+    ) : null;
+
+  return (
+    <box
+      onMouseUp={(event) => event.stopPropagation()}
+      style={{
+        width: MENU_WIDTH,
+        flexDirection: "column",
+        border: true,
+        borderStyle: "single",
+        borderColor: tokens.border,
+        backgroundColor: tokens.elevated,
+      }}
+    >
+      {item(pinned ? "unstar" : "star", tokens.text, onPin)}
+      {item("rename", tokens.text, onRename)}
+      {item("delete", tokens.text, onDelete)}
+    </box>
+  );
+}
+
+interface ThreadRowProps {
+  title: string;
+  selected: boolean;
+  pinned: boolean;
+  depth: number;
+  titleWidth: number;
+  menuOpen: boolean;
+  onToggleMenu: () => void;
+  onSelect?: () => void;
+  onPin?: () => void;
+  onRename?: () => void;
+  onDelete?: () => void;
+  tokens: Theme;
+  theme?: Theme;
+}
+
+function ThreadRow(props: ThreadRowProps): React.ReactNode {
+  const { title, selected, pinned, depth, titleWidth, menuOpen, onToggleMenu, tokens, theme } =
+    props;
+  const [hovered, setHovered] = useState(false);
+  const rowRef = useRef<BoxRenderable | null>(null);
+  const { setOverlay, clearOverlay } = useRootOverlay();
+  const anchor = useFrameMeasure(
+    () => ({
+      x: rowRef.current?.x ?? 0,
+      y: rowRef.current?.y ?? 0,
+      width: rowRef.current?.width ?? 0,
+    }),
+    (left, right) => left.x === right.x && left.y === right.y && left.width === right.width,
+    { x: 0, y: 0, width: 0 },
+    menuOpen,
+  );
+  const clippedTitle = truncateTitle(title, titleWidth);
+  const hasActions =
+    props.onPin !== undefined || props.onRename !== undefined || props.onDelete !== undefined;
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    // the full-screen box closes the menu on an outside click; the menu drops from under the kebab
+    setOverlay(
+      "thread-menu",
+      <box
+        onMouseUp={onToggleMenu}
+        style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }}
+      >
+        <box
+          style={{
+            position: "absolute",
+            top: anchor.y + 1,
+            left: Math.max(0, anchor.x + anchor.width - MENU_WIDTH),
+          }}
+        >
+          <ActionsMenu
+            pinned={pinned}
+            onPin={props.onPin}
+            onRename={props.onRename}
+            onDelete={props.onDelete}
+            tokens={tokens}
+          />
+        </box>
+      </box>,
+    );
+
+    return () => clearOverlay("thread-menu");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuOpen, anchor, pinned, tokens]);
+
+  return (
+    <box style={{ flexDirection: "column" }} onMouseOut={() => setHovered(false)}>
+      <box
+        ref={rowRef}
+        onMouseUp={props.onSelect}
+        onMouseOver={() => setHovered(true)}
+        style={{
+          flexDirection: "row",
+          backgroundColor: selected ? tokens.elevated : hovered ? tokens.panel : undefined,
+        }}
+      >
+        <box style={{ width: depth * SIDEBAR_INDENT, flexShrink: 0 }} />
+        <text wrapMode="none" style={{ flexShrink: 1 }}>
+          <span fg={selected ? tokens.accent : tokens.textMuted}>{clippedTitle}</span>
+        </text>
+        <box style={{ flexGrow: 1 }} />
+        {(hovered || menuOpen) && hasActions ? (
+          <IconButton
+            glyph={NERD.kebab}
+            active={menuOpen}
+            onPress={onToggleMenu}
+            marginRight={1}
+            theme={theme}
+          />
+        ) : null}
+      </box>
+    </box>
+  );
+}
+
+export function ThreadTree({
+  rows,
+  cursor,
+  activeId,
+  focused = false,
+  pinnedIds,
+  width = 30,
+  onSelect,
+  onRequestDelete,
+  onPin,
+  onRename,
+  onCreateThread,
+  theme,
+}: ThreadTreeProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const menuControl = useMenuControl();
+  // leave room for the 3-char prefix, the border, and the hover kebab so a row
+  // never wraps: the title fades to fit whatever is left
+  const titleWidth = Math.max(8, width - 9);
+  const closeMenu = (): void => menuControl.closeMenu();
+
+  const visibleRows =
+    onCreateThread && !rows.some((row) => row.id === "section:threads")
+      ? [...rows, { kind: "section" as const, id: "section:threads", label: "Threads" }]
+      : rows;
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1 }}>
+      {visibleRows.length === 0 ? (
+        <text fg={tokens.textDim}>no threads</text>
+      ) : (
+        visibleRows.map((row, index) => {
+          if (row.kind === "section") {
+            return (
+              <box key={row.id} style={{ flexDirection: "row", marginTop: index > 0 ? 1 : 0 }}>
+                <text fg={tokens.textDim}>{row.label}</text>
+                {row.id === "section:threads" && onCreateThread ? (
+                  <>
+                    <box style={{ flexGrow: 1 }} />
+                    <IconButton
+                      glyph="+"
+                      tip="New Thread"
+                      onPress={onCreateThread}
+                      marginRight={1}
+                      theme={theme}
+                    />
+                  </>
+                ) : null}
+              </box>
+            );
+          }
+
+          if (row.kind === "project") {
+            return (
+              <text key={row.id} wrapMode="none" style={{ marginLeft: SIDEBAR_INDENT }}>
+                <span fg={tokens.textMuted}>{row.label}</span>
+              </text>
+            );
+          }
+
+          const id = row.session.id;
+          const title = threadTitle(row.session);
+
+          return (
+            <ThreadRow
+              key={row.id}
+              title={title}
+              selected={
+                focused || activeId === undefined ? row.selectionIndex === cursor : activeId === id
+              }
+              pinned={pinnedIds?.has(id) ?? false}
+              depth={row.depth}
+              titleWidth={Math.max(8, titleWidth - (row.depth - 1) * SIDEBAR_INDENT)}
+              menuOpen={menuControl.openMenuId === `thread:${id}`}
+              onToggleMenu={() => menuControl.toggleMenu(`thread:${id}`)}
+              onSelect={onSelect ? () => onSelect(id) : undefined}
+              onPin={onPin ? () => (onPin(id), closeMenu()) : undefined}
+              onRename={onRename ? () => (onRename(id, title), closeMenu()) : undefined}
+              onDelete={
+                onRequestDelete ? () => (onRequestDelete(id, title), closeMenu()) : undefined
+              }
+              tokens={tokens}
+              theme={theme}
+            />
+          );
+        })
+      )}
+    </box>
+  );
+}

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

@@ -0,0 +1,137 @@
+import { describe, expect, test } from "bun:test";
+import type { Thread, WorkspaceKey } from "@cueloop/schema";
+import { groupInbox, projectName } from "./thread-tree";
+
+function session(id: string, title: string, rootCommit?: string, remote?: string): Thread {
+  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: [],
+    message: 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);
+  });
+
+  test("a pinned thread lifts into a Starred section at the top, out of its normal group", () => {
+    // Arrange - one repo-bound thread, one standalone; pin the repo-bound one
+    const sessions = [session("a", "Pinned one", "root-1"), session("b", "Loose two")];
+
+    // Act
+    const { rows, ordered } = groupInbox(sessions, new Set(["a"]));
+
+    // Assert - Starred is the first section and holds thread a; a is gone from Projects
+    const sections = rows
+      .filter((row) => row.kind === "section")
+      .map((row) => (row.kind === "section" ? row.label : ""));
+
+    expect(sections[0]).toBe("Starred");
+    expect(sections).not.toContain("Projects"); // its only member was pinned away
+    expect(ordered[0]!.id).toBe("a"); // the cursor walks pinned threads first
+    const pinnedThreadIds = rows.filter((row) => row.kind === "thread").map((row) => row.id);
+
+    expect(pinnedThreadIds).toEqual(["a", "b"]);
+  });
+});

package/src/thread/components/thread-tree.ts

@@ -0,0 +1,112 @@
+/**
+ * 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 { Thread, 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: Thread; selectionIndex: number; depth: number };
+
+export interface GroupedInbox {
+  rows: InboxRow[];
+  ordered: Thread[];
+}
+
+function threadTitle(session: Thread): string {
+  return session.artifact.meta.title ?? session.id;
+}
+
+interface ProjectGroup {
+  name: string;
+  sessions: Thread[];
+}
+
+/** Group pending sessions into Pinned, then Projects (by root commit), then standalone Threads. */
+export function groupInbox(
+  sessions: readonly Thread[],
+  pinnedIds?: ReadonlySet<string>,
+): GroupedInbox {
+  const pinned: Thread[] = [];
+  const projects = new Map<string, ProjectGroup>();
+  const standalone: Thread[] = [];
+
+  for (const session of sessions) {
+    if (pinnedIds?.has(session.id) === true) {
+      pinned.push(session);
+      continue;
+    }
+
+    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: Thread[] = [];
+  const pushThread = (session: Thread, depth: number): void => {
+    rows.push({ kind: "thread", id: session.id, session, selectionIndex: ordered.length, depth });
+    ordered.push(session);
+  };
+
+  if (pinned.length > 0) {
+    rows.push({ kind: "section", id: "section:pinned", label: "Starred" });
+    for (const session of pinned) pushThread(session, 1);
+  }
+
+  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 });
+      // a project's threads cascade one level under its name
+      for (const session of project.sessions) pushThread(session, 2);
+    }
+  }
+
+  if (standalone.length > 0) {
+    rows.push({ kind: "section", id: "section:threads", label: "Threads" });
+    for (const session of standalone) pushThread(session, 1);
+  }
+
+  return { rows, ordered };
+}
+
+export { threadTitle };