apteva 0.2.7 → 0.2.8

package/src/routes/auth.ts

@@ -0,0 +1,242 @@
+import { UserDB } from "../db";
+import {
+  login,
+  refreshSession,
+  invalidateSession,
+  getAuthStatus,
+  verifyAccessToken,
+  hashPassword,
+  validatePassword,
+  REFRESH_TOKEN_EXPIRY,
+} from "../auth";
+import {
+  getTokenFromRequest,
+  getRefreshTokenFromCookie,
+  createRefreshTokenCookie,
+  clearRefreshTokenCookie,
+} from "../auth/middleware";
+
+function json(data: unknown, status = 200, headers: Record<string, string> = {}): Response {
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: { "Content-Type": "application/json", ...headers },
+  });
+}
+
+export async function handleAuthRequest(req: Request, path: string): Promise<Response> {
+  const method = req.method;
+
+  // GET /api/auth/check - Check authentication status
+  if (path === "/api/auth/check" && method === "GET") {
+    const token = getTokenFromRequest(req);
+    const status = getAuthStatus(token || undefined);
+    return json(status);
+  }
+
+  // POST /api/auth/login - Login with username and password
+  if (path === "/api/auth/login" && method === "POST") {
+    try {
+      const body = await req.json();
+      const { username, password } = body;
+
+      if (!username || !password) {
+        return json({ error: "Username and password are required" }, 400);
+      }
+
+      const result = await login(username, password);
+
+      if (!result.success) {
+        return json({ error: result.error }, 401);
+      }
+
+      // Set refresh token as httpOnly cookie
+      const cookieHeader = createRefreshTokenCookie(result.tokens!.refreshToken, REFRESH_TOKEN_EXPIRY);
+
+      return json(
+        {
+          user: result.user,
+          accessToken: result.tokens!.accessToken,
+          expiresIn: result.tokens!.expiresIn,
+        },
+        200,
+        { "Set-Cookie": cookieHeader }
+      );
+    } catch (e) {
+      return json({ error: "Invalid request body" }, 400);
+    }
+  }
+
+  // POST /api/auth/logout - Logout (invalidate refresh token)
+  if (path === "/api/auth/logout" && method === "POST") {
+    const refreshToken = getRefreshTokenFromCookie(req);
+
+    if (refreshToken) {
+      invalidateSession(refreshToken);
+    }
+
+    // Clear the cookie
+    return json(
+      { success: true },
+      200,
+      { "Set-Cookie": clearRefreshTokenCookie() }
+    );
+  }
+
+  // POST /api/auth/refresh - Refresh access token
+  if (path === "/api/auth/refresh" && method === "POST") {
+    // No users = no valid sessions possible
+    if (!UserDB.hasUsers()) {
+      return json({ error: "No users exist" }, 401, { "Set-Cookie": clearRefreshTokenCookie() });
+    }
+
+    const refreshToken = getRefreshTokenFromCookie(req);
+
+    if (!refreshToken) {
+      return json({ error: "No refresh token" }, 401);
+    }
+
+    const result = await refreshSession(refreshToken);
+
+    if (!result) {
+      return json(
+        { error: "Invalid or expired refresh token" },
+        401,
+        { "Set-Cookie": clearRefreshTokenCookie() }
+      );
+    }
+
+    // Set new refresh token cookie
+    const cookieHeader = createRefreshTokenCookie(result.refreshToken, REFRESH_TOKEN_EXPIRY);
+
+    return json(
+      {
+        accessToken: result.accessToken,
+        expiresIn: result.expiresIn,
+      },
+      200,
+      { "Set-Cookie": cookieHeader }
+    );
+  }
+
+  // GET /api/auth/me - Get current user
+  if (path === "/api/auth/me" && method === "GET") {
+    const token = getTokenFromRequest(req);
+
+    if (!token) {
+      return json({ error: "Unauthorized" }, 401);
+    }
+
+    const payload = verifyAccessToken(token);
+    if (!payload) {
+      return json({ error: "Invalid or expired token" }, 401);
+    }
+
+    const user = UserDB.findById(payload.userId);
+    if (!user) {
+      return json({ error: "User not found" }, 404);
+    }
+
+    return json({
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+        role: user.role,
+        createdAt: user.created_at,
+        lastLoginAt: user.last_login_at,
+      },
+    });
+  }
+
+  // PUT /api/auth/me - Update current user profile
+  if (path === "/api/auth/me" && method === "PUT") {
+    const token = getTokenFromRequest(req);
+
+    if (!token) {
+      return json({ error: "Unauthorized" }, 401);
+    }
+
+    const payload = verifyAccessToken(token);
+    if (!payload) {
+      return json({ error: "Invalid or expired token" }, 401);
+    }
+
+    const user = UserDB.findById(payload.userId);
+    if (!user) {
+      return json({ error: "User not found" }, 404);
+    }
+
+    try {
+      const body = await req.json();
+      const updates: Parameters<typeof UserDB.update>[1] = {};
+
+      if (body.email !== undefined) updates.email = body.email;
+
+      const updated = UserDB.update(user.id, updates);
+
+      return json({
+        user: updated ? {
+          id: updated.id,
+          username: updated.username,
+          email: updated.email,
+          role: updated.role,
+          createdAt: updated.created_at,
+          lastLoginAt: updated.last_login_at,
+        } : null,
+      });
+    } catch (e) {
+      return json({ error: "Invalid request body" }, 400);
+    }
+  }
+
+  // PUT /api/auth/password - Change password
+  if (path === "/api/auth/password" && method === "PUT") {
+    const token = getTokenFromRequest(req);
+
+    if (!token) {
+      return json({ error: "Unauthorized" }, 401);
+    }
+
+    const payload = verifyAccessToken(token);
+    if (!payload) {
+      return json({ error: "Invalid or expired token" }, 401);
+    }
+
+    const user = UserDB.findById(payload.userId);
+    if (!user) {
+      return json({ error: "User not found" }, 404);
+    }
+
+    try {
+      const body = await req.json();
+      const { currentPassword, newPassword } = body;
+
+      if (!currentPassword || !newPassword) {
+        return json({ error: "Current and new password are required" }, 400);
+      }
+
+      // Verify current password
+      const { verifyPassword } = await import("../auth");
+      const isValid = await verifyPassword(currentPassword, user.password_hash);
+      if (!isValid) {
+        return json({ error: "Current password is incorrect" }, 401);
+      }
+
+      // Validate new password
+      const validation = validatePassword(newPassword);
+      if (!validation.valid) {
+        return json({ error: validation.errors.join(". ") }, 400);
+      }
+
+      // Update password
+      const newHash = await hashPassword(newPassword);
+      UserDB.update(user.id, { password_hash: newHash });
+
+      return json({ success: true, message: "Password updated successfully" });
+    } catch (e) {
+      return json({ error: "Invalid request body" }, 400);
+    }
+  }
+
+  return json({ error: "Not found" }, 404);
+}

