repoburg 1.3.188 → 1.3.196

package/agent-pane/frontend/src/components/panels/TurnsPanel.tsx

@@ -1,10 +1,34 @@
+import { useRef, useState } from 'react';
 import { useStore } from '../../store/store.ts';
-import { User } from 'lucide-react';
+import { useOutsideClick } from '../../hooks/useOutsideClick.ts';
+import { useEscapeKey } from '../../hooks/useEscapeKey.ts';
+import { User, Rewind, GitBranch } from 'lucide-react';
+
+interface TurnContextMenu {
+  x: number;
+  y: number;
+  turnId: string;
+  turnIndex: number;
+  isLast: boolean;
+}
 
 export default function TurnsPanel() {
-  const { activeSessionId, sessionDetails, activeTurnIndex, setActiveTurnIndex } = useStore();
+  const activeSessionId = useStore((s) => s.activeSessionId);
+  const sessionDetails = useStore((s) => s.sessionDetails);
+  const activeTurnIndex = useStore((s) => s.activeTurnIndex);
+  const setActiveTurnIndex = useStore((s) => s.setActiveTurnIndex);
+  const rewindToTurn = useStore((s) => s.rewindToTurn);
+  const branchFromTurn = useStore((s) => s.branchFromTurn);
+
   const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
   const turns = detail?.turns ?? [];
+  const isRunning = detail?.is_running === 1;
+
+  const [ctxMenu, setCtxMenu] = useState<TurnContextMenu | null>(null);
+  const ctxRef = useRef<HTMLDivElement>(null);
+
+  useOutsideClick(ctxRef, () => setCtxMenu(null), !!ctxMenu);
+  useEscapeKey(() => setCtxMenu(null), !!ctxMenu);
 
   if (turns.length === 0) {
     return <div className="empty-state">No turns yet</div>;
@@ -12,7 +36,6 @@ export default function TurnsPanel() {
 
   function handleClick(idx: number) {
     setActiveTurnIndex(idx);
-    // Scroll render area to turn position
     requestAnimationFrame(() => {
       document.getElementById(`turn-${idx}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
     });
@@ -23,15 +46,23 @@ export default function TurnsPanel() {
       <div className="right-section-title">Conversation</div>
       {turns.map((turn, idx) => {
         const isActive = idx === activeTurnIndex;
-        const preview = turn.user_prompt.length > 50
-          ? turn.user_prompt.slice(0, 50) + '…'
-          : turn.user_prompt;
+        const preview = turn.user_prompt.length > 50 ? turn.user_prompt.slice(0, 50) + '…' : turn.user_prompt;
 
         return (
           <div
             key={turn.id}
             className={`turn-item ${isActive ? 'active' : ''}`}
             onClick={() => handleClick(idx)}
+            onContextMenu={(e) => {
+              e.preventDefault();
+              setCtxMenu({
+                x: e.clientX,
+                y: e.clientY,
+                turnId: turn.id,
+                turnIndex: idx,
+                isLast: idx === turns.length - 1,
+              });
+            }}
           >
             <span className="turn-item-icon" style={{ background: 'var(--amber)', color: '#fff' }}>
               <User size={12} />
@@ -40,6 +71,34 @@ export default function TurnsPanel() {
           </div>
         );
       })}
+
+      {ctxMenu && (
+        <div
+          ref={ctxRef}
+          className="ctx-menu"
+          style={{ position: 'fixed', left: ctxMenu.x, top: ctxMenu.y, zIndex: 500 }}
+        >
+          <div
+            className={`ctx-menu-item ${ctxMenu.isLast || isRunning ? 'ctx-disabled' : ''}`}
+            onClick={() => {
+              if (ctxMenu.isLast || isRunning) return;
+              rewindToTurn(activeSessionId!, ctxMenu.turnId);
+              setCtxMenu(null);
+            }}
+          >
+            <Rewind size={12} /> Rewind to Here
+          </div>
+          <div
+            className="ctx-menu-item"
+            onClick={() => {
+              branchFromTurn(activeSessionId!, ctxMenu.turnId);
+              setCtxMenu(null);
+            }}
+          >
+            <GitBranch size={12} /> Branch from Here
+          </div>
+        </div>
+      )}
     </div>
   );
-}
+}

package/agent-pane/frontend/src/constants/models.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect } from 'vitest';
+import {
+  getProvider,
+  getModels,
+  getModel,
+  getReasoningLevels,
+  getDefaultModel,
+  getDefaultReasoning,
+} from './models.ts';
+
+describe('getProvider', () => {
+  it('finds codex provider', () => {
+    expect(getProvider('codex')?.id).toBe('codex');
+  });
+
+  it('finds claude provider', () => {
+    expect(getProvider('claude')?.id).toBe('claude');
+  });
+
+  it('returns undefined for unknown provider', () => {
+    expect(getProvider('unknown')).toBeUndefined();
+  });
+});
+
+describe('getModels', () => {
+  it('returns 4 models for codex', () => {
+    expect(getModels('codex')).toHaveLength(4);
+  });
+
+  it('returns 3 models for claude', () => {
+    expect(getModels('claude')).toHaveLength(3);
+  });
+
+  it('returns empty array for unknown provider', () => {
+    expect(getModels('unknown')).toEqual([]);
+  });
+});
+
+describe('getModel', () => {
+  it('finds gpt-5.6-sol in codex', () => {
+    expect(getModel('codex', 'gpt-5.6-sol')?.slug).toBe('gpt-5.6-sol');
+  });
+
+  it('returns undefined for unknown model slug', () => {
+    expect(getModel('codex', 'unknown')).toBeUndefined();
+  });
+
+  it('returns undefined for unknown provider', () => {
+    expect(getModel('unknown', 'gpt-5.6-sol')).toBeUndefined();
+  });
+});
+
+describe('getReasoningLevels', () => {
+  it('returns 6 levels for gpt-5.6-sol', () => {
+    expect(getReasoningLevels('codex', 'gpt-5.6-sol')).toHaveLength(6);
+  });
+
+  it('returns 5 levels for gpt-5.6-luna (no ultra)', () => {
+    expect(getReasoningLevels('codex', 'gpt-5.6-luna')).toHaveLength(5);
+  });
+
+  it('returns 4 levels for gpt-5.5', () => {
+    expect(getReasoningLevels('codex', 'gpt-5.5')).toHaveLength(4);
+  });
+
+  it('returns empty array for unknown model', () => {
+    expect(getReasoningLevels('codex', 'unknown')).toEqual([]);
+  });
+});
+
+describe('getDefaultModel', () => {
+  it('returns first model for codex (gpt-5.6-sol)', () => {
+    expect(getDefaultModel('codex')?.slug).toBe('gpt-5.6-sol');
+  });
+
+  it('returns first model for claude (claude-sonnet-5)', () => {
+    expect(getDefaultModel('claude')?.slug).toBe('claude-sonnet-5');
+  });
+
+  it('returns undefined for unknown provider', () => {
+    expect(getDefaultModel('unknown')).toBeUndefined();
+  });
+});
+
+describe('getDefaultReasoning', () => {
+  it('returns low for gpt-5.6-sol', () => {
+    expect(getDefaultReasoning('codex', 'gpt-5.6-sol')).toBe('low');
+  });
+
+  it('returns medium for gpt-5.6-terra', () => {
+    expect(getDefaultReasoning('codex', 'gpt-5.6-terra')).toBe('medium');
+  });
+
+  it('returns undefined for unknown model', () => {
+    expect(getDefaultReasoning('codex', 'unknown')).toBeUndefined();
+  });
+});

package/agent-pane/frontend/src/constants/models.ts

@@ -0,0 +1,129 @@
+// Model catalog — hardcoded from `codex debug models --bundled` output.
+// Codex SDK connects to ChatGPT backend; these are the available models.
+
+export interface ReasoningLevel {
+  effort: string; // SDK value: "low" | "medium" | "high" | "xhigh" | "max" | "ultra"
+  label: string; // UI label: "Low" | "Medium" | "High" | "Extra High" | "Max" | "Ultra"
+}
+
+export interface ModelDef {
+  slug: string; // "gpt-5.6-sol"
+  displayName: string; // "GPT-5.6-Sol"
+  description: string; // short description
+  defaultReasoning: string; // "low" | "medium" | ...
+  reasoningLevels: ReasoningLevel[];
+}
+
+export interface ProviderDef {
+  id: string; // "codex" | "claude"
+  label: string; // "Codex" | "Claude"
+  available: boolean; // false = "coming soon" placeholder
+  models: ModelDef[];
+}
+
+const LEVELS: Record<string, ReasoningLevel> = {
+  low: { effort: 'low', label: 'Low' },
+  medium: { effort: 'medium', label: 'Medium' },
+  high: { effort: 'high', label: 'High' },
+  xhigh: { effort: 'xhigh', label: 'Extra High' },
+  max: { effort: 'max', label: 'Max' },
+  ultra: { effort: 'ultra', label: 'Ultra' },
+};
+
+export const PROVIDERS: ProviderDef[] = [
+  {
+    id: 'codex',
+    label: 'Codex',
+    available: true,
+    models: [
+      {
+        slug: 'gpt-5.6-sol',
+        displayName: 'GPT-5.6-Sol',
+        description: 'Flagship — complex, open-ended work',
+        defaultReasoning: 'low',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high, LEVELS.xhigh, LEVELS.max, LEVELS.ultra],
+      },
+      {
+        slug: 'gpt-5.6-terra',
+        displayName: 'GPT-5.6-Terra',
+        description: 'Balanced all-rounder for everyday work',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high, LEVELS.xhigh, LEVELS.max, LEVELS.ultra],
+      },
+      {
+        slug: 'gpt-5.6-luna',
+        displayName: 'GPT-5.6-Luna',
+        description: 'Fast, affordable — clear, repeatable tasks',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high, LEVELS.xhigh, LEVELS.max],
+      },
+      {
+        slug: 'gpt-5.5',
+        displayName: 'GPT-5.5',
+        description: 'Previous-gen frontier model',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high, LEVELS.xhigh],
+      },
+    ],
+  },
+  {
+    id: 'claude',
+    label: 'Claude',
+    available: true,
+    models: [
+      {
+        slug: 'claude-sonnet-5',
+        displayName: 'Claude Sonnet 5',
+        description: 'Balanced all-rounder for everyday work',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high, LEVELS.xhigh, LEVELS.max],
+      },
+      {
+        slug: 'claude-opus-5',
+        displayName: 'Claude Opus 5',
+        description: 'Deep reasoning for complex tasks',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high, LEVELS.xhigh, LEVELS.max],
+      },
+      {
+        slug: 'claude-fable-5',
+        displayName: 'Claude Fable 5',
+        description: 'Fast and efficient for simple tasks',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high, LEVELS.xhigh, LEVELS.max],
+      },
+    ],
+  },
+];
+
+/** Get provider by ID. */
+export function getProvider(id: string): ProviderDef | undefined {
+  return PROVIDERS.find((p) => p.id === id);
+}
+
+/** Get models for a provider. Returns empty array if provider not found or unavailable. */
+export function getModels(providerId: string): ModelDef[] {
+  const provider = getProvider(providerId);
+  return provider?.models ?? [];
+}
+
+/** Get a specific model definition. */
+export function getModel(providerId: string, slug: string): ModelDef | undefined {
+  return getModels(providerId).find((m) => m.slug === slug);
+}
+
+/** Get reasoning levels for a specific model. */
+export function getReasoningLevels(providerId: string, slug: string): ReasoningLevel[] {
+  return getModel(providerId, slug)?.reasoningLevels ?? [];
+}
+
+/** Get the default model for a provider (first in list). */
+export function getDefaultModel(providerId: string): ModelDef | undefined {
+  const models = getModels(providerId);
+  return models[0];
+}
+
+/** Get the default reasoning level for a model. */
+export function getDefaultReasoning(providerId: string, slug: string): string | undefined {
+  return getModel(providerId, slug)?.defaultReasoning;
+}

package/agent-pane/frontend/src/hooks/useEscapeKey.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useEscapeKey } from './useEscapeKey.ts';
+
+describe('useEscapeKey', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('calls callback when Escape is pressed', () => {
+    const callback = vi.fn();
+    renderHook(() => useEscapeKey(callback));
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call callback when isActive is false', () => {
+    const callback = vi.fn();
+    renderHook(() => useEscapeKey(callback, false));
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('does not call callback for non-Escape keys', () => {
+    const callback = vi.fn();
+    renderHook(() => useEscapeKey(callback));
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('cleans up listener on unmount', () => {
+    const callback = vi.fn();
+    const { unmount } = renderHook(() => useEscapeKey(callback));
+
+    unmount();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(callback).not.toHaveBeenCalled();
+  });
+});

package/agent-pane/frontend/src/hooks/useEscapeKey.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+/** Call `callback` when Escape key is pressed (if `isActive` is true). */
+export function useEscapeKey(callback: () => void, isActive = true): void {
+  useEffect(() => {
+    if (!isActive) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') callback();
+    }
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [callback, isActive]);
+}

package/agent-pane/frontend/src/hooks/useOutsideClick.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useRef, type MutableRefObject } from 'react';
+import { useOutsideClick } from './useOutsideClick.ts';
+
+function renderWithRef(callback: () => void, isActive = true) {
+  return renderHook(() => {
+    const ref = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement | null>;
+    useOutsideClick(ref, callback, isActive);
+    return ref;
+  });
+}
+
+describe('useOutsideClick', () => {
+  let insideEl: HTMLDivElement;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    insideEl = document.createElement('div');
+    document.body.appendChild(insideEl);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(insideEl);
+  });
+
+  it('calls callback on mousedown outside ref', () => {
+    const callback = vi.fn();
+    const { result } = renderWithRef(callback);
+    // Set ref to the inside element so outside clicks are detected
+    result.current.current = insideEl;
+
+    const outsideEl = document.createElement('div');
+    document.body.appendChild(outsideEl);
+
+    const event = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(event, 'target', { value: outsideEl });
+    document.dispatchEvent(event);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    document.body.removeChild(outsideEl);
+  });
+
+  it('does not call callback when clicking inside ref', () => {
+    const callback = vi.fn();
+    const { result } = renderWithRef(callback);
+    result.current.current = insideEl;
+
+    const childEl = document.createElement('span');
+    insideEl.appendChild(childEl);
+
+    const event = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(event, 'target', { value: childEl });
+    document.dispatchEvent(event);
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('does not call callback when isActive is false', () => {
+    const callback = vi.fn();
+    const { result } = renderWithRef(callback, false);
+    result.current.current = insideEl;
+
+    const outsideEl = document.createElement('div');
+    document.body.appendChild(outsideEl);
+
+    const event = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(event, 'target', { value: outsideEl });
+    document.dispatchEvent(event);
+
+    expect(callback).not.toHaveBeenCalled();
+    document.body.removeChild(outsideEl);
+  });
+
+  it('cleans up listeners on unmount', () => {
+    const callback = vi.fn();
+    const { result, unmount } = renderWithRef(callback);
+    result.current.current = insideEl;
+
+    unmount();
+
+    const outsideEl = document.createElement('div');
+    document.body.appendChild(outsideEl);
+
+    const event = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(event, 'target', { value: outsideEl });
+    document.dispatchEvent(event);
+
+    expect(callback).not.toHaveBeenCalled();
+    document.body.removeChild(outsideEl);
+  });
+});

package/agent-pane/frontend/src/hooks/useOutsideClick.ts

@@ -0,0 +1,19 @@
+import { useEffect, type RefObject } from 'react';
+
+/** Call `callback` when a mouse or touch event occurs outside `ref`. */
+export function useOutsideClick(ref: RefObject<HTMLElement | null>, callback: () => void, isActive = true): void {
+  useEffect(() => {
+    if (!isActive) return;
+    function handle(e: MouseEvent | TouchEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        callback();
+      }
+    }
+    document.addEventListener('mousedown', handle);
+    document.addEventListener('touchstart', handle);
+    return () => {
+      document.removeEventListener('mousedown', handle);
+      document.removeEventListener('touchstart', handle);
+    };
+  }, [ref, callback, isActive]);
+}

package/agent-pane/frontend/src/hooks/useProvider.ts

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+import { fetchProviders } from '../api/providers.ts';
+import type { ProviderDefinition, ProviderCapabilities } from '../types/index.ts';
+
+/** Default capabilities — all disabled. Used before the provider definition loads. */
+const NO_CAPABILITIES: ProviderCapabilities = {
+  dynamicModels: false,
+  skills: false,
+  plugins: false,
+  mcpServers: false,
+  imageAttachments: false,
+  sandbox: false,
+  webSearch: false,
+  networkAccess: false,
+  fileReferences: false,
+};
+
+/**
+ * Fetch the provider definition for a given runtime type.
+ * Returns the provider definition and a loading flag.
+ */
+export function useProvider(runtimeType: string | null | undefined): {
+  provider: ProviderDefinition | null;
+  capabilities: ProviderCapabilities;
+  loading: boolean;
+} {
+  const [providers, setProviders] = useState<ProviderDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchProviders()
+      .then(setProviders)
+      .catch(() => setProviders([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const provider = providers.find((p) => p.id === runtimeType) ?? null;
+
+  return {
+    provider,
+    capabilities: provider?.capabilities ?? NO_CAPABILITIES,
+    loading,
+  };
+}

package/agent-pane/frontend/src/hooks/useSessionStatus.test.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { deriveSessionStatus, useSessionStatus } from './useSessionStatus.ts';
+import type { Session } from '../types/index.ts';
+
+// Mock the store
+vi.mock('../store/store.ts', () => ({
+  useStore: vi.fn(),
+}));
+
+import { useStore } from '../store/store.ts';
+
+const NOW = '2025-01-01T00:00:00Z';
+
+function makeSession(overrides: Partial<Session> = {}): Session {
+  return {
+    id: 's1',
+    title: 'Test',
+    runtime_type: 'codex',
+    model: null,
+    model_reasoning_effort: null,
+    cwd: null,
+    external_thread_id: null,
+    status: 'active',
+    is_running: 0,
+    lifecycle: 'working',
+    has_unreviewed: 0,
+    runtime_config: null,
+    created_at: NOW,
+    updated_at: NOW,
+    ...overrides,
+  };
+}
+
+describe('deriveSessionStatus', () => {
+  it('returns running status for is_running=1', () => {
+    const status = deriveSessionStatus(makeSession({ is_running: 1, status: 'running' }));
+    expect(status.isRunning).toBe(true);
+    expect(status.isFinished).toBe(false);
+    expect(status.dot).toBe('running');
+    expect(status.label).toBe('Running');
+  });
+
+  it('returns finished status for lifecycle=finished', () => {
+    const status = deriveSessionStatus(makeSession({ lifecycle: 'finished' }));
+    expect(status.isFinished).toBe(true);
+    expect(status.isRunning).toBe(false);
+    expect(status.dot).toBe('');
+    expect(status.label).toBe('Finished');
+  });
+
+  it('returns review pending for unreviewed active session', () => {
+    const status = deriveSessionStatus(makeSession({ has_unreviewed: 1, status: 'active' }));
+    expect(status.dot).toBe('queued');
+    expect(status.label).toBe('Review Pending');
+  });
+
+  it('returns error dot for failed status', () => {
+    const status = deriveSessionStatus(makeSession({ status: 'failed' }));
+    expect(status.dot).toBe('error');
+    expect(status.label).toBe('Failed');
+  });
+
+  it('returns correct icon for codex runtime', () => {
+    const status = deriveSessionStatus(makeSession({ runtime_type: 'codex' }));
+    expect(status.iconClass).toBe('ic-codex');
+    expect(status.iconText).toBe('CX');
+  });
+});
+
+describe('useSessionStatus', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('returns null when sessionId is null', () => {
+    vi.mocked(useStore).mockReturnValue(null);
+    const { result } = renderHook(() => useSessionStatus(null));
+    expect(result.current).toBeNull();
+  });
+
+  it('returns null when session not found', () => {
+    vi.mocked(useStore).mockReturnValue(null);
+    const { result } = renderHook(() => useSessionStatus('s1'));
+    expect(result.current).toBeNull();
+  });
+
+  it('returns status for a running session', () => {
+    const session = makeSession({ is_running: 1, status: 'running' });
+    vi.mocked(useStore).mockReturnValue(session);
+    const { result } = renderHook(() => useSessionStatus('s1'));
+    expect(result.current).not.toBeNull();
+    expect(result.current!.isRunning).toBe(true);
+    expect(result.current!.label).toBe('Running');
+  });
+
+  it('returns status for a finished session', () => {
+    const session = makeSession({ lifecycle: 'finished' });
+    vi.mocked(useStore).mockReturnValue(session);
+    const { result } = renderHook(() => useSessionStatus('s1'));
+    expect(result.current).not.toBeNull();
+    expect(result.current!.isFinished).toBe(true);
+    expect(result.current!.label).toBe('Finished');
+  });
+
+  it('returns status for an unreviewed session', () => {
+    const session = makeSession({ has_unreviewed: 1 });
+    vi.mocked(useStore).mockReturnValue(session);
+    const { result } = renderHook(() => useSessionStatus('s1'));
+    expect(result.current).not.toBeNull();
+    expect(result.current!.dot).toBe('queued');
+    expect(result.current!.label).toBe('Review Pending');
+  });
+});