apteva 0.2.7 → 0.2.9

package/src/web/context/ProjectContext.tsx

@@ -0,0 +1,182 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import { useAuth } from "./AuthContext";
+
+export interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  color: string;
+  agentCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface ProjectContextValue {
+  projects: Project[];
+  currentProjectId: string | null; // null = "All Projects", "unassigned" = unassigned agents
+  currentProject: Project | null;
+  isLoading: boolean;
+  error: string | null;
+  unassignedCount: number;
+  setCurrentProjectId: (id: string | null) => void;
+  createProject: (data: { name: string; description?: string; color?: string }) => Promise<Project | null>;
+  updateProject: (id: string, data: { name?: string; description?: string; color?: string }) => Promise<Project | null>;
+  deleteProject: (id: string) => Promise<boolean>;
+  refreshProjects: () => Promise<void>;
+}
+
+const ProjectContext = createContext<ProjectContextValue | null>(null);
+
+export function useProjects(): ProjectContextValue {
+  const context = useContext(ProjectContext);
+  if (!context) {
+    throw new Error("useProjects must be used within a ProjectProvider");
+  }
+  return context;
+}
+
+interface ProjectProviderProps {
+  children: ReactNode;
+}
+
+const STORAGE_KEY = "apteva_current_project";
+
+export function ProjectProvider({ children }: ProjectProviderProps) {
+  const { authFetch, isAuthenticated, isLoading: authLoading } = useAuth();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [currentProjectId, setCurrentProjectIdState] = useState<string | null>(() => {
+    // Load from localStorage
+    if (typeof window !== "undefined") {
+      return localStorage.getItem(STORAGE_KEY);
+    }
+    return null;
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [unassignedCount, setUnassignedCount] = useState(0);
+
+  const setCurrentProjectId = useCallback((id: string | null) => {
+    setCurrentProjectIdState(id);
+    if (typeof window !== "undefined") {
+      if (id === null) {
+        localStorage.removeItem(STORAGE_KEY);
+      } else {
+        localStorage.setItem(STORAGE_KEY, id);
+      }
+    }
+  }, []);
+
+  const currentProject = projects.find(p => p.id === currentProjectId) || null;
+
+  const refreshProjects = useCallback(async () => {
+    if (!isAuthenticated && !authLoading) {
+      setProjects([]);
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      setError(null);
+      const res = await authFetch("/api/projects");
+      if (!res.ok) {
+        throw new Error("Failed to fetch projects");
+      }
+      const data = await res.json();
+      setProjects(data.projects || []);
+      setUnassignedCount(data.unassignedCount || 0);
+
+      // If current project no longer exists, reset to all
+      if (currentProjectId && currentProjectId !== "unassigned" && !data.projects.find((p: Project) => p.id === currentProjectId)) {
+        setCurrentProjectId(null);
+      }
+    } catch (e) {
+      console.error("Failed to fetch projects:", e);
+      setError("Failed to load projects");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [authFetch, isAuthenticated, authLoading, currentProjectId, setCurrentProjectId]);
+
+  const createProject = useCallback(async (data: { name: string; description?: string; color?: string }): Promise<Project | null> => {
+    try {
+      const res = await authFetch("/api/projects", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "Failed to create project");
+      }
+      const result = await res.json();
+      await refreshProjects();
+      return result.project;
+    } catch (e) {
+      console.error("Failed to create project:", e);
+      return null;
+    }
+  }, [authFetch, refreshProjects]);
+
+  const updateProject = useCallback(async (id: string, data: { name?: string; description?: string; color?: string }): Promise<Project | null> => {
+    try {
+      const res = await authFetch(`/api/projects/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "Failed to update project");
+      }
+      const result = await res.json();
+      await refreshProjects();
+      return result.project;
+    } catch (e) {
+      console.error("Failed to update project:", e);
+      return null;
+    }
+  }, [authFetch, refreshProjects]);
+
+  const deleteProject = useCallback(async (id: string): Promise<boolean> => {
+    try {
+      const res = await authFetch(`/api/projects/${id}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "Failed to delete project");
+      }
+      if (currentProjectId === id) {
+        setCurrentProjectId(null);
+      }
+      await refreshProjects();
+      return true;
+    } catch (e) {
+      console.error("Failed to delete project:", e);
+      return false;
+    }
+  }, [authFetch, currentProjectId, setCurrentProjectId, refreshProjects]);
+
+  // Fetch projects when authenticated
+  useEffect(() => {
+    if (!authLoading) {
+      refreshProjects();
+    }
+  }, [authLoading, refreshProjects]);
+
+  const value: ProjectContextValue = {
+    projects,
+    currentProjectId,
+    currentProject,
+    isLoading,
+    error,
+    unassignedCount,
+    setCurrentProjectId,
+    createProject,
+    updateProject,
+    deleteProject,
+    refreshProjects,
+  };
+
+  return <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>;
+}

package/src/web/context/index.ts

@@ -1,2 +1,7 @@
 export { TelemetryProvider, useTelemetryContext, useTelemetry, useAgentActivity } from "./TelemetryContext";
 export type { TelemetryEvent } from "./TelemetryContext";
+
+export { AuthProvider, useAuth, useAuthHeaders } from "./AuthContext";
+
+export { ProjectProvider, useProjects } from "./ProjectContext";
+export type { Project } from "./ProjectContext";

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/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>apteva</title>
+  <title>Apteva</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">

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;
 }
 
@@ -46,8 +51,11 @@ export interface McpServer {
   type: "npm" | "github" | "http" | "custom";
   package: string | null;
   command: string | null;
+  url: string | null;
+  headers: Record<string, string>;
   port: number | null;
   status: "stopped" | "running";
+  source: string | null; // "composio", "smithery", or null for local
 }
 
 export interface McpTool {
@@ -91,7 +99,7 @@ export interface OnboardingStatus {
   has_any_keys: boolean;
 }
 
-export type Route = "dashboard" | "agents" | "tasks" | "mcp" | "telemetry" | "settings";
+export type Route = "dashboard" | "agents" | "tasks" | "mcp" | "telemetry" | "settings" | "api";
 
 export interface Task {
   id: string;
@@ -134,4 +142,5 @@ export interface NewAgentForm {
   systemPrompt: string;
   features: AgentFeatures;
   mcpServers: string[];
+  projectId?: string | null;
 }