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

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 })] }));
+}

package/dist/src/presentation/web/components/features/settings/settings-page-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,QAAQ,EAGT,MAAM,sCAAsC,CAAC;AAwB9C,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AAuGD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,uBAAuB,2CAsiB7F"}
+{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,QAAQ,EAGT,MAAM,sCAAsC,CAAC;AAe9C,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AA6GD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,uBAAuB,2CAyhB7F"}

package/dist/src/presentation/web/components/features/settings/settings-page-client.js

@@ -9,17 +9,9 @@ import { Button } from '../../ui/button.js';
 import { Switch } from '../../ui/switch.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
 import { updateSettingsAction } from '../../../app/actions/update-settings.js';
-import { AgentType, AgentAuthMethod, EditorType } from '../../../../../../packages/core/src/domain/generated/output.js';
-import { getAgentTypeIcon } from '../../common/feature-node/agent-type-icons.js';
+import { AgentAuthMethod, EditorType } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { getEditorTypeIcon } from '../../common/editor-type-icons.js';
-const AGENT_TYPE_OPTIONS = [
-    { value: AgentType.ClaudeCode, label: 'Claude Code' },
-    { value: AgentType.Cursor, label: 'Cursor' },
-    { value: AgentType.GeminiCli, label: 'Gemini CLI' },
-    { value: AgentType.Aider, label: 'Aider' },
-    { value: AgentType.Continue, label: 'Continue' },
-    { value: AgentType.Dev, label: 'Dev' },
-];
+import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
 const AUTH_METHOD_OPTIONS = [
     { value: AgentAuthMethod.Session, label: 'Session' },
     { value: AgentAuthMethod.Token, label: 'Token' },
@@ -54,13 +46,13 @@ function useSaveIndicator() {
     return { isPending, showSaved, save };
 }
 function SettingsRow({ label, htmlFor, children, }) {
-    return (_jsxs("div", { className: "flex items-center justify-between gap-4 border-b py-3 last:border-b-0", children: [_jsx(Label, { htmlFor: htmlFor, className: "text-sm font-normal whitespace-nowrap", children: label }), _jsx("div", { className: "flex items-center gap-2", children: children })] }));
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 border-b py-3 last:border-b-0", children: [_jsx(Label, { htmlFor: htmlFor, className: "cursor-pointer text-sm font-normal whitespace-nowrap", children: label }), _jsx("div", { className: "flex items-center gap-2", children: children })] }));
 }
 function SelectRow({ label, id, testId, value, options, onChange, }) {
-    return (_jsx(SettingsRow, { label: label, htmlFor: id, children: _jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { id: id, "data-testid": testId, className: "w-45", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: options.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }) }));
+    return (_jsx(SettingsRow, { label: label, htmlFor: id, children: _jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { id: id, "data-testid": testId, className: "w-45 cursor-pointer", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: options.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }) }));
 }
 function SwitchRow({ label, id, testId, checked, onChange, }) {
-    return (_jsx(SettingsRow, { label: label, htmlFor: id, children: _jsx(Switch, { id: id, "data-testid": testId, checked: checked, onCheckedChange: onChange }) }));
+    return (_jsx(SettingsRow, { label: label, htmlFor: id, children: _jsx(Switch, { id: id, "data-testid": testId, checked: checked, onCheckedChange: onChange, className: "cursor-pointer" }) }));
 }
 export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
     const { isPending, showSaved, save } = useSaveIndicator();
@@ -141,13 +133,7 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
             },
         };
     }
