@kabmo-labs/kabmo 0.5.3 → 0.6.0

package/src/client/components/mobile/mobile-session-sidebar/Item.tsx

@@ -18,6 +18,7 @@ import type { BatchBinding } from '@/client/components/common/batch-selection/ty
 import { folderBatchState } from '@/client/components/common/batch-selection/folder-state';
 import { SelectionCheckbox } from '@/client/components/common/batch-selection/SelectionCheckbox';
 import { SessionRevealRow } from '@/client/components/mobile/mobile-session-sidebar/RevealRow';
+import { folderGroupGap } from '@/client/components/mobile/mobile-session-sidebar/folder-gap';
 
 interface MobileSessionCategoryProps {
   folder: WorkspaceFolderData;
@@ -126,10 +127,16 @@ export function MobileSessionCategory({
   const listOpen = isExpanded || sessionCheckboxes;
 
   return (
-    <div className="mb-4">
+    <div className={folderGroupGap(listOpen)} data-testid="session-folder">
       <div
         onClick={batch ? undefined : onToggleExpand}
-        className="flex items-center justify-between gap-2 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
+        // `py-1`, not `py-2`: the header's height is set by its own action
+        // buttons (27px, `p-1.5` around a 15px glyph — the touch target), so
+        // 8px of vertical padding made a folder header 43px against the 33px
+        // of the session rows it stands in for. A closed folder is a row, and
+        // two of them read as one list only if they are built like rows.
+        // Measured on a 390px phone: 43px → 35px, 2px off a session row.
+        className="flex items-center justify-between gap-2 py-1 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
       >
         <div className="flex items-center space-x-2 min-w-0">
           {folderCheckbox && folderSummary ? (

package/src/client/components/mobile/mobile-session-sidebar/folder-gap.test.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone drawer's folder gap.
+ *
+ * A closed workspace is a row in the list, not a section of it, so it takes a
+ * row-sized gap — the reported "folder yang tertutup jaraknya terlalu jauh".
+ * The rule is unit-tested because the failure is a MEASUREMENT (a mounted
+ * happy-dom tree resolves no layout, so a component test can only read back the
+ * class it was given); `mobile.e2e.ts` pins the pixels.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import {
+  FOLDER_GAP_COLLAPSED,
+  FOLDER_GAP_EXPANDED,
+  folderGroupGap,
+} from '@/client/components/mobile/mobile-session-sidebar/folder-gap';
+
+describe('mobile folder group gap', () => {
+  test('a closed folder takes a row-sized gap', () => {
+    expect(folderGroupGap(false)).toBe(FOLDER_GAP_COLLAPSED);
+    // The bug: `mb-4` on a closed folder put two of them 59px apart on a
+    // 390px phone, with 39px of blank ink between their names.
+    expect(folderGroupGap(false)).not.toBe(FOLDER_GAP_EXPANDED);
+  });
+
+  test('an open folder keeps the group gap', () => {
+    expect(folderGroupGap(true)).toBe(FOLDER_GAP_EXPANDED);
+  });
+
+  test('the two gaps differ, and the closed one is the smaller step', () => {
+    // `mb-1` = 4px, `mb-4` = 16px. Written as the Tailwind steps they are, so
+    // a rename that swapped the two cannot pass by keeping them unequal.
+    expect(FOLDER_GAP_COLLAPSED).toBe('mb-1');
+    expect(FOLDER_GAP_EXPANDED).toBe('mb-4');
+  });
+});

package/src/client/components/mobile/mobile-session-sidebar/folder-gap.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The gap under one workspace group in the phone's drawer.
+ *
+ * The gap belongs to the GROUP, so it shrinks when there is no group to
+ * separate. Measured on a 390px phone: a folder header is 43px tall (its `+`
+ * and `⋯` controls are 27px boxes inside 8px of padding, which is the touch
+ * target), so the 16px that separates two EXPANDED groups put two CLOSED
+ * folders 59px apart with 39px of blank ink between their names — twice the
+ * list's own row rhythm (33px rows, 19px between titles). A closed folder is a
+ * row, not a section, so it takes a row-sized gap; the group gap returns the
+ * moment its sessions do.
+ *
+ * Stated here rather than inline in the component because it is the one thing
+ * a mounted test cannot check: `happy-dom` resolves no layout, so a component
+ * test can only read the class back, which the class string itself already
+ * says. This module is the rule; the component applies it.
+ */
+
+/** Row-sized: the drawer's rows are separated by 2px, and the desktop list
+ *  puts 4px between a header and the rows it owns. */
+export const FOLDER_GAP_COLLAPSED = 'mb-1';
+
+/** Group-sized: what separates one workspace's list from the next. */
+export const FOLDER_GAP_EXPANDED = 'mb-4';
+
+/**
+ * `listOpen` is the same flag the component uses to draw the rows — the
+ * EXPANDED state, or a batch selection that force-opens the group so its
+ * checkboxes exist. A group whose rows are on screen is a section whatever the
+ * user's own expansion flag says.
+ */
+export function folderGroupGap(listOpen: boolean): string {
+  return listOpen ? FOLDER_GAP_EXPANDED : FOLDER_GAP_COLLAPSED;
+}

package/src/client/components/mobile/mobile-session-sidebar/use-dock.ts

@@ -25,7 +25,7 @@ import type { PanelBodyProps } from '@/client/components/workspace/panels/builti
 import { usePanelCatalog, useLeftDockView } from '@/client/components/workspace/plugin-panel/catalog';
 import type { ResolvedPanel } from '@/client/components/workspace/plugin-panel/catalog';
 import { useLeftDock } from '@/client/hooks/workspace/left-dock';
-import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { useSharedSessionState } from '@/client/hooks/workspace/session-state';
 import { SESSIONS_VIEW_ID } from '@/shared/lib/workspace/left-dock';
 
 export interface MobileDockState {
@@ -43,7 +43,11 @@ export interface MobileDockState {
 export function useMobileDock(): MobileDockState {
   const dock = useLeftDock();
   const catalog = usePanelCatalog('left');
-  const [stored, setStored] = useSessionState<string>('layout.mobileLeftPanel', SESSIONS_VIEW_ID);
+  // SHARED, not private: the navbar's own readout can ask for this view, and
+  // the write it makes is a different component's. A private copy would keep
+  // the selection it read at mount and the drawer would open on the old view —
+  // the same rule `useResolvedRepo` follows for a value a second surface moves.
+  const [stored, setStored] = useSharedSessionState<string>('layout.mobileLeftPanel', SESSIONS_VIEW_ID);
   const activeView = useLeftDockView(stored, dock.enabled);
 
   return {

package/src/client/components/settings/categories/OmpSettings.tsx

@@ -24,6 +24,7 @@ import type { ConfigEntry } from '@/server/lib/omp/config/config-cli';
 import { OMP_SCHEMA } from '@/shared/lib/omp/config/schema';
 import { ConfigTabs } from '@/client/components/settings/categories/omp-settings/ConfigTabs';
 import { RoleEditor } from '@/client/components/settings/categories/omp-settings/RoleEditor';
+import { useModelRoles } from '@/client/hooks/settings/model-roles';
 import { ExtensionsPanel } from '@/client/components/settings/categories/omp-settings/ExtensionsPanel';
 
 interface OmpSettingsProps {
@@ -50,7 +51,6 @@ export function OmpSettings(_props: OmpSettingsProps) {
   const [state, setState] = useState<AgentState | null>(null);
   const [stateRunning, setStateRunning] = useState(false);
   const [entries, setEntries] = useState<Record<string, ConfigEntry>>({});
-  const [modelRoles, setModelRoles] = useState<Record<string, string>>({});
   const [extensions, setExtensions] = useState<ExtensionItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [activeTabId, setActiveTabId] = useState(OMP_SCHEMA.tabs[0]?.id ?? 'model');
@@ -60,6 +60,16 @@ export function OmpSettings(_props: OmpSettingsProps) {
   const [savingKeys, setSavingKeys] = useState<Set<string>>(new Set());
   const [saveErrors, setSaveErrors] = useState<Map<string, string>>(new Map());
 
+  /** Flash a saved badge for one key, then clear it. */
+  const flashSaved = useCallback((key: string) => {
+    setSavedKey(key);
+    setTimeout(() => setSavedKey((current) => (current === key ? null : current)), 2000);
+  }, []);
+
+  // The role map, its presets and the role dropdowns' catalog. Its writes answer
+  // with the server's whole map/list, so the panel never renders a guess.
+  const modelRoles = useModelRoles(flashSaved);
+
   const load = useCallback(() => {
     setLoading(true);
     Promise.all([
@@ -72,20 +82,15 @@ export function OmpSettings(_props: OmpSettingsProps) {
         if (stateData.running && stateData.state) setState(stateData.state as AgentState);
         setStateRunning(Boolean(stateData.running));
         if (configData.entries) setEntries(configData.entries as Record<string, ConfigEntry>);
-        if (rolesData.roles && typeof rolesData.roles === 'object') setModelRoles(rolesData.roles as Record<string, string>);
+        modelRoles.applyPayload(rolesData);
         if (Array.isArray(extensionsData.extensions)) setExtensions(extensionsData.extensions as ExtensionItem[]);
       })
       .catch((err) => console.error('Failed to load omp settings:', err))
       .finally(() => setLoading(false));
-  }, []);
+  }, [modelRoles.applyPayload]);
 
   useEffect(() => { load(); }, [load]);
 
-  const flashSaved = (key: string) => {
-    setSavedKey(key);
-    setTimeout(() => setSavedKey((current) => (current === key ? null : current)), 2000);
-  };
-
   /**
    * Apply one write's outcome. A failure keeps omp's OWN sentence, not just a
    * flag: `omp config set` refuses a stale key with "Unknown setting: <key>",
@@ -174,23 +179,6 @@ export function OmpSettings(_props: OmpSettingsProps) {
     });
   }, []);
 
-  const handleSaveRole = (role: string, value: string) => {
-    const next = { ...modelRoles };
-    if (value.trim()) next[role] = value.trim();
-    else delete next[role];
-    setModelRoles(next);
-    fetch('/api/model-roles', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ roles: next }),
-    })
-      .then((res) => res.json())
-      .then((data) => {
-        if (data.success) flashSaved(`role-${role}`);
-      })
-      .catch((err) => console.error('Failed to save model roles:', err));
-  };
-
   const handleToggleExtension = (extension: ExtensionItem) => {
     fetch('/api/omp/extensions', {
       method: 'POST',
@@ -286,7 +274,7 @@ export function OmpSettings(_props: OmpSettingsProps) {
               {searchQuery.trim() && ' — matching keys only'}
             </p>
           </div>
-          {savedKey && !savedKey.startsWith('role-') && !savedKey.startsWith('ext-') && (
+          {savedKey && savedKey !== 'role-map' && !savedKey.startsWith('ext-') && (
             <span className="inline-flex items-center gap-1 text-[10px] text-ink/60">saved {savedKey}</span>
           )}
         </div>
@@ -306,9 +294,17 @@ export function OmpSettings(_props: OmpSettingsProps) {
       </div>
 
       <RoleEditor
-        modelRoles={modelRoles}
-        onSaveRole={handleSaveRole}
-        savedRole={savedKey?.startsWith('role-') ? savedKey.slice(5) : null}
+        roles={modelRoles.roles}
+        presets={modelRoles.presets}
+        candidates={modelRoles.candidates}
+        candidatesError={modelRoles.candidatesError}
+        onSaveRoles={modelRoles.writeRoles}
+        onSavePreset={modelRoles.savePreset}
+        onUpdatePreset={modelRoles.updatePreset}
+        onDeletePreset={modelRoles.deletePreset}
+        savedRole={savedKey === 'role-map' ? 'roles' : null}
+        writeError={modelRoles.writeError}
+        onDismissWriteError={modelRoles.clearWriteError}
       />
 
       <ExtensionsPanel

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

@@ -0,0 +1,187 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Preset switcher for the model-role editor.
+ *
+ * The problem it solves: a role map is up to sixteen assignments, and switching
+ * between "everything on the cheap model" and "everything on the thinking model"
+ * used to mean sixteen edits. A preset is that map under a name (stored in
+ * Kabmo's own `model_role_presets` table), and choosing one APPLIES it.
+ *
+ * Three behaviours are deliberate:
+ *
+ *   - **Choosing a preset applies it immediately.** A preset picker with a
+ *     separate Apply button makes the control's state ambiguous ("selected but
+ *     not in force"), and the write is one `PUT` of a map the user can re-apply
+ *     from the same list. The list is the switch.
+ *   - **The selected preset survives an edit, and "in use" does not.** They are
+ *     two different facts: the selection is what `Update` would overwrite, while
+ *     `in use` means the live map still equals it. Tying both to the comparison
+ *     made `Update` unreachable in the exact flow it exists for — pick a preset,
+ *     tweak one role, save the tweak back into it — because the edit moved the
+ *     picker to `Custom` and disabled the button. So the picker reads
+ *     `preset · modified` while they differ, and `in use` only while they agree.
+ *   - **Overwriting and deleting both ask first, in place.** `Save as…` names a
+ *     new preset; `Update` overwrites the SELECTED one (never a guess), and
+ *     Delete confirms inline before removing the record.
+ */
+
+import { useState } from 'preact/hooks';
+import { Check, Plus, Save, Trash2 } from 'lucide-preact';
+import type { ModelRolePreset } from '@/shared/types/model-roles';
+
+interface PresetBarProps {
+  presets: ModelRolePreset[];
+  /** Preset the user picked; the target of Update/Delete. */
+  selectedPreset: ModelRolePreset | null;
+  /** Whether the live role map still equals the selected preset. */
+  inUse: boolean;
+  /** A write is in flight; every control is disabled rather than racing it. */
+  busy: boolean;
+  onApply: (preset: ModelRolePreset) => void;
+  onSave: (name: string) => void;
+  onUpdate: () => void;
+  onDelete: () => void;
+}
+
+export function PresetBar({
+  presets,
+  selectedPreset,
+  inUse,
+  busy,
+  onApply,
+  onSave,
+  onUpdate,
+  onDelete,
+}: PresetBarProps) {
+  const [creating, setCreating] = useState(false);
+  const [name, setName] = useState('');
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const commitNew = () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    onSave(trimmed);
+    setName('');
+    setCreating(false);
+  };
+
+  return (
+    <div className="rounded-lg border border-ink/10 bg-ink/[0.02] px-3 py-2 mb-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-[10px] font-semibold uppercase tracking-wide text-ink/50">Preset</span>
+        <select
+          aria-label="Model role preset"
+          value={selectedPreset?.id ?? ''}
+          disabled={busy || presets.length === 0}
+          onChange={(event) => {
+            const chosen = presets.find((preset) => preset.id === event.currentTarget.value);
+            if (chosen) onApply(chosen);
+          }}
+          className="bg-paper border border-ink/15 rounded-md px-2 py-1 text-ink text-[11px] cursor-pointer disabled:opacity-50 min-w-[10rem]"
+        >
+          <option value="">{presets.length === 0 ? 'No presets yet' : 'Custom'}</option>
+          {presets.map((preset) => (
+            <option key={preset.id} value={preset.id}>{preset.name}</option>
+          ))}
+        </select>
+
+        {selectedPreset && (
+          <span
+            className={`inline-flex items-center gap-1 text-[10px] ${inUse ? 'text-ink/50' : 'text-warning'}`}
+            title={inUse ? 'The live roles are this preset' : 'The roles differ from this preset — Update stores them'}
+          >
+            {inUse ? <><Check size={11} /> in use</> : 'modified'}
+          </span>
+        )}
+
+        <div className="ml-auto flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => setCreating((open) => !open)}
+            disabled={busy}
+            title="Save the current roles as a new preset"
+            className="flex items-center gap-1 px-2 py-1 rounded-md border border-ink/15 text-ink/70 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-50 text-[11px]"
+          >
+            <Plus size={11} /> Save as…
+          </button>
+          <button
+            type="button"
+            onClick={onUpdate}
+            disabled={busy || !selectedPreset}
+            title={selectedPreset ? `Overwrite “${selectedPreset.name}” with the current roles` : 'Pick a preset first'}
+            className="flex items-center gap-1 px-2 py-1 rounded-md border border-ink/15 text-ink/70 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-40 text-[11px]"
+          >
+            <Save size={11} /> Update
+          </button>
+          <button
+            type="button"
+            onClick={() => setConfirmDelete(true)}
+            disabled={busy || !selectedPreset}
+            title={selectedPreset ? `Delete “${selectedPreset.name}”` : 'Pick a preset first'}
+            className="p-1 rounded-md border border-ink/15 text-ink/50 hover:text-error hover:border-error/40 transition-colors cursor-pointer disabled:opacity-40"
+          >
+            <Trash2 size={12} />
+          </button>
+        </div>
+      </div>
+
+      {creating && (
+        <div className="flex items-center gap-2 pt-2">
+          <input
+            aria-label="New preset name"
+            type="text"
+            value={name}
+            autoFocus
+            onInput={(event) => setName(event.currentTarget.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') commitNew();
+              if (event.key === 'Escape') { setCreating(false); setName(''); }
+            }}
+            placeholder="e.g. cheap, thinking, review"
+            className="flex-1 bg-paper border border-ink/15 rounded-md px-2 py-1 text-ink text-[11px]"
+          />
+          <button
+            type="button"
+            onClick={commitNew}
+            disabled={!name.trim() || busy}
+            className="px-2 py-1 rounded-md border border-ink/15 text-ink/80 hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-50 text-[11px]"
+          >
+            Save
+          </button>
+          <button
+            type="button"
+            onClick={() => { setCreating(false); setName(''); }}
+            className="px-2 py-1 rounded-md text-ink/50 hover:text-ink cursor-pointer text-[11px]"
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+
+      {confirmDelete && selectedPreset && (
+        <div className="flex items-center gap-2 pt-2 text-[11px] text-ink/70">
+          <span>Delete “{selectedPreset.name}”? The roles themselves are untouched.</span>
+          <button
+            type="button"
+            onClick={() => { setConfirmDelete(false); onDelete(); }}
+            disabled={busy}
+            className="px-2 py-1 rounded-md border border-error/40 text-error hover:bg-error/10 transition-colors cursor-pointer disabled:opacity-50"
+          >
+            Delete
+          </button>
+          <button
+            type="button"
+            onClick={() => setConfirmDelete(false)}
+            className="px-2 py-1 rounded-md text-ink/50 hover:text-ink cursor-pointer"
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}