@cueloop/client 0.1.0-alpha.11 → 0.1.0-alpha.111

package/src/settings/use-settings-dialog.test.tsx

@@ -0,0 +1,172 @@
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { loadConfig } from "./config";
+import { expect, test } from "bun:test";
+import React, { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../appearance/theme";
+import { settle, locateText, typeText } from "../testing/test-support";
+import { SettingsDialog } from "./components/SettingsDialog";
+import { useSettingsDialog } from "./use-settings-dialog";
+
+function TestThreadSettings({
+  enabled,
+  onSwitch,
+}: {
+  enabled: boolean;
+  onSwitch: (harness: string) => void;
+}) {
+  const [harness, setHarness] = useState<"pi" | "fx">("pi");
+  const [threadDefaults, setThreadDefaults] = useState(() => {
+    const config = loadConfig();
+
+    return { pi: config.thread.pi, fx: config.thread.fx };
+  });
+  const model = useSettingsDialog({
+    threadDefaults,
+    setThreadDefaults,
+    theme: DARK,
+    appearance: "dark",
+    autoClose: "off",
+    setAutoClose() {},
+    diffView: "split",
+    setDiffView() {},
+    themeName: "cueloop",
+    setThemeName() {},
+    themeOverrides: {},
+    setTheme() {},
+    quickActions: [],
+    setQuickActions() {},
+    setMenuDialog() {},
+    identityProvider: "typed",
+    onSyncGithubIdentity() {},
+    onRenameDisplayName() {},
+    reviewSkill: "code-review",
+    reviewWorkspace: "worktree",
+    setReviewWorkspace() {},
+    canSwitchHarness: enabled,
+    threadHarness: harness,
+    onSwitchHarness(next) {
+      setHarness(next);
+      onSwitch(next);
+    },
+  });
+
+  useKeyboard((key) => model.handleSettingsKey(key.name));
+
+  return (
+    <SettingsDialog
+      isOpen
+      version="test"
+      categories={model.settingsCategories}
+      values={model.settingsValues}
+      keybindsSections={[]}
+      activeCategoryId={model.settingsNav.categoryId}
+      activeRowIndex={model.settingsNav.rowIndex}
+      activeZone={model.settingsNav.zone}
+      onCategorySelect={model.onCategorySelect}
+      onRowActivate={(row) => model.cycleSetting(row.key)}
+      onClose={() => {}}
+    />
+  );
+}
+
+test("Thread settings switches harness by mouse and disappears without owner capability", async () => {
+  const changes: string[] = [];
+  const setup = await testRender(
+    <TestThreadSettings enabled onSwitch={(next) => changes.push(next)} />,
+    { width: 90, height: 28 },
+  );
+
+  try {
+    await settle(setup);
+    const category = locateText(setup, "Thread");
+
+    await setup.mockMouse.click(category.column, category.row);
+    await settle(setup);
+    const row = locateText(setup, "Harness");
+
+    await setup.mockMouse.click(row.column, row.row);
+    await settle(setup);
+    expect(changes).toEqual(["fx"]);
+    expect(setup.captureCharFrame()).toContain("fx");
+    await setup.mockMouse.click(row.column, row.row);
+    await settle(setup);
+    expect(changes).toEqual(["fx", "pi"]);
+  } finally {
+    setup.renderer.destroy();
+  }
+  const disabled = await testRender(<TestThreadSettings enabled={false} onSwitch={() => {}} />, {
+    width: 90,
+    height: 28,
+  });
+
+  try {
+    await settle(disabled);
+    expect(disabled.captureCharFrame()).not.toContain("Thread");
+  } finally {
+    disabled.renderer.destroy();
+  }
+});
+
+test("Thread settings edits model defaults and effort and persists them to TOML", async () => {
+  const directory = mkdtempSync(join(tmpdir(), "cueloop-settings-model-"));
+  const previous = process.env.CUELOOP_CONFIG;
+  const path = join(directory, "config.toml");
+
+  process.env.CUELOOP_CONFIG = path;
+  const setup = await testRender(<TestThreadSettings enabled onSwitch={() => {}} />, {
+    width: 100,
+    height: 30,
+  });
+
+  try {
+    await settle(setup);
+    const category = locateText(setup, "Thread");
+
+    await setup.mockMouse.click(category.column, category.row);
+    await settle(setup);
+    expect(setup.captureCharFrame()).toContain("gpt-6.1-sol");
+    expect(setup.captureCharFrame()).toContain("grok-4.7");
+    const effort = locateText(setup, "pi default effort");
+
+    await setup.mockMouse.click(effort.column, effort.row);
+    await settle(setup);
+    expect(loadConfig({ userConfigPath: path }).thread.pi.effort).toBe("high");
+    const model = locateText(setup, "pi default model");
+
+    await setup.mockMouse.click(model.column, model.row);
+    await settle(setup);
+    await typeText(setup, "-custom");
+    await settle(setup);
+    const save = locateText(setup, "save");
+
+    await setup.mockMouse.click(save.column, save.row);
+    await settle(setup);
+    expect(loadConfig({ userConfigPath: path }).thread.pi.model).toBe(
+      "openai-codex/gpt-6.1-sol-custom",
+    );
+    expect(setup.captureCharFrame()).toContain("gpt-6.1-sol-custom");
+    const fxModel = locateText(setup, "fx default model");
+
+    await setup.mockMouse.click(fxModel.column, fxModel.row);
+    await settle(setup);
+    await typeText(setup, "-cancelled");
+    setup.mockInput.pressKey("ESC");
+    await settle(setup);
+    expect(setup.captureCharFrame()).not.toContain("Default model for new Threads");
+    expect(loadConfig({ userConfigPath: path }).thread.fx).toEqual({
+      model: "grok/grok-4.7",
+      effort: "medium",
+    });
+  } finally {
+    setup.renderer.destroy();
+
+    if (previous === undefined) delete process.env.CUELOOP_CONFIG;
+    else process.env.CUELOOP_CONFIG = previous;
+
+    rmSync(directory, { recursive: true, force: true });
+  }
+});

package/src/settings/use-settings-dialog.tsx

@@ -0,0 +1,465 @@
+import React, { useState, type Dispatch, type SetStateAction } from "react";
+import {
+  DEFAULT_QUICK_ACTIONS,
+  persistThreadModelDefault,
+  persistActions,
+  persistAutoClose,
+  persistDiffView,
+  persistReviewWorkspace,
+  persistTheme,
+  type AutoClose,
+  type DiffViewMode,
+  type QuickAction,
+  type ReviewWorkspaceMode,
+} from "./config";
+import {
+  composeTheme,
+  THEME_LABELS,
+  THEME_NAMES,
+  type Appearance,
+  type ThemeName,
+} from "../appearance/theme-presets";
+import {
+  AGENT_REASONING_EFFORTS,
+  type ThreadModelDefaults,
+  type AgentReasoningEffort,
+} from "@cueloop/schema";
+import { PromptDialog } from "../ui/components/PromptDialog";
+import type { Theme } from "../appearance/theme";
+import type { SettingsCategory } from "./components/SettingsDialog";
+import { QuickActionsEditor } from "./components/quick-actions-editor";
+
+export interface SettingsNav {
+  categoryId: string;
+  rowIndex: number;
+  zone: "nav" | "body";
+}
+
+export interface SettingsDialogModel {
+  settingsNav: SettingsNav;
+  actionsExpandedIndex: number | null;
+  setActionsExpandedIndex: Dispatch<SetStateAction<number | null>>;
+  settingsCategories: SettingsCategory[];
+  settingsValues: Record<string, string>;
+  cycleSetting: (rowKey: string) => void;
+  handleSettingsKey: (name: string) => void;
+  onCategorySelect: (categoryId: string) => void;
+  openSettings: () => void;
+}
+
+const DOWN_KEYS = new Set(["j", "down"]);
+const UP_KEYS = new Set(["k", "up"]);
+const ENTER_BODY_KEYS = new Set(["l", "right", "tab", "return"]);
+const BACK_TO_NAV_KEYS = new Set(["h", "left", "tab"]);
+const ACTIVATE_KEYS = new Set(["return", "space", "l"]);
+
+function moveNavZone(
+  name: string,
+  categoryIndex: number,
+  categories: SettingsCategory[],
+): SettingsNav | null {
+  if (DOWN_KEYS.has(name))
+    return {
+      categoryId: categories[Math.min(categories.length - 1, categoryIndex + 1)]!.id,
+      rowIndex: 0,
+      zone: "nav",
+    };
+
+  if (UP_KEYS.has(name))
+    return { categoryId: categories[Math.max(0, categoryIndex - 1)]!.id, rowIndex: 0, zone: "nav" };
+
+  if (ENTER_BODY_KEYS.has(name))
+    return { categoryId: categories[categoryIndex]!.id, rowIndex: 0, zone: "body" };
+
+  return null;
+}
+
+function moveBodyRow(name: string, nav: SettingsNav, rowCount: number): SettingsNav | null {
+  if (DOWN_KEYS.has(name)) return { ...nav, rowIndex: Math.min(rowCount - 1, nav.rowIndex + 1) };
+
+  if (UP_KEYS.has(name)) return { ...nav, rowIndex: Math.max(0, nav.rowIndex - 1) };
+
+  if (BACK_TO_NAV_KEYS.has(name)) return { ...nav, zone: "nav" };
+
+  return null;
+}
+
+export function useSettingsDialog(params: {
+  threadDefaults: Record<"pi" | "fx", ThreadModelDefaults>;
+  setThreadDefaults: Dispatch<SetStateAction<Record<"pi" | "fx", ThreadModelDefaults>>>;
+  theme: Theme;
+  appearance: Appearance;
+  autoClose: AutoClose;
+  setAutoClose: Dispatch<SetStateAction<AutoClose>>;
+  diffView: DiffViewMode;
+  setDiffView: Dispatch<SetStateAction<DiffViewMode>>;
+  themeName: ThemeName;
+  setThemeName: Dispatch<SetStateAction<ThemeName>>;
+  themeOverrides: Partial<Theme>;
+  setTheme: Dispatch<SetStateAction<Theme>>;
+  quickActions: QuickAction[];
+  setQuickActions: Dispatch<SetStateAction<QuickAction[]>>;
+  setMenuDialog: Dispatch<SetStateAction<"keybinds" | "settings" | null>>;
+  identityName?: string;
+  identityProvider: "typed" | "github";
+  onSyncGithubIdentity: () => void;
+  onRenameDisplayName: () => void;
+  reviewSkill: string;
+  reviewWorkspace: ReviewWorkspaceMode;
+  setReviewWorkspace: Dispatch<SetStateAction<ReviewWorkspaceMode>>;
+  threadHarness?: "pi" | "fx";
+  canSwitchHarness?: boolean;
+  onSwitchHarness?: (harness: "pi" | "fx") => void;
+}): SettingsDialogModel {
+  const {
+    theme,
+    appearance,
+    autoClose,
+    setAutoClose,
+    diffView,
+    setDiffView,
+    themeName,
+    setThemeName,
+    themeOverrides,
+    setTheme,
+    quickActions,
+    setQuickActions,
+    setMenuDialog,
+    identityName,
+    identityProvider,
+    onSyncGithubIdentity,
+    onRenameDisplayName,
+    reviewSkill,
+    reviewWorkspace,
+    setReviewWorkspace,
+    threadHarness,
+    canSwitchHarness,
+    onSwitchHarness,
+  } = params;
+
+  const { threadDefaults, setThreadDefaults } = params;
+  const [modelEditor, setModelEditor] = useState<{ harness: "pi" | "fx"; text: string } | null>(
+    null,
+  );
+
+  const saveModelDefault = (): void => {
+    if (!modelEditor?.text.trim()) return;
+
+    const { harness, text } = modelEditor;
+    const model = text.trim();
+
+    persistThreadModelDefault(harness, "model", model);
+    setThreadDefaults((defaults) => ({ ...defaults, [harness]: { ...defaults[harness], model } }));
+    setModelEditor(null);
+  };
+
+  // open focused on the left nav, so up/down browses categories until l/tab/enter enters the body
+  const [settingsNav, setSettingsNav] = useState<SettingsNav>({
+    categoryId: "general",
+    rowIndex: 0,
+    zone: "nav",
+  });
+  const [actionsExpandedIndex, setActionsExpandedIndex] = useState<number | null>(null);
+  const [actionsExpandedField, setActionsExpandedField] = useState<"prompt" | "metadata">("prompt");
+
+  const commitActions = (next: QuickAction[]): void => {
+    setQuickActions(next);
+    persistActions(next);
+  };
+  const editActionPrompt = (index: number, prompt: string): void => {
+    // a blank title fails the config schema and would vanish on reload, so never persist one
+    if (prompt.trim().length === 0) return;
+
+    commitActions(
+      quickActions.map((action, actionIndex) =>
+        actionIndex === index ? { ...action, prompt } : action,
+      ),
+    );
+  };
+  const editActionMetadata = (index: number, metadata: string): void =>
+    commitActions(
+      quickActions.map((action, actionIndex) =>
+        actionIndex === index
+          ? { ...action, metadata: metadata.trim() ? metadata : undefined }
+          : action,
+      ),
+    );
+  const resetActions = (): void => {
+    setActionsExpandedIndex(null);
+    commitActions(DEFAULT_QUICK_ACTIONS.map((action) => ({ ...action })));
+  };
+  const addAction = (): void => {
+    setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: quickActions.length }));
+    commitActions([...quickActions, { prompt: "New action" }]);
+  };
+
+  const settingsCategories: SettingsCategory[] = [
+    {
+      id: "general",
+      name: "General",
+      rows: [
+        {
+          key: "autoClose",
+          label: "Auto-close on submit",
+          kind: "cycle",
+          options: ["off", "3s", "10s"],
+        },
+        {
+          key: "diffView",
+          label: "Diff view",
+          kind: "cycle",
+          options: ["Split", "Stacked"],
+        },
+      ],
+    },
+    {
+      id: "account",
+      name: "Account",
+      rows: [
+        { key: "displayName", label: "Display name", kind: "text" },
+        { key: "identitySource", label: "Source", kind: "text" },
+        { key: "syncGithub", label: "Sync from GitHub", kind: "text" },
+      ],
+    },
+    {
+      id: "appearance",
+      name: "Appearance",
+      rows: [
+        {
+          key: "theme",
+          label: "Theme",
+          kind: "cycle",
+          options: THEME_NAMES.map((name) => THEME_LABELS[name]),
+        },
+      ],
+    },
+    {
+      id: "review",
+      name: "Review",
+      rows: [
+        {
+          key: "reviewSkill",
+          label: "Skill",
+          kind: "text",
+        },
+        {
+          key: "reviewWorkspace",
+          label: "Workspace",
+          kind: "cycle",
+          options: ["worktree", "current"],
+        },
+      ],
+    },
+    ...(canSwitchHarness
+      ? [
+          {
+            id: "thread",
+            name: "Thread",
+            rows: [
+              {
+                key: "threadHarness",
+                label: "Harness",
+                kind: "cycle" as const,
+                options: ["pi", "fx"],
+              },
+              { key: "piModel", label: "pi default model", kind: "text" as const },
+              {
+                key: "piEffort",
+                label: "pi default effort",
+                kind: "cycle" as const,
+                options: [...AGENT_REASONING_EFFORTS],
+              },
+              { key: "fxModel", label: "fx default model", kind: "text" as const },
+              {
+                key: "fxEffort",
+                label: "fx default effort",
+                kind: "cycle" as const,
+                options: [...AGENT_REASONING_EFFORTS],
+              },
+            ],
+            customBody: modelEditor ? (
+              <PromptDialog
+                isOpen
+                title=" Default model for new Threads "
+                label={`${modelEditor.harness} model (provider/model)`}
+                value={modelEditor.text}
+                onInput={(text) => setModelEditor({ ...modelEditor, text })}
+                onSave={saveModelDefault}
+                onCancel={() => setModelEditor(null)}
+                theme={theme}
+              />
+            ) : undefined,
+          },
+        ]
+      : []),
+    {
+      id: "actions",
+      name: "Actions",
+      rows: [],
+      customBody: (
+        <QuickActionsEditor
+          actions={quickActions}
+          selectedIndex={settingsNav.categoryId === "actions" ? settingsNav.rowIndex : -1}
+          expandedIndex={actionsExpandedIndex}
+          expandedField={actionsExpandedField}
+          onToggleExpand={(index, field) => {
+            setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: index }));
+            setActionsExpandedField(field);
+            setActionsExpandedIndex((current) => (current === index ? null : index));
+          }}
+          onEditPrompt={editActionPrompt}
+          onEditMetadata={editActionMetadata}
+          onReset={resetActions}
+          onAdd={addAction}
+          theme={theme}
+        />
+      ),
+    },
+    {
+      id: "keybinds",
+      name: "Keybinds",
+      rows: [],
+    },
+  ];
+  const settingsValues = {
+    autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
+    diffView: diffView === "split" ? "Split" : "Stacked",
+    theme: THEME_LABELS[themeName],
+    displayName: identityName ?? "-- not set --",
+    identitySource: identityProvider === "github" ? "GitHub" : "typed",
+    syncGithub: "enter to sync",
+    reviewSkill,
+    reviewWorkspace,
+    threadHarness: threadHarness ?? "pi",
+    piModel: threadDefaults.pi.model.replace(/^[^/]+\//, ""),
+    piEffort: threadDefaults.pi.effort,
+    fxModel: threadDefaults.fx.model.replace(/^[^/]+\//, ""),
+    fxEffort: threadDefaults.fx.effort,
+  };
+  const cycleSetting = (rowKey: string): void => {
+    if (rowKey === "piModel" || rowKey === "fxModel") {
+      const harness = rowKey === "piModel" ? "pi" : "fx";
+
+      setModelEditor({ harness, text: threadDefaults[harness].model });
+    } else if (rowKey === "piEffort" || rowKey === "fxEffort") {
+      const harness = rowKey === "piEffort" ? "pi" : "fx";
+      const efforts = AGENT_REASONING_EFFORTS;
+      const effort: AgentReasoningEffort =
+        efforts[(efforts.indexOf(threadDefaults[harness].effort) + 1) % efforts.length]!;
+
+      persistThreadModelDefault(harness, "effort", effort);
+      setThreadDefaults((defaults) => ({
+        ...defaults,
+        [harness]: { ...defaults[harness], effort },
+      }));
+    } else if (rowKey === "threadHarness") {
+      onSwitchHarness?.(threadHarness === "fx" ? "pi" : "fx");
+    } else if (rowKey === "autoClose") {
+      const next: AutoClose = autoClose === "off" ? 3 : autoClose === 3 ? 10 : "off";
+
+      setAutoClose(next);
+      persistAutoClose(next);
+    } else if (rowKey === "diffView") {
+      const next: DiffViewMode = diffView === "stacked" ? "split" : "stacked";
+
+      setDiffView(next);
+      persistDiffView(next);
+    } else if (rowKey === "theme") {
+      const next = THEME_NAMES[(THEME_NAMES.indexOf(themeName) + 1) % THEME_NAMES.length]!;
+
+      setThemeName(next);
+      setTheme(composeTheme(next, themeOverrides, appearance));
+      persistTheme(next);
+    } else if (rowKey === "syncGithub") {
+      onSyncGithubIdentity();
+    } else if (rowKey === "displayName") {
+      onRenameDisplayName();
+    } else if (rowKey === "reviewWorkspace") {
+      const next: ReviewWorkspaceMode = reviewWorkspace === "worktree" ? "current" : "worktree";
+
+      setReviewWorkspace(next);
+      persistReviewWorkspace(next);
+    }
+  };
+
+  const openSettings = (): void => {
+    setSettingsNav({ categoryId: "general", rowIndex: 0, zone: "nav" });
+    setActionsExpandedIndex(null);
+    setMenuDialog("settings");
+  };
+
+  const onCategorySelect = (categoryId: string): void => {
+    // ignore a select that names no real category, so the key handler never dereferences nothing
+    if (!settingsCategories.some((category) => category.id === categoryId)) return;
+
+    setActionsExpandedIndex(null);
+    setSettingsNav({ categoryId, rowIndex: 0, zone: "body" });
+  };
+
+  const handleSettingsKey = (name: string): void => {
+    if (modelEditor) {
+      if (name === "escape") setModelEditor(null);
+      else if (name === "return") saveModelDefault();
+
+      return;
+    }
+
+    // an open system-prompt input owns typing; only esc (close it) escapes here
+    if (actionsExpandedIndex !== null) {
+      if (name === "escape") setActionsExpandedIndex(null);
+
+      return;
+    }
+
+    if (name === "escape") return void setMenuDialog(null);
+
+    const categoryIndex = settingsCategories.findIndex(
+      (category) => category.id === settingsNav.categoryId,
+    );
+    const category = settingsCategories[categoryIndex]!;
+
+    if (settingsNav.zone === "nav") {
+      const next = moveNavZone(name, categoryIndex, settingsCategories);
+
+      if (next) setSettingsNav(next);
+
+      return;
+    }
+
+    // the Actions category is a list of quick actions plus a trailing "add" row
+    if (category.id === "actions") {
+      const moved = moveBodyRow(name, settingsNav, quickActions.length + 1);
+
+      if (moved) return void setSettingsNav(moved);
+
+      if (ACTIVATE_KEYS.has(name)) {
+        if (settingsNav.rowIndex === quickActions.length) addAction();
+        else {
+          setActionsExpandedField("prompt");
+          setActionsExpandedIndex(settingsNav.rowIndex);
+        }
+      }
+
+      return;
+    }
+
+    const moved = moveBodyRow(name, settingsNav, category.rows.length);
+
+    if (moved) return void setSettingsNav(moved);
+
+    if (name === "return" || name === "space")
+      cycleSetting(category.rows[settingsNav.rowIndex]!.key);
+  };
+
+  return {
+    settingsNav,
+    actionsExpandedIndex,
+    setActionsExpandedIndex,
+    settingsCategories,
+    settingsValues,
+    cycleSetting,
+    handleSettingsKey,
+    onCategorySelect,
+    openSettings,
+  };
+}