-    return (_jsxs("div", { "data-testid": "settings-page-client", className: "max-w-lg", children: [_jsxs("div", { className: "flex items-center justify-between border-b pb-3", children: [_jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "Settings" }), isPending ? _jsx("span", { className: "text-muted-foreground text-xs", children: "Saving..." }) : null, showSaved && !isPending ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-green-600", children: [_jsx(Check, { className: "h-3 w-3" }), "Saved"] })) : null] }), _jsxs("div", { children: [_jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "agent-settings-section", children: "Agent" }), _jsx(SettingsRow, { label: "Agent", htmlFor: "agent-type", children: _jsxs(Select, { value: agentType, onValueChange: (v) => {
-                                setAgentType(v);
-                                save(buildAgentPayload({ type: v }));
-                            }, children: [_jsx(SelectTrigger, { id: "agent-type", "data-testid": "agent-type-select", className: "w-45", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: AGENT_TYPE_OPTIONS.map((opt) => {
-                                        const Icon = getAgentTypeIcon(opt.value);
-                                        return (_jsx(SelectItem, { value: opt.value, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0" }), opt.label] }) }, opt.value));
-                                    }) })] }) }), _jsx(SelectRow, { label: "Authentication", id: "auth-method", testId: "auth-method-select", value: authMethod, options: AUTH_METHOD_OPTIONS, onChange: (v) => {
+    return (_jsxs("div", { "data-testid": "settings-page-client", className: "max-w-lg", children: [_jsxs("div", { className: "flex items-center justify-between border-b pb-3", children: [_jsx("h1", { className: "text-sm font-bold tracking-tight", children: "Settings" }), isPending ? _jsx("span", { className: "text-muted-foreground text-xs", children: "Saving..." }) : null, showSaved && !isPending ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-green-600", children: [_jsx(Check, { className: "h-3 w-3" }), "Saved"] })) : null] }), _jsxs("div", { children: [_jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "agent-settings-section", children: "Agent" }), _jsx(SettingsRow, { label: "Agent & Model", htmlFor: "agent-model-picker", children: _jsx(AgentModelPicker, { initialAgentType: agentType, initialModel: settings.models.default, mode: "settings", onAgentModelChange: (newAgent) => setAgentType(newAgent), className: "w-45" }) }), _jsx(SelectRow, { label: "Authentication", id: "auth-method", testId: "auth-method-select", value: authMethod, options: AUTH_METHOD_OPTIONS, onChange: (v) => {
                             setAuthMethod(v);
                             save(buildAgentPayload({ authMethod: v }));
                         } }), authMethod === AgentAuthMethod.Token && (_jsx(SettingsRow, { label: "API Token", htmlFor: "agent-token", children: _jsxs("div", { className: "relative w-45", children: [_jsx(Input, { id: "agent-token", "data-testid": "agent-token-input", type: showToken ? 'text' : 'password', value: token, onChange: (e) => setToken(e.target.value), onBlur: () => {
@@ -157,7 +143,7 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
                                     }, placeholder: "Enter token", className: "pr-8" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "absolute top-0 right-0 h-full px-2 hover:bg-transparent", onClick: () => setShowToken(!showToken), "data-testid": "toggle-token-visibility", "aria-label": showToken ? 'Hide token' : 'Show token', children: showToken ? _jsx(EyeOff, { className: "h-3 w-3" }) : _jsx(Eye, { className: "h-3 w-3" }) })] }) })), _jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "environment-settings-section", children: "Environment" }), _jsx(SettingsRow, { label: "Editor", htmlFor: "default-editor", children: _jsxs(Select, { value: editor, onValueChange: (v) => {
                                 setEditor(v);
                                 save({ environment: { defaultEditor: v, shellPreference: shell } });
-                            }, children: [_jsx(SelectTrigger, { id: "default-editor", "data-testid": "editor-select", className: "w-45", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: EDITOR_OPTIONS.map((opt) => {
+                            }, children: [_jsx(SelectTrigger, { id: "default-editor", "data-testid": "editor-select", className: "w-45 cursor-pointer", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: EDITOR_OPTIONS.map((opt) => {
                                         const Icon = getEditorTypeIcon(opt.value);
                                         return (_jsx(SelectItem, { value: opt.value, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0" }), opt.label] }) }, opt.value));
                                     }) })] }) }), _jsx("h2", { className: "text-muted-foreground mt-6 mb-1 text-xs font-medium tracking-wide uppercase", "data-testid": "workflow-settings-section", children: "Workflow" }), _jsx(SwitchRow, { label: "Open PR on complete", id: "open-pr", testId: "switch-open-pr", checked: openPr, onChange: (v) => {

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts

@@ -6,6 +6,8 @@ export interface FeatureItem {
     status: FeatureStatus;
     startedAt?: number;
     duration?: string;
+    agentType?: string;
+    modelId?: string;
 }
 export interface AppSidebarProps {
     features: FeatureItem[];

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAE/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,cAAc,GACf,EAAE,eAAe,2CA2GjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAE/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,cAAc,GACf,EAAE,eAAe,2CA6GjB"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.js

@@ -30,5 +30,5 @@ export function AppSidebar({ features, featureFlags, onNewFeature, onFeatureClic
                         'min-w-0 overflow-hidden transition-opacity duration-200 ease-out',
                         '[&_[data-sidebar=group-label]]:!mt-0 [&_[data-sidebar=group-label]]:!opacity-100 [&_[data-sidebar=group-label]]:!transition-none',
                         expandedVisible ? 'opacity-100' : 'opacity-0',
-                    ].join(' '), children: [_jsx(SidebarSectionHeader, { label: "Features" }), _jsx(ScrollArea, { children: grouped.map(({ key, label, items }) => items.length > 0 ? (_jsx(FeatureStatusGroup, { label: label, count: items.length, children: items.map((feature) => (_jsx(FeatureListItem, { name: feature.name, status: feature.status, startedAt: feature.startedAt, duration: feature.duration, onClick: onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined }, feature.featureId))) }, key)) : null) })] })) : null }), _jsx(SidebarFooter, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { onClick: onNewFeature, tooltip: "New feature", children: [_jsx(Plus, {}), _jsx("span", { children: "New feature" })] }) }) }) }), _jsx(SidebarRail, {})] }));
+                    ].join(' '), children: [_jsx(SidebarSectionHeader, { label: "Features" }), _jsx(ScrollArea, { children: grouped.map(({ key, label, items }) => items.length > 0 ? (_jsx(FeatureStatusGroup, { label: label, count: items.length, children: items.map((feature) => (_jsx(FeatureListItem, { name: feature.name, status: feature.status, startedAt: feature.startedAt, duration: feature.duration, agentType: feature.agentType, modelId: feature.modelId, onClick: onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined }, feature.featureId))) }, key)) : null) })] })) : null }), _jsx(SidebarFooter, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { onClick: onNewFeature, tooltip: "New feature", children: [_jsx(Plus, {}), _jsx("span", { children: "New feature" })] }) }) }) }), _jsx(SidebarRail, {})] }));
 }

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAyBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA0BnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}
+{"version":3,"file":"app-sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAyBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAmDnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.js

@@ -21,27 +21,52 @@ const meta = {
 };
 export default meta;
 const mockFeatures = [
-    { featureId: 'feat-auth-001', name: 'Auth Module', status: 'action-needed' },
-    { featureId: 'feat-payment-002', name: 'Payment Flow', status: 'action-needed' },
+    {
+        featureId: 'feat-auth-001',
+        name: 'Auth Module',
+        status: 'action-needed',
+        agentType: 'claude-code',
+        modelId: 'claude-sonnet-4-6',
+    },
+    {
+        featureId: 'feat-payment-002',
+        name: 'Payment Flow',
+        status: 'action-needed',
+        agentType: 'cursor',
+        modelId: 'claude-opus-4-6',
+    },
     {
         featureId: 'feat-dashboard-003',
         name: 'Dashboard',
         status: 'in-progress',
         startedAt: Date.now() - 330_000,
+        agentType: 'gemini-cli',
+        modelId: 'gemini-2.5-pro',
     },
     {
         featureId: 'feat-api-004',
         name: 'API Gateway',
         status: 'in-progress',
         startedAt: Date.now() - 60_000,
+        agentType: 'claude-code',
+        modelId: 'claude-haiku-4-5',
     },
     {
         featureId: 'feat-settings-005',
         name: 'Settings Page',
         status: 'done',
         duration: '2h',
+        agentType: 'claude-code',
+        modelId: 'claude-sonnet-4-6',
+    },
+    {
+        featureId: 'feat-profile-006',
+        name: 'User Profile',
+        status: 'done',
+        duration: '1h',
+        agentType: 'dev',
+        modelId: 'gpt-8',
     },
-    { featureId: 'feat-profile-006', name: 'User Profile', status: 'done', duration: '1h' },
 ];
 export const Default = {
     args: {

package/dist/src/presentation/web/components/ui/checkbox-group-item.js

@@ -3,6 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox } from '../ui/checkbox.js';
 import { Label } from '../ui/label.js';
 function CheckboxGroupItem({ id, label, description, checked, onCheckedChange, disabled, }) {
-    return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Checkbox, { id: id, className: "mt-0.75", checked: checked, onCheckedChange: (v) => onCheckedChange(v === true), disabled: disabled }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Label, { htmlFor: id, className: "cursor-pointer text-sm font-medium", children: label }), description ? (_jsx(Label, { htmlFor: id, className: "text-muted-foreground cursor-pointer text-xs font-normal", children: description })) : null] })] }));
+    return (_jsxs("div", { className: "flex cursor-pointer items-start gap-2", children: [_jsx(Checkbox, { id: id, className: "mt-0.75", checked: checked, onCheckedChange: (v) => onCheckedChange(v === true), disabled: disabled }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Label, { htmlFor: id, className: "cursor-pointer text-sm font-medium", children: label }), description ? (_jsx(Label, { htmlFor: id, className: "text-muted-foreground cursor-pointer text-xs font-normal", children: description })) : null] })] }));
 }
 export { CheckboxGroupItem };

