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

package/src/settings/components/SettingsRows.tsx

@@ -0,0 +1,112 @@
+/**
+ * Typed settings rows for the settings dialog: toggle (on/off), cycle
+ * (enumerated options), and text (freeform value). Every row is one line -
+ * label column left, value right - and presses go through `onPress` so mouse
+ * and keyboard activation share one path.
+ */
+
+import React from "react";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+
+export interface SettingsRowDescriptor {
+  key: string;
+  label: string;
+  kind: "toggle" | "cycle" | "text";
+  options?: string[];
+  hint?: string;
+}
+
+interface RowShellProps {
+  label: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+function RowShell({ label, isActive, onPress, theme, children }: RowShellProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: 1,
+        backgroundColor: isActive ? tokens.border : undefined,
+      }}
+      onMouseUp={onPress}
+    >
+      <box style={{ width: 26, paddingLeft: 1 }}>
+        <text fg={isActive ? tokens.text : tokens.textMuted}>{label}</text>
+      </box>
+      {children}
+    </box>
+  );
+}
+
+export interface ToggleRowProps {
+  label: string;
+  value: boolean;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function ToggleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: ToggleRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={value ? tokens.green : tokens.accent}>{value ? "on" : "off"}</text>
+    </RowShell>
+  );
+}
+
+export interface CycleRowProps {
+  label: string;
+  value: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function CycleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: CycleRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={tokens.accent}>{value}</text>
+    </RowShell>
+  );
+}
+
+export interface TextRowProps {
+  label: string;
+  value: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function TextRow({ label, value, isActive, onPress, theme }: TextRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={tokens.accent}>{value}</text>
+    </RowShell>
+  );
+}

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "../../stories/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/settings/components/quick-actions-editor.test.tsx

@@ -0,0 +1,120 @@
+/** 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 "../../testing/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/settings/components/quick-actions-editor.tsx

@@ -0,0 +1,222 @@
+/**
+ * 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 "../../appearance/theme";
+import { ScrollArea } from "../../ui/components/ScrollArea";
+import { useComponentTheme } from "../../appearance/components/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[];
+  selectedIndex: number;
+  expandedIndex: number | null;
+  expandedField: "prompt" | "metadata";
+  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/settings/config-identity.test.ts

@@ -0,0 +1,78 @@
+import { expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { loadConfig, persistIdentity } from "./config";
+
+function withTempConfig(run: (path: string) => void): void {
+  const directory = mkdtempSync(join(tmpdir(), "cueloop-config-"));
+
+  try {
+    run(join(directory, "config.toml"));
+  } finally {
+    rmSync(directory, { recursive: true, force: true });
+  }
+}
+
+test("defaults identity to a typed provider with no name", () => {
+  withTempConfig((path) => {
+    expect(loadConfig({ userConfigPath: path }).identity).toEqual({ provider: "typed" });
+  });
+});
+
+test("persists and reloads a GitHub-synced identity", () => {
+  withTempConfig((path) => {
+    persistIdentity({ name: "Markus M", provider: "github" }, path);
+
+    expect(loadConfig({ userConfigPath: path }).identity).toEqual({
+      name: "Markus M",
+      provider: "github",
+    });
+  });
+});
+
+test("rewrites the identity block in place on a re-sync", () => {
+  withTempConfig((path) => {
+    persistIdentity({ name: "typed name", provider: "typed" }, path);
+    persistIdentity({ name: "markus", provider: "github" }, path);
+
+    expect(loadConfig({ userConfigPath: path }).identity).toEqual({
+      name: "markus",
+      provider: "github",
+    });
+  });
+});
+
+test("a display name containing a bracket survives a re-sync without corrupting the config", () => {
+  withTempConfig((path) => {
+    persistIdentity({ name: "Alice [Smith]", provider: "typed" }, path);
+    persistIdentity({ name: "Bob", provider: "github" }, path);
+
+    expect(loadConfig({ userConfigPath: path }).identity).toEqual({
+      name: "Bob",
+      provider: "github",
+    });
+  });
+});
+
+test("repository config cannot forge the reviewer identity", () => {
+  withTempConfig((userPath) => {
+    persistIdentity({ name: "Me", provider: "typed" }, userPath);
+    const repoRoot = mkdtempSync(join(tmpdir(), "cueloop-repo-"));
+
+    try {
+      mkdirSync(join(repoRoot, ".cueloop"), { recursive: true });
+      writeFileSync(
+        join(repoRoot, ".cueloop", "config.toml"),
+        '[identity]\nname = "Forged"\nprovider = "github"\n',
+      );
+
+      expect(loadConfig({ userConfigPath: userPath, repoRoot }).identity).toEqual({
+        name: "Me",
+        provider: "typed",
+      });
+    } finally {
+      rmSync(repoRoot, { recursive: true, force: true });
+    }
+  });
+});