apteva 0.2.5 → 0.2.7

package/src/web/components/settings/SettingsPage.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { CheckIcon } from "../common/Icons";
 import type { Provider } from "../../types";
 
-type SettingsTab = "providers" | "updates";
+type SettingsTab = "providers" | "updates" | "data";
 
 export function SettingsPage() {
   const [activeTab, setActiveTab] = useState<SettingsTab>("providers");
@@ -23,6 +23,11 @@ export function SettingsPage() {
             active={activeTab === "updates"}
             onClick={() => setActiveTab("updates")}
           />
+          <SettingsNavItem
+            label="Data"
+            active={activeTab === "data"}
+            onClick={() => setActiveTab("data")}
+          />
         </nav>
       </div>
 
@@ -30,6 +35,7 @@ export function SettingsPage() {
       <div className="flex-1 overflow-auto p-6">
         {activeTab === "providers" && <ProvidersSettings />}
         {activeTab === "updates" && <UpdatesSettings />}
+        {activeTab === "data" && <DataSettings />}
       </div>
     </div>
   );
@@ -628,3 +634,84 @@ function IntegrationKeyCard({
     </div>
   );
 }
+
+function DataSettings() {
+  const [clearing, setClearing] = useState(false);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+  const [eventCount, setEventCount] = useState<number | null>(null);
+
+  const fetchStats = async () => {
+    try {
+      const res = await fetch("/api/telemetry/stats");
+      const data = await res.json();
+      setEventCount(data.stats?.total_events || 0);
+    } catch {
+      setEventCount(null);
+    }
+  };
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
+
+  const clearTelemetry = async () => {
+    if (!confirm("Are you sure you want to delete all telemetry data? This cannot be undone.")) {
+      return;
+    }
+
+    setClearing(true);
+    setMessage(null);
+
+    try {
+      const res = await fetch("/api/telemetry/clear", { method: "POST" });
+      const data = await res.json();
+
+      if (res.ok) {
+        setMessage({ type: "success", text: `Cleared ${data.deleted || 0} telemetry events.` });
+        setEventCount(0);
+      } else {
+        setMessage({ type: "error", text: data.error || "Failed to clear telemetry" });
+      }
+    } catch {
+      setMessage({ type: "error", text: "Failed to clear telemetry" });
+    }
+
+    setClearing(false);
+  };
+
+  return (
+    <div className="max-w-2xl">
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold mb-1">Data Management</h1>
+        <p className="text-[#666]">Manage stored data and telemetry.</p>
+      </div>
+
+      <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+        <h3 className="font-medium mb-2">Telemetry Data</h3>
+        <p className="text-sm text-[#666] mb-4">
+          {eventCount !== null
+            ? `${eventCount.toLocaleString()} events stored`
+            : "Loading..."}
+        </p>
+
+        {message && (
+          <div className={`mb-4 p-3 rounded text-sm ${
+            message.type === "success"
+              ? "bg-green-500/10 text-green-400 border border-green-500/30"
+              : "bg-red-500/10 text-red-400 border border-red-500/30"
+          }`}>
+            {message.text}
+          </div>
+        )}
+
+        <button
+          onClick={clearTelemetry}
+          disabled={clearing || eventCount === 0}
+          className="px-4 py-2 bg-red-500/20 text-red-400 hover:bg-red-500/30 disabled:opacity-50 disabled:cursor-not-allowed rounded text-sm font-medium transition"
+        >
+          {clearing ? "Clearing..." : "Clear All Telemetry"}
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
-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";
 
 interface TelemetryStats {
   total_events: number;
@@ -10,20 +11,6 @@ interface TelemetryStats {
   total_output_tokens: number;
 }
 
-interface TelemetryEvent {
-  id: string;
-  agent_id: string;
-  timestamp: string;
-  category: string;
-  type: string;
-  level: string;
-  trace_id: string | null;
-  thread_id: string | null;
-  data: Record<string, unknown> | null;
-  duration_ms: number | null;
-  error: string | null;
-}
-
 interface UsageByAgent {
   agent_id: string;
   input_tokens: number;
@@ -33,10 +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 [stats, setStats] = useState<TelemetryStats | null>(null);
-  const [events, setEvents] = useState<TelemetryEvent[]>([]);
-  const [usage, setUsage] = useState<UsageByAgent[]>([]);
+  const { events: realtimeEvents } = useTelemetryContext();
+  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: "",
@@ -46,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 () => {
@@ -60,16 +74,16 @@ export function TelemetryPage() {
     fetchAgents();
   }, []);
 
-  // Fetch telemetry data
+  // Fetch stats and historical data (less frequently now since we have real-time)
   const fetchData = async () => {
     setLoading(true);
     try {
       // Fetch stats
       const statsRes = await fetch("/api/telemetry/stats");
       const statsData = await statsRes.json();
-      setStats(statsData.stats);
+      setFetchedStats(statsData.stats);
 
-      // Fetch events with filters
+      // 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);
@@ -78,12 +92,16 @@ export function TelemetryPage() {
 
       const eventsRes = await fetch(`/api/telemetry/events?${params}`);
       const eventsData = await eventsRes.json();
-      setEvents(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);
     }
@@ -92,11 +110,110 @@ export function TelemetryPage() {
 
   useEffect(() => {
     fetchData();
-    // Auto-refresh every 30 seconds
-    const interval = setInterval(fetchData, 30000);
+    // Refresh stats every 60 seconds (events come in real-time)
+    const interval = setInterval(fetchData, 60000);
     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
+    let filtered = realtimeEvents;
+    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);
+    }
+    if (filter.level) {
+      filtered = filtered.filter(e => e.level === filter.level);
+    }
+
+    // Merge with historical, dedupe by ID
+    const seen = new Set(filtered.map(e => e.id));
+    const merged = [...filtered];
+    for (const evt of historicalEvents) {
+      if (!seen.has(evt.id)) {
+        merged.push(evt);
+        seen.add(evt.id);
+      }
+    }
+
+    // Sort by timestamp descending
+    merged.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+
+    return merged.slice(0, 100);
+  }, [realtimeEvents, historicalEvents, filter]);
+
   const getAgentName = (agentId: string) => {
     const agent = agents.find(a => a.id === agentId);
     return agent?.name || agentId;
@@ -249,53 +366,67 @@ export function TelemetryPage() {
 
         {/* Events List */}
         <div className="bg-[#111] border border-[#1a1a1a] rounded-lg">
-          <div className="p-3 border-b border-[#1a1a1a]">
+          <div className="p-3 border-b border-[#1a1a1a] flex items-center justify-between">
             <h2 className="font-medium">Recent Events</h2>
+            {realtimeEvents.length > 0 && (
+              <span className="text-xs text-[#666]">
+                {realtimeEvents.length} new
+              </span>
+            )}
           </div>
 
-          {loading && events.length === 0 ? (
+          {loading && allEvents.length === 0 ? (
             <div className="p-8 text-center text-[#666]">Loading...</div>
-          ) : events.length === 0 ? (
+          ) : allEvents.length === 0 ? (
             <div className="p-8 text-center text-[#666]">
-              No telemetry events yet. Events will appear here once agents start sending data.
+              No telemetry events yet. Events will appear here in real-time once agents start sending data.
             </div>
           ) : (
             <div className="divide-y divide-[#1a1a1a]">
-              {events.map((event) => (
-                <div
-                  key={event.id}
-                  className="p-3 hover:bg-[#0a0a0a] transition cursor-pointer"
-                  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]"}`}>
-                      {event.category}
-                    </span>
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium text-sm">{event.type}</span>
-                        <span className={`text-xs ${levelColors[event.level] || "text-[#666]"}`}>
-                          {event.level}
-                        </span>
-                        {event.duration_ms && (
-                          <span className="text-xs text-[#555]">{event.duration_ms}ms</span>
+              {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"
+                    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]"}`}>
+                        {event.category}
+                      </span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium text-sm">{event.type}</span>
+                          <span className={`text-xs ${levelColors[event.level] || "text-[#666]"}`}>
+                            {event.level}
+                          </span>
+                          {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" />
+                          )}
+                        </div>
+                        <div className="text-xs text-[#555] mt-1">
+                          {getAgentName(event.agent_id)} · {new Date(event.timestamp).toLocaleString()}
+                        </div>
+                        {event.error && (
+                          <div className="text-xs text-red-400 mt-1 font-mono">{event.error}</div>
+                        )}
+                        {expandedEvent === event.id && event.data && Object.keys(event.data).length > 0 && (
+                          <pre className="text-xs text-[#666] mt-2 p-2 bg-[#0a0a0a] rounded overflow-x-auto">
+                            {JSON.stringify(event.data, null, 2)}
+                          </pre>
                         )}
                       </div>
-                      <div className="text-xs text-[#555] mt-1">
-                        {getAgentName(event.agent_id)} · {new Date(event.timestamp).toLocaleString()}
-                      </div>
-                      {event.error && (
-                        <div className="text-xs text-red-400 mt-1 font-mono">{event.error}</div>
-                      )}
-                      {expandedEvent === event.id && event.data && Object.keys(event.data).length > 0 && (
-                        <pre className="text-xs text-[#666] mt-2 p-2 bg-[#0a0a0a] rounded overflow-x-auto">
-                          {JSON.stringify(event.data, null, 2)}
-                        </pre>
-                      )}
                     </div>
                   </div>
-                </div>
-              ))}
+                );
+              })}
             </div>
           )}
         </div>

package/src/web/context/TelemetryContext.tsx

@@ -0,0 +1,224 @@
+import React, { createContext, useContext, useEffect, useState, useCallback, useRef, useMemo } from "react";
+
+export interface TelemetryEvent {
+  id: string;
+  agent_id: string;
+  timestamp: string;
+  category: string;
+  type: string;
+  level: string;
+  trace_id?: string;
+  thread_id?: string;
+  data?: Record<string, unknown>;
+  duration_ms?: number;
+  error?: string;
+}
+
+interface TelemetryContextValue {
+  connected: boolean;
+  events: TelemetryEvent[];
+  lastActivityByAgent: Record<string, { timestamp: string; category: string; type: string }>;
+  activeAgents: Record<string, { type: string; expiresAt: number }>;
+  clearEvents: () => void;
+}
+
+const TelemetryContext = createContext<TelemetryContextValue | null>(null);
+
+const MAX_EVENTS = 200; // Keep last 200 events in memory
+
+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;
+    }
+
+    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;
+            });
+
+            // 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)
+        }
+      };
+
+      es.onerror = () => {
+        setConnected(false);
+        es.close();
+        eventSourceRef.current = null;
+
+        // 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, 2000);
+    }
+  }, []);
+
+  useEffect(() => {
+    connect();
+
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+      }
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+    };
+  }, [connect]);
+
+  const clearEvents = useCallback(() => {
+    setEvents([]);
+  }, []);
+
+  return (
+    <TelemetryContext.Provider value={{ connected, events, lastActivityByAgent, activeAgents, clearEvents }}>
+      {children}
+    </TelemetryContext.Provider>
+  );
+}
+
+// Hook to access all telemetry
+export function useTelemetryContext() {
+  const context = useContext(TelemetryContext);
+  if (!context) {
+    throw new Error("useTelemetryContext must be used within TelemetryProvider");
+  }
+  return context;
+}
+
+// Hook to filter telemetry for a specific agent or category
+export function useTelemetry(filter?: {
+  agent_id?: string;
+  category?: string;
+  limit?: number;
+}) {
+  const { connected, events, lastActivityByAgent } = useTelemetryContext();
+
+  const filteredEvents = React.useMemo(() => {
+    let result = events;
+
+    if (filter?.agent_id) {
+      result = result.filter(e => e.agent_id === filter.agent_id);
+    }
+    if (filter?.category) {
+      result = result.filter(e => e.category === filter.category);
+    }
+    if (filter?.limit) {
+      result = result.slice(0, filter.limit);
+    }
+
+    return result;
+  }, [events, filter?.agent_id, filter?.category, filter?.limit]);
+
+  const lastActivity = filter?.agent_id ? lastActivityByAgent[filter.agent_id] : undefined;
+
+  // Check if agent is "active" (had activity in last 10 seconds)
+  const isActive = React.useMemo(() => {
+    if (!lastActivity) return false;
+    const activityTime = new Date(lastActivity.timestamp).getTime();
+    const now = Date.now();
+    return now - activityTime < 10000; // 10 seconds
+  }, [lastActivity]);
+
+  return {
+    connected,
+    events: filteredEvents,
+    lastActivity,
+    isActive,
+  };
+}
+
+// Hook for agent activity indicator - uses context-level tracking
+export function useAgentActivity(agentId: string) {
+  const { activeAgents } = useTelemetryContext();
+  const activity = activeAgents[agentId];
+
+  return {
+    isActive: !!activity,
+    type: activity?.type,
+  };
+}

package/src/web/context/index.ts

@@ -0,0 +1,2 @@
+export { TelemetryProvider, useTelemetryContext, useTelemetry, useAgentActivity } from "./TelemetryContext";
+export type { TelemetryEvent } from "./TelemetryContext";