agent-relay 2.0.22 → 2.0.24

package/packages/dashboard/ui/react-components/hooks/useSession.ts

@@ -1,209 +0,0 @@
-/**
- * useSession Hook
- *
- * React hook for managing cloud session state.
- * Automatically detects session expiration and triggers re-login flow.
- */
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import {
-  cloudApi,
-  onSessionExpired,
-  getCsrfToken,
-  type CloudUser,
-  type SessionError,
-  type SessionStatus,
-} from '../../lib/cloudApi';
-
-export interface UseSessionOptions {
-  /** Check session on mount (default: true) */
-  checkOnMount?: boolean;
-  /** Interval to periodically check session in ms (default: 60000, set to 0 to disable) */
-  checkInterval?: number;
-  /** Callback when session expires */
-  onExpired?: (error: SessionError) => void;
-}
-
-export interface UseSessionReturn {
-  /** Current user data (null if not authenticated) */
-  user: CloudUser | null;
-  /** Whether the session check is in progress */
-  isLoading: boolean;
-  /** Whether user is authenticated */
-  isAuthenticated: boolean;
-  /** Whether session has expired (requires re-login) */
-  isExpired: boolean;
-  /** Session error if any */
-  error: SessionError | null;
-  /** CSRF token for API requests */
-  csrfToken: string | null;
-  /** Manually check session status */
-  checkSession: () => Promise<SessionStatus>;
-  /** Clear the expired state (e.g., after dismissing modal) */
-  clearExpired: () => void;
-  /** Redirect to login page */
-  redirectToLogin: () => void;
-  /** Logout the current user */
-  logout: () => Promise<void>;
-}
-
-const DEFAULT_OPTIONS: Required<UseSessionOptions> = {
-  checkOnMount: true,
-  checkInterval: 60000, // 1 minute
-  onExpired: () => {},
-};
-
-export function useSession(options: UseSessionOptions = {}): UseSessionReturn {
-  const opts = { ...DEFAULT_OPTIONS, ...options };
-
-  const [user, setUser] = useState<CloudUser | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isExpired, setIsExpired] = useState(false);
-  const [error, setError] = useState<SessionError | null>(null);
-
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-  const mountedRef = useRef(true);
-
-  // Check session status
-  const checkSession = useCallback(async (): Promise<SessionStatus> => {
-    try {
-      const status = await cloudApi.checkSession();
-
-      if (!mountedRef.current) return status;
-
-      if (!status.authenticated) {
-        setUser(null);
-        if (status.code) {
-          const sessionError: SessionError = {
-            error: 'Session expired',
-            code: status.code,
-            message: status.message || 'Your session has expired. Please log in again.',
-          };
-          setError(sessionError);
-          setIsExpired(true);
-          opts.onExpired(sessionError);
-        }
-      }
-
-      return status;
-    } catch (_e) {
-      return {
-        authenticated: false,
-        code: 'SESSION_ERROR',
-        message: 'Failed to check session',
-      };
-    }
-  }, [opts]);
-
-  // Fetch user data
-  const fetchUser = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const result = await cloudApi.getMe();
-
-      if (!mountedRef.current) return;
-
-      if (result.success) {
-        setUser(result.data);
-        setIsExpired(false);
-        setError(null);
-      } else if (result.sessionExpired) {
-        setUser(null);
-        setIsExpired(true);
-      } else {
-        setError({
-          error: result.error,
-          code: 'SESSION_ERROR',
-          message: result.error,
-        });
-      }
-    } finally {
-      if (mountedRef.current) {
-        setIsLoading(false);
-      }
-    }
-  }, []);
-
-  // Handle session expiration from any API call
-  useEffect(() => {
-    const unsubscribe = onSessionExpired((sessionError) => {
-      if (!mountedRef.current) return;
-
-      setUser(null);
-      setIsExpired(true);
-      setError(sessionError);
-      opts.onExpired(sessionError);
-    });
-
-    return unsubscribe;
-  }, [opts]);
-
-  // Check session on mount
-  useEffect(() => {
-    mountedRef.current = true;
-
-    if (opts.checkOnMount) {
-      fetchUser();
-    }
-
-    return () => {
-      mountedRef.current = false;
-    };
-  }, [opts.checkOnMount, fetchUser]);
-
-  // Periodic session check
-  useEffect(() => {
-    if (opts.checkInterval <= 0) return;
-
-    intervalRef.current = setInterval(() => {
-      // Only check if we think we're authenticated
-      if (user) {
-        checkSession();
-      }
-    }, opts.checkInterval);
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-  }, [opts.checkInterval, user, checkSession]);
-
-  // Clear expired state
-  const clearExpired = useCallback(() => {
-    setIsExpired(false);
-    setError(null);
-  }, []);
-
-  // Redirect to login
-  const redirectToLogin = useCallback(() => {
-    // Preserve current path for redirect after login
-    const returnTo = encodeURIComponent(window.location.pathname + window.location.search);
-    window.location.href = `/login?returnTo=${returnTo}`;
-  }, []);
-
-  // Logout
-  const logout = useCallback(async () => {
-    await cloudApi.logout();
-    setUser(null);
-    setIsExpired(false);
-    setError(null);
-    window.location.href = '/login';
-  }, []);
-
-  return {
-    user,
-    isLoading,
-    isAuthenticated: user !== null,
-    isExpired,
-    error,
-    csrfToken: getCsrfToken(),
-    checkSession,
-    clearExpired,
-    redirectToLogin,
-    logout,
-  };
-}
-
-export type { SessionError, CloudUser };

