fix(settings): persist per-model visibility and sibling selector state (#1700)

* fix(settings): persist per-model visibility and sibling selector state

The server-side settings sanitizer only allowlisted favoriteModels and
recentModels, so hiddenModels, collapsedModelProviders, recentAgents, and
recentEfforts were stripped on every write to settings.json — per-model
visibility and collapsed-provider state silently reset on every container
redeploy or settings reload.

Add the four missing fields to sanitizeSettingsUpdate:
- hiddenModels: sanitizeModelRefs(..., 1024) — same shape as favoriteModels;
  1024 covers dense multi-provider setups while bounding persistence/memory.
- collapsedModelProviders: normalizeStringArray with Array.isArray gate
  (matches usageDropdownProviders).
- recentAgents: normalizeStringArray (Array<string> per ui-store).
- recentEfforts: new sanitizeRecentEfforts validating Record<string, string[]>
  (shape confirmed in ui-store + addRecentEffort action); trims/dedupes keys
  and variants, caps at 128 keys x 5 variants/key (5 matches client slice).

No ui-store version bump or migration: zustand's default merge spreads
persisted state over defaults, so missing fields fall back to [] / {} until
the next toggle. favoriteModels and recentModels are untouched.

Tests: 8 new cases in settings-helpers.test.js using the real
sanitizeModelRefs / normalizeStringArray — round-trips, empty-[] parity with
favoriteModels, garbage rejection, and a full-payload regression test.

* fix: sync model selector settings

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/lib/desktop.ts

@@ -158,7 +158,11 @@ export type DesktopSettings = {
   shortcutOverrides?: Record<string, string>;
 
   favoriteModels?: Array<{ providerID: string; modelID: string }>;
+  hiddenModels?: Array<{ providerID: string; modelID: string }>;
+  collapsedModelProviders?: string[];
   recentModels?: Array<{ providerID: string; modelID: string }>;
+  recentAgents?: string[];
+  recentEfforts?: Record<string, string[]>;
   diffLayoutPreference?: 'dynamic' | 'inline' | 'side-by-side';
   gitChangesViewMode?: 'flat' | 'tree';
   directoryShowHidden?: boolean;

packages/ui/src/lib/modelPrefsAutoSave.ts

@@ -3,6 +3,14 @@ import { updateDesktopSettings } from '@/lib/persistence';
 import { isVSCodeRuntime } from '@/lib/desktop';
 
 type ModelRef = { providerID: string; modelID: string };
+type ModelPrefsPayload = {
+  favoriteModels: ModelRef[];
+  hiddenModels: ModelRef[];
+  collapsedModelProviders: string[];
+  recentModels: ModelRef[];
+  recentAgents: string[];
+  recentEfforts: Record<string, string[]>;
+};
 
 const refsEqual = (a: ModelRef[], b: ModelRef[]): boolean => {
   if (a === b) return true;
@@ -14,6 +22,52 @@ const refsEqual = (a: ModelRef[], b: ModelRef[]): boolean => {
   return true;
 };
 
+const stringsEqual = (a: string[], b: string[]): boolean => {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+
+const recentEffortsEqual = (a: Record<string, string[]>, b: Record<string, string[]>): boolean => {
+  if (a === b) return true;
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  return aKeys.every((key) => Array.isArray(b[key]) && stringsEqual(a[key], b[key]));
+};
+
+const snapshotModelPrefs = (): ModelPrefsPayload => {
+  const state = useUIStore.getState();
+  return {
+    favoriteModels: state.favoriteModels,
+    hiddenModels: state.hiddenModels,
+    collapsedModelProviders: state.collapsedModelProviders,
+    recentModels: state.recentModels,
+    recentAgents: state.recentAgents,
+    recentEfforts: state.recentEfforts,
+  };
+};
+
+const modelPrefsEqual = (a: ModelPrefsPayload, b: ModelPrefsPayload): boolean => (
+  refsEqual(a.favoriteModels, b.favoriteModels) &&
+  refsEqual(a.hiddenModels, b.hiddenModels) &&
+  stringsEqual(a.collapsedModelProviders, b.collapsedModelProviders) &&
+  refsEqual(a.recentModels, b.recentModels) &&
+  stringsEqual(a.recentAgents, b.recentAgents) &&
+  recentEffortsEqual(a.recentEfforts, b.recentEfforts)
+);
+
+const cloneModelPrefs = (prefs: ModelPrefsPayload): ModelPrefsPayload => ({
+  favoriteModels: prefs.favoriteModels.slice(),
+  hiddenModels: prefs.hiddenModels.slice(),
+  collapsedModelProviders: prefs.collapsedModelProviders.slice(),
+  recentModels: prefs.recentModels.slice(),
+  recentAgents: prefs.recentAgents.slice(),
+  recentEfforts: Object.fromEntries(Object.entries(prefs.recentEfforts).map(([key, variants]) => [key, variants.slice()])),
+});
+
 export const startModelPrefsAutoSave = () => {
   if (typeof window === 'undefined') {
     return () => {};
@@ -23,26 +77,18 @@ export const startModelPrefsAutoSave = () => {
   }
 
   let timer: number | null = null;
-  let lastSent: { favoriteModels: ModelRef[]; recentModels: ModelRef[] } | null = null;
+  let lastSent: ModelPrefsPayload | null = null;
   let didSkipInitial = false;
 
   const flush = () => {
     timer = null;
-    const state = useUIStore.getState();
-    const payload = { favoriteModels: state.favoriteModels, recentModels: state.recentModels };
+    const payload = snapshotModelPrefs();
 
-    if (
-      lastSent &&
-      refsEqual(lastSent.favoriteModels, payload.favoriteModels) &&
-      refsEqual(lastSent.recentModels, payload.recentModels)
-    ) {
+    if (lastSent && modelPrefsEqual(lastSent, payload)) {
       return;
     }
 
-    lastSent = {
-      favoriteModels: payload.favoriteModels.slice(),
-      recentModels: payload.recentModels.slice(),
-    };
+    lastSent = cloneModelPrefs(payload);
 
     void updateDesktopSettings(payload).catch(() => {});
   };
@@ -59,9 +105,23 @@ export const startModelPrefsAutoSave = () => {
   };
 
   const unsubscribe = useUIStore.subscribe((state, prevState) => {
-    const next = { favoriteModels: state.favoriteModels, recentModels: state.recentModels };
-    const prev = { favoriteModels: prevState.favoriteModels, recentModels: prevState.recentModels };
-    if (refsEqual(next.favoriteModels, prev.favoriteModels) && refsEqual(next.recentModels, prev.recentModels)) {
+    const next = {
+      favoriteModels: state.favoriteModels,
+      hiddenModels: state.hiddenModels,
+      collapsedModelProviders: state.collapsedModelProviders,
+      recentModels: state.recentModels,
+      recentAgents: state.recentAgents,
+      recentEfforts: state.recentEfforts,
+    };
+    const prev = {
+      favoriteModels: prevState.favoriteModels,
+      hiddenModels: prevState.hiddenModels,
+      collapsedModelProviders: prevState.collapsedModelProviders,
+      recentModels: prevState.recentModels,
+      recentAgents: prevState.recentAgents,
+      recentEfforts: prevState.recentEfforts,
+    };
+    if (modelPrefsEqual(next, prev)) {
       return;
     }
     schedule();

packages/ui/src/lib/persistence.test.ts

@@ -2,11 +2,15 @@ import { afterAll, beforeEach, describe, expect, test } from 'bun:test';
 
 import type { RuntimeAPIs, SettingsPayload } from '@/lib/api/types';
 import { registerRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
-import { applyPersistedHomeDirectoryToWindow, updateDesktopSettings } from './persistence';
+import { startModelPrefsAutoSave } from '@/lib/modelPrefsAutoSave';
+import { useUIStore } from '@/stores/useUIStore';
+import { applyPersistedHomeDirectoryToWindow, syncDesktopSettings, updateDesktopSettings } from './persistence';
 
 type TestWindow = {
   __OPENCHAMBER_HOME__?: string;
   dispatchEvent: (event: Event) => boolean;
+  setTimeout: typeof setTimeout;
+  clearTimeout: typeof clearTimeout;
 };
 
 let createdWindow = false;
@@ -48,22 +52,42 @@ const getWindow = (): TestWindow => {
   }
   const testWindow = window as unknown as Partial<TestWindow>;
   testWindow.dispatchEvent ??= () => true;
+  testWindow.setTimeout ??= setTimeout;
+  testWindow.clearTimeout ??= clearTimeout;
   ensureLocalStorage();
   return testWindow as TestWindow;
 };
 
 const delay = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));
 
-const registerSettingsSave = (save: (changes: Partial<SettingsPayload>) => Promise<SettingsPayload>): void => {
+const registerSettingsApi = (
+  save: (changes: Partial<SettingsPayload>) => Promise<SettingsPayload>,
+  load: () => Promise<{ settings: SettingsPayload; source: 'web' | 'vscode' }> = async () => ({ settings: {}, source: 'web' }),
+): void => {
   registerRuntimeAPIs({
     runtime: { platform: 'web', isDesktop: false, isVSCode: false },
     settings: {
-      load: async () => ({ settings: {}, source: 'web' }),
+      load,
       save,
     },
   } as unknown as RuntimeAPIs);
 };
 
+const registerSettingsSave = (save: (changes: Partial<SettingsPayload>) => Promise<SettingsPayload>): void => {
+  registerSettingsApi(save);
+};
+
+const resetModelPrefsState = (): void => {
+  useUIStore.setState({
+    favoriteModels: [],
+    hiddenModels: [],
+    collapsedModelProviders: [],
+    recentModels: [],
+    recentAgents: [],
+    recentEfforts: {},
+  });
+};
+
 afterAll(() => {
   registerRuntimeAPIs(null);
   if (createdWindow) {
@@ -100,6 +124,7 @@ describe('updateDesktopSettings', () => {
   beforeEach(() => {
     getWindow();
     registerRuntimeAPIs(null);
+    resetModelPrefsState();
   });
 
   test('waits for the debounced settings save to finish before resolving', async () => {
@@ -170,4 +195,63 @@ describe('updateDesktopSettings', () => {
     expect(firstResolved).toBe(true);
     expect(secondResolved).toBe(true);
   });
+
+  test('applies model selector settings from server settings', async () => {
+    getWindow();
+    const settings = {
+      favoriteModels: [{ providerID: 'anthropic', modelID: 'claude-haiku-4' }],
+      hiddenModels: [{ providerID: 'openai', modelID: 'gpt-5' }],
+      collapsedModelProviders: ['anthropic', 'openai'],
+      recentModels: [{ providerID: 'google', modelID: 'gemini-pro' }],
+      recentAgents: ['build', 'plan'],
+      recentEfforts: { 'anthropic/claude-haiku-4': ['high', 'default'] },
+    } satisfies SettingsPayload;
+    registerSettingsApi(async () => ({}), async () => ({ settings, source: 'web' }));
+
+    await syncDesktopSettings();
+
+    const state = useUIStore.getState();
+    expect(state.favoriteModels).toEqual(settings.favoriteModels);
+    expect(state.hiddenModels).toEqual(settings.hiddenModels);
+    expect(state.collapsedModelProviders).toEqual(settings.collapsedModelProviders);
+    expect(state.recentModels).toEqual(settings.recentModels);
+    expect(state.recentAgents).toEqual(settings.recentAgents);
+    expect(state.recentEfforts).toEqual(settings.recentEfforts);
+  });
+
+  test('autosaves all model selector settings fields', async () => {
+    getWindow();
+    const saveCalls: Array<Partial<SettingsPayload>> = [];
+    registerSettingsSave(async (changes) => {
+      saveCalls.push(changes);
+      return changes as SettingsPayload;
+    });
+    const stop = startModelPrefsAutoSave();
+
+    try {
+      useUIStore.setState({ favoriteModels: [{ providerID: 'anthropic', modelID: 'claude-haiku-4' }] });
+      await delay(20);
+      useUIStore.setState({
+        hiddenModels: [{ providerID: 'openai', modelID: 'gpt-5' }],
+        collapsedModelProviders: ['openai'],
+        recentModels: [{ providerID: 'google', modelID: 'gemini-pro' }],
+        recentAgents: ['build'],
+        recentEfforts: { 'openai/gpt-5': ['low'] },
+      });
+
+      await delay(1500);
+
+      expect(saveCalls).toHaveLength(1);
+      expect(saveCalls[0]).toEqual({
+        favoriteModels: [{ providerID: 'anthropic', modelID: 'claude-haiku-4' }],
+        hiddenModels: [{ providerID: 'openai', modelID: 'gpt-5' }],
+        collapsedModelProviders: ['openai'],
+        recentModels: [{ providerID: 'google', modelID: 'gemini-pro' }],
+        recentAgents: ['build'],
+        recentEfforts: { 'openai/gpt-5': ['low'] },
+      });
+    } finally {
+      stop();
+    }
+  });
 });

packages/ui/src/lib/persistence.ts

@@ -203,6 +203,42 @@ const areStringRecordsEqual = (left: Record<string, string>, right: Record<strin
   return leftEntries.every(([key, value]) => right[key] === value);
 };
 
+const areModelRefsEqual = (
+  left: Array<{ providerID: string; modelID: string }>,
+  right: Array<{ providerID: string; modelID: string }>,
+): boolean => (
+  left.length === right.length &&
+  left.every((item, idx) => item.providerID === right[idx]?.providerID && item.modelID === right[idx]?.modelID)
+);
+
+const areStringArraysEqual = (left: string[], right: string[]): boolean => (
+  left.length === right.length && left.every((value, idx) => value === right[idx])
+);
+
+const sanitizeStringArray = (value: unknown): string[] | undefined => {
+  if (!Array.isArray(value)) return undefined;
+  return Array.from(new Set(value.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0)));
+};
+
+const sanitizeRecentEfforts = (value: unknown): Record<string, string[]> | undefined => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined;
+  const result: Record<string, string[]> = {};
+  for (const [key, variants] of Object.entries(value)) {
+    if (!key || !Array.isArray(variants)) continue;
+    const sanitized = sanitizeStringArray(variants);
+    if (sanitized && sanitized.length > 0) {
+      result[key] = sanitized.slice(0, 5);
+    }
+  }
+  return Object.keys(result).length > 0 ? result : undefined;
+};
+
+const areRecentEffortsEqual = (left: Record<string, string[]>, right: Record<string, string[]>): boolean => {
+  const leftKeys = Object.keys(left);
+  if (leftKeys.length !== Object.keys(right).length) return false;
+  return leftKeys.every((key) => Array.isArray(right[key]) && areStringArraysEqual(left[key], right[key]));
+};
+
 const HEX_COLOR_PATTERN = /^#(?:[\da-fA-F]{3}|[\da-fA-F]{6})$/;
 
 const normalizeIconBackground = (value: unknown): string | null => {
@@ -601,24 +637,50 @@ const applyDesktopUiPreferences = (settings: DesktopSettings) => {
   if (Array.isArray(settings.favoriteModels)) {
     const current = store.favoriteModels;
     const next = settings.favoriteModels;
-    const same =
-      current.length === next.length &&
-      current.every((item, idx) => item.providerID === next[idx]?.providerID && item.modelID === next[idx]?.modelID);
-    if (!same) {
+    if (!areModelRefsEqual(current, next)) {
       useUIStore.setState({ favoriteModels: next });
     }
   }
 
+  if (Array.isArray(settings.hiddenModels)) {
+    const current = store.hiddenModels;
+    const next = settings.hiddenModels;
+    if (!areModelRefsEqual(current, next)) {
+      useUIStore.setState({ hiddenModels: next });
+    }
+  }
+
+  if (Array.isArray(settings.collapsedModelProviders)) {
+    const current = store.collapsedModelProviders;
+    const next = settings.collapsedModelProviders;
+    if (!areStringArraysEqual(current, next)) {
+      useUIStore.setState({ collapsedModelProviders: next });
+    }
+  }
+
   if (Array.isArray(settings.recentModels)) {
     const current = store.recentModels;
     const next = settings.recentModels;
-    const same =
-      current.length === next.length &&
-      current.every((item, idx) => item.providerID === next[idx]?.providerID && item.modelID === next[idx]?.modelID);
-    if (!same) {
+    if (!areModelRefsEqual(current, next)) {
       useUIStore.setState({ recentModels: next });
     }
   }
+
+  if (Array.isArray(settings.recentAgents)) {
+    const current = store.recentAgents;
+    const next = settings.recentAgents;
+    if (!areStringArraysEqual(current, next)) {
+      useUIStore.setState({ recentAgents: next });
+    }
+  }
+
+  if (settings.recentEfforts && typeof settings.recentEfforts === 'object') {
+    const current = store.recentEfforts;
+    const next = settings.recentEfforts;
+    if (!areRecentEffortsEqual(current, next)) {
+      useUIStore.setState({ recentEfforts: next });
+    }
+  }
   if (typeof settings.diffLayoutPreference === 'string'
     && (settings.diffLayoutPreference === 'dynamic' || settings.diffLayoutPreference === 'inline' || settings.diffLayoutPreference === 'side-by-side')) {
     if (settings.diffLayoutPreference !== store.diffLayoutPreference) {
@@ -1047,10 +1109,30 @@ const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
     result.favoriteModels = favoriteModels;
   }
 
+  const hiddenModels = sanitizeModelRefs(candidate.hiddenModels, 1024);
+  if (hiddenModels) {
+    result.hiddenModels = hiddenModels;
+  }
+
+  const collapsedModelProviders = sanitizeStringArray(candidate.collapsedModelProviders);
+  if (collapsedModelProviders) {
+    result.collapsedModelProviders = collapsedModelProviders;
+  }
+
   const recentModels = sanitizeModelRefs(candidate.recentModels, 16);
   if (recentModels) {
     result.recentModels = recentModels;
   }
+
+  const recentAgents = sanitizeStringArray(candidate.recentAgents);
+  if (recentAgents) {
+    result.recentAgents = recentAgents;
+  }
+
+  const recentEfforts = sanitizeRecentEfforts(candidate.recentEfforts);
+  if (recentEfforts) {
+    result.recentEfforts = recentEfforts;
+  }
   if (
     typeof candidate.diffLayoutPreference === 'string'
     && (candidate.diffLayoutPreference === 'dynamic'