repoburg 1.3.188 → 1.3.196

package/agent-pane/frontend/src/components/ModelSelector.test.tsx

@@ -0,0 +1,129 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import ModelSelector from './ModelSelector.tsx';
+import { resetStore } from '../test/component-helpers.ts';
+import { makeSession } from '../test/fixtures.ts';
+
+describe('ModelSelector', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('returns null when no active session', () => {
+    const { container } = render(<ModelSelector />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders button with provider and model label', () => {
+    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
+    resetStore({ activeSessionId: 's1', sessions: [session] });
+    render(<ModelSelector />);
+    const btn = document.querySelector('.model-selector-btn') as HTMLElement;
+    expect(btn.textContent).toContain('Codex');
+    expect(btn.textContent).toContain('GPT-5.6-Sol');
+  });
+
+  it('opens popover with 3 columns on button click', () => {
+    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
+    resetStore({ activeSessionId: 's1', sessions: [session] });
+    render(<ModelSelector />);
+    const btn = document.querySelector('.model-selector-btn') as HTMLElement;
+    fireEvent.click(btn);
+    expect(document.querySelector('.model-selector-popover')).toBeInTheDocument();
+    const headers = document.querySelectorAll('.model-selector-col-header');
+    expect(headers).toHaveLength(3);
+    expect(headers[0].textContent).toBe('Provider');
+    expect(headers[1].textContent).toBe('Model');
+    expect(headers[2].textContent).toBe('Thinking');
+  });
+
+  it('selecting a model calls updateModelConfig and closes popover', async () => {
+    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
+    const updateModelConfig = vi.fn().mockResolvedValue(undefined);
+    resetStore({ activeSessionId: 's1', sessions: [session], updateModelConfig });
+    render(<ModelSelector />);
+    fireEvent.click(document.querySelector('.model-selector-btn')!);
+    // Click on "GPT-5.6-Terra" model
+    const terraItem = Array.from(document.querySelectorAll('.model-selector-item')).find((el) =>
+      el.textContent?.includes('GPT-5.6-Terra'),
+    )!;
+    fireEvent.click(terraItem);
+    expect(updateModelConfig).toHaveBeenCalledWith('gpt-5.6-terra', expect.any(String));
+  });
+
+  it('selecting reasoning calls updateModelConfig with current model', async () => {
+    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
+    const updateModelConfig = vi.fn().mockResolvedValue(undefined);
+    resetStore({ activeSessionId: 's1', sessions: [session], updateModelConfig });
+    render(<ModelSelector />);
+    fireEvent.click(document.querySelector('.model-selector-btn')!);
+    // Click on "High" reasoning level
+    const highItem = Array.from(document.querySelectorAll('.model-selector-item')).find((el) =>
+      el.textContent?.trim() === 'High',
+    )!;
+    fireEvent.click(highItem);
+    expect(updateModelConfig).toHaveBeenCalledWith('gpt-5.6-sol', 'high');
+  });
+
+  it('reasoning cascade: switching to model without current reasoning level switches to default', async () => {
+    // gpt-5.5 has levels [low, medium, high, xhigh] — no "max" or "ultra"
+    // gpt-5.6-sol has levels [low, medium, high, xhigh, max, ultra]
+    // Switch from gpt-5.6-sol (reasoning=ultra) to gpt-5.5 → ultra not supported → default for gpt-5.5 is "medium"
+    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'ultra' });
+    const updateModelConfig = vi.fn().mockResolvedValue(undefined);
+    resetStore({ activeSessionId: 's1', sessions: [session], updateModelConfig });
+    render(<ModelSelector />);
+    fireEvent.click(document.querySelector('.model-selector-btn')!);
+    // Click on "GPT-5.5" model
+    const gpt55Item = Array.from(document.querySelectorAll('.model-selector-item')).find((el) =>
+      el.textContent?.includes('GPT-5.5'),
+    )!;
+    fireEvent.click(gpt55Item);
+    // gpt-5.5 defaultReasoning is "medium"
+    expect(updateModelConfig).toHaveBeenCalledWith('gpt-5.5', 'medium');
+  });
+
+  it('clicking a different provider calls updateModelConfig with runtimeType and keeps popover open', async () => {
+    const session = makeSession('s1', { runtime_type: 'codex', model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
+    const updateModelConfig = vi.fn().mockResolvedValue(undefined);
+    resetStore({ activeSessionId: 's1', sessions: [session], updateModelConfig });
+    render(<ModelSelector />);
+    fireEvent.click(document.querySelector('.model-selector-btn')!);
+    // Click on "Claude" provider
+    const claudeItem = Array.from(document.querySelectorAll('.model-selector-item')).find((el) =>
+      el.textContent?.includes('Claude'),
+    )!;
+    fireEvent.click(claudeItem);
+    expect(updateModelConfig).toHaveBeenCalledWith('', '', 'claude');
+    // Popover should stay open
+    expect(document.querySelector('.model-selector-popover')).toBeInTheDocument();
+  });
+
+  it('outside click closes popover', () => {
+    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
+    resetStore({ activeSessionId: 's1', sessions: [session] });
+    render(
+      <div>
+        <div data-testid="outside">Outside</div>
+        <ModelSelector />
+      </div>,
+    );
+    fireEvent.click(document.querySelector('.model-selector-btn')!);
+    expect(document.querySelector('.model-selector-popover')).toBeInTheDocument();
+    fireEvent.mouseDown(screen.getByTestId('outside'));
+    expect(document.querySelector('.model-selector-popover')).toBeNull();
+  });
+
+  it('ESC closes popover', () => {
+    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
+    resetStore({ activeSessionId: 's1', sessions: [session] });
+    render(<ModelSelector />);
+    fireEvent.click(document.querySelector('.model-selector-btn')!);
+    expect(document.querySelector('.model-selector-popover')).toBeInTheDocument();
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(document.querySelector('.model-selector-popover')).toBeNull();
+  });
+});

