apteva 0.2.7 → 0.2.9

package/src/web/components/tasks/TasksPage.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { TasksIcon } from "../common/Icons";
+import { useAuth } from "../../context";
 import type { Task } from "../../types";
 
 interface TasksPageProps {
@@ -7,20 +8,14 @@ interface TasksPageProps {
 }
 
 export function TasksPage({ onSelectAgent }: TasksPageProps) {
+  const { authFetch } = useAuth();
   const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<string>("all");
 
-  useEffect(() => {
-    fetchTasks();
-    // Refresh every 10 seconds
-    const interval = setInterval(fetchTasks, 10000);
-    return () => clearInterval(interval);
-  }, [filter]);
-
-  const fetchTasks = async () => {
+  const fetchTasks = useCallback(async () => {
     try {
-      const res = await fetch(`/api/tasks?status=${filter}`);
+      const res = await authFetch(`/api/tasks?status=${filter}`);
       const data = await res.json();
       setTasks(data.tasks || []);
     } catch (e) {
@@ -28,7 +23,14 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [authFetch, filter]);
+
+  useEffect(() => {
+    fetchTasks();
+    // Refresh every 10 seconds
+    const interval = setInterval(fetchTasks, 10000);
+    return () => clearInterval(interval);
+  }, [fetchTasks]);
 
   const statusColors: Record<string, string> = {
     pending: "bg-yellow-500/20 text-yellow-400",
@@ -47,21 +49,21 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
   ];
 
   return (
-    <div className="flex-1 p-6 overflow-auto">
-      <div className="max-w-4xl mx-auto">
-        <div className="flex items-center justify-between mb-6">
-          <div>
-            <h1 className="text-2xl font-semibold mb-1">Tasks</h1>
-            <p className="text-[#666]">
+    <div className="flex-1 p-4 md:p-6 overflow-auto">
+      <div className="max-w-4xl">
+        <div className="mb-6">
+          <div className="mb-4">
+            <h1 className="text-xl md:text-2xl font-semibold mb-1">Tasks</h1>
+            <p className="text-sm text-[#666]">
               View tasks from all running agents
             </p>
           </div>
-          <div className="flex gap-2">
+          <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
             {filterOptions.map(opt => (
               <button
                 key={opt.value}
                 onClick={() => setFilter(opt.value)}
-                className={`px-3 py-1.5 rounded text-sm transition ${
+                className={`px-3 py-1.5 rounded text-sm transition whitespace-nowrap ${
                   filter === opt.value
                     ? "bg-[#f97316] text-black"
                     : "bg-[#1a1a1a] hover:bg-[#222]"
@@ -113,7 +115,7 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
                   </p>
                 )}
 
-                <div className="flex items-center gap-4 text-xs text-[#555]">
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-[#555]">
                   <span>Type: {task.type}</span>
                   <span>Priority: {task.priority}</span>
                   {task.recurrence && <span>Recurrence: {task.recurrence}</span>}

package/src/web/components/telemetry/TelemetryPage.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useMemo, useRef } from "react";
+import React, { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import { Select } from "../common/Select";
-import { useTelemetryContext, type TelemetryEvent } from "../../context";
+import { useTelemetryContext, useProjects, useAuth, type TelemetryEvent } from "../../context";
 
 interface TelemetryStats {
   total_events: number;
@@ -45,26 +45,33 @@ function extractEventStats(event: TelemetryEvent): {
 
 export function TelemetryPage() {
   const { events: realtimeEvents } = useTelemetryContext();
+  const { currentProjectId, currentProject } = useProjects();
+  const { authFetch } = useAuth();
   const [fetchedStats, setFetchedStats] = useState<TelemetryStats | null>(null);
   const [historicalEvents, setHistoricalEvents] = useState<TelemetryEvent[]>([]);
   const [fetchedUsage, setFetchedUsage] = useState<UsageByAgent[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState({
-    category: "",
     level: "",
     agent_id: "",
   });
-  const [agents, setAgents] = useState<Array<{ id: string; name: string }>>([]);
+  // Categories to hide (DATABASE hidden by default)
+  const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(new Set(["DATABASE"]));
+  const [agents, setAgents] = useState<Array<{ id: string; name: string; projectId: string | null }>>([]);
   const [expandedEvent, setExpandedEvent] = useState<string | null>(null);
 
   // Track IDs that were in the fetched stats to avoid double-counting
   const countedEventIdsRef = useRef<Set<string>>(new Set());
 
+  // Track which events are "new" (for animation) - stores event IDs with their arrival time
+  const [newEventIds, setNewEventIds] = useState<Set<string>>(new Set());
+  const seenEventIdsRef = useRef<Set<string>>(new Set());
+
   // Fetch agents for dropdown
   useEffect(() => {
     const fetchAgents = async () => {
       try {
-        const res = await fetch("/api/agents");
+        const res = await authFetch("/api/agents");
         const data = await res.json();
         setAgents(data.agents || []);
       } catch (e) {
@@ -72,25 +79,40 @@ export function TelemetryPage() {
       }
     };
     fetchAgents();
-  }, []);
+  }, [authFetch]);
+
+  // Filter agents by project
+  const filteredAgents = useMemo(() => {
+    if (currentProjectId === null) return agents;
+    if (currentProjectId === "unassigned") return agents.filter(a => !a.projectId);
+    return agents.filter(a => a.projectId === currentProjectId);
+  }, [agents, currentProjectId]);
+
+  // Get agent IDs for the current project
+  const projectAgentIds = useMemo(() => new Set(filteredAgents.map(a => a.id)), [filteredAgents]);
 
   // Fetch stats and historical data (less frequently now since we have real-time)
   const fetchData = async () => {
     setLoading(true);
     try {
+      // Build project filter param
+      const projectParam = currentProjectId === "unassigned" ? "null" : currentProjectId || "";
+
       // Fetch stats
-      const statsRes = await fetch("/api/telemetry/stats");
+      const statsParams = new URLSearchParams();
+      if (projectParam) statsParams.set("project_id", projectParam);
+      const statsRes = await authFetch(`/api/telemetry/stats${statsParams.toString() ? `?${statsParams}` : ""}`);
       const statsData = await statsRes.json();
       setFetchedStats(statsData.stats);
 
       // Fetch historical events with filters
       const params = new URLSearchParams();
-      if (filter.category) params.set("category", filter.category);
       if (filter.level) params.set("level", filter.level);
       if (filter.agent_id) params.set("agent_id", filter.agent_id);
-      params.set("limit", "50");
+      if (projectParam) params.set("project_id", projectParam);
+      params.set("limit", "100"); // Fetch more since we filter client-side
 
-      const eventsRes = await fetch(`/api/telemetry/events?${params}`);
+      const eventsRes = await authFetch(`/api/telemetry/events?${params}`);
       const eventsData = await eventsRes.json();
       const events = eventsData.events || [];
       setHistoricalEvents(events);
@@ -99,7 +121,10 @@ export function TelemetryPage() {
       countedEventIdsRef.current = new Set(events.map((e: TelemetryEvent) => e.id));
 
       // Fetch usage by agent
-      const usageRes = await fetch("/api/telemetry/usage?group_by=agent");
+      const usageParams = new URLSearchParams();
+      usageParams.set("group_by", "agent");
+      if (projectParam) usageParams.set("project_id", projectParam);
+      const usageRes = await authFetch(`/api/telemetry/usage?${usageParams}`);
       const usageData = await usageRes.json();
       setFetchedUsage(usageData.usage || []);
     } catch (e) {
@@ -113,7 +138,7 @@ export function TelemetryPage() {
     // Refresh stats every 60 seconds (events come in real-time)
     const interval = setInterval(fetchData, 60000);
     return () => clearInterval(interval);
-  }, [filter]);
+  }, [filter, currentProjectId, authFetch]);
 
   // Compute real-time stats from new events (not already counted in fetched stats)
   const stats = useMemo(() => {
@@ -188,20 +213,33 @@ export function TelemetryPage() {
   const allEvents = React.useMemo(() => {
     // Apply filters to real-time events
     let filtered = realtimeEvents;
+
+    // Filter by project (for real-time events)
+    if (currentProjectId !== null) {
+      filtered = filtered.filter(e => projectAgentIds.has(e.agent_id));
+    }
+
     if (filter.agent_id) {
       filtered = filtered.filter(e => e.agent_id === filter.agent_id);
     }
-    if (filter.category) {
-      filtered = filtered.filter(e => e.category === filter.category);
+    // Filter out hidden categories
+    if (hiddenCategories.size > 0) {
+      filtered = filtered.filter(e => !hiddenCategories.has(e.category));
     }
     if (filter.level) {
       filtered = filtered.filter(e => e.level === filter.level);
     }
 
+    // Filter historical events too
+    let filteredHistorical = historicalEvents;
+    if (hiddenCategories.size > 0) {
+      filteredHistorical = filteredHistorical.filter(e => !hiddenCategories.has(e.category));
+    }
+
     // Merge with historical, dedupe by ID
     const seen = new Set(filtered.map(e => e.id));
     const merged = [...filtered];
-    for (const evt of historicalEvents) {
+    for (const evt of filteredHistorical) {
       if (!seen.has(evt.id)) {
         merged.push(evt);
         seen.add(evt.id);
@@ -212,7 +250,35 @@ export function TelemetryPage() {
     merged.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
 
     return merged.slice(0, 100);
-  }, [realtimeEvents, historicalEvents, filter]);
+  }, [realtimeEvents, historicalEvents, filter, hiddenCategories, currentProjectId, projectAgentIds]);
+
+  // Track new events for animation - mark events as "new" when they first appear
+  useEffect(() => {
+    const newIds: string[] = [];
+    for (const event of realtimeEvents) {
+      if (!seenEventIdsRef.current.has(event.id)) {
+        seenEventIdsRef.current.add(event.id);
+        newIds.push(event.id);
+      }
+    }
+
+    if (newIds.length > 0) {
+      setNewEventIds(prev => {
+        const updated = new Set(prev);
+        newIds.forEach(id => updated.add(id));
+        return updated;
+      });
+
+      // Remove "new" status after 5 seconds
+      setTimeout(() => {
+        setNewEventIds(prev => {
+          const updated = new Set(prev);
+          newIds.forEach(id => updated.delete(id));
+          return updated;
+        });
+      }, 5000);
+    }
+  }, [realtimeEvents]);
 
   const getAgentName = (agentId: string) => {
     const agent = agents.find(a => a.id === agentId);
@@ -241,23 +307,26 @@ export function TelemetryPage() {
     TASK: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
     MEMORY: "bg-cyan-500/20 text-cyan-400 border-cyan-500/30",
     MCP: "bg-orange-500/20 text-orange-400 border-orange-500/30",
+    DATABASE: "bg-pink-500/20 text-pink-400 border-pink-500/30",
+  };
+
+  const allCategories = ["LLM", "TOOL", "CHAT", "TASK", "MEMORY", "MCP", "SYSTEM", "DATABASE", "ERROR"];
+
+  const toggleCategory = (category: string) => {
+    setHiddenCategories(prev => {
+      const updated = new Set(prev);
+      if (updated.has(category)) {
+        updated.delete(category);
+      } else {
+        updated.add(category);
+      }
+      return updated;
+    });
   };
 
   const agentOptions = [
     { value: "", label: "All Agents" },
-    ...agents.map(a => ({ value: a.id, label: a.name })),
-  ];
-
-  const categoryOptions = [
-    { value: "", label: "All Categories" },
-    { value: "LLM", label: "LLM" },
-    { value: "TOOL", label: "Tool" },
-    { value: "CHAT", label: "Chat" },
-    { value: "TASK", label: "Task" },
-    { value: "MEMORY", label: "Memory" },
-    { value: "MCP", label: "MCP" },
-    { value: "SYSTEM", label: "System" },
-    { value: "ERROR", label: "Error" },
+    ...filteredAgents.map(a => ({ value: a.id, label: a.name })),
   ];
 
   const levelOptions = [
@@ -270,10 +339,24 @@ export function TelemetryPage() {
 
   return (
     <div className="flex-1 overflow-auto p-6">
-      <div className="max-w-6xl">
+      <div>
         {/* Header */}
         <div className="mb-6">
-          <h1 className="text-2xl font-semibold mb-1">Telemetry</h1>
+          <div className="flex items-center gap-3 mb-1">
+            {currentProject && (
+              <span
+                className="w-3 h-3 rounded-full"
+                style={{ backgroundColor: currentProject.color }}
+              />
+            )}
+            <h1 className="text-2xl font-semibold">
+              {currentProjectId === null
+                ? "Telemetry"
+                : currentProjectId === "unassigned"
+                ? "Telemetry - Unassigned"
+                : `Telemetry - ${currentProject?.name || ""}`}
+            </h1>
+          </div>
           <p className="text-[#666]">
             Monitor agent activity, token usage, and errors.
           </p>
@@ -331,8 +414,8 @@ export function TelemetryPage() {
         )}
 
         {/* Filters */}
-        <div className="flex items-center gap-3 mb-4">
-          <div className="w-56">
+        <div className="flex flex-wrap items-center gap-3 mb-4">
+          <div className="w-44">
             <Select
               value={filter.agent_id}
               options={agentOptions}
@@ -340,28 +423,42 @@ export function TelemetryPage() {
               placeholder="All Agents"
             />
           </div>
-          <div className="w-48">
-            <Select
-              value={filter.category}
-              options={categoryOptions}
-              onChange={(value) => setFilter({ ...filter, category: value })}
-              placeholder="All Categories"
-            />
+          {/* Category toggles */}
+          <div className="flex flex-wrap items-center gap-1.5 flex-1">
+            {allCategories.map((cat) => {
+              const isHidden = hiddenCategories.has(cat);
+              const colorClass = categoryColors[cat] || "bg-[#222] text-[#888] border-[#333]";
+              return (
+                <button
+                  key={cat}
+                  onClick={() => toggleCategory(cat)}
+                  className={`px-2 py-0.5 rounded text-xs border transition-all ${
+                    isHidden
+                      ? "bg-[#1a1a1a] text-[#555] border-[#333] opacity-50"
+                      : colorClass
+                  }`}
+                >
+                  {cat}
+                </button>
+              );
+            })}
           </div>
-          <div className="w-40">
-            <Select
-              value={filter.level}
-              options={levelOptions}
-              onChange={(value) => setFilter({ ...filter, level: value })}
-              placeholder="All Levels"
-            />
+          <div className="flex items-center gap-2">
+            <div className="w-36">
+              <Select
+                value={filter.level}
+                options={levelOptions}
+                onChange={(value) => setFilter({ ...filter, level: value })}
+                placeholder="All Levels"
+              />
+            </div>
+            <button
+              onClick={fetchData}
+              className="px-3 py-2 bg-[#1a1a1a] hover:bg-[#222] border border-[#333] rounded text-sm transition"
+            >
+              Refresh
+            </button>
           </div>
-          <button
-            onClick={fetchData}
-            className="px-3 py-2 bg-[#1a1a1a] hover:bg-[#222] border border-[#333] rounded text-sm transition"
-          >
-            Refresh
-          </button>
         </div>
 
         {/* Events List */}
@@ -384,18 +481,21 @@ export function TelemetryPage() {
           ) : (
             <div className="divide-y divide-[#1a1a1a]">
               {allEvents.map((event) => {
-                // Only mark as new if event arrived in last 10 seconds
-                const eventTime = new Date(event.timestamp).getTime();
-                const isNew = Date.now() - eventTime < 10000;
+                const isNew = newEventIds.has(event.id);
 
                 return (
                   <div
                     key={event.id}
-                    className="p-3 hover:bg-[#0a0a0a] transition cursor-pointer"
+                    className={`p-3 hover:bg-[#0a0a0a] cursor-pointer transition-all duration-500 ${
+                      isNew ? "bg-green-500/5" : ""
+                    }`}
+                    style={{
+                      animation: isNew ? "slideIn 0.3s ease-out" : undefined,
+                    }}
                     onClick={() => setExpandedEvent(expandedEvent === event.id ? null : event.id)}
                   >
                     <div className="flex items-start gap-3">
-                      <span className={`px-2 py-0.5 rounded text-xs border ${categoryColors[event.category] || "bg-[#222] text-[#888] border-[#333]"}`}>
+                      <span className={`px-2 py-0.5 rounded text-xs border transition-colors duration-300 ${categoryColors[event.category] || "bg-[#222] text-[#888] border-[#333]"}`}>
                         {event.category}
                       </span>
                       <div className="flex-1 min-w-0">
@@ -407,9 +507,11 @@ export function TelemetryPage() {
                           {event.duration_ms && (
                             <span className="text-xs text-[#555]">{event.duration_ms}ms</span>
                           )}
-                          {isNew && (
-                            <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
-                          )}
+                          <span
+                            className={`w-1.5 h-1.5 rounded-full bg-green-400 transition-opacity duration-1000 ${
+                              isNew ? "opacity-100" : "opacity-0"
+                            }`}
+                          />
                         </div>
                         <div className="text-xs text-[#555] mt-1">
                           {getAgentName(event.agent_id)} · {new Date(event.timestamp).toLocaleString()}

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}` } : {};
+}