@shepai/cli 1.76.0-pr241.9ff2c05 → 1.76.0-pr243.b5a1065

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/ui/command.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import * as React from 'react';
+import { Search } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+/**
+ * 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<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <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<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <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}
+    />
+  </div>
+));
+CommandInput.displayName = 'CommandInput';
+
+const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}
+      {...props}
+    />
+  )
+);
+CommandList.displayName = 'CommandList';
+
+const CommandEmpty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('text-muted-foreground py-6 text-center text-sm', className)}
+      {...props}
+    />
+  )
+);
+CommandEmpty.displayName = 'CommandEmpty';
+
+const CommandGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-foreground overflow-hidden p-1', className)} {...props} />
+  )
+);
+CommandGroup.displayName = 'CommandGroup';
+
+interface CommandItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean;
+}
+
+const CommandItem = React.forwardRef<HTMLButtonElement, CommandItemProps>(
+  ({ className, selected, ...props }, ref) => (
+    <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<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('bg-border -mx-1 h-px', className)} {...props} />
+  )
+);
+CommandSeparator.displayName = 'CommandSeparator';
+
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+};