package/agent-pane/frontend/src/components/ModelSelector.tsx

@@ -0,0 +1,191 @@
+import { useState, useRef, useEffect } from 'react';
+import { useStore } from '../store/store.ts';
+import { PROVIDERS, getModels, getReasoningLevels, getDefaultReasoning } from '../constants/models.ts';
+import { useOutsideClick } from '../hooks/useOutsideClick.ts';
+import { useEscapeKey } from '../hooks/useEscapeKey.ts';
+import { ChevronDown, Check, Lock } from 'lucide-react';
+import type { ModelInfo } from '../types/index.ts';
+
+export default function ModelSelector() {
+  const { activeSessionId, sessions, updateModelConfig } = useStore();
+  const showModelSelector = useStore((s) => s.showModelSelector);
+  const setShowModelSelector = useStore((s) => s.setShowModelSelector);
+  const session = sessions.find((s) => s.id === activeSessionId);
+  const storeModels = useStore((s) => s.models);
+  const modelsLoading = useStore((s) => s.modelsLoading);
+  const loadModels = useStore((s) => s.loadModels);
+
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClick(ref, () => setOpen(false), open);
+  useEscapeKey(() => setOpen(false), open);
+
+  // Open when triggered by /model command
+  useEffect(() => {
+    if (showModelSelector) {
+      setOpen(true);
+      setShowModelSelector(false);
+    }
+  }, [showModelSelector, setShowModelSelector]);
+
+  // Load dynamic models on mount
+  useEffect(() => {
+    if (session?.runtime_type) {
+      loadModels(session.runtime_type);
+    }
+  }, [session?.runtime_type, loadModels]);
+
+  if (!session) return null;
+
+  const providerId = session.runtime_type;
+  const currentModel = session.model ?? '';
+  const currentReasoning = session.model_reasoning_effort ?? '';
+
+  // Use dynamic models from store, fallback to hardcoded
+  const dynamicModels: ModelInfo[] = storeModels.length > 0 ? storeModels : [];
+  const fallbackModels = getModels(providerId);
+  const baseModels = dynamicModels.length > 0 ? dynamicModels : fallbackModels;
+
+  // Prepend current model if not in the list (e.g. custom or Ollama models)
+  const models: ModelInfo[] = [...baseModels];
+  if (currentModel && !models.some((m) => m.slug === currentModel)) {
+    const ref = fallbackModels[0];
+    models.unshift({
+      slug: currentModel,
+      displayName: currentModel,
+      description: 'Custom model',
+      defaultReasoning: ref?.defaultReasoning ?? 'medium',
+      reasoningLevels: ref?.reasoningLevels ?? [],
+    });
+  }
+
+  // Find a model by slug
+  function findModel(slug: string): ModelInfo | undefined {
+    return models.find((m) => m.slug === slug);
+  }
+
+  // Get reasoning levels for a model
+  function levelsFor(slug: string): { effort: string; label: string }[] {
+    if (dynamicModels.length > 0) {
+      return findModel(slug)?.reasoningLevels ?? [];
+    }
+    return getReasoningLevels(providerId, slug);
+  }
+
+  // Get default reasoning for a model
+  function defaultFor(slug: string): string | undefined {
+    if (dynamicModels.length > 0) {
+      return findModel(slug)?.defaultReasoning;
+    }
+    return getDefaultReasoning(providerId, slug);
+  }
+
+  const provider = PROVIDERS.find((p) => p.id === providerId);
+  const modelDef = findModel(currentModel);
+  const reasoningLevels = currentModel ? levelsFor(currentModel) : [];
+
+  const providerLabel = provider?.label ?? providerId;
+  const modelLabel = modelDef?.displayName ?? (currentModel || 'Default');
+  const reasoningDef = reasoningLevels.find((r) => r.effort === currentReasoning);
+  const reasoningLabel = reasoningDef?.label ?? (currentReasoning || 'Default');
+
+  function handleSelectModel(modelSlug: string) {
+    const levels = levelsFor(modelSlug);
+    const stillSupported = levels.some((r) => r.effort === currentReasoning);
+    const newReasoning = stillSupported
+      ? currentReasoning
+      : (defaultFor(modelSlug) ?? levels[0]?.effort ?? '');
+    updateModelConfig(modelSlug, newReasoning);
+    setOpen(false);
+  }
+
+  function handleSelectReasoning(effort: string) {
+    updateModelConfig(currentModel, effort);
+    setOpen(false);
+  }
+
+  return (
+    <div className="model-selector" ref={ref}>
+      <button className="model-selector-btn" onClick={() => setOpen(!open)} title="Change model and thinking level">
+        <span className="model-selector-provider">{providerLabel}</span>
+        <span className="model-selector-sep">›</span>
+        <span className="model-selector-model">{modelLabel}</span>
+        {reasoningLabel !== 'Default' && (
+          <>
+            <span className="model-selector-sep">›</span>
+            <span className="model-selector-reasoning">{reasoningLabel}</span>
+          </>
+        )}
+        <ChevronDown size={12} className="model-selector-chevron" />
+      </button>
+
+      {open && (
+        <div className="model-selector-popover">
+          {/* Column 1: Provider */}
+          <div className="model-selector-column">
+            <div className="model-selector-col-header">Provider</div>
+            {PROVIDERS.map((p) => (
+              <div
+                key={p.id}
+                className={`model-selector-item ${p.id === providerId ? 'selected' : ''} ${!p.available ? 'disabled' : ''}`}
+                onClick={() => {
+                  if (!p.available) return;
+                  if (p.id === providerId) { setOpen(false); return; }
+                  // Switch provider — clear model and reasoning, keep popover open
+                  updateModelConfig('', '', p.id);
+                }}
+              >
+                <span>{p.label}</span>
+                {!p.available && (
+                  <span className="model-selector-coming-soon">
+                    <Lock size={10} /> Soon
+                  </span>
+                )}
+                {p.id === providerId && <Check size={12} />}
+              </div>
+            ))}
+          </div>
+
+          {/* Column 2: Model */}
+          <div className="model-selector-column">
+            <div className="model-selector-col-header">Model</div>
+            {modelsLoading && <div className="model-selector-empty">Loading models…</div>}
+            {!modelsLoading && models.length === 0 && (
+              <div className="model-selector-empty">No models available</div>
+            )}
+            {models.map((m) => (
+              <div
+                key={m.slug}
+                className={`model-selector-item ${m.slug === currentModel ? 'selected' : ''}`}
+                onClick={() => handleSelectModel(m.slug)}
+              >
+                <div className="model-selector-item-main">
+                  <span className="model-selector-item-name">{m.displayName}</span>
+                  <span className="model-selector-item-desc">{m.description}</span>
+                </div>
+                {m.slug === currentModel && <Check size={12} />}
+              </div>
+            ))}
+          </div>
+
+          {/* Column 3: Thinking Level */}
+          <div className="model-selector-column">
+            <div className="model-selector-col-header">Thinking</div>
+            {reasoningLevels.length === 0 && <div className="model-selector-empty">Select a model first</div>}
+            {reasoningLevels.map((r) => (
+              <div
+                key={r.effort}
+                className={`model-selector-item ${r.effort === currentReasoning ? 'selected' : ''}`}
+                onClick={() => handleSelectReasoning(r.effort)}
+              >
+                <span>{r.label}</span>
+                {r.effort === currentReasoning && <Check size={12} />}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/agent-pane/frontend/src/components/NewSessionDialog.test.tsx

@@ -0,0 +1,95 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import NewSessionDialog from './NewSessionDialog.tsx';
+import { resetStore } from '../test/component-helpers.ts';
+
+describe('NewSessionDialog', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('returns null when showNewSessionDialog is false', () => {
+    const { container } = render(<NewSessionDialog />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders form with title, model, and cwd inputs when visible', () => {
+    resetStore({ showNewSessionDialog: true });
+    render(<NewSessionDialog />);
+    expect(screen.getByPlaceholderText('e.g. refactor auth module')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('e.g. /Users/me/projects/my-app')).toBeInTheDocument();
+    expect(screen.getByText('Create')).toBeInTheDocument();
+  });
+
+  it('model select shows codex models', () => {
+    resetStore({ showNewSessionDialog: true });
+    render(<NewSessionDialog />);
+    const modelSelect = document.querySelector('select') as HTMLSelectElement;
+    // Default option + 4 codex models
+    expect(modelSelect.options.length).toBe(5);
+    expect(Array.from(modelSelect.options).map((o) => o.textContent)).toEqual(
+      expect.arrayContaining(['Default (Codex picks)', 'GPT-5.6-Sol — Flagship — complex, open-ended work']),
+    );
+  });
+
+  it('selecting a model shows reasoning levels', () => {
+    resetStore({ showNewSessionDialog: true });
+    render(<NewSessionDialog />);
+    const modelSelect = document.querySelector('select') as HTMLSelectElement;
+    fireEvent.change(modelSelect, { target: { value: 'gpt-5.6-sol' } });
+    // Reasoning level select should appear (second select)
+    const reasoningSelect = document.querySelectorAll('select')[1];
+    expect(reasoningSelect).toBeTruthy();
+  });
+
+  it('changing model to one without current reasoning level switches to default', () => {
+    resetStore({
+      showNewSessionDialog: true,
+      lastModelConfig: { provider: 'codex', model: 'gpt-5.6-sol', reasoning: 'ultra' },
+    });
+    render(<NewSessionDialog />);
+    // gpt-5.6-sol has reasoning 'ultra', but gpt-5.5 only goes up to 'xhigh'
+    // First select gpt-5.6-sol to get reasoning levels visible
+    const selects = document.querySelectorAll('select');
+    const modelSelect = selects[0];
+    fireEvent.change(modelSelect, { target: { value: 'gpt-5.6-sol' } });
+    // Now select gpt-5.5
+    fireEvent.change(modelSelect, { target: { value: 'gpt-5.5' } });
+    // gpt-5.5 defaultReasoning is 'medium'
+    const reasoningSelect = document.querySelectorAll('select')[1] as HTMLSelectElement;
+    expect(reasoningSelect.value).toBe('medium');
+  });
+
+  it('Create button calls createSession with form values', async () => {
+    const createSession = vi.fn().mockResolvedValue(undefined);
+    resetStore({ showNewSessionDialog: true, createSession });
+    render(<NewSessionDialog />);
+    const titleInput = screen.getByPlaceholderText('e.g. refactor auth module');
+    fireEvent.change(titleInput, { target: { value: 'My Session' } });
+    fireEvent.click(screen.getByText('Create'));
+    expect(createSession).toHaveBeenCalledWith(expect.objectContaining({
+      title: 'My Session',
+      runtime_type: 'codex',
+    }));
+  });
+
+  it('ESC closes dialog', () => {
+    const setShowNewSessionDialog = vi.fn();
+    resetStore({ showNewSessionDialog: true, setShowNewSessionDialog });
+    render(<NewSessionDialog />);
+    fireEvent.keyDown(document.querySelector('.dialog')!, { key: 'Escape' });
+    expect(setShowNewSessionDialog).toHaveBeenCalledWith(false);
+  });
+
+  it('overlay click closes dialog', () => {
+    const setShowNewSessionDialog = vi.fn();
+    resetStore({ showNewSessionDialog: true, setShowNewSessionDialog });
+    render(<NewSessionDialog />);
+    const overlay = document.querySelector('.dialog-overlay')!;
+    fireEvent.click(overlay);
+    expect(setShowNewSessionDialog).toHaveBeenCalledWith(false);
+  });
+});

package/agent-pane/frontend/src/components/NewSessionDialog.tsx

@@ -1,24 +1,34 @@
 import { useState } from 'react';
 import { useStore } from '../store/store.ts';
 import { X } from 'lucide-react';
+import { getModels, getReasoningLevels, getDefaultReasoning } from '../constants/models.ts';
 
 export default function NewSessionDialog() {
-  const { showNewSessionDialog, setShowNewSessionDialog, createSession } = useStore();
+  const { showNewSessionDialog, setShowNewSessionDialog, createSession, lastModelConfig } = useStore();
+
+  const initialProvider = lastModelConfig?.provider ?? 'codex';
+  const initialModel = lastModelConfig?.model ?? '';
+  const initialReasoning = lastModelConfig?.reasoning ?? '';
+
   const [title, setTitle] = useState('');
-  const [model, setModel] = useState('');
+  const [model, setModel] = useState(initialModel);
+  const [reasoning, setReasoning] = useState(initialReasoning);
   const [cwd, setCwd] = useState('');
 
   if (!showNewSessionDialog) return null;
 
+  const models = getModels(initialProvider);
+  const reasoningLevels = model ? getReasoningLevels(initialProvider, model) : [];
+
   function handleSubmit() {
     createSession({
       title: title.trim() || undefined,
-      model: model.trim() || undefined,
+      model: model || undefined,
+      model_reasoning_effort: reasoning || undefined,
       cwd: cwd.trim() || undefined,
-      runtime_type: 'codex',
+      runtime_type: initialProvider,
     });
     setTitle('');
-    setModel('');
     setCwd('');
   }
 
@@ -28,6 +38,16 @@ export default function NewSessionDialog() {
     }
   }
 
+  function handleModelChange(slug: string) {
+    setModel(slug);
+    // If current reasoning is not supported by new model, switch to default
+    const levels = getReasoningLevels(initialProvider, slug);
+    const stillSupported = levels.some((r) => r.effort === reasoning);
+    if (!stillSupported) {
+      setReasoning(getDefaultReasoning(initialProvider, slug) ?? levels[0]?.effort ?? '');
+    }
+  }
+
   return (
     <div className="dialog-overlay" onClick={() => setShowNewSessionDialog(false)}>
       <div className="dialog" onClick={(e) => e.stopPropagation()} onKeyDown={handleKeyDown}>
@@ -49,16 +69,41 @@ export default function NewSessionDialog() {
               autoFocus
             />
           </label>
+
           <label className="dialog-label">
-            Model (optional)
-            <input
-              className="dialog-input"
-              type="text"
+            Model
+            <select
+              className="dialog-input dialog-select"
               value={model}
-              onChange={(e) => setModel(e.target.value)}
-              placeholder="e.g. gpt-5 (default: Codex picks)"
-            />
+              onChange={(e) => handleModelChange(e.target.value)}
+            >
+              <option value="">Default (Codex picks)</option>
+              {models.map((m) => (
+                <option key={m.slug} value={m.slug}>
+                  {m.displayName} — {m.description}
+                </option>
+              ))}
+            </select>
           </label>
+
+          {reasoningLevels.length > 0 && (
+            <label className="dialog-label">
+              Thinking Level
+              <select
+                className="dialog-input dialog-select"
+                value={reasoning}
+                onChange={(e) => setReasoning(e.target.value)}
+              >
+                <option value="">Default ({getDefaultReasoning(initialProvider, model)})</option>
+                {reasoningLevels.map((r) => (
+                  <option key={r.effort} value={r.effort}>
+                    {r.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          )}
+
           <label className="dialog-label">
             Working Directory (optional)
             <input
@@ -81,4 +126,4 @@ export default function NewSessionDialog() {
       </div>
     </div>
   );
-}
+}