Merge remote-tracking branch 'origin/v0.10.0rc' into stefandevo/main

2026-02-02 08:33:36 +00:00 · 2026-01-11 17:34:19 +01:00
parent 2a98de85a8 a046d1232e
commit 8b0b565282
156 changed files with 8389 additions and 5916 deletions
--- a/apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx
+++ b/apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx
@@ -1,7 +1,8 @@
 import { Button } from '@/components/ui/button';
-import { CheckCircle2, AlertCircle, RefreshCw, XCircle, Bot } from 'lucide-react';
+import { CheckCircle2, AlertCircle, RefreshCw, XCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { CliStatus } from '../shared/types';
+import { OpenCodeIcon } from '@/components/ui/provider-icon';

 export type OpencodeAuthMethod =
  | 'api_key_env' // ANTHROPIC_API_KEY or other provider env vars
@@ -169,7 +170,7 @@ export function OpencodeCliStatus({
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-              <Bot className="w-5 h-5 text-brand-500" />
+              <OpenCodeIcon className="w-5 h-5 text-brand-500" />
            </div>
            <h2 className="text-lg font-semibold text-foreground tracking-tight">OpenCode CLI</h2>
          </div>
--- a/apps/ui/src/components/views/settings-view/codex/codex-usage-section.tsx
+++ b/apps/ui/src/components/views/settings-view/codex/codex-usage-section.tsx
@@ -6,7 +6,6 @@ import { OpenAIIcon } from '@/components/ui/provider-icon';
 import { cn } from '@/lib/utils';
 import { getElectronAPI } from '@/lib/electron';
 import {
-  formatCodexCredits,
  formatCodexPlanType,
  formatCodexResetTime,
  getCodexWindowLabel,
@@ -25,7 +24,6 @@ const UPDATED_LABEL = 'Updated';
 const CODEX_FETCH_ERROR = 'Failed to fetch usage';
 const CODEX_REFRESH_LABEL = 'Refresh Codex usage';
 const PLAN_LABEL = 'Plan';
-const CREDITS_LABEL = 'Credits';
 const WARNING_THRESHOLD = 75;
 const CAUTION_THRESHOLD = 50;
 const MAX_PERCENTAGE = 100;
@@ -49,7 +47,6 @@ export function CodexUsageSection() {
  const rateLimits = codexUsage?.rateLimits ?? null;
  const primary = rateLimits?.primary ?? null;
  const secondary = rateLimits?.secondary ?? null;
-  const credits = rateLimits?.credits ?? null;
  const planType = rateLimits?.planType ?? null;
  const rateLimitWindows = [primary, secondary].filter(isRateLimitWindow);
  const hasMetrics = rateLimitWindows.length > 0;
@@ -206,20 +203,11 @@ export function CodexUsageSection() {
            })}
          </div>
        )}
-        {(planType || credits) && (
+        {planType && (
          <div className="rounded-xl border border-border/60 bg-secondary/20 p-4 text-xs text-muted-foreground">
-            {planType && (
-              <div>
-                {PLAN_LABEL}:{' '}
-                <span className="text-foreground">{formatCodexPlanType(planType)}</span>
-              </div>
-            )}
-            {credits && (
-              <div>
-                {CREDITS_LABEL}:{' '}
-                <span className="text-foreground">{formatCodexCredits(credits)}</span>
-              </div>
-            )}
+            <div>
+              {PLAN_LABEL}: <span className="text-foreground">{formatCodexPlanType(planType)}</span>
+            </div>
          </div>
        )}
        {!hasMetrics && !error && canFetchUsage && !isLoading && (
--- a/apps/ui/src/components/views/settings-view/config/navigation.ts
+++ b/apps/ui/src/components/views/settings-view/config/navigation.ts
@@ -14,9 +14,8 @@ import {
  MessageSquareText,
  User,
  Shield,
-  Cpu,
 } from 'lucide-react';
-import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';
+import { AnthropicIcon, CursorIcon, OpenAIIcon, OpenCodeIcon } from '@/components/ui/provider-icon';
 import type { SettingsViewId } from '../hooks/use-settings-view';

 export interface NavigationItem {
@@ -48,7 +47,7 @@ export const GLOBAL_NAV_GROUPS: NavigationGroup[] = [
          { id: 'claude-provider', label: 'Claude', icon: AnthropicIcon },
          { id: 'cursor-provider', label: 'Cursor', icon: CursorIcon },
          { id: 'codex-provider', label: 'Codex', icon: OpenAIIcon },
-          { id: 'opencode-provider', label: 'OpenCode', icon: Cpu },
+          { id: 'opencode-provider', label: 'OpenCode', icon: OpenCodeIcon },
        ],
      },
      { id: 'mcp-servers', label: 'MCP Servers', icon: Plug },
--- a/apps/ui/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx
+++ b/apps/ui/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx
@@ -2,7 +2,6 @@ import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
  FlaskConical,
-  Settings2,
  TestTube,
  GitBranch,
  AlertCircle,
@@ -11,7 +10,6 @@ import {
  FileText,
  ScrollText,
  ShieldCheck,
-  User,
  FastForward,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -22,53 +20,38 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select';
-import type { AIProfile } from '@/store/app-store';

 type PlanningMode = 'skip' | 'lite' | 'spec' | 'full';

 interface FeatureDefaultsSectionProps {
-  showProfilesOnly: boolean;
  defaultSkipTests: boolean;
  enableDependencyBlocking: boolean;
  skipVerificationInAutoMode: boolean;
  useWorktrees: boolean;
  defaultPlanningMode: PlanningMode;
  defaultRequirePlanApproval: boolean;
-  defaultAIProfileId: string | null;
-  aiProfiles: AIProfile[];
-  onShowProfilesOnlyChange: (value: boolean) => void;
  onDefaultSkipTestsChange: (value: boolean) => void;
  onEnableDependencyBlockingChange: (value: boolean) => void;
  onSkipVerificationInAutoModeChange: (value: boolean) => void;
  onUseWorktreesChange: (value: boolean) => void;
  onDefaultPlanningModeChange: (value: PlanningMode) => void;
  onDefaultRequirePlanApprovalChange: (value: boolean) => void;
-  onDefaultAIProfileIdChange: (value: string | null) => void;
 }

 export function FeatureDefaultsSection({
-  showProfilesOnly,
  defaultSkipTests,
  enableDependencyBlocking,
  skipVerificationInAutoMode,
  useWorktrees,
  defaultPlanningMode,
  defaultRequirePlanApproval,
-  defaultAIProfileId,
-  aiProfiles,
-  onShowProfilesOnlyChange,
  onDefaultSkipTestsChange,
  onEnableDependencyBlockingChange,
  onSkipVerificationInAutoModeChange,
  onUseWorktreesChange,
  onDefaultPlanningModeChange,
  onDefaultRequirePlanApprovalChange,
-  onDefaultAIProfileIdChange,
 }: FeatureDefaultsSectionProps) {
-  // Find the selected profile name for display
-  const selectedProfile = defaultAIProfileId
-    ? aiProfiles.find((p) => p.id === defaultAIProfileId)
-    : null;
  return (
    <div
      className={cn(
@@ -194,71 +177,6 @@ export function FeatureDefaultsSection({
        {/* Separator */}
        {defaultPlanningMode === 'skip' && <div className="border-t border-border/30" />}

-        {/* Default AI Profile */}
-        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
-          <div className="w-10 h-10 mt-0.5 rounded-xl flex items-center justify-center shrink-0 bg-brand-500/10">
-            <User className="w-5 h-5 text-brand-500" />
-          </div>
-          <div className="flex-1 space-y-2">
-            <div className="flex items-center justify-between">
-              <Label className="text-foreground font-medium">Default AI Profile</Label>
-              <Select
-                value={defaultAIProfileId ?? 'none'}
-                onValueChange={(v: string) => onDefaultAIProfileIdChange(v === 'none' ? null : v)}
-              >
-                <SelectTrigger className="w-[180px] h-8" data-testid="default-ai-profile-select">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">
-                    <span className="text-muted-foreground">None (pick manually)</span>
-                  </SelectItem>
-                  {aiProfiles.map((profile) => (
-                    <SelectItem key={profile.id} value={profile.id}>
-                      <span>{profile.name}</span>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <p className="text-xs text-muted-foreground/80 leading-relaxed">
-              {selectedProfile
-                ? `New features will use the "${selectedProfile.name}" profile (${selectedProfile.model}, ${selectedProfile.thinkingLevel} thinking).`
-                : 'Pre-select an AI profile when creating new features. Choose "None" to pick manually each time.'}
-            </p>
-          </div>
-        </div>
-
-        {/* Separator */}
-        <div className="border-t border-border/30" />
-
-        {/* Profiles Only Setting */}
-        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
-          <Checkbox
-            id="show-profiles-only"
-            checked={showProfilesOnly}
-            onCheckedChange={(checked) => onShowProfilesOnlyChange(checked === true)}
-            className="mt-1"
-            data-testid="show-profiles-only-checkbox"
-          />
-          <div className="space-y-1.5">
-            <Label
-              htmlFor="show-profiles-only"
-              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-            >
-              <Settings2 className="w-4 h-4 text-brand-500" />
-              Show profiles only by default
-            </Label>
-            <p className="text-xs text-muted-foreground/80 leading-relaxed">
-              When enabled, the Add Feature dialog will show only AI profiles and hide advanced
-              model tweaking options. This creates a cleaner, less overwhelming UI.
-            </p>
-          </div>
-        </div>
-
-        {/* Separator */}
-        <div className="border-t border-border/30" />
-
        {/* Automated Testing Setting */}
        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
          <Checkbox
--- a/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
+++ b/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
 import type {
@@ -8,8 +8,6 @@ import type {
  OpencodeModelId,
  GroupedModel,
  PhaseModelEntry,
-  ThinkingLevel,
-  ReasoningEffort,
 } from '@automaker/types';
 import {
  stripProviderPrefix,
@@ -17,13 +15,11 @@ import {
  getModelGroup,
  isGroupSelected,
  getSelectedVariant,
-  isCursorModel,
  codexModelHasThinking,
 } from '@automaker/types';
 import {
  CLAUDE_MODELS,
  CURSOR_MODELS,
-  CODEX_MODELS,
  OPENCODE_MODELS,
  THINKING_LEVELS,
  THINKING_LEVEL_LABELS,
@@ -31,7 +27,18 @@ import {
  REASONING_EFFORT_LABELS,
 } from '@/components/views/board-view/shared/model-constants';
 import { Check, ChevronsUpDown, Star, ChevronRight } from 'lucide-react';
-import { AnthropicIcon, CursorIcon, OpenAIIcon, OpenCodeIcon } from '@/components/ui/provider-icon';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  OpenCodeIcon,
+  DeepSeekIcon,
+  NovaIcon,
+  QwenIcon,
+  MistralIcon,
+  MetaIcon,
+  getProviderIconForModel,
+} from '@/components/ui/provider-icon';
 import { Button } from '@/components/ui/button';
 import {
  Command,
@@ -73,23 +80,39 @@ export function PhaseModelSelector({
  align = 'end',
  disabled = false,
 }: PhaseModelSelectorProps) {
-  const [open, setOpen] = React.useState(false);
-  const [expandedGroup, setExpandedGroup] = React.useState<string | null>(null);
-  const [expandedClaudeModel, setExpandedClaudeModel] = React.useState<ModelAlias | null>(null);
-  const [expandedCodexModel, setExpandedCodexModel] = React.useState<CodexModelId | null>(null);
-  const commandListRef = React.useRef<HTMLDivElement>(null);
-  const expandedTriggerRef = React.useRef<HTMLDivElement>(null);
-  const expandedClaudeTriggerRef = React.useRef<HTMLDivElement>(null);
-  const expandedCodexTriggerRef = React.useRef<HTMLDivElement>(null);
-  const { enabledCursorModels, favoriteModels, toggleFavoriteModel } = useAppStore();
+  const [open, setOpen] = useState(false);
+  const [expandedGroup, setExpandedGroup] = useState<string | null>(null);
+  const [expandedClaudeModel, setExpandedClaudeModel] = useState<ModelAlias | null>(null);
+  const [expandedCodexModel, setExpandedCodexModel] = useState<CodexModelId | null>(null);
+  const commandListRef = useRef<HTMLDivElement>(null);
+  const expandedTriggerRef = useRef<HTMLDivElement>(null);
+  const expandedClaudeTriggerRef = useRef<HTMLDivElement>(null);
+  const expandedCodexTriggerRef = useRef<HTMLDivElement>(null);
+  const {
+    enabledCursorModels,
+    favoriteModels,
+    toggleFavoriteModel,
+    codexModels,
+    codexModelsLoading,
+    fetchCodexModels,
+  } = useAppStore();

  // Extract model and thinking/reasoning levels from value
  const selectedModel = value.model;
  const selectedThinkingLevel = value.thinkingLevel || 'none';
  const selectedReasoningEffort = value.reasoningEffort || 'none';

+  // Fetch Codex models on mount
+  useEffect(() => {
+    if (codexModels.length === 0 && !codexModelsLoading) {
+      fetchCodexModels().catch(() => {
+        // Silently fail - user will see empty Codex section
+      });
+    }
+  }, [codexModels.length, codexModelsLoading, fetchCodexModels]);
+
  // Close expanded group when trigger scrolls out of view
-  React.useEffect(() => {
+  useEffect(() => {
    const triggerElement = expandedTriggerRef.current;
    const listElement = commandListRef.current;
    if (!triggerElement || !listElement || !expandedGroup) return;
@@ -112,7 +135,7 @@ export function PhaseModelSelector({
  }, [expandedGroup]);

  // Close expanded Claude model popover when trigger scrolls out of view
-  React.useEffect(() => {
+  useEffect(() => {
    const triggerElement = expandedClaudeTriggerRef.current;
    const listElement = commandListRef.current;
    if (!triggerElement || !listElement || !expandedClaudeModel) return;
@@ -135,7 +158,7 @@ export function PhaseModelSelector({
  }, [expandedClaudeModel]);

  // Close expanded Codex model popover when trigger scrolls out of view
-  React.useEffect(() => {
+  useEffect(() => {
    const triggerElement = expandedCodexTriggerRef.current;
    const listElement = commandListRef.current;
    if (!triggerElement || !listElement || !expandedCodexModel) return;
@@ -157,6 +180,17 @@ export function PhaseModelSelector({
    return () => observer.disconnect();
  }, [expandedCodexModel]);

+  // Transform dynamic Codex models from store to component format
+  const transformedCodexModels = useMemo(() => {
+    return codexModels.map((model) => ({
+      id: model.id,
+      label: model.label,
+      description: model.description,
+      provider: 'codex' as const,
+      badge: model.tier === 'premium' ? 'Premium' : model.tier === 'basic' ? 'Speed' : undefined,
+    }));
+  }, [codexModels]);
+
  // Filter Cursor models to only show enabled ones
  const availableCursorModels = CURSOR_MODELS.filter((model) => {
    const cursorId = stripProviderPrefix(model.id) as CursorModelId;
@@ -164,7 +198,7 @@ export function PhaseModelSelector({
  });

  // Helper to find current selected model details
-  const currentModel = React.useMemo(() => {
+  const currentModel = useMemo(() => {
    const claudeModel = CLAUDE_MODELS.find((m) => m.id === selectedModel);
    if (claudeModel) {
      // Add thinking level to label if not 'none'
@@ -198,7 +232,7 @@ export function PhaseModelSelector({
    }

    // Check Codex models
-    const codexModel = CODEX_MODELS.find((m) => m.id === selectedModel);
+    const codexModel = transformedCodexModels.find((m) => m.id === selectedModel);
    if (codexModel) return { ...codexModel, icon: OpenAIIcon };

    // Check OpenCode models
@@ -206,10 +240,10 @@ export function PhaseModelSelector({
    if (opencodeModel) return { ...opencodeModel, icon: OpenCodeIcon };

    return null;
-  }, [selectedModel, selectedThinkingLevel, availableCursorModels]);
+  }, [selectedModel, selectedThinkingLevel, availableCursorModels, transformedCodexModels]);

  // Compute grouped vs standalone Cursor models
-  const { groupedModels, standaloneCursorModels } = React.useMemo(() => {
+  const { groupedModels, standaloneCursorModels } = useMemo(() => {
    const grouped: GroupedModel[] = [];
    const standalone: typeof CURSOR_MODELS = [];
    const seenGroups = new Set<string>();
@@ -242,11 +276,11 @@ export function PhaseModelSelector({
  }, [availableCursorModels, enabledCursorModels]);

  // Group models
-  const { favorites, claude, cursor, codex, opencode } = React.useMemo(() => {
+  const { favorites, claude, cursor, codex, opencode } = useMemo(() => {
    const favs: typeof CLAUDE_MODELS = [];
    const cModels: typeof CLAUDE_MODELS = [];
    const curModels: typeof CURSOR_MODELS = [];
-    const codModels: typeof CODEX_MODELS = [];
+    const codModels: typeof transformedCodexModels = [];
    const ocModels: typeof OPENCODE_MODELS = [];

    // Process Claude Models
@@ -268,7 +302,7 @@ export function PhaseModelSelector({
    });

    // Process Codex Models
-    CODEX_MODELS.forEach((model) => {
+    transformedCodexModels.forEach((model) => {
      if (favoriteModels.includes(model.id)) {
        favs.push(model);
      } else {
@@ -292,10 +326,10 @@ export function PhaseModelSelector({
      codex: codModels,
      opencode: ocModels,
    };
-  }, [favoriteModels, availableCursorModels]);
+  }, [favoriteModels, availableCursorModels, transformedCodexModels]);

  // Render Codex model item with secondary popover for reasoning effort (only for models that support it)
-  const renderCodexModelItem = (model: (typeof CODEX_MODELS)[0]) => {
+  const renderCodexModelItem = (model: (typeof transformedCodexModels)[0]) => {
    const isSelected = selectedModel === model.id;
    const isFavorite = favoriteModels.includes(model.id);
    const hasReasoning = codexModelHasThinking(model.id as CodexModelId);
@@ -480,6 +514,9 @@ export function PhaseModelSelector({
    const isSelected = selectedModel === model.id;
    const isFavorite = favoriteModels.includes(model.id);

+    // Get the appropriate icon based on the specific model ID
+    const ProviderIcon = getProviderIconForModel(model.id);
+
    return (
      <CommandItem
        key={model.id}
@@ -491,7 +528,7 @@ export function PhaseModelSelector({
        className="group flex items-center justify-between py-2"
      >
        <div className="flex items-center gap-3 overflow-hidden">
-          <OpenCodeIcon
+          <ProviderIcon
            className={cn(
              'h-4 w-4 shrink-0',
              isSelected ? 'text-primary' : 'text-muted-foreground'
@@ -919,7 +956,7 @@ export function PhaseModelSelector({
                    }
                    // Codex model
                    if (model.provider === 'codex') {
-                      return renderCodexModelItem(model);
+                      return renderCodexModelItem(model as (typeof transformedCodexModels)[0]);
                    }
                    // OpenCode model
                    if (model.provider === 'opencode') {
--- a/apps/ui/src/components/views/settings-view/prompts/prompt-customization-section.tsx
+++ b/apps/ui/src/components/views/settings-view/prompts/prompt-customization-section.tsx
@@ -431,6 +431,16 @@ export function PromptCustomizationSection({
                  updatePrompt('enhancement', 'acceptanceSystemPrompt', value)
                }
              />
+
+              <PromptField
+                label="User Experience Mode"
+                description="Review and enhance from a user experience and design perspective"
+                defaultValue={DEFAULT_ENHANCEMENT_PROMPTS.uxReviewerSystemPrompt}
+                customValue={promptCustomization?.enhancement?.uxReviewerSystemPrompt}
+                onCustomValueChange={(value) =>
+                  updatePrompt('enhancement', 'uxReviewerSystemPrompt', value)
+                }
+              />
            </div>
          </TabsContent>
        </Tabs>
--- a/apps/ui/src/components/views/settings-view/providers/opencode-model-configuration.tsx
+++ b/apps/ui/src/components/views/settings-view/providers/opencode-model-configuration.tsx
@@ -8,11 +8,19 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select';
-import { Terminal, Cloud, Cpu, Brain, Sparkles, Zap } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { OpencodeModelId, OpencodeProvider, OpencodeModelConfig } from '@automaker/types';
 import { OPENCODE_MODELS, OPENCODE_MODEL_CONFIG_MAP } from '@automaker/types';
-import { AnthropicIcon } from '@/components/ui/provider-icon';
+import {
+  OpenCodeIcon,
+  DeepSeekIcon,
+  QwenIcon,
+  NovaIcon,
+  AnthropicIcon,
+  MistralIcon,
+  MetaIcon,
+  getProviderIconForModel,
+} from '@/components/ui/provider-icon';
 import type { ComponentType } from 'react';

 interface OpencodeModelConfigurationProps {
@@ -24,27 +32,10 @@ interface OpencodeModelConfigurationProps {
 }

 /**
- * Returns the appropriate icon component for a given OpenCode provider
+ * Returns the appropriate icon component for a given OpenCode model ID
 */
-function getProviderIcon(provider: OpencodeProvider): ComponentType<{ className?: string }> {
-  switch (provider) {
-    case 'opencode':
-      return Terminal;
-    case 'amazon-bedrock-anthropic':
-      return AnthropicIcon;
-    case 'amazon-bedrock-deepseek':
-      return Brain;
-    case 'amazon-bedrock-amazon':
-      return Cloud;
-    case 'amazon-bedrock-meta':
-      return Cpu;
-    case 'amazon-bedrock-mistral':
-      return Sparkles;
-    case 'amazon-bedrock-qwen':
-      return Zap;
-    default:
-      return Terminal;
-  }
+function getModelIcon(modelId: OpencodeModelId): ComponentType<{ className?: string }> {
+  return getProviderIconForModel(modelId);
 }

 /**
@@ -113,7 +104,7 @@ export function OpencodeModelConfiguration({
      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
        <div className="flex items-center gap-3 mb-2">
          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-            <Terminal className="w-5 h-5 text-brand-500" />
+            <OpenCodeIcon className="w-5 h-5 text-brand-500" />
          </div>
          <h2 className="text-lg font-semibold text-foreground tracking-tight">
            Model Configuration
@@ -139,11 +130,11 @@ export function OpencodeModelConfiguration({
              {enabledOpencodeModels.map((modelId) => {
                const model = OPENCODE_MODEL_CONFIG_MAP[modelId];
                if (!model) return null;
-                const ProviderIconComponent = getProviderIcon(model.provider);
+                const ModelIconComponent = getModelIcon(modelId);
                return (
                  <SelectItem key={modelId} value={modelId}>
                    <div className="flex items-center gap-2">
-                      <ProviderIconComponent className="w-4 h-4" />
+                      <ModelIconComponent className="w-4 h-4" />
                      <span>{model.label}</span>
                    </div>
                  </SelectItem>
@@ -160,7 +151,9 @@ export function OpencodeModelConfiguration({
            const models = modelsByProvider[provider];
            if (!models || models.length === 0) return null;

-            const ProviderIconComponent = getProviderIcon(provider);
+            // Use the first model's icon as the provider icon
+            const ProviderIconComponent =
+              models.length > 0 ? getModelIcon(models[0].id) : OpenCodeIcon;

            return (
              <div key={provider} className="space-y-2">