apteva 0.2.6 → 0.2.8

package/src/web/context/AuthContext.tsx

@@ -0,0 +1,230 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef, type ReactNode } from "react";
+
+interface User {
+  id: string;
+  username: string;
+  role: "admin" | "user";
+}
+
+interface AuthStatus {
+  hasUsers: boolean;
+  authenticated: boolean;
+  user?: User;
+}
+
+interface AuthContextValue {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  hasUsers: boolean | null;
+  accessToken: string | null;
+  login: (username: string, password: string) => Promise<{ success: boolean; error?: string }>;
+  logout: () => Promise<void>;
+  refreshToken: () => Promise<boolean>;
+  checkAuth: () => Promise<void>;
+  authFetch: (url: string, options?: RequestInit) => Promise<Response>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function useAuth(): AuthContextValue {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasUsers, setHasUsers] = useState<boolean | null>(null);
+
+  // Refs to track state without causing re-renders
+  const tokenRef = useRef<string | null>(null);
+  const refreshingRef = useRef(false);
+  const initializedRef = useRef(false);
+
+  // Helper to set token in both state and ref
+  const updateToken = useCallback((token: string | null) => {
+    tokenRef.current = token;
+    setAccessToken(token);
+  }, []);
+
+  // Internal refresh function - prevents concurrent refreshes
+  const refreshTokenInternal = useCallback(async (): Promise<boolean> => {
+    // Prevent concurrent refresh calls
+    if (refreshingRef.current) {
+      return false;
+    }
+    refreshingRef.current = true;
+
+    try {
+      const res = await fetch("/api/auth/refresh", {
+        method: "POST",
+        credentials: "include",
+      });
+
+      if (!res.ok) {
+        return false;
+      }
+
+      const data = await res.json();
+      updateToken(data.accessToken);
+
+      // Get user info with new token
+      const meRes = await fetch("/api/auth/me", {
+        headers: { Authorization: `Bearer ${data.accessToken}` },
+      });
+
+      if (meRes.ok) {
+        const meData = await meRes.json();
+        setUser(meData.user);
+        return true;
+      }
+
+      return false;
+    } catch (e) {
+      console.error("Token refresh failed:", e);
+      return false;
+    } finally {
+      refreshingRef.current = false;
+    }
+  }, [updateToken]);
+
+  // Check auth status
+  const checkAuth = useCallback(async () => {
+    try {
+      const token = tokenRef.current;
+      const res = await fetch("/api/auth/check", {
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+      });
+      const data: AuthStatus = await res.json();
+
+      setHasUsers(data.hasUsers);
+
+      if (data.authenticated && data.user) {
+        setUser(data.user as User);
+      } else {
+        setUser(null);
+        // Try to refresh if we have users (meaning there might be a cookie)
+        if (data.hasUsers) {
+          const refreshed = await refreshTokenInternal();
+          if (!refreshed) {
+            updateToken(null);
+          }
+        }
+      }
+    } catch (e) {
+      console.error("Auth check failed:", e);
+      setUser(null);
+      updateToken(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [refreshTokenInternal, updateToken]);
+
+  // Login
+  const login = useCallback(async (username: string, password: string): Promise<{ success: boolean; error?: string }> => {
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        return { success: false, error: data.error || "Login failed" };
+      }
+
+      updateToken(data.accessToken);
+      setUser(data.user);
+      setHasUsers(true);
+
+      return { success: true };
+    } catch (e) {
+      console.error("Login failed:", e);
+      return { success: false, error: "Login failed" };
+    }
+  }, [updateToken]);
+
+  // Logout
+  const logout = useCallback(async () => {
+    try {
+      const token = tokenRef.current;
+      await fetch("/api/auth/logout", {
+        method: "POST",
+        credentials: "include",
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+      });
+    } catch (e) {
+      console.error("Logout failed:", e);
+    } finally {
+      setUser(null);
+      updateToken(null);
+    }
+  }, [updateToken]);
+
+  // Authenticated fetch wrapper - uses ref for latest token
+  const authFetch = useCallback(async (url: string, options: RequestInit = {}): Promise<Response> => {
+    const headers = new Headers(options.headers);
+    const token = tokenRef.current;
+    if (token) {
+      headers.set("Authorization", `Bearer ${token}`);
+    }
+    return fetch(url, { ...options, headers });
+  }, []);
+
+  // Public refresh function
+  const refreshToken = useCallback(async (): Promise<boolean> => {
+    return refreshTokenInternal();
+  }, [refreshTokenInternal]);
+
+  // Check auth on mount - only once
+  useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    checkAuth();
+  }, [checkAuth]);
+
+  // Set up token refresh interval
+  useEffect(() => {
+    if (!accessToken) return;
+
+    // Refresh token 1 minute before expiry (tokens last 15 min)
+    const refreshInterval = setInterval(() => {
+      refreshTokenInternal();
+    }, 14 * 60 * 1000); // 14 minutes
+
+    return () => clearInterval(refreshInterval);
+  }, [accessToken, refreshTokenInternal]);
+
+  const value: AuthContextValue = {
+    user,
+    isAuthenticated: !!user,
+    isLoading,
+    hasUsers,
+    accessToken,
+    login,
+    logout,
+    refreshToken,
+    checkAuth,
+    authFetch,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+// Hook to get auth headers for API calls
+export function useAuthHeaders(): Record<string, string> {
+  const { accessToken } = useAuth();
+  return accessToken ? { Authorization: `Bearer ${accessToken}` } : {};
+}

package/src/web/context/ProjectContext.tsx

@@ -0,0 +1,182 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import { useAuth } from "./AuthContext";
+
+export interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  color: string;
+  agentCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface ProjectContextValue {
+  projects: Project[];
+  currentProjectId: string | null; // null = "All Projects", "unassigned" = unassigned agents
+  currentProject: Project | null;
+  isLoading: boolean;
+  error: string | null;
+  unassignedCount: number;
+  setCurrentProjectId: (id: string | null) => void;
+  createProject: (data: { name: string; description?: string; color?: string }) => Promise<Project | null>;
+  updateProject: (id: string, data: { name?: string; description?: string; color?: string }) => Promise<Project | null>;
+  deleteProject: (id: string) => Promise<boolean>;
+  refreshProjects: () => Promise<void>;
+}
+
+const ProjectContext = createContext<ProjectContextValue | null>(null);
+
+export function useProjects(): ProjectContextValue {
+  const context = useContext(ProjectContext);
+  if (!context) {
+    throw new Error("useProjects must be used within a ProjectProvider");
+  }
+  return context;
+}
+
+interface ProjectProviderProps {
+  children: ReactNode;
+}
+
+const STORAGE_KEY = "apteva_current_project";
+
+export function ProjectProvider({ children }: ProjectProviderProps) {
+  const { authFetch, isAuthenticated, isLoading: authLoading } = useAuth();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [currentProjectId, setCurrentProjectIdState] = useState<string | null>(() => {
+    // Load from localStorage
+    if (typeof window !== "undefined") {
+      return localStorage.getItem(STORAGE_KEY);
+    }
+    return null;
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [unassignedCount, setUnassignedCount] = useState(0);
+
+  const setCurrentProjectId = useCallback((id: string | null) => {
+    setCurrentProjectIdState(id);
+    if (typeof window !== "undefined") {
+      if (id === null) {
+        localStorage.removeItem(STORAGE_KEY);
+      } else {
+        localStorage.setItem(STORAGE_KEY, id);
+      }
+    }
+  }, []);
+
+  const currentProject = projects.find(p => p.id === currentProjectId) || null;
+
+  const refreshProjects = useCallback(async () => {
+    if (!isAuthenticated && !authLoading) {
+      setProjects([]);
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      setError(null);
+      const res = await authFetch("/api/projects");
+      if (!res.ok) {
+        throw new Error("Failed to fetch projects");
+      }
+      const data = await res.json();
+      setProjects(data.projects || []);
+      setUnassignedCount(data.unassignedCount || 0);
+
+      // If current project no longer exists, reset to all
+      if (currentProjectId && currentProjectId !== "unassigned" && !data.projects.find((p: Project) => p.id === currentProjectId)) {
+        setCurrentProjectId(null);
+      }
+    } catch (e) {
+      console.error("Failed to fetch projects:", e);
+      setError("Failed to load projects");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [authFetch, isAuthenticated, authLoading, currentProjectId, setCurrentProjectId]);
+
+  const createProject = useCallback(async (data: { name: string; description?: string; color?: string }): Promise<Project | null> => {
+    try {
+      const res = await authFetch("/api/projects", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "Failed to create project");
+      }
+      const result = await res.json();
+      await refreshProjects();
+      return result.project;
+    } catch (e) {
+      console.error("Failed to create project:", e);
+      return null;
+    }
+  }, [authFetch, refreshProjects]);
+
+  const updateProject = useCallback(async (id: string, data: { name?: string; description?: string; color?: string }): Promise<Project | null> => {
+    try {
+      const res = await authFetch(`/api/projects/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "Failed to update project");
+      }
+      const result = await res.json();
+      await refreshProjects();
+      return result.project;
+    } catch (e) {
+      console.error("Failed to update project:", e);
+      return null;
+    }
+  }, [authFetch, refreshProjects]);
+
+  const deleteProject = useCallback(async (id: string): Promise<boolean> => {
+    try {
+      const res = await authFetch(`/api/projects/${id}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "Failed to delete project");
+      }
+      if (currentProjectId === id) {
+        setCurrentProjectId(null);
+      }
+      await refreshProjects();
+      return true;
+    } catch (e) {
+      console.error("Failed to delete project:", e);
+      return false;
+    }
+  }, [authFetch, currentProjectId, setCurrentProjectId, refreshProjects]);
+
+  // Fetch projects when authenticated
+  useEffect(() => {
+    if (!authLoading) {
+      refreshProjects();
+    }
+  }, [authLoading, refreshProjects]);
+
+  const value: ProjectContextValue = {
+    projects,
+    currentProjectId,
+    currentProject,
+    isLoading,
+    error,
+    unassignedCount,
+    setCurrentProjectId,
+    createProject,
+    updateProject,
+    deleteProject,
+    refreshProjects,
+  };
+
+  return <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>;
+}

package/src/web/context/TelemetryContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState, useCallback, useRef } from "react";
+import React, { createContext, useContext, useEffect, useState, useCallback, useRef, useMemo } from "react";
 
 export interface TelemetryEvent {
   id: string;
@@ -18,6 +18,7 @@ interface TelemetryContextValue {
   connected: boolean;
   events: TelemetryEvent[];
   lastActivityByAgent: Record<string, { timestamp: string; category: string; type: string }>;
+  activeAgents: Record<string, { type: string; expiresAt: number }>;
   clearEvents: () => void;
 }
 
@@ -29,70 +30,111 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
   const [connected, setConnected] = useState(false);
   const [events, setEvents] = useState<TelemetryEvent[]>([]);
   const [lastActivityByAgent, setLastActivityByAgent] = useState<Record<string, { timestamp: string; category: string; type: string }>>({});
+  const [activeAgents, setActiveAgents] = useState<Record<string, { type: string; expiresAt: number }>>({});
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  // Clean up expired active states
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = Date.now();
+      setActiveAgents(prev => {
+        const updated: Record<string, { type: string; expiresAt: number }> = {};
+        for (const [agentId, state] of Object.entries(prev)) {
+          if (state.expiresAt > now) {
+            updated[agentId] = state;
+          }
+        }
+        return updated;
+      });
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
   const connect = useCallback(() => {
     if (eventSourceRef.current) {
       eventSourceRef.current.close();
+      eventSourceRef.current = null;
     }
 
-    const es = new EventSource("/api/telemetry/stream");
-    eventSourceRef.current = es;
-
-    es.onopen = () => {
-      setConnected(true);
-    };
-
-    es.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-
-        // Handle connection message
-        if (data.connected) {
-          setConnected(true);
-          return;
-        }
-
-        // Handle array of events
-        if (Array.isArray(data)) {
-          setEvents(prev => {
-            const combined = [...data, ...prev];
-            return combined.slice(0, MAX_EVENTS);
-          });
-
-          // Update last activity per agent
-          setLastActivityByAgent(prev => {
-            const updated = { ...prev };
-            for (const evt of data) {
-              const existing = updated[evt.agent_id];
-              if (!existing || new Date(evt.timestamp) > new Date(existing.timestamp)) {
-                updated[evt.agent_id] = {
-                  timestamp: evt.timestamp,
-                  category: evt.category,
-                  type: evt.type,
-                };
+    try {
+      const es = new EventSource("/api/telemetry/stream");
+      eventSourceRef.current = es;
+
+      es.onopen = () => {
+        setConnected(true);
+      };
+
+      es.onmessage = (event) => {
+        // Ignore keepalive pings (comments starting with :)
+        if (!event.data || event.data.trim() === "") return;
+
+        try {
+          const data = JSON.parse(event.data);
+
+          // Handle connection message
+          if (data.connected) {
+            setConnected(true);
+            return;
+          }
+
+          // Handle array of events
+          if (Array.isArray(data)) {
+            setEvents(prev => {
+              const combined = [...data, ...prev];
+              return combined.slice(0, MAX_EVENTS);
+            });
+
+            // Update last activity per agent
+            setLastActivityByAgent(prev => {
+              const updated = { ...prev };
+              for (const evt of data) {
+                const existing = updated[evt.agent_id];
+                if (!existing || new Date(evt.timestamp) > new Date(existing.timestamp)) {
+                  updated[evt.agent_id] = {
+                    timestamp: evt.timestamp,
+                    category: evt.category,
+                    type: evt.type,
+                  };
+                }
               }
-            }
-            return updated;
-          });
+              return updated;
+            });
+
+            // Set agents as active for 3 seconds (tracked in context, not component)
+            setActiveAgents(prev => {
+              const updated = { ...prev };
+              const expiresAt = Date.now() + 3000;
+              for (const evt of data) {
+                updated[evt.agent_id] = { type: evt.type, expiresAt };
+              }
+              return updated;
+            });
+          }
+        } catch {
+          // Ignore parse errors (likely keepalive or empty message)
         }
-      } catch (e) {
-        console.error("Failed to parse telemetry event:", e);
-      }
-    };
+      };
 
-    es.onerror = () => {
-      setConnected(false);
-      es.close();
-      eventSourceRef.current = null;
+      es.onerror = () => {
+        setConnected(false);
+        es.close();
+        eventSourceRef.current = null;
 
-      // Reconnect after 3 seconds
+        // Reconnect after 2 seconds
+        if (reconnectTimeoutRef.current) {
+          clearTimeout(reconnectTimeoutRef.current);
+        }
+        reconnectTimeoutRef.current = setTimeout(connect, 2000);
+      };
+    } catch {
+      // Failed to create EventSource, retry
+      setConnected(false);
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
       }
-      reconnectTimeoutRef.current = setTimeout(connect, 3000);
-    };
+      reconnectTimeoutRef.current = setTimeout(connect, 2000);
+    }
   }, []);
 
   useEffect(() => {
@@ -113,7 +155,7 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   return (
-    <TelemetryContext.Provider value={{ connected, events, lastActivityByAgent, clearEvents }}>
+    <TelemetryContext.Provider value={{ connected, events, lastActivityByAgent, activeAgents, clearEvents }}>
       {children}
     </TelemetryContext.Provider>
   );
@@ -170,33 +212,13 @@ export function useTelemetry(filter?: {
   };
 }
 
-// Hook for agent activity indicator
+// Hook for agent activity indicator - uses context-level tracking
 export function useAgentActivity(agentId: string) {
-  const { lastActivityByAgent } = useTelemetryContext();
-  const [isActive, setIsActive] = useState(false);
-  const lastActivity = lastActivityByAgent[agentId];
-
-  useEffect(() => {
-    if (!lastActivity) {
-      setIsActive(false);
-      return;
-    }
-
-    // Set active when we get new activity
-    setIsActive(true);
-
-    // Clear active state after 3 seconds of no activity
-    const timeout = setTimeout(() => {
-      setIsActive(false);
-    }, 3000);
-
-    return () => clearTimeout(timeout);
-  }, [lastActivity?.timestamp]);
+  const { activeAgents } = useTelemetryContext();
+  const activity = activeAgents[agentId];
 
   return {
-    isActive,
-    lastActivity,
-    category: lastActivity?.category,
-    type: lastActivity?.type,
+    isActive: !!activity,
+    type: activity?.type,
   };
 }

package/src/web/context/index.ts

@@ -1,2 +1,7 @@
 export { TelemetryProvider, useTelemetryContext, useTelemetry, useAgentActivity } from "./TelemetryContext";
 export type { TelemetryEvent } from "./TelemetryContext";
+
+export { AuthProvider, useAuth, useAuthHeaders } from "./AuthContext";
+
+export { ProjectProvider, useProjects } from "./ProjectContext";
+export type { Project } from "./ProjectContext";