package/dist/src/presentation/web/components/ui/checkbox-group.js

@@ -19,6 +19,6 @@ function CheckboxGroup({ label, description, parentAriaLabel, options, value, on
         onValueChange({ ...value, [id]: checked });
     };
     const parentId = `${label.toLowerCase().replace(/\s+/g, '-')}-group`;
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Checkbox, { id: parentId, className: "mt-0.75", checked: parentIndeterminate ? 'indeterminate' : parentChecked, onCheckedChange: handleParentToggle, disabled: disabled, "aria-label": parentAriaLabel ?? `${label} select all` }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Label, { htmlFor: parentId, className: "cursor-pointer text-sm font-medium", children: label }), description ? (_jsx(Label, { htmlFor: parentId, className: "text-muted-foreground cursor-pointer text-xs font-normal", children: description })) : null] })] }), _jsx("div", { className: "flex flex-col gap-3 pl-6", children: options.map((option) => (_jsx(CheckboxGroupItem, { id: option.id, label: option.label, description: option.description, checked: value[option.id] ?? false, onCheckedChange: (checked) => handleItemChange(option.id, checked), disabled: disabled }, option.id))) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex cursor-pointer items-start gap-2", children: [_jsx(Checkbox, { id: parentId, className: "mt-0.75", checked: parentIndeterminate ? 'indeterminate' : parentChecked, onCheckedChange: handleParentToggle, disabled: disabled, "aria-label": parentAriaLabel ?? `${label} select all` }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Label, { htmlFor: parentId, className: "cursor-pointer text-sm font-medium", children: label }), description ? (_jsx(Label, { htmlFor: parentId, className: "text-muted-foreground cursor-pointer text-xs font-normal", children: description })) : null] })] }), _jsx("div", { className: "flex flex-col gap-3 pl-6", children: options.map((option) => (_jsx(CheckboxGroupItem, { id: option.id, label: option.label, description: option.description, checked: value[option.id] ?? false, onCheckedChange: (checked) => handleItemChange(option.id, checked), disabled: disabled }, option.id))) })] }));
 }
 export { CheckboxGroup };

package/dist/src/presentation/web/components/ui/command.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+/**
+ * Command — minimal combobox primitives for model/item selection.
+ *
+ * Intentionally avoids the `cmdk` dependency and builds on native React +
+ * Tailwind instead. Filtering logic lives in the consumer component.
+ */
+declare const Command: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface CommandItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    selected?: boolean;
+}
+declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLButtonElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, };
+//# sourceMappingURL=command.d.ts.map

