@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.71

package/src/components/editor-grid.ts

@@ -0,0 +1,138 @@
+// The Changes pane's editor layout: a tree of nodes where a leaf is an editor group (a tab strip plus
+// its one active tab) and a branch splits child nodes along an orientation. Splitting an editor group
+// moves its active tab into a new group; a group is pruned when its last tab closes, collapsing the
+// branch that held it.
+
+/** One editor in a group's tab strip: the Changes tab (the whole diff), a per-file tab, or Welcome. */
+export interface EditorTab {
+  id: string;
+  kind: "changes" | "file" | "welcome";
+  label: string;
+  /** Repo-relative path for a file tab; absent for the Changes and Welcome tabs. */
+  path?: string;
+  /** A file tab shows either a single-file diff or the file's plain contents. */
+  fileView?: "diff" | "contents";
+}
+
+/** A leaf of the grid: one editor group holding tabs, with the active tab id. */
+export interface EditorGroup {
+  type: "group";
+  id: string;
+  tabs: EditorTab[];
+  activeTabId: string | null;
+}
+
+/** A branch of the grid: children laid out along one orientation (horizontal = side by side). */
+export interface EditorBranch {
+  type: "branch";
+  id: string;
+  orientation: "horizontal" | "vertical";
+  children: EditorNode[];
+}
+
+export type EditorNode = EditorGroup | EditorBranch;
+
+/** Which edge a split places the new group on; Left/Right split horizontally, Up/Down vertically. */
+export type SplitDirection = "left" | "right" | "up" | "down";
+
+/** A split's outcome: the new grid and the id of the group that should take focus. */
+export interface SplitResult {
+  tree: EditorNode;
+  focusGroupId: string;
+}
+
+const freshId = (): string => crypto.randomUUID();
+
+/** A new editor group holding the given tabs, with the first tab active. */
+export function makeGroup(tabs: EditorTab[]): EditorGroup {
+  return { type: "group", id: freshId(), tabs, activeTabId: tabs[0]?.id ?? null };
+}
+
+/** The Changes tab: the whole diff in one scroll, the disposable default of the Changes pane. */
+export function changesTab(): EditorTab {
+  return { id: freshId(), kind: "changes", label: "Changes" };
+}
+
+/** The Welcome tab: the getting-started surface, a disposable tab shown before any thread is opened. */
+export function welcomeTab(): EditorTab {
+  return { id: freshId(), kind: "welcome", label: "Welcome" };
+}
+
+/** A file tab, opened from a tree; a diff view for a changed file, plain contents otherwise. */
+export function fileTab(label: string, path: string, fileView: "diff" | "contents"): EditorTab {
+  return { id: freshId(), kind: "file", label, path, fileView };
+}
+
+/** The id of the first editor group in reading order; the fallback focus target. */
+export function firstGroupId(node: EditorNode): string {
+  return node.type === "group" ? node.id : firstGroupId(node.children[0]!);
+}
+
+/** Whether a group id still exists in the grid; used to re-home focus after a prune. */
+export function containsGroup(node: EditorNode, groupId: string): boolean {
+  if (node.type === "group") return node.id === groupId;
+  return node.children.some((child) => containsGroup(child, groupId));
+}
+
+function replaceGroup(
+  node: EditorNode,
+  id: string,
+  fn: (group: EditorGroup) => EditorNode,
+): EditorNode {
+  if (node.type === "group") return node.id === id ? fn(node) : node;
+  return { ...node, children: node.children.map((child) => replaceGroup(child, id, fn)) };
+}
+
+/** Make a tab the active one in its group. */
+export function activateTab(node: EditorNode, groupId: string, tabId: string): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({ ...group, activeTabId: tabId }));
+}
+
+/** Append a tab to a group and focus it. */
+export function addTab(node: EditorNode, groupId: string, tab: EditorTab): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({
+    ...group,
+    tabs: [...group.tabs, tab],
+    activeTabId: tab.id,
+  }));
+}
+
+/** Drop empty groups and collapse a branch that ends up with one child; null when nothing remains. */
+export function pruneEmpty(node: EditorNode): EditorNode | null {
+  if (node.type === "group") return node.tabs.length > 0 ? node : null;
+  const kept = node.children.map(pruneEmpty).filter((child): child is EditorNode => child !== null);
+  if (kept.length === 0) return null;
+  if (kept.length === 1) return kept[0]!;
+  return { ...node, children: kept };
+}
+
+/** Close a tab; returns the pruned tree, or null when the last tab of the whole grid is closed. */
+export function closeTab(node: EditorNode, groupId: string, tabId: string): EditorNode | null {
+  const next = replaceGroup(node, groupId, (group) => {
+    const tabs = group.tabs.filter((tab) => tab.id !== tabId);
+    const activeTabId = group.activeTabId === tabId ? (tabs[0]?.id ?? null) : group.activeTabId;
+    return { ...group, tabs, activeTabId };
+  });
+  return pruneEmpty(next);
+}
+
+/** Split a group's active tab into a new group on the given edge; returns the tree and the new focus. */
+export function splitGroup(
+  node: EditorNode,
+  groupId: string,
+  direction: SplitDirection,
+): SplitResult {
+  let focusGroupId = groupId;
+  const tree = replaceGroup(node, groupId, (group) => {
+    const active = group.tabs.find((tab) => tab.id === group.activeTabId) ?? group.tabs[0];
+    if (active === undefined) return group;
+    const movedTab: EditorTab = { ...active, id: freshId() };
+    const newGroup = makeGroup([movedTab]);
+    focusGroupId = newGroup.id;
+    const orientation = direction === "left" || direction === "right" ? "horizontal" : "vertical";
+    const newFirst = direction === "left" || direction === "up";
+    const children = newFirst ? [newGroup, group] : [group, newGroup];
+    return { type: "branch", id: freshId(), orientation, children };
+  });
+  return { tree, focusGroupId };
+}

