apteva 0.2.3 → 0.2.5

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

@@ -0,0 +1,316 @@
+import React, { useState, useEffect } from "react";
+import { Select } from "../common/Select";
+
+interface TelemetryStats {
+  total_events: number;
+  total_llm_calls: number;
+  total_tool_calls: number;
+  total_errors: number;
+  total_input_tokens: number;
+  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;
+  output_tokens: number;
+  llm_calls: number;
+  tool_calls: number;
+  errors: number;
+}
+
+export function TelemetryPage() {
+  const [stats, setStats] = useState<TelemetryStats | null>(null);
+  const [events, setEvents] = useState<TelemetryEvent[]>([]);
+  const [usage, setUsage] = useState<UsageByAgent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState({
+    category: "",
+    level: "",
+    agent_id: "",
+  });
+  const [agents, setAgents] = useState<Array<{ id: string; name: string }>>([]);
+  const [expandedEvent, setExpandedEvent] = useState<string | null>(null);
+
+  // Fetch agents for dropdown
+  useEffect(() => {
+    const fetchAgents = async () => {
+      try {
+        const res = await fetch("/api/agents");
+        const data = await res.json();
+        setAgents(data.agents || []);
+      } catch (e) {
+        console.error("Failed to fetch agents:", e);
+      }
+    };
+    fetchAgents();
+  }, []);
+
+  // Fetch telemetry data
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      // Fetch stats
+      const statsRes = await fetch("/api/telemetry/stats");
+      const statsData = await statsRes.json();
+      setStats(statsData.stats);
+
+      // Fetch 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");
+
+      const eventsRes = await fetch(`/api/telemetry/events?${params}`);
+      const eventsData = await eventsRes.json();
+      setEvents(eventsData.events || []);
+
+      // Fetch usage by agent
+      const usageRes = await fetch("/api/telemetry/usage?group_by=agent");
+      const usageData = await usageRes.json();
+      setUsage(usageData.usage || []);
+    } catch (e) {
+      console.error("Failed to fetch telemetry:", e);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    fetchData();
+    // Auto-refresh every 30 seconds
+    const interval = setInterval(fetchData, 30000);
+    return () => clearInterval(interval);
+  }, [filter]);
+
+  const getAgentName = (agentId: string) => {
+    const agent = agents.find(a => a.id === agentId);
+    return agent?.name || agentId;
+  };
+
+  const formatNumber = (n: number) => {
+    if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
+    if (n >= 1000) return (n / 1000).toFixed(1) + "K";
+    return n.toString();
+  };
+
+  const levelColors: Record<string, string> = {
+    debug: "text-[#555]",
+    info: "text-blue-400",
+    warn: "text-yellow-400",
+    error: "text-red-400",
+  };
+
+  const categoryColors: Record<string, string> = {
+    LLM: "bg-purple-500/20 text-purple-400 border-purple-500/30",
+    TOOL: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+    CHAT: "bg-green-500/20 text-green-400 border-green-500/30",
+    ERROR: "bg-red-500/20 text-red-400 border-red-500/30",
+    SYSTEM: "bg-gray-500/20 text-gray-400 border-gray-500/30",
+    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",
+  };
+
+  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" },
+  ];
+
+  const levelOptions = [
+    { value: "", label: "All Levels" },
+    { value: "debug", label: "Debug" },
+    { value: "info", label: "Info" },
+    { value: "warn", label: "Warn" },
+    { value: "error", label: "Error" },
+  ];
+
+  return (
+    <div className="flex-1 overflow-auto p-6">
+      <div className="max-w-6xl">
+        {/* Header */}
+        <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 */}
+        {stats && (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
+            <StatCard label="Events" value={formatNumber(stats.total_events)} />
+            <StatCard label="LLM Calls" value={formatNumber(stats.total_llm_calls)} />
+            <StatCard label="Tool Calls" value={formatNumber(stats.total_tool_calls)} />
+            <StatCard label="Errors" value={formatNumber(stats.total_errors)} color="red" />
+            <StatCard label="Input Tokens" value={formatNumber(stats.total_input_tokens)} />
+            <StatCard label="Output Tokens" value={formatNumber(stats.total_output_tokens)} />
+          </div>
+        )}
+
+        {/* Usage by Agent */}
+        {usage.length > 0 && (
+          <div className="mb-6">
+            <h2 className="text-lg font-medium mb-3">Usage by Agent</h2>
+            <div className="bg-[#111] border border-[#1a1a1a] rounded-lg overflow-hidden">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-[#1a1a1a] text-[#666]">
+                    <th className="text-left p-3">Agent</th>
+                    <th className="text-right p-3">LLM Calls</th>
+                    <th className="text-right p-3">Tool Calls</th>
+                    <th className="text-right p-3">Input Tokens</th>
+                    <th className="text-right p-3">Output Tokens</th>
+                    <th className="text-right p-3">Errors</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {usage.map((u) => (
+                    <tr key={u.agent_id} className="border-b border-[#1a1a1a] last:border-0">
+                      <td className="p-3 font-medium">{getAgentName(u.agent_id)}</td>
+                      <td className="p-3 text-right text-[#888]">{formatNumber(u.llm_calls)}</td>
+                      <td className="p-3 text-right text-[#888]">{formatNumber(u.tool_calls)}</td>
+                      <td className="p-3 text-right text-[#888]">{formatNumber(u.input_tokens)}</td>
+                      <td className="p-3 text-right text-[#888]">{formatNumber(u.output_tokens)}</td>
+                      <td className="p-3 text-right">
+                        {u.errors > 0 ? (
+                          <span className="text-red-400">{u.errors}</span>
+                        ) : (
+                          <span className="text-[#444]">0</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* Filters */}
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-56">
+            <Select
+              value={filter.agent_id}
+              options={agentOptions}
+              onChange={(value) => setFilter({ ...filter, agent_id: value })}
+              placeholder="All Agents"
+            />
+          </div>
+          <div className="w-48">
+            <Select
+              value={filter.category}
+              options={categoryOptions}
+              onChange={(value) => setFilter({ ...filter, category: value })}
+              placeholder="All Categories"
+            />
+          </div>
+          <div className="w-40">
+            <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>
+
+        {/* Events List */}
+        <div className="bg-[#111] border border-[#1a1a1a] rounded-lg">
+          <div className="p-3 border-b border-[#1a1a1a]">
+            <h2 className="font-medium">Recent Events</h2>
+          </div>
+
+          {loading && events.length === 0 ? (
+            <div className="p-8 text-center text-[#666]">Loading...</div>
+          ) : events.length === 0 ? (
+            <div className="p-8 text-center text-[#666]">
+              No telemetry events yet. Events will appear here 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>
+                        )}
+                      </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>
+      </div>
+    </div>
+  );
+}
+
+function StatCard({ label, value, color }: { label: string; value: string; color?: string }) {
+  return (
+    <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+      <div className="text-[#666] text-xs mb-1">{label}</div>
+      <div className={`text-2xl font-semibold ${color === "red" ? "text-red-400" : ""}`}>
+        {value}
+      </div>
+    </div>
+  );
+}

package/src/web/hooks/useAgents.ts

@@ -24,6 +24,7 @@ export function useAgents(enabled: boolean) {
     provider: string;
     systemPrompt: string;
     features: AgentFeatures;
+    mcpServers?: string[];
   }) => {
     await fetch("/api/agents", {
       method: "POST",
@@ -38,6 +39,27 @@ export function useAgents(enabled: boolean) {
     await fetchAgents();
   };
 
+  const updateAgent = async (id: string, updates: {
+    name?: string;
+    model?: string;
+    provider?: string;
+    systemPrompt?: string;
+    features?: AgentFeatures;
+    mcpServers?: string[];
+  }): Promise<{ error?: string }> => {
+    const res = await fetch(`/api/agents/${id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(updates),
+    });
+    const data = await res.json();
+    await fetchAgents();
+    if (!res.ok && data.error) {
+      return { error: data.error };
+    }
+    return {};
+  };
+
   const toggleAgent = async (agent: Agent): Promise<{ error?: string }> => {
     const action = agent.status === "running" ? "stop" : "start";
     const res = await fetch(`/api/agents/${agent.id}/${action}`, { method: "POST" });
@@ -57,6 +79,7 @@ export function useAgents(enabled: boolean) {
     runningCount,
     fetchAgents,
     createAgent,
+    updateAgent,
     deleteAgent,
     toggleAgent,
   };

package/src/web/styles.css

@@ -10,6 +10,15 @@ html, body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Hide scrollbars globally but allow scrolling */
+* {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+*::-webkit-scrollbar {
+  display: none;
+}
+
 ::selection {
   background-color: #f97316;
   color: #0a0a0a;
@@ -21,3 +30,12 @@ html, body {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+
+/* Hide scrollbar but allow scrolling */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}

package/src/web/types.ts

@@ -18,6 +18,14 @@ export const DEFAULT_FEATURES: AgentFeatures = {
   realtime: false,
 };
 
+export interface McpServerSummary {
+  id: string;
+  name: string;
+  type: string;
+  status: "stopped" | "running";
+  port: number | null;
+}
+
 export interface Agent {
   id: string;
   name: string;
@@ -27,9 +35,37 @@ export interface Agent {
   status: "stopped" | "running";
   port?: number;
   features: AgentFeatures;
+  mcpServers: string[]; // Array of MCP server IDs
+  mcpServerDetails?: McpServerSummary[]; // Full details included from API
   createdAt: string;
 }
 
+export interface McpServer {
+  id: string;
+  name: string;
+  type: "npm" | "github" | "http" | "custom";
+  package: string | null;
+  command: string | null;
+  port: number | null;
+  status: "stopped" | "running";
+}
+
+export interface McpTool {
+  name: string;
+  description?: string;
+  inputSchema: Record<string, unknown>;
+}
+
+export interface McpToolCallResult {
+  content: Array<{
+    type: "text" | "image" | "resource";
+    text?: string;
+    data?: string;
+    mimeType?: string;
+  }>;
+  isError?: boolean;
+}
+
 export interface ProviderModel {
   value: string;
   label: string;
@@ -39,11 +75,14 @@ export interface ProviderModel {
 export interface Provider {
   id: string;
   name: string;
+  type: "llm" | "integration";
   docsUrl: string;
+  description?: string;
   models: ProviderModel[];
   hasKey: boolean;
   keyHint: string | null;
   isValid: boolean | null;
+  configured?: boolean; // for backwards compatibility
 }
 
 export interface OnboardingStatus {
@@ -52,7 +91,41 @@ export interface OnboardingStatus {
   has_any_keys: boolean;
 }
 
-export type Route = "dashboard" | "agents" | "settings";
+export type Route = "dashboard" | "agents" | "tasks" | "mcp" | "telemetry" | "settings";
+
+export interface Task {
+  id: string;
+  title: string;
+  description?: string;
+  type: "once" | "recurring";
+  status: "pending" | "running" | "completed" | "failed" | "cancelled";
+  priority: number;
+  source: "local" | "delegated";
+  created_at: string;
+  execute_at?: string;
+  executed_at?: string;
+  recurrence?: string;
+  next_run?: string;
+  result?: any;
+  agentId: string;
+  agentName: string;
+}
+
+export interface DashboardStats {
+  agents: {
+    total: number;
+    running: number;
+  };
+  tasks: {
+    total: number;
+    pending: number;
+    running: number;
+    completed: number;
+  };
+  providers: {
+    configured: number;
+  };
+}
 
 export interface NewAgentForm {
   name: string;
@@ -60,4 +133,5 @@ export interface NewAgentForm {
   provider: string;
   systemPrompt: string;
   features: AgentFeatures;
+  mcpServers: string[];
 }