apteva 0.2.6 → 0.2.8

package/src/web/hooks/useAgents.ts

@@ -1,16 +1,26 @@
 import { useState, useEffect, useCallback } from "react";
 import type { Agent, AgentFeatures } from "../types";
+import { useAuth } from "../context";
 
 export function useAgents(enabled: boolean) {
+  const { accessToken } = useAuth();
   const [agents, setAgents] = useState<Agent[]>([]);
   const [loading, setLoading] = useState(true);
 
+  const getHeaders = useCallback((): Record<string, string> => {
+    const headers: Record<string, string> = { "Content-Type": "application/json" };
+    if (accessToken) {
+      headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return headers;
+  }, [accessToken]);
+
   const fetchAgents = useCallback(async () => {
-    const res = await fetch("/api/agents");
+    const res = await fetch("/api/agents", { headers: getHeaders() });
     const data = await res.json();
     setAgents(data.agents || []);
     setLoading(false);
-  }, []);
+  }, [getHeaders]);
 
   useEffect(() => {
     if (enabled) {
@@ -25,17 +35,18 @@ export function useAgents(enabled: boolean) {
     systemPrompt: string;
     features: AgentFeatures;
     mcpServers?: string[];
+    projectId?: string | null;
   }) => {
     await fetch("/api/agents", {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: getHeaders(),
       body: JSON.stringify(agent),
     });
     await fetchAgents();
   };
 
   const deleteAgent = async (id: string) => {
-    await fetch(`/api/agents/${id}`, { method: "DELETE" });
+    await fetch(`/api/agents/${id}`, { method: "DELETE", headers: getHeaders() });
     await fetchAgents();
   };
 
@@ -46,10 +57,11 @@ export function useAgents(enabled: boolean) {
     systemPrompt?: string;
     features?: AgentFeatures;
     mcpServers?: string[];
+    projectId?: string | null;
   }): Promise<{ error?: string }> => {
     const res = await fetch(`/api/agents/${id}`, {
       method: "PUT",
-      headers: { "Content-Type": "application/json" },
+      headers: getHeaders(),
       body: JSON.stringify(updates),
     });
     const data = await res.json();
@@ -62,7 +74,7 @@ export function useAgents(enabled: boolean) {
 
   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" });
+    const res = await fetch(`/api/agents/${agent.id}/${action}`, { method: "POST", headers: getHeaders() });
     const data = await res.json();
     await fetchAgents();
     if (!res.ok && data.error) {

package/src/web/hooks/useOnboarding.ts

@@ -1,21 +1,37 @@
 import { useState, useEffect, useCallback } from "react";
+import { useAuth } from "../context";
 
 export function useOnboarding() {
+  const { accessToken, isAuthenticated } = useAuth();
   const [isComplete, setIsComplete] = useState<boolean | null>(null);
 
+  const getHeaders = useCallback((): Record<string, string> => {
+    const headers: Record<string, string> = {};
+    if (accessToken) {
+      headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return headers;
+  }, [accessToken]);
+
   useEffect(() => {
-    fetch("/api/onboarding/status")
+    // Only check onboarding status when authenticated
+    if (!isAuthenticated) {
+      setIsComplete(null);
+      return;
+    }
+
+    fetch("/api/onboarding/status", { headers: getHeaders() })
       .then(res => res.json())
       .then(data => {
         setIsComplete(data.completed || data.has_any_keys);
       })
       .catch(() => setIsComplete(true)); // Fallback to showing app
-  }, []);
+  }, [isAuthenticated, getHeaders]);
 
   const complete = useCallback(async () => {
-    await fetch("/api/onboarding/complete", { method: "POST" });
+    await fetch("/api/onboarding/complete", { method: "POST", headers: getHeaders() });
     setIsComplete(true);
-  }, []);
+  }, [getHeaders]);
 
   return {
     isComplete,

package/src/web/hooks/useProviders.ts

@@ -1,14 +1,24 @@
 import { useState, useEffect, useCallback } from "react";
 import type { Provider } from "../types";
+import { useAuth } from "../context";
 
 export function useProviders(enabled: boolean) {
+  const { accessToken } = useAuth();
   const [providers, setProviders] = useState<Provider[]>([]);
 
+  const getHeaders = useCallback((): Record<string, string> => {
+    const headers: Record<string, string> = { "Content-Type": "application/json" };
+    if (accessToken) {
+      headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return headers;
+  }, [accessToken]);
+
   const fetchProviders = useCallback(async () => {
-    const res = await fetch("/api/providers");
+    const res = await fetch("/api/providers", { headers: getHeaders() });
     const data = await res.json();
     setProviders(data.providers || []);
-  }, []);
+  }, [getHeaders]);
 
   useEffect(() => {
     if (enabled) {
@@ -25,7 +35,7 @@ export function useProviders(enabled: boolean) {
     // First test the key
     const testRes = await fetch(`/api/keys/${providerId}/test`, {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: getHeaders(),
       body: JSON.stringify({ key: apiKey }),
     });
     const testData = await testRes.json();
@@ -37,7 +47,7 @@ export function useProviders(enabled: boolean) {
     // Save the key
     const saveRes = await fetch(`/api/keys/${providerId}`, {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: getHeaders(),
       body: JSON.stringify({ key: apiKey }),
     });
 
@@ -51,7 +61,7 @@ export function useProviders(enabled: boolean) {
   };
 
   const deleteKey = async (providerId: string) => {
-    await fetch(`/api/keys/${providerId}`, { method: "DELETE" });
+    await fetch(`/api/keys/${providerId}`, { method: "DELETE", headers: getHeaders() });
     await fetchProviders();
   };
 

package/src/web/styles.css

@@ -39,3 +39,15 @@ html, body {
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }
+
+/* Telemetry event slide-in animation */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/web/types.ts

@@ -7,6 +7,8 @@ export interface AgentFeatures {
   operator: boolean;
   mcp: boolean;
   realtime: boolean;
+  files: boolean;
+  agents: boolean;
 }
 
 export const DEFAULT_FEATURES: AgentFeatures = {
@@ -16,6 +18,8 @@ export const DEFAULT_FEATURES: AgentFeatures = {
   operator: false,
   mcp: false,
   realtime: false,
+  files: false,
+  agents: false,
 };
 
 export interface McpServerSummary {
@@ -37,6 +41,7 @@ export interface Agent {
   features: AgentFeatures;
   mcpServers: string[]; // Array of MCP server IDs
   mcpServerDetails?: McpServerSummary[]; // Full details included from API
+  projectId: string | null; // Optional project grouping
   createdAt: string;
 }
 
@@ -134,4 +139,5 @@ export interface NewAgentForm {
   systemPrompt: string;
   features: AgentFeatures;
   mcpServers: string[];
+  projectId?: string | null;
 }