@shepai/cli 1.77.2 → 1.78.0-pr247.6d6f409

package/dist/src/presentation/web/components/common/feature-node/agent-type-icons.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { Beaker } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 /** Create a stable image-based icon component for a brand. */
 function createBrandIcon(src, alt) {
@@ -14,8 +13,9 @@ function createBrandIcon(src, alt) {
 export function DefaultAgentIcon(props) {
     return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }), _jsx("circle", { cx: "12", cy: "12", r: "3", fill: "currentColor" })] }));
 }
+/** Colorful flask icon for the Demo Executor agent. */
 function DevAgentIcon({ className, ...props }) {
-    return _jsx(Beaker, { className: cn('h-6 w-6', className), ...props });
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn('h-6 w-6', className), ...props, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "dev-flask-grad", x1: "6", y1: "22", x2: "18", y2: "8", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: "#8B5CF6" }), _jsx("stop", { offset: "50%", stopColor: "#EC4899" }), _jsx("stop", { offset: "100%", stopColor: "#F59E0B" })] }) }), _jsx("path", { d: "M9 2h6v6l4.5 9a2 2 0 0 1-1.79 2.89H6.29A2 2 0 0 1 4.5 17L9 8V2z", fill: "url(#dev-flask-grad)", opacity: "0.9" }), _jsx("path", { d: "M9 2h6v6l4.5 9a2 2 0 0 1-1.79 2.89H6.29A2 2 0 0 1 4.5 17L9 8V2z", stroke: "url(#dev-flask-grad)", strokeWidth: "1.5", fill: "none" }), _jsx("circle", { cx: "10", cy: "14", r: "1.2", fill: "white", opacity: "0.7" }), _jsx("circle", { cx: "13.5", cy: "16", r: "0.8", fill: "white", opacity: "0.5" }), _jsx("circle", { cx: "11.5", cy: "17.5", r: "0.6", fill: "white", opacity: "0.4" }), _jsx("path", { d: "M16 4l1-2 1 2-2 1 2 1-1 2-1-2-2-1z", fill: "#F59E0B" })] }));
 }
 DevAgentIcon.displayName = 'DevAgentIcon';
 const agentTypeIconMap = {
@@ -26,6 +26,15 @@ const agentTypeIconMap = {
     continue: createBrandIcon('/icons/agents/continue.jpeg', 'Continue'),
     dev: DevAgentIcon,
 };
+/** Human-readable labels for agent types. */
+export const agentTypeLabels = {
+    'claude-code': 'Claude Code',
+    cursor: 'Cursor',
+    'gemini-cli': 'Gemini CLI',
+    aider: 'Aider',
+    continue: 'Continue',
+    dev: 'Demo',
+};
 /** Resolve an agent type string to its corresponding icon component. */
 export function getAgentTypeIcon(agentType) {
     if (agentType && agentType in agentTypeIconMap) {

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.d.ts

@@ -32,6 +32,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/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node-state-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node-state-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,SAAS,GACT,iBAAiB,GACjB,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,MAAM,qBAAqB,GAC7B,cAAc,GACd,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,UAAU,CAAC;AAEf,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOxE,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOvE,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,qBAAqB,CAAC;IACjC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,+DAA+D;IAC/D,EAAE,CAAC,EAAE;QACH,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,QAAQ,CAAC;QACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CA6DnF,CAAC"}
+{"version":3,"file":"feature-node-state-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node-state-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,SAAS,GACT,iBAAiB,GACjB,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,MAAM,qBAAqB,GAC7B,cAAc,GACd,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,UAAU,CAAC;AAEf,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOxE,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOvE,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,qBAAqB,CAAC;IACjC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,EAAE,CAAC,EAAE;QACH,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,QAAQ,CAAC;QACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CA6DnF,CAAC"}

package/dist/src/presentation/web/components/common/feature-node/feature-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwDnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAkOA"}
+{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAyDnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAuPA"}

package/dist/src/presentation/web/components/common/feature-node/feature-node.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Handle, Position } from '@xyflow/react';
-import { Settings, Plus, FileText, Wrench, GitMerge, Trash2 } from 'lucide-react';
+import { Plus, FileText, Wrench, GitMerge, Trash2 } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
 import { Button } from '../../ui/button.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { featureNodeStateConfig, lifecycleDisplayLabels, lifecycleRunningVerbs, } from './feature-node-state-config.js';
-import { getAgentTypeIcon } from './agent-type-icons.js';
+import { getAgentTypeIcon, agentTypeLabels } from './agent-type-icons.js';
+import { getModelMeta } from '../../../lib/model-metadata.js';
 function AgentIcon({ agentType, className }) {
     const IconComponent = getAgentTypeIcon(agentType);
     return _jsx(IconComponent, { className: className });
@@ -73,10 +74,12 @@ export function FeatureNode({ data, selected, }) {
                                                 e.stopPropagation();
                                                 setConfirmOpen(false);
                                                 data.onDelete?.(data.featureId);
-                                            }, children: "Delete" })] })] }) })] })) : null, _jsxs("div", { "data-testid": "feature-node-card", "aria-busy": data.state === 'creating' ? 'true' : undefined, className: cn('bg-card flex min-h-35 w-72 flex-col rounded-lg border p-3 shadow-sm', selected && 'ring-primary ring-2'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { "data-testid": "feature-node-lifecycle-label", className: cn('text-[10px] font-semibold tracking-wider'), children: data.state === 'blocked' ? 'BLOCKED' : lifecycleDisplayLabels[data.lifecycle] }), data.onSettings ? (_jsx("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", children: _jsx(Settings, { className: "h-3.5 w-3.5" }) })) : null] }), _jsx("h3", { className: "mt-1 truncate text-sm font-bold", children: data.name }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-0.5 truncate text-xs", children: data.description })) : null, _jsx("div", { className: "mt-auto pt-2", children: data.state === 'creating' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "motion-safe:animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : data.state === 'running' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(AgentIcon, { agentType: data.agentType, className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-[10px]", children: _jsx("span", { children: data.featureId }) }), _jsxs("div", { "data-testid": "feature-node-badge", className: (() => {
+                                            }, children: "Delete" })] })] }) })] })) : null, _jsxs("div", { "data-testid": "feature-node-card", "aria-busy": data.state === 'creating' ? 'true' : undefined, className: cn('bg-card flex min-h-35 w-72 flex-col rounded-lg border p-3 shadow-sm', selected && 'ring-primary ring-2'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { "data-testid": "feature-node-lifecycle-label", className: cn('text-[10px] font-semibold tracking-wider'), children: data.state === 'blocked' ? 'BLOCKED' : lifecycleDisplayLabels[data.lifecycle] }), data.agentType ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": agentTypeLabels[data.agentType] ?? 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'), children: _jsx(AgentIcon, { agentType: data.agentType, className: "h-3.5 w-3.5" }) }) }), _jsxs(TooltipContent, { side: "bottom", children: [_jsx("span", { className: "font-medium", children: agentTypeLabels[data.agentType] ?? data.agentType }), data.modelId ? (_jsxs("span", { className: "ml-1 opacity-70", children: ["\u00B7 ", getModelMeta(data.modelId).displayName || data.modelId] })) : null] })] }) })) : null] }), _jsx("h3", { className: "mt-1 truncate text-sm font-bold", children: data.name }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-0.5 truncate text-xs", children: data.description })) : null, _jsx("div", { className: "mt-auto pt-2", children: data.state === 'creating' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "motion-safe:animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : data.state === 'running' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(AgentIcon, { agentType: data.agentType, className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-[10px]", children: _jsx("span", { children: data.featureId }) }), _jsxs("div", { "data-testid": "feature-node-badge", className: (() => {
                                         const override = getActionRequiredBadgeClasses(data);
                                         return cn('mt-1.5 flex items-center justify-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium', override?.badgeBgClass ?? config.badgeBgClass, override?.badgeClass ?? config.badgeClass);
                                     })(), children: [(() => {

package/dist/src/presentation/web/components/common/feature-node/feature-node.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,6BAA6B,CAAC;AAiCrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAwFF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AAsEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAUvC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AA4EF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}
+{"version":3,"file":"feature-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,6BAA6B,CAAC;AAiCrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAsGF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AA2EF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAUvC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AA4EF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}

package/dist/src/presentation/web/components/common/feature-node/feature-node.stories.js

@@ -46,6 +46,8 @@ const allStatesData = [
         lifecycle: 'implementation',
         state: 'running',
         progress: 45,
+        agentType: 'claude-code',
+        modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/auth-module',
     },
@@ -56,6 +58,8 @@ const allStatesData = [
         lifecycle: 'requirements',
         state: 'action-required',
         progress: 22,
+        agentType: 'claude-code',
+        modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/api-rate-limiting',
     },
@@ -66,6 +70,8 @@ const allStatesData = [
         lifecycle: 'implementation',
         state: 'action-required',
         progress: 40,
+        agentType: 'cursor',
+        modelId: 'claude-opus-4-6',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/data-pipeline',
     },
@@ -76,6 +82,8 @@ const allStatesData = [
         lifecycle: 'review',
         state: 'action-required',
         progress: 90,
+        agentType: 'gemini-cli',
+        modelId: 'gemini-2.5-pro',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/merge-review',
     },
@@ -87,6 +95,8 @@ const allStatesData = [
         state: 'done',
         progress: 100,
         runtime: '1h 42m',
+        agentType: 'claude-code',
+        modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/payment-gateway',
     },
@@ -98,6 +108,8 @@ const allStatesData = [
         state: 'blocked',
         progress: 20,
         blockedBy: 'Auth Module',
+        agentType: 'claude-code',
+        modelId: 'claude-opus-4-6',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/search-index',
     },
@@ -109,6 +121,8 @@ const allStatesData = [
         state: 'error',
         progress: 30,
         errorMessage: 'Build failed: type mismatch',
+        agentType: 'dev',
+        modelId: 'gpt-8',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/email-service',
     },
@@ -145,6 +159,7 @@ const allAgentTypesData = [
         state: 'running',
         progress: 50,
         agentType: 'claude-code',
+        modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/claude-code',
     },
@@ -156,6 +171,7 @@ const allAgentTypesData = [
         state: 'running',
         progress: 50,
         agentType: 'cursor',
+        modelId: 'claude-opus-4-6',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/cursor',
     },
@@ -167,6 +183,7 @@ const allAgentTypesData = [
         state: 'running',
         progress: 50,
         agentType: 'gemini-cli',
+        modelId: 'gemini-2.5-pro',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/gemini-cli',
     },
@@ -178,6 +195,7 @@ const allAgentTypesData = [
         state: 'running',
         progress: 50,
         agentType: 'aider',
+        modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/aider',
     },
@@ -189,6 +207,7 @@ const allAgentTypesData = [
         state: 'running',
         progress: 50,
         agentType: 'continue',
+        modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
         branch: 'feat/continue',
     },

package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAsB5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAuQzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAsB5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CA2QzF"}

package/dist/src/presentation/web/components/features/control-center/control-center-inner.js

@@ -52,6 +52,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 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);

package/dist/src/presentation/web/components/features/settings/AgentModelPicker/AgentModelPicker.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AgentModelPicker } from './index.js';
+declare const meta: Meta<typeof AgentModelPicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ClaudeCodeDefault: Story;
+export declare const CursorSelected: Story;
+export declare const GeminiCli: Story;
+export declare const DemoAgent: Story;
+export declare const OverrideMode: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=AgentModelPicker.stories.d.ts.map

package/dist/src/presentation/web/components/features/settings/AgentModelPicker/AgentModelPicker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentModelPicker.stories.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/settings/AgentModelPicker/AgentModelPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAevC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

package/dist/src/presentation/web/components/features/settings/AgentModelPicker/AgentModelPicker.stories.js

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

package/dist/src/presentation/web/components/features/settings/AgentModelPicker/index.d.ts

@@ -0,0 +1,11 @@
+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 declare function AgentModelPicker({ initialAgentType, initialModel, onAgentModelChange, disabled, className, mode, }: AgentModelPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/features/settings/AgentModelPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/settings/AgentModelPicker/index.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,IAAI,EAAE,UAAU,GAAG,UAAU,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,IAAI,GACL,EAAE,qBAAqB,2CAqMvB"}

package/dist/src/presentation/web/components/features/settings/AgentModelPicker/index.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
+import { getAllAgentModels } from '../../../../app/actions/get-all-agent-models.js';
+import { updateAgentAndModel } from '../../../../app/actions/update-agent-and-model.js';
+import { getAgentTypeIcon } from '../../../common/feature-node/agent-type-icons.js';
+import { getModelMeta } from '../../../../lib/model-metadata.js';
+import { Button } from '../../../ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/popover.js';
+import { cn } from '../../../../lib/utils.js';
+export function AgentModelPicker({ initialAgentType, initialModel, onAgentModelChange, disabled, className, mode, }) {
+    const [open, setOpen] = React.useState(false);
+    const [groups, setGroups] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [agentType, setAgentType] = React.useState(initialAgentType);
+    const [model, setModel] = React.useState(initialModel);
+    const [error, setError] = React.useState(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(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) => {
+        setDrillAgent(agent);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => setLevel(1));
+        });
+    };
+    const drillBack = () => {
+        setLevel(0);
+        setTimeout(() => setDrillAgent(null), 220);
+    };
+    const handleSelect = async (newAgentType, newModel) => {
+        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 (_jsxs("div", { className: cn('flex flex-col gap-1', className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", role: "combobox", "aria-expanded": open, disabled: isDisabled, className: "w-auto cursor-pointer font-normal", children: _jsxs("span", { className: "flex items-center gap-2 truncate", children: [_jsx(AgentIcon, { className: "h-4 w-4 shrink-0" }), loading ? 'Loading…' : displayModel] }) }) }), _jsx(PopoverContent, { className: "w-64 overflow-hidden p-0", align: "start", children: _jsxs("div", { className: "flex transition-transform duration-200 ease-in-out", style: { transform: `translateX(${level === 1 ? '-50%' : '0%'})`, width: '200%' }, children: [_jsxs("div", { className: "w-1/2 shrink-0", children: [_jsx("div", { className: "text-muted-foreground border-b px-3 py-2 text-xs font-medium", children: "Select agent" }), groups.map((group) => {
+                                            const GroupIcon = getAgentTypeIcon(group.agentType);
+                                            const isActive = agentType === group.agentType;
+                                            const hasModels = group.models.length > 0;
+                                            return (_jsxs("button", { 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, '');
+                                                    }
+                                                }, children: [_jsx(GroupIcon, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "flex-1 text-left", children: group.label }), isActive && !hasModels ? (_jsx(Check, { className: "text-primary h-3.5 w-3.5 shrink-0" })) : null, hasModels ? (_jsx(ChevronRight, { className: "text-muted-foreground h-3.5 w-3.5 shrink-0" })) : null] }, group.agentType));
+                                        })] }), _jsx("div", { className: "w-1/2 shrink-0", children: activeGroup ? (_jsxs(_Fragment, { children: [_jsxs("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, children: [_jsx(ChevronLeft, { className: "h-3.5 w-3.5" }), activeGroup.label] }), activeGroup.models.map((m) => {
+                                                const isSelected = agentType === activeGroup.agentType && model === m.id;
+                                                return (_jsxs("button", { 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), children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-sm font-medium", children: m.displayName }), _jsx("span", { className: "text-muted-foreground text-xs", children: m.description })] }), isSelected ? (_jsx(Check, { className: "text-primary h-3.5 w-3.5 shrink-0" })) : null] }, m.id));
+                                            })] })) : null })] }) })] }), Boolean(error) && _jsx("p", { className: "text-destructive text-sm", children: error })] }));
+}

