@cueloop/client 0.1.0-alpha.77 → 0.1.0-alpha.79

package/src/components/primitives/Button.tsx

@@ -29,10 +29,14 @@ export function Button({
   children,
 }: ButtonProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
-  const backgroundColor = variant === "solid" ? tokens.accent : undefined;
+  // a disabled solid button reads as muted, so it never looks like a live call to action
+  const backgroundColor =
+    variant === "solid" ? (isDisabled ? tokens.border : tokens.accent) : undefined;
   const foreground =
     variant === "solid"
-      ? tokens.accentInk
+      ? isDisabled
+        ? tokens.textMuted
+        : tokens.accentInk
       : variant === "accent-text"
         ? tokens.accent
         : tokens.textDim;

package/src/components/primitives/Card.tsx

@@ -8,12 +8,13 @@
 import React from "react";
 import type { Theme } from "../../theme";
 import { useComponentTheme } from "../theme-context";
-import { FRAME_BORDER_STYLE } from "./frame";
+import { FRAME_BORDER_STYLE, frameTitle } from "./frame";
 
 export interface CardProps {
   title?: string;
   /** Number of content rows inside the border; the box adds the two border rows. */
   contentRows: number;
+  width?: number;
   borderColor?: string;
   backgroundColor?: string;
   marginLeft?: number;
@@ -30,6 +31,7 @@ export function cardHeight(contentRows: number): number {
 export function Card({
   title,
   contentRows,
+  width,
   borderColor,
   backgroundColor,
   marginLeft,
@@ -43,6 +45,7 @@ export function Card({
     <box
       style={{
         height: cardHeight(contentRows),
+        width,
         marginLeft,
         marginRight,
         border: true,
@@ -52,7 +55,7 @@ export function Card({
         flexDirection: "column",
         paddingLeft: 1,
       }}
-      title={title}
+      title={frameTitle(title)}
     >
       {children}
     </box>

package/src/components/primitives/Dialog.tsx

@@ -8,7 +8,7 @@
 import React from "react";
 import type { Theme } from "../../theme";
 import { useComponentTheme } from "../theme-context";
-import { FRAME_BORDER_STYLE } from "./frame";
+import { FRAME_BORDER_STYLE, frameTitle } from "./frame";
 
 export interface DialogProps {
   isOpen: boolean;
@@ -62,7 +62,7 @@ export function Dialog({
           backgroundColor: background,
           flexDirection: "column",
         }}
-        title={title}
+        title={frameTitle(title)}
       >
         {children}
       </box>

package/src/components/primitives/DialogActions.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { DialogActions } from "./DialogActions";
+
+export const meta: StoryMeta = { title: "Primitives/DialogActions" };
+
+const noop = () => {};
+
+export const SaveCancel: Story = {
+  render: () => <DialogActions confirmLabel="save" onConfirm={noop} onCancel={noop} />,
+  expectedColors: [DARK.accent],
+  size: { width: 40, height: 3 },
+};
+
+export const DeleteCancel: Story = {
+  render: () => <DialogActions confirmLabel="delete" onConfirm={noop} onCancel={noop} />,
+  expectedColors: [DARK.accent],
+  size: { width: 40, height: 3 },
+};

package/src/components/primitives/DialogActions.tsx

@@ -0,0 +1,39 @@
+/** The one action row every overlay uses: a solid confirm word-button and a plain cancel, lowercased. */
+
+import React from "react";
+import type { Theme } from "../../theme";
+import { Toolbar } from "./Toolbar";
+import { Button } from "./Button";
+
+export interface DialogActionsProps {
+  confirmLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  cancelLabel?: string;
+  confirmDisabled?: boolean;
+  theme?: Theme;
+}
+
+export function DialogActions({
+  confirmLabel,
+  onConfirm,
+  onCancel,
+  cancelLabel = "cancel",
+  confirmDisabled = false,
+  theme,
+}: DialogActionsProps): React.ReactNode {
+  return (
+    <Toolbar>
+      <Button
+        variant="solid"
+        marginRight={2}
+        onPress={onConfirm}
+        isDisabled={confirmDisabled}
+        theme={theme}
+      >
+        {` ${confirmLabel} `}
+      </Button>
+      <Button onPress={onCancel} theme={theme}>{` ${cancelLabel} `}</Button>
+    </Toolbar>
+  );
+}

package/src/components/primitives/Switch.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Switch } from "./Switch";
+
+export const meta: StoryMeta = { title: "Primitives/Switch" };
+
+export const On: Story = {
+  render: () => <Switch on onToggle={() => {}} theme={DARK} />,
+  expectedColors: [DARK.accent],
+  size: { width: 8, height: 1 },
+};
+
+export const Off: Story = {
+  render: () => <Switch on={false} onToggle={() => {}} theme={DARK} />,
+  size: { width: 8, height: 1 },
+};

package/src/components/primitives/Switch.tsx

@@ -0,0 +1,32 @@
+/**
+ * On/off switch: a pill with a knob that sits right (accent) when on and left
+ * (dim) when off. `onToggle` unifies a mouse click and keyboard activation, so
+ * the dialog grammar and a pointer both flip it.
+ */
+
+import React from "react";
+import type { MouseEvent } from "@opentui/core";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+
+export interface SwitchProps {
+  on: boolean;
+  onToggle: () => void;
+  theme?: Theme;
+}
+
+export function Switch({ on, onToggle, theme }: SwitchProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      onMouseUp={(event: MouseEvent) => {
+        event.stopPropagation();
+        onToggle();
+      }}
+      style={{ flexShrink: 0 }}
+    >
+      <text fg={on ? tokens.accent : tokens.textDim}>{on ? "(  ●)" : "(●  )"}</text>
+    </box>
+  );
+}

package/src/components/primitives/Tree.tsx

@@ -13,6 +13,8 @@ export interface TreeProps {
   showStatus?: boolean;
   /** Drop the folder/file glyph prefix, for a plain text tree (e.g. the settings nav). */
   hideIcons?: boolean;
+  /** The selected row's backdrop; defaults to `elevated` (invisible on an elevated dialog, use `border` there). */
+  selectedBackground?: string;
   indentWidth?: number;
   icons?: TreeIcons;
   onSelect?: (id: string) => void;
@@ -41,6 +43,7 @@ export function Tree({
   flattenEmptyDirectories,
   showStatus,
   hideIcons,
+  selectedBackground,
   indentWidth = 2,
   icons = NERD_TREE_ICONS,
   onSelect,
@@ -48,6 +51,7 @@ export function Tree({
   theme,
 }: TreeProps): React.ReactNode {
   const tokens = theme ?? DARK;
+  const selectedBackdrop = selectedBackground ?? tokens.elevated;
   const rows = flattenTree(nodes, { expandedIds, flattenEmptyDirectories });
 
   return (
@@ -71,7 +75,7 @@ export function Tree({
               flexDirection: "row",
               paddingLeft: 1 + row.depth * indentWidth,
               paddingRight: 1,
-              backgroundColor: selected ? tokens.elevated : undefined,
+              backgroundColor: selected ? selectedBackdrop : undefined,
             }}
             onMouseUp={() => (row.isFolder ? onToggle?.(row.id) : onSelect?.(row.id))}
           >

package/src/components/primitives/frame.ts

@@ -10,3 +10,8 @@ import type { BorderStyle } from "@opentui/core";
 
 /** Corner style shared by every bordered frame in the app: square, not rounded. */
 export const FRAME_BORDER_STYLE: BorderStyle = "single";
+
+/** Every frame's border title renders lowercase, so the convention holds without each caller minding case. */
+export function frameTitle(title: string | undefined): string | undefined {
+  return title?.toLowerCase();
+}

package/src/components/session-tree.ts

@@ -33,7 +33,7 @@ export function projectName(workspace: WorkspaceKey): string {
 export type InboxRow =
   | { kind: "section"; id: string; label: string }
   | { kind: "project"; id: string; label: string }
-  | { kind: "thread"; id: string; session: Thread; selectionIndex: number };
+  | { kind: "thread"; id: string; session: Thread; selectionIndex: number; depth: number };
 
 export interface GroupedInbox {
   rows: InboxRow[];
@@ -78,14 +78,14 @@ export function groupInbox(
 
   const rows: InboxRow[] = [];
   const ordered: Thread[] = [];
-  const pushThread = (session: Thread): void => {
-    rows.push({ kind: "thread", id: session.id, session, selectionIndex: ordered.length });
+  const pushThread = (session: Thread, depth: number): void => {
+    rows.push({ kind: "thread", id: session.id, session, selectionIndex: ordered.length, depth });
     ordered.push(session);
   };
 
   if (pinned.length > 0) {
     rows.push({ kind: "section", id: "section:pinned", label: "Starred" });
-    for (const session of pinned) pushThread(session);
+    for (const session of pinned) pushThread(session, 1);
   }
 
   const projectEntries = [...projects.entries()].sort((a, b) => a[1].name.localeCompare(b[1].name));
@@ -93,13 +93,14 @@ export function groupInbox(
     rows.push({ kind: "section", id: "section:projects", label: "Projects" });
     for (const [key, project] of projectEntries) {
       rows.push({ kind: "project", id: `project:${key}`, label: project.name });
-      for (const session of project.sessions) pushThread(session);
+      // a project's threads cascade one level under its name
+      for (const session of project.sessions) pushThread(session, 2);
     }
   }
 
   if (standalone.length > 0) {
     rows.push({ kind: "section", id: "section:threads", label: "Threads" });
-    for (const session of standalone) pushThread(session);
+    for (const session of standalone) pushThread(session, 1);
   }
 
   return { rows, ordered };

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);
+}

package/src/components/stories-app.tsx

@@ -13,9 +13,10 @@ import { ThemeProvider } from "./theme-context";
 import { buildStoryTree, loadStories, type LoadedStory } from "./story";
 import { PaneGrid } from "./PaneGrid";
 import { ShellHeader } from "./ShellHeader";
+import { AnsiScreen } from "./AnsiScreen";
 import { Tree } from "./primitives/Tree";
 import { NERD } from "./primitives/icons";
-import { allFolderIds, flattenTree } from "./primitives/tree-model";
+import { flattenTree } from "./primitives/tree-model";
 
 interface StoriesAppProps {
   stories: LoadedStory[];
@@ -30,8 +31,8 @@ function StoriesApp({ stories, onExit }: StoriesAppProps): React.ReactNode {
   );
   const firstStoryId = `${stories[0]!.moduleTitle}/${stories[0]!.storyName}`;
 
-  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() =>
-    allFolderIds(treeNodes),
+  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(
+    () => new Set(treeNodes.filter((node) => node.children !== undefined).map((node) => node.id)),
   );
   const [selectedId, setSelectedId] = useState(firstStoryId);
   const [openedId, setOpenedId] = useState(firstStoryId);
@@ -126,7 +127,15 @@ function StoriesApp({ stories, onExit }: StoriesAppProps): React.ReactNode {
             <scrollbox style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }} focused={false}>
               {/* remount per story so component-local state never leaks across */}
               <box key={openedId} style={{ flexDirection: "column" }}>
-                {opened.story.render()}
+                {opened.story.ansi ? (
+                  <AnsiScreen
+                    ansi={opened.story.ansi()}
+                    cols={opened.story.size?.width ?? 80}
+                    rows={opened.story.size?.height ?? 24}
+                  />
+                ) : (
+                  opened.story.render?.()
+                )}
               </box>
             </scrollbox>
           ) : (

package/src/components/stories.test.tsx

@@ -5,11 +5,13 @@
  * stories file fails the harness, so the safety net cannot silently thin.
  */
 
+import React from "react";
 import { describe, expect, test } from "bun:test";
 import { testRender } from "@opentui/react/test-utils";
 import { RGBA } from "@opentui/core";
 import { componentFilesMissingStories, loadStories } from "./story";
-import { allowEventLoopUpdates } from "../test-support";
+import { AnsiScreen } from "./AnsiScreen";
+import { settle } from "../test-support";
 
 const stories = await loadStories();
 
@@ -34,12 +36,18 @@ describe("stories catalog", () => {
     test(`${moduleTitle}/${storyName} renders, snapshots, and carries its colors`, async () => {
       // Arrange
       const size = story.size ?? { width: 80, height: 24 };
+      const node = story.ansi ? (
+        <AnsiScreen ansi={story.ansi()} cols={size.width} rows={size.height} />
+      ) : (
+        story.render!()
+      );
 
       // Act
-      const setup = await testRender(story.render(), size);
+      const setup = await testRender(node, size);
 
-      allowEventLoopUpdates();
-      await setup.waitForVisualIdle();
+      // settle, not just visual-idle: async stories (a file read, a virtualizer's
+      // first measure) commit after React's own scheduler, invisible to idle
+      await settle(setup);
       const frame = setup.captureCharFrame();
 
       // Assert

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

@@ -1,12 +1,12 @@
 import { describe, expect, test } from "bun:test";
-import { buildStoryTree, type LoadedStory } from "./story";
+import { buildStoryTree, type LoadedStory, type StorySection } from "./story";
 import type { TreeNode } from "./primitives/tree-model";
 
 /** A story object whose render is never invoked in these structural tests. */
 const STUB = { render: () => null };
 
-function story(moduleTitle: string, storyName: string): LoadedStory {
-  return { moduleTitle, storyName, story: STUB };
+function story(moduleTitle: string, storyName: string, section: StorySection = "App"): LoadedStory {
+  return { section, moduleTitle, storyName, story: STUB };
 }
 
 function childLabels(node: TreeNode): string[] {
@@ -14,19 +14,31 @@ function childLabels(node: TreeNode): string[] {
 }
 
 describe("buildStoryTree", () => {
-  test("splits moduleTitle on / into nested folders keyed by their path", () => {
+  test("groups the top level by section", () => {
+    const tree = buildStoryTree([
+      story("Primitives/Tree", "Default"),
+      story("Collaborator Join", "JoinSplash", "SSH"),
+    ]);
+
+    expect(tree.map((node) => [node.id, node.label])).toEqual([
+      ["App", "App"],
+      ["SSH", "SSH"],
+    ]);
+  });
+
+  test("splits moduleTitle on / into nested folders under the section", () => {
     // Arrange
     const stories = [story("Primitives/Tree", "Default"), story("Layout/AppShell", "Default")];
 
     // Act
-    const tree = buildStoryTree(stories);
+    const app = buildStoryTree(stories)[0]!;
 
     // Assert
-    expect(tree.map((node) => [node.id, node.label])).toEqual([
-      ["Primitives", "Primitives"],
-      ["Layout", "Layout"],
+    expect(app.children!.map((node) => [node.id, node.label])).toEqual([
+      ["App/Primitives", "Primitives"],
+      ["App/Layout", "Layout"],
     ]);
-    expect(tree[0]!.children!.map((node) => node.id)).toEqual(["Primitives/Tree"]);
+    expect(app.children![0]!.children!.map((node) => node.id)).toEqual(["App/Primitives/Tree"]);
   });
 
   test("groups sibling components under one shared parent folder", () => {
@@ -34,11 +46,11 @@ describe("buildStoryTree", () => {
     const stories = [story("Primitives/Tree", "Default"), story("Primitives/Card", "Default")];
 
     // Act
-    const tree = buildStoryTree(stories);
+    const app = buildStoryTree(stories)[0]!;
 
     // Assert
-    expect(tree).toHaveLength(1);
-    expect(childLabels(tree[0]!)).toEqual(["Tree", "Card"]);
+    expect(app.children).toHaveLength(1);
+    expect(childLabels(app.children![0]!)).toEqual(["Tree", "Card"]);
   });
 
   test("nests to the full depth of the moduleTitle path", () => {
@@ -46,13 +58,12 @@ describe("buildStoryTree", () => {
     const stories = [story("A/B/C", "Only")];
 
     // Act
-    const tree = buildStoryTree(stories);
-    const a = tree[0]!;
+    const a = buildStoryTree(stories)[0]!.children![0]!;
     const b = a.children![0]!;
 
     // Assert
-    expect([a.id, b.id]).toEqual(["A", "A/B"]);
-    expect(b.children![0]!.id).toBe("A/B/C");
+    expect([a.id, b.id]).toEqual(["App/A", "App/A/B"]);
+    expect(b.children![0]!.id).toBe("App/A/B/C");
   });
 
   test("adds each story as a leaf keyed `${moduleTitle}/${storyName}` under its component", () => {
@@ -60,11 +71,10 @@ describe("buildStoryTree", () => {
     const stories = [story("Primitives/Tree", "Empty"), story("Primitives/Tree", "Deep")];
 
     // Act
-    const tree = buildStoryTree(stories);
-    const component = tree[0]!.children![0]!;
+    const component = buildStoryTree(stories)[0]!.children![0]!.children![0]!;
 
     // Assert
-    expect(component.id).toBe("Primitives/Tree");
+    expect(component.id).toBe("App/Primitives/Tree");
     expect(component.children!.map((leaf) => [leaf.id, leaf.label])).toEqual([
       ["Primitives/Tree/Empty", "Empty"],
       ["Primitives/Tree/Deep", "Deep"],
@@ -76,8 +86,7 @@ describe("buildStoryTree", () => {
     const stories = [story("Primitives/Card", "Card")];
 
     // Act
-    const tree = buildStoryTree(stories);
-    const hoisted = tree[0]!.children![0]!;
+    const hoisted = buildStoryTree(stories)[0]!.children![0]!.children![0]!;
 
     // Assert
     expect(hoisted.children).toBeUndefined();
@@ -90,11 +99,10 @@ describe("buildStoryTree", () => {
     const stories = [story("Primitives/Card", "Default")];
 
     // Act
-    const tree = buildStoryTree(stories);
-    const component = tree[0]!.children![0]!;
+    const component = buildStoryTree(stories)[0]!.children![0]!.children![0]!;
 
     // Assert
-    expect(component.id).toBe("Primitives/Card");
+    expect(component.id).toBe("App/Primitives/Card");
     expect(component.children!.map((leaf) => leaf.id)).toEqual(["Primitives/Card/Default"]);
   });
 });

package/src/components/story.ts

@@ -15,7 +15,9 @@ export interface StoryMeta {
 }
 
 export interface Story {
-  render: () => React.ReactNode;
+  render?: () => React.ReactNode;
+  /** Raw ANSI to paint through AnsiScreen instead of a React tree; exactly one of render or ansi is set. */
+  ansi?: () => string;
   /**
    * Colors (hex tokens) that must appear among the rendered frame's styled
    * spans - the color regression net for color-bearing stories.
@@ -25,18 +27,21 @@ export interface Story {
   size?: { width: number; height: number };
 }
 
+export type StorySection = "App" | "SSH";
+
 export interface LoadedStory {
+  section: StorySection;
   moduleTitle: string;
   storyName: string;
   story: Story;
 }
 
 export function isStory(value: unknown): value is Story {
+  if (typeof value !== "object" || value === null) return false;
+
   return (
-    typeof value === "object" &&
-    value !== null &&
-    "render" in value &&
-    typeof value.render === "function"
+    ("render" in value && typeof value.render === "function") ||
+    ("ansi" in value && typeof value.ansi === "function")
   );
 }
 
@@ -49,22 +54,34 @@ function isStoryMeta(value: unknown): value is StoryMeta {
   );
 }
 
-/** Import every *.stories.tsx next to the components and flatten the exports. */
-export async function loadStories(): Promise<LoadedStory[]> {
-  const glob = new Bun.Glob("**/*.stories.tsx");
-  const files = [...glob.scanSync({ cwd: import.meta.dir })].sort();
-  const loaded: LoadedStory[] = [];
+const GATEWAY_SRC_DIR = `${import.meta.dir}/../../../gateway/src`;
+
+async function collectStories(
+  dir: string,
+  pattern: string,
+  section: StorySection,
+  loaded: LoadedStory[],
+): Promise<void> {
+  const glob = new Bun.Glob(pattern);
+  const files = [...glob.scanSync({ cwd: dir })].sort();
 
   for (const file of files) {
-    const moduleExports = await import(`${import.meta.dir}/${file}`);
+    const moduleExports = await import(`${dir}/${file}`);
     const meta = moduleExports["meta"];
-    const moduleTitle = isStoryMeta(meta) ? meta.title : file.replace(/\.stories\.tsx$/, "");
+    const moduleTitle = isStoryMeta(meta) ? meta.title : file.replace(/\.stories\.tsx?$/, "");
 
     for (const [exportName, exported] of Object.entries(moduleExports)) {
       if (exportName === "meta" || !isStory(exported)) continue;
-      loaded.push({ moduleTitle, storyName: exportName, story: exported });
+      loaded.push({ section, moduleTitle, storyName: exportName, story: exported });
     }
   }
+}
+
+export async function loadStories(): Promise<LoadedStory[]> {
+  const loaded: LoadedStory[] = [];
+
+  await collectStories(import.meta.dir, "**/*.stories.tsx", "App", loaded);
+  await collectStories(GATEWAY_SRC_DIR, "**/*.stories.ts", "SSH", loaded);
 
   return loaded;
 }
@@ -102,11 +119,11 @@ export function buildStoryTree(stories: LoadedStory[]): TreeNode[] {
   const roots: TreeNode[] = [];
   const foldersByPath = new Map<string, StoryTreeFolder>();
 
-  for (const { moduleTitle, storyName } of stories) {
+  for (const { section, moduleTitle, storyName } of stories) {
     let siblings = roots;
     let path = "";
 
-    for (const segment of moduleTitle.split("/")) {
+    for (const segment of [section, ...moduleTitle.split("/")]) {
       path = path === "" ? segment : `${path}/${segment}`;
       let folder = foldersByPath.get(path);
       if (folder === undefined) {

package/src/config.test.ts

@@ -143,6 +143,24 @@ describe("loadConfig", () => {
     }
   });
 
+  test("[ui] default_verdict defaults to approve and parses request_changes", () => {
+    // Arrange
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg-verdict-"));
+    const path = join(dir, "config.toml");
+
+    writeFileSync(path, `[ui]\ndefault_verdict = "request_changes"\n`);
+
+    try {
+      // Assert
+      expect(loadConfig({ userConfigPath: "/nonexistent/config.toml" }).ui.defaultVerdict).toBe(
+        "approve",
+      );
+      expect(loadConfig({ userConfigPath: path }).ui.defaultVerdict).toBe("request_changes");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
   test("[skills] path overrides the default and a malformed value never discards the config", () => {
     const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg-skills-"));
     const path = join(dir, "config.toml");