package/dist/src/presentation/web/components/ui/command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;GAKG;AAEH,QAAA,MAAM,OAAO,6GAWZ,CAAC;AAGF,QAAA,MAAM,YAAY,sHAehB,CAAC;AAGH,QAAA,MAAM,WAAW,6GAQhB,CAAC;AAGF,QAAA,MAAM,YAAY,6GAQjB,CAAC;AAGF,QAAA,MAAM,YAAY,6GAIjB,CAAC;AAGF,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,4FAgBhB,CAAC;AAGF,QAAA,MAAM,gBAAgB,6GAIrB,CAAC;AAGF,OAAO,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,gBAAgB,GACjB,CAAC"}

package/dist/src/presentation/web/components/ui/command.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Search } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+/**
+ * Command — minimal combobox primitives for model/item selection.
+ *
+ * Intentionally avoids the `cmdk` dependency and builds on native React +
+ * Tailwind instead. Filtering logic lives in the consumer component.
+ */
+const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className), ...props })));
+Command.displayName = 'Command';
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { className: "flex items-center border-b px-3", children: [_jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), _jsx("input", { ref: ref, className: cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] })));
+CommandInput.displayName = 'CommandInput';
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className), ...props })));
+CommandList.displayName = 'CommandList';
+const CommandEmpty = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('text-muted-foreground py-6 text-center text-sm', className), ...props })));
+CommandEmpty.displayName = 'CommandEmpty';
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('text-foreground overflow-hidden p-1', className), ...props })));
+CommandGroup.displayName = 'CommandGroup';
+const CommandItem = React.forwardRef(({ className, selected, ...props }, ref) => (_jsx("button", { ref: ref, type: "button", "data-selected": selected, className: cn('relative flex w-full cursor-default items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none', 'hover:bg-accent hover:text-accent-foreground', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'disabled:pointer-events-none disabled:opacity-50', className), ...props })));
+CommandItem.displayName = 'CommandItem';
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('bg-border -mx-1 h-px', className), ...props })));
+CommandSeparator.displayName = 'CommandSeparator';
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, };

