repoburg 1.3.202 → 1.3.209

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

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

@@ -1,44 +0,0 @@
-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/useResizable.test.ts

@@ -1,97 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useResizable } from './useResizable.ts';
-
-/** Helper: simulate a native pointer event on window with a clientX.
- *  jsdom doesn't implement PointerEvent; MouseEvent carries clientX which is
- *  all the hook reads, so we use it as a stand-in. */
-function fireWindowPointer(type: 'pointermove' | 'pointerup', clientX: number): void {
-  window.dispatchEvent(new MouseEvent(type, { clientX, bubbles: true }));
-}
-
-/** Build a minimal React.PointerEvent-like object for onPointerDown. */
-function pointerDown(clientX: number) {
-  return {
-    clientX,
-    preventDefault: vi.fn(),
-    stopPropagation: vi.fn(),
-  } as unknown as React.PointerEvent;
-}
-
-describe('useResizable', () => {
-  beforeEach(() => {
-    document.body.classList.remove('is-resizing');
-  });
-
-  it('grows left-side width when dragging right (+delta)', () => {
-    const getWidth = vi.fn(() => 240);
-    const setWidth = vi.fn();
-    const { result } = renderHook(() =>
-      useResizable({ side: 'left', minWidth: 160, maxWidth: 480, getWidth, setWidth }),
-    );
-
-    act(() => {
-      result.current.onPointerDown(pointerDown(100));
-    });
-    expect(result.current.dragging).toBe(true);
-    expect(document.body.classList.contains('is-resizing')).toBe(true);
-
-    act(() => fireWindowPointer('pointermove', 150)); // +50
-    expect(setWidth).toHaveBeenLastCalledWith(290);
-
-    act(() => fireWindowPointer('pointerup', 150));
-    expect(result.current.dragging).toBe(false);
-    expect(document.body.classList.contains('is-resizing')).toBe(false);
-  });
-
-  it('shrinks right-side width when dragging right (-delta)', () => {
-    const getWidth = vi.fn(() => 300);
-    const setWidth = vi.fn();
-    const { result } = renderHook(() =>
-      useResizable({ side: 'right', minWidth: 220, maxWidth: 600, getWidth, setWidth }),
-    );
-
-    act(() => {
-      result.current.onPointerDown(pointerDown(200));
-    });
-    act(() => fireWindowPointer('pointermove', 260)); // +60
-    expect(setWidth).toHaveBeenLastCalledWith(240);
-    act(() => fireWindowPointer('pointerup', 260));
-  });
-
-  it('clamps to maxWidth on left side', () => {
-    const getWidth = vi.fn(() => 460);
-    const setWidth = vi.fn();
-    const { result } = renderHook(() =>
-      useResizable({ side: 'left', minWidth: 160, maxWidth: 480, getWidth, setWidth }),
-    );
-    act(() => result.current.onPointerDown(pointerDown(0)));
-    act(() => fireWindowPointer('pointermove', 1000));
-    expect(setWidth).toHaveBeenLastCalledWith(480);
-    act(() => fireWindowPointer('pointerup', 1000));
-  });
-
-  it('clamps to minWidth on right side', () => {
-    const getWidth = vi.fn(() => 230);
-    const setWidth = vi.fn();
-    const { result } = renderHook(() =>
-      useResizable({ side: 'right', minWidth: 220, maxWidth: 600, getWidth, setWidth }),
-    );
-    act(() => result.current.onPointerDown(pointerDown(0)));
-    act(() => fireWindowPointer('pointermove', 5000)); // dragging far right shrinks right panel
-    expect(setWidth).toHaveBeenLastCalledWith(220);
-    act(() => fireWindowPointer('pointerup', 5000));
-  });
-
-  it('stops listening after pointerup', () => {
-    const getWidth = vi.fn(() => 240);
-    const setWidth = vi.fn();
-    const { result } = renderHook(() =>
-      useResizable({ side: 'left', minWidth: 160, maxWidth: 480, getWidth, setWidth }),
-    );
-    act(() => result.current.onPointerDown(pointerDown(0)));
-    act(() => fireWindowPointer('pointerup', 0));
-    act(() => fireWindowPointer('pointermove', 300));
-    expect(setWidth).not.toHaveBeenCalled();
-  });
-});

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

