agent-orchestrator/ui-electrobun/src/mainview/WizardStep3.svelte

<script lang="ts">
  import CustomDropdown from './ui/CustomDropdown.svelte';
  import CustomCheckbox from './ui/CustomCheckbox.svelte';
  import ModelConfigPanel from './ModelConfigPanel.svelte';
  import type { ProviderId } from './provider-capabilities';

  interface ProviderInfo {
    id: string;
    available: boolean;
    hasApiKey: boolean;
    hasCli: boolean;
    cliPath: string | null;
    version: string | null;
  }

  interface ModelInfo {
    id: string;
    name: string;
    provider: string;
  }

  interface Props {
    provider: string;
    model: string;
    permissionMode: string;
    systemPrompt: string;
    autoStart: boolean;
    detectedProviders: ProviderInfo[];
    providerModels: ModelInfo[];
    modelsLoading: boolean;
    modelConfig: Record<string, unknown>;
    onUpdate: (field: string, value: unknown) => void;
  }

  let {
    provider, model, permissionMode, systemPrompt, autoStart,
    detectedProviders, providerModels, modelsLoading, modelConfig, onUpdate,
  }: Props = $props();

  let availableProviders = $derived(
    detectedProviders.length > 0
      ? detectedProviders.filter(p => p.available)
      : [{ id: 'claude' }, { id: 'codex' }, { id: 'ollama' }, { id: 'gemini' }] as ProviderInfo[]
  );

  let modelItems = $derived(
    providerModels.map(m => ({ value: m.id, label: m.name || m.id }))
  );

  function providerBadge(p: ProviderInfo): string {
    const parts: string[] = [];
    if (p.hasApiKey) parts.push('API Key');
    if (p.hasCli) parts.push('CLI');
    if (p.version) parts.push(`v${p.version}`);
    return parts.join(' \u00b7 ') || '';
  }

  function defaultPlaceholder(): string {
    switch (provider) {
      case 'claude': return 'claude-sonnet-4-20250514';
      case 'codex': return 'gpt-5.4';
      case 'ollama': return 'qwen3:8b';
      case 'gemini': return 'gemini-2.5-flash';
      default: return '';
    }
  }

  function handleProviderKeydown(e: KeyboardEvent, pid: string) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onUpdate('provider', pid);
      onUpdate('modelConfig', {});
    }
  }
</script>

<label class="wz-label">AI Provider</label>
{#if detectedProviders.length > 0 && availableProviders.length === 0}
  <div class="wz-hint warn">No providers detected. Install Claude CLI, set OPENAI_API_KEY, or start Ollama.</div>
{/if}
<div class="wz-provider-grid">
  {#each availableProviders as p}
    <button class="wz-provider-card" class:active={provider === p.id}
      onclick={() => { onUpdate('provider', p.id); onUpdate('modelConfig', {}); }}
      onkeydown={(e) => handleProviderKeydown(e, p.id)}
      tabindex={0}>
      <span class="wz-provider-name">{p.id}</span>
      {#if 'hasApiKey' in p}
        <span class="wz-provider-badge">{providerBadge(p as ProviderInfo)}</span>
      {/if}
    </button>
  {/each}
</div>

<label class="wz-label">Model</label>
{#if providerModels.length > 0}
  <CustomDropdown
    items={modelItems}
    selected={model}
    placeholder={modelsLoading ? 'Loading...' : 'Select model...'}
    onSelect={v => onUpdate('model', v)}
  />
{:else}
  <CustomDropdown
    items={[{ value: '', label: modelsLoading ? 'Loading models...' : defaultPlaceholder() }]}
    selected={model}
    placeholder={modelsLoading ? 'Loading...' : defaultPlaceholder()}
    onSelect={v => onUpdate('model', v)}
    disabled={modelsLoading}
  />
{/if}

<!-- Per-model configuration -->
<ModelConfigPanel
  provider={provider as ProviderId}
  {model}
  config={modelConfig}
  onChange={c => onUpdate('modelConfig', c)}
/>

<label class="wz-label">Permission mode</label>
<div class="wz-segmented">
  {#each ['restricted', 'default', 'bypassPermissions'] as pm}
    <button class="wz-seg-btn" class:active={permissionMode === pm}
      onclick={() => onUpdate('permissionMode', pm)}
      tabindex={0}>{pm}</button>
  {/each}
</div>

<label class="wz-label">System prompt</label>
<textarea class="wz-textarea" value={systemPrompt}
  oninput={(e) => onUpdate('systemPrompt', (e.target as HTMLTextAreaElement).value)}
  rows="3" placeholder="Optional system instructions..."></textarea>

<CustomCheckbox
  checked={autoStart}
  label="Auto-start agent on create"
  onChange={v => onUpdate('autoStart', v)}
/>

<style>
  .wz-label { font-size: 0.75rem; font-weight: 500; color: var(--ctp-subtext0); margin-top: 0.25rem; }
  .wz-textarea { padding: 0.375rem 0.5rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8125rem; font-family: var(--ui-font-family); width: 100%; resize: vertical; min-height: 3rem; }
  .wz-textarea:focus { outline: 2px solid var(--ctp-blue); outline-offset: -1px; border-color: var(--ctp-blue); }
  .wz-textarea::placeholder { color: var(--ctp-overlay0); }
  .wz-hint { font-size: 0.6875rem; }
  .wz-hint.warn { color: var(--ctp-peach); }
  .wz-provider-grid { display: flex; flex-wrap: wrap; gap: 0.375rem; }
  .wz-provider-card { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0.5rem 0.75rem; border-radius: 0.375rem; border: 1px solid var(--ctp-surface1); background: var(--ctp-surface0); cursor: pointer; min-width: 5rem; }
  .wz-provider-card:hover { border-color: var(--ctp-overlay1); }
  .wz-provider-card:focus-visible { outline: 2px solid var(--ctp-blue); outline-offset: -1px; }
  .wz-provider-card.active { border-color: var(--ctp-blue); background: color-mix(in srgb, var(--ctp-blue) 10%, transparent); }
  .wz-provider-name { font-size: 0.8125rem; font-weight: 600; color: var(--ctp-text); text-transform: capitalize; }
  .wz-provider-badge { font-size: 0.5625rem; color: var(--ctp-subtext0); }
  .wz-segmented { display: flex; gap: 0; border-radius: 0.25rem; overflow: hidden; border: 1px solid var(--ctp-surface1); }
  .wz-seg-btn { flex: 1; padding: 0.375rem 0.5rem; font-size: 0.75rem; background: var(--ctp-surface0); border: none; color: var(--ctp-subtext0); cursor: pointer; font-family: var(--ui-font-family); border-right: 1px solid var(--ctp-surface1); }
  .wz-seg-btn:last-child { border-right: none; }
  .wz-seg-btn:hover { color: var(--ctp-text); }
  .wz-seg-btn:focus-visible { outline: 2px solid var(--ctp-blue); outline-offset: -2px; }
  .wz-seg-btn.active { background: color-mix(in srgb, var(--ctp-blue) 20%, transparent); color: var(--ctp-blue); }
</style>