@kabmo-labs/kabmo 0.5.3 → 0.6.0

package/src/client/components/settings/categories/omp-settings/RoleEditor.tsx

@@ -4,126 +4,219 @@
  */
 
 /**
- * Model role editor — role → model selector overrides in config.yml.
- * Roles come from the native omp schema (`modelRoles` built-in roles), and
- * writes go through /api/model-roles, which edits only `modelRoles` in the
- * global config. Empty input removes the role override.
+ * Model role editor — `role → model selector` overrides in config.yml, with
+ * presets.
  *
- * The list is omp's OWN `MODEL_ROLE_IDS` (15 entries at 18.11.0), not a
- * hand-picked subset: the panel used to offer 9, which left `memory`, `image`,
- * `web`, `speech`, `dictation` and `judge` unreachable from the UI even though
- * `omp config set` accepts them and omp reads them at runtime. `dictation` in
- * particular is how a local STT model is chosen (Kabmo's own dictation
- * resolves `stt.language` from config; the model comes from this role), so the
- * missing row was the one a non-English user needed most.
+ * Roles come from omp's own `MODEL_ROLES` table (see
+ * `@/shared/lib/omp/config/model-roles`), and the candidate models from omp's
+ * own catalog, so a row can only name a model omp can resolve. Writes go
+ * through `/api/model-roles`: `PUT` replaces the whole map (an empty value
+ * removes that role's override), `POST` saves a preset, `DELETE` removes one.
  *
- * The two SECTIONS are omp's own (`chat` vs `kind`): the first ten roles each
- * accept a chat model, while `image`/`web`/`speech`/`dictation`/`judge` accept
- * a model of that kind only — a chat model in `judge` is silently unusable, so
- * the split is information the user needs, not decoration.
+ * Two things this panel used to get wrong and must not again:
+ *
+ *   - **A role row was a free-text `provider/model` field.** That is a value a
+ *     user cannot type reliably, and a typo is invisible: omp falls back to its
+ *     own resolution and the role silently runs on a different model. Every row
+ *     is a picker over the catalog now, with the stored value kept selectable
+ *     even when the catalog no longer lists it.
+ *   - **`widget` was missing from the role table** (omp 18.12.6), which made it
+ *     the one role unreachable from the console.
+ *
+ * The presets are the reason this panel exists in its current shape: switching
+ * a whole role map used to mean sixteen edits. Two facts are kept apart on
+ * purpose — the SELECTED preset (the target of Update/Delete, which a hand edit
+ * must not clear, or the save-back flow would be impossible) and whether the
+ * live map still equals it (`in use` vs `modified`).
  */
 
-import { useState } from 'preact/hooks';
-import { Check } from 'lucide-preact';
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { AlertCircle, Check } from 'lucide-preact';
+import { candidatesForRole, matchPreset, MODEL_ROLES, roleMapsEqual, ROLE_IDS } from '@/shared/lib/omp/config/model-roles';
+import type { ModelRoleCandidate, ModelRolePreset } from '@/shared/types/model-roles';
+import { RoleRow } from '@/client/components/settings/categories/omp-settings/RoleRow';
+import { PresetBar } from '@/client/components/settings/categories/omp-settings/PresetBar';
 
