repoburg 1.3.186 → 1.3.195

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

@@ -1,84 +1,104 @@
+import { useRef, useState } from 'react';
 import { useStore } from '../../store/store.ts';
-import { Wrench, 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>;
   }
 
-  // Build display items: user prompt + grouped tool items + agent response
-  type DisplayItem = { kind: 'user'; idx: number; label: string } | { kind: 'agent'; idx: number; label: string } | { kind: 'tools'; idx: number; count: number };
-
-  const items: DisplayItem[] = [];
-
-  turns.forEach((turn, idx) => {
-    // User prompt is always first
-    const promptPreview = turn.user_prompt.length > 50
-      ? turn.user_prompt.slice(0, 50) + '…'
-      : turn.user_prompt;
-    items.push({ kind: 'user', idx, label: promptPreview });
-
-    // Count tool-type items
-    const toolItems = turn.items.filter(
-      (i) => i.type === 'command_execution' || i.type === 'file_change' || i.type === 'mcp_tool_call' || i.type === 'web_search',
-    );
-    if (toolItems.length > 0) {
-      items.push({ kind: 'tools', idx, count: toolItems.length });
-    }
-
-    // Agent response
-    if (turn.agent_response || turn.status === 'completed') {
-      const label = turn.agent_response
-        ? (turn.agent_response.length > 50 ? turn.agent_response.slice(0, 50) + '…' : turn.agent_response)
-        : 'Agent';
-      items.push({ kind: 'agent', idx, label });
-    } else if (turn.status === 'running' || turn.status === 'pending') {
-      items.push({ kind: 'agent', idx, label: 'Agent thinking…' });
-    } else if (turn.status === 'failed') {
-      items.push({ kind: 'agent', idx, label: 'Failed' });
-    } else if (turn.status === 'aborted') {
-      items.push({ kind: 'agent', idx, label: 'Aborted' });
-    }
-  });
+  function handleClick(idx: number) {
+    setActiveTurnIndex(idx);
+    requestAnimationFrame(() => {
+      document.getElementById(`turn-${idx}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  }
 
   return (
     <div className="right-section">
       <div className="right-section-title">Conversation</div>
-      {items.map((item, i) => {
-        const isActive = item.idx === activeTurnIndex;
-        if (item.kind === 'tools') {
-          return (
-            <div
-              key={`tg-${i}`}
-              className={`turn-item ${isActive ? 'active' : ''}`}
-              onClick={() => setActiveTurnIndex(item.idx)}
-            >
-              <span className="turn-item-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-                <Wrench size={12} style={{ color: 'var(--text-3)' }} />
-              </span>
-              <span className="turn-item-label">{item.count} tool call{item.count > 1 ? 's' : ''}</span>
-            </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 isUser = item.kind === 'user';
         return (
           <div
-            key={`t-${i}`}
+            key={turn.id}
             className={`turn-item ${isActive ? 'active' : ''}`}
-            onClick={() => setActiveTurnIndex(item.idx)}
+            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={isUser ? { background: 'var(--amber)', color: '#fff' } : { background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-              {isUser ? <User size={12} /> : 'CX'}
+            <span className="turn-item-icon" style={{ background: 'var(--amber)', color: '#fff' }}>
+              <User size={12} />
             </span>
-            <span className="turn-item-label">{item.label}</span>
+            <span className="turn-item-label">{preview}</span>
           </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,
+  };
+}