fix: use live copilot model availability

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/components/AgentConfigFields.tsx

@@ -13,6 +13,10 @@ import { reasoningEffortOptions, type ReasoningEffort } from '@shared/domain/pat
 import { ProviderIcon } from './ProviderIcons';
 
 function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
+  if (!tier) {
+    return null;
+  }
+
   const styles = {
     premium: 'bg-amber-500/10 text-amber-400',
     standard: 'bg-zinc-700/50 text-zinc-500',
@@ -29,6 +33,7 @@ function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
 interface ModelSelectProps {
   value: string;
   onChange: (model: string) => void;
+  models?: ReadonlyArray<ModelDefinition>;
   label?: string;
   disabled?: boolean;
 }
@@ -36,6 +41,7 @@ interface ModelSelectProps {
 export function ModelSelect({
   value,
   onChange,
+  models = modelCatalog,
   label = 'Model',
   disabled = false,
 }: ModelSelectProps) {
@@ -57,8 +63,15 @@ export function ModelSelect({
     return () => document.removeEventListener('mousedown', handleClick);
   }, [open]);
 
-  const selected = findModel(value);
+  const selected = findModel(value, models);
   const provider = selected?.provider ?? inferProvider(value);
+  const groupedModels = providerMeta
+    .map((providerGroup) => ({
+      ...providerGroup,
+      models: models.filter((model) => model.provider === providerGroup.id),
+    }))
+    .filter((providerGroup) => providerGroup.models.length > 0);
+  const otherModels = models.filter((model) => !model.provider);
 
   return (
     <label className="block space-y-1.5">
@@ -79,9 +92,7 @@ export function ModelSelect({
 
         {open && !disabled && (
           <div className="absolute z-30 mt-1 max-h-72 w-full overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
-            {providerMeta.map((providerGroup) => {
-              const models = modelCatalog.filter((model) => model.provider === providerGroup.id);
-
+            {groupedModels.map((providerGroup) => {
               return (
                 <div key={providerGroup.id}>
                   <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
@@ -90,7 +101,7 @@ export function ModelSelect({
                       {providerGroup.label}
                     </span>
                   </div>
-                  {models.map((model) => (
+                  {providerGroup.models.map((model) => (
                     <button
                       className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
                         model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
@@ -109,6 +120,29 @@ export function ModelSelect({
                 </div>
               );
             })}
+            {otherModels.length > 0 && (
+              <div>
+                <div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                  Other
+                </div>
+                {otherModels.map((model) => (
+                  <button
+                    className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
+                      model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                    }`}
+                    key={model.id}
+                    onClick={() => {
+                      onChange(model.id);
+                      setOpen(false);
+                    }}
+                    type="button"
+                  >
+                    <span className="flex-1">{model.name}</span>
+                    <TierBadge tier={model.tier} />
+                  </button>
+                ))}
+              </div>
+            )}
           </div>
         )}
       </div>
@@ -117,8 +151,9 @@ export function ModelSelect({
 }
 
 interface ReasoningEffortSelectProps {
-  value: ReasoningEffort;
+  value?: ReasoningEffort;
   onChange: (value: ReasoningEffort) => void;
+  supportedEfforts?: ReadonlyArray<ReasoningEffort>;
   label?: string;
   disabled?: boolean;
 }
@@ -126,20 +161,43 @@ interface ReasoningEffortSelectProps {
 export function ReasoningEffortSelect({
   value,
   onChange,
+  supportedEfforts,
   label = 'Reasoning',
   disabled = false,
 }: ReasoningEffortSelectProps) {
+  const options = supportedEfforts
+    ? reasoningEffortOptions.filter((option) => supportedEfforts.includes(option.value))
+    : [...reasoningEffortOptions];
+  const selectedValue = value && options.some((option) => option.value === value) ? value : options[0]?.value;
+
+  if (supportedEfforts && supportedEfforts.length === 0) {
+    return (
+      <label className="block space-y-1.5">
+        <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+        <div className="relative">
+          <input
+            className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 pr-9 text-[13px] text-zinc-500 outline-none"
+            disabled
+            readOnly
+            value="Not supported for this model"
+          />
+          <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-zinc-600" />
+        </div>
+      </label>
+    );
+  }
+
   return (
     <label className="block space-y-1.5">
       <span className="text-[12px] font-medium text-zinc-400">{label}</span>
       <div className="relative">
         <select
           className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 pr-9 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50 disabled:cursor-not-allowed disabled:opacity-60"
-          disabled={disabled}
+          disabled={disabled || !selectedValue}
           onChange={(event) => onChange(event.target.value as ReasoningEffort)}
-          value={value}
+          value={selectedValue}
         >
-          {reasoningEffortOptions.map((option) => (
+          {options.map((option) => (
             <option key={option.value} value={option.value}>
               {option.label}
             </option>

src/renderer/components/ChatPane.tsx

@@ -1,13 +1,16 @@
 import { type KeyboardEvent, useEffect, useRef, useState } from 'react';
-import { AlertCircle, ArrowUp, Bot, ChevronDown, Loader2, Sparkles, User } from 'lucide-react';
+import { AlertCircle, ArrowUp, Bot, Loader2, User } from 'lucide-react';
 
+import { ModelSelect, ReasoningEffortSelect } from '@renderer/components/AgentConfigFields';
 import { MarkdownContent } from '@renderer/components/MarkdownContent';
 import { getAssistantMessagePhase } from '@renderer/lib/messagePhase';
-import { ProviderIcon } from '@renderer/components/ProviderIcons';
-
-import { findModel, inferProvider, modelCatalog, providerMeta, type ModelDefinition } from '@shared/domain/models';
+import {
+  findModel,
+  getSupportedReasoningEfforts,
+  resolveReasoningEffort,
+  type ModelDefinition,
+} from '@shared/domain/models';
 import type { PatternDefinition, ReasoningEffort } from '@shared/domain/pattern';
-import { reasoningEffortOptions } from '@shared/domain/pattern';
 import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
 import type { SessionRecord } from '@shared/domain/session';
 
@@ -21,171 +24,15 @@ function ThinkingDots() {
   );
 }
 
-/* ── Tier badge for model dropdown ─────────────────────────── */
-
-function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
-  const styles = {
-    premium: 'bg-amber-500/10 text-amber-400',
-    standard: 'bg-zinc-700/50 text-zinc-500',
-    fast: 'bg-emerald-500/10 text-emerald-400',
-  };
-  return (
-    <span className={`ml-auto rounded px-1.5 py-0.5 text-[9px] font-medium ${styles[tier]}`}>
-      {tier}
-    </span>
-  );
-}
-
-/* ── Inline model pill with dropdown ───────────────────────── */
-
-function InlineModelPill({
-  value,
-  onChange,
-  disabled,
-}: {
-  value: string;
-  onChange: (model: string) => void;
-  disabled: boolean;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  const selected = findModel(value);
-  const provider = selected?.provider ?? inferProvider(value);
-  const displayName = selected?.name ?? value ?? 'Model';
-
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
-          open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
-            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
-        } disabled:cursor-not-allowed disabled:opacity-50`}
-        disabled={disabled}
-        onClick={() => setOpen(!open)}
-        type="button"
-      >
-        {provider && <ProviderIcon provider={provider} className="size-3" />}
-        <span className="max-w-[140px] truncate">{displayName}</span>
-        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
-      </button>
-
-      {open && !disabled && (
-        <div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-72 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
-          {providerMeta.map((pg) => {
-            const models = modelCatalog.filter((m) => m.provider === pg.id);
-            return (
-              <div key={pg.id}>
-                <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
-                  <ProviderIcon provider={pg.id} className="size-3.5" />
-                  <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
-                    {pg.label}
-                  </span>
-                </div>
-                {models.map((model) => (
-                  <button
-                    className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                      model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
-                    }`}
-                    key={model.id}
-                    onClick={() => { onChange(model.id); setOpen(false); }}
-                    type="button"
-                  >
-                    <span className="flex-1">{model.name}</span>
-                    <TierBadge tier={model.tier} />
-                  </button>
-                ))}
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── Inline thinking effort pill with dropdown ─────────────── */
-
-function InlineThinkingPill({
-  value,
-  onChange,
-  disabled,
-}: {
-  value: ReasoningEffort;
-  onChange: (effort: ReasoningEffort) => void;
-  disabled: boolean;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  const currentLabel = reasoningEffortOptions.find((o) => o.value === value)?.label ?? value;
-
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
-          open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
-            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
-        } disabled:cursor-not-allowed disabled:opacity-50`}
-        disabled={disabled}
-        onClick={() => setOpen(!open)}
-        type="button"
-      >
-        <Sparkles className="size-3" />
-        <span>{currentLabel}</span>
-        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
-      </button>
-
-      {open && !disabled && (
-        <div className="absolute bottom-full left-0 z-40 mb-1.5 w-36 overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
-          {reasoningEffortOptions.map((option) => (
-            <button
-              className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                option.value === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
-              }`}
-              key={option.value}
-              onClick={() => { onChange(option.value); setOpen(false); }}
-              type="button"
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── ChatPane ──────────────────────────────────────────────── */
-
 interface ChatPaneProps {
   project: ProjectRecord;
   pattern: PatternDefinition;
   session: SessionRecord;
+  availableModels: ReadonlyArray<ModelDefinition>;
   onSend: (content: string) => Promise<void>;
   onUpdateScratchpadConfig?: (config: {
     model: string;
-    reasoningEffort: ReasoningEffort;
+    reasoningEffort?: ReasoningEffort;
   }) => Promise<unknown>;
 }
 
@@ -193,6 +40,7 @@ export function ChatPane({
   project,
   pattern,
   session,
+  availableModels,
   onSend,
   onUpdateScratchpadConfig,
 }: ChatPaneProps) {
@@ -205,7 +53,9 @@ export function ChatPane({
   const isSessionBusy = session.status === 'running';
   const isScratchpad = isScratchpadProject(project);
   const primaryAgent = pattern.agents[0];
-  const scratchpadReasoningEffort = primaryAgent?.reasoningEffort ?? 'high';
+  const selectedModel = primaryAgent ? findModel(primaryAgent.model, availableModels) : undefined;
+  const supportedEfforts = getSupportedReasoningEfforts(selectedModel);
+  const scratchpadReasoningEffort = resolveReasoningEffort(selectedModel, primaryAgent?.reasoningEffort);
   const isComposerDisabled = isSessionBusy || isUpdatingScratchpadConfig;
 
   useEffect(() => {
@@ -229,13 +79,16 @@ export function ChatPane({
 
   async function handleScratchpadConfigChange(config: {
     model: string;
-    reasoningEffort: ReasoningEffort;
+    reasoningEffort?: ReasoningEffort;
   }) {
     if (!isScratchpad || !primaryAgent || isComposerDisabled || !onUpdateScratchpadConfig) {
       return;
     }
 
-    if (config.model === primaryAgent.model && config.reasoningEffort === scratchpadReasoningEffort) {
+    if (
+      config.model === primaryAgent.model &&
+      config.reasoningEffort === scratchpadReasoningEffort
+    ) {
       return;
     }
 
@@ -251,16 +104,15 @@ export function ChatPane({
     }
   }
 
-  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
+  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
       void handleSubmit();
     }
   }
 
   return (
     <div className="flex h-full flex-col">
-      {/* Header — extra top padding clears the title bar overlay zone */}
       <header className="flex items-center justify-between border-b border-[var(--color-border)] px-6 pb-3 pt-12">
         <div className="min-w-0">
           <h2 className="truncate text-sm font-semibold text-zinc-100">{session.title}</h2>
@@ -269,9 +121,7 @@ export function ChatPane({
           </p>
         </div>
         <div className="flex items-center gap-2">
-          {isSessionBusy && (
-            <span className="size-2 animate-pulse rounded-full bg-blue-400" />
-          )}
+          {isSessionBusy && <span className="size-2 animate-pulse rounded-full bg-blue-400" />}
           {session.status === 'error' && (
             <div className="flex items-center gap-1.5 text-[12px] text-red-400">
               <AlertCircle className="size-3.5" />
@@ -286,14 +136,11 @@ export function ChatPane({
         </div>
       </header>
 
-      {/* Messages */}
       <div className="flex-1 overflow-y-auto" ref={transcriptRef}>
         {session.messages.length === 0 ? (
           <div className="flex h-full flex-col items-center justify-center gap-2 px-6 text-center">
             <Bot className="size-10 text-zinc-800" />
-            <p className="text-sm text-zinc-500">
-              Send a message to start the conversation
-            </p>
+            <p className="text-sm text-zinc-500">Send a message to start the conversation</p>
             <p className="text-[12px] text-zinc-700">
               {isScratchpad ? (
                 <>
@@ -332,9 +179,7 @@ export function ChatPane({
                     <div className="flex gap-3">
                       <div
                         className={`mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full ${
-                          isUser
-                            ? 'bg-indigo-600 text-white'
-                            : 'bg-zinc-800 text-zinc-400'
+                          isUser ? 'bg-indigo-600 text-white' : 'bg-zinc-800 text-zinc-400'
                         }`}
                       >
                         {isUser ? <User className="size-3.5" /> : <Bot className="size-3.5" />}
@@ -373,7 +218,6 @@ export function ChatPane({
         )}
       </div>
 
-      {/* Input area */}
       <div className="border-t border-[var(--color-border)] px-6 py-4">
         {session.lastError && (
           <div className="mb-3 flex items-start gap-2 rounded-lg bg-red-500/10 px-3 py-2 text-[13px] text-red-300">
@@ -390,32 +234,41 @@ export function ChatPane({
         )}
 
         <div className="mx-auto max-w-3xl">
-          {/* Scratchpad config pills — inline above composer */}
           {isScratchpad && primaryAgent && (
-            <div className="mb-2 flex items-center gap-2">
-              <InlineModelPill
-                disabled={isComposerDisabled}
-                onChange={(model) =>
-                  void handleScratchpadConfigChange({
-                    model,
-                    reasoningEffort: scratchpadReasoningEffort,
-                  })
-                }
-                value={primaryAgent.model}
-              />
-              <InlineThinkingPill
-                disabled={isComposerDisabled}
-                onChange={(reasoningEffort) =>
-                  void handleScratchpadConfigChange({
-                    model: primaryAgent.model,
-                    reasoningEffort,
-                  })
-                }
-                value={scratchpadReasoningEffort}
-              />
-              {isUpdatingScratchpadConfig && (
-                <Loader2 className="size-3 animate-spin text-zinc-500" />
-              )}
+            <div className="mb-3 rounded-xl border border-zinc-800 bg-zinc-900/40 p-3">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
+                <div className="min-w-0 flex-1">
+                  <ModelSelect
+                    disabled={isComposerDisabled}
+                    models={availableModels}
+                    onChange={(modelId) => {
+                      const nextModel = findModel(modelId, availableModels);
+                      void handleScratchpadConfigChange({
+                        model: modelId,
+                        reasoningEffort: resolveReasoningEffort(nextModel, scratchpadReasoningEffort),
+                      });
+                    }}
+                    value={primaryAgent.model}
+                  />
+                </div>
+                <div className="sm:w-48">
+                  <ReasoningEffortSelect
+                    disabled={isComposerDisabled}
+                    label="Thinking"
+                    onChange={(reasoningEffort) =>
+                      void handleScratchpadConfigChange({
+                        model: primaryAgent.model,
+                        reasoningEffort,
+                      })
+                    }
+                    supportedEfforts={supportedEfforts}
+                    value={scratchpadReasoningEffort}
+                  />
+                </div>
+              </div>
+              <p className="mt-2 text-[11px] text-zinc-500">
+                Applies to future replies in this scratchpad.
+              </p>
             </div>
           )}
 
@@ -423,7 +276,7 @@ export function ChatPane({
             <textarea
               className="auto-resize-textarea block w-full resize-none bg-transparent px-4 py-3 pr-12 text-[14px] text-zinc-100 placeholder-zinc-600 outline-none"
               disabled={isComposerDisabled}
-              onChange={(e) => setInput(e.target.value)}
+              onChange={(event) => setInput(event.target.value)}
               onKeyDown={handleKeyDown}
               placeholder={
                 isSessionBusy

src/renderer/components/PatternEditor.tsx

@@ -15,6 +15,12 @@ import {
   type LucideIcon,
 } from 'lucide-react';
 
+import {
+  findModel,
+  getSupportedReasoningEfforts,
+  resolveReasoningEffort,
+  type ModelDefinition,
+} from '@shared/domain/models';
 import {
   validatePatternDefinition,
   type OrchestrationMode,
@@ -25,6 +31,7 @@ import {
 import { ModelSelect, ReasoningEffortSelect } from './AgentConfigFields';
 
 interface PatternEditorProps {
+  availableModels: ReadonlyArray<ModelDefinition>;
   pattern: PatternDefinition;
   isBuiltin: boolean;
   onChange: (pattern: PatternDefinition) => void;
@@ -189,7 +196,15 @@ function InputField({
   );
 }
 
-export function PatternEditor({ pattern, isBuiltin, onChange, onDelete, onSave, onBack }: PatternEditorProps) {
+export function PatternEditor({
+  availableModels,
+  pattern,
+  isBuiltin,
+  onChange,
+  onDelete,
+  onSave,
+  onBack,
+}: PatternEditorProps) {
   const issues = validatePatternDefinition(pattern);
 
   function updateAgent(agentId: string, patch: Partial<PatternAgentDefinition>) {
@@ -199,6 +214,14 @@ export function PatternEditor({ pattern, isBuiltin, onChange, onDelete, onSave,
     });
   }
 
+  function updateAgentModel(agent: PatternAgentDefinition, modelId: string) {
+    const model = findModel(modelId, availableModels);
+    updateAgent(agent.id, {
+      model: modelId,
+      reasoningEffort: resolveReasoningEffort(model, agent.reasoningEffort),
+    });
+  }
+
   return (
     <div className="flex h-full flex-col">
       {/* Header — top padding clears the title bar overlay zone */}
@@ -408,13 +431,15 @@ export function PatternEditor({ pattern, isBuiltin, onChange, onDelete, onSave,
                       value={agent.name}
                     />
                     <ModelSelect
-                      onChange={(v) => updateAgent(agent.id, { model: v })}
+                      models={availableModels}
+                      onChange={(value) => updateAgentModel(agent, value)}
                       value={agent.model}
                     />
                     <ReasoningEffortSelect
                       label="Reasoning"
                       onChange={(value) => updateAgent(agent.id, { reasoningEffort: value })}
-                      value={agent.reasoningEffort ?? 'high'}
+                      supportedEfforts={getSupportedReasoningEfforts(findModel(agent.model, availableModels))}
+                      value={resolveReasoningEffort(findModel(agent.model, availableModels), agent.reasoningEffort)}
                     />
                   </div>
                   <div className="mt-3">

src/renderer/components/SettingsPanel.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react';
 import { ChevronRight, Plus, X } from 'lucide-react';
 
+import type { ModelDefinition } from '@shared/domain/models';
 import type { PatternDefinition } from '@shared/domain/pattern';
 import { PatternEditor } from '@renderer/components/PatternEditor';
 
 interface SettingsPanelProps {
+  availableModels: ReadonlyArray<ModelDefinition>;
   patterns: PatternDefinition[];
   onClose: () => void;
   onSavePattern: (pattern: PatternDefinition) => Promise<void>;
@@ -18,6 +20,7 @@ function modeBadgeClasses(pattern: PatternDefinition) {
 }
 
 export function SettingsPanel({
+  availableModels,
   patterns,
   onClose,
   onSavePattern,
@@ -31,6 +34,7 @@ export function SettingsPanel({
     return (
       <div className="fixed inset-0 z-50 flex flex-col bg-[var(--color-surface-0)]">
         <PatternEditor
+          availableModels={availableModels}
           isBuiltin={isBuiltin}
           onBack={() => setEditingPattern(null)}
           onChange={setEditingPattern}