@shepai/cli 1.77.2-pr240.88b3534 → 1.77.2-pr243.1fc63c3

package/web/.next/standalone/src/presentation/web/components/common/feature-node/feature-node-state-config.ts

@@ -13,9 +13,7 @@ export type FeatureNodeState =
 
 export type FeatureLifecyclePhase =
   | 'requirements'
-  | 'gathering'
   | 'research'
-  | 'planning'
   | 'implementation'
   | 'review'
   | 'deploy'
@@ -24,9 +22,7 @@ export type FeatureLifecyclePhase =
 /** Human-readable display labels for lifecycle phases. */
 export const lifecycleDisplayLabels: Record<FeatureLifecyclePhase, string> = {
   requirements: 'REQUIREMENTS',
-  gathering: 'REQUIREMENTS',
   research: 'RESEARCH',
-  planning: 'PLANNING',
   implementation: 'IMPLEMENTATION',
   review: 'REVIEW',
   deploy: 'DEPLOY & QA',
@@ -36,9 +32,7 @@ export const lifecycleDisplayLabels: Record<FeatureLifecyclePhase, string> = {
 /** Present-participle verbs for the running badge, keyed by lifecycle phase. */
 export const lifecycleRunningVerbs: Record<FeatureLifecyclePhase, string> = {
   requirements: 'Analyzing',
-  gathering: 'Gathering Requirements',
   research: 'Researching',
-  planning: 'Planning',
   implementation: 'Implementing',
   review: 'Reviewing',
   deploy: 'Deploying',
@@ -69,6 +63,8 @@ export interface FeatureNodeData {
   errorMessage?: string;
   /** Agent executor type (e.g. "claude-code", "cursor"). */
   agentType?: AgentTypeValue;
+  /** LLM model identifier used for this feature's agent run. */
+  modelId?: string;
   /** PR metadata for features with an associated pull request */
   pr?: {
     url: string;

package/web/.next/standalone/src/presentation/web/components/common/feature-node/feature-node.stories.tsx

@@ -83,6 +83,8 @@ const allStatesData: FeatureNodeData[] = [
     lifecycle: 'implementation' as FeatureLifecyclePhase,
     state: 'running',
     progress: 45,
+    agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/auth-module',
   },
@@ -93,6 +95,8 @@ const allStatesData: FeatureNodeData[] = [
     lifecycle: 'requirements' as FeatureLifecyclePhase,
     state: 'action-required',
     progress: 22,
+    agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/api-rate-limiting',
   },
@@ -103,19 +107,11 @@ const allStatesData: FeatureNodeData[] = [
     lifecycle: 'implementation' as FeatureLifecyclePhase,
     state: 'action-required',
     progress: 40,
+    agentType: 'cursor' as AgentTypeValue,
+    modelId: 'claude-opus-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/data-pipeline',
   },
-  {
-    name: 'Tech Plan Review',
-    description: 'Technical plan awaiting review',
-    featureId: '#bi4',
-    lifecycle: 'planning' as FeatureLifecyclePhase,
-    state: 'action-required',
-    progress: 25,
-    repositoryPath: '/home/user/my-repo',
-    branch: 'feat/tech-plan',
-  },
   {
     name: 'Merge Review',
     description: 'PR ready for merge approval',
@@ -123,6 +119,8 @@ const allStatesData: FeatureNodeData[] = [
     lifecycle: 'review' as FeatureLifecyclePhase,
     state: 'action-required',
     progress: 90,
+    agentType: 'gemini-cli' as AgentTypeValue,
+    modelId: 'gemini-2.5-pro',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/merge-review',
   },
@@ -134,6 +132,8 @@ const allStatesData: FeatureNodeData[] = [
     state: 'done',
     progress: 100,
     runtime: '1h 42m',
+    agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/payment-gateway',
   },
@@ -145,6 +145,8 @@ const allStatesData: FeatureNodeData[] = [
     state: 'blocked',
     progress: 20,
     blockedBy: 'Auth Module',
+    agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-opus-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/search-index',
   },
@@ -156,6 +158,8 @@ const allStatesData: FeatureNodeData[] = [
     state: 'error',
     progress: 30,
     errorMessage: 'Build failed: type mismatch',
+    agentType: 'dev' as AgentTypeValue,
+    modelId: 'gpt-8',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/email-service',
   },
@@ -173,9 +177,7 @@ export const AllStates: Story = {
 
 const allLifecycles: FeatureLifecyclePhase[] = [
   'requirements',
-  'gathering',
   'research',
-  'planning',
   'implementation',
   'review',
   'deploy',
@@ -214,6 +216,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/claude-code',
   },
@@ -225,6 +228,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'cursor' as AgentTypeValue,
+    modelId: 'claude-opus-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/cursor',
   },
@@ -236,6 +240,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'gemini-cli' as AgentTypeValue,
+    modelId: 'gemini-2.5-pro',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/gemini-cli',
   },
@@ -247,6 +252,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'aider' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/aider',
   },
@@ -258,6 +264,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'continue' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/continue',
   },
@@ -338,18 +345,6 @@ export const Creating: Story = {
   render: (args) => <FeatureNodeCanvas data={args} />,
 };
 
-export const PlanningActionRequired: Story = {
-  args: {
-    name: 'Tech Plan Review',
-    description: 'Technical planning awaiting review',
-    featureId: '#bi4',
-    lifecycle: 'planning',
-    state: 'action-required',
-    progress: 30,
-  },
-  render: (args) => <FeatureNodeCanvas data={args} />,
-};
-
 export const MergeReviewActionRequired: Story = {
   args: {
     name: 'Merge Review',

package/web/.next/standalone/src/presentation/web/components/common/feature-node/feature-node.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { Handle, Position } from '@xyflow/react';
-import { Settings, Plus, FileText, Wrench, GitMerge, Trash2, type LucideIcon } from 'lucide-react';
+import { Plus, FileText, Wrench, GitMerge, Trash2, type LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import {
   Dialog,
@@ -21,7 +21,8 @@ import {
   lifecycleRunningVerbs,
 } from './feature-node-state-config';
 import type { FeatureNodeData } from './feature-node-state-config';
-import { getAgentTypeIcon } from './agent-type-icons';
+import { getAgentTypeIcon, agentTypeLabels, type AgentTypeValue } from './agent-type-icons';
+import { getModelMeta } from '@/lib/model-metadata';
 
 function AgentIcon({ agentType, className }: { agentType?: string; className?: string }) {
   const IconComponent = getAgentTypeIcon(agentType);
@@ -31,8 +32,7 @@ function AgentIcon({ agentType, className }: { agentType?: string; className?: s
 function getBadgeIcon(data: FeatureNodeData): LucideIcon {
   const config = featureNodeStateConfig[data.state];
   if (data.state === 'action-required') {
-    if (data.lifecycle === 'requirements' || data.lifecycle === 'gathering') return FileText;
-    if (data.lifecycle === 'planning') return Wrench;
+    if (data.lifecycle === 'requirements') return FileText;
     if (data.lifecycle === 'implementation') return Wrench;
     if (data.lifecycle === 'review') return GitMerge;
   }
@@ -45,13 +45,13 @@ function getActionRequiredBadgeClasses(data: FeatureNodeData): {
   badgeBgClass: string;
 } | null {
   if (data.state !== 'action-required') return null;
-  if (data.lifecycle === 'planning' || data.lifecycle === 'implementation') {
+  if (data.lifecycle === 'implementation') {
     return { badgeClass: 'text-indigo-700', badgeBgClass: 'bg-indigo-50' };
   }
   if (data.lifecycle === 'review') {
     return { badgeClass: 'text-emerald-700', badgeBgClass: 'bg-emerald-50' };
   }
-  return null; // requirements/gathering stays amber (default)
+  return null; // requirements stays amber (default)
 }
 
 function getBadgeText(data: FeatureNodeData): string {
@@ -66,10 +66,8 @@ function getBadgeText(data: FeatureNodeData): string {
     case 'blocked':
       return data.blockedBy ? `Waiting on ${data.blockedBy}` : 'Blocked';
     case 'action-required':
-      if (data.lifecycle === 'requirements' || data.lifecycle === 'gathering')
-        return 'Review Product Requirements';
-      if (data.lifecycle === 'planning') return 'Review Technical Planning';
-      if (data.lifecycle === 'implementation') return 'Review Implementation';
+      if (data.lifecycle === 'requirements') return 'Review Product Requirements';
+      if (data.lifecycle === 'implementation') return 'Review Technical Planning';
       if (data.lifecycle === 'review') return 'Review Merge Request';
       return config.label;
     case 'error':
@@ -163,7 +161,7 @@ export function FeatureNode({
           selected && 'ring-primary ring-2'
         )}
       >
-        {/* Top row: lifecycle label + settings */}
+        {/* Top row: lifecycle label + agent icon */}
         <div className="flex items-center justify-between">
           <span
             data-testid="feature-node-lifecycle-label"
@@ -171,19 +169,40 @@ export function FeatureNode({
           >
             {data.state === 'blocked' ? 'BLOCKED' : lifecycleDisplayLabels[data.lifecycle]}
           </span>
-          {data.onSettings ? (
-            <button
-              type="button"
-              aria-label="Settings"
-              data-testid="feature-node-settings-button"
-              onClick={(e) => {
-                e.stopPropagation();
-                data.onSettings?.();
-              }}
-              className="nodrag text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1"
-            >
-              <Settings className="h-3.5 w-3.5" />
-            </button>
+          {data.agentType ? (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={agentTypeLabels[data.agentType as AgentTypeValue] ?? data.agentType}
+                    data-testid="feature-node-agent-badge"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      data.onSettings?.();
+                    }}
+                    className={cn(
+                      'nodrag -mt-1 -mr-1 p-1',
+                      data.onSettings
+                        ? 'cursor-pointer opacity-80 transition-opacity hover:opacity-100'
+                        : 'cursor-default'
+                    )}
+                  >
+                    <AgentIcon agentType={data.agentType} className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <span className="font-medium">
+                    {agentTypeLabels[data.agentType as AgentTypeValue] ?? data.agentType}
+                  </span>
+                  {data.modelId ? (
+                    <span className="ml-1 opacity-70">
+                      · {getModelMeta(data.modelId).displayName || data.modelId}
+                    </span>
+                  ) : null}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           ) : null}
         </div>
 

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -86,6 +86,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
           status,
           ...(d.startedAt != null && { startedAt: d.startedAt }),
           ...(d.runtime != null && { duration: d.runtime }),
+          ...(d.agentType && { agentType: d.agentType }),
+          ...(d.modelId && { modelId: d.modelId }),
         };
       })
       .filter(Boolean) as {
@@ -94,6 +96,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
       status: 'action-needed' | 'in-progress' | 'done';
       startedAt?: number;
       duration?: string;
+      agentType?: string;
+      modelId?: string;
     }[];
 
     setSidebarFeatures(sidebarItems);

package/web/.next/standalone/src/presentation/web/components/features/settings/AgentModelPicker/AgentModelPicker.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { AgentModelPicker } from './index';
+
+const meta: Meta<typeof AgentModelPicker> = {
+  title: 'Features/Settings/AgentModelPicker',
+  component: AgentModelPicker,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    onAgentModelChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ClaudeCodeDefault: Story = {
+  args: {
+    initialAgentType: 'claude-code',
+    initialModel: 'claude-sonnet-4-6',
+    mode: 'settings',
+  },
+};
+
+export const CursorSelected: Story = {
+  args: {
+    initialAgentType: 'cursor',
+    initialModel: 'gpt-5.4',
+    mode: 'settings',
+  },
+};
+
+export const GeminiCli: Story = {
+  args: {
+    initialAgentType: 'gemini-cli',
+    initialModel: 'gemini-2.5-pro',
+    mode: 'settings',
+  },
+};
+
+export const DemoAgent: Story = {
+  args: {
+    initialAgentType: 'dev',
+    initialModel: '',
+    mode: 'settings',
+  },
+};
+
+export const OverrideMode: Story = {
+  args: {
+    initialAgentType: 'claude-code',
+    initialModel: 'claude-sonnet-4-6',
+    mode: 'override',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    initialAgentType: 'claude-code',
+    initialModel: 'claude-sonnet-4-6',
+    mode: 'settings',
+    disabled: true,
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/settings/AgentModelPicker/index.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import * as React from 'react';
+import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
+import { getAllAgentModels } from '@/app/actions/get-all-agent-models';
+import type { AgentModelGroup } from '@/app/actions/get-all-agent-models';
+import { updateAgentAndModel } from '@/app/actions/update-agent-and-model';
+import { getAgentTypeIcon } from '@/components/common/feature-node/agent-type-icons';
+import { getModelMeta } from '@/lib/model-metadata';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+export interface AgentModelPickerProps {
+  initialAgentType: string;
+  initialModel: string;
+  onAgentModelChange?: (agentType: string, model: string) => void;
+  disabled?: boolean;
+  className?: string;
+  /** 'settings' persists to DB; 'override' only calls onAgentModelChange */
+  mode: 'settings' | 'override';
+}
+
+export function AgentModelPicker({
+  initialAgentType,
+  initialModel,
+  onAgentModelChange,
+  disabled,
+  className,
+  mode,
+}: AgentModelPickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const [groups, setGroups] = React.useState<AgentModelGroup[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [agentType, setAgentType] = React.useState(initialAgentType);
+  const [model, setModel] = React.useState(initialModel);
+  const [error, setError] = React.useState<string | null>(null);
+
+  // 0 = agent list visible, 1 = model list visible
+  const [level, setLevel] = React.useState(0);
+  // Which agent's models to show (kept separate from level for animation)
+  const [drillAgent, setDrillAgent] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    getAllAgentModels()
+      .then(setGroups)
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Reset drill-down when popover closes
+  React.useEffect(() => {
+    if (!open) {
+      const t = setTimeout(() => {
+        setLevel(0);
+        setDrillAgent(null);
+      }, 150);
+      return () => clearTimeout(t);
+    }
+  }, [open]);
+
+  const drillInto = (agent: string) => {
+    setDrillAgent(agent);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setLevel(1));
+    });
+  };
+
+  const drillBack = () => {
+    setLevel(0);
+    setTimeout(() => setDrillAgent(null), 220);
+  };
+
+  const handleSelect = async (newAgentType: string, newModel: string) => {
+    setOpen(false);
+
+    if (newAgentType === agentType && newModel === model) return;
+
+    if (mode === 'override') {
+      setAgentType(newAgentType);
+      setModel(newModel);
+      onAgentModelChange?.(newAgentType, newModel);
+      return;
+    }
+
+    // mode === 'settings' — optimistically update, then persist
+    const prevAgent = agentType;
+    const prevModel = model;
+    setAgentType(newAgentType);
+    setModel(newModel);
+    onAgentModelChange?.(newAgentType, newModel);
+
+    setError(null);
+    try {
+      const result = await updateAgentAndModel(newAgentType, newModel || null);
+      if (!result.ok) {
+        // Revert on failure
+        setAgentType(prevAgent);
+        setModel(prevModel);
+        onAgentModelChange?.(prevAgent, prevModel);
+        setError(result.error ?? 'Failed to save');
+      }
+    } catch {
+      setAgentType(prevAgent);
+      setModel(prevModel);
+      onAgentModelChange?.(prevAgent, prevModel);
+      setError('Failed to save');
+    }
+  };
+
+  const isDisabled = (disabled ?? false) || loading;
+
+  const AgentIcon = getAgentTypeIcon(agentType);
+  const agentLabel = groups.find((g) => g.agentType === agentType)?.label ?? agentType;
+  const displayModel = model ? getModelMeta(model).displayName || model : agentLabel;
+
+  const activeGroup = drillAgent ? groups.find((g) => g.agentType === drillAgent) : null;
+
+  return (
+    <div className={cn('flex flex-col gap-1', className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={isDisabled}
+            className="w-auto cursor-pointer font-normal"
+          >
+            <span className="flex items-center gap-2 truncate">
+              <AgentIcon className="h-4 w-4 shrink-0" />
+              {loading ? 'Loading…' : displayModel}
+            </span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-64 overflow-hidden p-0" align="start">
+          {/* Sliding container — both panels side by side, translateX controlled by level */}
+          <div
+            className="flex transition-transform duration-200 ease-in-out"
+            style={{ transform: `translateX(${level === 1 ? '-50%' : '0%'})`, width: '200%' }}
+          >
+            {/* ── Level 1: Agent list ── */}
+            <div className="w-1/2 shrink-0">
+              <div className="text-muted-foreground border-b px-3 py-2 text-xs font-medium">
+                Select agent
+              </div>
+              {groups.map((group) => {
+                const GroupIcon = getAgentTypeIcon(group.agentType);
+                const isActive = agentType === group.agentType;
+                const hasModels = group.models.length > 0;
+
+                return (
+                  <button
+                    key={group.agentType}
+                    type="button"
+                    className={cn(
+                      'flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-sm transition-colors',
+                      'hover:bg-accent hover:text-accent-foreground',
+                      isActive && 'bg-accent/50'
+                    )}
+                    onClick={() => {
+                      if (hasModels) {
+                        drillInto(group.agentType);
+                      } else {
+                        handleSelect(group.agentType, '');
+                      }
+                    }}
+                  >
+                    <GroupIcon className="h-4 w-4 shrink-0" />
+                    <span className="flex-1 text-left">{group.label}</span>
+                    {isActive && !hasModels ? (
+                      <Check className="text-primary h-3.5 w-3.5 shrink-0" />
+                    ) : null}
+                    {hasModels ? (
+                      <ChevronRight className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+                    ) : null}
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* ── Level 2: Model list for selected agent ── */}
+            <div className="w-1/2 shrink-0">
+              {activeGroup ? (
+                <>
+                  {/* Back header */}
+                  <button
+                    type="button"
+                    className="text-muted-foreground hover:text-foreground flex w-full cursor-pointer items-center gap-1.5 border-b px-3 py-2 text-xs font-medium transition-colors"
+                    onClick={drillBack}
+                  >
+                    <ChevronLeft className="h-3.5 w-3.5" />
+                    {activeGroup.label}
+                  </button>
+
+                  {/* Model items */}
+                  {activeGroup.models.map((m) => {
+                    const isSelected = agentType === activeGroup.agentType && model === m.id;
+                    return (
+                      <button
+                        key={m.id}
+                        type="button"
+                        className={cn(
+                          'flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left transition-colors',
+                          'hover:bg-accent hover:text-accent-foreground',
+                          isSelected && 'bg-accent/50'
+                        )}
+                        onClick={() => handleSelect(activeGroup.agentType, m.id)}
+                      >
+                        <div className="flex min-w-0 flex-1 flex-col">
+                          <span className="text-sm font-medium">{m.displayName}</span>
+                          <span className="text-muted-foreground text-xs">{m.description}</span>
+                        </div>
+                        {isSelected ? (
+                          <Check className="text-primary h-3.5 w-3.5 shrink-0" />
+                        ) : null}
+                      </button>
+                    );
+                  })}
+                </>
+              ) : null}
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+      {Boolean(error) && <p className="text-destructive text-sm">{error}</p>}
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/settings/ModelPicker/ModelPicker.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { ModelPicker } from './index';
+
+const meta: Meta<typeof ModelPicker> = {
+  title: 'Features/Settings/ModelPicker',
+  component: ModelPicker,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    onModelChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default state — current model is claude-sonnet-4-6, the advertised list
+ * for claude-code is populated from the mock server action.
+ */
+export const Default: Story = {
+  args: {
+    initialModel: 'claude-sonnet-4-6',
+  },
+};
+
+/**
+ * Custom model — a free-text identifier not present in the advertised list.
+ * Demonstrates that the combobox accepts arbitrary strings.
+ */
+export const CustomModel: Story = {
+  args: {
+    initialModel: 'claude-opus-4-7-experimental',
+  },
+};
+
+/**
+ * Disabled state — picker is non-interactive (e.g. during form submission).
+ */
+export const Disabled: Story = {
+  args: {
+    initialModel: 'claude-sonnet-4-6',
+    disabled: true,
+  },
+};
+
+/**
+ * Opus selected — verifies the checkmark appears on the right item.
+ */
+export const OpusSelected: Story = {
+  args: {
+    initialModel: 'claude-opus-4-6',
+  },
+};