package/src/components/fade-title.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, test } from "bun:test";
+import { fadeTitle, mixHex } from "./fade-title";
+
+describe("mixHex", () => {
+  test("returns the endpoints at t=0 and t=1", () => {
+    expect(mixHex("#000000", "#ffffff", 0)).toBe("#000000");
+    expect(mixHex("#000000", "#ffffff", 1)).toBe("#ffffff");
+  });
+
+  test("blends halfway", () => {
+    expect(mixHex("#000000", "#ffffff", 0.5)).toBe("#808080");
+  });
+
+  test("clamps out-of-range t", () => {
+    expect(mixHex("#101010", "#202020", 2)).toBe("#202020");
+    expect(mixHex("#101010", "#202020", -1)).toBe("#101010");
+  });
+});
+
+describe("fadeTitle", () => {
+  test("a title that fits is one plain segment", () => {
+    const segments = fadeTitle("short", 20, "#aabbcc", "#000000");
+
+    expect(segments).toEqual([{ text: "short", fg: "#aabbcc" }]);
+  });
+
+  test("a long title is clipped to the width and its tail fades toward the background", () => {
+    const segments = fadeTitle("Review the accent change in the theme", 20, "#ffffff", "#000000");
+
+    expect(segments.map((segment) => segment.text).join("")).toHaveLength(20);
+    // the head keeps the base color, the last characters step toward the fade color
+    expect(segments[0]!.fg).toBe("#ffffff");
+    expect(segments.at(-1)!.fg).not.toBe("#ffffff");
+    // the very last character is the most faded (closest to the background)
+    const lastTwo = segments.slice(-2);
+
+    expect(mixHex("#ffffff", "#000000", 0)).not.toBe(lastTwo[1]!.fg);
+  });
+
+  test("newlines collapse to spaces so the row never wraps", () => {
+    const segments = fadeTitle("line one\nline two", 40, "#ffffff", "#000000");
+
+    expect(segments[0]!.text).toBe("line one line two");
+  });
+
+  test("a zero width yields nothing", () => {
+    expect(fadeTitle("anything", 0, "#ffffff", "#000000")).toEqual([]);
+  });
+});

package/src/components/fade-title.ts

@@ -0,0 +1,61 @@
+/**
+ * Fits a thread title onto one line, fading the last few characters toward the
+ * background instead of cutting hard or wrapping - a gradient mask on the right.
+ * Returns colored segments the caller renders as spans.
+ */
+
+export interface TitleSegment {
+  text: string;
+  fg: string;
+}
+
+function channel(hex: string, start: number): number {
+  return Number.parseInt(hex.slice(start, start + 2), 16);
+}
+
+/** Blend two #rrggbb colors; t=0 is `from`, t=1 is `to`. */
+export function mixHex(from: string, to: string, t: number): string {
+  const clamp = Math.max(0, Math.min(1, t));
+  const parts = [1, 3, 5].map((start) => {
+    const value = Math.round(
+      channel(from, start) + (channel(to, start) - channel(from, start)) * clamp,
+    );
+
+    return value.toString(16).padStart(2, "0");
+  });
+
+  return `#${parts.join("")}`;
+}
+
+/** The tail length that fades out; kept short so most of the title stays legible. */
+const FADE_WIDTH = 5;
+
+export function fadeTitle(
+  title: string,
+  maxWidth: number,
+  baseColor: string,
+  fadeColor: string,
+): TitleSegment[] {
+  const oneLine = title.replace(/\n/g, " ");
+
+  if (maxWidth <= 0) return [];
+  if (oneLine.length <= maxWidth) return [{ text: oneLine, fg: baseColor }];
+
+  const clipped = oneLine.slice(0, maxWidth);
+  const fadeLength = Math.min(FADE_WIDTH, maxWidth);
+  const head = clipped.slice(0, maxWidth - fadeLength);
+  const segments: TitleSegment[] = head.length > 0 ? [{ text: head, fg: baseColor }] : [];
+
+  for (let index = 0; index < fadeLength; index++) {
+    // the last character reaches the background fully, so the tail masks out
+    // rather than leaving a legible word fragment
+    const progress = (index + 1) / fadeLength;
+
+    segments.push({
+      text: clipped[maxWidth - fadeLength + index]!,
+      fg: mixHex(baseColor, fadeColor, progress),
+    });
+  }
+
+  return segments;
+}

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