@@ -1,75 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-
-export type ResizeSide = 'left' | 'right';
-
-interface UseResizableOptions {
-  /** Which edge is being dragged: 'left' grows when dragging right, 'right' grows when dragging left. */
-  side: ResizeSide;
-  minWidth: number;
-  maxWidth: number;
-  /** Current width (px) — read live inside the pointer handlers via a ref. */
-  getWidth: () => number;
-  /** Commit a new width (already clamped by the hook). */
-  setWidth: (w: number) => void;
-}
-
-export interface UseResizableResult {
-  /** Attach to the drag handle element. */
-  onPointerDown: (e: React.PointerEvent) => void;
-  /** True while a drag for this handle is in progress. */
-  dragging: boolean;
-}
-
-/**
- * Dependency-free horizontal resize handle. Returns a pointerdown handler to
- * attach to a thin handle element; while dragging it updates the store width
- * (clamped to [min, max]) on every pointermove and cleans up on pointerup.
- *
- * Uses window listeners so the drag continues even when the cursor leaves the
- * handle (standard desktop-app behavior).
- */
-export function useResizable({
-  side,
-  minWidth,
-  maxWidth,
-  getWidth,
-  setWidth,
-}: UseResizableOptions): UseResizableResult {
-  const [dragging, setDragging] = useState(false);
-  // Captured at drag start; the listeners close over these refs.
-  const startX = useRef(0);
-  const startWidth = useRef(0);
-
-  const onPointerMove = useCallback(
-    (e: PointerEvent) => {
-      const delta = e.clientX - startX.current;
-      const next = side === 'left' ? startWidth.current + delta : startWidth.current - delta;
-      const clamped = Math.min(maxWidth, Math.max(minWidth, next));
-      setWidth(clamped);
-    },
-    [side, minWidth, maxWidth, setWidth],
-  );
-
-  const onPointerUp = useCallback(() => {
-    window.removeEventListener('pointermove', onPointerMove);
-    window.removeEventListener('pointerup', onPointerUp);
-    document.body.classList.remove('is-resizing');
-    setDragging(false);
-  }, [onPointerMove]);
-
-  const onPointerDown = useCallback(
-    (e: React.PointerEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      startX.current = e.clientX;
-      startWidth.current = getWidth();
-      setDragging(true);
-      document.body.classList.add('is-resizing');
-      window.addEventListener('pointermove', onPointerMove);
-      window.addEventListener('pointerup', onPointerUp);
-    },
-    [getWidth, onPointerMove, onPointerUp],
-  );
-
-  return { onPointerDown, dragging };
-}

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

@@ -1,116 +0,0 @@
-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,
-    rewound_at_turn_id: null,
-    pre_rewind_thread_id: 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');
-  });
-});

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

@@ -1,34 +0,0 @@
-import { useStore } from '../store/store.ts';
-import { statusToDot, statusToLabel, runtimeIcon } from '../types/index.ts';
-import type { Session } from '../types/index.ts';
-
-interface SessionStatus {
-  dot: string;
-  label: string;
-  iconClass: string;
-  iconText: string;
-  isRunning: boolean;
-  isFinished: boolean;
-}
-
-/** Hook: derive UI status (dot, label, icon) from a session by ID. */
-export function useSessionStatus(sessionId: string | null): SessionStatus | null {
-  const session = useStore((s) => (sessionId ? (s.sessions.find((x) => x.id === sessionId) ?? null) : null));
-  if (!session) return null;
-  return deriveSessionStatus(session);
-}
-
-/** Derive UI status from a Session object (no hook, for use in render props). */
-export function deriveSessionStatus(s: Session): SessionStatus {
-  const isRunning = s.is_running === 1;
-  const isFinished = s.lifecycle === 'finished';
-  const ri = runtimeIcon(s.runtime_type);
-  return {
-    dot: statusToDot(s.status, isRunning, s.has_unreviewed === 1, s.lifecycle),
-    label: statusToLabel(s.status, isRunning, s.has_unreviewed === 1, s.lifecycle),
-    iconClass: ri.iconClass,
-    iconText: ri.iconText,
-    isRunning,
-    isFinished,
-  };
-}

package/agent-pane/frontend/src/main.test.tsx

@@ -1,37 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-
-// Mock react-dom/client before importing main.tsx
-const mockRender = vi.fn();
-const mockCreateRoot = vi.fn(() => ({ render: mockRender }));
-vi.mock('react-dom/client', () => ({
-  default: { createRoot: mockCreateRoot },
-  createRoot: mockCreateRoot,
-}));
-
-// Create #root element BEFORE importing main.tsx (jsdom has no #root by default)
-const rootEl = document.createElement('div');
-rootEl.id = 'root';
-document.body.appendChild(rootEl);
-
-// Import AFTER mock + root element are set up
-await import('./main.tsx');
-
-/** Type helper: extract first call arg from a mock with no typed params */
-function firstCallArg(mock: ReturnType<typeof vi.fn>): unknown {
-  const calls = mock.mock.calls as unknown as unknown[][];
-  return calls[0]?.[0];
-}
-
-describe('main.tsx', () => {
-  it('calls createRoot with the #root element', () => {
-    expect(mockCreateRoot).toHaveBeenCalledTimes(1);
-    expect(firstCallArg(mockCreateRoot)).toBe(rootEl);
-  });
-
-  it('calls render with a React element', () => {
-    expect(mockRender).toHaveBeenCalledTimes(1);
-    const vnode = firstCallArg(mockRender);
-    expect(vnode).toBeDefined();
-    expect(typeof vnode).toBe('object');
-  });
-});

package/agent-pane/frontend/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
-import './styles/app.css';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);