package/packages/dashboard/ui/react-components/hooks/useTrajectory.ts

@@ -1,265 +0,0 @@
-/**
- * useTrajectory Hook
- *
- * Fetches and polls trajectory data from the API.
- * Provides real-time updates on agent work progress.
- */
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import type { TrajectoryStep } from '../TrajectoryViewer';
-import { getApiUrl } from '../../lib/api';
-
-interface TrajectoryStatus {
-  active: boolean;
-  trajectoryId?: string;
-  phase?: 'plan' | 'design' | 'execute' | 'review' | 'observe';
-  task?: string;
-}
-
-export interface TrajectoryHistoryEntry {
-  id: string;
-  title: string;
-  status: 'active' | 'completed' | 'abandoned';
-  startedAt: string;
-  completedAt?: string;
-  agents?: string[];
-  summary?: string;
-  confidence?: number;
-}
-
-interface UseTrajectoryOptions {
-  /** Polling interval in ms (default: 2000) */
-  pollInterval?: number;
-  /** Whether to auto-poll (default: true) */
-  autoPoll?: boolean;
-  /** Specific trajectory ID to fetch */
-  trajectoryId?: string;
-  /** API base URL (for when running outside default context) */
-  apiBaseUrl?: string;
-}
-
-interface UseTrajectoryResult {
-  steps: TrajectoryStep[];
-  status: TrajectoryStatus | null;
-  history: TrajectoryHistoryEntry[];
-  isLoading: boolean;
-  error: string | null;
-  refresh: () => Promise<void>;
-  selectTrajectory: (id: string | null) => void;
-  selectedTrajectoryId: string | null;
-}
-
-export function useTrajectory(options: UseTrajectoryOptions = {}): UseTrajectoryResult {
-  const {
-    pollInterval = 2000,
-    autoPoll = true,
-    trajectoryId: initialTrajectoryId,
-    apiBaseUrl = '',
-  } = options;
-
-  const [steps, setSteps] = useState<TrajectoryStep[]>([]);
-  const [status, setStatus] = useState<TrajectoryStatus | null>(null);
-  const [history, setHistory] = useState<TrajectoryHistoryEntry[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [selectedTrajectoryId, setSelectedTrajectoryId] = useState<string | null>(initialTrajectoryId || null);
-  const pollingRef = useRef<NodeJS.Timeout | null>(null);
-  const hasLoadedInitialStepsRef = useRef(false);
-  const hasInitializedRef = useRef(false);
-  // Track the latest selection to prevent stale fetches from overwriting data
-  const latestSelectionRef = useRef<string | null>(selectedTrajectoryId);
-  // Request counter to ensure only the most recent fetch updates state
-  // This is more robust than trajectory ID comparison for handling race conditions
-  const requestCounterRef = useRef(0);
-
-  // Fetch trajectory status
-  const fetchStatus = useCallback(async () => {
-    try {
-      // Use apiBaseUrl if provided, otherwise use getApiUrl for cloud mode routing
-      const url = apiBaseUrl
-        ? `${apiBaseUrl}/api/trajectory`
-        : getApiUrl('/api/trajectory');
-      const response = await fetch(url, { credentials: 'include' });
-      const data = await response.json();
-
-      if (data.success !== false) {
-        setStatus({
-          active: data.active,
-          trajectoryId: data.trajectoryId,
-          phase: data.phase,
-          task: data.task,
-        });
-      }
-    } catch (err: any) {
-      console.error('[useTrajectory] Status fetch error:', err);
-    }
-  }, [apiBaseUrl]);
-
-  // Fetch trajectory history
-  const fetchHistory = useCallback(async () => {
-    try {
-      const url = apiBaseUrl
-        ? `${apiBaseUrl}/api/trajectory/history`
-        : getApiUrl('/api/trajectory/history');
-      const response = await fetch(url, { credentials: 'include' });
-      const data = await response.json();
-
-      if (data.success) {
-        setHistory(data.trajectories || []);
-      }
-    } catch (err: any) {
-      console.error('[useTrajectory] History fetch error:', err);
-    }
-  }, [apiBaseUrl]);
-
-  // Fetch trajectory steps
-  const fetchSteps = useCallback(async () => {
-    // Increment request counter and capture it for this request
-    // This ensures only the most recent request updates state
-    const requestId = ++requestCounterRef.current;
-    const trajectoryId = selectedTrajectoryId;
-
-    try {
-      const basePath = trajectoryId
-        ? `/api/trajectory/steps?trajectoryId=${encodeURIComponent(trajectoryId)}`
-        : '/api/trajectory/steps';
-      const url = apiBaseUrl
-        ? `${apiBaseUrl}${basePath}`
-        : getApiUrl(basePath);
-
-      const response = await fetch(url, { credentials: 'include' });
-      const data = await response.json();
-
-      // Only update state if this is still the most recent request
-      // Check both request counter AND trajectory ID for double protection
-      if (requestId !== requestCounterRef.current) {
-        console.log('[useTrajectory] Ignoring superseded fetch (request', requestId, 'current', requestCounterRef.current, ')');
-        return;
-      }
-      if (trajectoryId !== latestSelectionRef.current) {
-        console.log('[useTrajectory] Ignoring stale fetch for', trajectoryId, 'current is', latestSelectionRef.current);
-        return;
-      }
-
-      if (data.success) {
-        setSteps(data.steps || []);
-        setError(null);
-      } else {
-        setError(data.error || 'Failed to fetch trajectory steps');
-      }
-    } catch (err: any) {
-      // Only update error state if this is still the current request
-      if (requestId === requestCounterRef.current && trajectoryId === latestSelectionRef.current) {
-        console.error('[useTrajectory] Steps fetch error:', err);
-        setError(err.message);
-      }
-    }
-  }, [apiBaseUrl, selectedTrajectoryId]);
-
-  // Select a specific trajectory
-  const selectTrajectory = useCallback((id: string | null) => {
-    // Normalize empty string to null for consistency
-    const normalizedId = id === '' ? null : id;
-
-    // Skip if already selected (prevents unnecessary re-fetches)
-    if (normalizedId === selectedTrajectoryId) {
-      return;
-    }
-
-    // Increment request counter to invalidate any in-flight fetches immediately
-    // This is crucial - it ensures that even if an old fetch completes after this,
-    // its request ID won't match and it will be ignored
-    requestCounterRef.current++;
-
-    // Update the ref immediately so in-flight fetches for other trajectories are ignored
-    latestSelectionRef.current = normalizedId;
-
-    // Clear steps immediately when switching trajectories to prevent showing stale data
-    setSteps([]);
-
-    // Set loading immediately to avoid flash of empty state before effect runs
-    if (normalizedId !== null) {
-      setIsLoading(true);
-    }
-    setSelectedTrajectoryId(normalizedId);
-  }, [selectedTrajectoryId]);
-
-  // Combined refresh function
-  const refresh = useCallback(async () => {
-    setIsLoading(true);
-    await Promise.all([fetchStatus(), fetchSteps(), fetchHistory()]);
-    setIsLoading(false);
-  }, [fetchStatus, fetchSteps, fetchHistory]);
-
-  // Keep the latestSelectionRef in sync with state
-  // This handles the initial value and any external changes
-  // Note: selectedTrajectoryId is already normalized by selectTrajectory
-  useEffect(() => {
-    latestSelectionRef.current = selectedTrajectoryId;
-  }, [selectedTrajectoryId]);
-
-  // Initial fetch - only run once on mount
-  // Note: Empty deps array is intentional - we use hasInitializedRef to ensure single execution
-  useEffect(() => {
-    if (hasInitializedRef.current) return;
-    hasInitializedRef.current = true;
-    refresh();
-  }, [refresh]);
-
-  // Re-fetch steps when selected trajectory changes
-  // Note: Initial fetch is handled by the refresh() call in the mount effect
-  useEffect(() => {
-    // Skip the initial render - refresh() handles it
-    if (!hasLoadedInitialStepsRef.current) {
-      hasLoadedInitialStepsRef.current = true;
-      return;
-    }
-
-    // For subsequent selection changes, fetch with loading state management
-    let cancelled = false;
-    setIsLoading(true);
-    fetchSteps().finally(() => {
-      if (!cancelled) {
-        setIsLoading(false);
-      }
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [selectedTrajectoryId, fetchSteps]);
-
-  // Polling
-  useEffect(() => {
-    if (!autoPoll) return;
-
-    pollingRef.current = setInterval(() => {
-      fetchSteps();
-      fetchStatus();
-      // Poll history less frequently
-    }, pollInterval);
-
-    // Poll history every 10 seconds
-    const historyPollRef = setInterval(fetchHistory, 10000);
-
-    return () => {
-      if (pollingRef.current) {
-        clearInterval(pollingRef.current);
-      }
-      clearInterval(historyPollRef);
-    };
-  }, [autoPoll, pollInterval, fetchSteps, fetchStatus, fetchHistory]);
-
-  return {
-    steps,
-    status,
-    history,
-    isLoading,
-    error,
-    refresh,
-    selectTrajectory,
-    selectedTrajectoryId,
-  };
-}
-
-export default useTrajectory;

package/packages/dashboard/ui/react-components/hooks/useWebSocket.ts

@@ -1,169 +0,0 @@
-/**
- * useWebSocket Hook
- *
- * React hook for managing WebSocket connection to the dashboard server.
- * Provides real-time updates for agents, messages, and fleet data.
- */
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import type { Agent, Message, Session, AgentSummary, FleetData } from '../../types';
-
-export interface DashboardData {
-  agents: Agent[];
-  users?: Agent[]; // Human users (cli === 'dashboard')
-  messages: Message[];
-  sessions?: Session[];
-  summaries?: AgentSummary[];
-  fleet?: FleetData;
-}
-
-export interface UseWebSocketOptions {
-  url?: string;
-  autoConnect?: boolean;
-  reconnect?: boolean;
-  maxReconnectAttempts?: number;
-  reconnectDelay?: number;
-}
-
-export interface UseWebSocketReturn {
-  data: DashboardData | null;
-  isConnected: boolean;
-  error: Error | null;
-  connect: () => void;
-  disconnect: () => void;
-}
-
-const DEFAULT_OPTIONS: Required<UseWebSocketOptions> = {
-  url: '',
-  autoConnect: true,
-  reconnect: true,
-  maxReconnectAttempts: 10,
-  reconnectDelay: 1000,
-};
-
-/**
- * Get the default WebSocket URL based on the current page location
- *
- * In dev mode (Next.js on 3888), WebSocket connects to dashboard server on 3889
- * because Next.js rewrites don't support WebSocket upgrade requests.
- *
- * In production, everything runs on the same port.
- */
-function getDefaultUrl(): string {
-  const isDev = process.env.NODE_ENV === 'development';
-
-  if (typeof window === 'undefined') {
-    return 'ws://localhost:3889/ws';
-  }
-
-  // Dev mode only: Next.js on 3888, dashboard server on 3889
-  // In production (static export), use same host regardless of port
-  if (isDev && window.location.port === '3888') {
-    const host = window.location.hostname || 'localhost';
-    return `ws://${host}:3889/ws`;
-  }
-
-  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-  // Production: use the same host (works with tunnels/proxies)
-  return `${protocol}//${window.location.host}/ws`;
-}
-
-export function useWebSocket(options: UseWebSocketOptions = {}): UseWebSocketReturn {
-  const opts = { ...DEFAULT_OPTIONS, ...options };
-
-  const [data, setData] = useState<DashboardData | null>(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectAttemptsRef = useRef(0);
-  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  const connect = useCallback(() => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      return;
-    }
-
-    // Compute URL at connection time (always on client)
-    const wsUrl = opts.url || getDefaultUrl();
-
-    try {
-      const ws = new WebSocket(wsUrl);
-
-      ws.onopen = () => {
-        setIsConnected(true);
-        setError(null);
-        reconnectAttemptsRef.current = 0;
-      };
-
-      ws.onclose = () => {
-        setIsConnected(false);
-        wsRef.current = null;
-
-        // Schedule reconnect if enabled
-        if (opts.reconnect && reconnectAttemptsRef.current < opts.maxReconnectAttempts) {
-          const delay = Math.min(
-            opts.reconnectDelay * Math.pow(2, reconnectAttemptsRef.current),
-            30000
-          );
-          reconnectAttemptsRef.current++;
-
-          reconnectTimeoutRef.current = setTimeout(() => {
-            connect();
-          }, delay);
-        }
-      };
-
-      ws.onerror = (event) => {
-        setError(new Error('WebSocket connection error'));
-        console.error('[useWebSocket] Error:', event);
-      };
-
-      ws.onmessage = (event) => {
-        try {
-          const parsed = JSON.parse(event.data) as DashboardData;
-          setData(parsed);
-        } catch (e) {
-          console.error('[useWebSocket] Failed to parse message:', e);
-        }
-      };
-
-      wsRef.current = ws;
-    } catch (e) {
-      setError(e instanceof Error ? e : new Error('Failed to create WebSocket'));
-    }
-  }, [opts.url, opts.reconnect, opts.maxReconnectAttempts, opts.reconnectDelay]);
-
-  const disconnect = useCallback(() => {
-    if (reconnectTimeoutRef.current) {
-      clearTimeout(reconnectTimeoutRef.current);
-      reconnectTimeoutRef.current = null;
-    }
-
-    if (wsRef.current) {
-      wsRef.current.close();
-      wsRef.current = null;
-    }
-
-    setIsConnected(false);
-  }, []);
-
-  // Auto-connect on mount
-  useEffect(() => {
-    if (opts.autoConnect) {
-      connect();
-    }
-
-    return () => {
-      disconnect();
-    };
-  }, [opts.autoConnect, connect, disconnect]);
-
-  return {
-    data,
-    isConnected,
-    error,
-    connect,
-    disconnect,
-  };
-}