@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.90

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { QuickActionsEditor } from "./quick-actions-editor";
+
+export const meta: StoryMeta = { title: "Chrome/QuickActionsEditor" };
+
+/** The editor renders inside the settings body column. */
+function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ width: 54, height: 22, paddingLeft: 2, backgroundColor: DARK.elevated }}>
+      {children}
+    </box>
+  );
+}
+
+const noop = () => {};
+
+export const Collapsed: Story = {
+  render: () => (
+    <BodyFrame>
+      <QuickActionsEditor
+        actions={DEFAULT_QUICK_ACTIONS}
+        selectedIndex={0}
+        expandedIndex={null}
+        expandedField="prompt"
+        onToggleExpand={noop}
+        onEditPrompt={() => {}}
+        onEditMetadata={noop}
+        onReset={noop}
+        onAdd={noop}
+        theme={DARK}
+      />
+    </BodyFrame>
+  ),
+  size: { width: 54, height: 22 },
+};
+
+export const RowExpanded: Story = {
+  render: () => (
+    <BodyFrame>
+      <QuickActionsEditor
+        actions={DEFAULT_QUICK_ACTIONS}
+        selectedIndex={1}
+        expandedIndex={1}
+        expandedField="prompt"
+        onToggleExpand={noop}
+        onEditPrompt={() => {}}
+        onEditMetadata={noop}
+        onReset={noop}
+        onAdd={noop}
+        theme={DARK}
+      />
+    </BodyFrame>
+  ),
+  size: { width: 54, height: 22 },
+};

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

@@ -0,0 +1,117 @@
+/** The Actions editor scrolls the list, and an expanded row edits both the title and the description. */
+
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import type { QuickAction } from "../config";
+import { locateText, settle, typeText } from "../test-support";
+import { QuickActionsEditor } from "./quick-actions-editor";
+
+const MANY: QuickAction[] = Array.from({ length: 14 }, (_, index) => ({
+  prompt: `Action number ${index}`,
+}));
+
+async function mount(selectedIndex: number) {
+  const setup = await testRender(
+    <QuickActionsEditor
+      actions={MANY}
+      selectedIndex={selectedIndex}
+      expandedIndex={null}
+      expandedField="prompt"
+      onToggleExpand={() => {}}
+      onEditPrompt={() => {}}
+      onEditMetadata={() => {}}
+      onReset={() => {}}
+      onAdd={() => {}}
+    />,
+    { width: 60, height: 10 },
+  );
+
+  await settle(setup);
+  await settle(setup);
+  await settle(setup);
+  await settle(setup);
+
+  return setup;
+}
+
+describe("QuickActionsEditor scrolling", () => {
+  test("a list too long for the pane clips into the scroll area instead of overlapping rows", async () => {
+    const setup = await mount(0);
+    const lines = setup.captureCharFrame().split("\n");
+
+    // the top rows read cleanly on their own lines - the overflow no longer paints rows on top of each other
+    expect(lines.some((line) => line.includes("Action number 0"))).toBe(true);
+    expect(lines.some((line) => line.includes("Action number 1"))).toBe(true);
+    // a bottom row is scrolled out of the clipped pane, not overlaid onto a visible one
+    expect(setup.captureCharFrame()).not.toContain("Action number 13");
+
+    setup.renderer.destroy();
+  });
+});
+
+describe("editing an expanded action", () => {
+  test("an expanded row edits both the title and the description", async () => {
+    const prompts: string[] = [];
+    const metadatas: string[] = [];
+    const setup = await testRender(
+      <QuickActionsEditor
+        actions={[{ prompt: "Ship it", metadata: "be terse" }]}
+        selectedIndex={0}
+        expandedIndex={0}
+        expandedField="prompt"
+        onToggleExpand={() => {}}
+        onEditPrompt={(_index, prompt) => prompts.push(prompt)}
+        onEditMetadata={(_index, metadata) => metadatas.push(metadata)}
+        onReset={() => {}}
+        onAdd={() => {}}
+      />,
+      { width: 60, height: 8 },
+    );
+
+    await settle(setup);
+    await settle(setup);
+
+    await typeText(setup, "!");
+    expect(prompts.at(-1)).toBe("Ship it!");
+
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+    await typeText(setup, "X");
+    expect(metadatas.at(-1)).toBe("be terseX");
+
+    setup.renderer.destroy();
+  });
+
+  test("clicking the description row opens the editor on the metadata field directly", async () => {
+    const toggles: Array<{ index: number; field: "prompt" | "metadata" }> = [];
+    const setup = await testRender(
+      <QuickActionsEditor
+        actions={[{ prompt: "Ship it", metadata: "be terse" }]}
+        selectedIndex={0}
+        expandedIndex={null}
+        expandedField="prompt"
+        onToggleExpand={(index, field) => toggles.push({ index, field })}
+        onEditPrompt={() => {}}
+        onEditMetadata={() => {}}
+        onReset={() => {}}
+        onAdd={() => {}}
+      />,
+      { width: 60, height: 8 },
+    );
+    await settle(setup);
+
+    // clicking the title opens the title field; clicking the description opens the metadata field
+    const title = locateText(setup, "Ship it");
+    await setup.mockMouse.click(title.column, title.row);
+    const description = locateText(setup, "be terse");
+    await setup.mockMouse.click(description.column, description.row);
+
+    expect(toggles).toEqual([
+      { index: 0, field: "prompt" },
+      { index: 0, field: "metadata" },
+    ]);
+
+    setup.renderer.destroy();
+  });
+});

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