package/dist/src/presentation/web/components/features/settings/ModelPicker/ModelPicker.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ModelPicker } from './index.js';
+declare const meta: Meta<typeof ModelPicker>;
+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 declare const Default: Story;
+/**
+ * Custom model — a free-text identifier not present in the advertised list.
+ * Demonstrates that the combobox accepts arbitrary strings.
+ */
+export declare const CustomModel: Story;
+/**
+ * Disabled state — picker is non-interactive (e.g. during form submission).
+ */
+export declare const Disabled: Story;
+/**
+ * Opus selected — verifies the checkmark appears on the right item.
+ */
+export declare const OpusSelected: Story;
+//# sourceMappingURL=ModelPicker.stories.d.ts.map

package/dist/src/presentation/web/components/features/settings/ModelPicker/ModelPicker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelPicker.stories.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/settings/ModelPicker/ModelPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAiBlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC"}

package/dist/src/presentation/web/components/features/settings/ModelPicker/ModelPicker.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fn } from '@storybook/test';
+import { ModelPicker } from './index.js';
+const meta = {
+    title: 'Features/Settings/ModelPicker',
+    component: ModelPicker,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-80", children: _jsx(Story, {}) })),
+    ],
+    args: {
+        onModelChange: fn(),
+    },
+};
+export default 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 = {
+    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 = {
+    args: {
+        initialModel: 'claude-opus-4-7-experimental',
+    },
+};
+/**
+ * Disabled state — picker is non-interactive (e.g. during form submission).
+ */
+export const Disabled = {
+    args: {
+        initialModel: 'claude-sonnet-4-6',
+        disabled: true,
+    },
+};
+/**
+ * Opus selected — verifies the checkmark appears on the right item.
+ */
+export const OpusSelected = {
+    args: {
+        initialModel: 'claude-opus-4-6',
+    },
+};

package/dist/src/presentation/web/components/features/settings/ModelPicker/index.d.ts

@@ -0,0 +1,18 @@
+export interface ModelPickerProps {
+    /** Current model identifier shown as the initial selection */
+    initialModel: string;
+    /** Optional callback notified when the model is successfully persisted */
+    onModelChange?: (model: string) => void;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * ModelPicker
+ *
+ * A combobox that lets the user choose the default LLM model. On mount it
+ * calls the `getSupportedModels` server action to populate suggestions for
+ * the currently configured agent; the user may also type any free-text model
+ * identifier. On selection the new value is persisted via `updateModel`.
+ */
+export declare function ModelPicker({ initialModel, onModelChange, disabled, className, }: ModelPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/features/settings/ModelPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/settings/ModelPicker/index.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,2CA8HlB"}

package/dist/src/presentation/web/components/features/settings/ModelPicker/index.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { getSupportedModels } from '../../../../app/actions/get-supported-models.js';
+import { updateModel } from '../../../../app/actions/update-model.js';
+import { Button } from '../../../ui/button.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '../../../ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/popover.js';
+import { cn } from '../../../../lib/utils.js';
+/**
+ * ModelPicker
+ *
+ * A combobox that lets the user choose the default LLM model. On mount it
+ * calls the `getSupportedModels` server action to populate suggestions for
+ * the currently configured agent; the user may also type any free-text model
+ * identifier. On selection the new value is persisted via `updateModel`.
+ */
+export function ModelPicker({ initialModel, onModelChange, disabled, className, }) {
+    const [open, setOpen] = React.useState(false);
+    const [models, setModels] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [saving, setSaving] = React.useState(false);
+    const [value, setValue] = React.useState(initialModel);
+    const [inputValue, setInputValue] = React.useState(initialModel);
+    const [error, setError] = React.useState(null);
+    // Load advertised models on mount
+    React.useEffect(() => {
+        getSupportedModels()
+            .then(setModels)
+            .finally(() => setLoading(false));
+    }, []);
+    // Keep local state in sync when initialModel prop changes
+    React.useEffect(() => {
+        setValue(initialModel);
+        setInputValue(initialModel);
+    }, [initialModel]);
+    const filteredModels = models.filter((m) => m.toLowerCase().includes(inputValue.toLowerCase()));
+    const handleSelect = async (model) => {
+        setOpen(false);
+        await persist(model);
+    };
+    const handleInputChange = (e) => {
+        setInputValue(e.target.value);
+        if (!open)
+            setOpen(true);
+    };
+    const handleInputKeyDown = async (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            setOpen(false);
+            await persist(inputValue);
+        }
+        if (e.key === 'Escape') {
+            setOpen(false);
+            // Revert input to last saved value
+            setInputValue(value);
+        }
+    };
+    const persist = async (model) => {
+        if (!model.trim() || model === value)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const result = await updateModel(model);
+            if (result.ok) {
+                setValue(model);
+                onModelChange?.(model);
+            }
+            else {
+                setError(result.error ?? 'Failed to save model');
+                setInputValue(value); // revert
+            }
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const isDisabled = (disabled ?? false) || loading || saving;
+    return (_jsxs("div", { className: cn('flex flex-col gap-1', className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, disabled: isDisabled, className: "w-full justify-between font-normal", children: [_jsx("span", { className: "truncate", children: loading ? 'Loading models…' : saving ? 'Saving…' : (value ?? 'Select model…') }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search or type a model ID\u2026", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown }), _jsxs(CommandList, { children: [!loading && filteredModels.length === 0 && (_jsx(CommandEmpty, { children: models.length === 0
+                                                ? 'No models advertised for this agent.'
+                                                : 'No match — press Enter to use this value.' })), filteredModels.length > 0 && (_jsx(CommandGroup, { children: filteredModels.map((model) => (_jsxs(CommandItem, { selected: model === value, onClick: () => handleSelect(model), children: [_jsx(Check, { className: cn('mr-2 h-4 w-4', model === value ? 'opacity-100' : 'opacity-0') }), model] }, model))) }))] })] }) })] }), Boolean(error) && _jsx("p", { className: "text-destructive text-sm", children: error })] }));
+}