feat: restore compact inline pills for scratchpad model picker

Re-apply the inline pill-button design for the scratchpad model and
thinking effort selectors that was overwritten by a concurrent agent.

- InlineModelPill: compact pill with provider icon, upward-opening
  grouped dropdown with provider headers and tier badges; respects
  the new availableModels prop for live model availability
- InlineThinkingPill: compact Sparkles pill with upward-opening
  effort selector; shows N/A when model has no reasoning support
  (respects supportedEfforts from per-model capabilities)
- Removes the large bordered card wrapper, replaces with subtle
  inline row of pills sitting just above the composer textarea
- Preserves all new logic from the model-availability agent:
  availableModels prop, resolveReasoningEffort, getSupportedEfforts

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

src/renderer/components/ChatPane.tsx

@@ -1,16 +1,18 @@
 import { type KeyboardEvent, useEffect, useRef, useState } from 'react';
-import { AlertCircle, ArrowUp, Bot, Loader2, User } from 'lucide-react';
+import { AlertCircle, ArrowUp, Bot, ChevronDown, Loader2, Sparkles, 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,
   getSupportedReasoningEfforts,
+  inferProvider,
+  providerMeta,
   resolveReasoningEffort,
   type ModelDefinition,
 } from '@shared/domain/models';
-import type { PatternDefinition, ReasoningEffort } from '@shared/domain/pattern';
+import { reasoningEffortOptions, type PatternDefinition, type ReasoningEffort } from '@shared/domain/pattern';
 import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
 import type { SessionRecord } from '@shared/domain/session';
 
@@ -24,6 +26,203 @@ function ThinkingDots() {
   );
 }
 
+/* ── Tier badge for model dropdown ─────────────────────────── */
+
+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',
+    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,
+  models,
+  onChange,
+  disabled,
+}: {
+  value: string;
+  models: ReadonlyArray<ModelDefinition>;
+  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, models);
+  const provider = selected?.provider ?? inferProvider(value);
+  const displayName = selected?.name ?? value ?? 'Model';
+
+  const groupedModels = providerMeta
+    .map((pg) => ({ ...pg, models: models.filter((m) => m.provider === pg.id) }))
+    .filter((pg) => pg.models.length > 0);
+  const otherModels = models.filter((m) => !m.provider);
+
+  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">
+          {groupedModels.map((pg) => (
+            <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>
+              {pg.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>
+          ))}
+          {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>
+  );
+}
+
+/* ── Inline thinking effort pill with dropdown ─────────────── */
+
+function InlineThinkingPill({
+  value,
+  supportedEfforts,
+  onChange,
+  disabled,
+}: {
+  value?: ReasoningEffort;
+  supportedEfforts?: ReadonlyArray<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 options = supportedEfforts
+    ? reasoningEffortOptions.filter((o) => supportedEfforts.includes(o.value))
+    : [...reasoningEffortOptions];
+
+  if (supportedEfforts && supportedEfforts.length === 0) {
+    return (
+      <span className="inline-flex items-center gap-1.5 rounded-md border border-zinc-800/40 bg-zinc-800/20 px-2 py-1 text-[12px] text-zinc-600">
+        <Sparkles className="size-3" />
+        N/A
+      </span>
+    );
+  }
+
+  const currentLabel = options.find((o) => o.value === value)?.label ?? value ?? 'Thinking';
+
+  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">
+          {options.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;
@@ -113,6 +312,7 @@ export function ChatPane({
 
   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>
@@ -136,6 +336,7 @@ 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">
@@ -218,6 +419,7 @@ 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">
@@ -234,41 +436,35 @@ export function ChatPane({
         )}
 
         <div className="mx-auto max-w-3xl">
+          {/* Scratchpad config pills — inline above composer */}
           {isScratchpad && primaryAgent && (
-            <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 className="mb-2 flex items-center gap-2">
+              <InlineModelPill
+                disabled={isComposerDisabled}
+                models={availableModels}
+                onChange={(modelId) => {
+                  const nextModel = findModel(modelId, availableModels);
+                  void handleScratchpadConfigChange({
+                    model: modelId,
+                    reasoningEffort: resolveReasoningEffort(nextModel, scratchpadReasoningEffort),
+                  });
+                }}
+                value={primaryAgent.model}
+              />
+              <InlineThinkingPill
+                disabled={isComposerDisabled}
+                onChange={(reasoningEffort) =>
+                  void handleScratchpadConfigChange({
+                    model: primaryAgent.model,
+                    reasoningEffort,
+                  })
+                }
+                supportedEfforts={supportedEfforts}
+                value={scratchpadReasoningEffort}
+              />
+              {isUpdatingScratchpadConfig && (
+                <Loader2 className="size-3 animate-spin text-zinc-500" />
+              )}
             </div>
           )}