package/src/server.ts

@@ -1,10 +1,12 @@
 import { type Server, type Subprocess } from "bun";
 import { handleApiRequest } from "./routes/api";
+import { handleAuthRequest } from "./routes/auth";
 import { serveStatic } from "./routes/static";
 import { join } from "path";
 import { homedir } from "os";
 import { mkdirSync, existsSync } from "fs";
 import { initDatabase, AgentDB, ProviderKeysDB, McpServerDB, type McpServer, type Agent } from "./db";
+import { authMiddleware, type AuthContext } from "./auth/middleware";
 import { startMcpProcess } from "./mcp-client";
 import {
   ensureBinary,
@@ -215,11 +217,23 @@ const server = Bun.serve({
     const url = new URL(req.url);
     const path = url.pathname;
 
-    // CORS headers
+    // Dev mode route logging
+    if (process.env.NODE_ENV !== "production" && path.startsWith("/api/")) {
+      const params = url.search ? url.search : "";
+      console.log(`[${req.method}] ${path}${params}`);
+    }
+
+    // CORS headers - configurable origins
+    const origin = req.headers.get("Origin") || "";
+    const allowedOrigins = process.env.CORS_ORIGINS?.split(",") || [];
+    const isLocalhost = origin.includes("localhost") || origin.includes("127.0.0.1");
+    const allowOrigin = allowedOrigins.includes(origin) || isLocalhost || allowedOrigins.length === 0 ? origin || "*" : "";
+
     const corsHeaders = {
-      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Origin": allowOrigin,
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
-      "Access-Control-Allow-Headers": "Content-Type",
+      "Access-Control-Allow-Headers": "Content-Type, Authorization",
+      "Access-Control-Allow-Credentials": "true",
     };
 
     // Handle preflight
@@ -229,8 +243,35 @@ const server = Bun.serve({
 
     // API routes
     if (path.startsWith("/api/")) {
-      const response = await handleApiRequest(req, path);
-      // Add CORS headers to response
+      // Auth routes handled separately (before middleware)
+      if (path.startsWith("/api/auth/")) {
+        const response = await handleAuthRequest(req, path);
+        Object.entries(corsHeaders).forEach(([key, value]) => {
+          response.headers.set(key, value);
+        });
+        return response;
+      }
+
+      // Health check endpoint (no auth required for Docker health checks)
+      if (path === "/api/health") {
+        const response = await handleApiRequest(req, path);
+        Object.entries(corsHeaders).forEach(([key, value]) => {
+          response.headers.set(key, value);
+        });
+        return response;
+      }
+
+      // Apply auth middleware
+      const { response: authResponse, context } = await authMiddleware(req, path);
+      if (authResponse) {
+        Object.entries(corsHeaders).forEach(([key, value]) => {
+          authResponse.headers.set(key, value);
+        });
+        return authResponse;
+      }
+
+      // Pass auth context to API handler
+      const response = await handleApiRequest(req, path, context);
       Object.entries(corsHeaders).forEach(([key, value]) => {
         response.headers.set(key, value);
       });

package/src/web/App.tsx

@@ -7,7 +7,7 @@ import type { Agent, Provider, Route, NewAgentForm } from "./types";
 import { DEFAULT_FEATURES } from "./types";
 
 // Context
-import { TelemetryProvider } from "./context";
+import { TelemetryProvider, AuthProvider, ProjectProvider, useAuth, useProjects } from "./context";
 
 // Hooks
 import { useAgents, useProviders, useOnboarding } from "./hooks";
@@ -26,13 +26,25 @@ import {
   TasksPage,
   McpPage,
   TelemetryPage,
+  LoginPage,
 } from "./components";
 
-function App() {
+function AppContent() {
+  // Auth state
+  const { isAuthenticated, isLoading: authLoading, hasUsers, accessToken, checkAuth } = useAuth();
+  const { refreshProjects } = useProjects();
+
   // Onboarding state
   const { isComplete: onboardingComplete, setIsComplete: setOnboardingComplete } = useOnboarding();
 
-  // Data hooks
+  // Helper to get auth headers
+  const getAuthHeaders = (): Record<string, string> => {
+    return accessToken ? { Authorization: `Bearer ${accessToken}` } : {};
+  };
+
+  // Data hooks - only fetch when authenticated and onboarding complete
+  const shouldFetchData = isAuthenticated && onboardingComplete === true;
+
   const {
     agents,
     loading,
@@ -42,13 +54,13 @@ function App() {
     updateAgent,
     deleteAgent,
     toggleAgent,
-  } = useAgents(onboardingComplete === true);
+  } = useAgents(shouldFetchData);
 
   const {
     providers,
     configuredProviders,
     fetchProviders,
-  } = useProviders(onboardingComplete === true);
+  } = useProviders(shouldFetchData);
 
   // UI state
   const [showCreate, setShowCreate] = useState(false);
@@ -56,14 +68,15 @@ function App() {
   const [route, setRoute] = useState<Route>("dashboard");
   const [startError, setStartError] = useState<string | null>(null);
   const [taskCount, setTaskCount] = useState(0);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   // Fetch task count periodically
   useEffect(() => {
-    if (onboardingComplete !== true) return;
+    if (!shouldFetchData) return;
 
     const fetchTaskCount = async () => {
       try {
-        const res = await fetch("/api/tasks?status=pending");
+        const res = await fetch("/api/tasks?status=pending", { headers: getAuthHeaders() });
         if (res.ok) {
           const data = await res.json();
           setTaskCount(data.count || 0);
@@ -76,7 +89,7 @@ function App() {
     fetchTaskCount();
     const interval = setInterval(fetchTaskCount, 15000);
     return () => clearInterval(interval);
-  }, [onboardingComplete]);
+  }, [shouldFetchData, accessToken]);
 
   // Form state
   const [newAgent, setNewAgent] = useState<NewAgentForm>({
@@ -125,6 +138,7 @@ function App() {
   const handleCreateAgent = async () => {
     if (!newAgent.name) return;
     await createAgent(newAgent);
+    await refreshProjects(); // Refresh project agent counts
     const defaultProvider = configuredProviders[0];
     const defaultModel = defaultProvider?.models.find(m => m.recommended)?.value || defaultProvider?.models[0]?.value || "";
     setNewAgent({
@@ -152,6 +166,7 @@ function App() {
       setSelectedAgent(null);
     }
     await deleteAgent(id);
+    await refreshProjects(); // Refresh project agent counts
   };
 
   const handleSelectAgent = (agent: Agent) => {
@@ -168,24 +183,38 @@ function App() {
   const handleOnboardingComplete = () => {
     setOnboardingComplete(true);
     fetchProviders();
+    // Refresh auth to pick up new state
+    checkAuth();
   };
 
+  // Show loading while checking auth
+  if (authLoading || hasUsers === null) {
+    return <LoadingSpinner fullScreen />;
+  }
+
+  // No users exist - show onboarding with account creation
+  if (!hasUsers) {
+    return <OnboardingWizard onComplete={handleOnboardingComplete} needsAccount={true} />;
+  }
+
+  // Users exist but not authenticated - show login
+  if (!isAuthenticated) {
+    return <LoginPage />;
+  }
+
   // Show loading while checking onboarding
   if (onboardingComplete === null) {
     return <LoadingSpinner fullScreen />;
   }
 
-  // Show onboarding if not complete
+  // Show onboarding if not complete (but already has account)
   if (!onboardingComplete) {
-    return <OnboardingWizard onComplete={handleOnboardingComplete} />;
+    return <OnboardingWizard onComplete={handleOnboardingComplete} needsAccount={false} />;
   }
 
   return (
     <div className="h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono flex flex-col overflow-hidden">
-      <Header
-        onNewAgent={() => setShowCreate(true)}
-        canCreateAgent={configuredProviders.length > 0}
-      />
+      <Header onMenuClick={() => setMobileMenuOpen(true)} />
 
       {startError && (
         <ErrorBanner message={startError} onDismiss={() => setStartError(null)} />
@@ -197,6 +226,8 @@ function App() {
           agentCount={agents.length}
           taskCount={taskCount}
           onNavigate={handleNavigate}
+          isOpen={mobileMenuOpen}
+          onClose={() => setMobileMenuOpen(false)}
         />
 
         <main className="flex-1 overflow-hidden flex">
@@ -213,6 +244,8 @@ function App() {
               onToggleAgent={handleToggleAgent}
               onDeleteAgent={handleDeleteAgent}
               onUpdateAgent={updateAgent}
+              onNewAgent={() => setShowCreate(true)}
+              canCreateAgent={configuredProviders.length > 0}
             />
           )}
 
@@ -254,10 +287,19 @@ function App() {
   );
 }
 
+// Wrapper component that provides all contexts
+function App() {
+  return (
+    <AuthProvider>
+      <ProjectProvider>
+        <TelemetryProvider>
+          <AppContent />
+        </TelemetryProvider>
+      </ProjectProvider>
+    </AuthProvider>
+  );
+}
+
 // Mount the app
 const root = createRoot(document.getElementById("root")!);
-root.render(
-  <TelemetryProvider>
-    <App />
-  </TelemetryProvider>
-);
+root.render(<App />);

package/src/web/components/agents/AgentCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon } from "../common/Icons";
-import { useAgentActivity } from "../../context";
+import { MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, FilesIcon, MultiAgentIcon } from "../common/Icons";
+import { useAgentActivity, useProjects } from "../../context";
 import type { Agent, AgentFeatures } from "../../types";
 
 interface AgentCardProps {
@@ -8,22 +8,26 @@ interface AgentCardProps {
   selected: boolean;
   onSelect: () => void;
   onToggle: (e?: React.MouseEvent) => void;
-  onDelete: (e?: React.MouseEvent) => void;
+  showProject?: boolean;
 }
 
 const FEATURE_ICONS: { key: keyof AgentFeatures; icon: React.ComponentType<{ className?: string }>; label: string }[] = [
   { key: "memory", icon: MemoryIcon, label: "Memory" },
   { key: "tasks", icon: TasksIcon, label: "Tasks" },
+  { key: "files", icon: FilesIcon, label: "Files" },
   { key: "vision", icon: VisionIcon, label: "Vision" },
   { key: "operator", icon: OperatorIcon, label: "Operator" },
   { key: "mcp", icon: McpIcon, label: "MCP" },
   { key: "realtime", icon: RealtimeIcon, label: "Realtime" },
+  { key: "agents", icon: MultiAgentIcon, label: "Multi-Agent" },
 ];
 
-export function AgentCard({ agent, selected, onSelect, onToggle, onDelete }: AgentCardProps) {
+export function AgentCard({ agent, selected, onSelect, onToggle, showProject }: AgentCardProps) {
   const enabledFeatures = FEATURE_ICONS.filter(f => agent.features?.[f.key]);
   const mcpServers = agent.mcpServerDetails || [];
   const { isActive, type } = useAgentActivity(agent.id);
+  const { projects } = useProjects();
+  const project = agent.projectId ? projects.find(p => p.id === agent.projectId) : null;
 
   return (
     <div
@@ -41,6 +45,12 @@ export function AgentCard({ agent, selected, onSelect, onToggle, onDelete }: Age
             {agent.provider} / {agent.model}
             {agent.port && <span className="text-[#444]"> · :{agent.port}</span>}
           </p>
+          {showProject && project && (
+            <p className="text-sm text-[#666] flex items-center gap-1.5 mt-1">
+              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: project.color }} />
+              {project.name}
+            </p>
+          )}
         </div>
         <StatusBadge status={agent.status} isActive={isActive && agent.status === "running"} activityType={type} />
       </div>
@@ -84,24 +94,16 @@ export function AgentCard({ agent, selected, onSelect, onToggle, onDelete }: Age
         {agent.systemPrompt}
       </p>
 
-      <div className="flex gap-2">
-        <button
-          onClick={onToggle}
-          className={`flex-1 px-3 py-1.5 rounded text-sm font-medium transition ${
-            agent.status === "running"
-              ? "bg-[#f97316]/20 text-[#f97316] hover:bg-[#f97316]/30"
-              : "bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30"
-          }`}
-        >
-          {agent.status === "running" ? "Stop" : "Start"}
-        </button>
-        <button
-          onClick={onDelete}
-          className="px-3 py-1.5 rounded text-sm font-medium bg-red-500/20 text-red-400 hover:bg-red-500/30 transition"
-        >
-          Delete
-        </button>
-      </div>
+      <button
+        onClick={onToggle}
+        className={`w-full px-3 py-1.5 rounded text-sm font-medium transition ${
+          agent.status === "running"
+            ? "bg-[#f97316]/20 text-[#f97316] hover:bg-[#f97316]/30"
+            : "bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30"
+        }`}
+      >
+        {agent.status === "running" ? "Stop" : "Start"}
+      </button>
     </div>
   );
 }