package/dist/src/presentation/web/components/ui/switch.js

@@ -3,6 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Switch as SwitchPrimitive } from 'radix-ui';
 import { cn } from '../../lib/utils.js';
 function Switch({ className, size = 'default', ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('bg-background dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0') }) }));
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('bg-background dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0') }) }));
 }
 export { Switch };

package/dist/src/presentation/web/hooks/sidebar-features-context.d.ts

@@ -7,6 +7,8 @@ export interface SidebarFeatureItem {
     featureId: string;
     startedAt?: number;
     duration?: string;
+    agentType?: string;
+    modelId?: string;
 }
 /**
  * Maps a canvas FeatureNodeState to the sidebar's 3-state FeatureStatus.

package/dist/src/presentation/web/hooks/sidebar-features-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-features-context.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/sidebar-features-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4DAA4D,CAAC;AACnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAeD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,IAAI,CAEzF;AAMD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;CACvD;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CAQjF;AAED,wBAAgB,yBAAyB,IAAI,2BAA2B,CAMvE"}
+{"version":3,"file":"sidebar-features-context.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/sidebar-features-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4DAA4D,CAAC;AACnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAeD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,IAAI,CAEzF;AAMD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;CACvD;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CAQjF;AAED,wBAAgB,yBAAyB,IAAI,2BAA2B,CAMvE"}

package/dist/src/presentation/web/lib/model-metadata.d.ts

@@ -0,0 +1,6 @@
+export interface ModelMeta {
+    displayName: string;
+    description: string;
+}
+export declare function getModelMeta(modelId: string): ModelMeta;
+//# sourceMappingURL=model-metadata.d.ts.map

package/dist/src/presentation/web/lib/model-metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-metadata.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/model-metadata.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAkCD,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAavD"}

package/dist/src/presentation/web/lib/model-metadata.js

@@ -0,0 +1,41 @@
+/**
+ * Presentation-layer metadata for known LLM model identifiers.
+ * Maps raw model IDs to human-friendly display names and short descriptions.
+ */
+const MODEL_METADATA = {
+    // Claude models
+    'claude-opus-4-6': { displayName: 'Opus 4.6', description: 'Most capable, complex tasks' },
+    'claude-sonnet-4-6': { displayName: 'Sonnet 4.6', description: 'Fast & balanced' },
+    'claude-haiku-4-5': { displayName: 'Haiku 4.5', description: 'Lightweight & quick' },
+    // Gemini models
+    'gemini-3.1-pro': { displayName: 'Gemini 3.1 Pro', description: 'Advanced reasoning' },
+    'gemini-3-flash': { displayName: 'Gemini 3 Flash', description: 'Ultra-fast responses' },
+    'gemini-2.5-pro': { displayName: 'Gemini 2.5 Pro', description: 'Reliable workhorse' },
+    'gemini-2.5-flash': { displayName: 'Gemini 2.5 Flash', description: 'Speed-optimized' },
+    // OpenAI models
+    'gpt-5.4': { displayName: 'GPT-5.4', description: 'Latest reasoning model' },
+    'gpt-5': { displayName: 'GPT-5', description: 'Flagship model' },
+    'gpt-5.3-codex': { displayName: 'GPT-5.3 Codex', description: 'Code specialist' },
+    // Other
+    'composer-1.5': { displayName: 'Composer 1.5', description: 'Multi-file editing' },
+    'grok-code': { displayName: 'Grok Code', description: 'xAI code model' },
+    // Demo / fun models
+    'gpt-8': { displayName: 'GPT-8', description: 'Writes code before you think it' },
+    'opus-7': { displayName: 'Opus 7', description: 'Achieved consciousness, ships on time' },
+};
+const FALLBACK = { displayName: '', description: '' };
+export function getModelMeta(modelId) {
+    const meta = MODEL_METADATA[modelId];
+    if (meta)
+        return meta;
+    // Fallback: prettify the raw ID
+    return {
+        ...FALLBACK,
+        displayName: modelId
+            .replace(/^claude-/, '')
+            .replace(/^gemini-/, 'Gemini ')
+            .replace(/^gpt-/, 'GPT-')
+            .replace(/-/g, ' ')
+            .replace(/\b\w/g, (c) => c.toUpperCase()),
+    };
+}