opencode support

apps/ui/src/components/ui/provider-icon.tsx

@@ -1,4 +1,5 @@
 import type { ComponentType, SVGProps } from 'react';
+import { Cpu } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { AgentModel, ModelProvider } from '@automaker/types';
 import { getProviderFromModel } from '@/lib/utils';
@@ -95,6 +96,10 @@ export function GrokIcon(props: Omit<ProviderIconProps, 'provider'>) {
   return <ProviderIcon provider={PROVIDER_ICON_KEYS.grok} {...props} />;
 }
 
+export function OpenCodeIcon({ className, ...props }: { className?: string }) {
+  return <Cpu className={cn('inline-block', className)} {...props} />;
+}
+
 export const PROVIDER_ICON_COMPONENTS: Record<
   ModelProvider,
   ComponentType<{ className?: string }>
@@ -102,6 +107,7 @@ export const PROVIDER_ICON_COMPONENTS: Record<
   claude: AnthropicIcon,
   cursor: CursorIcon, // Default for Cursor provider (will be overridden by getProviderIconForModel)
   codex: OpenAIIcon,
+  opencode: OpenCodeIcon,
 };
 
 /**

apps/ui/src/components/views/settings-view.tsx

@@ -18,7 +18,12 @@ import { FeatureDefaultsSection } from './settings-view/feature-defaults/feature
 import { DangerZoneSection } from './settings-view/danger-zone/danger-zone-section';
 import { AccountSection } from './settings-view/account';
 import { SecuritySection } from './settings-view/security';
-import { ClaudeSettingsTab, CursorSettingsTab, CodexSettingsTab } from './settings-view/providers';
+import {
+  ClaudeSettingsTab,
+  CursorSettingsTab,
+  CodexSettingsTab,
+  OpencodeSettingsTab,
+} from './settings-view/providers';
 import { MCPServersSection } from './settings-view/mcp-servers';
 import { PromptCustomizationSection } from './settings-view/prompts';
 import type { Project as SettingsProject, Theme } from './settings-view/shared/types';
@@ -109,6 +114,8 @@ export function SettingsView() {
         return <CursorSettingsTab />;
       case 'codex-provider':
         return <CodexSettingsTab />;
+      case 'opencode-provider':
+        return <OpencodeSettingsTab />;
       case 'providers':
       case 'claude': // Backwards compatibility - redirect to claude-provider
         return <ClaudeSettingsTab />;

apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx

@@ -0,0 +1,306 @@
+import { Button } from '@/components/ui/button';
+import { CheckCircle2, AlertCircle, RefreshCw, XCircle, Bot } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CliStatus } from '../shared/types';
+
+export type OpencodeAuthMethod =
+  | 'api_key_env' // ANTHROPIC_API_KEY or other provider env vars
+  | 'api_key' // Manually stored API key
+  | 'oauth' // OAuth authentication
+  | 'config_file' // Config file with credentials
+  | 'none';
+
+export interface OpencodeAuthStatus {
+  authenticated: boolean;
+  method: OpencodeAuthMethod;
+  hasApiKey?: boolean;
+  hasEnvApiKey?: boolean;
+  hasOAuthToken?: boolean;
+  error?: string;
+}
+
+function getAuthMethodLabel(method: OpencodeAuthMethod): string {
+  switch (method) {
+    case 'api_key':
+      return 'API Key';
+    case 'api_key_env':
+      return 'API Key (Environment)';
+    case 'oauth':
+      return 'OAuth Authentication';
+    case 'config_file':
+      return 'Configuration File';
+    default:
+      return method || 'Unknown';
+  }
+}
+
+interface OpencodeCliStatusProps {
+  status: CliStatus | null;
+  authStatus?: OpencodeAuthStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+function SkeletonPulse({ className }: { className?: string }) {
+  return <div className={cn('animate-pulse bg-muted/50 rounded', className)} />;
+}
+
+export function OpencodeCliStatusSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <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 justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <SkeletonPulse className="w-9 h-9 rounded-xl" />
+            <SkeletonPulse className="h-6 w-36" />
+          </div>
+          <SkeletonPulse className="w-9 h-9 rounded-lg" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-80" />
+        </div>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Installation status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-40" />
+            <SkeletonPulse className="h-3 w-32" />
+            <SkeletonPulse className="h-3 w-48" />
+          </div>
+        </div>
+        {/* Auth status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-28" />
+            <SkeletonPulse className="h-3 w-36" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function OpencodeModelConfigSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <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">
+          <SkeletonPulse className="w-9 h-9 rounded-xl" />
+          <SkeletonPulse className="h-6 w-40" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-72" />
+        </div>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Default Model skeleton */}
+        <div className="space-y-2">
+          <SkeletonPulse className="h-4 w-24" />
+          <SkeletonPulse className="h-10 w-full rounded-md" />
+        </div>
+        {/* Available Models skeleton */}
+        <div className="space-y-3">
+          <SkeletonPulse className="h-4 w-32" />
+          {/* Provider group skeleton */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <SkeletonPulse className="w-4 h-4 rounded" />
+              <SkeletonPulse className="h-4 w-20" />
+            </div>
+            <div className="grid gap-2">
+              {[1, 2, 3].map((i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between p-3 rounded-xl border border-border/30 bg-muted/10"
+                >
+                  <div className="flex items-center gap-3">
+                    <SkeletonPulse className="w-5 h-5 rounded" />
+                    <div className="space-y-1.5">
+                      <SkeletonPulse className="h-4 w-32" />
+                      <SkeletonPulse className="h-3 w-48" />
+                    </div>
+                  </div>
+                  <SkeletonPulse className="h-5 w-12 rounded-full" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function OpencodeCliStatus({
+  status,
+  authStatus,
+  isChecking,
+  onRefresh,
+}: OpencodeCliStatusProps) {
+  if (!status) return <OpencodeCliStatusSkeleton />;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <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 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" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">OpenCode CLI</h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-opencode-cli"
+            title="Refresh OpenCode CLI detection"
+            className={cn(
+              'h-9 w-9 rounded-lg',
+              'hover:bg-accent/50 hover:scale-105',
+              'transition-all duration-200'
+            )}
+          >
+            <RefreshCw className={cn('w-4 h-4', isChecking && 'animate-spin')} />
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          OpenCode CLI provides multi-provider AI support with Claude, GPT, and Gemini models.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {status.success && status.status === 'installed' ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">OpenCode CLI Installed</p>
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
+                  {status.method && (
+                    <p>
+                      Method: <span className="font-mono">{status.method}</span>
+                    </p>
+                  )}
+                  {status.version && (
+                    <p>
+                      Version: <span className="font-mono">{status.version}</span>
+                    </p>
+                  )}
+                  {status.path && (
+                    <p className="truncate" title={status.path}>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Authentication Status */}
+            {authStatus?.authenticated ? (
+              <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-emerald-400">Authenticated</p>
+                  <div className="text-xs text-emerald-400/70 mt-1.5">
+                    <p>
+                      Method:{' '}
+                      <span className="font-mono">{getAuthMethodLabel(authStatus.method)}</span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+                <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                  <XCircle className="w-5 h-5 text-amber-500" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-amber-400">Not Authenticated</p>
+                  <p className="text-xs text-amber-400/70 mt-1">
+                    Run{' '}
+                    <code className="font-mono bg-amber-500/10 px-1 rounded">opencode auth</code> or
+                    set an API key to authenticate.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground/70 ml-1">{status.recommendation}</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-amber-400">OpenCode CLI Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  {status.recommendation || 'Install OpenCode CLI to use multi-provider AI models.'}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">Installation Commands:</p>
+                <div className="space-y-2">
+                  {status.installCommands.npm && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        npm
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.macos && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        macOS/Linux
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.macos}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/settings-view/config/navigation.ts

@@ -14,6 +14,7 @@ import {
   MessageSquareText,
   User,
   Shield,
+  Cpu,
 } from 'lucide-react';
 import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';
 import type { SettingsViewId } from '../hooks/use-settings-view';
@@ -41,6 +42,7 @@ export const GLOBAL_NAV_ITEMS: NavigationItem[] = [
       { 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: 'mcp-servers', label: 'MCP Servers', icon: Plug },

apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts

@@ -7,6 +7,7 @@ export type SettingsViewId =
   | 'claude-provider'
   | 'cursor-provider'
   | 'codex-provider'
+  | 'opencode-provider'
   | 'mcp-servers'
   | 'prompts'
   | 'model-defaults'

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

@@ -8,10 +8,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Cpu } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { CodexModelId } from '@automaker/types';
-import { CODEX_MODEL_MAP } from '@automaker/types';
 import { OpenAIIcon } from '@/components/ui/provider-icon';
 
 interface CodexModelConfigurationProps {
@@ -165,18 +163,6 @@ export function CodexModelConfiguration({
   );
 }
 
-function getModelDisplayName(modelId: string): string {
-  const displayNames: Record<string, string> = {
-    'gpt-5.2-codex': 'GPT-5.2-Codex',
-    'gpt-5-codex': 'GPT-5-Codex',
-    'gpt-5-codex-mini': 'GPT-5-Codex-Mini',
-    'codex-1': 'Codex-1',
-    'codex-mini-latest': 'Codex-Mini-Latest',
-    'gpt-5': 'GPT-5',
-  };
-  return displayNames[modelId] || modelId;
-}
-
 function supportsReasoningEffort(modelId: string): boolean {
   const reasoningModels = ['gpt-5.2-codex', 'gpt-5-codex', 'gpt-5', 'codex-1'];
   return reasoningModels.includes(modelId);

apps/ui/src/components/views/settings-view/providers/index.ts

@@ -2,3 +2,4 @@ export { ProviderTabs } from './provider-tabs';
 export { ClaudeSettingsTab } from './claude-settings-tab';
 export { CursorSettingsTab } from './cursor-settings-tab';
 export { CodexSettingsTab } from './codex-settings-tab';
+export { OpencodeSettingsTab } from './opencode-settings-tab';

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

@@ -0,0 +1,231 @@
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  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 type { ComponentType } from 'react';
+
+interface OpencodeModelConfigurationProps {
+  enabledOpencodeModels: OpencodeModelId[];
+  opencodeDefaultModel: OpencodeModelId;
+  isSaving: boolean;
+  onDefaultModelChange: (model: OpencodeModelId) => void;
+  onModelToggle: (model: OpencodeModelId, enabled: boolean) => void;
+}
+
+/**
+ * Returns the appropriate icon component for a given OpenCode provider
+ */
+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;
+  }
+}
+
+/**
+ * Returns a formatted provider label for display
+ */
+function getProviderLabel(provider: OpencodeProvider): string {
+  switch (provider) {
+    case 'opencode':
+      return 'OpenCode (Free)';
+    case 'amazon-bedrock-anthropic':
+      return 'Claude (Bedrock)';
+    case 'amazon-bedrock-deepseek':
+      return 'DeepSeek (Bedrock)';
+    case 'amazon-bedrock-amazon':
+      return 'Amazon Nova (Bedrock)';
+    case 'amazon-bedrock-meta':
+      return 'Meta Llama (Bedrock)';
+    case 'amazon-bedrock-mistral':
+      return 'Mistral (Bedrock)';
+    case 'amazon-bedrock-qwen':
+      return 'Qwen (Bedrock)';
+    default:
+      return provider;
+  }
+}
+
+export function OpencodeModelConfiguration({
+  enabledOpencodeModels,
+  opencodeDefaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+}: OpencodeModelConfigurationProps) {
+  // Group models by provider for organized display
+  const modelsByProvider = OPENCODE_MODELS.reduce(
+    (acc, model) => {
+      if (!acc[model.provider]) {
+        acc[model.provider] = [];
+      }
+      acc[model.provider].push(model);
+      return acc;
+    },
+    {} as Record<OpencodeProvider, OpencodeModelConfig[]>
+  );
+
+  // Order: Free tier first, then Claude, then others
+  const providerOrder: OpencodeProvider[] = [
+    'opencode',
+    'amazon-bedrock-anthropic',
+    'amazon-bedrock-deepseek',
+    'amazon-bedrock-amazon',
+    'amazon-bedrock-meta',
+    'amazon-bedrock-mistral',
+    'amazon-bedrock-qwen',
+  ];
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <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" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Model Configuration
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure which OpenCode models are available in the feature modal
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Default Model Selection */}
+        <div className="space-y-2">
+          <Label>Default Model</Label>
+          <Select
+            value={opencodeDefaultModel}
+            onValueChange={(v) => onDefaultModelChange(v as OpencodeModelId)}
+            disabled={isSaving}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {enabledOpencodeModels.map((modelId) => {
+                const model = OPENCODE_MODEL_CONFIG_MAP[modelId];
+                if (!model) return null;
+                const ProviderIconComponent = getProviderIcon(model.provider);
+                return (
+                  <SelectItem key={modelId} value={modelId}>
+                    <div className="flex items-center gap-2">
+                      <ProviderIconComponent className="w-4 h-4" />
+                      <span>{model.label}</span>
+                    </div>
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Available Models grouped by provider */}
+        <div className="space-y-4">
+          <Label>Available Models</Label>
+          {providerOrder.map((provider) => {
+            const models = modelsByProvider[provider];
+            if (!models || models.length === 0) return null;
+
+            const ProviderIconComponent = getProviderIcon(provider);
+
+            return (
+              <div key={provider} className="space-y-2">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <ProviderIconComponent className="w-4 h-4" />
+                  <span className="font-medium">{getProviderLabel(provider)}</span>
+                  {provider === 'opencode' && (
+                    <Badge
+                      variant="outline"
+                      className="text-xs bg-green-500/10 text-green-500 border-green-500/30"
+                    >
+                      Free
+                    </Badge>
+                  )}
+                </div>
+                <div className="grid gap-2">
+                  {models.map((model) => {
+                    const isEnabled = enabledOpencodeModels.includes(model.id);
+                    const isDefault = model.id === opencodeDefaultModel;
+
+                    return (
+                      <div
+                        key={model.id}
+                        className="flex items-center justify-between p-3 rounded-xl border border-border/50 bg-card/50 hover:bg-accent/30 transition-colors"
+                      >
+                        <div className="flex items-center gap-3">
+                          <Checkbox
+                            checked={isEnabled}
+                            onCheckedChange={(checked) => onModelToggle(model.id, !!checked)}
+                            disabled={isSaving || isDefault}
+                          />
+                          <div>
+                            <div className="flex items-center gap-2">
+                              <span className="text-sm font-medium">{model.label}</span>
+                              {model.supportsVision && (
+                                <Badge variant="outline" className="text-xs">
+                                  Vision
+                                </Badge>
+                              )}
+                              {model.tier === 'free' && (
+                                <Badge
+                                  variant="outline"
+                                  className="text-xs bg-green-500/10 text-green-500 border-green-500/30"
+                                >
+                                  Free
+                                </Badge>
+                              )}
+                              {isDefault && (
+                                <Badge variant="secondary" className="text-xs">
+                                  Default
+                                </Badge>
+                              )}
+                            </div>
+                            <p className="text-xs text-muted-foreground">{model.description}</p>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,180 @@
+import { useState, useCallback, useEffect } from 'react';
+import { toast } from 'sonner';
+import { useAppStore } from '@/store/app-store';
+import {
+  OpencodeCliStatus,
+  OpencodeCliStatusSkeleton,
+  OpencodeModelConfigSkeleton,
+} from '../cli-status/opencode-cli-status';
+import { OpencodeModelConfiguration } from './opencode-model-configuration';
+import { getElectronAPI } from '@/lib/electron';
+import { createLogger } from '@automaker/utils/logger';
+import type { CliStatus as SharedCliStatus } from '../shared/types';
+import type { OpencodeModelId } from '@automaker/types';
+import type { OpencodeAuthStatus } from '../cli-status/opencode-cli-status';
+
+const logger = createLogger('OpencodeSettings');
+
+export function OpencodeSettingsTab() {
+  const {
+    enabledOpencodeModels,
+    opencodeDefaultModel,
+    setOpencodeDefaultModel,
+    toggleOpencodeModel,
+  } = useAppStore();
+
+  const [isCheckingOpencodeCli, setIsCheckingOpencodeCli] = useState(false);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [cliStatus, setCliStatus] = useState<SharedCliStatus | null>(null);
+  const [authStatus, setAuthStatus] = useState<OpencodeAuthStatus | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Load OpenCode CLI status on mount
+  useEffect(() => {
+    const checkOpencodeStatus = async () => {
+      setIsCheckingOpencodeCli(true);
+      try {
+        const api = getElectronAPI();
+        if (api?.setup?.getOpencodeStatus) {
+          const result = await api.setup.getOpencodeStatus();
+          setCliStatus({
+            success: result.success,
+            status: result.installed ? 'installed' : 'not_installed',
+            method: result.auth?.method,
+            version: result.version,
+            path: result.path,
+            recommendation: result.recommendation,
+            installCommands: result.installCommands,
+          });
+          // Set auth status if available
+          if (result.auth) {
+            setAuthStatus({
+              authenticated: result.auth.authenticated,
+              method: (result.auth.method as OpencodeAuthStatus['method']) || 'none',
+              hasApiKey: result.auth.hasApiKey,
+              hasEnvApiKey: result.auth.hasEnvApiKey,
+              hasOAuthToken: result.auth.hasOAuthToken,
+            });
+          }
+        } else {
+          // Fallback for web mode or when API is not available
+          setCliStatus({
+            success: false,
+            status: 'not_installed',
+            recommendation: 'OpenCode CLI detection is only available in desktop mode.',
+          });
+        }
+      } catch (error) {
+        logger.error('Failed to check OpenCode CLI status:', error);
+        setCliStatus({
+          success: false,
+          status: 'not_installed',
+          error: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsCheckingOpencodeCli(false);
+        setIsInitialLoading(false);
+      }
+    };
+    checkOpencodeStatus();
+  }, []);
+
+  const handleRefreshOpencodeCli = useCallback(async () => {
+    setIsCheckingOpencodeCli(true);
+    try {
+      const api = getElectronAPI();
+      if (api?.setup?.getOpencodeStatus) {
+        const result = await api.setup.getOpencodeStatus();
+        setCliStatus({
+          success: result.success,
+          status: result.installed ? 'installed' : 'not_installed',
+          method: result.auth?.method,
+          version: result.version,
+          path: result.path,
+          recommendation: result.recommendation,
+          installCommands: result.installCommands,
+        });
+        // Update auth status if available
+        if (result.auth) {
+          setAuthStatus({
+            authenticated: result.auth.authenticated,
+            method: (result.auth.method as OpencodeAuthStatus['method']) || 'none',
+            hasApiKey: result.auth.hasApiKey,
+            hasEnvApiKey: result.auth.hasEnvApiKey,
+            hasOAuthToken: result.auth.hasOAuthToken,
+          });
+        }
+      }
+    } catch (error) {
+      logger.error('Failed to refresh OpenCode CLI status:', error);
+      toast.error('Failed to refresh OpenCode CLI status');
+    } finally {
+      setIsCheckingOpencodeCli(false);
+    }
+  }, []);
+
+  const handleDefaultModelChange = useCallback(
+    (model: OpencodeModelId) => {
+      setIsSaving(true);
+      try {
+        setOpencodeDefaultModel(model);
+        toast.success('Default model updated');
+      } catch (error) {
+        toast.error('Failed to update default model');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [setOpencodeDefaultModel]
+  );
+
+  const handleModelToggle = useCallback(
+    (model: OpencodeModelId, enabled: boolean) => {
+      setIsSaving(true);
+      try {
+        toggleOpencodeModel(model, enabled);
+      } catch (error) {
+        toast.error('Failed to update models');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [toggleOpencodeModel]
+  );
+
+  // Show loading skeleton during initial load
+  if (isInitialLoading) {
+    return (
+      <div className="space-y-6">
+        <OpencodeCliStatusSkeleton />
+        <OpencodeModelConfigSkeleton />
+      </div>
+    );
+  }
+
+  const isCliInstalled = cliStatus?.success && cliStatus?.status === 'installed';
+
+  return (
+    <div className="space-y-6">
+      <OpencodeCliStatus
+        status={cliStatus}
+        authStatus={authStatus}
+        isChecking={isCheckingOpencodeCli}
+        onRefresh={handleRefreshOpencodeCli}
+      />
+
+      {/* Model Configuration - Only show when CLI is installed */}
+      {isCliInstalled && (
+        <OpencodeModelConfiguration
+          enabledOpencodeModels={enabledOpencodeModels}
+          opencodeDefaultModel={opencodeDefaultModel}
+          isSaving={isSaving}
+          onDefaultModelChange={handleDefaultModelChange}
+          onModelToggle={handleModelToggle}
+        />
+      )}
+    </div>
+  );
+}
+
+export default OpencodeSettingsTab;

apps/ui/src/components/views/settings-view/providers/provider-tabs.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';
+import { Cpu } from 'lucide-react';
 import { CursorSettingsTab } from './cursor-settings-tab';
 import { ClaudeSettingsTab } from './claude-settings-tab';
 import { CodexSettingsTab } from './codex-settings-tab';
+import { OpencodeSettingsTab } from './opencode-settings-tab';
 
 interface ProviderTabsProps {
-  defaultTab?: 'claude' | 'cursor' | 'codex';
+  defaultTab?: 'claude' | 'cursor' | 'codex' | 'opencode';
 }
 
 export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
   return (
     <Tabs defaultValue={defaultTab} className="w-full">
-      <TabsList className="grid w-full grid-cols-3 mb-6">
+      <TabsList className="grid w-full grid-cols-4 mb-6">
         <TabsTrigger value="claude" className="flex items-center gap-2">
           <AnthropicIcon className="w-4 h-4" />
           Claude
@@ -25,6 +27,10 @@ export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
           <OpenAIIcon className="w-4 h-4" />
           Codex
         </TabsTrigger>
+        <TabsTrigger value="opencode" className="flex items-center gap-2">
+          <Cpu className="w-4 h-4" />
+          OpenCode
+        </TabsTrigger>
       </TabsList>
 
       <TabsContent value="claude">
@@ -38,6 +44,10 @@ export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
       <TabsContent value="codex">
         <CodexSettingsTab />
       </TabsContent>
+
+      <TabsContent value="opencode">
+        <OpencodeSettingsTab />
+      </TabsContent>
     </Tabs>
   );
 }

apps/ui/src/components/views/setup-view.tsx

@@ -8,6 +8,7 @@ import {
   ClaudeSetupStep,
   CursorSetupStep,
   CodexSetupStep,
+  OpencodeSetupStep,
   GitHubSetupStep,
 } from './setup-view/steps';
 import { useNavigate } from '@tanstack/react-router';
@@ -19,7 +20,16 @@ export function SetupView() {
   const { currentStep, setCurrentStep, completeSetup, setSkipClaudeSetup } = useSetupStore();
   const navigate = useNavigate();
 
-  const steps = ['welcome', 'theme', 'claude', 'cursor', 'codex', 'github', 'complete'] as const;
+  const steps = [
+    'welcome',
+    'theme',
+    'claude',
+    'cursor',
+    'codex',
+    'opencode',
+    'github',
+    'complete',
+  ] as const;
   type StepName = (typeof steps)[number];
   const getStepName = (): StepName => {
     if (currentStep === 'claude_detect' || currentStep === 'claude_auth') return 'claude';
@@ -27,6 +37,7 @@ export function SetupView() {
     if (currentStep === 'theme') return 'theme';
     if (currentStep === 'cursor') return 'cursor';
     if (currentStep === 'codex') return 'codex';
+    if (currentStep === 'opencode') return 'opencode';
     if (currentStep === 'github') return 'github';
     return 'complete';
   };
@@ -52,6 +63,10 @@ export function SetupView() {
         setCurrentStep('codex');
         break;
       case 'codex':
+        logger.debug('[Setup Flow] Moving to opencode step');
+        setCurrentStep('opencode');
+        break;
+      case 'opencode':
         logger.debug('[Setup Flow] Moving to github step');
         setCurrentStep('github');
         break;
@@ -77,9 +92,12 @@ export function SetupView() {
       case 'codex':
         setCurrentStep('cursor');
         break;
-      case 'github':
+      case 'opencode':
         setCurrentStep('codex');
         break;
+      case 'github':
+        setCurrentStep('opencode');
+        break;
     }
   };
 
@@ -96,6 +114,11 @@ export function SetupView() {
 
   const handleSkipCodex = () => {
     logger.debug('[Setup Flow] Skipping Codex setup');
+    setCurrentStep('opencode');
+  };
+
+  const handleSkipOpencode = () => {
+    logger.debug('[Setup Flow] Skipping OpenCode setup');
     setCurrentStep('github');
   };
 
@@ -161,6 +184,14 @@ export function SetupView() {
               />
             )}
 
+            {currentStep === 'opencode' && (
+              <OpencodeSetupStep
+                onNext={() => handleNext('opencode')}
+                onBack={() => handleBack('opencode')}
+                onSkip={handleSkipOpencode}
+              />
+            )}
+
             {currentStep === 'github' && (
               <GitHubSetupStep
                 onNext={() => handleNext('github')}

apps/ui/src/components/views/setup-view/steps/index.ts

@@ -5,4 +5,5 @@ export { CompleteStep } from './complete-step';
 export { ClaudeSetupStep } from './claude-setup-step';
 export { CursorSetupStep } from './cursor-setup-step';
 export { CodexSetupStep } from './codex-setup-step';
+export { OpencodeSetupStep } from './opencode-setup-step';
 export { GitHubSetupStep } from './github-setup-step';

apps/ui/src/components/views/setup-view/steps/opencode-setup-step.tsx

@@ -0,0 +1,369 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { useSetupStore } from '@/store/setup-store';
+import { getElectronAPI } from '@/lib/electron';
+import {
+  CheckCircle2,
+  Loader2,
+  ArrowRight,
+  ArrowLeft,
+  ExternalLink,
+  Copy,
+  RefreshCw,
+  AlertTriangle,
+  XCircle,
+  Terminal,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { StatusBadge } from '../components';
+
+const logger = createLogger('OpencodeSetupStep');
+
+interface OpencodeSetupStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  onSkip: () => void;
+}
+
+interface OpencodeCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+}
+
+export function OpencodeSetupStep({ onNext, onBack, onSkip }: OpencodeSetupStepProps) {
+  const { opencodeCliStatus, setOpencodeCliStatus } = useSetupStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getOpencodeStatus) {
+        return;
+      }
+      const result = await api.setup.getOpencodeStatus();
+      if (result.success) {
+        const status: OpencodeCliStatus = {
+          installed: result.installed ?? false,
+          version: result.version,
+          path: result.path,
+          auth: result.auth,
+          installCommand: result.installCommand,
+          loginCommand: result.loginCommand,
+        };
+        setOpencodeCliStatus(status);
+
+        if (result.auth?.authenticated) {
+          toast.success('OpenCode CLI is ready!');
+        }
+      }
+    } catch (error) {
+      logger.error('Failed to check OpenCode status:', error);
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setOpencodeCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    // Cleanup polling on unmount
+    return () => {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current);
+      }
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+
+    try {
+      // Copy login command to clipboard and show instructions
+      const loginCommand = opencodeCliStatus?.loginCommand || 'opencode login';
+      await navigator.clipboard.writeText(loginCommand);
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      // Poll for auth status
+      let attempts = 0;
+      const maxAttempts = 60; // 2 minutes with 2s interval
+
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getOpencodeStatus) {
+            return;
+          }
+          const result = await api.setup.getOpencodeStatus();
+
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setOpencodeCliStatus({
+              ...opencodeCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            } as OpencodeCliStatus);
+            setIsLoggingIn(false);
+            toast.success('Successfully logged in to OpenCode!');
+          }
+        } catch {
+          // Ignore polling errors
+        }
+
+        if (attempts >= maxAttempts) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch (error) {
+      logger.error('Login failed:', error);
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = opencodeCliStatus?.installed && opencodeCliStatus?.auth?.authenticated;
+
+  const getStatusBadge = () => {
+    if (isChecking) {
+      return <StatusBadge status="checking" label="Checking..." />;
+    }
+    if (opencodeCliStatus?.auth?.authenticated) {
+      return <StatusBadge status="authenticated" label="Ready" />;
+    }
+    if (opencodeCliStatus?.installed) {
+      return <StatusBadge status="unverified" label="Not Logged In" />;
+    }
+    return <StatusBadge status="not_installed" label="Not Installed" />;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-xl bg-green-500/10 flex items-center justify-center mx-auto mb-4">
+          <Terminal className="w-8 h-8 text-green-500" />
+        </div>
+        <h2 className="text-2xl font-bold text-foreground mb-2">OpenCode CLI Setup</h2>
+        <p className="text-muted-foreground">Optional - Use OpenCode as an AI provider</p>
+      </div>
+
+      {/* Info Banner */}
+      <Card className="bg-green-500/10 border-green-500/20">
+        <CardContent className="pt-4">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" />
+            <div>
+              <p className="font-medium text-foreground">This step is optional</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                Configure OpenCode CLI for access to free tier models and AWS Bedrock models. You
+                can skip this and use other providers, or configure it later in Settings.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Status Card */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg flex items-center gap-2">
+              <Terminal className="w-5 h-5" />
+              OpenCode CLI Status
+              <Badge variant="outline" className="ml-2">
+                Optional
+              </Badge>
+            </CardTitle>
+            <div className="flex items-center gap-2">
+              {getStatusBadge()}
+              <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+                <RefreshCw className={`w-4 h-4 ${isChecking ? 'animate-spin' : ''}`} />
+              </Button>
+            </div>
+          </div>
+          <CardDescription>
+            {opencodeCliStatus?.installed
+              ? opencodeCliStatus.auth?.authenticated
+                ? `Authenticated via ${opencodeCliStatus.auth.method === 'api_key' ? 'API Key' : 'Browser Login'}${opencodeCliStatus.version ? ` (v${opencodeCliStatus.version})` : ''}`
+                : 'Installed but not authenticated'
+              : 'Not installed on your system'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Success State */}
+          {isReady && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">OpenCode CLI is ready!</p>
+                <p className="text-sm text-muted-foreground">
+                  You can use OpenCode models for AI tasks.
+                  {opencodeCliStatus?.version && (
+                    <span className="ml-1">Version: {opencodeCliStatus.version}</span>
+                  )}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Not Installed */}
+          {!opencodeCliStatus?.installed && !isChecking && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">OpenCode CLI not found</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Install the OpenCode CLI to use free tier and AWS Bedrock models.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <p className="font-medium text-foreground text-sm">Install OpenCode CLI:</p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                    {opencodeCliStatus?.installCommand || 'npm install -g opencode'}
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() =>
+                      copyCommand(opencodeCliStatus?.installCommand || 'npm install -g opencode')
+                    }
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+                <a
+                  href="https://github.com/opencode-ai/opencode"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center text-sm text-brand-500 hover:underline mt-2"
+                >
+                  View installation docs
+                  <ExternalLink className="w-3 h-3 ml-1" />
+                </a>
+              </div>
+            </div>
+          )}
+
+          {/* Installed but not authenticated */}
+          {opencodeCliStatus?.installed &&
+            !opencodeCliStatus?.auth?.authenticated &&
+            !isChecking && (
+              <div className="space-y-4">
+                <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+                  <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+                  <div className="flex-1">
+                    <p className="font-medium text-foreground">OpenCode CLI not authenticated</p>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      Run the login command to authenticate with OpenCode.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+                  <p className="text-sm text-muted-foreground">
+                    Run the login command in your terminal, then complete authentication in your
+                    browser:
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                      {opencodeCliStatus?.loginCommand || 'opencode login'}
+                    </code>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() =>
+                        copyCommand(opencodeCliStatus?.loginCommand || 'opencode login')
+                      }
+                    >
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <Button
+                    onClick={handleLogin}
+                    disabled={isLoggingIn}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                  >
+                    {isLoggingIn ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Waiting for login...
+                      </>
+                    ) : (
+                      'Copy Command & Wait for Login'
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+          {/* Loading State */}
+          {isChecking && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+              <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
+              <div>
+                <p className="font-medium text-foreground">Checking OpenCode CLI status...</p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Navigation */}
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack} className="text-muted-foreground">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={onSkip} className="text-muted-foreground">
+            {isReady ? 'Skip' : 'Skip for now'}
+          </Button>
+          <Button
+            onClick={onNext}
+            className="bg-brand-500 hover:bg-brand-600 text-white"
+            data-testid="opencode-next-button"
+          >
+            {isReady ? 'Continue' : 'Continue without OpenCode'}
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Info note */}
+      <p className="text-xs text-muted-foreground text-center">
+        You can always configure OpenCode later in Settings
+      </p>
+    </div>
+  );
+}