From baea491cf2f8e9c7e0d8af43d0d5a7a15a27ff19 Mon Sep 17 00:00:00 2001
From: David Kaya <david@kaya.sk>
Date: Sat, 21 Mar 2026 20:05:54 +0100
Subject: [PATCH] feat: add model dropdown with provider logos and tier badges

- Create model catalog (src/shared/domain/models.ts) with 12 models
  from OpenAI, Anthropic, and Google including tier metadata
- Replace free-text model input with custom ModelSelect dropdown
  grouped by provider with colored provider icons (green AI for
  OpenAI, orange A for Anthropic, blue G for Google)
- Show tier badges (premium/standard/fast) on each model option
- Highlight currently selected model with indigo accent
- Update ActivityPanel to show provider icons on model badges
  for visual consistency across the app

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/renderer/components/ActivityPanel.tsx |  22 +++-
 src/renderer/components/PatternEditor.tsx | 119 +++++++++++++++++++++-
 src/shared/domain/models.ts               |  42 ++++++++
 3 files changed, 177 insertions(+), 6 deletions(-)
 create mode 100644 src/shared/domain/models.ts

diff --git a/src/renderer/components/ActivityPanel.tsx b/src/renderer/components/ActivityPanel.tsx
index 2a11102..9f4195a 100644
--- a/src/renderer/components/ActivityPanel.tsx
+++ b/src/renderer/components/ActivityPanel.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Activity, Bot, Cpu, Sparkles } from 'lucide-react';
+import { Activity, Bot, Sparkles } from 'lucide-react';
 
 import {
   buildAgentActivityRows,
@@ -8,9 +8,16 @@ import {
   isAgentActivityCompleted,
   type SessionActivityState,
 } from '@renderer/lib/sessionActivity';
+import { inferProvider, type ModelProvider } from '@shared/domain/models';
 import type { PatternDefinition } from '@shared/domain/pattern';
 import type { SessionRecord } from '@shared/domain/session';
 
+const providerStyles: Record<ModelProvider, { bg: string; text: string; label: string }> = {
+  openai: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', label: 'AI' },
+  anthropic: { bg: 'bg-orange-500/15', text: 'text-orange-400', label: 'A' },
+  google: { bg: 'bg-blue-500/15', text: 'text-blue-400', label: 'G' },
+};
+
 function formatModel(model: string): string {
   return model.replace(/-/g, '\u2011');
 }
@@ -92,7 +99,18 @@ export function ActivityPanel({ activity, pattern, session }: ActivityPanelProps
                 {agent && (
                   <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
                     <span className="inline-flex items-center gap-1 rounded bg-zinc-800 px-1.5 py-0.5 text-[10px] font-medium text-zinc-400">
-                      <Cpu className="size-2.5" />
+                      {(() => {
+                        const prov = inferProvider(agent.model);
+                        if (prov) {
+                          const s = providerStyles[prov];
+                          return (
+                            <span className={`flex size-3.5 items-center justify-center rounded text-[7px] font-bold ${s.bg} ${s.text}`}>
+                              {s.label}
+                            </span>
+                          );
+                        }
+                        return null;
+                      })()}
                       {formatModel(agent.model)}
                     </span>
                     {agent.reasoningEffort && (
diff --git a/src/renderer/components/PatternEditor.tsx b/src/renderer/components/PatternEditor.tsx
index e8fcbb0..164931c 100644
--- a/src/renderer/components/PatternEditor.tsx
+++ b/src/renderer/components/PatternEditor.tsx
@@ -1,8 +1,9 @@
-import { useState, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import {
   AlertCircle,
   ArrowLeftRight,
   CheckCircle,
+  ChevronDown,
   ChevronLeft,
   GitFork,
   ListOrdered,
@@ -21,6 +22,14 @@ import {
   type ReasoningEffort,
   type PatternAgentDefinition,
 } from '@shared/domain/pattern';
+import {
+  modelCatalog,
+  providerMeta,
+  findModel,
+  inferProvider,
+  type ModelProvider,
+  type ModelDefinition,
+} from '@shared/domain/models';
 
 interface PatternEditorProps {
   pattern: PatternDefinition;
@@ -194,6 +203,110 @@ function InputField({
   );
 }
 
+const providerStyles: Record<ModelProvider, { bg: string; text: string; label: string }> = {
+  openai: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', label: 'AI' },
+  anthropic: { bg: 'bg-orange-500/15', text: 'text-orange-400', label: 'A' },
+  google: { bg: 'bg-blue-500/15', text: 'text-blue-400', label: 'G' },
+};
+
+function ProviderIcon({ provider }: { provider: ModelProvider }) {
+  const s = providerStyles[provider];
+  return (
+    <span
+      className={`flex size-5 shrink-0 items-center justify-center rounded text-[8px] font-bold ${s.bg} ${s.text}`}
+    >
+      {s.label}
+    </span>
+  );
+}
+
+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>
+  );
+}
+
+function ModelSelect({ value, onChange }: { value: string; onChange: (model: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (containerRef.current && !containerRef.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);
+
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-[12px] font-medium text-zinc-400">Model</span>
+      <div className="relative" ref={containerRef}>
+        <button
+          className="flex w-full items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-left text-[13px] text-zinc-100 outline-none transition hover:border-zinc-600 focus:border-indigo-500/50"
+          onClick={() => setOpen(!open)}
+          type="button"
+        >
+          {provider && <ProviderIcon provider={provider} />}
+          <span className="flex-1 truncate">{selected?.name ?? (value || 'Select model')}</span>
+          <ChevronDown
+            className={`size-3.5 text-zinc-500 transition ${open ? 'rotate-180' : ''}`}
+          />
+        </button>
+
+        {open && (
+          <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((p) => {
+              const models = modelCatalog.filter((m) => m.provider === p.id);
+              return (
+                <div key={p.id}>
+                  <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
+                    <ProviderIcon provider={p.id} />
+                    <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                      {p.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>
+    </label>
+  );
+}
+
 export function PatternEditor({ pattern, isBuiltin, onChange, onDelete, onSave, onBack }: PatternEditorProps) {
   const issues = validatePatternDefinition(pattern);
 
@@ -412,10 +525,8 @@ export function PatternEditor({ pattern, isBuiltin, onChange, onDelete, onSave,
                       onChange={(v) => updateAgent(agent.id, { name: v })}
                       value={agent.name}
                     />
-                    <InputField
-                      label="Model"
+                    <ModelSelect
                       onChange={(v) => updateAgent(agent.id, { model: v })}
-                      placeholder="e.g. gpt-5.4"
                       value={agent.model}
                     />
                     <label className="block space-y-1.5">
diff --git a/src/shared/domain/models.ts b/src/shared/domain/models.ts
new file mode 100644
index 0000000..a04e7b7
--- /dev/null
+++ b/src/shared/domain/models.ts
@@ -0,0 +1,42 @@
+export type ModelProvider = 'openai' | 'anthropic' | 'google';
+
+export interface ModelDefinition {
+  id: string;
+  name: string;
+  provider: ModelProvider;
+  tier: 'premium' | 'standard' | 'fast';
+}
+
+export const modelCatalog: ModelDefinition[] = [
+  { id: 'gpt-5.4', name: 'GPT-5.4', provider: 'openai', tier: 'standard' },
+  { id: 'gpt-5.4-mini', name: 'GPT-5.4 Mini', provider: 'openai', tier: 'fast' },
+  { id: 'gpt-5.3-codex', name: 'GPT-5.3 Codex', provider: 'openai', tier: 'standard' },
+  { id: 'gpt-5.2-codex', name: 'GPT-5.2 Codex', provider: 'openai', tier: 'standard' },
+  { id: 'gpt-5.2', name: 'GPT-5.2', provider: 'openai', tier: 'standard' },
+  { id: 'gpt-5.1', name: 'GPT-5.1', provider: 'openai', tier: 'standard' },
+  { id: 'gpt-4.1', name: 'GPT-4.1', provider: 'openai', tier: 'fast' },
+
+  { id: 'claude-opus-4.5', name: 'Claude Opus 4.5', provider: 'anthropic', tier: 'premium' },
+  { id: 'claude-sonnet-4.5', name: 'Claude Sonnet 4.5', provider: 'anthropic', tier: 'standard' },
+  { id: 'claude-sonnet-4', name: 'Claude Sonnet 4', provider: 'anthropic', tier: 'standard' },
+  { id: 'claude-haiku-4.5', name: 'Claude Haiku 4.5', provider: 'anthropic', tier: 'fast' },
+
+  { id: 'gemini-3-pro-preview', name: 'Gemini 3 Pro', provider: 'google', tier: 'standard' },
+];
+
+export const providerMeta: { id: ModelProvider; label: string }[] = [
+  { id: 'openai', label: 'OpenAI' },
+  { id: 'anthropic', label: 'Anthropic' },
+  { id: 'google', label: 'Google' },
+];
+
+export function findModel(id: string): ModelDefinition | undefined {
+  return modelCatalog.find((m) => m.id === id);
+}
+
+export function inferProvider(modelId: string): ModelProvider | undefined {
+  if (modelId.startsWith('gpt-')) return 'openai';
+  if (modelId.startsWith('claude-')) return 'anthropic';
+  if (modelId.startsWith('gemini-')) return 'google';
+  return undefined;
+}