apteva 0.4.4 → 0.4.6

package/src/server.ts

@@ -421,7 +421,7 @@ if (hasRestarts) {
   // Restart in background to not block startup
   (async () => {
     // Import startAgentProcess dynamically to avoid circular dependency
-    const { startAgentProcess } = await import("./routes/api");
+    const { startAgentProcess } = await import("./routes/api/agent-utils");
 
     // Restart MCP servers first (agents may depend on them)
     if (mcpServersToRestart.length > 0) {

package/src/web/components/api/ApiDocsPage.tsx

@@ -51,6 +51,256 @@ const METHOD_COLORS: Record<string, string> = {
   patch: "#50e3c2",
 };
 
+// Try It Out component
+function TryItOut({
+  method,
+  path,
+  parameters,
+  requestBody,
+  authFetch,
+}: {
+  method: string;
+  path: string;
+  parameters?: Array<{
+    name: string;
+    in: string;
+    required?: boolean;
+    schema?: { type: string };
+  }>;
+  requestBody?: any;
+  authFetch: (url: string, options?: RequestInit) => Promise<Response>;
+}) {
+  const [paramValues, setParamValues] = useState<Record<string, string>>({});
+  const [bodyValue, setBodyValue] = useState("");
+  const [response, setResponse] = useState<{ status: number; data: any } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Initialize body with example if available
+  useEffect(() => {
+    if (requestBody?.content?.["application/json"]?.schema) {
+      const schema = requestBody.content["application/json"].schema;
+      if (schema.example) {
+        setBodyValue(JSON.stringify(schema.example, null, 2));
+      } else if (schema.properties) {
+        // Generate example from properties
+        const example: Record<string, any> = {};
+        for (const [key, prop] of Object.entries(schema.properties) as [string, any][]) {
+          if (prop.example !== undefined) {
+            example[key] = prop.example;
+          } else if (prop.type === "string") {
+            example[key] = "";
+          } else if (prop.type === "number" || prop.type === "integer") {
+            example[key] = 0;
+          } else if (prop.type === "boolean") {
+            example[key] = false;
+          } else if (prop.type === "array") {
+            example[key] = [];
+          } else if (prop.type === "object") {
+            example[key] = {};
+          }
+        }
+        setBodyValue(JSON.stringify(example, null, 2));
+      }
+    }
+  }, [requestBody]);
+
+  const execute = async () => {
+    setLoading(true);
+    setError(null);
+    setResponse(null);
+
+    try {
+      // Build URL with path parameters
+      let url = path;
+      const queryParams: string[] = [];
+
+      for (const param of parameters || []) {
+        const value = paramValues[param.name] || "";
+        if (param.in === "path") {
+          url = url.replace(`{${param.name}}`, encodeURIComponent(value));
+        } else if (param.in === "query" && value) {
+          queryParams.push(`${param.name}=${encodeURIComponent(value)}`);
+        }
+      }
+
+      if (queryParams.length > 0) {
+        url += `?${queryParams.join("&")}`;
+      }
+
+      const options: RequestInit = {
+        method: method.toUpperCase(),
+      };
+
+      if (bodyValue && ["post", "put", "patch"].includes(method)) {
+        options.headers = { "Content-Type": "application/json" };
+        options.body = bodyValue;
+      }
+
+      const res = await authFetch(`/api${url}`, options);
+      let data;
+      const contentType = res.headers.get("content-type");
+      if (contentType?.includes("application/json")) {
+        data = await res.json();
+      } else {
+        data = await res.text();
+      }
+
+      setResponse({ status: res.status, data });
+    } catch (err: any) {
+      setError(err.message || "Request failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const pathParams = parameters?.filter((p) => p.in === "path") || [];
+  const queryParams = parameters?.filter((p) => p.in === "query") || [];
+  const hasBody = ["post", "put", "patch"].includes(method) && requestBody;
+
+  return (
+    <div style={{ marginTop: 16, padding: 16, background: "#0a0a14", borderRadius: 6, border: "1px solid #222" }}>
+      <h4 style={{ fontSize: 13, color: "#f97316", marginBottom: 12, fontWeight: 600 }}>Try it out</h4>
+
+      {/* Path Parameters */}
+      {pathParams.length > 0 && (
+        <div style={{ marginBottom: 12 }}>
+          <div style={{ fontSize: 11, color: "#666", marginBottom: 6 }}>Path Parameters</div>
+          {pathParams.map((param) => (
+            <div key={param.name} style={{ marginBottom: 8 }}>
+              <label style={{ fontSize: 12, color: "#888", display: "block", marginBottom: 4 }}>
+                {param.name} {param.required && <span style={{ color: "#f66" }}>*</span>}
+              </label>
+              <input
+                type="text"
+                value={paramValues[param.name] || ""}
+                onChange={(e) => setParamValues({ ...paramValues, [param.name]: e.target.value })}
+                placeholder={param.schema?.type || "string"}
+                style={{
+                  width: "100%",
+                  padding: "8px 12px",
+                  background: "#111",
+                  border: "1px solid #333",
+                  borderRadius: 4,
+                  color: "#fff",
+                  fontSize: 13,
+                  fontFamily: "monospace",
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Query Parameters */}
+      {queryParams.length > 0 && (
+        <div style={{ marginBottom: 12 }}>
+          <div style={{ fontSize: 11, color: "#666", marginBottom: 6 }}>Query Parameters</div>
+          {queryParams.map((param) => (
+            <div key={param.name} style={{ marginBottom: 8 }}>
+              <label style={{ fontSize: 12, color: "#888", display: "block", marginBottom: 4 }}>
+                {param.name} {param.required && <span style={{ color: "#f66" }}>*</span>}
+              </label>
+              <input
+                type="text"
+                value={paramValues[param.name] || ""}
+                onChange={(e) => setParamValues({ ...paramValues, [param.name]: e.target.value })}
+                placeholder={param.schema?.type || "string"}
+                style={{
+                  width: "100%",
+                  padding: "8px 12px",
+                  background: "#111",
+                  border: "1px solid #333",
+                  borderRadius: 4,
+                  color: "#fff",
+                  fontSize: 13,
+                  fontFamily: "monospace",
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Request Body */}
+      {hasBody && (
+        <div style={{ marginBottom: 12 }}>
+          <div style={{ fontSize: 11, color: "#666", marginBottom: 6 }}>Request Body (JSON)</div>
+          <textarea
+            value={bodyValue}
+            onChange={(e) => setBodyValue(e.target.value)}
+            rows={6}
+            style={{
+              width: "100%",
+              padding: "8px 12px",
+              background: "#111",
+              border: "1px solid #333",
+              borderRadius: 4,
+              color: "#fff",
+              fontSize: 12,
+              fontFamily: "monospace",
+              resize: "vertical",
+            }}
+          />
+        </div>
+      )}
+
+      {/* Execute Button */}
+      <button
+        onClick={execute}
+        disabled={loading}
+        style={{
+          padding: "10px 20px",
+          background: loading ? "#333" : "#f97316",
+          color: loading ? "#666" : "#000",
+          border: "none",
+          borderRadius: 4,
+          cursor: loading ? "not-allowed" : "pointer",
+          fontSize: 13,
+          fontWeight: 600,
+        }}
+      >
+        {loading ? "Executing..." : "Execute"}
+      </button>
+
+      {/* Error */}
+      {error && (
+        <div style={{ marginTop: 12, padding: 12, background: "#2a1515", borderRadius: 4, color: "#f66", fontSize: 12 }}>
+          {error}
+        </div>
+      )}
+
+      {/* Response */}
+      {response && (
+        <div style={{ marginTop: 12 }}>
+          <div style={{ fontSize: 11, color: "#666", marginBottom: 6 }}>
+            Response{" "}
+            <span style={{ color: response.status >= 200 && response.status < 300 ? "#49cc90" : "#f66" }}>
+              {response.status}
+            </span>
+          </div>
+          <pre
+            style={{
+              padding: 12,
+              background: "#111",
+              borderRadius: 4,
+              color: "#888",
+              fontSize: 11,
+              fontFamily: "monospace",
+              overflow: "auto",
+              maxHeight: 300,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+            }}
+          >
+            {typeof response.data === "string" ? response.data : JSON.stringify(response.data, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ApiDocsPage() {
   const { authFetch } = useAuth();
   const [spec, setSpec] = useState<OpenApiSpec | null>(null);
@@ -516,6 +766,15 @@ export function ApiDocsPage() {
                           </div>
                         </div>
                       )}
+
+                      {/* Try It Out */}
+                      <TryItOut
+                        method={method}
+                        path={path}
+                        parameters={details.parameters}
+                        requestBody={details.requestBody}
+                        authFetch={authFetch}
+                      />
                     </div>
                   )}
                 </div>

package/src/web/components/dashboard/Dashboard.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { useAgentActivity, useAuth, useProjects } from "../../context";
+import { useAgentActivity, useAuth, useProjects, useTelemetryContext } from "../../context";
+import type { TelemetryEvent } from "../../context";
 import type { Agent, Provider, Route, DashboardStats, Task } from "../../types";
 
 interface DashboardProps {
@@ -21,8 +22,10 @@ export function Dashboard({
 }: DashboardProps) {
   const { authFetch } = useAuth();
   const { currentProjectId } = useProjects();
+  const { events: realtimeEvents } = useTelemetryContext();
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [recentTasks, setRecentTasks] = useState<Task[]>([]);
+  const [historicalActivities, setHistoricalActivities] = useState<TelemetryEvent[]>([]);
 
   // Filter agents by current project
   const filteredAgents = useMemo(() => {
@@ -42,9 +45,10 @@ export function Dashboard({
 
   const fetchDashboardData = useCallback(async () => {
     try {
-      const [dashRes, tasksRes] = await Promise.all([
+      const [dashRes, tasksRes, activityRes] = await Promise.all([
         authFetch("/api/dashboard"),
         authFetch("/api/tasks?status=all"),
+        authFetch("/api/telemetry/events?type=thread_activity&limit=20"),
       ]);
 
       if (dashRes.ok) {
@@ -56,6 +60,11 @@ export function Dashboard({
         const data = await tasksRes.json();
         setRecentTasks((data.tasks || []).slice(0, 5));
       }
+
+      if (activityRes.ok) {
+        const data = await activityRes.json();
+        setHistoricalActivities(data.events || []);
+      }
     } catch (e) {
       console.error("Failed to fetch dashboard data:", e);
     }
@@ -86,6 +95,36 @@ export function Dashboard({
     return { total, pending, running, completed };
   }, [stats, currentProjectId, filteredTasks]);
 
+  // Merge real-time + historical thread_activity events, deduplicate
+  const activities = useMemo(() => {
+    const realtimeActivities = realtimeEvents.filter(e => e.type === "thread_activity");
+    const seen = new Set(realtimeActivities.map(e => e.id));
+    const merged = [...realtimeActivities];
+    for (const evt of historicalActivities) {
+      if (!seen.has(evt.id)) {
+        merged.push(evt);
+        seen.add(evt.id);
+      }
+    }
+    // Filter by project
+    let filtered = merged;
+    if (currentProjectId) {
+      filtered = merged.filter(e => projectAgentIds.has(e.agent_id));
+    }
+    // Sort newest first
+    filtered.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+    return filtered.slice(0, 8);
+  }, [realtimeEvents, historicalActivities, currentProjectId, projectAgentIds]);
+
+  // Build agent name lookup
+  const agentNameMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const a of agents) {
+      map.set(a.id, a.name);
+    }
+    return map;
+  }, [agents]);
+
   return (
     <div className="flex-1 overflow-auto p-6">
       {/* Stats Cards */}
@@ -96,7 +135,7 @@ export function Dashboard({
         <StatCard label="Providers" value={configuredProviders.length} color="text-[#f97316]" />
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {/* Agents List */}
         <DashboardCard
           title="Agents"
@@ -116,6 +155,31 @@ export function Dashboard({
           )}
         </DashboardCard>
 
+        {/* Activity Feed */}
+        <DashboardCard
+          title="Activity"
+          actionLabel="Telemetry"
+          onAction={() => onNavigate("telemetry")}
+        >
+          {activities.length === 0 ? (
+            <div className="p-4 text-center text-[#666]">
+              <p>No activity yet</p>
+              <p className="text-sm text-[#444] mt-1">Agent activity will appear here in real-time</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-[#1a1a1a]">
+              {activities.map((evt) => (
+                <ActivityItem
+                  key={evt.id}
+                  activity={(evt.data?.activity as string) || "Working..."}
+                  agentName={agentNameMap.get(evt.agent_id) || evt.agent_id}
+                  timestamp={evt.timestamp}
+                />
+              ))}
+            </div>
+          )}
+        </DashboardCard>
+
         {/* Recent Tasks */}
         <DashboardCard
           title="Recent Tasks"
@@ -228,6 +292,31 @@ function AgentListItem({ agent, onSelect, showProject }: { agent: Agent; onSelec
   );
 }
 
+function timeAgo(timestamp: string): string {
+  const seconds = Math.floor((Date.now() - new Date(timestamp).getTime()) / 1000);
+  if (seconds < 5) return "just now";
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function ActivityItem({ activity, agentName, timestamp }: { activity: string; agentName: string; timestamp: string }) {
+  return (
+    <div className="px-4 py-3">
+      <p className="text-sm truncate">{activity}</p>
+      <div className="flex items-center gap-2 text-xs text-[#555] mt-1">
+        <span className="text-[#666]">{agentName}</span>
+        <span className="text-[#444]">&middot;</span>
+        <span>{timeAgo(timestamp)}</span>
+      </div>
+    </div>
+  );
+}
+
 function TaskStatusBadge({ status }: { status: Task["status"] }) {
   const colors: Record<string, string> = {
     pending: "bg-yellow-500/20 text-yellow-400",

package/src/web/components/mcp/IntegrationsPanel.tsx

@@ -44,9 +44,11 @@ function hasMultipleAuthMethods(app: IntegrationApp): boolean {
 // Main component
 export function IntegrationsPanel({
   providerId = "composio",
+  projectId,
   onConnectionComplete,
 }: {
   providerId?: string;
+  projectId?: string | null;
   onConnectionComplete?: () => void;
 }) {
   const { authFetch } = useAuth();
@@ -80,10 +82,11 @@ export function IntegrationsPanel({
   const fetchData = useCallback(async () => {
     setLoading(true);
     setError(null);
+    const projectParam = projectId && projectId !== "unassigned" ? `?project_id=${projectId}` : "";
     try {
       const [appsRes, connectedRes] = await Promise.all([
-        authFetch(`/api/integrations/${providerId}/apps`),
-        authFetch(`/api/integrations/${providerId}/connected`),
+        authFetch(`/api/integrations/${providerId}/apps${projectParam}`),
+        authFetch(`/api/integrations/${providerId}/connected${projectParam}`),
       ]);
 
       const appsData = await appsRes.json();
@@ -96,7 +99,7 @@ export function IntegrationsPanel({
       setError("Failed to load integrations");
     }
     setLoading(false);
-  }, [authFetch, providerId]);
+  }, [authFetch, providerId, projectId]);
 
   useEffect(() => {
     fetchData();
@@ -118,11 +121,12 @@ export function IntegrationsPanel({
   // Poll for pending connection status
   useEffect(() => {
     if (!pendingConnection?.connectionId) return;
+    const projectParam = projectId && projectId !== "unassigned" ? `?project_id=${projectId}` : "";
 
     const pollInterval = setInterval(async () => {
       try {
         const res = await authFetch(
-          `/api/integrations/${providerId}/connection/${pendingConnection.connectionId}`
+          `/api/integrations/${providerId}/connection/${pendingConnection.connectionId}${projectParam}`
         );
         const data = await res.json();
 
@@ -142,7 +146,7 @@ export function IntegrationsPanel({
     }, 2000);
 
     return () => clearInterval(pollInterval);
-  }, [pendingConnection, authFetch, providerId, fetchData, onConnectionComplete]);
+  }, [pendingConnection, authFetch, providerId, projectId, fetchData, onConnectionComplete]);
 
   // Initiate connection
   const connectApp = async (app: IntegrationApp, apiKey?: string, forceOAuth?: boolean) => {
@@ -172,7 +176,8 @@ export function IntegrationsPanel({
         };
       }
 
-      const res = await authFetch(`/api/integrations/${providerId}/connect`, {
+      const projectParam = projectId && projectId !== "unassigned" ? `?project_id=${projectId}` : "";
+      const res = await authFetch(`/api/integrations/${providerId}/connect${projectParam}`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body),
@@ -231,9 +236,10 @@ export function IntegrationsPanel({
 
   // Disconnect (called after confirmation)
   const disconnectApp = async (account: ConnectedAccount) => {
+    const projectParam = projectId && projectId !== "unassigned" ? `?project_id=${projectId}` : "";
     try {
       const res = await authFetch(
-        `/api/integrations/${providerId}/connection/${account.id}`,
+        `/api/integrations/${providerId}/connection/${account.id}${projectParam}`,
         { method: "DELETE" }
       );
 
@@ -263,7 +269,8 @@ export function IntegrationsPanel({
     setError(null);
 
     try {
-      const res = await authFetch(`/api/integrations/${providerId}/configs`, {
+      const projectParam = projectId && projectId !== "unassigned" ? `?project_id=${projectId}` : "";
+      const res = await authFetch(`/api/integrations/${providerId}/configs${projectParam}`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({