@cueloop/client 0.1.0-alpha.102 → 0.1.0-alpha.103

package/src/prototype/components/PrototypeContentView.tsx

@@ -126,6 +126,7 @@ function terminalColorScheme(textColor: string): "dark" | "light" {
   const hex = textColor.replace("#", "");
 
   if (hex.length < 6) return "dark";
+
   const r = parseInt(hex.slice(0, 2), 16);
   const g = parseInt(hex.slice(2, 4), 16);
   const b = parseInt(hex.slice(4, 6), 16);
@@ -181,12 +182,14 @@ function PrototypeContentViewImpl({
   // harness), but the launch trigger still runs.
   useEffect(() => {
     if (!renderer) return;
+
     const rendererOutput = v.safeParse(v.object({ writeOut: v.function() }), renderer);
     const rawWrite = rendererOutput.success ? rendererOutput.output.writeOut : null;
     const write = rawWrite ? (chunk: string) => rawWrite.call(renderer, chunk) : null;
     const medium = resolveTransmitMedium();
     const paint = (): void => {
       if (!write) return;
+
       // an app overlay is covering the sheet: pull the image so it does not show
       // through the overlay's cells, and re-transmit once the overlay closes
       if (hiddenRef.current) {
@@ -197,10 +200,12 @@ function PrototypeContentViewImpl({
 
         return;
       }
+
       const region = regionOf(regionRef.current);
       const png = pngRef.current;
 
       if (!region || !png) return;
+
       if (transmittedRef.current !== png) {
         transmitKittyImage(write, png, region, PROTOTYPE_IMAGE_ID, medium);
         transmittedRef.current = png;
@@ -219,6 +224,7 @@ function PrototypeContentViewImpl({
 
     return () => {
       renderer.off("frame", onFrame);
+
       if (write) deleteKittyImage(write, PROTOTYPE_IMAGE_ID);
     };
   }, [renderer]);
@@ -241,11 +247,13 @@ function PrototypeContentViewImpl({
     const caps = renderer?.capabilities;
 
     if (launchedRef.current || !region) return;
+
     if (caps && caps.kitty_graphics === false) {
       setStatus("unsupported");
 
       return;
     }
+
     launchedRef.current = true;
     const capture = captureConfig(region, renderer!);
 
@@ -266,6 +274,7 @@ function PrototypeContentViewImpl({
 
           return;
         }
+
         browserRef.current = browser;
         setPng(await browser.screenshot());
         setStatus("ready");
@@ -304,6 +313,7 @@ function PrototypeContentViewImpl({
     const region = regionOf(regionRef.current);
 
     if (status !== "ready" || !browser || !region) return;
+
     const geometry = {
       x: region.column,
       y: region.row,
@@ -313,10 +323,12 @@ function PrototypeContentViewImpl({
     const cssPoint = imageCellToCss(event, geometry, viewportRef.current);
 
     if (!cssPoint) return;
+
     void (async () => {
       const element = await browser.elementAt(cssPoint.x, cssPoint.y);
 
       if (!element) return;
+
       const cell = cssBoxToCell(element.box, geometry, viewportRef.current);
       const topRaw = cell.row - geometry.y;
 
@@ -326,6 +338,7 @@ function PrototypeContentViewImpl({
         top: Math.max(0, topRaw < OVERLAY_ROWS ? topRaw + 1 : topRaw - OVERLAY_ROWS),
         regionColumns: geometry.width,
       });
+
       // selecting an element opens the compose card directly, the same edit
       // primitive plan and diff use - there is no intermediate marker toolbar
       if (canComment) {
@@ -344,6 +357,7 @@ function PrototypeContentViewImpl({
     const browser = browserRef.current;
 
     if (status !== "ready" || !browser) return;
+
     const delta = event.scroll?.direction === "up" ? -SCROLL_STEP : SCROLL_STEP;
 
     // a selection would drift once the page scrolls under it, so drop it
@@ -356,7 +370,9 @@ function PrototypeContentViewImpl({
 
   const commit = (body: string): void => {
     if (!canComment) return;
+
     if (selected && body.trim()) onCommentElement(selected, body.trim());
+
     clearSelection();
   };
 
@@ -435,6 +451,7 @@ export const PrototypeContentView = React.memo(PrototypeContentViewImpl);
 
 function statusLine(status: SheetStatus, errorMessage: string): string {
   if (status === "loading") return "rendering prototype…";
+
   if (status === "unsupported")
     return "prototype preview needs a graphics terminal (kitty or ghostty)";
 

package/src/prototype/prototype-browser.ts

@@ -114,6 +114,7 @@ async function warmBrowser(executablePath: string | undefined): Promise<Puppetee
   const cached = sharedBrowser ? await sharedBrowser.catch(() => null) : null;
 
   if (cached && cached.connected) return cached;
+
   const puppeteer = (await import("puppeteer-core")).default;
   const launched = puppeteer.launch({
     executablePath: executablePath ?? chromeExecutable(),
@@ -124,6 +125,7 @@ async function warmBrowser(executablePath: string | undefined): Promise<Puppetee
   sharedBrowser = launched;
   const browser = await launched.catch((error) => {
     if (sharedBrowser === launched) sharedBrowser = null;
+
     throw error;
   });
 
@@ -143,7 +145,9 @@ export async function closePrototypeBrowser(): Promise<void> {
   const pending = sharedBrowser;
 
   sharedBrowser = null;
+
   if (!pending) return;
+
   const browser = await pending.catch(() => null);
 
   await browser?.close().catch(() => undefined);
@@ -233,8 +237,10 @@ function elementAtScript(x: number, y: number) {
     while (current && current !== document.body) {
       if (isNamed(current)) {
         if (current.childElementCount > 1) return current;
+
         namedFallback = namedFallback ?? current;
       }
+
       current = current.parentElement;
     }
 
@@ -251,6 +257,7 @@ function elementAtScript(x: number, y: number) {
         parts.unshift(part + "#" + CSS.escape(current.id));
         break;
       }
+
       const parent: Element | null = current.parentElement;
 
       if (parent) {
@@ -259,6 +266,7 @@ function elementAtScript(x: number, y: number) {
 
         if (twins.length > 1) part += ":nth-of-type(" + (twins.indexOf(current) + 1) + ")";
       }
+
       parts.unshift(part);
       current = current.parentElement;
     }
@@ -282,10 +290,12 @@ function elementAtScript(x: number, y: number) {
   const hit = document.elementFromPoint(x, y);
 
   if (!(hit instanceof Element)) return null;
+
   const node = focusableTarget(hit) ?? componentRoot(hit);
   const selector = selectorFor(node);
 
   if (!selector) return null;
+
   const text = (node.textContent || "").replace(/\s+/g, " ").trim();
   const tag = node.tagName.toLowerCase();
   const quote = text
@@ -313,6 +323,7 @@ function chromeExecutable(): string {
   if (process.platform === "darwin") {
     return "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
   }
+
   if (process.platform === "win32") {
     return "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
   }

package/src/settings/components/SettingsDialog.tsx

@@ -92,10 +92,12 @@ export function SettingsDialog({
   const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
 
   if (!isOpen) return null;
+
   const category =
     categories.find((candidate) => candidate.id === activeCategoryId) ?? categories[0];
 
   if (!category) return null;
+
   const onKeybinds = category.id === KEYBINDS_CATEGORY_ID;
 
   return (
@@ -143,6 +145,7 @@ export function SettingsDialog({
                     />
                   );
                 }
+
                 if (row.kind === "cycle") {
                   return (
                     <CycleRow

package/src/settings/config.test.ts

@@ -674,3 +674,44 @@ test("Thread agents default off and require a boolean experimental TOML flag", (
     rmSync(dir, { recursive: true, force: true });
   }
 });
+
+test("Thread harness preference persists without changing experimental or other settings", async () => {
+  const { persistThreadHarness } = await import("./config");
+  const dir = mkdtempSync(join(tmpdir(), "cueloop-thread-config-"));
+  const path = join(dir, "config.toml");
+
+  try {
+    writeFileSync(path, '[experimental]\nthread_agent = true\n[ui]\ntheme = "cueloop"\n');
+    persistThreadHarness("fx", path);
+    const config = loadConfig({ userConfigPath: path });
+
+    expect(config.thread.harness).toBe("fx");
+    expect(config.experimental.threadAgent).toBe(true);
+    expect(config.ui.theme).toBe("cueloop");
+    persistThreadHarness("pi", path);
+    expect(loadConfig({ userConfigPath: path }).thread.harness).toBe("pi");
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("a malformed Thread section does not discard other preferences", () => {
+  const dir = mkdtempSync(join(tmpdir(), "cueloop-invalid-thread-config-"));
+  const path = join(dir, "config.toml");
+
+  try {
+    for (const section of ['thread = "fx"\n', '[thread]\nharness = "typo"\n']) {
+      writeFileSync(
+        path,
+        `${section}[experimental]\nthread_agent = true\n[ui]\ntheme = "cueloop"\n`,
+      );
+      const config = loadConfig({ userConfigPath: path });
+
+      expect(config.thread.harness).toBe("pi");
+      expect(config.experimental.threadAgent).toBe(true);
+      expect(config.ui.theme).toBe("cueloop");
+    }
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});

package/src/settings/config.ts

@@ -104,6 +104,7 @@ export function resolveQuickAction(
   const index = Number(actionRef);
 
   if (Number.isInteger(index) && index >= 1 && index <= actions.length) return actions[index - 1];
+
   const wanted = actionRef.trim().toLowerCase();
 
   return actions.find((action) => action.prompt.toLowerCase() === wanted);
@@ -127,6 +128,7 @@ export interface CueloopConfig {
   actions: QuickAction[];
   skillsPath: string;
   review: ReviewConfig;
+  thread: { harness: "pi" | "fx" };
   integrations: IntegrationsConfig;
   experimental: ExperimentalConfig;
 }
@@ -189,6 +191,10 @@ const ConfigDocumentSchema = v.object({
   experimental: v.optional(v.unknown()),
   skills: v.fallback(v.optional(SkillsSectionSchema), undefined),
   review: v.optional(v.unknown()),
+  thread: v.fallback(
+    v.optional(v.object({ harness: v.fallback(v.optional(v.picklist(["pi", "fx"])), undefined) })),
+    undefined,
+  ),
 });
 
 const IdentitySchema = v.object({
@@ -258,12 +264,14 @@ function parseToml(text: string) {
 
 function parseActions(entries: readonly unknown[] | undefined): QuickAction[] | undefined {
   if (!entries) return undefined;
+
   const actions: QuickAction[] = [];
 
   for (const entry of entries) {
     const result = v.safeParse(QuickActionSchema, entry);
 
     if (!result.success) continue;
+
     const { prompt, metadata } = result.output;
 
     actions.push(metadata?.trim() ? { prompt, metadata } : { prompt });
@@ -277,21 +285,30 @@ function mergeObsidian(
   obsidian: v.InferOutput<typeof ObsidianSchema>,
 ): void {
   if (obsidian.vault !== undefined) target.vault = obsidian.vault;
+
   if (obsidian.folder !== undefined) target.folder = obsidian.folder;
+
   if (obsidian.filenameFormat !== undefined) target.filenameFormat = obsidian.filenameFormat;
+
   if (obsidian.separator !== undefined) target.separator = obsidian.separator;
+
   if (obsidian.exportOn !== undefined) target.exportOn = obsidian.exportOn;
 }
 
 /** Fold a parsed `[ui]` table onto the accumulated ui config, field by present field. */
 function applyUi(ui: CueloopConfig["ui"], parsed: v.InferOutput<typeof UiSchema>): void {
   if (parsed.auto_close !== undefined) ui.autoClose = parsed.auto_close;
+
   if (parsed.editor?.trim()) ui.editor = parsed.editor.trim();
+
   // "unified" is the pre-rename spelling of "stacked"; keep loading it so an upgrade never flips the layout
   if (parsed.diff_view !== undefined)
     ui.diffView = parsed.diff_view === "unified" ? "stacked" : parsed.diff_view;
+
   if (parsed.default_message !== undefined) ui.defaultMessage = parsed.default_message;
+
   if (parsed.pins !== undefined) ui.pins = parsed.pins;
+
   if (parsed.layout !== undefined) {
     ui.layout = {
       threads: parsed.layout.threads ?? true,
@@ -303,6 +320,7 @@ function applyUi(ui: CueloopConfig["ui"], parsed: v.InferOutput<typeof UiSchema>
 
 function applyReview(review: ReviewConfig, parsed: v.InferOutput<typeof ReviewSchema>): void {
   if (parsed.skill?.trim()) review.skill = parsed.skill.trim();
+
   if (parsed.workspace !== undefined) review.workspace = parsed.workspace;
 }
 
@@ -321,6 +339,7 @@ function layer(
     actions: [...base.actions],
     skillsPath: base.skillsPath,
     review: { ...base.review },
+    thread: { ...base.thread },
     integrations: { obsidian: { ...base.integrations.obsidian } },
     experimental: { ...base.experimental },
   };
@@ -334,7 +353,9 @@ function layer(
   const review = v.safeParse(ReviewSchema, raw.review);
 
   if (actions) out.actions = actions;
+
   out.skillsPath = skillsPathFrom(raw.skills, base.skillsPath);
+
   if (authors.success) {
     for (const [id, value] of Object.entries(authors.output)) {
       const name = v.safeParse(v.string(), value);
@@ -342,6 +363,7 @@ function layer(
       if (name.success) out.authors[id] = name.output;
     }
   }
+
   if (keys.success) {
     for (const [action, value] of Object.entries(keys.output)) {
       const combo = v.safeParse(KeyComboSchema, value);
@@ -350,18 +372,26 @@ function layer(
         out.keys[action] = Array.isArray(combo.output) ? combo.output : [combo.output];
     }
   }
+
   // The reviewer identity is a personal credential; a repo must never forge a verified name.
   if (allowIdentity && identity.success) {
     if (identity.output.name !== undefined) out.identity.name = identity.output.name;
+
     if (identity.output.provider !== undefined) out.identity.provider = identity.output.provider;
   }
+
   if (ui.success) applyUi(out.ui, ui.output);
+
   if (integrations.success && integrations.output.obsidian) {
     mergeObsidian(out.integrations.obsidian, integrations.output.obsidian);
   }
+
   if (experimental.success) applyExperimental(out.experimental, experimental.output);
+
   if (review.success) applyReview(out.review, review.output);
 
+  if (raw.thread?.harness) out.thread.harness = raw.thread.harness;
+
   return out;
 }
 
@@ -384,6 +414,7 @@ export function loadConfig(
     actions: [...DEFAULT_QUICK_ACTIONS],
     skillsPath: join(homedir(), ".agents", "skills"),
     review: { skill: "code-review", workspace: "worktree" },
+    thread: { harness: "pi" },
     integrations: { obsidian: { ...OBSIDIAN_DEFAULTS } },
     experimental: { prototypePixels: false, threadAgent: false },
   };
@@ -400,6 +431,7 @@ export function loadConfig(
     options.repoRoot ? join(options.repoRoot, ".cueloop", "config.toml") : undefined,
   ]) {
     if (!path || !existsSync(path)) continue;
+
     try {
       const raw = parseToml(readFileSync(path, "utf8"));
 
@@ -409,6 +441,7 @@ export function loadConfig(
       const parsedThemeOverrides = v.safeParse(ThemeOverridesSchema, raw.theme);
 
       if (rawTheme && isThemeName(rawTheme)) themeName = rawTheme;
+
       if (parsedThemeOverrides.success) {
         for (const [token, value] of Object.entries(parsedThemeOverrides.output)) {
           const override = v.safeParse(v.string(), value);
@@ -461,6 +494,7 @@ function persistUiSetting(key: string, rendered: string, userConfigPath?: string
   let text = "";
 
   if (existsSync(path)) text = readFileSync(path, "utf8");
+
   const assignment = new RegExp(`^(\\s*)${key}\\s*=.*$`, "m");
 
   if (assignment.test(text)) {
@@ -470,6 +504,7 @@ function persistUiSetting(key: string, rendered: string, userConfigPath?: string
   } else {
     text = text.trimEnd() + (text.trim() ? "\n\n" : "") + `[ui]\n${key} = ${rendered}\n`;
   }
+
   mkdirSync(dirname(path), { recursive: true });
   writeFileSync(path, text);
 }
@@ -500,6 +535,7 @@ function persistTableSetting(
   } else {
     text = `${text.trimEnd()}${text.trim() ? "\n\n" : ""}[${table}]\n${key} = ${rendered}\n`;
   }
+
   mkdirSync(dirname(path), { recursive: true });
   writeFileSync(path, text);
 }
@@ -548,6 +584,7 @@ export function persistIdentity(identity: IdentityConfig, userConfigPath?: strin
   } else {
     text = text.trimEnd() + (text.trim() ? "\n\n" : "") + block;
   }
+
   mkdirSync(dirname(path), { recursive: true });
   writeFileSync(path, text);
 }
@@ -614,6 +651,7 @@ export function persistAuthorName(id: string, name: string, userConfigPath?: str
   } else {
     text = text.trimEnd() + (text.trim() ? "\n\n" : "") + `[authors]\n${key} = ${value}\n`;
   }
+
   mkdirSync(dirname(path), { recursive: true });
   writeFileSync(path, text);
 }
@@ -624,5 +662,11 @@ function applyExperimental(
   raw: v.InferOutput<typeof ExperimentalSchema>,
 ): void {
   if (raw.prototype_pixels !== undefined) config.prototypePixels = raw.prototype_pixels;
+
   if (raw.thread_agent !== undefined) config.threadAgent = raw.thread_agent;
 }
+
+/** The preferred harness affects new Threads; existing Threads require a handoff. */
+export function persistThreadHarness(harness: "pi" | "fx", userConfigPath?: string): void {
+  persistTableSetting("thread", "harness", tomlString(harness), userConfigPath);
+}

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

@@ -0,0 +1,98 @@
+import { expect, test } from "bun:test";
+import React, { useState } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../appearance/theme";
+import { settle, locateText } 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 model = useSettingsDialog({
+    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);
+    },
+  });
+
+  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();
+  }
+});

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

@@ -57,8 +57,10 @@ function moveNavZone(
       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" };
 
@@ -67,7 +69,9 @@ function moveNavZone(
 
 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;
@@ -94,6 +98,9 @@ export function useSettingsDialog(params: {
   reviewSkill: string;
   reviewWorkspace: ReviewWorkspaceMode;
   setReviewWorkspace: Dispatch<SetStateAction<ReviewWorkspaceMode>>;
+  threadHarness?: "pi" | "fx";
+  canSwitchHarness?: boolean;
+  onSwitchHarness?: (harness: "pi" | "fx") => void;
 }): SettingsDialogModel {
   const {
     theme,
@@ -116,6 +123,9 @@ export function useSettingsDialog(params: {
     reviewSkill,
     reviewWorkspace,
     setReviewWorkspace,
+    threadHarness,
+    canSwitchHarness,
+    onSwitchHarness,
   } = params;
 
   // open focused on the left nav, so up/down browses categories until l/tab/enter enters the body
@@ -134,6 +144,7 @@ export function useSettingsDialog(params: {
   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,
@@ -214,6 +225,22 @@ export function useSettingsDialog(params: {
         },
       ],
     },
+    ...(canSwitchHarness
+      ? [
+          {
+            id: "thread",
+            name: "Thread",
+            rows: [
+              {
+                key: "threadHarness",
+                label: "Harness",
+                kind: "cycle" as const,
+                options: ["pi", "fx"],
+              },
+            ],
+          },
+        ]
+      : []),
     {
       id: "actions",
       name: "Actions",
@@ -252,9 +279,12 @@ export function useSettingsDialog(params: {
     syncGithub: "enter to sync",
     reviewSkill,
     reviewWorkspace,
+    threadHarness: threadHarness ?? "pi",
   };
   const cycleSetting = (rowKey: string): void => {
-    if (rowKey === "autoClose") {
+    if (rowKey === "threadHarness") {
+      onSwitchHarness?.(threadHarness === "fx" ? "pi" : "fx");
+    } else if (rowKey === "autoClose") {
       const next: AutoClose = autoClose === "off" ? 3 : autoClose === 3 ? 10 : "off";
 
       setAutoClose(next);
@@ -291,6 +321,7 @@ export function useSettingsDialog(params: {
   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" });
   };
@@ -302,7 +333,9 @@ export function useSettingsDialog(params: {
 
       return;
     }
+
     if (name === "escape") return void setMenuDialog(null);
+
     const categoryIndex = settingsCategories.findIndex(
       (category) => category.id === settingsNav.categoryId,
     );
@@ -315,11 +348,13 @@ export function useSettingsDialog(params: {
 
       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 {
@@ -330,9 +365,11 @@ export function useSettingsDialog(params: {
 
       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);
   };