feat: Add OpenCode provider integration with official brand icons

This commit integrates OpenCode as a new AI provider and updates all provider
icons with their official brand colors for better visual recognition.

**OpenCode Provider Integration:**
- Add OpencodeProvider class with CLI-based execution
- Support for OpenCode native models (opencode/) and Bedrock models
- Proper event normalization for OpenCode streaming format
- Correct CLI arguments: --format json (not stream-json)
- Event structure: type, part.text, sessionID fields

**Provider Icons:**
- Add official OpenCode icon (white square frame from opencode.ai)
- Add DeepSeek icon (blue whale #4D6BFE)
- Add Qwen icon (purple gradient #6336E7 → #6F69F7)
- Add Amazon Nova icon (AWS orange #FF9900)
- Add Mistral icon (rainbow gradient gold→red)
- Add Meta icon (blue #1877F2)
- Update existing icons with brand colors:
  * Claude: #d97757 (terra cotta)
  * OpenAI/Codex: #74aa9c (teal-green)
  * Cursor: #5E9EFF (bright blue)

**Settings UI Updates:**
- Update settings navigation to show OpenCode icon
- Update model configuration to use provider-specific icons
- Differentiate between OpenCode free models and Bedrock-hosted models
- All AI models now display their official brand logos

**Model Resolution:**
- Add isOpencodeModel() function to detect OpenCode models
- Support patterns: opencode/, opencode-*, amazon-bedrock/*
- Update getProviderFromModel to recognize opencode provider

Note: Some unit tests in opencode-provider.test.ts need updating to match
the new event structure and CLI argument format.

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>

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 },

apps/ui/src/components/views/settings-view/providers/opencode-model-configuration.tsx

@@ -8,11 +8,18 @@ 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,
+} from '@/components/ui/provider-icon';
 import type { ComponentType } from 'react';
 
 interface OpencodeModelConfigurationProps {
@@ -29,21 +36,21 @@ interface OpencodeModelConfigurationProps {
 function getProviderIcon(provider: OpencodeProvider): ComponentType<{ className?: string }> {
   switch (provider) {
     case 'opencode':
-      return Terminal;
+      return OpenCodeIcon;
     case 'amazon-bedrock-anthropic':
       return AnthropicIcon;
     case 'amazon-bedrock-deepseek':
-      return Brain;
+      return DeepSeekIcon;
     case 'amazon-bedrock-amazon':
-      return Cloud;
+      return NovaIcon;
     case 'amazon-bedrock-meta':
-      return Cpu;
+      return MetaIcon;
     case 'amazon-bedrock-mistral':
-      return Sparkles;
+      return MistralIcon;
     case 'amazon-bedrock-qwen':
-      return Zap;
+      return QwenIcon;
     default:
-      return Terminal;
+      return OpenCodeIcon;
   }
 }
 
@@ -113,7 +120,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