feat: enhance feature dialogs with OpenCode model support

- Added OpenCode model selection to AddFeatureDialog and EditFeatureDialog.
- Introduced ProfileTypeahead component for improved profile selection.
- Updated model constants to include OpenCode models and integrated them into the PhaseModelSelector.
- Enhanced planning mode options with new UI elements for OpenCode.
- Refactored existing components to streamline model handling and improve user experience.

This commit expands the functionality of the feature dialogs, allowing users to select and manage OpenCode models effectively.

apps/ui/src/components/views/board-view/shared/index.ts

@@ -4,6 +4,7 @@ export * from './thinking-level-selector';
 export * from './reasoning-effort-selector';
 export * from './profile-quick-select';
 export * from './profile-select';
+export * from './profile-typeahead';
 export * from './testing-tab-content';
 export * from './priority-selector';
 export * from './priority-select';

apps/ui/src/components/views/board-view/shared/model-constants.ts

@@ -1,8 +1,12 @@
 import type { ModelAlias } from '@/store/app-store';
 import type { ModelProvider, ThinkingLevel, ReasoningEffort } from '@automaker/types';
-import { CURSOR_MODEL_MAP, CODEX_MODEL_MAP } from '@automaker/types';
+import {
+  CURSOR_MODEL_MAP,
+  CODEX_MODEL_MAP,
+  OPENCODE_MODELS as OPENCODE_MODEL_CONFIGS,
+} from '@automaker/types';
 import { Brain, Zap, Scale, Cpu, Rocket, Sparkles } from 'lucide-react';