@@ -0,0 +1,226 @@
+/**
+ * The Settings "Actions" body: the quick-action vocabulary editor. Each row is a
+ * clickable prompt; the selected-and-expanded row reveals a focused input for the
+ * per-action system prompt (the extra guidance appended when the action is used).
+ * A reset-to-defaults control and an add-action row bracket the list. Controlled:
+ * the app owns the actions, the selection, and which row is expanded.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import type { KeyBinding, ScrollBoxRenderable, TextareaRenderable } from "@opentui/core";
+import type { QuickAction } from "../config";
+import type { Theme } from "../theme";
+import { ScrollArea } from "./ScrollArea";
+import { useComponentTheme } from "./theme-context";
+
+// ⏎ never inserts a newline: a system prompt is one line, esc closes the editor.
+const ACTION_INPUT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+export interface QuickActionsEditorProps {
+  actions: QuickAction[];
+  /** The highlighted row; equals the settings body row index. */
+  selectedIndex: number;
+  /** The row whose system-prompt input is open and focused, or null. */
+  expandedIndex: number | null;
+  /** Which field the open editor focuses first - set by the clicked row. */
+  expandedField: "prompt" | "metadata";
+  /** Select and toggle a row's editor open/closed, focusing the given field. */
+  onToggleExpand: (index: number, field: "prompt" | "metadata") => void;
+  onEditPrompt: (index: number, prompt: string) => void;
+  onEditMetadata: (index: number, metadata: string) => void;
+  onReset: () => void;
+  onAdd: () => void;
+  theme?: Theme;
+}
+
+export function QuickActionsEditor({
+  actions,
+  selectedIndex,
+  expandedIndex,
+  expandedField,
+  onToggleExpand,
+  onEditPrompt,
+  onEditMetadata,
+  onReset,
+  onAdd,
+  theme,
+}: QuickActionsEditorProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  useEffect(() => {
+    scrollRef.current?.scrollChildIntoView(`action-row-${selectedIndex}`);
+  }, [selectedIndex]);
+
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1 }}>
+      <box style={{ flexDirection: "row" }}>
+        <box style={{ flexGrow: 1 }} />
+        <box onMouseUp={onReset}>
+          <text fg={tokens.textDim}>reset</text>
+        </box>
+      </box>
+      <box style={{ height: 1 }} />
+      <ScrollArea scrollRef={scrollRef}>
+        {actions.map((action, index) => (
+          <ActionRow
+            key={index}
+            rowId={`action-row-${index}`}
+            action={action}
+            isSelected={index === selectedIndex}
+            isExpanded={index === expandedIndex}
+            initialField={expandedField}
+            onToggleExpand={(field) => onToggleExpand(index, field)}
+            onEditPrompt={(prompt) => onEditPrompt(index, prompt)}
+            onEditMetadata={(metadata) => onEditMetadata(index, metadata)}
+            theme={theme}
+          />
+        ))}
+        <box
+          id={`action-row-${actions.length}`}
+          style={{ backgroundColor: selectedIndex === actions.length ? tokens.border : undefined }}
+          onMouseUp={onAdd}
+        >
+          <text fg={tokens.textMuted}>+ Add action</text>
+        </box>
+      </ScrollArea>
+    </box>
+  );
+}
+
+function ActionRow({
+  rowId,
+  action,
+  isSelected,
+  isExpanded,
+  initialField,
+  onToggleExpand,
+  onEditPrompt,
+  onEditMetadata,
+  theme,
+}: {
+  rowId: string;
+  action: QuickAction;
+  isSelected: boolean;
+  isExpanded: boolean;
+  initialField: "prompt" | "metadata";
+  onToggleExpand: (field: "prompt" | "metadata") => void;
+  onEditPrompt: (prompt: string) => void;
+  onEditMetadata: (metadata: string) => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  if (isExpanded) {
+    return (
+      <box id={rowId} style={{ flexDirection: "column" }}>
+        <ActionEditor
+          action={action}
+          isSelected={isSelected}
+          initialField={initialField}
+          onEditPrompt={onEditPrompt}
+          onEditMetadata={onEditMetadata}
+          onDone={() => onToggleExpand("prompt")}
+          tokens={tokens}
+        />
+      </box>
+    );
+  }
+
+  return (
+    <box id={rowId} style={{ flexDirection: "column" }}>
+      <box
+        style={{ backgroundColor: isSelected ? tokens.border : undefined }}
+        onMouseUp={() => onToggleExpand("prompt")}
+      >
+        <text fg={isSelected ? tokens.text : tokens.textMuted}>{action.prompt}</text>
+      </box>
+      {action.metadata ? (
+        <box onMouseUp={() => onToggleExpand("metadata")}>
+          <text fg={tokens.textDim}>{truncateMetadata(action.metadata)}</text>
+        </box>
+      ) : null}
+    </box>
+  );
+}
+
+/**
+ * The two-field editor for an expanded row: the action title over its system
+ * prompt. Mounts fresh per expand, so focus starts on the clicked field without a
+ * reset effect; ⏎ steps title -> description -> close, and a click focuses either.
+ */
+function ActionEditor({
+  action,
+  isSelected,
+  initialField,
+  onEditPrompt,
+  onEditMetadata,
+  onDone,
+  tokens,
+}: {
+  action: QuickAction;
+  isSelected: boolean;
+  initialField: "prompt" | "metadata";
+  onEditPrompt: (prompt: string) => void;
+  onEditMetadata: (metadata: string) => void;
+  onDone: () => void;
+  tokens: Theme;
+}): React.ReactNode {
+  const promptRef = useRef<TextareaRenderable | null>(null);
+  const metadataRef = useRef<TextareaRenderable | null>(null);
+  const [activeField, setActiveField] = useState<"prompt" | "metadata">(initialField);
+
+  // the focused field types from its end, not from the caret parked at the start
+  useEffect(() => {
+    const editor = activeField === "prompt" ? promptRef.current : metadataRef.current;
+
+    if (editor) editor.cursorOffset = editor.plainText.length;
+  }, [activeField]);
+
+  const fieldStyle = {
+    height: 1,
+    flexGrow: 1,
+    backgroundColor: tokens.elevated,
+    focusedBackgroundColor: tokens.elevated,
+    textColor: tokens.text,
+    focusedTextColor: tokens.text,
+  } as const;
+
+  return (
+    <>
+      <box
+        style={{ flexDirection: "row", backgroundColor: isSelected ? tokens.border : undefined }}
+      >
+        <textarea
+          ref={promptRef}
+          focused={activeField === "prompt"}
+          initialValue={action.prompt}
+          placeholder="action title"
+          keyBindings={ACTION_INPUT_KEY_BINDINGS}
+          onMouseUp={() => setActiveField("prompt")}
+          onSubmit={() => setActiveField("metadata")}
+          onContentChange={() => onEditPrompt(promptRef.current?.plainText ?? "")}
+          style={fieldStyle}
+        />
+      </box>
+      <box style={{ flexDirection: "row" }}>
+        <textarea
+          ref={metadataRef}
+          focused={activeField === "metadata"}
+          initialValue={action.metadata ?? ""}
+          placeholder="extra system prompt appended to this comment (optional)"
+          keyBindings={ACTION_INPUT_KEY_BINDINGS}
+          onMouseUp={() => setActiveField("metadata")}
+          onSubmit={onDone}
+          onContentChange={() => onEditMetadata(metadataRef.current?.plainText ?? "")}
+          style={fieldStyle}
+        />
+      </box>
+    </>
+  );
+}
+
+/** A one-line preview of the system prompt under a collapsed row. */
+function truncateMetadata(metadata: string): string {
+  return metadata.length > 44 ? `${metadata.slice(0, 43)}…` : metadata;
+}

package/src/components/share-dialog-store.ts

@@ -0,0 +1,58 @@
+/**
+ * UI state for the share dialog, held in a zustand store rather than juggled
+ * across component state: which category is open (share externally / export),
+ * whether the link wizard is showing, and the wizard's draft (name, auth,
+ * allowlist). The links themselves live on the thread; this is only the
+ * ephemeral surface state.
+ */
+
+import { createStore } from "zustand/vanilla";
+import { useStore } from "zustand";
+
+export type ShareCategory = "external" | "export";
+
+export interface ShareWizardDraft {
+  /** The link being edited, or null when creating a new one. */
+  editingId: string | null;
+  name: string;
+  requireAuth: boolean;
+  allowlist: string[];
+}
+
+export interface ShareDialogState {
+  category: ShareCategory;
+  /** Null = the links list; a draft = the new/edit wizard. */
+  wizard: ShareWizardDraft | null;
+  setCategory: (category: ShareCategory) => void;
+  openWizard: (draft: ShareWizardDraft) => void;
+  closeWizard: () => void;
+  setName: (name: string) => void;
+  setRequireAuth: (requireAuth: boolean) => void;
+  setAllowlist: (allowlist: string[]) => void;
+  /** Reset to the opening state (links list, external tab) when the dialog opens. */
+  reset: () => void;
+}
+
+/** A fresh wizard draft, prefilled with the thread name for a new link. */
+export function newWizardDraft(threadName: string): ShareWizardDraft {
+  return { editingId: null, name: threadName, requireAuth: false, allowlist: [] };
+}
+
+export const shareDialogStore = createStore<ShareDialogState>((set) => ({
+  category: "external",
+  wizard: null,
+  setCategory: (category) => set({ category }),
+  openWizard: (wizard) => set({ wizard }),
+  closeWizard: () => set({ wizard: null }),
+  setName: (name) => set((state) => (state.wizard ? { wizard: { ...state.wizard, name } } : {})),
+  setRequireAuth: (requireAuth) =>
+    set((state) => (state.wizard ? { wizard: { ...state.wizard, requireAuth } } : {})),
+  setAllowlist: (allowlist) =>
+    set((state) => (state.wizard ? { wizard: { ...state.wizard, allowlist } } : {})),
+  reset: () => set({ category: "external", wizard: null }),
+}));
+
+/** Subscribe a component to the share dialog store. */
+export function useShareDialog<T>(selector: (state: ShareDialogState) => T): T {
+  return useStore(shareDialogStore, selector);
+}