ompchamber 0.8.0 → 1.1.0

package/src/client/components/workspace/chat-timeline/ComposerDock.tsx

@@ -13,7 +13,8 @@ interface ComposerDockProps {
   provider?: string;
   providerNames?: Record<string, string>;
   messageQueue: QueuedMessage[];
-  setMessageQueue: Dispatch<SetStateAction<QueuedMessage[]>>;
+  onRemoveQueueItem: (id: string) => void;
+  onReorderQueue: (orderedIds: string[]) => void;
   onEditQueueItem: (item: QueuedMessage) => void;
   onSendNowQueueItem: (item: QueuedMessage) => void;
   steeringQueue: QueuedMessage[];
@@ -31,6 +32,7 @@ interface ComposerDockProps {
   accessMode: ApprovalMode;
   onAccessModeChange: (mode: ApprovalMode) => void;
   composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
   sessionModel: { provider: string; modelId: string } | null;
   sessionThinkingLevel?: string | null;
   variant: 'desktop' | 'mobile';
@@ -49,7 +51,8 @@ export function ComposerDock({
   provider,
   providerNames,
   messageQueue,
-  setMessageQueue,
+  onRemoveQueueItem,
+  onReorderQueue,
   onEditQueueItem,
   onSendNowQueueItem,
   steeringQueue,
@@ -67,6 +70,7 @@ export function ComposerDock({
   accessMode,
   onAccessModeChange,
   composerModelRef,
+  deferredComposerPickRef,
   sessionModel,
   sessionThinkingLevel,
   variant,
@@ -87,13 +91,18 @@ export function ComposerDock({
         )}
         <QueueList
           queue={messageQueue}
-          setQueue={setMessageQueue}
+          onRemove={onRemoveQueueItem}
+          onReorder={onReorderQueue}
           onEdit={onEditQueueItem}
           onSendNow={onSendNowQueueItem}
         />
         <QueueList
           queue={steeringQueue}
-          setQueue={setSteeringQueue}
+          onRemove={(id) => setSteeringQueue((q) => q.filter((i) => i.id !== id))}
+          onReorder={(orderedIds) => setSteeringQueue((prev) => {
+            const byId = new Map(prev.map((i) => [i.id, i]));
+            return orderedIds.map((id) => byId.get(id)).filter((i): i is QueuedMessage => Boolean(i));
+          })}
           isSteering
         />
         <ChatInput
@@ -111,6 +120,7 @@ export function ComposerDock({
           accessMode={accessMode}
           onAccessModeChange={onAccessModeChange}
           composerModelRef={composerModelRef}
+          deferredComposerPickRef={deferredComposerPickRef}
           sessionModel={sessionModel}
           sessionThinkingLevel={sessionThinkingLevel}
           variant={variant}

package/src/client/components/workspace/chat-timeline/EmptyWorkspacePrompt.tsx

@@ -40,6 +40,7 @@ interface EmptyWorkspacePromptProps {
   accessMode: ApprovalMode;
   onAccessModeChange: (mode: ApprovalMode) => void;
   composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
   generatingVerb?: string;
   variant?: 'desktop' | 'mobile';
 }
@@ -69,6 +70,7 @@ export function EmptyWorkspacePrompt({
   accessMode,
   onAccessModeChange,
   composerModelRef,
+  deferredComposerPickRef,
   generatingVerb,
   variant = 'desktop',
 }: EmptyWorkspacePromptProps) {
@@ -226,6 +228,7 @@ export function EmptyWorkspacePrompt({
           accessMode={accessMode}
           onAccessModeChange={onAccessModeChange}
           composerModelRef={composerModelRef}
+          deferredComposerPickRef={deferredComposerPickRef}
           variant={variant}
         />
       </div>

package/src/client/components/workspace/chat-timeline/QueueList.tsx

@@ -1,4 +1,3 @@
-import type { Dispatch, SetStateAction } from 'preact/compat';
 import { useRef } from 'preact/hooks';
 import { GripVertical, Pencil, Send, X } from 'lucide-preact';
 import type { QueuedMessage } from '@/shared/types';
@@ -7,7 +6,10 @@ export type { QueuedMessage };
 
 interface QueueListProps {
   queue: QueuedMessage[];
-  setQueue: Dispatch<SetStateAction<QueuedMessage[]>>;
+  /** Reorder handler (drag-and-drop): receives the new id order. */
+  onReorder?: (orderedIds: string[]) => void;
+  /** Remove one row by id. */
+  onRemove?: (id: string) => void;
   /** True when every row in this panel is a steering delivery. */
   isSteering?: boolean;
   onEdit?: (item: QueuedMessage) => void;
@@ -20,18 +22,18 @@ const KIND_LABEL: Record<string, string> = {
   followup: 'follow-up',
 };
 
-export function QueueList({ queue, setQueue, isSteering = false, onEdit, onSendNow }: QueueListProps) {
+export function QueueList({ queue, onReorder, onRemove, isSteering = false, onEdit, onSendNow }: QueueListProps) {
   const dragItem = useRef<number | null>(null);
   const dragOverItem = useRef<number | null>(null);
 
   const handleSort = () => {
     if (dragItem.current === null || dragOverItem.current === null) return;
-    const _queue = [...queue];
-    const draggedItemContent = _queue.splice(dragItem.current, 1)[0];
-    _queue.splice(dragOverItem.current, 0, draggedItemContent);
+    const ids = queue.map((i) => i.id);
+    const draggedId = ids.splice(dragItem.current, 1)[0];
+    ids.splice(dragOverItem.current, 0, draggedId);
     dragItem.current = null;
     dragOverItem.current = null;
-    setQueue(_queue);
+    onReorder?.(ids);
   };
 
   if (queue.length === 0) return null;
@@ -80,13 +82,15 @@ export function QueueList({ queue, setQueue, isSteering = false, onEdit, onSendN
               <Pencil size={12} />
             </button>
           )}
-          <button
-            onClick={() => setQueue(q => q.filter(i => i.id !== item.id))}
-            className="text-ink/40 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
-            title="Remove"
-          >
-            <X size={14} />
-          </button>
+          {onRemove && (
+            <button
+              onClick={() => onRemove(item.id)}
+              className="text-ink/40 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
+              title="Remove"
+            >
+              <X size={14} />
+            </button>
+          )}
         </div>
       ))}
     </div>

package/src/client/components/workspace/chat-timeline/SubagentView.tsx

@@ -8,6 +8,7 @@ import { RunFooter } from '@/client/components/workspace/chat-timeline/RunFooter
 import { useSubagentTranscript } from '@/client/hooks/chat/subagent';
 import { useModelNames } from '@/client/hooks/models/use-model-names';
 import { isNoticeRow } from '@/shared/lib/chat/notice-row';
+import { subagentHeaderTitle } from '@/shared/lib/omp/subagent/label';
 import { previousNonNoticeIndex, resolveRunFooters, streamingRowIndex } from '@/shared/lib/chat/timeline/run-footer';
 import { formatCompactTokens } from '@/shared/lib/format/number';
 
@@ -62,6 +63,7 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
 
   const progress = status?.progress ?? subagent.progress;
   const modelName = progress?.resolvedModel ?? subagent.agent;
+  const headerTitle = subagentHeaderTitle(status ?? subagent);
   const compactTokens = formatCompactTokens(progress?.tokens);
   const meta = compactTokens ? `${compactTokens} tok` : '';
   const rawTask = status?.task ?? status?.assignment ?? status?.description
@@ -85,7 +87,7 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2 min-w-0">
             <span className="font-mono text-[12px] font-semibold text-ink truncate">
-              {status?.agent ?? subagent.agent}
+              {headerTitle}
             </span>
             <span className="shrink-0 rounded bg-ink/5 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider text-ink/50">
               {STATUS_LABEL[effectiveStatus]}

package/src/client/components/workspace/chat-timeline/chat-input/index.tsx

@@ -8,6 +8,7 @@ import { AttachmentToolbar } from '@/client/components/workspace/chat-timeline/c
 import { selectableThinkingLevels } from '@/shared/lib/models/thinking-levels';
 import { fetchModelsData, subscribeModelsUpdated } from '@/shared/lib/models/client';
 import { resolveThinkingLevel, selectionFor } from '@/client/components/workspace/chat-timeline/chat-input/selection';
+import { NO_PENDING_PICK } from '@/client/hooks/chat/timeline/deferred-model';
 
 export function ChatInput({ 
   value, 
@@ -31,6 +32,12 @@ export function ChatInput({
   /** Written on every model/thinking pick so the send path can snapshot the
    *  selection into queued items without lifting ChatInput state. */
   composerModelRef,
+  /** A pick the user made while a turn was streaming, still waiting for the
+   *  next prompt. While set, the session's own model must NOT be adopted over
+   *  it — the composer shows what the next prompt will actually run. Omitted
+   *  by composers that never stream (the New Chat modal), where there is
+   *  nothing to defer and adoption must behave as before. */
+  deferredComposerPickRef = NO_PENDING_PICK,
 }: {
   value: string;
   onChange: (v: string) => void;
@@ -58,6 +65,7 @@ export function ChatInput({
    */
   variant?: 'desktop' | 'mobile';
   composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef?: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
 }) {
   const [internalAttachments, setInternalAttachments] = useState<Attachment[]>([]);
 
@@ -102,12 +110,18 @@ export function ChatInput({
   // this effect re-runs right after a spawn (sessionModel changes while the
   // session's own thinking_level_change entry is not readable yet), and any
   // concrete fallback here claims a level the run never used.
+  //
+  // A pick still waiting for the next prompt wins: the session's model is what
+  // the RUNNING turn uses, and adopting it would erase the user's choice from
+  // the composer even though it is what the next prompt will run with.
   useEffect(() => {
     if (!sessionModel?.provider || !sessionModel.modelId) return;
+    if (deferredComposerPickRef.current) return;
     let active = true;
     fetchModelsData()
       .then((data) => {
         if (!active || !sessionModel) return;
+        if (deferredComposerPickRef.current) return;
         const match = (data.modelList || []).find(
           (m) => m.id === sessionModel.modelId && m.provider === sessionModel.provider
         );
@@ -119,18 +133,21 @@ export function ChatInput({
     return () => {
       active = false;
     };
-  }, [sessionModel?.provider, sessionModel?.modelId]);
+  }, [sessionModel?.provider, sessionModel?.modelId, deferredComposerPickRef]);
 
   // Adopt the active session's last-used thinking level. Runs after the model
   // sync effect above so it overrides the catalog default for this session.
+  // Same rule as the model: a pick waiting for the next prompt is not
+  // overridden by the level the running turn recorded.
   useEffect(() => {
     if (!sessionThinkingLevel) return;
+    if (deferredComposerPickRef.current?.thinkingLevel) return;
     setSelectedModel(prev => {
       if (!prev) return prev;
       const level = resolveThinkingLevel(prev.thinkingLevels, sessionThinkingLevel, prev.thinkingLevel);
       return level === prev.thinkingLevel ? prev : { ...prev, thinkingLevel: level };
     });
-  }, [sessionThinkingLevel]);
+  }, [sessionThinkingLevel, deferredComposerPickRef]);
 
   // Sync selected model from server and event listener
   useEffect(() => {
@@ -139,6 +156,9 @@ export function ChatInput({
       try {
         const data = await fetchModelsData();
         if (!active) return;
+        // A pick waiting for the next prompt owns the composer's selection:
+        // every branch below would replace it with a session/catalog default.
+        if (deferredComposerPickRef.current) return;
         if (Array.isArray(data.modelList) && data.modelList.length > 0) {
           // 1. The active session's last-used model is authoritative; even when
           // it is missing from the catalog, never replace it with the default.
@@ -183,7 +203,7 @@ export function ChatInput({
       active = false;
       unsubscribe();
     };
-  }, []);
+  }, [deferredComposerPickRef]);
 
   // Thinking Dropdown State - Reactive with selectedModel
   const thinkingLevels = useMemo(() => {

package/src/client/components/workspace/chat-timeline/index.tsx

@@ -49,7 +49,8 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     loadOlder,
     generatingVerb,
     messageQueue,
-    setMessageQueue,
+    removeMessage,
+    reorderMessages,
     steeringQueue,
     setSteeringQueue,
     inputValue,
@@ -74,6 +75,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     accessMode,
     handleAccessModeChange,
     composerModelRef,
+    deferredComposerPickRef,
     extensionDialogs,
     resolveExtensionDialog,
     respondToExtensionUi,
@@ -179,6 +181,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
         accessMode={accessMode}
         onAccessModeChange={handleAccessModeChange}
         composerModelRef={composerModelRef}
+        deferredComposerPickRef={deferredComposerPickRef}
         sessionModel={typeof sessionData?.model === 'object' ? sessionData.model : null}
         sessionThinkingLevel={sessionData?.thinkingLevel}
         generatingVerb={generatingVerb}
@@ -243,7 +246,8 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
                 provider={sessionProvider}
                 providerNames={providerNames}
                 messageQueue={messageQueue}
-                setMessageQueue={setMessageQueue}
+                onRemoveQueueItem={removeMessage}
+                onReorderQueue={reorderMessages}
                 onEditQueueItem={handleEditQueueItem}
                 onSendNowQueueItem={handleSendNowQueueItem}
                 steeringQueue={steeringQueue}
@@ -261,6 +265,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
                 accessMode={accessMode}
                 onAccessModeChange={handleAccessModeChange}
                 composerModelRef={composerModelRef}
+                deferredComposerPickRef={deferredComposerPickRef}
                 sessionModel={typeof sessionData?.model === 'object' ? sessionData.model : null}
                 sessionThinkingLevel={sessionData?.thinkingLevel}
                 variant={variant}

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Goal.tsx

@@ -124,9 +124,9 @@ export function Goal({ tool }: { tool: ToolCallData }) {
             {payload.summary && (
               <div>
                 <span className="text-[10px] font-mono text-ink/45 uppercase tracking-wider">Summary</span>
-                <p className="mt-0.5 font-sans text-[12px] text-ink font-medium leading-relaxed">
-                  {payload.summary}
-                </p>
+                <div className="mt-0.5 rounded border border-ink/6 bg-ink/[0.03] p-2">
+                  <MarkdownRenderer content={payload.summary} className="font-medium" />
+                </div>
               </div>
             )}
 

package/src/client/components/workspace/git-panel/BranchToolbar.tsx

@@ -113,7 +113,7 @@ export function GitBranchToolbar({
         <button
           type="button"
           onClick={onSync}
-          disabled={isBusy || (syncCount.ahead === 0 && syncCount.behind === 0)}
+          disabled={isBusy}
           title={
             syncCount.ahead > 0 && syncCount.behind > 0
               ? `Pull ${syncCount.behind} then push ${syncCount.ahead} commit(s)`
@@ -121,7 +121,7 @@ export function GitBranchToolbar({
                 ? `Push ${syncCount.ahead} commit(s)`
                 : syncCount.behind > 0
                   ? `Pull ${syncCount.behind} commit(s)`
-                  : 'Up to date'
+                  : 'Up to date — sync anyway'
           }
           className="flex items-center gap-1 p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
         >

package/src/client/components/workspace/git-panel/index.tsx

@@ -34,6 +34,10 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
     const params = new URLSearchParams();
     if (rootPath) params.set('root', rootPath);
     if (targetRepo && targetRepo !== '.') params.set('repo', targetRepo);
+    // The toolbar's ↑ahead ↓behind badge is what this asks for; it makes the
+    // loader refresh the branch's remote-tracking ref before counting, so the
+    // numbers describe origin rather than the last fetch.
+    params.set('sync', '1');
     params.set('t', String(Date.now()));
     fetcher.load(`/api/fs/git?${params.toString()}`);
   };
@@ -200,7 +204,7 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
     if (!enabled || pollingRepos || rescanningRepos) return;
     setExtraRepos(repos);
     setRescanningRepos(true);
-    const params = new URLSearchParams({ rescan: '1' });
+    const params = new URLSearchParams({ rescan: '1', sync: '1' });
     if (rootPath) params.set('root', rootPath);
     if (activeRepo !== '.') params.set('repo', activeRepo);
     params.set('t', String(Date.now()));

package/src/client/components/workspace/model-dropdown/groups.ts

@@ -1,3 +1,8 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import type { AIModelOption } from '@/shared/types';
 import { modelKey } from '@/shared/lib/models/identity';
 
@@ -13,6 +18,25 @@ export interface ModelPickerGroups {
   index: Record<string, number>;
 }
 
+/**
+ * Models named by an ordered key list, in that order.
+ *
+ * The order is the point: RECENT means "most recently used first", and the
+ * catalog's own order is alphabetical by name — so reading recents off a flag
+ * (the previous `isRecent`) could not express the ranking at all, and a
+ * re-picked model never moved back to the top.
+ */
+function modelsInKeyOrder(models: AIModelOption[], keys: readonly string[]): AIModelOption[] {
+  if (keys.length === 0) return [];
+  const byKey = new Map(models.map((model) => [modelKey(model), model]));
+  const ordered: AIModelOption[] = [];
+  for (const key of keys) {
+    const match = byKey.get(key);
+    if (match) ordered.push(match);
+  }
+  return ordered;
+}
+
 /**
  * All derived picker state in one place: search filtering, the favorites/recent
  * rails, the per-provider grouping, and the flattened key→index map the
@@ -21,11 +45,16 @@ export interface ModelPickerGroups {
  * Keying `index` on the composite identity matters — the same model id is served
  * by several providers, so an id-only key collapsed their rows onto one index
  * and hovering one highlighted every other provider's row.
+ *
+ * A row never appears twice: a favorite that is also recent is only listed under
+ * FAVORITES, and neither rail repeats the row in its provider section.
  */
 export function buildPickerGroups(
   models: AIModelOption[],
   search: string,
   collapsedSections: Record<string, boolean>,
+  favoriteKeys: readonly string[],
+  recentKeys: readonly string[],
 ): ModelPickerGroups {
   const query = search.trim().toLowerCase();
   const filtered = query
@@ -37,8 +66,12 @@ export function buildPickerGroups(
       )
     : models;
 
-  const favorites = filtered.filter(m => m.isFavorite);
-  const recent = filtered.filter(m => m.isRecent && !m.isFavorite);
+  // The rails are ordered by the stored key lists, not by the catalog order.
+  // A search narrows them like every other section — a starred model that does
+  // not match the query must not sit above the results.
+  const favorites = modelsInKeyOrder(filtered, favoriteKeys);
+  const favoriteSet = new Set(favoriteKeys);
+  const recent = modelsInKeyOrder(filtered, recentKeys).filter(m => !favoriteSet.has(modelKey(m)));
 
   const byProvider: Record<string, AIModelOption[]> = {};
   for (const model of filtered) {

package/src/client/components/workspace/model-dropdown/index.tsx

@@ -1,13 +1,14 @@
 import type { TargetedMouseEvent } from 'preact';
 import { useMemo, useRef, useState } from 'preact/hooks';
 import { ChevronDown, Sparkles } from 'lucide-preact';
-import type { AIModelOption } from '@/shared/types';
+import type { AIModelOption, ModelPreferences } from '@/shared/types';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 import { invalidateModelsCache } from '@/shared/lib/models/client';
 import { ModelDropdownPanel } from '@/client/components/workspace/model-dropdown/Panel';
 import { useModelCatalog } from '@/client/components/workspace/model-dropdown/use-catalog';
 import { buildPickerGroups } from '@/client/components/workspace/model-dropdown/groups';
 import { modelKey } from '@/shared/lib/models/identity';
+import { RECENT_MODELS_LIMIT, filterKnownKeys, readModelPreferences, recordRecentKey, toggleFavoriteKey } from '@/shared/lib/models/preferences';
 
 interface ModelDropdownProps {
   selectedModel?: AIModelOption;
@@ -29,7 +30,15 @@ export function ModelDropdown({
   const [focusedIndex, setFocusedIndex] = useState<number>(-1);
   const [hoveredModel, setHoveredModel] = useState<AIModelOption | null>(null);
   const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({});
-  const { models, isLoading, setModels, selectedModel, setSelectedModel } = useModelCatalog(externalSelectedModel);
+  const {
+    models,
+    isLoading,
+    setModels,
+    selectedModel,
+    setSelectedModel,
+    preferences,
+    applyPreferences,
+  } = useModelCatalog(externalSelectedModel);
 
   const containerRef = useRef<HTMLDivElement>(null);
   useOnClickOutside(containerRef, () => {
@@ -46,8 +55,8 @@ export function ModelDropdown({
     visibleFlatList,
     index: modelIndex,
   } = useMemo(
-    () => buildPickerGroups(models, search, collapsedSections),
-    [models, search, collapsedSections],
+    () => buildPickerGroups(models, search, collapsedSections, preferences.favorites, preferences.recentKeys),
+    [models, search, collapsedSections, preferences],
   );
 
   const selectedModelKey = modelKey(selectedModel);
@@ -70,17 +79,40 @@ export function ModelDropdown({
     setCollapsedSections(prev => ({ ...prev, [section]: !prev[section] }));
   };
 
+  /**
+   * Flip one row's star. The optimistic stamp and the rollback both go through
+   * the preference pair — the flag on a row is derived state, so patching the
+   * row alone would be undone by the next `applyModelPreferences` (every reload
+   * re-stamps rows from the store).
+   */
   const handleToggleFavorite = async (model: AIModelOption, e: TargetedMouseEvent<HTMLElement>) => {
     e.stopPropagation();
     const key = modelKey(model);
-    setModels(prev => prev.map(m => modelKey(m) === key ? { ...m, isFavorite: !m.isFavorite } : m));
+    const previous = preferences;
+    const optimistic: ModelPreferences = {
+      ...previous,
+      favorites: toggleFavoriteKey(previous.favorites, key),
+    };
+    applyPreferences(optimistic);
     try {
-      await fetch('/api/models', {
+      const response = await fetch('/api/models', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ actionType: 'toggleFavorite', provider: model.provider, modelId: model.id }),
       });
-    } catch {}
+      if (!response.ok) throw new Error(`toggleFavorite failed: ${response.status}`);
+      const data = await response.json() as { modelPreferences?: unknown };
+      // The server is the authority on the resulting list — it also drops keys
+      // the registry no longer serves. An absent/malformed payload keeps the
+      // optimistic list rather than blanking the rail.
+      if (data.modelPreferences) {
+        applyPreferences(readModelPreferences(data.modelPreferences));
+      }
+    } catch {
+      // A failed write must not leave the star lit: the next reload would show
+      // it unlit anyway, so the rollback keeps the panel honest immediately.
+      applyPreferences(previous);
+    }
   };
 
   const cycleThinkingLevel = (model: AIModelOption) => {
@@ -125,6 +157,15 @@ export function ModelDropdown({
     onSelectModel?.(model);
     setIsOpen(false);
     setHoveredModel(null);
+    // Move the pick to the top of RECENT straight away — the server records it
+    // alongside the selection, and waiting for the round trip would leave the
+    // rail stale until the next full reload. Same rules as the server's write:
+    // pruned to the models the registry serves, de-duplicated, capped.
+    const known = new Set(models.map(modelKey));
+    applyPreferences({
+      favorites: filterKnownKeys(preferences.favorites, known),
+      recentKeys: recordRecentKey(filterKnownKeys(preferences.recentKeys, known), modelKey(model), RECENT_MODELS_LIMIT),
+    });
     try {
       await fetch('/api/models', {
         method: 'POST',

package/src/client/components/workspace/model-dropdown/use-catalog.ts

@@ -1,6 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import type { AIModelOption, ModelEntry } from '@/shared/types';
+import type { AIModelOption, ModelEntry, ModelPreferences } from '@/shared/types';
 import { fetchModelsData, subscribeModelsUpdated } from '@/shared/lib/models/client';
+import {
+  EMPTY_MODEL_PREFERENCES,
+  applyModelPreferences,
+  readModelPreferences,
+} from '@/shared/lib/models/preferences';
 
 function toOption(m: ModelEntry): AIModelOption {
   const ladder = Array.isArray(m.thinkingLevels) ? m.thinkingLevels : [];
@@ -28,6 +33,10 @@ export interface ModelCatalogState {
   setModels: (updater: (prev: AIModelOption[]) => AIModelOption[]) => void;
   selectedModel: AIModelOption | null;
   setSelectedModel: (model: AIModelOption | null) => void;
+  /** Favorite + recent rails, ordered by the stored key lists. */
+  preferences: ModelPreferences;
+  /** Merge a server-returned preference pair into the rails. */
+  applyPreferences: (preferences: ModelPreferences) => void;
 }
 
 /**
@@ -42,11 +51,17 @@ export interface ModelCatalogState {
  * An externally-driven selection (the composer's session model) always wins over
  * the API's own default — it is read through a ref so a thinking-level change
  * flowing back through the prop does not re-arm the fetch.
+ *
+ * Favorites arrive as a key list, never as a flag on the registry rows: the
+ * registry is a read-only view of omp's config, so the only place a star can
+ * live is the preference store. The rows are stamped from it here, which is why
+ * a toggle must go through {@link applyPreferences} rather than patching a row.
  */
 export function useModelCatalog(externalSelectedModel?: AIModelOption): ModelCatalogState {
   const [models, setModelsState] = useState<AIModelOption[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [selectedModel, setSelectedModel] = useState<AIModelOption | null>(externalSelectedModel ?? null);
+  const [preferences, setPreferences] = useState<ModelPreferences>(EMPTY_MODEL_PREFERENCES);
 
   const externalSelectedRef = useRef(externalSelectedModel);
   externalSelectedRef.current = externalSelectedModel;
@@ -56,11 +71,18 @@ export function useModelCatalog(externalSelectedModel?: AIModelOption): ModelCat
     setModelsState(updater);
   }, []);
 
+  const applyPreferences = useCallback((next: ModelPreferences) => {
+    setPreferences(next);
+    setModelsState(prev => applyModelPreferences(prev, next));
+  }, []);
+
   const load = useCallback(async () => {
     try {
       const data = await fetchModelsData();
       if (Array.isArray(data.modelList) && data.modelList.length > 0) {
-        const realModels = data.modelList.map(toOption);
+        const prefs = readModelPreferences(data.modelPreferences);
+        const realModels = applyModelPreferences(data.modelList.map(toOption), prefs);
+        setPreferences(prefs);
         // Keep a thinking level the user already picked, but only when it is
         // still a real level of this model's ladder (legacy mock values like
         // 'Default'/'High' must not be preserved).
@@ -76,7 +98,9 @@ export function useModelCatalog(externalSelectedModel?: AIModelOption): ModelCat
           if (match) setSelectedModel(match);
         }
       } else if (Array.isArray(data.models) && data.models.length > 0) {
-        setModelsState(data.models);
+        const prefs = readModelPreferences(data.modelPreferences);
+        setPreferences(prefs);
+        setModelsState(applyModelPreferences(data.models, prefs));
       }
       if (data.selectedModel && !externalSelectedRef.current) {
         setSelectedModel(data.selectedModel);
@@ -107,5 +131,5 @@ export function useModelCatalog(externalSelectedModel?: AIModelOption): ModelCat
     ));
   }, [externalSelectedModel]);
 
-  return { models, isLoading, setModels, selectedModel, setSelectedModel };
+  return { models, isLoading, setModels, selectedModel, setSelectedModel, preferences, applyPreferences };
 }