-interface RoleInfo {
-  /** omp's display name for the role (`MODEL_ROLES[role].name`). */
-  label: string;
-  /** omp's section: a chat model, or a model of that kind only. */
-  section: 'chat' | 'kind';
+interface RoleEditorProps {
+  roles: Record<string, string>;
+  presets: ModelRolePreset[];
+  candidates: ModelRoleCandidate[];
+  /** Why the catalog could not be read; the rows still render. */
+  candidatesError?: string | null;
+  /** Replace the whole map (an empty value removes that role's override). */
+  onSaveRoles: (roles: Record<string, string>) => Promise<boolean>;
+  onSavePreset: (name: string, roles: Record<string, string>) => Promise<boolean>;
+  onUpdatePreset: (preset: ModelRolePreset) => Promise<boolean>;
+  onDeletePreset: (preset: ModelRolePreset) => Promise<boolean>;
+  savedRole: string | null;
+  /** The last write's refusal; shown in place so a rejected save is not silent. */
+  writeError?: string | null;
+  onDismissWriteError?: () => void;
 }
 
-/** omp's `MODEL_ROLES` table, in its own declaration order. */
-export const MODEL_ROLES: Record<string, RoleInfo> = {
-  default: { label: 'Default', section: 'chat' },
-  smol: { label: 'Fast', section: 'chat' },
-  slow: { label: 'Thinking', section: 'chat' },
-  vision: { label: 'Vision', section: 'chat' },
-  plan: { label: 'Architect', section: 'chat' },
-  commit: { label: 'Commit', section: 'chat' },
-  tiny: { label: 'Tiny', section: 'chat' },
-  memory: { label: 'Memory', section: 'chat' },
-  task: { label: 'Subtask', section: 'chat' },
-  advisor: { label: 'Advisor', section: 'chat' },
-  image: { label: 'Image generation', section: 'kind' },
-  web: { label: 'Web search', section: 'kind' },
-  speech: { label: 'Speech (TTS)', section: 'kind' },
-  dictation: { label: 'Dictation (STT)', section: 'kind' },
-  judge: { label: 'Judge', section: 'kind' },
-};
-
-const ROLE_IDS = Object.keys(MODEL_ROLES);
-
-/** One editable role row. */
-function RoleRow({
-  role,
-  value,
-  onCommit,
-}: {
-  role: string;
-  value: string;
-  onCommit: (role: string, raw: string) => void;
-}) {
-  const [draft, setDraft] = useState(value);
-  const info = MODEL_ROLES[role];
-  return (
-    <div className="flex items-center justify-between gap-3 px-3 py-2.5">
-      <div className="min-w-0">
-        <div className="font-medium text-ink">{info.label}</div>
-        <div className="font-mono text-[9px] text-ink/30">{role}</div>
-      </div>
-      <input
-        aria-label={`${info.label} (${role}) model`}
-        type="text"
-        value={draft}
-        onChange={(e) => setDraft(e.currentTarget.value)}
-        onBlur={(e) => onCommit(role, e.currentTarget.value)}
-        placeholder="provider/model"
-        className="w-56 bg-paper border border-ink/15 rounded-md px-2 py-1 text-ink text-right font-mono"
-      />
-    </div>
+const SECTIONS: Array<{ id: 'chat' | 'kind'; title: string; note: string }> = [
+  {
+    id: 'chat',
+    title: 'Chat roles',
+    note: 'Each takes a chat model. “omp default” removes the override and omp resolves the role itself.',
+  },
+  {
+    id: 'kind',
+    title: 'Model-kind roles',
+    note: 'Each takes a model of that kind only — a chat model here is silently unusable.',
+  },
+];
+
+export function RoleEditor({
+  roles,
+  presets,
+  candidates,
+  candidatesError,
+  onSaveRoles,
+  onSavePreset,
+  onUpdatePreset,
+  onDeletePreset,
+  savedRole,
+  writeError,
+  onDismissWriteError,
+}: RoleEditorProps) {
+  const [draft, setDraft] = useState<Record<string, string>>(roles);
+  const [busy, setBusy] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(() => matchPreset(presets, roles)?.id ?? null);
+
+  // The server's map is the truth; a save answers with the stored copy.
+  useEffect(() => { setDraft(roles); }, [roles]);
+
+  /**
+   * Keep the selection honest as the list and the map arrive:
+   *  - a deleted preset cannot stay selected;
+   *  - with nothing selected, a map that equals a preset adopts it — this is the
+   *    load path (the payload lands after mount) and a reload of a saved state.
+   * A hand edit does NOT clear the selection: it is the target of `Update`.
+   */
+  useEffect(() => {
+    setSelectedId((current) => {
+      if (current && !presets.some((preset) => preset.id === current)) return null;
+      if (current) return current;
+      return matchPreset(presets, draft)?.id ?? null;
+    });
+  }, [presets, draft]);
+
+  const selectedPreset = useMemo(
+    () => presets.find((preset) => preset.id === selectedId) ?? null,
+    [presets, selectedId],
+  );
+  const inUse = useMemo(
+    () => Boolean(selectedPreset && roleMapsEqual(selectedPreset.roles, draft)),
+    [selectedPreset, draft],
   );
-}
 
-interface RoleEditorProps {
-  modelRoles: Record<string, string>;
-  onSaveRole: (role: string, value: string) => void;
-  savedRole: string | null;
-}
+  const commit = useCallback(async (next: Record<string, string>) => {
+    setDraft(next);
+    setBusy(true);
+    try {
+      await onSaveRoles(next);
+    } finally {
+      setBusy(false);
+    }
+  }, [onSaveRoles]);
+
+  const changeRole = useCallback((role: string, value: string) => {
+    const next = { ...draft };
+    if (value) next[role] = value;
+    else delete next[role];
+    void commit(next);
+  }, [commit, draft]);
+
+  const applyPreset = useCallback((preset: ModelRolePreset) => {
+    setSelectedId(preset.id);
+    void commit({ ...preset.roles });
+  }, [commit]);
+
+  const saveAs = useCallback(async (name: string) => {
+    setBusy(true);
+    try {
+      await onSavePreset(name, draft);
+    } finally {
+      setBusy(false);
+    }
+  }, [draft, onSavePreset]);
+
+  const update = useCallback(async () => {
+    if (!selectedPreset) return;
+    setBusy(true);
+    try {
+      await onUpdatePreset({ ...selectedPreset, roles: draft });
+    } finally {
+      setBusy(false);
+    }
+  }, [selectedPreset, draft, onUpdatePreset]);
 
-export function RoleEditor({ modelRoles, onSaveRole, savedRole }: RoleEditorProps) {
-  const commitRole = (role: string, raw: string) => {
-    const trimmed = raw.trim();
-    if ((modelRoles[role] ?? '') === trimmed) return;
-    onSaveRole(role, trimmed);
-  };
-
-  const sections: Array<{ id: 'chat' | 'kind'; title: string; note: string }> = [
-    {
-      id: 'chat',
-      title: 'Chat roles',
-      note: 'Each takes a chat model. Empty removes the override and omp falls back to its own resolution.',
-    },
-    {
-      id: 'kind',
-      title: 'Model-kind roles',
-      note: 'Each takes a model of that kind only — a chat model here is silently unusable.',
-    },
-  ];
+  const remove = useCallback(async () => {
+    if (!selectedPreset) return;
+    setBusy(true);
+    try {
+      await onDeletePreset(selectedPreset);
+      setSelectedId(null);
+    } finally {
+      setBusy(false);
+    }
+  }, [selectedPreset, onDeletePreset]);
 
   return (
     <div className="pt-2">
       <div className="flex items-center justify-between pb-2">
         <div>
           <h3 className="text-sm font-semibold text-ink">Model Roles</h3>
-          <p className="text-ink/50 mt-0.5">Role → model selectors from config.yml. Empty removes the role override.</p>
+          <p className="text-ink/50 mt-0.5">
+            Role → model selectors from config.yml. Pick a preset to switch every role at once.
+          </p>
         </div>
         {savedRole && (
           <span className="inline-flex items-center gap-1 text-[10px] text-ink/60"><Check size={11} /> saved</span>
         )}
       </div>
-      {sections.map((section) => {
-        const roles = ROLE_IDS.filter((role) => MODEL_ROLES[role].section === section.id);
+
+      <PresetBar
+        presets={presets}
+        selectedPreset={selectedPreset}
+        inUse={inUse}
+        busy={busy}
+        onApply={applyPreset}
+        onSave={saveAs}
+        onUpdate={update}
+        onDelete={remove}
+      />
+
+      {writeError && (
+        <div className="flex items-start gap-1.5 pb-2 text-[10px] text-error">
+          <AlertCircle size={11} className="mt-px flex-shrink-0" />
+          <span className="flex-1">{writeError}</span>
+          {onDismissWriteError && (
+            <button
+              type="button"
+              onClick={onDismissWriteError}
+              className="text-ink/40 hover:text-ink cursor-pointer"
+              aria-label="Dismiss role write error"
+            >
+              ×
+            </button>
+          )}
+        </div>
+      )}
+
+      {candidatesError && (
+        <div className="flex items-start gap-1.5 pb-2 text-[10px] text-warning">
+          <AlertCircle size={11} className="mt-px flex-shrink-0" />
+          <span>
+            Model catalog unavailable ({candidatesError}). Stored selectors stay editable; new picks need a working
+            omp install.
+          </span>
+        </div>
+      )}
+
+      {SECTIONS.map((section) => {
+        const sectionRoles = ROLE_IDS.filter((role) => MODEL_ROLES[role].section === section.id);
         return (
           <div key={section.id} className="mb-3">
             <div className="pb-1">
@@ -131,12 +224,15 @@ export function RoleEditor({ modelRoles, onSaveRole, savedRole }: RoleEditorProp
               <div className="text-[10px] text-ink/40 leading-snug">{section.note}</div>
             </div>
             <div className="rounded-lg border border-ink/10 divide-y divide-ink/5">
-              {roles.map((role) => (
+              {sectionRoles.map((role) => (
                 <RoleRow
                   key={role}
                   role={role}
-                  value={modelRoles[role] ?? ''}
-                  onCommit={commitRole}
+                  info={MODEL_ROLES[role]}
+                  value={draft[role] ?? ''}
+                  candidates={candidatesForRole(role, candidates)}
+                  disabled={busy}
+                  onChange={changeRole}
                 />
               ))}
             </div>

package/src/client/components/settings/categories/omp-settings/RoleRow.tsx

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One role row: the role's name, its id, and a MODEL PICKER.
+ *
+ * A `<select>` grouped by provider rather than a text field or a hand-rolled
+ * popup: the value is a `provider/model` selector, which a user cannot be
+ * expected to type correctly (and a typo in `modelRoles` is a role that
+ * silently falls back), while a native select gives type-ahead, keyboard
+ * navigation and screen-reader semantics for free. The candidates come from
+ * omp's own catalog, so a row can only name a model omp can resolve.
+ *
+ * The current value is always present as an option, even when the catalog no
+ * longer lists it (a model removed from models.yml, a provider whose credential
+ * was removed, a catalog read that failed): dropping it would make the select
+ * show a different model than the config holds, and the next edit would write
+ * that one over it.
+ */
+
+import type { ModelRoleCandidate } from '@/shared/types/model-roles';
+import type { ModelRoleInfo } from '@/shared/lib/omp/config/model-roles';
+
+interface RoleRowProps {
+  role: string;
+  info: ModelRoleInfo;
+  value: string;
+  candidates: ModelRoleCandidate[];
+  disabled: boolean;
+  onChange: (role: string, value: string) => void;
+}
+
+/** Candidates grouped by provider, in the order they arrive (already sorted). */
+function groupByProvider(candidates: ModelRoleCandidate[]): Array<{ provider: string; rows: ModelRoleCandidate[] }> {
+  const groups: Array<{ provider: string; rows: ModelRoleCandidate[] }> = [];
+  for (const candidate of candidates) {
+    const last = groups[groups.length - 1];
+    if (last && last.provider === candidate.provider) last.rows.push(candidate);
+    else groups.push({ provider: candidate.provider, rows: [candidate] });
+  }
+  return groups;
+}
+
+export function RoleRow({ role, info, value, candidates, disabled, onChange }: RoleRowProps) {
+  const known = candidates.some((candidate) => candidate.selector === value);
+  const groups = groupByProvider(candidates);
+  const label = `${info.label} (${role}) model`;
+
+  return (
+    <div className="flex items-center justify-between gap-3 px-3 py-2.5">
+      <div className="min-w-0">
+        <div className="font-medium text-ink">{info.label}</div>
+        <div className="font-mono text-[9px] text-ink/30">{role}</div>
+      </div>
+      <select
+        aria-label={label}
+        title={value || 'omp decides this role'}
+        value={value}
+        disabled={disabled}
+        onChange={(event) => onChange(role, event.currentTarget.value)}
+        className="w-60 max-w-[60%] bg-paper border border-ink/15 rounded-md px-2 py-1 text-ink font-mono text-[11px] cursor-pointer disabled:opacity-50"
+      >
+        <option value="">— omp default —</option>
+        {value && !known && <option value={value}>{value} (not in catalog)</option>}
+        {groups.map((group) => (
+          <optgroup key={group.provider} label={group.provider}>
+            {group.rows.map((candidate) => (
+              <option key={candidate.selector} value={candidate.selector}>
+                {candidate.name}
+              </option>
+            ))}
+          </optgroup>
+        ))}
+      </select>
+    </div>
+  );
+}

package/src/client/data/settings/omp-schema.json

@@ -3087,8 +3087,8 @@
           },
           {
             "value": "long",
-            "label": "Long (1h)",
-            "description": "1h TTL where the provider supports it; pricier writes, only warmed during active runs"
+            "label": "Long (1h+)",
+            "description": "Longer TTL where supported (Anthropic/Bedrock 1h, OpenAI GPT-5.6+ Responses 12h); pricier writes, only warmed during active runs"
           },
           {
             "value": "none",

package/src/client/hooks/desktop/servers.test.ts

@@ -0,0 +1,73 @@
+/**
+ * The bridge, driven through the transport the macOS shell installs.
+ *
+ * The interesting failures are about what the page can tell apart: a browser has
+ * no shell at all, a shell announces itself before the first render, and a
+ * refused command keeps the shell's own sentence. None of that is visible in the
+ * panel's markup — a control that never works looks exactly like one that does
+ * until it is pressed.
+ */
+
+import { describe, expect, test, beforeEach } from 'bun:test';
+
+type Reply = (id: number, ok: boolean, payload: unknown) => void;
+
+interface ShellWindow {
+  __kabmoCall?: (method: string, params?: Record<string, unknown>) => Promise<unknown>;
+  __kabmoDesktop?: unknown;
+  __kabmoReply?: Reply;
+}
+
+const shell = () => globalThis as unknown as { window?: ShellWindow };
+
+describe('desktop bridge', () => {
+  beforeEach(() => {
+    delete shell().window;
+  });
+
+  test('a browser has no shell, and every call refuses', async () => {
+    shell().window = {};
+    const bridge = await import('@/client/lib/desktop/bridge');
+    expect(bridge.isDesktopShell()).toBe(false);
+    expect(await bridge.desktopInfo()).toBeNull();
+    await expect(bridge.readServers()).rejects.toThrow('Not running inside the Kabmo desktop shell.');
+  });
+
+  test('the injected identity is readable before any command runs', async () => {
+    shell().window = {
+      __kabmoCall: async () => null,
+      __kabmoDesktop: { platform: 'macos', shellVersion: '0.1.0', overlayTitlebar: true, trafficLightInset: '5rem' },
+    };
+    const bridge = await import('@/client/lib/desktop/bridge');
+    expect(bridge.isDesktopShell()).toBe(true);
+    const info = await bridge.desktopInfo();
+    expect(info?.overlayTitlebar).toBe(true);
+    expect(info?.trafficLightInset).toBe('5rem');
+  });
+
+  test('a command answers through __kabmoCall', async () => {
+    const seen: string[] = [];
+    shell().window = {
+      __kabmoCall: async (method) => {
+        seen.push(method);
+        return { entries: [], detected: [], activeId: 'local:1' };
+      },
+    };
+    const bridge = await import('@/client/lib/desktop/bridge');
+    const state = await bridge.readServers();
+    expect(seen).toEqual(['servers_state']);
+    expect(state.activeId).toBe('local:1');
+  });
+
+  /**
+   * The shell sends its own sentence, which is what the UI shows. Stripping a
+   * prefix would eat the first word of a message that starts with "Error".
+   */
+  test('a refused command keeps the shell’s own sentence, unstripped', async () => {
+    const bridge = await import('@/client/lib/desktop/bridge');
+    expect(bridge.bridgeError(new Error('Use the server’s root address — a base path is not supported.'))).toBe(
+      'Use the server’s root address — a base path is not supported.',
+    );
+    expect(bridge.bridgeError('plain')).toBe('plain');
+  });
+});

package/src/client/hooks/desktop/servers.ts

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The server list the desktop shell owns, as the navbar reads it.
+ *
+ * One store per window, not per component: the navbar button, its popover and
+ * anything else that asks "which server am I on" must not each hold a copy —
+ * two copies is how a start on one side leaves the other showing `Stopped`.
+ *
+ * Every mutation answers with the WHOLE state (`ServersState`), and the shell is
+ * the source of truth: it re-reads its own list, re-probes every URL and
+ * re-discovers local instances before answering. Adopting the response verbatim
+ * is what keeps the panel from inventing a running state the shell does not
+ * agree with.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import {
+  activateServer,
+  addRemoteServer,
+  bridgeError,
+  isDesktopShell,
+  readServers,
+  removeServer,
+  startLocalServer,
+  stopLocalServer,
+  type DesktopServersState,
+} from '@/client/lib/desktop/bridge';
+
+export interface DesktopServersStore {
+  available: boolean;
+  state: DesktopServersState | null;
+  /** A request is in flight; the panel disables its controls rather than queueing. */
+  busy: boolean;
+  error: string | null;
+  reload: () => Promise<void>;
+  activate: (id: string) => Promise<boolean>;
+  add: (label: string, url: string) => Promise<boolean>;
+  remove: (id: string) => Promise<boolean>;
+  start: (port?: number) => Promise<boolean>;
+  stop: (id: string) => Promise<boolean>;
+}
+
+/**
+ * How often the open popover re-reads the list.
+ *
+ * A local server started in a terminal, a `bun run dev` coming up, a managed
+ * one that just died — none of those announce themselves to this page, and the
+ * popover is the surface that has to show them. Only while it is open: a poll
+ * running behind a closed popover would probe every server every few seconds
+ * for a panel nobody is looking at.
+ */
+const REFRESH_INTERVAL_MS = 4000;
+
+export function useDesktopServers(open: boolean): DesktopServersStore {
+  const available = isDesktopShell();
+  const [state, setState] = useState<DesktopServersState | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // A mutation and a poll can overlap; the poll must not overwrite the answer
+  // the user's own click produced. The counter is what tells them apart.
+  const mutationsRef = useRef(0);
+
+  const reload = useCallback(async () => {
+    if (!available) return;
+    const ticket = mutationsRef.current;
+    try {
+      const next = await readServers();
+      if (mutationsRef.current === ticket) setState(next);
+    } catch (err) {
+      if (mutationsRef.current === ticket) setError(bridgeError(err));
+    }
+  }, [available]);
+
+  const run = useCallback(
+    async (action: () => Promise<DesktopServersState>) => {
+      mutationsRef.current += 1;
+      setBusy(true);
+      setError(null);
+      try {
+        setState(await action());
+        return true;
+      } catch (err) {
+        setError(bridgeError(err));
+        return false;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!available) return;
+    void reload();
+  }, [available, reload]);
+
+  useEffect(() => {
+    if (!available || !open) return;
+    const timer = setInterval(() => void reload(), REFRESH_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [available, open, reload]);
+
+  const activate = useCallback(
+    // The shell NAVIGATES on success, so this page is replaced and the resolved
+    // state never renders. A failure is what comes back here.
+    (id: string) => run(() => activateServer(id)),
+    [run],
+  );
+
+  const add = useCallback(
+    (label: string, url: string) => run(() => addRemoteServer(label, url)),
+    [run],
+  );
+
+  const remove = useCallback((id: string) => run(() => removeServer(id)), [run]);
+
+  const start = useCallback((port?: number) => run(() => startLocalServer(port)), [run]);
+
+  const stop = useCallback((id: string) => run(() => stopLocalServer(id)), [run]);
+
+  return { available, state, busy, error, reload, activate, add, remove, start, stop };
+}