repoburg 1.3.202 → 1.3.204

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

@@ -1,191 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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,129 +0,0 @@
-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, lastModelConfig } = useStore();
-
-  const initialProvider = lastModelConfig?.provider ?? 'codex';
-  const initialModel = lastModelConfig?.model ?? '';
-  const initialReasoning = lastModelConfig?.reasoning ?? '';
-
-  const [title, setTitle] = 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 || undefined,
-      model_reasoning_effort: reasoning || undefined,
-      cwd: cwd.trim() || undefined,
-      runtime_type: initialProvider,
-    });
-    setTitle('');
-    setCwd('');
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === 'Escape') {
-      setShowNewSessionDialog(false);
-    }
-  }
-
-  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}>
-        <div className="dialog-header">
-          <span className="dialog-title">New Session</span>
-          <button className="dialog-close" onClick={() => setShowNewSessionDialog(false)}>
-            <X size={16} />
-          </button>
-        </div>
-        <div className="dialog-body">
-          <label className="dialog-label">
-            Title (optional)
-            <input
-              className="dialog-input"
-              type="text"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="e.g. refactor auth module"
-              autoFocus
-            />
-          </label>
-
-          <label className="dialog-label">
-            Model
-            <select
-              className="dialog-input dialog-select"
-              value={model}
-              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
-              className="dialog-input"
-              type="text"
-              value={cwd}
-              onChange={(e) => setCwd(e.target.value)}
-              placeholder="e.g. /Users/me/projects/my-app"
-            />
-          </label>
-        </div>
-        <div className="dialog-footer">
-          <button className="dialog-btn-cancel" onClick={() => setShowNewSessionDialog(false)}>
-            Cancel
-          </button>
-          <button className="dialog-btn-create" onClick={handleSubmit}>
-            Create
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,160 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, cleanup } from '@testing-library/react';
-import RenderArea from './RenderArea.tsx';
-import { resetStore } from '../test/component-helpers.ts';
-import { makeDetail, makeTurn, makeItem } from '../test/fixtures.ts';
-
-
-describe('RenderArea', () => {
-  beforeEach(() => {
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('shows "No session selected" when no active session and not loading', () => {
-    render(<RenderArea />);
-    expect(screen.getByText('No session selected')).toBeInTheDocument();
-  });
-
-  it('shows skeleton bars when loading and no detail', () => {
-    resetStore({ loading: true });
-    render(<RenderArea />);
-    expect(document.querySelector('.skeleton-bars')).toBeInTheDocument();
-  });
-
-  it('renders turns when session has detail', () => {
-    const turn = makeTurn('t1', 's1', { user_prompt: 'Hello agent' });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<RenderArea />);
-    expect(screen.getByText('Hello agent')).toBeInTheDocument();
-  });
-
-  it('shows "No turns yet" when session has no turns', () => {
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<RenderArea />);
-    expect(screen.getByText('No turns yet. Send a message below to start.')).toBeInTheDocument();
-  });
-
-  it('shows submitting prompt at top while waiting', () => {
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, submittingPrompt: 'pending msg' });
-    render(<RenderArea />);
-    expect(screen.getByText('pending msg')).toBeInTheDocument();
-    expect(screen.getByText('Sending…')).toBeInTheDocument();
-  });
-
-  it('changes tab shows file changes when present', () => {
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = { changes: [{ path: 'src/app.ts', kind: 'modify' }] };
-    const turn = makeTurn('t1', 's1', { items: [item] });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
-    render(<RenderArea />);
-    expect(screen.getByText(/app\.ts/)).toBeInTheDocument();
-  });
-
-  it('changes tab shows "No file changes" when empty', () => {
-    const detail = makeDetail('s1', [makeTurn('t1', 's1')]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
-    render(<RenderArea />);
-    expect(screen.getByText('No file changes in this scope.')).toBeInTheDocument();
-  });
-
-  it('changes tab shows "No session selected" when no session', () => {
-    resetStore({ activeRightTab: 'changes' });
-    render(<RenderArea />);
-    expect(screen.getByText('No session selected')).toBeInTheDocument();
-  });
-
-  // --- selectedChangePath scroll effect ---
-
-  it('selectedChangePath scrolls to diff element and clears path', () => {
-    // Stub scrollIntoView on Element prototype (jsdom doesn't implement it)
-    const proto = Element.prototype as unknown as { scrollIntoView: unknown };
-    const orig = proto.scrollIntoView;
-    proto.scrollIntoView = vi.fn();
-
-    vi.useFakeTimers();
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = { changes: [{ path: 'src/app.ts', kind: 'modify' }] };
-    const turn = makeTurn('t1', 's1', { items: [item] });
-    const detail = makeDetail('s1', [turn]);
-    const setSelectedChangePath = vi.fn();
-    resetStore({
-      activeSessionId: 's1',
-      sessionDetails: { s1: detail },
-      activeRightTab: 'changes',
-      selectedChangePath: 'src/app.ts',
-      setSelectedChangePath,
-    });
-
-    render(<RenderArea />);
-    vi.advanceTimersByTime(100);
-
-    expect(setSelectedChangePath).toHaveBeenCalledWith(null);
-    vi.useRealTimers();
-    proto.scrollIntoView = orig;
-  });
-
-  // --- changes tab edge cases ---
-
-  it('changes tab shows "files" plural when multiple changes', () => {
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = {
-      changes: [
-        { path: 'src/a.ts', kind: 'add' },
-        { path: 'src/b.ts', kind: 'delete' },
-      ],
-    };
-    const turn = makeTurn('t1', 's1', { items: [item] });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
-    render(<RenderArea />);
-    expect(screen.getByText('2 files')).toBeInTheDocument();
-  });
-
-  it('changes tab shows add and delete status badges', () => {
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = {
-      changes: [
-        { path: 'src/new.ts', kind: 'add' },
-        { path: 'src/old.ts', kind: 'delete' },
-      ],
-    };
-    const turn = makeTurn('t1', 's1', { items: [item] });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
-    render(<RenderArea />);
-    expect(screen.getByText('Added')).toBeInTheDocument();
-    expect(screen.getByText('Deleted')).toBeInTheDocument();
-  });
-
-  it('changes tab shows directory path split', () => {
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = { changes: [{ path: 'src/components/Foo.tsx', kind: 'modify' }] };
-    const turn = makeTurn('t1', 's1', { items: [item] });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
-    render(<RenderArea />);
-    expect(screen.getByText('Foo.tsx')).toBeInTheDocument();
-  });
-
-  // --- loading + detail edge case ---
-
-  it('loading with existing detail renders turns, not skeleton', () => {
-    const turn = makeTurn('t1', 's1', { user_prompt: 'Hello' });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({
-      activeSessionId: 's1',
-      sessionDetails: { s1: detail },
-      loading: true,
-    });
-    render(<RenderArea />);
-    expect(screen.getByText('Hello')).toBeInTheDocument();
-    expect(document.querySelector('.skeleton-bars')).not.toBeInTheDocument();
-  });
-});