-import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';
+import { AnthropicIcon, CursorIcon, OpenAIIcon, OpenCodeIcon } from '@/components/ui/provider-icon';
 
 export type ModelOption = {
   id: string; // Claude models use ModelAlias, Cursor models use "cursor-{id}"
@@ -99,9 +103,25 @@ export const CODEX_MODELS: ModelOption[] = [
 ];
 
 /**
- * All available models (Claude + Cursor + Codex)
+ * OpenCode models derived from OPENCODE_MODEL_CONFIGS
  */
-export const ALL_MODELS: ModelOption[] = [...CLAUDE_MODELS, ...CURSOR_MODELS, ...CODEX_MODELS];
+export const OPENCODE_MODELS: ModelOption[] = OPENCODE_MODEL_CONFIGS.map((config) => ({
+  id: config.id,
+  label: config.label,
+  description: config.description,
+  badge: config.tier === 'free' ? 'Free' : config.tier === 'premium' ? 'Premium' : undefined,
+  provider: 'opencode' as ModelProvider,
+}));
+
+/**
+ * All available models (Claude + Cursor + Codex + OpenCode)
+ */
+export const ALL_MODELS: ModelOption[] = [
+  ...CLAUDE_MODELS,
+  ...CURSOR_MODELS,
+  ...CODEX_MODELS,
+  ...OPENCODE_MODELS,
+];
 
 export const THINKING_LEVELS: ThinkingLevel[] = ['none', 'low', 'medium', 'high', 'ultrathink'];
 
@@ -146,4 +166,5 @@ export const PROFILE_ICONS: Record<string, React.ComponentType<{ className?: str
   Anthropic: AnthropicIcon,
   Cursor: CursorIcon,
   Codex: OpenAIIcon,
+  OpenCode: OpenCodeIcon,
 };

apps/ui/src/components/views/board-view/shared/planning-mode-select.tsx

@@ -19,6 +19,8 @@ interface PlanningModeSelectProps {
   testIdPrefix?: string;
   className?: string;
   disabled?: boolean;
+  /** If true, only renders the dropdown without description or checkbox */
+  compact?: boolean;
 }
 
 const modes = [
@@ -81,47 +83,58 @@ export function PlanningModeSelect({
   testIdPrefix = 'planning-mode',
   className,
   disabled = false,
+  compact = false,
 }: PlanningModeSelectProps) {
   const selectedMode = modes.find((m) => m.value === mode);
 
   // Disable approval checkbox for skip/lite modes since they don't use planning
   const isApprovalDisabled = disabled || mode === 'skip' || mode === 'lite';
 
+  const selectDropdown = (
+    <Select
+      value={mode}
+      onValueChange={(value: string) => onModeChange(value as PlanningMode)}
+      disabled={disabled}
+    >
+      <SelectTrigger className="h-9" data-testid={`${testIdPrefix}-select-trigger`}>
+        <SelectValue>
+          {selectedMode && (
+            <div className="flex items-center gap-2">
+              <selectedMode.icon className={cn('h-4 w-4', selectedMode.color)} />
+              <span>{selectedMode.label}</span>
+            </div>
+          )}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {modes.map((m) => {
+          const Icon = m.icon;
+          return (
+            <SelectItem
+              key={m.value}
+              value={m.value}
+              data-testid={`${testIdPrefix}-option-${m.value}`}
+            >
+              <div className="flex items-center gap-2">
+                <Icon className={cn('h-3.5 w-3.5', m.color)} />
+                <span>{m.label}</span>
+              </div>
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+
+  // Compact mode - just the dropdown
+  if (compact) {
+    return <div className={className}>{selectDropdown}</div>;
+  }
+
+  // Full mode with description and optional checkbox
   return (
     <div className={cn('space-y-2', className)}>
-      <Select
-        value={mode}
-        onValueChange={(value: string) => onModeChange(value as PlanningMode)}
-        disabled={disabled}
-      >
-        <SelectTrigger className="h-9" data-testid={`${testIdPrefix}-select-trigger`}>
-          <SelectValue>
-            {selectedMode && (
-              <div className="flex items-center gap-2">
-                <selectedMode.icon className={cn('h-4 w-4', selectedMode.color)} />
-                <span>{selectedMode.label}</span>
-              </div>
-            )}
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          {modes.map((m) => {
-            const Icon = m.icon;
-            return (
-              <SelectItem
-                key={m.value}
-                value={m.value}
-                data-testid={`${testIdPrefix}-option-${m.value}`}
-              >
-                <div className="flex items-center gap-2">
-                  <Icon className={cn('h-3.5 w-3.5', m.color)} />
-                  <span>{m.label}</span>
-                </div>
-              </SelectItem>
-            );
-          })}
-        </SelectContent>
-      </Select>
+      {selectDropdown}
       {selectedMode && <p className="text-xs text-muted-foreground">{selectedMode.description}</p>}
       {onRequireApprovalChange && (
         <div className="flex items-center gap-2 pt-1">

apps/ui/src/components/views/board-view/shared/priority-selector.tsx

@@ -1,4 +1,3 @@
-import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
 interface PrioritySelectorProps {
@@ -13,49 +12,46 @@ export function PrioritySelector({
   testIdPrefix = 'priority',
 }: PrioritySelectorProps) {
   return (
-    <div className="space-y-2">
-      <Label>Priority</Label>
-      <div className="flex gap-2">
-        <button
-          type="button"
-          onClick={() => onPrioritySelect(1)}
-          className={cn(
-            'flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors',
-            selectedPriority === 1
-              ? 'bg-red-500/20 text-red-500 border-2 border-red-500/50'
-              : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
-          )}
-          data-testid={`${testIdPrefix}-high-button`}
-        >
-          High
-        </button>
-        <button
-          type="button"
-          onClick={() => onPrioritySelect(2)}
-          className={cn(
-            'flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors',
-            selectedPriority === 2
-              ? 'bg-yellow-500/20 text-yellow-500 border-2 border-yellow-500/50'
-              : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
-          )}
-          data-testid={`${testIdPrefix}-medium-button`}
-        >
-          Medium
-        </button>
-        <button
-          type="button"
-          onClick={() => onPrioritySelect(3)}
-          className={cn(
-            'flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors',
-            selectedPriority === 3
-              ? 'bg-blue-500/20 text-blue-500 border-2 border-blue-500/50'
-              : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
-          )}
-          data-testid={`${testIdPrefix}-low-button`}
-        >
-          Low
-        </button>
-      </div>
+    <div className="flex gap-2">
+      <button
+        type="button"
+        onClick={() => onPrioritySelect(1)}
+        className={cn(
+          'flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+          selectedPriority === 1
+            ? 'bg-red-500/20 text-red-500 border-2 border-red-500/50'
+            : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
+        )}
+        data-testid={`${testIdPrefix}-high-button`}
+      >
+        High
+      </button>
+      <button
+        type="button"
+        onClick={() => onPrioritySelect(2)}
+        className={cn(
+          'flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+          selectedPriority === 2
+            ? 'bg-yellow-500/20 text-yellow-500 border-2 border-yellow-500/50'
+            : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
+        )}
+        data-testid={`${testIdPrefix}-medium-button`}
+      >
+        Medium
+      </button>
+      <button
+        type="button"
+        onClick={() => onPrioritySelect(3)}
+        className={cn(
+          'flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+          selectedPriority === 3
+            ? 'bg-blue-500/20 text-blue-500 border-2 border-blue-500/50'
+            : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
+        )}
+        data-testid={`${testIdPrefix}-low-button`}
+      >
+        Low
+      </button>
     </div>
   );
 }

apps/ui/src/components/views/board-view/shared/profile-typeahead.tsx

@@ -0,0 +1,237 @@
+import * as React from 'react';
+import { Check, ChevronsUpDown, UserCircle, Settings2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Badge } from '@/components/ui/badge';
+import type { AIProfile } from '@automaker/types';
+import { CURSOR_MODEL_MAP, profileHasThinking, getCodexModelLabel } from '@automaker/types';
+import { PROVIDER_ICON_COMPONENTS } from '@/components/ui/provider-icon';
+
+/**
+ * Get display string for a profile's model configuration
+ */
+function getProfileModelDisplay(profile: AIProfile): string {
+  if (profile.provider === 'cursor') {
+    const cursorModel = profile.cursorModel || 'auto';
+    const modelConfig = CURSOR_MODEL_MAP[cursorModel];
+    return modelConfig?.label || cursorModel;
+  }
+  if (profile.provider === 'codex') {
+    return getCodexModelLabel(profile.codexModel || 'codex-gpt-5.2-codex');
+  }
+  if (profile.provider === 'opencode') {
+    // Extract a short label from the opencode model
+    const modelId = profile.opencodeModel || '';
+    if (modelId.includes('/')) {
+      const parts = modelId.split('/');
+      return parts[parts.length - 1].split('.')[0] || modelId;
+    }
+    return modelId;
+  }
+  // Claude
+  return profile.model || 'sonnet';
+}
+
+/**
+ * Get display string for a profile's thinking configuration
+ */
+function getProfileThinkingDisplay(profile: AIProfile): string | null {
+  if (profile.provider === 'cursor' || profile.provider === 'codex') {
+    return profileHasThinking(profile) ? 'thinking' : null;
+  }
+  // Claude
+  return profile.thinkingLevel && profile.thinkingLevel !== 'none' ? profile.thinkingLevel : null;
+}
+
+interface ProfileTypeaheadProps {
+  profiles: AIProfile[];
+  selectedProfileId?: string;
+  onSelect: (profile: AIProfile) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  showManageLink?: boolean;
+  onManageLinkClick?: () => void;
+  testIdPrefix?: string;
+}
+
+export function ProfileTypeahead({
+  profiles,
+  selectedProfileId,
+  onSelect,
+  placeholder = 'Select profile...',
+  className,
+  disabled = false,
+  showManageLink = false,
+  onManageLinkClick,
+  testIdPrefix = 'profile-typeahead',
+}: ProfileTypeaheadProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+  const [triggerWidth, setTriggerWidth] = React.useState<number>(0);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+  const selectedProfile = React.useMemo(
+    () => profiles.find((p) => p.id === selectedProfileId),
+    [profiles, selectedProfileId]
+  );
+
+  // Update trigger width when component mounts or value changes
+  React.useEffect(() => {
+    if (triggerRef.current) {
+      const updateWidth = () => {
+        setTriggerWidth(triggerRef.current?.offsetWidth || 0);
+      };
+      updateWidth();
+      const resizeObserver = new ResizeObserver(updateWidth);
+      resizeObserver.observe(triggerRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [selectedProfileId]);
+
+  // Filter profiles based on input
+  const filteredProfiles = React.useMemo(() => {
+    if (!inputValue) return profiles;
+    const lower = inputValue.toLowerCase();
+    return profiles.filter(
+      (p) =>
+        p.name.toLowerCase().includes(lower) ||
+        p.description?.toLowerCase().includes(lower) ||
+        p.provider.toLowerCase().includes(lower)
+    );
+  }, [profiles, inputValue]);
+
+  const handleSelect = (profile: AIProfile) => {
+    onSelect(profile);
+    setInputValue('');
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          ref={triggerRef}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn('w-full justify-between h-9', className)}
+          data-testid={`${testIdPrefix}-trigger`}
+        >
+          <span className="flex items-center gap-2 truncate">
+            {selectedProfile ? (
+              <>
+                {(() => {
+                  const ProviderIcon = PROVIDER_ICON_COMPONENTS[selectedProfile.provider];
+                  return ProviderIcon ? (
+                    <ProviderIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
+                  ) : (
+                    <UserCircle className="w-4 h-4 shrink-0 text-muted-foreground" />
+                  );
+                })()}
+                <span className="truncate">{selectedProfile.name}</span>
+              </>
+            ) : (
+              <>
+                <UserCircle className="w-4 h-4 shrink-0 text-muted-foreground" />
+                <span className="text-muted-foreground">{placeholder}</span>
+              </>
+            )}
+          </span>
+          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        style={{ width: Math.max(triggerWidth, 280) }}
+        data-testid={`${testIdPrefix}-content`}
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder="Search profiles..."
+            className="h-9"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+          <CommandList className="max-h-[300px]">
+            <CommandEmpty>No profile found.</CommandEmpty>
+            <CommandGroup>
+              {filteredProfiles.map((profile) => {
+                const ProviderIcon = PROVIDER_ICON_COMPONENTS[profile.provider];
+                const isSelected = profile.id === selectedProfileId;
+                const modelDisplay = getProfileModelDisplay(profile);
+                const thinkingDisplay = getProfileThinkingDisplay(profile);
+
+                return (
+                  <CommandItem
+                    key={profile.id}
+                    value={profile.id}
+                    onSelect={() => handleSelect(profile)}
+                    className="flex items-center gap-2 py-2"
+                    data-testid={`${testIdPrefix}-option-${profile.id}`}
+                  >
+                    <div className="flex items-center gap-2 flex-1 min-w-0">
+                      {ProviderIcon ? (
+                        <ProviderIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
+                      ) : (
+                        <UserCircle className="w-4 h-4 shrink-0 text-muted-foreground" />
+                      )}
+                      <div className="flex flex-col min-w-0 flex-1">
+                        <span className="text-sm font-medium truncate">{profile.name}</span>
+                        <span className="text-xs text-muted-foreground truncate">
+                          {modelDisplay}
+                          {thinkingDisplay && (
+                            <span className="text-amber-500"> + {thinkingDisplay}</span>
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 shrink-0">
+                      {profile.isBuiltIn && (
+                        <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+                          Built-in
+                        </Badge>
+                      )}
+                      <Check className={cn('h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')} />
+                    </div>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {showManageLink && onManageLinkClick && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => {
+                      setOpen(false);
+                      onManageLinkClick();
+                    }}
+                    className="text-muted-foreground"
+                    data-testid={`${testIdPrefix}-manage-link`}
+                  >
+                    <Settings2 className="w-4 h-4 mr-2" />
+                    Manage AI Profiles
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}