diff --git a/apps/extension/entrypoints/sidepanel/agent-chat-panel.tsx b/apps/extension/entrypoints/sidepanel/agent-chat-panel.tsx
index 1d0896eead..88f5624d39 100644
--- a/apps/extension/entrypoints/sidepanel/agent-chat-panel.tsx
+++ b/apps/extension/entrypoints/sidepanel/agent-chat-panel.tsx
@@ -880,6 +880,7 @@ export const AgentChatPanel = ({
 
       <footer className="border-t border-border bg-surface-raised px-4 py-2">
         <AgentFooterControls
+          auth={auth}
           contextDonut={contextDonut}
           inspectableTabs={inspectableTabs}
           isLoadingTabs={isLoadingTabs}
@@ -906,6 +907,7 @@ export const AgentChatPanel = ({
           onThinkingEffortChange={nextThinkingEffort => {
             updateActiveConversationSettings({ thinkingEffort: nextThinkingEffort });
           }}
+          organizationId={organizationId}
           selectedTabId={selectedTabId}
           tabDebuggerError={tabDebuggerError}
           thinkingEffort={thinkingEffort}
diff --git a/apps/extension/entrypoints/sidepanel/agent-footer-controls.tsx b/apps/extension/entrypoints/sidepanel/agent-footer-controls.tsx
index ce06e2ac89..3f06003302 100644
--- a/apps/extension/entrypoints/sidepanel/agent-footer-controls.tsx
+++ b/apps/extension/entrypoints/sidepanel/agent-footer-controls.tsx
@@ -2,9 +2,11 @@ import { useState } from 'react';
 import type { JSX, ReactNode } from 'react';
 import { Shield, TriangleAlert } from 'lucide-react';
 import { getFooterControlDisplay } from '@/src/shared/agent-chat-placeholder';
+import type { StoredAuth } from '@/src/shared/auth';
 import { thinkingEffortLabel } from '@/src/shared/kilo-api-client';
 import type { KiloGatewayModelOption } from '@/src/shared/kilo-api-client';
 import type { InspectableTab } from '@/src/shared/tab-debugger';
+import { ModelPicker } from './model-picker';
 
 const modeOptions = [
   { label: 'Safe', value: 'safe' },
@@ -129,6 +131,7 @@ const ModeControl = ({
 };
 
 export const AgentFooterControls = ({
+  auth,
   contextDonut,
   inspectableTabs,
   isLoadingTabs,
@@ -145,11 +148,13 @@ export const AgentFooterControls = ({
   onRetryModels,
   onSelectedTabChange,
   onThinkingEffortChange,
+  organizationId,
   selectedTabId,
   tabDebuggerError,
   thinkingEffort,
   thinkingOptions,
 }: {
+  auth: StoredAuth;
   contextDonut?: ReactNode;
   inspectableTabs: InspectableTab[];
   isLoadingTabs: boolean;
@@ -166,6 +171,7 @@ export const AgentFooterControls = ({
   onRetryModels: () => Promise<void>;
   onSelectedTabChange: (tabId: number) => void;
   onThinkingEffortChange: (thinkingEffort: string) => void;
+  organizationId: string | undefined;
   selectedTabId: number | undefined;
   tabDebuggerError: string | undefined;
   thinkingEffort: string;
@@ -217,23 +223,14 @@ export const AgentFooterControls = ({
           mode={mode}
           onChange={onModeChange}
         />
-        <CompactSelectControl
-          ariaLabel="Model"
-          className="flex-1 pl-2 pr-6"
+        <ModelPicker
+          auth={auth}
           disabled={isConversationControlDisabled || isModelSelectDisabled}
-          onChange={onModelChange}
-          value={model}
-        >
-          {modelOptions.length === 0 ? (
-            <option value="">Loading models...</option>
-          ) : (
-            modelOptions.map(option => (
-              <option key={option.id} value={option.id}>
-                {option.name}
-              </option>
-            ))
-          )}
-        </CompactSelectControl>
+          model={model}
+          modelOptions={modelOptions}
+          onModelChange={onModelChange}
+          organizationId={organizationId}
+        />
         <CompactSelectControl
           ariaLabel="Thinking effort"
           className="w-24 pl-2 pr-6"
diff --git a/apps/extension/entrypoints/sidepanel/model-picker-row.tsx b/apps/extension/entrypoints/sidepanel/model-picker-row.tsx
new file mode 100644
index 0000000000..c3eeda77b1
--- /dev/null
+++ b/apps/extension/entrypoints/sidepanel/model-picker-row.tsx
@@ -0,0 +1,97 @@
+import { BookOpenCheck, Check, Star } from 'lucide-react';
+import type { JSX } from 'react';
+import type { KiloGatewayModelOption } from '@/src/shared/kilo-api-client';
+
+const rowButtonClass =
+  'flex min-w-0 flex-1 items-start gap-2 rounded-md px-2 py-2 text-left outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background';
+
+const starButtonClass =
+  'flex size-8 shrink-0 items-center justify-center rounded-md text-foreground-muted outline-none transition hover:bg-surface-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background disabled:cursor-not-allowed disabled:opacity-50';
+
+const chipClass =
+  'rounded-full border border-border bg-surface-overlay px-1.5 py-0.5 type-label text-foreground-muted';
+
+export const ModelPickerModelRow = ({
+  isFavorite,
+  isSelected,
+  model,
+  onSelect,
+  onToggleFavorite,
+  showStar,
+  starDisabled,
+}: {
+  readonly isFavorite: boolean;
+  readonly isSelected: boolean;
+  readonly model: KiloGatewayModelOption;
+  readonly onSelect: (modelId: string) => void;
+  readonly onToggleFavorite: (model: KiloGatewayModelOption) => void;
+  readonly showStar: boolean;
+  readonly starDisabled: boolean;
+}): JSX.Element => {
+  const showFree = model.isFree === true && model.hasUserByokAvailable !== true;
+  const showByok = model.hasUserByokAvailable === true;
+  const showDataCollected = model.mayTrainOnYourPrompts === true;
+
+  return (
+    <div className="flex items-start gap-1 px-1 py-0.5" data-model-row={model.id}>
+      <button
+        aria-current={isSelected ? 'true' : undefined}
+        aria-label={model.name}
+        className={
+          isSelected ? `${rowButtonClass} bg-surface-selected text-foreground` : rowButtonClass
+        }
+        data-model-id={model.id}
+        onClick={() => {
+          onSelect(model.id);
+        }}
+        type="button"
+      >
+        <span className="min-w-0 flex-1">
+          <span className="block truncate text-sm font-medium text-foreground">{model.name}</span>
+          <span className="mt-0.5 block truncate font-mono text-xs text-foreground-muted">
+            {model.id}
+          </span>
+          {showFree || showByok || showDataCollected ? (
+            <span className="mt-1 flex flex-wrap items-center gap-1">
+              {showFree ? <span className={chipClass}>Free</span> : null}
+              {showByok ? <span className={chipClass}>BYOK</span> : null}
+              {showDataCollected ? (
+                <BookOpenCheck
+                  aria-label="Data collected"
+                  className="size-3.5 text-status-yellow-500"
+                  role="img"
+                />
+              ) : null}
+            </span>
+          ) : null}
+        </span>
+        {isSelected ? (
+          <Check aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-brand-primary" />
+        ) : null}
+      </button>
+      {showStar ? (
+        <button
+          aria-label={
+            isFavorite ? `Remove ${model.name} from favorites` : `Add ${model.name} to favorites`
+          }
+          aria-pressed={isFavorite}
+          className={starButtonClass}
+          disabled={starDisabled}
+          onClick={() => {
+            onToggleFavorite(model);
+          }}
+          type="button"
+        >
+          <Star
+            aria-hidden="true"
+            className={
+              isFavorite
+                ? 'size-4 fill-brand-primary text-brand-primary'
+                : 'size-4 text-foreground-muted'
+            }
+          />
+        </button>
+      ) : null}
+    </div>
+  );
+};
diff --git a/apps/extension/entrypoints/sidepanel/model-picker.tsx b/apps/extension/entrypoints/sidepanel/model-picker.tsx
new file mode 100644
index 0000000000..0620449f99
--- /dev/null
+++ b/apps/extension/entrypoints/sidepanel/model-picker.tsx
@@ -0,0 +1,211 @@
+import { ChevronsUpDown, X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { JSX } from 'react';
+import type { StoredAuth } from '@/src/shared/auth';
+import type { KiloGatewayModelOption } from '@/src/shared/kilo-api-client';
+import { buildExtensionModelPickerRows } from '@/src/shared/model-picker-rows';
+import { ModelPickerModelRow } from './model-picker-row';
+import { useModelPreferences } from './use-model-preferences';
+
+const triggerClassName =
+  'flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md border border-border-strong bg-input-bg px-2 type-label text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background disabled:cursor-not-allowed disabled:text-foreground-subtle';
+
+const secondaryButtonClassName =
+  'h-8 shrink-0 rounded-md border border-border bg-surface-overlay px-2 type-label text-foreground-on-secondary outline-none transition hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background';
+
+export const ModelPicker = ({
+  auth,
+  disabled,
+  model,
+  modelOptions,
+  onModelChange,
+  organizationId,
+}: {
+  readonly auth: StoredAuth;
+  readonly disabled: boolean;
+  readonly model: string;
+  readonly modelOptions: readonly KiloGatewayModelOption[];
+  readonly onModelChange: (modelId: string) => void;
+  readonly organizationId: string | undefined;
+}): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const selectedRowRef = useRef<HTMLDivElement | null>(null);
+  const { favorites, refetch, status, toggleError, toggleFavorite } = useModelPreferences({
+    auth,
+    organizationId,
+  });
+
+  const selectedOption = modelOptions.find(option => option.id === model);
+  const triggerLabel =
+    modelOptions.length === 0 ? 'Loading models...' : (selectedOption?.name ?? model);
+
+  const rows = useMemo(
+    () =>
+      buildExtensionModelPickerRows({
+        favoriteIds: favorites,
+        models: modelOptions,
+        search,
+      }),
+    [favorites, modelOptions, search]
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    searchInputRef.current?.focus();
+    selectedRowRef.current?.scrollIntoView({ block: 'nearest' });
+  }, [isOpen]);
+
+  const closeOverlay = (): void => {
+    setIsOpen(false);
+    setSearch('');
+  };
+
+  const handleSelect = (modelId: string): void => {
+    onModelChange(modelId);
+    closeOverlay();
+  };
+
+  return (
+    <div className="relative min-w-0 flex-1">
+      <button
+        aria-label="Model"
+        className={triggerClassName}
+        data-model-id={modelOptions.length === 0 || model === '' ? undefined : model}
+        disabled={disabled}
+        onClick={() => {
+          if (disabled) {
+            return;
+          }
+
+          setSearch('');
+          setIsOpen(true);
+        }}
+        type="button"
+      >
+        <span className="min-w-0 flex-1 truncate text-left">{triggerLabel}</span>
+        <ChevronsUpDown aria-hidden="true" className="size-3.5 shrink-0 text-foreground-muted" />
+      </button>
+
+      {isOpen ? (
+        <div
+          aria-label="Select model"
+          aria-modal="true"
+          className="agent-conversation-scrollbar fixed inset-0 z-30 flex flex-col overflow-y-auto bg-surface-background"
+          role="dialog"
+        >
+          <div className="sticky top-0 z-10 flex h-14 shrink-0 items-center justify-between border-b border-border bg-surface-raised px-4">
+            <div className="min-w-0">
+              <p className="text-sm font-semibold text-foreground">Select model</p>
+              <p className="type-label text-foreground-muted">Search and favorites</p>
+            </div>
+            <button
+              aria-label="Close model picker"
+              className="flex size-8 items-center justify-center rounded-md border border-border bg-surface-overlay text-foreground-on-secondary transition hover:bg-surface-hover outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-background"
+              onClick={closeOverlay}
+              type="button"
+            >
+              <X aria-hidden="true" className="size-4" />
+            </button>
+          </div>
+
+          <div className="border-b border-border px-3 py-3">
+            <input
+              aria-label="Search models"
+              className="h-9 w-full rounded-md border border-border-strong bg-input-bg px-3 type-label text-foreground outline-none transition placeholder:text-foreground-subtle focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background"
+              onChange={event => {
+                setSearch(event.currentTarget.value);
+              }}
+              placeholder="Search models..."
+              ref={searchInputRef}
+              type="search"
+              value={search}
+            />
+          </div>
+
+          {status === 'retryable' ? (
+            <div className="flex items-center justify-between gap-2 border-b border-border px-4 py-2">
+              <p className="type-label text-status-red-400">Couldn&apos;t load favorites.</p>
+              <button
+                className={secondaryButtonClassName}
+                onClick={() => {
+                  void refetch();
+                }}
+                type="button"
+              >
+                Retry
+              </button>
+            </div>
+          ) : null}
+
+          {status === 'terminal' ? (
+            <p className="border-b border-border px-4 py-2 type-label text-foreground-muted">
+              Favorites aren&apos;t available here.
+            </p>
+          ) : null}
+
+          {toggleError ? (
+            <p className="border-b border-border px-4 py-2 type-label text-status-red-400">
+              Couldn&apos;t update favorites.
+            </p>
+          ) : null}
+
+          <div className="px-2 py-2">
+            {rows.length === 0 && search.trim().length > 0 ? (
+              <div className="grid gap-3 px-2 py-8 text-center">
+                <p className="type-body text-foreground-muted">
+                  No models match &quot;{search}&quot;.
+                </p>
+                <button
+                  className={`${secondaryButtonClassName} mx-auto`}
+                  onClick={() => {
+                    setSearch('');
+                  }}
+                  type="button"
+                >
+                  Clear search
+                </button>
+              </div>
+            ) : (
+              // Ponytail: no list virtualization — gateway catalog is a few hundred models.
+              <>
+                {rows.map(row => {
+                  if (row.type === 'header') {
+                    return (
+                      <p
+                        className="type-eyebrow px-3 pb-1 pt-3 text-foreground-muted"
+                        key={row.key}
+                      >
+                        {row.title}
+                      </p>
+                    );
+                  }
+
+                  const isSelected = row.model.id === model;
+
+                  return (
+                    <div key={row.key} ref={isSelected ? selectedRowRef : undefined}>
+                      <ModelPickerModelRow
+                        isFavorite={row.isFavorite}
+                        isSelected={isSelected}
+                        model={row.model}
+                        onSelect={handleSelect}
+                        onToggleFavorite={toggleFavorite}
+                        showStar={status !== 'terminal'}
+                        starDisabled={status === 'loading'}
+                      />
+                    </div>
+                  );
+                })}
+              </>
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
diff --git a/apps/extension/entrypoints/sidepanel/model-preferences-state.ts b/apps/extension/entrypoints/sidepanel/model-preferences-state.ts
new file mode 100644
index 0000000000..c78bc7abda
--- /dev/null
+++ b/apps/extension/entrypoints/sidepanel/model-preferences-state.ts
@@ -0,0 +1,184 @@
+import type { QueryClient, QueryKey } from '@tanstack/react-query';
+import type { ModelPreferencesErrorKind } from '@/src/shared/model-preferences-client';
+
+export type ModelPreferencesStatus = 'loading' | 'ready' | 'retryable' | 'terminal';
+
+export interface ModelPreferencesCache {
+  readonly favorites: readonly string[];
+}
+
+export type TerminalLatchEvent =
+  | { readonly type: 'key-changed' }
+  | { readonly type: 'mutation-error'; readonly classification: ModelPreferencesErrorKind }
+  | { readonly type: 'query-error'; readonly classification: ModelPreferencesErrorKind }
+  | { readonly type: 'query-success' };
+
+export const emptyFavoriteIds: ReadonlySet<string> = new Set();
+
+export const applyFavoriteToggle = (favorites: readonly string[], modelId: string): string[] =>
+  favorites.includes(modelId) ? favorites.filter(id => id !== modelId) : [...favorites, modelId];
+
+export const reduceTerminalLatch = (latched: boolean, event: TerminalLatchEvent): boolean => {
+  switch (event.type) {
+    case 'key-changed':
+    case 'query-success': {
+      return false;
+    }
+    case 'mutation-error':
+    case 'query-error': {
+      return event.classification === 'terminal' ? true : latched;
+    }
+  }
+};
+
+export const reduceToggleError = (_current: boolean, event: 'failure' | 'success'): boolean =>
+  event === 'failure';
+
+export const deriveModelPreferencesStatus = ({
+  isError,
+  isPending,
+  queryErrorClassification,
+  terminalLatched,
+}: {
+  readonly isError: boolean;
+  readonly isPending: boolean;
+  readonly queryErrorClassification: ModelPreferencesErrorKind | null;
+  readonly terminalLatched: boolean;
+}): ModelPreferencesStatus => {
+  if (terminalLatched) {
+    return 'terminal';
+  }
+
+  if (isPending) {
+    return 'loading';
+  }
+
+  if (isError) {
+    return queryErrorClassification === 'terminal' ? 'terminal' : 'retryable';
+  }
+
+  return 'ready';
+};
+
+const awaitSettled = async (promise: Promise<unknown>): Promise<void> => {
+  try {
+    await promise;
+  } catch {
+    // Sequencing only — callers observe their own run outcome.
+  }
+};
+
+export const createSerialAsyncChain = (): {
+  readonly enqueue: <TValue>(work: () => Promise<TValue>) => Promise<TValue>;
+} => {
+  let chain: Promise<unknown> | undefined = undefined;
+
+  return {
+    enqueue: <TValue>(work: () => Promise<TValue>): Promise<TValue> => {
+      const previous = chain;
+      const run = (async (): Promise<TValue> => {
+        if (previous !== undefined) {
+          await awaitSettled(previous);
+        }
+
+        return work();
+      })();
+      chain = awaitSettled(run);
+      return run;
+    },
+  };
+};
+
+/** True when a toggle completion may write latch / toggle-error UI state. */
+export const isFavoriteToggleCompletionCurrent = (
+  enqueuedKeyFingerprint: string,
+  activeKeyFingerprint: string
+): boolean => enqueuedKeyFingerprint === activeKeyFingerprint;
+
+export interface FavoriteToggleUiState {
+  readonly terminalLatched: boolean;
+  readonly toggleError: boolean;
+}
+
+export type FavoriteToggleCompletionOutcome =
+  | { readonly ok: true }
+  | {
+      readonly classification: ModelPreferencesErrorKind;
+      readonly ok: false;
+    };
+
+/**
+ * Apply latch / toggle-error updates only when the enqueued key is still active.
+ * Optimistic cache work is separate and always targets the enqueued query key.
+ */
+export const applyFavoriteToggleCompletionUi = ({
+  activeKeyFingerprint,
+  enqueuedKeyFingerprint,
+  outcome,
+  ui,
+}: {
+  readonly activeKeyFingerprint: string;
+  readonly enqueuedKeyFingerprint: string;
+  readonly outcome: FavoriteToggleCompletionOutcome;
+  readonly ui: FavoriteToggleUiState;
+}): FavoriteToggleUiState & { readonly applied: boolean } => {
+  if (!isFavoriteToggleCompletionCurrent(enqueuedKeyFingerprint, activeKeyFingerprint)) {
+    return { ...ui, applied: false };
+  }
+
+  if (outcome.ok) {
+    return {
+      applied: true,
+      terminalLatched: ui.terminalLatched,
+      toggleError: reduceToggleError(ui.toggleError, 'success'),
+    };
+  }
+
+  const terminalLatched = reduceTerminalLatch(ui.terminalLatched, {
+    classification: outcome.classification,
+    type: 'mutation-error',
+  });
+  const toggleError =
+    outcome.classification === 'retryable'
+      ? reduceToggleError(ui.toggleError, 'failure')
+      : ui.toggleError;
+
+  return { applied: true, terminalLatched, toggleError };
+};
+
+export const runOptimisticFavoriteToggle = async ({
+  modelId,
+  mutate,
+  queryClient,
+  queryKey,
+}: {
+  readonly modelId: string;
+  readonly mutate: () => Promise<void>;
+  readonly queryClient: Pick<
+    QueryClient,
+    'cancelQueries' | 'getQueryData' | 'invalidateQueries' | 'setQueryData'
+  >;
+  readonly queryKey: QueryKey;
+}): Promise<{ readonly ok: true } | { readonly error: unknown; readonly ok: false }> => {
+  await queryClient.cancelQueries({ queryKey });
+  const previous = queryClient.getQueryData<ModelPreferencesCache>(queryKey);
+  const snapshot = previous?.favorites ?? [];
+  queryClient.setQueryData<ModelPreferencesCache>(queryKey, {
+    favorites: applyFavoriteToggle(snapshot, modelId),
+  });
+
+  try {
+    await mutate();
+    return { ok: true };
+  } catch (error) {
+    queryClient.setQueryData<ModelPreferencesCache>(
+      queryKey,
+      previous ?? { favorites: [...snapshot] }
+    );
+    return { error, ok: false };
+  } finally {
+    /* Reconcile outside the serial chain (app parity): awaiting the refetch
+       would delay the next queued toggle by the refetch's retry/backoff. */
+    void queryClient.invalidateQueries({ queryKey });
+  }
+};
diff --git a/apps/extension/entrypoints/sidepanel/use-model-preferences.test.ts b/apps/extension/entrypoints/sidepanel/use-model-preferences.test.ts
new file mode 100644
index 0000000000..0f6f3940b5
--- /dev/null
+++ b/apps/extension/entrypoints/sidepanel/use-model-preferences.test.ts
@@ -0,0 +1,284 @@
+import { QueryClient } from '@tanstack/react-query';
+import { describe, expect, it } from 'vitest';
+import { ModelPreferencesError } from '@/src/shared/model-preferences-client';
+import {
+  applyFavoriteToggle,
+  applyFavoriteToggleCompletionUi,
+  createSerialAsyncChain,
+  deriveModelPreferencesStatus,
+  isFavoriteToggleCompletionCurrent,
+  reduceTerminalLatch,
+  reduceToggleError,
+  runOptimisticFavoriteToggle,
+} from './model-preferences-state';
+
+const queryKey = ['side-panel', 'model-preferences', 'token-1', 'personal'] as const;
+
+const terminalError = new ModelPreferencesError('forbidden', {
+  status: 403,
+  trpcCode: 'FORBIDDEN',
+});
+
+const retryableError = new ModelPreferencesError('server error', {
+  status: 500,
+  trpcCode: null,
+});
+
+describe('favorite list toggle apply', () => {
+  it('adds a missing id and removes an existing id', () => {
+    expect(applyFavoriteToggle(['a'], 'b')).toStrictEqual(['a', 'b']);
+    expect(applyFavoriteToggle(['a', 'b'], 'a')).toStrictEqual(['b']);
+  });
+});
+
+describe('terminal latch transitions', () => {
+  it('latches on terminal query or mutation errors only', () => {
+    expect(reduceTerminalLatch(false, { classification: 'terminal', type: 'query-error' })).toBe(
+      true
+    );
+    expect(reduceTerminalLatch(false, { classification: 'terminal', type: 'mutation-error' })).toBe(
+      true
+    );
+    expect(reduceTerminalLatch(false, { classification: 'retryable', type: 'query-error' })).toBe(
+      false
+    );
+    expect(reduceTerminalLatch(true, { classification: 'retryable', type: 'mutation-error' })).toBe(
+      true
+    );
+  });
+
+  it('clears on key change or successful get', () => {
+    expect(reduceTerminalLatch(true, { type: 'key-changed' })).toBe(false);
+    expect(reduceTerminalLatch(true, { type: 'query-success' })).toBe(false);
+  });
+});
+
+describe('preferences status derivation', () => {
+  it('prefers the terminal latch over loading and query errors', () => {
+    expect(
+      deriveModelPreferencesStatus({
+        isError: true,
+        isPending: true,
+        queryErrorClassification: 'retryable',
+        terminalLatched: true,
+      })
+    ).toBe('terminal');
+  });
+
+  it('reports loading only while the first fetch is pending', () => {
+    expect(
+      deriveModelPreferencesStatus({
+        isError: false,
+        isPending: true,
+        queryErrorClassification: null,
+        terminalLatched: false,
+      })
+    ).toBe('loading');
+  });
+
+  it('maps query errors to retryable or terminal', () => {
+    expect(
+      deriveModelPreferencesStatus({
+        isError: true,
+        isPending: false,
+        queryErrorClassification: 'retryable',
+        terminalLatched: false,
+      })
+    ).toBe('retryable');
+    expect(
+      deriveModelPreferencesStatus({
+        isError: true,
+        isPending: false,
+        queryErrorClassification: 'terminal',
+        terminalLatched: false,
+      })
+    ).toBe('terminal');
+  });
+
+  it('reports ready when data is present without error', () => {
+    expect(
+      deriveModelPreferencesStatus({
+        isError: false,
+        isPending: false,
+        queryErrorClassification: null,
+        terminalLatched: false,
+      })
+    ).toBe('ready');
+  });
+});
+
+describe('toggle error flag', () => {
+  it('sets the flag on failure and clears it on the next success', () => {
+    expect(reduceToggleError(false, 'failure')).toBe(true);
+    expect(reduceToggleError(true, 'success')).toBe(false);
+    expect(reduceToggleError(false, 'success')).toBe(false);
+  });
+});
+
+describe('serial async chain', () => {
+  it('starts the second task only after the first settles', async () => {
+    const chain = createSerialAsyncChain();
+    const order: string[] = [];
+    const gate = {
+      release: (): void => {
+        // Replaced when the first task starts.
+      },
+    };
+    // eslint-disable-next-line promise/avoid-new -- test gate for serialization
+    const firstGate = new Promise<void>(resolve => {
+      gate.release = resolve;
+    });
+
+    const first = chain.enqueue(async () => {
+      order.push('first-start');
+      await firstGate;
+      order.push('first-end');
+      return 'first';
+    });
+    const second = chain.enqueue(() => {
+      order.push('second-start');
+      order.push('second-end');
+      return Promise.resolve('second');
+    });
+
+    expect(order).toStrictEqual(['first-start']);
+    gate.release();
+    await expect(first).resolves.toBe('first');
+    await expect(second).resolves.toBe('second');
+    expect(order).toStrictEqual(['first-start', 'first-end', 'second-start', 'second-end']);
+  });
+});
+
+describe('favorite toggle completion stale guard', () => {
+  it('does not set terminal latch or toggle-error when the key changed mid-flight', () => {
+    expect(isFavoriteToggleCompletionCurrent('key-a', 'key-a')).toBe(true);
+    expect(isFavoriteToggleCompletionCurrent('key-a', 'key-b')).toBe(false);
+
+    const stale = applyFavoriteToggleCompletionUi({
+      activeKeyFingerprint: 'key-b',
+      enqueuedKeyFingerprint: 'key-a',
+      outcome: { classification: 'terminal', ok: false },
+      ui: {
+        terminalLatched: reduceTerminalLatch(false, { type: 'key-changed' }),
+        toggleError: false,
+      },
+    });
+    expect(stale).toStrictEqual({ applied: false, terminalLatched: false, toggleError: false });
+
+    const current = applyFavoriteToggleCompletionUi({
+      activeKeyFingerprint: 'key-a',
+      enqueuedKeyFingerprint: 'key-a',
+      outcome: { classification: 'terminal', ok: false },
+      ui: { terminalLatched: false, toggleError: false },
+    });
+    expect(current).toStrictEqual({ applied: true, terminalLatched: true, toggleError: false });
+  });
+
+  it('does not start a post-key-change toggle until the prior key toggle settles', async () => {
+    const chain = createSerialAsyncChain();
+    const order: string[] = [];
+    const gate = {
+      release: (): void => {
+        // Replaced when the first toggle starts.
+      },
+    };
+    // eslint-disable-next-line promise/avoid-new -- test gate for cross-key serialization
+    const priorInFlight = new Promise<void>(resolve => {
+      gate.release = resolve;
+    });
+    const priorToggle = chain.enqueue(async () => {
+      order.push('key-a-start');
+      await priorInFlight;
+      order.push('key-a-end');
+    });
+    const nextToggle = chain.enqueue(() => {
+      order.push('key-b-start', 'key-b-end');
+      return Promise.resolve();
+    });
+    expect(order).toStrictEqual(['key-a-start']);
+    gate.release();
+    await priorToggle;
+    await nextToggle;
+    expect(order).toStrictEqual(['key-a-start', 'key-a-end', 'key-b-start', 'key-b-end']);
+  });
+});
+
+describe('optimistic favorite toggle helper', () => {
+  it('adds the id immediately and keeps the optimistic list after success', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    queryClient.setQueryData(queryKey, { favorites: ['a'] });
+    let mutateCalls = 0;
+    const mutate = (): Promise<void> => {
+      mutateCalls += 1;
+      return Promise.resolve();
+    };
+
+    const result = await runOptimisticFavoriteToggle({
+      modelId: 'b',
+      mutate,
+      queryClient,
+      queryKey: [...queryKey],
+    });
+
+    expect(result).toStrictEqual({ ok: true });
+    expect(mutateCalls).toBe(1);
+    expect(queryClient.getQueryData(queryKey)).toStrictEqual({ favorites: ['a', 'b'] });
+  });
+
+  it('removes the id immediately on toggle off', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    queryClient.setQueryData(queryKey, { favorites: ['a', 'b'] });
+
+    await runOptimisticFavoriteToggle({
+      modelId: 'a',
+      mutate: () => Promise.resolve(),
+      queryClient,
+      queryKey: [...queryKey],
+    });
+
+    expect(queryClient.getQueryData(queryKey)).toStrictEqual({ favorites: ['b'] });
+  });
+
+  it('rolls back to the snapshot when the mutation fails', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    queryClient.setQueryData(queryKey, { favorites: ['a'] });
+    let sawDuringMutate: unknown = null;
+
+    const result = await runOptimisticFavoriteToggle({
+      modelId: 'b',
+      mutate: () => {
+        sawDuringMutate = queryClient.getQueryData(queryKey);
+        return Promise.reject(retryableError);
+      },
+      queryClient,
+      queryKey: [...queryKey],
+    });
+
+    expect(sawDuringMutate).toStrictEqual({ favorites: ['a', 'b'] });
+    expect(result).toStrictEqual({ error: retryableError, ok: false });
+    expect(queryClient.getQueryData(queryKey)).toStrictEqual({ favorites: ['a'] });
+  });
+
+  it('returns the terminal mutation error without keeping the optimistic write', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    queryClient.setQueryData(queryKey, { favorites: [] });
+
+    const result = await runOptimisticFavoriteToggle({
+      modelId: 'a',
+      mutate: () => Promise.reject(terminalError),
+      queryClient,
+      queryKey: [...queryKey],
+    });
+
+    expect(result).toStrictEqual({ error: terminalError, ok: false });
+    expect(queryClient.getQueryData(queryKey)).toStrictEqual({ favorites: [] });
+  });
+});
diff --git a/apps/extension/entrypoints/sidepanel/use-model-preferences.ts b/apps/extension/entrypoints/sidepanel/use-model-preferences.ts
new file mode 100644
index 0000000000..65222d1247
--- /dev/null
+++ b/apps/extension/entrypoints/sidepanel/use-model-preferences.ts
@@ -0,0 +1,190 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getKiloApiBaseUrl } from '@/src/shared/auth';
+import type { StoredAuth } from '@/src/shared/auth';
+import type { KiloGatewayModelOption } from '@/src/shared/kilo-api-client';
+import {
+  addModelFavorite,
+  classifyModelPreferencesError,
+  fetchModelPreferences,
+  removeModelFavorite,
+} from '@/src/shared/model-preferences-client';
+import { getModelPreferencesQueryKey } from '@/src/shared/side-panel-query-options';
+import {
+  applyFavoriteToggleCompletionUi,
+  createSerialAsyncChain,
+  deriveModelPreferencesStatus,
+  emptyFavoriteIds,
+  reduceTerminalLatch,
+  runOptimisticFavoriteToggle,
+} from './model-preferences-state';
+import type { ModelPreferencesStatus } from './model-preferences-state';
+
+const apiBaseUrl = getKiloApiBaseUrl();
+const fetchFromWindow = (input: string, init?: RequestInit): Promise<Response> =>
+  fetch(input, init);
+
+const queryKeyFingerprint = (queryKey: readonly string[]): string => queryKey.join('\0');
+
+export interface UseModelPreferencesResult {
+  readonly favorites: ReadonlySet<string>;
+  readonly refetch: () => Promise<unknown>;
+  readonly status: ModelPreferencesStatus;
+  readonly toggleError: boolean;
+  readonly toggleFavorite: (model: KiloGatewayModelOption) => void;
+}
+
+export const useModelPreferences = ({
+  auth,
+  organizationId,
+}: {
+  readonly auth: StoredAuth;
+  readonly organizationId: string | undefined;
+}): UseModelPreferencesResult => {
+  const queryClient = useQueryClient();
+  const queryKey = useMemo(
+    () => getModelPreferencesQueryKey({ organizationId, token: auth.token }),
+    [auth.token, organizationId]
+  );
+  const keyFingerprint = queryKeyFingerprint(queryKey);
+  const previousKeyRef = useRef(keyFingerprint);
+  const [terminalLatched, setTerminalLatched] = useState(false);
+  const [toggleError, setToggleError] = useState(false);
+  const terminalLatchedRef = useRef(terminalLatched);
+  const toggleErrorRef = useRef(toggleError);
+  /* One serial chain for the hook lifetime (favorites are user-global). */
+  const chainRef = useRef(createSerialAsyncChain());
+
+  terminalLatchedRef.current = terminalLatched;
+  toggleErrorRef.current = toggleError;
+
+  if (previousKeyRef.current !== keyFingerprint) {
+    previousKeyRef.current = keyFingerprint;
+    setTerminalLatched(latched => reduceTerminalLatch(latched, { type: 'key-changed' }));
+    setToggleError(false);
+  }
+
+  const query = useQuery({
+    queryFn: ({ signal }) =>
+      fetchModelPreferences({
+        apiBaseUrl,
+        fetch: fetchFromWindow,
+        organizationId,
+        signal,
+        token: auth.token,
+      }),
+    queryKey,
+  });
+
+  useEffect(() => {
+    if (query.isSuccess) {
+      setTerminalLatched(latched => reduceTerminalLatch(latched, { type: 'query-success' }));
+    }
+  }, [query.dataUpdatedAt, query.isSuccess]);
+
+  useEffect(() => {
+    if (!query.isError) {
+      return;
+    }
+
+    const classification = classifyModelPreferencesError(query.error);
+    setTerminalLatched(latched =>
+      reduceTerminalLatch(latched, { classification, type: 'query-error' })
+    );
+  }, [query.error, query.isError]);
+
+  const status = deriveModelPreferencesStatus({
+    isError: query.isError,
+    isPending: query.isPending,
+    queryErrorClassification: query.isError ? classifyModelPreferencesError(query.error) : null,
+    terminalLatched,
+  });
+
+  const favorites = useMemo((): ReadonlySet<string> => {
+    const list = query.data?.favorites;
+    if (list === undefined) {
+      return emptyFavoriteIds;
+    }
+
+    return new Set(list);
+  }, [query.data?.favorites]);
+
+  const toggleFavorite = useCallback(
+    (model: KiloGatewayModelOption): void => {
+      if (status === 'terminal') {
+        return;
+      }
+
+      /* Capture at enqueue: stale-guard UI; cache ops keep this query key. */
+      const enqueuedFingerprint = keyFingerprint;
+      const enqueuedOrganizationId = organizationId;
+      const enqueuedQueryKey = [...queryKey];
+      const enqueuedToken = auth.token;
+
+      void chainRef.current.enqueue(async () => {
+        const cached = queryClient.getQueryData<{ favorites: readonly string[] }>(enqueuedQueryKey);
+        const isFavorite = (cached?.favorites ?? []).includes(model.id);
+        const result = await runOptimisticFavoriteToggle({
+          modelId: model.id,
+          mutate: () =>
+            isFavorite
+              ? removeModelFavorite({
+                  apiBaseUrl,
+                  fetch: fetchFromWindow,
+                  model: model.id,
+                  organizationId: enqueuedOrganizationId,
+                  token: enqueuedToken,
+                })
+              : addModelFavorite({
+                  apiBaseUrl,
+                  fetch: fetchFromWindow,
+                  model: model.id,
+                  organizationId: enqueuedOrganizationId,
+                  token: enqueuedToken,
+                }),
+          queryClient,
+          queryKey: enqueuedQueryKey,
+        });
+
+        const next = result.ok
+          ? applyFavoriteToggleCompletionUi({
+              activeKeyFingerprint: previousKeyRef.current,
+              enqueuedKeyFingerprint: enqueuedFingerprint,
+              outcome: { ok: true },
+              ui: {
+                terminalLatched: terminalLatchedRef.current,
+                toggleError: toggleErrorRef.current,
+              },
+            })
+          : applyFavoriteToggleCompletionUi({
+              activeKeyFingerprint: previousKeyRef.current,
+              enqueuedKeyFingerprint: enqueuedFingerprint,
+              outcome: {
+                classification: classifyModelPreferencesError(result.error),
+                ok: false,
+              },
+              ui: {
+                terminalLatched: terminalLatchedRef.current,
+                toggleError: toggleErrorRef.current,
+              },
+            });
+
+        if (!next.applied) {
+          return;
+        }
+
+        setTerminalLatched(next.terminalLatched);
+        setToggleError(next.toggleError);
+      });
+    },
+    [auth.token, keyFingerprint, organizationId, queryClient, queryKey, status]
+  );
+
+  return {
+    favorites,
+    refetch: query.refetch,
+    status,
+    toggleError,
+    toggleFavorite,
+  };
+};
diff --git a/apps/extension/src/shared/model-picker-rows.test.ts b/apps/extension/src/shared/model-picker-rows.test.ts
new file mode 100644
index 0000000000..6d5eed6665
--- /dev/null
+++ b/apps/extension/src/shared/model-picker-rows.test.ts
@@ -0,0 +1,155 @@
+import { describe, expect, it } from 'vitest';
+import type { KiloGatewayModelOption } from './kilo-api-client';
+import type { ExtensionModelPickerRow } from './model-picker-rows';
+import { buildExtensionModelPickerRows } from './model-picker-rows';
+
+const model = (
+  id: string,
+  {
+    isPreferred = false,
+    name = id,
+  }: {
+    readonly isPreferred?: boolean;
+    readonly name?: string;
+  } = {}
+): KiloGatewayModelOption => ({
+  id,
+  isPreferred,
+  name,
+  variants: [],
+});
+
+const modelIds = (rows: ExtensionModelPickerRow[]): string[] =>
+  rows.flatMap(row => (row.type === 'model' ? [row.model.id] : []));
+
+const headerTitles = (rows: ExtensionModelPickerRow[]): string[] =>
+  rows.flatMap(row => (row.type === 'header' ? [row.title] : []));
+
+const modelRows = (rows: ExtensionModelPickerRow[]) =>
+  rows.flatMap(row => (row.type === 'model' ? [row] : []));
+
+describe('extension model picker rows', () => {
+  it('orders sections favorites → recommended → all models and preserves catalog order', () => {
+    const models = [
+      model('preferred-a', { isPreferred: true, name: 'Preferred A' }),
+      model('all-a', { name: 'All A' }),
+      model('fav-a', { name: 'Favorite A' }),
+      model('preferred-b', { isPreferred: true, name: 'Preferred B' }),
+      model('all-b', { name: 'All B' }),
+      model('fav-b', { name: 'Favorite B' }),
+    ];
+
+    const rows = buildExtensionModelPickerRows({
+      favoriteIds: new Set(['fav-a', 'fav-b']),
+      models,
+      search: '',
+    });
+
+    expect(headerTitles(rows)).toStrictEqual(['FAVORITES', 'RECOMMENDED', 'ALL MODELS']);
+    expect(modelIds(rows)).toStrictEqual([
+      'fav-a',
+      'fav-b',
+      'preferred-a',
+      'preferred-b',
+      'all-a',
+      'all-b',
+    ]);
+  });
+
+  it('keeps a preferred favorite only under favorites with no duplicate model keys', () => {
+    const models = [
+      model('both', { isPreferred: true, name: 'Both' }),
+      model('only-preferred', { isPreferred: true, name: 'Only Preferred' }),
+      model('only-all', { name: 'Only All' }),
+    ];
+
+    const rows = buildExtensionModelPickerRows({
+      favoriteIds: new Set(['both']),
+      models,
+      search: '',
+    });
+
+    const keys = rows.map(row => row.key);
+    const bothRow = modelRows(rows).find(row => row.model.id === 'both');
+
+    expect(headerTitles(rows)).toStrictEqual(['FAVORITES', 'RECOMMENDED', 'ALL MODELS']);
+    expect(modelIds(rows)).toStrictEqual(['both', 'only-preferred', 'only-all']);
+    expect({ keysUnique: new Set(keys).size === keys.length, rowCount: rows.length }).toStrictEqual(
+      {
+        keysUnique: true,
+        rowCount: 6,
+      }
+    );
+    expect(bothRow).toMatchObject({ isFavorite: true, type: 'model' });
+  });
+
+  it('filters by name and id case-insensitively before partitioning', () => {
+    const models = [
+      model('anthropic/claude', { isPreferred: true, name: 'Claude Sonnet' }),
+      model('openai/gpt', { name: 'GPT Four' }),
+      model('fav-id', { name: 'Other Name' }),
+    ];
+    const favoriteIds = new Set(['fav-id']);
+
+    const byName = buildExtensionModelPickerRows({
+      favoriteIds,
+      models,
+      search: '  claude  ',
+    });
+    expect(headerTitles(byName)).toStrictEqual(['RECOMMENDED']);
+    expect(modelIds(byName)).toStrictEqual(['anthropic/claude']);
+
+    const byId = buildExtensionModelPickerRows({ favoriteIds, models, search: 'OPENAI/' });
+    expect(headerTitles(byId)).toStrictEqual(['ALL MODELS']);
+    expect(modelIds(byId)).toStrictEqual(['openai/gpt']);
+
+    const favoriteMiss = buildExtensionModelPickerRows({
+      favoriteIds,
+      models,
+      search: 'claude',
+    });
+    expect(headerTitles(favoriteMiss)).not.toContain('FAVORITES');
+  });
+
+  it('omits the favorites header when empty and returns no rows when nothing matches', () => {
+    const models = [
+      model('preferred-a', { isPreferred: true, name: 'Preferred A' }),
+      model('all-a', { name: 'All A' }),
+    ];
+
+    const noFavorites = buildExtensionModelPickerRows({
+      favoriteIds: new Set(),
+      models,
+      search: '',
+    });
+    expect(headerTitles(noFavorites)).toStrictEqual(['RECOMMENDED', 'ALL MODELS']);
+    expect(headerTitles(noFavorites)).not.toContain('FAVORITES');
+
+    const noMatches = buildExtensionModelPickerRows({
+      favoriteIds: new Set(['preferred-a']),
+      models,
+      search: 'zzzz',
+    });
+    expect(noMatches).toStrictEqual([]);
+  });
+
+  it('marks isFavorite true only on rows under FAVORITES', () => {
+    const models = [
+      model('fav', { isPreferred: true, name: 'Favorite Preferred' }),
+      model('rec', { isPreferred: true, name: 'Recommended' }),
+      model('all', { name: 'All' }),
+    ];
+
+    const favoriteFlags = Object.fromEntries(
+      modelRows(
+        buildExtensionModelPickerRows({
+          favoriteIds: new Set(['fav']),
+          models,
+          search: '',
+        })
+      ).map(row => [row.model.id, row.isFavorite])
+    );
+
+    expect(favoriteFlags).toStrictEqual({ all: false, fav: true, rec: false });
+  });
+});
diff --git a/apps/extension/src/shared/model-picker-rows.ts b/apps/extension/src/shared/model-picker-rows.ts
new file mode 100644
index 0000000000..fdc183e20c
--- /dev/null
+++ b/apps/extension/src/shared/model-picker-rows.ts
@@ -0,0 +1,56 @@
+import type { KiloGatewayModelOption } from './kilo-api-client';
+
+export type ExtensionModelPickerRow =
+  | { key: string; title: string; type: 'header' }
+  | { isFavorite: boolean; key: string; model: KiloGatewayModelOption; type: 'model' };
+
+const matchesSearch = (model: KiloGatewayModelOption, query: string): boolean => {
+  if (query.length === 0) {
+    return true;
+  }
+
+  return model.name.toLowerCase().includes(query) || model.id.toLowerCase().includes(query);
+};
+
+export const buildExtensionModelPickerRows = ({
+  favoriteIds,
+  models,
+  search,
+}: {
+  readonly favoriteIds: ReadonlySet<string>;
+  readonly models: readonly KiloGatewayModelOption[];
+  readonly search: string;
+}): ExtensionModelPickerRow[] => {
+  const query = search.toLowerCase().trim();
+  const filtered = models.filter(model => matchesSearch(model, query));
+
+  const favorites = filtered.filter(model => favoriteIds.has(model.id));
+  const rest = filtered.filter(model => !favoriteIds.has(model.id));
+  const recommended = rest.filter(model => model.isPreferred);
+  const allModels = rest.filter(model => !model.isPreferred);
+
+  const rows: ExtensionModelPickerRow[] = [];
+
+  if (favorites.length > 0) {
+    rows.push({ key: 'favorites', title: 'FAVORITES', type: 'header' });
+    for (const model of favorites) {
+      rows.push({ isFavorite: true, key: `model:${model.id}`, model, type: 'model' });
+    }
+  }
+
+  if (recommended.length > 0) {
+    rows.push({ key: 'recommended', title: 'RECOMMENDED', type: 'header' });
+    for (const model of recommended) {
+      rows.push({ isFavorite: false, key: `model:${model.id}`, model, type: 'model' });
+    }
+  }
+
+  if (allModels.length > 0) {
+    rows.push({ key: 'all', title: 'ALL MODELS', type: 'header' });
+    for (const model of allModels) {
+      rows.push({ isFavorite: false, key: `model:${model.id}`, model, type: 'model' });
+    }
+  }
+
+  return rows;
+};
diff --git a/apps/extension/src/shared/model-preferences-client.test.ts b/apps/extension/src/shared/model-preferences-client.test.ts
new file mode 100644
index 0000000000..1508e6c4e9
--- /dev/null
+++ b/apps/extension/src/shared/model-preferences-client.test.ts
@@ -0,0 +1,281 @@
+import { describe, expect, it } from 'vitest';
+import type { FetchLike } from './auth';
+import {
+  addModelFavorite,
+  classifyModelPreferencesError,
+  fetchModelPreferences,
+  ModelPreferencesError,
+  removeModelFavorite,
+} from './model-preferences-client';
+
+const jsonResponse = (body: unknown, init: ResponseInit = {}): Response =>
+  Response.json(body, { ...init });
+const favoritesEnvelope = (favorites: string[] = []) =>
+  jsonResponse({ result: { data: { favorites, lastSelected: null } } });
+const mutationEnvelope = () => jsonResponse({ result: { data: { success: true } } });
+
+const firstRequest = <Request>(requests: Request[]): Request => {
+  const [request] = requests;
+  if (request === undefined) {
+    throw new Error('Expected request to be captured.');
+  }
+  return request;
+};
+
+interface CapturedRequest {
+  readonly body: string | undefined;
+  readonly headers: Headers;
+  readonly input: string;
+  readonly method: string | undefined;
+}
+
+const captureFetch = (
+  handler: (request: CapturedRequest) => Response | Promise<Response>
+): { readonly fetch: FetchLike; readonly seen: CapturedRequest[] } => {
+  const seen: CapturedRequest[] = [];
+  return {
+    fetch: (input, init) => {
+      const request: CapturedRequest = {
+        body: typeof init?.body === 'string' ? init.body : undefined,
+        headers: new Headers(init?.headers),
+        input: String(input),
+        method: init?.method,
+      };
+      seen.push(request);
+      return handler(request);
+    },
+    seen,
+  };
+};
+
+const networkFetch: FetchLike = () => {
+  throw new TypeError('Failed to fetch');
+};
+
+const expectModelPreferencesError = async (
+  run: () => Promise<unknown>,
+  assert: (error: ModelPreferencesError) => void
+): Promise<void> => {
+  await expect(run()).rejects.toSatisfy((error: unknown) => {
+    if (!(error instanceof ModelPreferencesError)) {
+      throw new Error('expected ModelPreferencesError');
+    }
+    assert(error);
+    return true;
+  });
+};
+
+const clientOpts = (fetch: FetchLike) => ({
+  apiBaseUrl: 'https://app.kilo.ai',
+  fetch,
+  token: 'token-1',
+});
+
+const classify = (status: number | null, trpcCode: string | null) =>
+  classifyModelPreferencesError(new ModelPreferencesError('x', { status, trpcCode }));
+
+const trpcError = ({
+  code,
+  httpStatus,
+  message,
+  rpcCode,
+}: {
+  readonly code: string;
+  readonly httpStatus: number;
+  readonly message: string;
+  readonly rpcCode: number;
+}) =>
+  jsonResponse(
+    { error: { code: rpcCode, data: { code, httpStatus }, message } },
+    { status: httpStatus }
+  );
+
+describe('model preferences client', () => {
+  it('fetches personal preferences without an input query param', async () => {
+    const { fetch, seen } = captureFetch(() => favoritesEnvelope(['anthropic/claude-sonnet-4']));
+    await expect(
+      fetchModelPreferences({ apiBaseUrl: 'https://app.kilo.ai/', fetch, token: 'token-1' })
+    ).resolves.toStrictEqual({ favorites: ['anthropic/claude-sonnet-4'] });
+    const request = firstRequest(seen);
+    expect(request.input).toBe('https://app.kilo.ai/api/trpc/modelPreferences.get');
+    expect(request.input).not.toContain('batch');
+    expect(Object.fromEntries(request.headers.entries())).toMatchObject({
+      accept: 'application/json',
+      authorization: 'Bearer token-1',
+    });
+    expect(request.headers.has('x-kilocode-organizationid')).toBe(false);
+  });
+
+  it('scopes org get via tRPC input and never sends the org header', async () => {
+    const { fetch, seen } = captureFetch(() => favoritesEnvelope());
+    await fetchModelPreferences({ ...clientOpts(fetch), organizationId: 'org-1' });
+    const request = firstRequest(seen);
+    expect(request.input).toBe(
+      `https://app.kilo.ai/api/trpc/modelPreferences.get?input=${encodeURIComponent(
+        JSON.stringify({ organizationId: 'org-1' })
+      )}`
+    );
+    expect(request.input).toContain('input=%7B%22organizationId%22%3A%22org-1%22%7D');
+    expect(request.input).not.toContain('batch');
+    expect(request.headers.has('x-kilocode-organizationid')).toBe(false);
+  });
+
+  it('parses a populated lastSelected object without breaking', async () => {
+    const { fetch } = captureFetch(() =>
+      jsonResponse({
+        result: {
+          data: { favorites: ['model-a'], lastSelected: { model: 'model-a', variant: 'high' } },
+        },
+      })
+    );
+    await expect(fetchModelPreferences(clientOpts(fetch))).resolves.toStrictEqual({
+      favorites: ['model-a'],
+    });
+  });
+
+  it('posts add favorite with raw model JSON and no batch or org header', async () => {
+    const { fetch, seen } = captureFetch(() => mutationEnvelope());
+    await addModelFavorite({
+      ...clientOpts(fetch),
+      apiBaseUrl: 'https://app.kilo.ai/',
+      model: 'anthropic/claude-sonnet-4',
+      organizationId: 'org-1',
+    });
+    const request = firstRequest(seen);
+    expect({
+      authorization: request.headers.get('authorization'),
+      body: request.body,
+      contentType: request.headers.get('content-type'),
+      hasOrgHeader: request.headers.has('x-kilocode-organizationid'),
+      input: request.input,
+      method: request.method,
+    }).toStrictEqual({
+      authorization: 'Bearer token-1',
+      body: '{"model":"anthropic/claude-sonnet-4"}',
+      contentType: 'application/json',
+      hasOrgHeader: false,
+      input: 'https://app.kilo.ai/api/trpc/modelPreferences.addFavorite',
+      method: 'POST',
+    });
+    expect(request.input).not.toContain('batch');
+  });
+
+  it('posts remove favorite with raw model JSON and no batch param', async () => {
+    const { fetch, seen } = captureFetch(() => mutationEnvelope());
+    await removeModelFavorite({
+      ...clientOpts(fetch),
+      apiBaseUrl: 'https://app.kilo.ai/',
+      model: 'anthropic/claude-sonnet-4',
+    });
+    const request = firstRequest(seen);
+    expect({
+      body: request.body,
+      contentType: request.headers.get('content-type'),
+      input: request.input,
+      method: request.method,
+    }).toStrictEqual({
+      body: '{"model":"anthropic/claude-sonnet-4"}',
+      contentType: 'application/json',
+      input: 'https://app.kilo.ai/api/trpc/modelPreferences.removeFavorite',
+      method: 'POST',
+    });
+    expect(request.input).not.toContain('batch');
+  });
+
+  it('classifies HTTP and tRPC auth failures as terminal', () => {
+    expect(classify(401, null)).toBe('terminal');
+    expect(classify(403, null)).toBe('terminal');
+    expect(classify(200, 'UNAUTHORIZED')).toBe('terminal');
+    expect(classify(200, 'FORBIDDEN')).toBe('terminal');
+  });
+
+  it('classifies non-auth failures and unknown errors as retryable', () => {
+    expect(classify(404, null)).toBe('retryable');
+    expect(classify(500, null)).toBe('retryable');
+    expect(classify(400, 'BAD_REQUEST')).toBe('retryable');
+    expect(classifyModelPreferencesError(new Error('network'))).toBe('retryable');
+  });
+
+  it('maps network fetch failures to retryable ModelPreferencesError', async () => {
+    await expectModelPreferencesError(
+      () => fetchModelPreferences(clientOpts(networkFetch)),
+      error => {
+        expect(classifyModelPreferencesError(error)).toBe('retryable');
+      }
+    );
+  });
+
+  it('maps HTTP 404 without tRPC envelope to retryable status 404', async () => {
+    const notFoundFetch = captureFetch(() => jsonResponse({ error: 'nope' }, { status: 404 }));
+    await expectModelPreferencesError(
+      () => fetchModelPreferences(clientOpts(notFoundFetch.fetch)),
+      error => {
+        expect(error.status).toBe(404);
+        expect(classifyModelPreferencesError(error)).toBe('retryable');
+      }
+    );
+  });
+
+  it('maps tRPC INTERNAL_SERVER_ERROR envelope to retryable', async () => {
+    const serverErrorFetch = captureFetch(() =>
+      trpcError({
+        code: 'INTERNAL_SERVER_ERROR',
+        httpStatus: 500,
+        message: 'boom',
+        rpcCode: -32_603,
+      })
+    );
+    await expectModelPreferencesError(
+      () => fetchModelPreferences(clientOpts(serverErrorFetch.fetch)),
+      error => {
+        expect(classifyModelPreferencesError(error)).toBe('retryable');
+      }
+    );
+  });
+
+  it('maps tRPC UNAUTHORIZED envelope to terminal with trpcCode', async () => {
+    const unauthorizedEnvelopeFetch = captureFetch(() =>
+      trpcError({
+        code: 'UNAUTHORIZED',
+        httpStatus: 401,
+        message: 'Unauthorized',
+        rpcCode: -32_001,
+      })
+    );
+    await expectModelPreferencesError(
+      () => fetchModelPreferences(clientOpts(unauthorizedEnvelopeFetch.fetch)),
+      error => {
+        expect(error.trpcCode).toBe('UNAUTHORIZED');
+        expect(classifyModelPreferencesError(error)).toBe('terminal');
+      }
+    );
+  });
+
+  it('maps malformed success envelopes to retryable ModelPreferencesError', async () => {
+    const malformedFetch = captureFetch(() => jsonResponse({ not: 'an envelope' }));
+    await expectModelPreferencesError(
+      () => fetchModelPreferences(clientOpts(malformedFetch.fetch)),
+      error => {
+        expect(classifyModelPreferencesError(error)).toBe('retryable');
+      }
+    );
+  });
+
+  it('never adds a batch query parameter on get', async () => {
+    const { fetch, seen } = captureFetch(() => favoritesEnvelope());
+    await fetchModelPreferences({ ...clientOpts(fetch), organizationId: 'org-2' });
+    expect(firstRequest(seen).input).not.toMatch(/[?&]batch=/);
+  });
+
+  it('never adds a batch query parameter on add favorite', async () => {
+    const { fetch, seen } = captureFetch(() => mutationEnvelope());
+    await addModelFavorite({ ...clientOpts(fetch), model: 'model-a' });
+    expect(firstRequest(seen).input).not.toMatch(/[?&]batch=/);
+  });
+
+  it('never adds a batch query parameter on remove favorite', async () => {
+    const { fetch, seen } = captureFetch(() => mutationEnvelope());
+    await removeModelFavorite({ ...clientOpts(fetch), model: 'model-a' });
+    expect(firstRequest(seen).input).not.toMatch(/[?&]batch=/);
+  });
+});
diff --git a/apps/extension/src/shared/model-preferences-client.ts b/apps/extension/src/shared/model-preferences-client.ts
new file mode 100644
index 0000000000..7d57e8af9f
--- /dev/null
+++ b/apps/extension/src/shared/model-preferences-client.ts
@@ -0,0 +1,287 @@
+import { z } from 'zod';
+import type { FetchLike } from './auth';
+
+export type ModelPreferencesErrorKind = 'retryable' | 'terminal';
+
+export class ModelPreferencesError extends Error {
+  readonly status: number | null;
+  readonly trpcCode: string | null;
+
+  constructor(
+    message: string,
+    {
+      cause,
+      status,
+      trpcCode,
+    }: {
+      readonly cause?: unknown;
+      readonly status: number | null;
+      readonly trpcCode: string | null;
+    }
+  ) {
+    super(message, cause === undefined ? undefined : { cause });
+    this.name = 'ModelPreferencesError';
+    this.status = status;
+    this.trpcCode = trpcCode;
+  }
+}
+
+interface ModelPreferencesClientOptions {
+  readonly apiBaseUrl: string;
+  readonly fetch: FetchLike;
+  readonly organizationId?: string | undefined;
+  readonly signal?: AbortSignal;
+  readonly token: string;
+}
+
+type ModelFavoriteMutationOptions = ModelPreferencesClientOptions & {
+  readonly model: string;
+};
+
+const trimTrailingSlash = (value: string): string => value.replace(/\/+$/, '');
+
+const favoritesDataSchema = z.object({
+  favorites: z.array(z.string()),
+  lastSelected: z.unknown().optional(),
+});
+
+const mutationDataSchema = z.object({
+  success: z.literal(true),
+});
+
+const successEnvelopeSchema = <Schema extends z.ZodType>(dataSchema: Schema) =>
+  z.object({
+    result: z.object({
+      data: dataSchema,
+    }),
+  });
+
+const errorEnvelopeSchema = z.object({
+  error: z.object({
+    code: z.number().optional(),
+    data: z
+      .object({
+        code: z.string(),
+        httpStatus: z.number().optional(),
+        path: z.string().optional(),
+      })
+      .optional(),
+    message: z.string(),
+  }),
+});
+
+const buildProcedureUrl = (
+  apiBaseUrl: string,
+  procedure: string,
+  input?: Record<string, unknown>
+): string => {
+  const base = `${trimTrailingSlash(apiBaseUrl)}/api/trpc/${procedure}`;
+
+  if (input === undefined) {
+    return base;
+  }
+
+  return `${base}?input=${encodeURIComponent(JSON.stringify(input))}`;
+};
+
+const getQueryInput = (organizationId: string | undefined): Record<string, unknown> | undefined => {
+  if (organizationId === undefined || organizationId === '') {
+    return undefined;
+  }
+
+  return { organizationId };
+};
+
+const performModelPreferencesFetch = async ({
+  body,
+  fetch,
+  signal,
+  token,
+  url,
+  method,
+}: {
+  readonly body?: string;
+  readonly fetch: FetchLike;
+  readonly method: 'GET' | 'POST';
+  readonly signal?: AbortSignal;
+  readonly token: string;
+  readonly url: string;
+}): Promise<Response> => {
+  const headers: Record<string, string> = {
+    Accept: 'application/json',
+    Authorization: `Bearer ${token}`,
+  };
+
+  if (body !== undefined) {
+    headers['Content-Type'] = 'application/json';
+  }
+
+  try {
+    return await fetch(url, {
+      headers,
+      method,
+      ...(body === undefined ? {} : { body }),
+      ...(signal === undefined ? {} : { signal }),
+    });
+  } catch (error) {
+    throw new ModelPreferencesError('Model preferences request failed', {
+      cause: error,
+      status: null,
+      trpcCode: null,
+    });
+  }
+};
+
+const readModelPreferencesPayload = async (response: Response): Promise<unknown> => {
+  try {
+    return await response.json();
+  } catch (error) {
+    throw new ModelPreferencesError('Model preferences response was not JSON', {
+      cause: error,
+      status: response.status,
+      trpcCode: null,
+    });
+  }
+};
+
+const requestModelPreferences = async <Data>({
+  apiBaseUrl,
+  body,
+  dataSchema,
+  fetch,
+  method,
+  organizationId,
+  procedure,
+  signal,
+  token,
+}: {
+  readonly apiBaseUrl: string;
+  readonly body?: string;
+  readonly dataSchema: z.ZodType<Data>;
+  readonly fetch: FetchLike;
+  readonly method: 'GET' | 'POST';
+  readonly organizationId?: string | undefined;
+  readonly procedure: string;
+  readonly signal?: AbortSignal;
+  readonly token: string;
+}): Promise<Data> => {
+  const url =
+    method === 'GET'
+      ? buildProcedureUrl(apiBaseUrl, procedure, getQueryInput(organizationId))
+      : buildProcedureUrl(apiBaseUrl, procedure);
+
+  const response = await performModelPreferencesFetch({
+    fetch,
+    method,
+    token,
+    url,
+    ...(body === undefined ? {} : { body }),
+    ...(signal === undefined ? {} : { signal }),
+  });
+  const payload = await readModelPreferencesPayload(response);
+  const errorEnvelope = errorEnvelopeSchema.safeParse(payload);
+
+  if (errorEnvelope.success) {
+    throw new ModelPreferencesError(errorEnvelope.data.error.message, {
+      status: response.status,
+      trpcCode: errorEnvelope.data.error.data?.code ?? null,
+    });
+  }
+
+  if (!response.ok) {
+    throw new ModelPreferencesError(`Model preferences request failed: ${response.status}`, {
+      status: response.status,
+      trpcCode: null,
+    });
+  }
+
+  const successEnvelope = successEnvelopeSchema(dataSchema).safeParse(payload);
+
+  if (!successEnvelope.success) {
+    throw new ModelPreferencesError('Model preferences response envelope was malformed', {
+      status: response.status,
+      trpcCode: null,
+    });
+  }
+
+  return successEnvelope.data.result.data;
+};
+
+export const classifyModelPreferencesError = (error: unknown): ModelPreferencesErrorKind => {
+  if (!(error instanceof ModelPreferencesError)) {
+    return 'retryable';
+  }
+
+  if (error.status === 401 || error.status === 403) {
+    return 'terminal';
+  }
+
+  if (error.trpcCode === 'UNAUTHORIZED' || error.trpcCode === 'FORBIDDEN') {
+    return 'terminal';
+  }
+
+  return 'retryable';
+};
+
+export const fetchModelPreferences = async ({
+  apiBaseUrl,
+  fetch,
+  organizationId,
+  signal,
+  token,
+}: ModelPreferencesClientOptions): Promise<{ favorites: string[] }> => {
+  const data = await requestModelPreferences({
+    apiBaseUrl,
+    dataSchema: favoritesDataSchema,
+    fetch,
+    method: 'GET',
+    procedure: 'modelPreferences.get',
+    token,
+    ...(organizationId === undefined ? {} : { organizationId }),
+    ...(signal === undefined ? {} : { signal }),
+  });
+
+  return { favorites: data.favorites };
+};
+
+export const addModelFavorite = async ({
+  apiBaseUrl,
+  fetch,
+  model,
+  organizationId,
+  signal,
+  token,
+}: ModelFavoriteMutationOptions): Promise<void> => {
+  await requestModelPreferences({
+    apiBaseUrl,
+    body: JSON.stringify({ model }),
+    dataSchema: mutationDataSchema,
+    fetch,
+    method: 'POST',
+    procedure: 'modelPreferences.addFavorite',
+    token,
+    ...(organizationId === undefined ? {} : { organizationId }),
+    ...(signal === undefined ? {} : { signal }),
+  });
+};
+
+export const removeModelFavorite = async ({
+  apiBaseUrl,
+  fetch,
+  model,
+  organizationId,
+  signal,
+  token,
+}: ModelFavoriteMutationOptions): Promise<void> => {
+  await requestModelPreferences({
+    apiBaseUrl,
+    body: JSON.stringify({ model }),
+    dataSchema: mutationDataSchema,
+    fetch,
+    method: 'POST',
+    procedure: 'modelPreferences.removeFavorite',
+    token,
+    ...(organizationId === undefined ? {} : { organizationId }),
+    ...(signal === undefined ? {} : { signal }),
+  });
+};
diff --git a/apps/extension/src/shared/side-panel-query-options.test.ts b/apps/extension/src/shared/side-panel-query-options.test.ts
index 3b779b1894..60dfc87669 100644
--- a/apps/extension/src/shared/side-panel-query-options.test.ts
+++ b/apps/extension/src/shared/side-panel-query-options.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 import {
   getAuthValidationQueryKey,
   getGatewayModelsQueryKey,
+  getModelPreferencesQueryKey,
   getOrganizationsQueryKey,
   getTabListQueryKey,
 } from './side-panel-query-options';
@@ -17,6 +18,18 @@ describe('side panel query keys', () => {
     expect(
       getGatewayModelsQueryKey({ organizationId: undefined, token: 'token-a' })
     ).not.toStrictEqual(getGatewayModelsQueryKey({ organizationId: 'org-1', token: 'token-a' }));
+    expect(
+      getModelPreferencesQueryKey({ organizationId: undefined, token: 'token-a' })
+    ).not.toStrictEqual(getModelPreferencesQueryKey({ organizationId: 'org-1', token: 'token-a' }));
+  });
+
+  it('builds model-preferences keys for personal and org scopes', () => {
+    expect(
+      getModelPreferencesQueryKey({ organizationId: undefined, token: 'token-a' })
+    ).toStrictEqual(['side-panel', 'model-preferences', 'token-a', 'personal']);
+    expect(
+      getModelPreferencesQueryKey({ organizationId: 'org-1', token: 'token-a' })
+    ).toStrictEqual(['side-panel', 'model-preferences', 'token-a', 'org-1']);
   });
 
   it('uses one tab-list cache entry for the extension runtime', () => {
diff --git a/apps/extension/src/shared/side-panel-query-options.ts b/apps/extension/src/shared/side-panel-query-options.ts
index 466d15973d..bbf7fea27d 100644
--- a/apps/extension/src/shared/side-panel-query-options.ts
+++ b/apps/extension/src/shared/side-panel-query-options.ts
@@ -12,6 +12,14 @@ export const getGatewayModelsQueryKey = ({
   readonly token: string;
 }): readonly string[] => ['side-panel', 'gateway-models', token, organizationId ?? 'personal'];
 
+export const getModelPreferencesQueryKey = ({
+  organizationId,
+  token,
+}: {
+  readonly organizationId: string | undefined;
+  readonly token: string;
+}): readonly string[] => ['side-panel', 'model-preferences', token, organizationId ?? 'personal'];
+
 export const getOrganizationsQueryKey = (token: string): readonly string[] => [
   'side-panel',
   'organizations',
diff --git a/apps/extension/tests/e2e/conversation-tabs.test.ts b/apps/extension/tests/e2e/conversation-tabs.test.ts
index 38fa8d3c93..7bb05ad5c3 100644
--- a/apps/extension/tests/e2e/conversation-tabs.test.ts
+++ b/apps/extension/tests/e2e/conversation-tabs.test.ts
@@ -10,6 +10,7 @@ import {
   startFixtureServer,
   waitForStoredConversationText,
 } from './extension-context-fixture';
+import { expectSelectedModelId, selectModelById } from './model-picker-e2e-helpers';
 
 const safeToolNames = [
   'get_page_snapshot',
@@ -267,7 +268,7 @@ test('conversation controls stay tied to the selected conversation', async () =>
 
     await expect(sidePanel.getByLabel('Target tab')).toContainText('First target tab');
     await sidePanel.getByLabel('Target tab').selectOption({ label: 'First target tab' });
-    await sidePanel.getByLabel('Model').selectOption('model-one');
+    await selectModelById(sidePanel, 'model-one');
     await sidePanel.getByLabel('Thinking effort').selectOption('low');
 
     await sidePanel.getByLabel('Message agent').fill('First settings');
@@ -277,12 +278,12 @@ test('conversation controls stay tied to the selected conversation', async () =>
     await sidePanel.getByLabel('New conversation').click();
     await expect(sidePanel.getByRole('tab', { selected: true })).toContainText('Conversation 2');
     await sidePanel.getByLabel('Target tab').selectOption({ label: 'Second target tab' });
-    await sidePanel.getByLabel('Model').selectOption('model-two');
+    await selectModelById(sidePanel, 'model-two');
     await sidePanel.getByLabel('Thinking effort').selectOption('high');
     await expect
       .poll(() => getSelectedOptionText(sidePanel, 'Target tab'))
       .toBe('Second target tab');
-    await expect(sidePanel.getByLabel('Model')).toHaveValue('model-two');
+    await expectSelectedModelId(sidePanel, 'model-two');
     await expect(sidePanel.getByLabel('Thinking effort')).toHaveValue('high');
 
     await sidePanel.getByLabel('Message agent').fill('Second settings');
@@ -294,14 +295,14 @@ test('conversation controls stay tied to the selected conversation', async () =>
       .poll(() => getSelectedOptionText(sidePanel, 'Target tab'))
       .toBe('First target tab');
     await expect(sidePanel.getByLabel(/Safe mode/u)).toBeVisible();
-    await expect(sidePanel.getByLabel('Model')).toHaveValue('model-one');
+    await expectSelectedModelId(sidePanel, 'model-one');
     await expect(sidePanel.getByLabel('Thinking effort')).toHaveValue('low');
 
     await sidePanel.getByRole('tab', { name: /Second settings/u }).click();
     await expect
       .poll(() => getSelectedOptionText(sidePanel, 'Target tab'))
       .toBe('Second target tab');
-    await expect(sidePanel.getByLabel('Model')).toHaveValue('model-two');
+    await expectSelectedModelId(sidePanel, 'model-two');
     await expect(sidePanel.getByLabel('Thinking effort')).toHaveValue('high');
 
     expect(JSON.stringify(seenChatBodies[0])).toContain('First target tab');
diff --git a/apps/extension/tests/e2e/design-tokens.test.ts b/apps/extension/tests/e2e/design-tokens.test.ts
index ded6a70550..10a18f0aa7 100644
--- a/apps/extension/tests/e2e/design-tokens.test.ts
+++ b/apps/extension/tests/e2e/design-tokens.test.ts
@@ -224,10 +224,17 @@ const openSignedInPanel = async (
 const conversationPane = (sidePanel: Page): Locator => sidePanel.getByLabel('Agent conversation');
 
 const seedConversationAndReload = async (sidePanel: Page): Promise<void> => {
+  // Wait for boot hydration before seeding. Once loaded, the panel persists its default
+  // Conversation store, which clobbers any seed written earlier. The Model trigger stays
+  // Disabled until the conversation store is loaded (and models resolve).
+  await expect(sidePanel.getByLabel('Model')).toBeEnabled({ timeout: 30_000 });
   await setExtensionStorage(sidePanel, { kiloAgentConversations: designTokenConversationStore });
   await sidePanel.reload();
   // Scope to the transcript pane — the tab label also mirrors the first user message.
-  await expect(conversationPane(sidePanel).getByText(UNIQUE_USER_TEXT)).toBeVisible();
+  // Generous timeout: the first reload under full-suite load can exceed the 5s default.
+  await expect(conversationPane(sidePanel).getByText(UNIQUE_USER_TEXT)).toBeVisible({
+    timeout: 30_000,
+  });
 };
 
 /** Wait until computed background settles (class transitions can leave mid-blend RGB). */
diff --git a/apps/extension/tests/e2e/firefox-selenium-e2e.ts b/apps/extension/tests/e2e/firefox-selenium-e2e.ts
index 6401571c9c..6a6d98a481 100644
--- a/apps/extension/tests/e2e/firefox-selenium-e2e.ts
+++ b/apps/extension/tests/e2e/firefox-selenium-e2e.ts
@@ -55,6 +55,7 @@ const chromeWorkflowNames = [
   'memory index is included in the chat request context',
   'memory tools search and read saved memories',
   'settings memories list supports delete and shows the empty state',
+  'model picker search filters and selects by model id',
 ] as const;
 
 const PENDING_DRAFT_KEY = 'kiloPendingAgentMemoryDraft';
@@ -326,6 +327,27 @@ const startKiloApiServer = async (): Promise<KiloApiHandle> => {
           return;
         }
 
+        {
+          const requestPath = (request.url ?? '').split('?')[0] ?? '';
+
+          if (requestPath.startsWith('/api/trpc/modelPreferences.')) {
+            if (requestPath.endsWith('/modelPreferences.get')) {
+              sendJson(response, {
+                result: { data: { favorites: [], lastSelected: null } },
+              });
+              return;
+            }
+
+            if (
+              requestPath.endsWith('/modelPreferences.addFavorite') ||
+              requestPath.endsWith('/modelPreferences.removeFavorite')
+            ) {
+              sendJson(response, { result: { data: { success: true } } });
+              return;
+            }
+          }
+        }
+
         if (request.url === '/api/gateway/models') {
           modelCalls += 1;
 
@@ -910,6 +932,92 @@ const getSelectText = async (driver: WebDriver, ariaLabel: string): Promise<stri
   return String(result);
 };
 
+const modelTriggerSelector = 'button[aria-label="Model"]';
+const modelDialogSelector = '[role="dialog"][aria-modal="true"][aria-label="Select model"]';
+
+const getModelTriggerText = async (driver: WebDriver): Promise<string> => {
+  const result = await driver.executeScript((selector: string) => {
+    const trigger = document.querySelector(selector);
+
+    if (!(trigger instanceof HTMLButtonElement)) {
+      return '';
+    }
+
+    return trigger.textContent?.trim() ?? '';
+  }, modelTriggerSelector);
+
+  return String(result);
+};
+
+/** Selected model id from the Model trigger (`data-model-id`). Ready for M3. */
+const getModelTriggerSelectedId = async (driver: WebDriver): Promise<string | null> => {
+  const result: unknown = await driver.executeScript((selector: string) => {
+    const trigger = document.querySelector(selector);
+
+    if (!(trigger instanceof HTMLButtonElement)) {
+      return null;
+    }
+
+    return trigger.dataset['modelId'] ?? null;
+  }, modelTriggerSelector);
+
+  if (typeof result === 'string') {
+    return result;
+  }
+
+  return null;
+};
+
+const modelOptionByIdLocator = (modelId: string): ReturnType<typeof By.xpath> =>
+  By.xpath(
+    `//*[@role="dialog" and @aria-modal="true" and @aria-label="Select model"]//button[@data-model-id=${JSON.stringify(modelId)}]`
+  );
+
+/** Select model by `data-model-id` (never by name). Mirrors Playwright helper. */
+const selectModelByIdFirefox = async (driver: WebDriver, modelId: string): Promise<void> => {
+  const dialogAlreadyOpen = async (): Promise<boolean> => {
+    const dialogs = await driver.findElements(By.css(modelDialogSelector));
+
+    return dialogs.length > 0 && (await dialogs[0]?.isDisplayed()) === true;
+  };
+
+  if (!(await dialogAlreadyOpen())) {
+    await waitUntil(
+      driver,
+      async () => {
+        const elements = await driver.findElements(By.css(modelTriggerSelector));
+
+        return elements.length > 0 && (await elements[0]?.isDisplayed()) === true;
+      },
+      'Timed out waiting for Model trigger'
+    );
+    await driver.findElement(By.css(modelTriggerSelector)).click();
+  }
+
+  const optionLocator = modelOptionByIdLocator(modelId);
+
+  await waitUntil(
+    driver,
+    async () => {
+      const elements = await driver.findElements(optionLocator);
+
+      return elements.length > 0 && (await elements[0]?.isDisplayed()) === true;
+    },
+    `Timed out waiting for model option ${modelId}`
+  );
+  await driver.findElement(optionLocator).click();
+
+  await waitUntil(
+    driver,
+    async () => {
+      const dialogs = await driver.findElements(By.css(modelDialogSelector));
+
+      return dialogs.length === 0;
+    },
+    `Timed out waiting for model dialog to close after selecting ${modelId}`
+  );
+};
+
 const getSelectOptionsText = async (driver: WebDriver, ariaLabel: string): Promise<string> => {
   const result = await driver.executeScript((label: string) => {
     const select = [...document.querySelectorAll('select')].find(
@@ -1173,9 +1281,9 @@ const waitForModel = async (driver: WebDriver, text = 'Claude Sonnet 4'): Promis
   await waitUntil(
     driver,
     async () => {
-      const selectText = await getSelectText(driver, 'Model');
+      const triggerText = await getModelTriggerText(driver);
 
-      return selectText.includes(text);
+      return triggerText.includes(text);
     },
     `Timed out waiting for model ${text}`
   );
@@ -2256,8 +2364,8 @@ const scenarios: FirefoxScenario[] = [
           await session.openSidePanel();
           await seedFirefoxAuth(session.driver);
           await session.driver.navigate().refresh();
-          assert.equal(await isControlDisabled(session.driver, 'select[aria-label="Model"]'), true);
-          assert.match(await getSelectText(session.driver, 'Model'), /Loading models/u);
+          assert.equal(await isControlDisabled(session.driver, modelTriggerSelector), true);
+          assert.match(await getModelTriggerText(session.driver), /Loading models/u);
           assert.equal(
             await isControlDisabled(session.driver, 'select[aria-label="Thinking effort"]'),
             true
@@ -2267,10 +2375,7 @@ const scenarios: FirefoxScenario[] = [
 
           releaseModels();
           await waitForModel(session.driver);
-          assert.equal(
-            await isControlDisabled(session.driver, 'select[aria-label="Model"]'),
-            false
-          );
+          assert.equal(await isControlDisabled(session.driver, modelTriggerSelector), false);
           assert.equal(
             await isControlDisabled(session.driver, 'select[aria-label="Thinking effort"]'),
             false
@@ -2287,10 +2392,10 @@ const scenarios: FirefoxScenario[] = [
       withSession(context.api, { modelFailuresBeforeSuccess: 1 }, async session => {
         await openAuthenticatedPanel(session);
         await waitForText(session.driver, 'Could not load models.');
-        assert.equal(await isControlDisabled(session.driver, 'select[aria-label="Model"]'), true);
+        assert.equal(await isControlDisabled(session.driver, modelTriggerSelector), true);
         await clickButtonByText(session.driver, 'Retry models');
         await waitForModel(session.driver);
-        assert.equal(await isControlDisabled(session.driver, 'select[aria-label="Model"]'), false);
+        assert.equal(await isControlDisabled(session.driver, modelTriggerSelector), false);
       }),
   },
   {
@@ -2326,11 +2431,8 @@ const scenarios: FirefoxScenario[] = [
             await setSelectByValue(session.driver, 'Credit account', 'org-2');
             await orgTwoModelsRequested;
             await clickButtonByLabel(session.driver, 'Close settings');
-            assert.equal(
-              await isControlDisabled(session.driver, 'select[aria-label="Model"]'),
-              true
-            );
-            assert.match(await getSelectText(session.driver, 'Model'), /Loading models/u);
+            assert.equal(await isControlDisabled(session.driver, modelTriggerSelector), true);
+            assert.match(await getModelTriggerText(session.driver), /Loading models/u);
             assert.equal(await isControlDisabled(session.driver, 'button[type="submit"]'), true);
             releaseOrgTwoModels();
             await waitForModel(session.driver, 'Org Two Model');
@@ -2392,7 +2494,7 @@ const scenarios: FirefoxScenario[] = [
             await new Promise(resolve => {
               setTimeout(resolve, 250);
             });
-            assert.match(await getSelectText(session.driver, 'Model'), /Org Two Model/u);
+            assert.match(await getModelTriggerText(session.driver), /Org Two Model/u);
           } finally {
             releaseOrgOneModels();
           }
@@ -2759,6 +2861,57 @@ const scenarios: FirefoxScenario[] = [
         await closeFirefoxSettings(session.driver);
       }),
   },
+  {
+    name: 'model picker search filters and selects by model id',
+    run: context =>
+      withSession(context.api, {}, async session => {
+        const modelId = 'anthropic/claude-sonnet-4';
+
+        await openAuthenticatedPanel(session);
+        await waitForModel(session.driver);
+
+        await waitUntil(
+          session.driver,
+          async () => {
+            const elements = await session.driver.findElements(By.css(modelTriggerSelector));
+
+            return elements.length > 0 && (await elements[0]?.isEnabled()) === true;
+          },
+          'Timed out waiting for Model trigger to enable'
+        );
+
+        await session.driver.findElement(By.css(modelTriggerSelector)).click();
+
+        await waitUntil(
+          session.driver,
+          async () => {
+            const dialogs = await session.driver.findElements(By.css(modelDialogSelector));
+
+            return dialogs.length > 0 && (await dialogs[0]?.isDisplayed()) === true;
+          },
+          'Timed out waiting for model picker dialog'
+        );
+
+        const searchInput = await session.driver.findElement(
+          By.css(`${modelDialogSelector} input[aria-label="Search models"]`)
+        );
+        await searchInput.clear();
+        await searchInput.sendKeys('claude-sonnet');
+
+        await waitUntil(
+          session.driver,
+          async () => {
+            const options = await session.driver.findElements(modelOptionByIdLocator(modelId));
+
+            return options.length > 0 && (await options[0]?.isDisplayed()) === true;
+          },
+          `Timed out waiting for filtered model option ${modelId}`
+        );
+
+        await selectModelByIdFirefox(session.driver, modelId);
+        assert.equal(await getModelTriggerSelectedId(session.driver), modelId);
+      }),
+  },
 ];
 
 assert.deepStrictEqual(
diff --git a/apps/extension/tests/e2e/kilo-api-fixture.ts b/apps/extension/tests/e2e/kilo-api-fixture.ts
index 5e173b2055..fe398551d2 100644
--- a/apps/extension/tests/e2e/kilo-api-fixture.ts
+++ b/apps/extension/tests/e2e/kilo-api-fixture.ts
@@ -59,15 +59,27 @@ const dangerousToolNames = [
 ];
 interface MockGatewayModel {
   readonly contextLength?: number;
+  readonly hasUserByokAvailable?: boolean;
   readonly id: string;
+  readonly isFree?: boolean;
+  readonly mayTrainOnYourPrompts?: boolean;
   readonly name: string;
+  readonly preferredIndex?: number;
   readonly variants?: Record<string, unknown>;
 }
 
+const favoriteMutationBodySchema = z.object({
+  model: z.string().min(1),
+});
+
 type ChatAbortObserverWindow = typeof globalThis & {
   __kiloChatCompletionAborted?: boolean;
 };
 
+const defaultModelPreferencesMutationBody = {
+  result: { data: { success: true } },
+};
+
 export const mockKiloApi = async (
   context: BrowserContext,
   options: {
@@ -80,9 +92,15 @@ export const mockKiloApi = async (
     models?: MockGatewayModel[];
     modelNameByOrganizationId?: Record<string, string>;
     modelFailuresBeforeSuccess?: number;
+    modelPreferencesFavorites?: string[];
+    modelPreferencesGetFailuresBeforeSuccess?: number;
+    modelPreferencesGetStatus?: number;
+    modelPreferencesMutationFailuresBeforeSuccess?: number;
+    modelPreferencesMutationStatus?: number;
     organizations?: { id: string; name: string }[];
     secondCompletionEvents?: unknown[];
     seenChatBodies?: unknown[];
+    seenModelPreferencesGetUrls?: string[];
     toolNames?: string[];
     toolNamesByCall?: string[][];
     seenChatOrganizationIds?: string[];
@@ -92,6 +110,10 @@ export const mockKiloApi = async (
   let chatCompletionCalls = 0;
   let modelCalls = 0;
   const modelCallsByOrganizationId = new Map<string, number>();
+  const favorites = [...(options.modelPreferencesFavorites ?? [])];
+  let modelPreferencesGetFailuresRemaining = options.modelPreferencesGetFailuresBeforeSuccess ?? 0;
+  let modelPreferencesMutationFailuresRemaining =
+    options.modelPreferencesMutationFailuresBeforeSuccess ?? 0;
 
   await context.route('https://app.kilo.ai/api/user', route =>
     route.fulfill({
@@ -102,6 +124,98 @@ export const mockKiloApi = async (
   await context.route('https://app.kilo.ai/api/organizations', route =>
     route.fulfill({ json: { organizations: options.organizations ?? [] }, status: 200 })
   );
+  await context.route(
+    url =>
+      url.origin === 'https://app.kilo.ai' &&
+      url.pathname.startsWith('/api/trpc/modelPreferences.'),
+    async route => {
+      const requestUrl = route.request().url();
+      let pathname = '';
+
+      try {
+        ({ pathname } = new URL(requestUrl));
+      } catch {
+        await route.fulfill({ status: 404 });
+        return;
+      }
+
+      if (pathname.endsWith('/modelPreferences.get')) {
+        options.seenModelPreferencesGetUrls?.push(requestUrl);
+
+        if (options.modelPreferencesGetStatus !== undefined) {
+          await route.fulfill({ status: options.modelPreferencesGetStatus });
+          return;
+        }
+
+        if (modelPreferencesGetFailuresRemaining > 0) {
+          modelPreferencesGetFailuresRemaining -= 1;
+          await route.fulfill({ status: 500 });
+          return;
+        }
+
+        await route.fulfill({
+          json: {
+            result: {
+              data: {
+                favorites: [...favorites],
+                lastSelected: null,
+              },
+            },
+          },
+          status: 200,
+        });
+        return;
+      }
+
+      if (
+        pathname.endsWith('/modelPreferences.addFavorite') ||
+        pathname.endsWith('/modelPreferences.removeFavorite')
+      ) {
+        if (options.modelPreferencesMutationStatus !== undefined) {
+          await route.fulfill({ status: options.modelPreferencesMutationStatus });
+          return;
+        }
+
+        if (modelPreferencesMutationFailuresRemaining > 0) {
+          modelPreferencesMutationFailuresRemaining -= 1;
+          await route.fulfill({ status: 500 });
+          return;
+        }
+
+        let postData: unknown = null;
+
+        try {
+          postData = route.request().postDataJSON();
+        } catch {
+          postData = null;
+        }
+
+        const parsedBody = favoriteMutationBodySchema.safeParse(postData);
+
+        if (parsedBody.success) {
+          const modelId = parsedBody.data.model;
+          const isAdd = pathname.endsWith('/modelPreferences.addFavorite');
+          const favoriteIndex = favorites.indexOf(modelId);
+
+          if (isAdd && favoriteIndex === -1) {
+            favorites.push(modelId);
+          }
+
+          if (!isAdd && favoriteIndex !== -1) {
+            favorites.splice(favoriteIndex, 1);
+          }
+        }
+
+        await route.fulfill({
+          json: defaultModelPreferencesMutationBody,
+          status: 200,
+        });
+        return;
+      }
+
+      await route.fulfill({ status: 404 });
+    }
+  );
   await context.route('https://app.kilo.ai/api/gateway/models', async route => {
     modelCalls += 1;
     const organizationId = route.request().headers()['x-kilocode-organizationid'] ?? '';
@@ -131,19 +245,38 @@ export const mockKiloApi = async (
     ];
 
     const data = models.map((model, index) => {
+      const {
+        contextLength,
+        hasUserByokAvailable,
+        id,
+        isFree,
+        mayTrainOnYourPrompts,
+        name,
+        preferredIndex: explicitPreferredIndex,
+        variants,
+      } = model;
+      let preferredIndex = explicitPreferredIndex;
+
+      if (preferredIndex === undefined && index === 0) {
+        preferredIndex = 0;
+      }
+
       const item = {
-        id: model.id,
-        name: model.name,
-        opencode: { variants: model.variants ?? { high: {}, low: {}, medium: {} } },
-        ...(model.contextLength === undefined ? {} : { context_length: model.contextLength }),
+        id,
+        name,
+        opencode: { variants: variants ?? { high: {}, low: {}, medium: {} } },
+        ...(contextLength === undefined ? {} : { context_length: contextLength }),
+        ...(hasUserByokAvailable === undefined ? {} : { hasUserByokAvailable }),
+        ...(isFree === undefined ? {} : { isFree }),
+        ...(mayTrainOnYourPrompts === undefined ? {} : { mayTrainOnYourPrompts }),
+        ...(preferredIndex === undefined ? {} : { preferredIndex }),
       };
 
       return Object.assign(
         item,
         options.modelInputModalities === undefined
           ? {}
-          : { architecture: { input_modalities: options.modelInputModalities } },
-        index === 0 ? { preferredIndex: 0 } : {}
+          : { architecture: { input_modalities: options.modelInputModalities } }
       );
     });
 
diff --git a/apps/extension/tests/e2e/local-backend-live.test.ts b/apps/extension/tests/e2e/local-backend-live.test.ts
index 534fb9d679..11be426af0 100644
--- a/apps/extension/tests/e2e/local-backend-live.test.ts
+++ b/apps/extension/tests/e2e/local-backend-live.test.ts
@@ -4,6 +4,7 @@ import type { BrowserContext, Page, Request } from '@playwright/test';
 import { rm } from 'node:fs/promises';
 import { z } from 'zod';
 import { launchExtensionContext, startFixtureServer } from './extension-context-fixture';
+import { expectSelectedModelId, selectModelById } from './model-picker-e2e-helpers';
 
 const localBackendUrl = 'http://localhost:3000';
 const localUserEmail = 'fl@fl.fl';
@@ -212,9 +213,30 @@ const signInWithLocalDeviceAuth = async ({
 
   const authPage = await context.newPage();
   const callbackPath = `/device-auth?code=${encodeURIComponent(code)}&app=1`;
+  // Shared stack may run with APP_URL_OVERRIDE at a LAN IP.
+  // Cookies set off-origin make the post-login redirect silently drop authentication.
+  let authOrigin = localBackendUrl;
+
+  try {
+    const probe = await context.request.get(`${localBackendUrl}/users/after-sign-in`, {
+      maxRedirects: 0,
+    });
+    const { location } = probe.headers();
+
+    if (
+      probe.status() >= 300 &&
+      probe.status() < 400 &&
+      location !== undefined &&
+      location !== ''
+    ) {
+      authOrigin = new URL(location).origin;
+    }
+  } catch {
+    // Fall back to localBackendUrl on non-redirect, missing/invalid location, or request error.
+  }
 
   await authPage.goto(
-    `${localBackendUrl}/users/sign_in?fakeUser=${encodeURIComponent(localUserEmail)}&callbackPath=${encodeURIComponent(callbackPath)}`
+    `${authOrigin}/users/sign_in?fakeUser=${encodeURIComponent(localUserEmail)}&callbackPath=${encodeURIComponent(callbackPath)}`
   );
   await authPage.getByRole('button', { name: 'Authorize' }).click({ timeout: 60_000 });
   await expect(sidePanel.getByLabel('Message agent')).toBeVisible({ timeout: 30_000 });
@@ -222,20 +244,7 @@ const signInWithLocalDeviceAuth = async ({
 };
 
 const selectFrontierModel = async (sidePanel: Page): Promise<void> => {
-  await expect
-    .poll(
-      () =>
-        sidePanel
-          .getByLabel('Model')
-          .locator('option')
-          .evaluateAll(options =>
-            options.map(option => (option instanceof HTMLOptionElement ? option.value : ''))
-          ),
-      { timeout: 30_000 }
-    )
-    .toContain(frontierModel);
-
-  await sidePanel.getByLabel('Model').selectOption(frontierModel);
+  await selectModelById(sidePanel, frontierModel);
 
   const thinkingValues = await sidePanel
     .getByLabel('Thinking effort')
@@ -402,7 +411,7 @@ test('live local backend keeps frontier conversations stable across modes, reloa
 
     await sidePanel.getByLabel('New conversation').click();
     await expect(sidePanel.getByLabel(/Danger mode/u)).toBeVisible();
-    await expect(sidePanel.getByLabel('Model')).toHaveValue(frontierModel);
+    await expectSelectedModelId(sidePanel, frontierModel);
     await sidePanel.getByLabel(/Danger mode/u).click();
     await sidePanel.getByRole('button', { name: /^Safe/u }).click();
     await sidePanel.getByRole('tab').nth(0).click();
@@ -417,7 +426,7 @@ test('live local backend keeps frontier conversations stable across modes, reloa
 
     await sidePanel.reload();
     await expect(sidePanel.getByLabel('Message agent')).toBeVisible({ timeout: 30_000 });
-    await expect(sidePanel.getByLabel('Model')).toHaveValue(frontierModel);
+    await expectSelectedModelId(sidePanel, frontierModel);
     await expect(sidePanel.getByLabel(/Danger mode/u)).toBeVisible();
     await expect(
       getExtensionStorage(sidePanel, ['kiloAuth', 'kiloAgentConversations'])
@@ -720,7 +729,7 @@ test('live local backend recovers after side panel reload during an active reque
       sidePanel.getByLabel('Agent conversation').getByText('LOCAL_RELOAD_ABORT')
     ).toBeVisible();
     await expect(sidePanel.getByRole('button', { name: 'Send message' })).toBeVisible();
-    await expect(sidePanel.getByLabel('Model')).toHaveValue(frontierModel);
+    await expectSelectedModelId(sidePanel, frontierModel);
     await expect(
       getExtensionStorage(sidePanel, ['kiloAuth', 'kiloAgentConversations'])
     ).resolves.toHaveProperty('kiloAuth');
@@ -967,3 +976,124 @@ test('live local backend manual Compact now compacts a frontier conversation', a
     await rm(userDataDir, { force: true, recursive: true });
   }
 });
+
+const restoreFrontierFavoriteIfNeeded = async (
+  sidePanel: Page,
+  wasFavoriteBefore: 'unknown' | boolean
+): Promise<void> => {
+  // Only undo a starring we performed after observing prior state as non-favorite.
+  if (wasFavoriteBefore !== false) {
+    return;
+  }
+
+  // Best-effort: the panel may have crashed or closed after a test-level timeout.
+  // A throw here would mask the original failure and skip context cleanup in the caller.
+  try {
+    const dialog = sidePanel.locator(
+      '[role="dialog"][aria-modal="true"][aria-label="Select model"]'
+    );
+    const isOpen = (await dialog.count()) > 0;
+
+    if (!isOpen) {
+      const trigger = sidePanel.getByLabel('Model');
+      const canOpen = await trigger.isEnabled().catch(() => false);
+
+      if (!canOpen) {
+        return;
+      }
+
+      await trigger.click().catch(() => null);
+      await dialog.waitFor({ state: 'visible', timeout: 30_000 }).catch(() => null);
+    }
+
+    if ((await dialog.count()) === 0) {
+      return;
+    }
+
+    const frontierRow = dialog.locator(`button[data-model-id="${frontierModel}"]`);
+    const frontierName = (await frontierRow.getAttribute('aria-label').catch(() => null)) ?? '';
+
+    if (frontierName.length === 0) {
+      return;
+    }
+
+    const removeStar = dialog.getByLabel(`Remove ${frontierName} from favorites`);
+
+    if ((await removeStar.count()) === 0) {
+      return;
+    }
+
+    await removeStar.click().catch(() => null);
+    await expect(dialog.getByLabel(`Add ${frontierName} to favorites`))
+      .toBeVisible({ timeout: 30_000 })
+      .catch(() => null);
+  } catch {
+    // Restore is best-effort; the original test outcome stands.
+  }
+};
+
+test('live local backend personal favorites round-trip for frontier', async () => {
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+  const sidePanel = await context.newPage();
+  // Tri-state prior: never default to "not favorite"; restore only when observed false.
+  let wasFavoriteBefore: 'unknown' | boolean = 'unknown';
+
+  try {
+    await signInWithLocalDeviceAuth({ context, extensionId, sidePanel });
+    await expect(sidePanel.getByLabel('Model')).toBeEnabled({ timeout: 30_000 });
+
+    await sidePanel.getByLabel('Model').click();
+    const dialog = sidePanel.locator(
+      '[role="dialog"][aria-modal="true"][aria-label="Select model"]'
+    );
+    await expect(dialog).toBeVisible({ timeout: 30_000 });
+
+    const frontierRow = dialog.locator(`button[data-model-id="${frontierModel}"]`);
+    await expect(frontierRow).toBeVisible({ timeout: 30_000 });
+
+    const frontierName = (await frontierRow.getAttribute('aria-label')) ?? '';
+    expect(frontierName.length).toBeGreaterThan(0);
+
+    const addLabel = `Add ${frontierName} to favorites`;
+    const removeLabel = `Remove ${frontierName} from favorites`;
+    const removeStar = dialog.getByLabel(removeLabel);
+    const addStar = dialog.getByLabel(addLabel);
+
+    // Sample prior only when preferences are ready: star enabled and no retryable banner.
+    // Stars also enable in retryable (empty in-memory set + "Couldn't load favorites.").
+    const favoritesBanner = dialog.getByText("Couldn't load favorites.");
+    await expect(addStar.or(removeStar)).toBeEnabled({ timeout: 60_000 });
+    await expect(favoritesBanner).toHaveCount(0, { timeout: 60_000 });
+
+    wasFavoriteBefore = (await removeStar.count()) > 0;
+
+    if (wasFavoriteBefore) {
+      await expect(removeStar).toHaveAttribute('aria-pressed', 'true');
+    } else {
+      await expect(addStar).toBeVisible();
+      await addStar.click();
+      await expect(dialog.getByLabel(removeLabel)).toHaveAttribute('aria-pressed', 'true', {
+        timeout: 30_000,
+      });
+    }
+
+    await sidePanel.getByLabel('Close model picker').click();
+    await expect(dialog).toHaveCount(0);
+
+    await sidePanel.reload();
+    await expect(sidePanel.getByLabel('Model')).toBeEnabled({ timeout: 30_000 });
+    await sidePanel.getByLabel('Model').click();
+    await expect(dialog).toBeVisible({ timeout: 30_000 });
+    await expect(dialog.locator(`button[data-model-id="${frontierModel}"]`)).toBeVisible({
+      timeout: 30_000,
+    });
+    await expect(dialog.getByLabel(removeLabel)).toHaveAttribute('aria-pressed', 'true', {
+      timeout: 30_000,
+    });
+    await expect(dialog.locator('p.type-eyebrow', { hasText: /^FAVORITES$/u })).toBeVisible();
+  } finally {
+    await restoreFrontierFavoriteIfNeeded(sidePanel, wasFavoriteBefore);
+    await context.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+});
diff --git a/apps/extension/tests/e2e/model-picker-e2e-helpers.ts b/apps/extension/tests/e2e/model-picker-e2e-helpers.ts
new file mode 100644
index 0000000000..0c96a4853d
--- /dev/null
+++ b/apps/extension/tests/e2e/model-picker-e2e-helpers.ts
@@ -0,0 +1,20 @@
+import { expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
+
+const modelDialog = (sidePanel: Page) =>
+  sidePanel.locator('[role="dialog"][aria-modal="true"][aria-label="Select model"]');
+
+export const selectModelById = async (sidePanel: Page, modelId: string): Promise<void> => {
+  await sidePanel.getByLabel('Model').click();
+
+  const dialog = modelDialog(sidePanel);
+  const option = dialog.locator(`button[data-model-id="${modelId}"]`);
+
+  await expect(option).toBeVisible({ timeout: 30_000 });
+  await option.click();
+  await expect(dialog).toHaveCount(0);
+};
+
+export const expectSelectedModelId = async (sidePanel: Page, modelId: string): Promise<void> => {
+  await expect(sidePanel.getByLabel('Model')).toHaveAttribute('data-model-id', modelId);
+};
diff --git a/apps/extension/tests/e2e/model-picker.test.ts b/apps/extension/tests/e2e/model-picker.test.ts
new file mode 100644
index 0000000000..abff067ca4
--- /dev/null
+++ b/apps/extension/tests/e2e/model-picker.test.ts
@@ -0,0 +1,429 @@
+/* eslint-disable import/no-nodejs-modules, jest/no-conditional-in-test, max-lines */
+import { expect, test } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
+import { rm } from 'node:fs/promises';
+import {
+  launchExtensionContext,
+  seedExtensionAuth,
+  startFixtureServer,
+} from './extension-context-fixture';
+import { mockKiloApi } from './kilo-api-fixture';
+import { expectSelectedModelId, selectModelById } from './model-picker-e2e-helpers';
+
+const orgOneId = 'org-1';
+
+const defaultVariants = { high: {}, low: {}, medium: {} } as const;
+
+const catalogModels = [
+  {
+    id: 'preferred/alpha',
+    isFree: true,
+    name: 'Provider: Preferred Alpha',
+    preferredIndex: 0,
+    variants: defaultVariants,
+  },
+  {
+    hasUserByokAvailable: true,
+    id: 'byok/beta',
+    name: 'Provider: Byok Beta',
+    variants: defaultVariants,
+  },
+  {
+    id: 'train/gamma',
+    mayTrainOnYourPrompts: true,
+    name: 'Provider: Train Gamma',
+    variants: defaultVariants,
+  },
+  {
+    id: 'plain/delta',
+    name: 'Provider: Plain Delta',
+    variants: defaultVariants,
+  },
+] as const;
+
+const modelDialog = (sidePanel: Page): Locator =>
+  sidePanel.locator('[role="dialog"][aria-modal="true"][aria-label="Select model"]');
+
+const openModelPicker = async (sidePanel: Page): Promise<Locator> => {
+  await sidePanel.getByLabel('Model').click();
+  const dialog = modelDialog(sidePanel);
+  await expect(dialog).toBeVisible();
+  return dialog;
+};
+
+const closeModelPicker = async (sidePanel: Page): Promise<void> => {
+  await sidePanel.getByLabel('Close model picker').click();
+  await expect(modelDialog(sidePanel)).toHaveCount(0);
+};
+
+const sectionHeadersInOrder = async (dialog: Locator): Promise<string[]> => {
+  const titles = await dialog.locator('p.type-eyebrow').allTextContents();
+  return titles.map(title => title.trim());
+};
+
+const sectionHeader = (dialog: Locator, title: string): Locator =>
+  dialog.locator('p.type-eyebrow', { hasText: new RegExp(`^${title}$`, 'u') });
+
+/** Nearest preceding `p.type-eyebrow` section title for a model row, or null if absent. */
+const sectionTitleForModel = (dialog: Locator, modelId: string): Promise<string | null> =>
+  dialog.evaluate((root, id) => {
+    const row = root.querySelector(`[data-model-row="${CSS.escape(id)}"]`);
+
+    if (!row) {
+      return null;
+    }
+
+    // Rows are wrapped in a keyed div; headers and wrappers are siblings in the list.
+    let sibling: Element | null = row.parentElement?.previousElementSibling ?? null;
+
+    while (sibling) {
+      if (sibling.matches('p.type-eyebrow')) {
+        return sibling.textContent?.trim() ?? null;
+      }
+
+      sibling = sibling.previousElementSibling;
+    }
+
+    return null;
+  }, modelId);
+
+const withSidePanel = async (
+  run: (sidePanel: Page) => Promise<void>,
+  mockOptions: Parameters<typeof mockKiloApi>[1] = {}
+): Promise<void> => {
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+
+  try {
+    await mockKiloApi(context, mockOptions);
+    const sidePanel = await context.newPage();
+    await sidePanel.goto(`chrome-extension://${extensionId}/sidepanel.html`);
+    await seedExtensionAuth(sidePanel);
+    await sidePanel.reload();
+    await run(sidePanel);
+  } finally {
+    await context.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+};
+
+test('happy path selects a model and marks it current on reopen', async () => {
+  await withSidePanel(
+    async sidePanel => {
+      await expect(sidePanel.getByLabel('Model')).toBeEnabled();
+
+      const dialog = await openModelPicker(sidePanel);
+      await expect(sectionHeader(dialog, 'RECOMMENDED')).toBeVisible();
+      await expect(sectionHeader(dialog, 'ALL MODELS')).toBeVisible();
+      expect(await sectionHeadersInOrder(dialog)).toStrictEqual(['RECOMMENDED', 'ALL MODELS']);
+
+      await closeModelPicker(sidePanel);
+      await selectModelById(sidePanel, 'plain/delta');
+      await expectSelectedModelId(sidePanel, 'plain/delta');
+
+      const reopened = await openModelPicker(sidePanel);
+      await expect(reopened.locator('button[data-model-id="plain/delta"]')).toHaveAttribute(
+        'aria-current',
+        'true'
+      );
+    },
+    { models: [...catalogModels] }
+  );
+});
+
+test('row chrome shows Free, BYOK, and Data collected markers', async () => {
+  await withSidePanel(
+    async sidePanel => {
+      const dialog = await openModelPicker(sidePanel);
+
+      const freeRow = dialog.locator('[data-model-row="preferred/alpha"]');
+      await expect(freeRow.getByText('Free', { exact: true })).toBeVisible();
+      await expect(freeRow.getByText('BYOK', { exact: true })).toHaveCount(0);
+
+      const byokRow = dialog.locator('[data-model-row="byok/beta"]');
+      await expect(byokRow.getByText('BYOK', { exact: true })).toBeVisible();
+      await expect(byokRow.getByText('Free', { exact: true })).toHaveCount(0);
+
+      const trainRow = dialog.locator('[data-model-row="train/gamma"]');
+      await expect(trainRow.getByRole('img', { name: 'Data collected' })).toBeVisible();
+    },
+    { models: [...catalogModels] }
+  );
+});
+
+test('search filters by name and id case-insensitively', async () => {
+  await withSidePanel(
+    async sidePanel => {
+      const dialog = await openModelPicker(sidePanel);
+      const search = dialog.getByLabel('Search models');
+
+      await search.fill('PLAIN DELTA');
+      await expect(dialog.locator('button[data-model-id="plain/delta"]')).toBeVisible();
+      await expect(dialog.locator('button[data-model-id="preferred/alpha"]')).toHaveCount(0);
+      await expect(dialog.locator('button[data-model-id="byok/beta"]')).toHaveCount(0);
+      expect(await sectionHeadersInOrder(dialog)).toStrictEqual(['ALL MODELS']);
+
+      await search.fill('TRAIN/GAMMA');
+      await expect(dialog.locator('button[data-model-id="train/gamma"]')).toBeVisible();
+      await expect(dialog.locator('button[data-model-id="plain/delta"]')).toHaveCount(0);
+      expect(await sectionHeadersInOrder(dialog)).toStrictEqual(['ALL MODELS']);
+
+      await search.fill('preferred');
+      await expect(dialog.locator('button[data-model-id="preferred/alpha"]')).toBeVisible();
+      expect(await sectionHeadersInOrder(dialog)).toStrictEqual(['RECOMMENDED']);
+    },
+    { models: [...catalogModels] }
+  );
+});
+
+test('no-match empty state clears search and restores rows', async () => {
+  await withSidePanel(
+    async sidePanel => {
+      const dialog = await openModelPicker(sidePanel);
+      const search = dialog.getByLabel('Search models');
+      const query = 'zzzz-no-such-model';
+
+      await search.fill(query);
+      await expect(dialog.getByText(`No models match "${query}".`)).toBeVisible();
+      await expect(dialog.getByRole('button', { name: 'Clear search' })).toBeVisible();
+      await expect(dialog.locator('button[data-model-id]')).toHaveCount(0);
+
+      await dialog.getByRole('button', { name: 'Clear search' }).click();
+      await expect(search).toHaveValue('');
+      await expect(dialog.locator('button[data-model-id="preferred/alpha"]')).toBeVisible();
+      await expect(dialog.locator('button[data-model-id="plain/delta"]')).toBeVisible();
+      await expect(dialog.getByText(`No models match "${query}".`)).toHaveCount(0);
+    },
+    { models: [...catalogModels] }
+  );
+});
+
+test('favorites toggle is stateful across overlay close and reopen', async () => {
+  await withSidePanel(
+    async sidePanel => {
+      const dialog = await openModelPicker(sidePanel);
+      await expect(sectionHeader(dialog, 'FAVORITES')).toHaveCount(0);
+      expect(await sectionTitleForModel(dialog, 'plain/delta')).toBe('ALL MODELS');
+
+      const star = dialog.getByLabel('Add Plain Delta to favorites');
+      await expect(star).toBeEnabled();
+      await expect(star).toHaveAttribute('aria-pressed', 'false');
+      await star.click();
+
+      await expect(sectionHeader(dialog, 'FAVORITES')).toBeVisible();
+      await expect(dialog.getByLabel('Remove Plain Delta from favorites')).toHaveAttribute(
+        'aria-pressed',
+        'true'
+      );
+      expect(await sectionHeadersInOrder(dialog)).toStrictEqual([
+        'FAVORITES',
+        'RECOMMENDED',
+        'ALL MODELS',
+      ]);
+      // Placement: starred row moves under FAVORITES and leaves ALL MODELS.
+      await expect(dialog.locator('[data-model-row="plain/delta"]')).toHaveCount(1);
+      expect(await sectionTitleForModel(dialog, 'plain/delta')).toBe('FAVORITES');
+
+      await closeModelPicker(sidePanel);
+
+      const reopened = await openModelPicker(sidePanel);
+      await expect(sectionHeader(reopened, 'FAVORITES')).toBeVisible();
+      await expect(reopened.getByLabel('Remove Plain Delta from favorites')).toHaveAttribute(
+        'aria-pressed',
+        'true'
+      );
+      await expect(reopened.locator('[data-model-row="plain/delta"]')).toHaveCount(1);
+      expect(await sectionTitleForModel(reopened, 'plain/delta')).toBe('FAVORITES');
+
+      await reopened.getByLabel('Remove Plain Delta from favorites').click();
+      await expect(sectionHeader(reopened, 'FAVORITES')).toHaveCount(0);
+      await expect(reopened.getByLabel('Add Plain Delta to favorites')).toHaveAttribute(
+        'aria-pressed',
+        'false'
+      );
+      expect(await sectionTitleForModel(reopened, 'plain/delta')).toBe('ALL MODELS');
+    },
+    { models: [...catalogModels] }
+  );
+});
+
+test('retryable favorites load failure shows Retry and keeps selection working', async () => {
+  await withSidePanel(
+    async sidePanel => {
+      const dialog = await openModelPicker(sidePanel);
+      await expect(dialog.getByText("Couldn't load favorites.")).toBeVisible();
+      await expect(dialog.getByRole('button', { name: 'Retry' })).toBeVisible();
+      await expect(dialog.locator('button[data-model-id="plain/delta"]')).toBeVisible();
+
+      await closeModelPicker(sidePanel);
+      await selectModelById(sidePanel, 'plain/delta');
+      await expectSelectedModelId(sidePanel, 'plain/delta');
+
+      const reopened = await openModelPicker(sidePanel);
+      await expect(reopened.getByText("Couldn't load favorites.")).toBeVisible();
+      await reopened.getByRole('button', { name: 'Retry' }).click();
+      await expect(reopened.getByText("Couldn't load favorites.")).toHaveCount(0);
+      await expect(reopened.getByRole('button', { name: 'Retry' })).toHaveCount(0);
+      await expect(reopened.getByLabel('Add Plain Delta to favorites')).toBeVisible();
+    },
+    {
+      modelPreferencesGetFailuresBeforeSuccess: 1,
+      models: [...catalogModels],
+    }
+  );
+});
+
+test('terminal favorites forbidden hides stars and has no Retry', async () => {
+  await withSidePanel(
+    async sidePanel => {
+      const dialog = await openModelPicker(sidePanel);
+      await expect(dialog.getByText("Favorites aren't available here.")).toBeVisible();
+      await expect(dialog.getByRole('button', { name: 'Retry' })).toHaveCount(0);
+      await expect(dialog.locator('button[aria-pressed]')).toHaveCount(0);
+
+      await closeModelPicker(sidePanel);
+      await selectModelById(sidePanel, 'byok/beta');
+      await expectSelectedModelId(sidePanel, 'byok/beta');
+    },
+    {
+      modelPreferencesGetStatus: 403,
+      models: [...catalogModels],
+    }
+  );
+});
+
+test('favorite toggle failure rolls back and succeeds on retry', async () => {
+  await withSidePanel(
+    async sidePanel => {
+      const dialog = await openModelPicker(sidePanel);
+      const star = dialog.getByLabel('Add Plain Delta to favorites');
+      await expect(star).toBeEnabled();
+      await star.click();
+
+      await expect(dialog.getByText("Couldn't update favorites.")).toBeVisible();
+      await expect(sectionHeader(dialog, 'FAVORITES')).toHaveCount(0);
+      await expect(dialog.getByLabel('Add Plain Delta to favorites')).toHaveAttribute(
+        'aria-pressed',
+        'false'
+      );
+
+      await dialog.getByLabel('Add Plain Delta to favorites').click();
+      await expect(dialog.getByText("Couldn't update favorites.")).toHaveCount(0);
+      await expect(sectionHeader(dialog, 'FAVORITES')).toBeVisible();
+      await expect(dialog.getByLabel('Remove Plain Delta from favorites')).toHaveAttribute(
+        'aria-pressed',
+        'true'
+      );
+    },
+    {
+      modelPreferencesMutationFailuresBeforeSuccess: 1,
+      models: [...catalogModels],
+    }
+  );
+});
+
+test('empty catalog keeps the trigger disabled and the dialog closed', async () => {
+  await withSidePanel(
+    async sidePanel => {
+      const trigger = sidePanel.getByLabel('Model');
+      await expect(trigger).toBeDisabled();
+      await expect(trigger).toContainText('Loading models...');
+
+      await trigger.click({ force: true });
+      await expect(modelDialog(sidePanel)).toHaveCount(0);
+    },
+    { models: [] }
+  );
+});
+
+test('model preferences get omits input until an organization is selected', async () => {
+  const seenModelPreferencesGetUrls: string[] = [];
+  const fixture = await startFixtureServer();
+  const { context, extensionId, userDataDir } = await launchExtensionContext();
+
+  try {
+    await mockKiloApi(context, {
+      models: [...catalogModels],
+      organizations: [{ id: orgOneId, name: 'Acme' }],
+      seenModelPreferencesGetUrls,
+    });
+
+    const page = await context.newPage();
+    await page.goto(fixture.url);
+
+    const sidePanel = await context.newPage();
+    await sidePanel.goto(`chrome-extension://${extensionId}/sidepanel.html`);
+    await seedExtensionAuth(sidePanel);
+    await sidePanel.reload();
+
+    await expect(sidePanel.getByLabel('Model')).toBeEnabled();
+    await expect.poll(() => seenModelPreferencesGetUrls.length).toBeGreaterThan(0);
+
+    const personalUrls = [...seenModelPreferencesGetUrls];
+    for (const url of personalUrls) {
+      expect(new URL(url).searchParams.has('input')).toBe(false);
+    }
+
+    const urlsBeforeOrg = seenModelPreferencesGetUrls.length;
+    await sidePanel.getByLabel('Settings').click();
+    await sidePanel.getByLabel('Credit account').selectOption(orgOneId);
+    await sidePanel.getByLabel('Close settings').click();
+
+    await expect.poll(() => seenModelPreferencesGetUrls.length).toBeGreaterThan(urlsBeforeOrg);
+
+    const orgEncodedInput = encodeURIComponent(JSON.stringify({ organizationId: orgOneId }));
+    const orgUrls = seenModelPreferencesGetUrls.slice(urlsBeforeOrg);
+    expect(orgUrls.some(url => url.includes(`input=${orgEncodedInput}`))).toBe(true);
+  } finally {
+    await context.close();
+    await fixture.close();
+    await rm(userDataDir, { force: true, recursive: true });
+  }
+});
+
+test('selected model near the end of a long catalog scrolls into view on open', async () => {
+  const longCatalog = Array.from({ length: 60 }, (_slot, index) => {
+    const ordinal = String(index + 1).padStart(2, '0');
+
+    return {
+      id: `long/model-${ordinal}`,
+      name: `Provider: Long Model ${ordinal}`,
+      variants: defaultVariants,
+      ...(index === 0 ? { preferredIndex: 0 } : {}),
+    };
+  });
+  const targetId = 'long/model-55';
+
+  await withSidePanel(
+    async sidePanel => {
+      await selectModelById(sidePanel, targetId);
+      await expectSelectedModelId(sidePanel, targetId);
+
+      const dialog = await openModelPicker(sidePanel);
+      const selected = dialog.locator('button[aria-current="true"][data-model-id]');
+      await expect(selected).toHaveAttribute('data-model-id', targetId);
+
+      const isInView = await selected.evaluate((row, dialogLabel) => {
+        const dialogElement = document.querySelector(
+          `[role="dialog"][aria-modal="true"][aria-label="${dialogLabel}"]`
+        );
+
+        if (!(dialogElement instanceof HTMLElement) || !(row instanceof HTMLElement)) {
+          return false;
+        }
+
+        const rowBox = row.getBoundingClientRect();
+        const dialogBox = dialogElement.getBoundingClientRect();
+
+        return (
+          rowBox.top >= dialogBox.top - 1 &&
+          rowBox.bottom <= dialogBox.bottom + 1 &&
+          rowBox.left >= dialogBox.left - 1 &&
+          rowBox.right <= dialogBox.right + 1
+        );
+      }, 'Select model');
+
+      expect(isInView).toBe(true);
+    },
+    { models: longCatalog }
+  );
+});