apteva 0.2.6 → 0.2.7

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo, useRef } from "react";
 import { Select } from "../common/Select";
 import { useTelemetryContext, type TelemetryEvent } from "../../context";
 
@@ -20,11 +20,34 @@ 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 [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: "",
@@ -34,6 +57,9 @@ export function TelemetryPage() {
   const [agents, setAgents] = useState<Array<{ id: string; name: string }>>([]);
   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());
+
   // Fetch agents for dropdown
   useEffect(() => {
     const fetchAgents = async () => {
@@ -55,7 +81,7 @@ export function TelemetryPage() {
       // Fetch stats
       const statsRes = await fetch("/api/telemetry/stats");
       const statsData = await statsRes.json();
-      setStats(statsData.stats);
+      setFetchedStats(statsData.stats);
 
       // Fetch historical events with filters
       const params = new URLSearchParams();
@@ -66,12 +92,16 @@ export function TelemetryPage() {
 
       const eventsRes = await fetch(`/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 usageData = await usageRes.json();
-      setUsage(usageData.usage || []);
+      setFetchedUsage(usageData.usage || []);
     } catch (e) {
       console.error("Failed to fetch telemetry:", e);
     }
@@ -85,6 +115,75 @@ export function TelemetryPage() {
     return () => clearInterval(interval);
   }, [filter]);
 
+  // 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
@@ -173,21 +272,11 @@ export function TelemetryPage() {
     <div className="flex-1 overflow-auto p-6">
       <div className="max-w-6xl">
         {/* 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>
+        <div className="mb-6">
+          <h1 className="text-2xl font-semibold mb-1">Telemetry</h1>
+          <p className="text-[#666]">
+            Monitor agent activity, token usage, and errors.
+          </p>
         </div>
 
         {/* Stats Cards */}
@@ -294,16 +383,15 @@ 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) => {
+                // Only mark as new if event arrived in last 10 seconds
+                const eventTime = new Date(event.timestamp).getTime();
+                const isNew = Date.now() - eventTime < 10000;
 
                 return (
                   <div
                     key={event.id}
-                    className={`p-3 hover:bg-[#0a0a0a] transition cursor-pointer ${
-                      isNew ? "bg-[#0f1a0f]" : ""
-                    }`}
+                    className="p-3 hover:bg-[#0a0a0a] transition cursor-pointer"
                     onClick={() => setExpandedEvent(expandedEvent === event.id ? null : event.id)}
                   >
                     <div className="flex items-start gap-3">
@@ -320,7 +408,7 @@ export function TelemetryPage() {
                             <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" />
                           )}
                         </div>
                         <div className="text-xs text-[#555] mt-1">

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,
   };
 }