@shepai/cli 1.77.2 → 1.78.0

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',
+  },
+};

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

@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { getSupportedModels } from '@/app/actions/get-supported-models';
+import { updateModel } from '@/app/actions/update-model';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+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 function ModelPicker({
+  initialModel,
+  onModelChange,
+  disabled,
+  className,
+}: ModelPickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const [models, setModels] = React.useState<string[]>([]);
+  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<string | null>(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: string) => {
+    setOpen(false);
+    await persist(model);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    if (!open) setOpen(true);
+  };
+
+  const handleInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    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: string) => {
+    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 (
+    <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-full justify-between font-normal"
+          >
+            <span className="truncate">
+              {loading ? 'Loading models…' : saving ? 'Saving…' : (value ?? 'Select model…')}
+            </span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+          <Command>
+            <CommandInput
+              placeholder="Search or type a model ID…"
+              value={inputValue}
+              onChange={handleInputChange}
+              onKeyDown={handleInputKeyDown}
+            />
+            <CommandList>
+              {!loading && filteredModels.length === 0 && (
+                <CommandEmpty>
+                  {models.length === 0
+                    ? 'No models advertised for this agent.'
+                    : 'No match — press Enter to use this value.'}
+                </CommandEmpty>
+              )}
+              {filteredModels.length > 0 && (
+                <CommandGroup>
+                  {filteredModels.map((model) => (
+                    <CommandItem
+                      key={model}
+                      selected={model === value}
+                      onClick={() => handleSelect(model)}
+                    >
+                      <Check
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          model === value ? 'opacity-100' : 'opacity-0'
+                        )}
+                      />
+                      {model}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {Boolean(error) && <p className="text-destructive text-sm">{error}</p>}
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/settings/settings-page-client.tsx

@@ -15,24 +15,15 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { updateSettingsAction } from '@/app/actions/update-settings';
-import { AgentType, AgentAuthMethod, EditorType } from '@shepai/core/domain/generated/output';
-import { getAgentTypeIcon } from '@/components/common/feature-node/agent-type-icons';
+import { type AgentType, AgentAuthMethod, EditorType } from '@shepai/core/domain/generated/output';
 import { getEditorTypeIcon } from '@/components/common/editor-type-icons';
+import { AgentModelPicker } from '@/components/features/settings/AgentModelPicker';
 import type {
   Settings,
   FeatureFlags,
   NotificationPreferences,
 } from '@shepai/core/domain/generated/output';
 
-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' },
-];
-
 const AUTH_METHOD_OPTIONS = [
   { value: AgentAuthMethod.Session, label: 'Session' },
   { value: AgentAuthMethod.Token, label: 'Token' },
@@ -92,7 +83,7 @@ function SettingsRow({
 }) {
   return (
     <div className="flex items-center justify-between gap-4 border-b py-3 last:border-b-0">
-      <Label htmlFor={htmlFor} className="text-sm font-normal whitespace-nowrap">
+      <Label htmlFor={htmlFor} className="cursor-pointer text-sm font-normal whitespace-nowrap">
         {label}
       </Label>
       <div className="flex items-center gap-2">{children}</div>
@@ -118,7 +109,7 @@ function SelectRow({
   return (
     <SettingsRow label={label} htmlFor={id}>
       <Select value={value} onValueChange={onChange}>
-        <SelectTrigger id={id} data-testid={testId} className="w-45">
+        <SelectTrigger id={id} data-testid={testId} className="w-45 cursor-pointer">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -148,7 +139,13 @@ function SwitchRow({
 }) {
   return (
     <SettingsRow label={label} htmlFor={id}>
-      <Switch id={id} data-testid={testId} checked={checked} onCheckedChange={onChange} />
+      <Switch
+        id={id}
+        data-testid={testId}
+        checked={checked}
+        onCheckedChange={onChange}
+        className="cursor-pointer"
+      />
     </SettingsRow>
   );
 }
@@ -274,7 +271,7 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize }: SettingsP
   return (
     <div data-testid="settings-page-client" className="max-w-lg">
       <div className="flex items-center justify-between border-b pb-3">
-        <h1 className="text-lg font-semibold tracking-tight">Settings</h1>
+        <h1 className="text-sm font-bold tracking-tight">Settings</h1>
         {isPending ? <span className="text-muted-foreground text-xs">Saving...</span> : null}
         {showSaved && !isPending ? (
           <span className="flex items-center gap-1 text-xs text-green-600">
@@ -291,31 +288,14 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize }: SettingsP
         >
           Agent
         </h2>
-        <SettingsRow label="Agent" htmlFor="agent-type">
-          <Select
-            value={agentType}
-            onValueChange={(v) => {
-              setAgentType(v as AgentType);
-              save(buildAgentPayload({ type: v as AgentType }));
-            }}
-          >
-            <SelectTrigger id="agent-type" data-testid="agent-type-select" className="w-45">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {AGENT_TYPE_OPTIONS.map((opt) => {
-                const Icon = getAgentTypeIcon(opt.value);
-                return (
-                  <SelectItem key={opt.value} value={opt.value}>
-                    <span className="flex items-center gap-2">
-                      <Icon className="h-4 w-4 shrink-0" />
-                      {opt.label}
-                    </span>
-                  </SelectItem>
-                );
-              })}
-            </SelectContent>
-          </Select>
+        <SettingsRow label="Agent & Model" htmlFor="agent-model-picker">
+          <AgentModelPicker
+            initialAgentType={agentType}
+            initialModel={settings.models.default}
+            mode="settings"
+            onAgentModelChange={(newAgent) => setAgentType(newAgent as AgentType)}
+            className="w-45"
+          />
         </SettingsRow>
         <SelectRow
           label="Authentication"
@@ -374,7 +354,11 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize }: SettingsP
               save({ environment: { defaultEditor: v as EditorType, shellPreference: shell } });
             }}
           >
-            <SelectTrigger id="default-editor" data-testid="editor-select" className="w-45">
+            <SelectTrigger
+              id="default-editor"
+              data-testid="editor-select"
+              className="w-45 cursor-pointer"
+            >
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

package/web/.next/standalone/src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.tsx

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

package/web/.next/standalone/src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx

@@ -31,6 +31,8 @@ export interface FeatureItem {
   status: FeatureStatus;
   startedAt?: number;
   duration?: string;
+  agentType?: string;
+  modelId?: string;
 }
 
 export interface AppSidebarProps {
@@ -125,6 +127,8 @@ export function AppSidebar({
                         status={feature.status}
                         startedAt={feature.startedAt}
                         duration={feature.duration}
+                        agentType={feature.agentType}
+                        modelId={feature.modelId}
                         onClick={
                           onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined
                         }

package/web/.next/standalone/src/presentation/web/components/ui/checkbox-group-item.tsx

@@ -21,7 +21,7 @@ function CheckboxGroupItem({
   disabled,
 }: CheckboxGroupItemProps) {
   return (
-    <div className="flex items-start gap-2">
+    <div className="flex cursor-pointer items-start gap-2">
       <Checkbox
         id={id}
         className="mt-0.75"

package/web/.next/standalone/src/presentation/web/components/ui/checkbox-group.tsx

@@ -55,7 +55,7 @@ function CheckboxGroup({
   return (
     <div className="flex flex-col gap-3">
       {/* Parent checkbox */}
-      <div className="flex items-start gap-2">
+      <div className="flex cursor-pointer items-start gap-2">
         <Checkbox
           id={parentId}
           className="mt-0.75"