@@ -0,0 +1,60 @@
+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([]);
+  });
+
+  test("badges a leaf with its comment count, and leaves an uncommented file bare", () => {
+    // Act
+    const tree = buildFileTree(
+      [file("a.ts"), file("b.ts")],
+      new Map([
+        ["a.ts", 3],
+        ["b.ts", 0],
+      ]),
+    );
+
+    // Assert - a.ts shows the dot-and-count, b.ts (0) shows nothing
+    expect(tree[0]!.badge).toBe("● 3");
+    expect(tree[1]!.badge).toBeUndefined();
+  });
+});

package/src/components/file-tree.ts

@@ -0,0 +1,112 @@
+/**
+ * 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;
+  badge?: string;
+  children?: Map<string, MutableTreeNode>;
+}
+
+function freeze(node: MutableTreeNode): TreeNode {
+  if (node.children === undefined) {
+    const leaf: TreeNode = { id: node.id, label: node.label, status: node.status };
+
+    if (node.badge !== undefined) leaf.badge = node.badge;
+
+    return leaf;
+  }
+
+  return {
+    id: node.id,
+    label: node.label,
+    children: [...node.children.values()].map(freeze),
+  };
+}
+
+/** A file's comment count as a leaf badge, or undefined when it carries none. */
+function commentBadge(
+  counts: ReadonlyMap<string, number> | undefined,
+  path: string,
+): string | undefined {
+  const count = counts?.get(path);
+
+  return count ? `● ${count}` : undefined;
+}
+
+/**
+ * Group changed files into a directory tree; leaves are keyed by their full path. A leaf whose
+ * file carries comments shows a dot-and-count badge, so feedback is visible even with its tab closed.
+ */
+export function buildFileTree(
+  files: readonly DiffFileContents[],
+  commentCounts?: ReadonlyMap<string, number>,
+): 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),
+              badge: commentBadge(commentCounts, file.path),
+            }
+          : { id: prefix, label: segment, children: new Map() };
+        level.set(segment, node);
+      }
+      if (!isLeaf) level = node.children!;
+    });
+  }
+
+  return [...roots.values()].map(freeze);
+}
+
+/** Group plain repo-relative paths (git ls-files) into a directory tree; leaves keep their full path. */
+export function buildPathTree(paths: readonly string[]): TreeNode[] {
+  const roots = new Map<string, MutableTreeNode>();
+
+  for (const path of paths) {
+    const segments = 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: path, label: segment }
+          : { 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 { PaneGrid } from "../PaneGrid";
+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: () => (
+    <PaneGrid
+      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

@@ -0,0 +1,32 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Button } from "./Button";
+import { Toolbar } from "./Toolbar";
+
+export const meta: StoryMeta = { title: "Primitives/Button" };
+
+export const Variants: Story = {
+  render: () => (
+    <Toolbar>
+      <Button variant="solid" marginRight={2} onPress={() => {}}>
+        {" Save "}
+      </Button>
+      <Button marginRight={2} onPress={() => {}}>
+        {" Cancel esc "}
+      </Button>
+      <Button variant="accent-text" onPress={() => {}}>
+        {"Submit review"}
+      </Button>
+    </Toolbar>
+  ),
+  expectedColors: [DARK.accent, DARK.accentInk, DARK.textDim],
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Button isDisabled onPress={() => {}}>
+      {" Edit "}
+    </Button>
+  ),
+};

package/src/components/primitives/Button.tsx

@@ -0,0 +1,52 @@
+/**
+ * Word-button: a pressable label. `onPress` unifies mouse and (future)
+ * keyboard activation; `isDisabled` swallows presses without changing the
+ * rendered label, so read-only affordances keep their place in the layout.
+ */
+
+import React from "react";
+import type { MouseEvent } from "@opentui/core";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+
+export interface ButtonProps {
+  /** Unified activation: mouse release today, keyboard activation tomorrow. */
+  onPress: () => void;
+  isDisabled?: boolean;
+  /** solid = accent-filled call to action; plain = quiet word-button. */
+  variant?: "solid" | "plain" | "accent-text";
+  marginRight?: number;
+  theme?: Theme;
+  children: string;
+}
+
+export function Button({
+  onPress,
+  isDisabled = false,
+  variant = "plain",
+  marginRight,
+  theme,
+  children,
+}: ButtonProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const backgroundColor = variant === "solid" ? tokens.accent : undefined;
+  const foreground =
+    variant === "solid"
+      ? tokens.accentInk
+      : variant === "accent-text"
+        ? tokens.accent
+        : tokens.textDim;
+
+  return (
+    <box
+      style={{ backgroundColor, marginRight }}
+      onMouseUp={(event: MouseEvent) => {
+        // Consume the press so it never bubbles to an ancestor's onMouseUp (e.g. a card).
+        event.stopPropagation();
+        if (!isDisabled) onPress();
+      }}
+    >
+      <text fg={foreground}>{children}</text>
+    </box>
+  );
+}