@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/hooks/useTrajectory.ts

@@ -0,0 +1,265 @@
+/**
+ * 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/src/components/hooks/useWebSocket.ts

@@ -0,0 +1,290 @@
+/**
+ * useWebSocket Hook
+ *
+ * React hook for managing WebSocket connection to the dashboard server.
+ * Provides real-time updates for agents, messages, and fleet data.
+ *
+ * Supports message replay on reconnect: tracks the last received sequence
+ * number (`seq`) and requests missed messages from the server after reconnecting.
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { Agent, Message, Session, AgentSummary, FleetData } from '../../types';
+import { getWebSocketUrl } from '../../lib/config';
+
+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;
+  /** Callback for non-data events like direct_message, channel_message */
+  onEvent?: (event: WebSocketEvent) => void;
+}
+
+/** Event types received on the WebSocket (non-data messages) */
+export interface WebSocketEvent {
+  type: 'direct_message' | 'channel_message' | 'presence_update' | 'typing' | string;
+  [key: string]: unknown;
+}
+
+/** Connection quality state for UI indicators */
+export type ConnectionState = 'connected' | 'reconnecting' | 'disconnected';
+
+export interface UseWebSocketReturn {
+  data: DashboardData | null;
+  isConnected: boolean;
+  /** Granular connection quality: 'connected', 'reconnecting', or 'disconnected' */
+  connectionState: ConnectionState;
+  error: Error | null;
+  connect: () => void;
+  disconnect: () => void;
+}
+
+const DEFAULT_OPTIONS: Omit<Required<UseWebSocketOptions>, 'onEvent'> & { onEvent?: (event: WebSocketEvent) => void } = {
+  url: '',
+  autoConnect: true,
+  reconnect: true,
+  maxReconnectAttempts: 10,
+  reconnectDelay: 500,
+  onEvent: undefined,
+};
+
+/**
+ * Get the default WebSocket URL based on the current page location.
+ * Uses centralized config for consistent URL resolution.
+ */
+function getDefaultUrl(): string {
+  return getWebSocketUrl('/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 [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
+  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 onEventRef = useRef(opts.onEvent);
+  onEventRef.current = opts.onEvent; // Keep ref in sync with callback prop
+
+  // Sequence tracking for replay support (refs to avoid re-renders)
+  const lastSeqRef = useRef<number | null>(null);
+  // Track whether the server supports replay (sends a 'sync' message on connect)
+  const serverSupportsReplayRef = useRef(false);
+  // Set of already-processed seq numbers for deduplication
+  const processedSeqsRef = useRef(new Set<number>());
+  // Whether this is a reconnection (not the first connection)
+  const hasConnectedBeforeRef = useRef(false);
+
+  /**
+   * Process a single message payload, deduplicating by seq.
+   * Returns true if the message was processed, false if skipped (duplicate).
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const processMessage = useCallback((parsed: any) => {
+    // Extract seq if present
+    const seq = typeof parsed.seq === 'number' ? parsed.seq : null;
+
+    // Deduplicate: skip if we already processed this seq
+    if (seq !== null && processedSeqsRef.current.has(seq)) {
+      return false;
+    }
+
+    // Track this seq
+    if (seq !== null) {
+      processedSeqsRef.current.add(seq);
+      lastSeqRef.current = seq;
+
+      // Keep the set from growing unbounded - only track recent seqs
+      if (processedSeqsRef.current.size > 1000) {
+        const seqs = Array.from(processedSeqsRef.current).sort((a, b) => a - b);
+        const toRemove = seqs.slice(0, seqs.length - 500);
+        for (const s of toRemove) {
+          processedSeqsRef.current.delete(s);
+        }
+      }
+    }
+
+    // Strip seq from the payload before routing (it's only for tracking, not data)
+    const { seq: _seq, ...payload } = parsed;
+
+    // Check if this is an event message (has a 'type' field like direct_message, channel_message)
+    // vs dashboard data (has agents array)
+    if (payload && typeof payload === 'object' && 'type' in payload && typeof payload.type === 'string') {
+      // This is an event message - route to callback
+      onEventRef.current?.(payload as WebSocketEvent);
+    } else {
+      // This is dashboard data - update state
+      setData(payload as DashboardData);
+    }
+
+    return true;
+  }, []);
+
+  const connect = useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      return;
+    }
+
+    // Compute URL at connection time (always on client)
+    const wsUrl = opts.url || getDefaultUrl();
+
+    // If we have had a prior connection, we are reconnecting
+    if (hasConnectedBeforeRef.current) {
+      setConnectionState('reconnecting');
+    }
+
+    try {
+      const ws = new WebSocket(wsUrl);
+
+      ws.onopen = () => {
+        setIsConnected(true);
+        setConnectionState('connected');
+        setError(null);
+        reconnectAttemptsRef.current = 0;
+
+        // On reconnect, request replay of missed messages
+        if (hasConnectedBeforeRef.current && lastSeqRef.current !== null && serverSupportsReplayRef.current) {
+          console.log(`[WS] Requesting replay from seq ${lastSeqRef.current}`);
+          ws.send(JSON.stringify({
+            type: 'replay',
+            lastSequenceId: lastSeqRef.current,
+          }));
+        }
+
+        hasConnectedBeforeRef.current = true;
+      };
+
+      ws.onclose = () => {
+        setIsConnected(false);
+        wsRef.current = null;
+
+        // Schedule reconnect if enabled
+        if (opts.reconnect && reconnectAttemptsRef.current < opts.maxReconnectAttempts) {
+          setConnectionState('reconnecting');
+          const baseDelay = Math.min(
+            opts.reconnectDelay * Math.pow(2, reconnectAttemptsRef.current),
+            15000
+          );
+          // Add jitter to prevent thundering herd
+          const delay = Math.round(baseDelay * (0.5 + Math.random() * 0.5));
+          reconnectAttemptsRef.current++;
+
+          console.log(`[WS] Reconnecting (attempt ${reconnectAttemptsRef.current})...`);
+
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect();
+          }, delay);
+        } else {
+          setConnectionState('disconnected');
+        }
+      };
+
+      ws.onerror = (event) => {
+        setError(new Error('WebSocket connection error'));
+        console.error('[useWebSocket] Error:', event);
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const parsed = JSON.parse(event.data);
+
+          // Handle sync message from server (sent on initial connection)
+          if (parsed && parsed.type === 'sync' && typeof parsed.sequenceId === 'number') {
+            serverSupportsReplayRef.current = true;
+            // If we don't have a lastSeq yet, initialize from server
+            if (lastSeqRef.current === null) {
+              lastSeqRef.current = parsed.sequenceId;
+            }
+            return;
+          }
+
+          // Handle replay response: array of missed messages
+          if (parsed && parsed.type === 'replay' && Array.isArray(parsed.messages)) {
+            for (const msg of parsed.messages) {
+              processMessage(msg);
+            }
+            return;
+          }
+
+          // Normal message processing with dedup
+          processMessage(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, processMessage]);
+
+  const disconnect = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+
+    setIsConnected(false);
+    setConnectionState('disconnected');
+  }, []);
+
+  // Auto-connect on mount
+  useEffect(() => {
+    if (opts.autoConnect) {
+      connect();
+    }
+
+    return () => {
+      disconnect();
+    };
+  }, [opts.autoConnect, connect, disconnect]);
+
+  // Visibility change listener: reconnect when tab becomes visible
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        // Check if connection is dead and reconnect
+        if (!wsRef.current || wsRef.current.readyState === WebSocket.CLOSED) {
+          console.log('[WS] Tab visible, reconnecting...');
+          reconnectAttemptsRef.current = 0; // Reset attempts for visibility-triggered reconnect
+          connect();
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [connect]);
+
+  return {
+    data,
+    isConnected,
+    connectionState,
+    error,
+    connect,
+    disconnect,
+  };
+}

package/src/components/hooks/useWorkspaceMembers.ts

@@ -0,0 +1,132 @@
+/**
+ * useWorkspaceMembers Hook
+ *
+ * Fetches and caches workspace members for filtering online users.
+ * Returns the set of usernames that have access to the workspace.
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { cloudApi } from '../../lib/cloudApi';
+import type { UserPresence } from './usePresence';
+
+interface WorkspaceMember {
+  id: string;
+  userId: string;
+  role: string;
+  isPending: boolean;
+  user?: {
+    githubUsername?: string;
+    displayName?: string;
+    email?: string;
+    avatarUrl?: string;
+  };
+}
+
+export interface UseWorkspaceMembersOptions {
+  /** The workspace ID to fetch members for */
+  workspaceId?: string;
+  /** Whether to enable fetching (e.g., only in cloud mode) */
+  enabled?: boolean;
+}
+
+export interface UseWorkspaceMembersReturn {
+  /** Set of usernames with workspace access (lowercase for comparison) */
+  memberUsernames: Set<string>;
+  /** Whether members are currently loading */
+  isLoading: boolean;
+  /** Error message if fetch failed */
+  error: string | null;
+  /** Refetch workspace members */
+  refetch: () => Promise<void>;
+}
+
+/**
+ * Hook to fetch workspace members and provide a set of usernames with access.
+ * Used to filter online users to show only those with workspace access.
+ */
+export function useWorkspaceMembers(
+  options: UseWorkspaceMembersOptions = {}
+): UseWorkspaceMembersReturn {
+  const { workspaceId, enabled = true } = options;
+
+  const [members, setMembers] = useState<WorkspaceMember[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchMembers = useCallback(async () => {
+    if (!workspaceId || !enabled) {
+      setMembers([]);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await cloudApi.getWorkspaceMembers(workspaceId);
+      if (result.success) {
+        setMembers(result.data.members as WorkspaceMember[]);
+      } else {
+        setError(result.error);
+        setMembers([]);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch members');
+      setMembers([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [workspaceId, enabled]);
+
+  // Fetch members when workspace changes
+  useEffect(() => {
+    fetchMembers();
+  }, [fetchMembers]);
+
+  // Build set of member usernames (lowercase for case-insensitive comparison)
+  // Include githubUsername, displayName, and email prefix to match all possible presence usernames
+  // (The auth API uses: displayName || githubUsername || email.split('@')[0])
+  const memberUsernames = useMemo(() => {
+    const usernames = new Set<string>();
+    for (const member of members) {
+      // Add GitHub username if available
+      if (member.user?.githubUsername) {
+        usernames.add(member.user.githubUsername.toLowerCase());
+      }
+      // Also add displayName for email-only users who don't have a GitHub username
+      if (member.user?.displayName) {
+        usernames.add(member.user.displayName.toLowerCase());
+      }
+      // Also add email prefix for email-only users without displayName
+      if (member.user?.email) {
+        usernames.add(member.user.email.split('@')[0].toLowerCase());
+      }
+    }
+    return usernames;
+  }, [members]);
+
+  return {
+    memberUsernames,
+    isLoading,
+    error,
+    refetch: fetchMembers,
+  };
+}
+
+/**
+ * Filter online users to only include those with workspace access.
+ * If no members are loaded (non-cloud mode or error), returns all users.
+ */
+export function filterOnlineUsersByWorkspace(
+  onlineUsers: UserPresence[],
+  memberUsernames: Set<string>
+): UserPresence[] {
+  // If no members loaded, show all users (non-cloud mode fallback)
+  if (memberUsernames.size === 0) {
+    return onlineUsers;
+  }
+
+  return onlineUsers.filter((user) =>
+    memberUsernames.has(user.username.toLowerCase())
+  );
+}