apteva 0.2.6 → 0.2.8

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

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } 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;
@@ -20,25 +20,58 @@ interface UsageByAgent {
   errors: number;
 }
 
+// Helper to extract stats from a single event
+function extractEventStats(event: TelemetryEvent): {
+  llm_calls: number;
+  tool_calls: number;
+  errors: number;
+  input_tokens: number;
+  output_tokens: number;
+} {
+  const isLlm = event.category === "LLM";
+  const isTool = event.category === "TOOL";
+  const isError = event.level === "error";
+  const inputTokens = (event.data?.input_tokens as number) || 0;
+  const outputTokens = (event.data?.output_tokens as number) || 0;
+
+  return {
+    llm_calls: isLlm ? 1 : 0,
+    tool_calls: isTool ? 1 : 0,
+    errors: isError ? 1 : 0,
+    input_tokens: inputTokens,
+    output_tokens: outputTokens,
+  };
+}
+
 export function TelemetryPage() {
-  const { connected, events: realtimeEvents } = useTelemetryContext();
-  const [stats, setStats] = useState<TelemetryStats | null>(null);
+  const { events: realtimeEvents } = useTelemetryContext();
+  const { currentProjectId, currentProject } = useProjects();
+  const { authFetch } = useAuth();
+  const [fetchedStats, setFetchedStats] = useState<TelemetryStats | null>(null);
   const [historicalEvents, setHistoricalEvents] = useState<TelemetryEvent[]>([]);
-  const [usage, setUsage] = useState<UsageByAgent[]>([]);
+  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) {
@@ -46,32 +79,54 @@ 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();
-      setStats(statsData.stats);
+      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();
-      setHistoricalEvents(eventsData.events || []);
+      const events = eventsData.events || [];
+      setHistoricalEvents(events);
+
+      // Mark all fetched event IDs as counted (stats already include them)
+      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();
-      setUsage(usageData.usage || []);
+      setFetchedUsage(usageData.usage || []);
     } catch (e) {
       console.error("Failed to fetch telemetry:", e);
     }
@@ -83,26 +138,108 @@ 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(() => {
+    if (!fetchedStats) return null;
+
+    // Calculate deltas from real-time events not in fetched data
+    let deltaEvents = 0;
+    let deltaLlmCalls = 0;
+    let deltaToolCalls = 0;
+    let deltaErrors = 0;
+    let deltaInputTokens = 0;
+    let deltaOutputTokens = 0;
+
+    for (const event of realtimeEvents) {
+      if (!countedEventIdsRef.current.has(event.id)) {
+        deltaEvents++;
+        const eventStats = extractEventStats(event);
+        deltaLlmCalls += eventStats.llm_calls;
+        deltaToolCalls += eventStats.tool_calls;
+        deltaErrors += eventStats.errors;
+        deltaInputTokens += eventStats.input_tokens;
+        deltaOutputTokens += eventStats.output_tokens;
+      }
+    }
+
+    return {
+      total_events: fetchedStats.total_events + deltaEvents,
+      total_llm_calls: fetchedStats.total_llm_calls + deltaLlmCalls,
+      total_tool_calls: fetchedStats.total_tool_calls + deltaToolCalls,
+      total_errors: fetchedStats.total_errors + deltaErrors,
+      total_input_tokens: fetchedStats.total_input_tokens + deltaInputTokens,
+      total_output_tokens: fetchedStats.total_output_tokens + deltaOutputTokens,
+    };
+  }, [fetchedStats, realtimeEvents]);
+
+  // Compute real-time usage by agent
+  const usage = useMemo(() => {
+    // Start with a copy of fetched usage as a map
+    const usageMap = new Map<string, UsageByAgent>();
+    for (const u of fetchedUsage) {
+      usageMap.set(u.agent_id, { ...u });
+    }
+
+    // Add deltas from real-time events
+    for (const event of realtimeEvents) {
+      if (!countedEventIdsRef.current.has(event.id)) {
+        const eventStats = extractEventStats(event);
+        const existing = usageMap.get(event.agent_id);
+        if (existing) {
+          existing.llm_calls += eventStats.llm_calls;
+          existing.tool_calls += eventStats.tool_calls;
+          existing.errors += eventStats.errors;
+          existing.input_tokens += eventStats.input_tokens;
+          existing.output_tokens += eventStats.output_tokens;
+        } else {
+          usageMap.set(event.agent_id, {
+            agent_id: event.agent_id,
+            llm_calls: eventStats.llm_calls,
+            tool_calls: eventStats.tool_calls,
+            errors: eventStats.errors,
+            input_tokens: eventStats.input_tokens,
+            output_tokens: eventStats.output_tokens,
+          });
+        }
+      }
+    }
+
+    return Array.from(usageMap.values());
+  }, [fetchedUsage, realtimeEvents]);
 
   // Merge real-time events with historical, filtering and deduping
   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);
@@ -113,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);
@@ -142,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 = [
@@ -171,23 +339,27 @@ export function TelemetryPage() {
 
   return (
     <div className="flex-1 overflow-auto p-6">
-      <div className="max-w-6xl">
+      <div>
         {/* Header */}
-        <div className="mb-6 flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-semibold mb-1">Telemetry</h1>
-            <p className="text-[#666]">
-              Monitor agent activity, token usage, and errors.
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <span
-              className={`w-2 h-2 rounded-full ${connected ? "bg-green-400" : "bg-red-400"}`}
-            />
-            <span className="text-xs text-[#666]">
-              {connected ? "Live" : "Reconnecting..."}
-            </span>
+        <div className="mb-6">
+          <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>
         </div>
 
         {/* Stats Cards */}
@@ -242,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}
@@ -251,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 */}
@@ -294,20 +480,22 @@ export function TelemetryPage() {
             </div>
           ) : (
             <div className="divide-y divide-[#1a1a1a]">
-              {allEvents.map((event, index) => {
-                // Check if this is a new real-time event (in first few positions and recent)
-                const isNew = index < 3 && realtimeEvents.some(e => e.id === event.id);
+              {allEvents.map((event) => {
+                const isNew = newEventIds.has(event.id);
 
                 return (
                   <div
                     key={event.id}
-                    className={`p-3 hover:bg-[#0a0a0a] transition cursor-pointer ${
-                      isNew ? "bg-[#0f1a0f]" : ""
+                    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">
@@ -319,9 +507,11 @@ export function TelemetryPage() {
                           {event.duration_ms && (
                             <span className="text-xs text-[#555]">{event.duration_ms}ms</span>
                           )}
-                          {isNew && (
-                            <span className="text-xs text-green-400">new</span>
-                          )}
+                          <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()}