apteva 0.2.7 → 0.2.9

package/src/web/components/auth/CreateAccountStep.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from "react";
+
+interface CreateAccountStepProps {
+  onComplete: (user: { username: string }) => void;
+}
+
+export function CreateAccountStep({ onComplete }: CreateAccountStepProps) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [email, setEmail] = useState("");
+  const [showEmail, setShowEmail] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate passwords match
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/onboarding/user", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username,
+          password,
+          ...(email && { email }), // Only include if provided
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || "Failed to create account");
+        setLoading(false);
+        return;
+      }
+
+      // Auto-login after account creation
+      const loginRes = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ username, password }),
+      });
+
+      if (!loginRes.ok) {
+        setError("Account created but login failed. Please try logging in.");
+        setLoading(false);
+        return;
+      }
+
+      const loginData = await loginRes.json();
+
+      // Store token for subsequent requests
+      if (loginData.accessToken) {
+        sessionStorage.setItem("accessToken", loginData.accessToken);
+      }
+
+      onComplete({ username });
+    } catch (e) {
+      setError("Failed to create account");
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <h2 className="text-2xl font-semibold mb-2">Create your account</h2>
+      <p className="text-[#666] mb-6">
+        Set up your admin account to get started with apteva.
+      </p>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="username" className="block text-sm text-[#888] mb-1">
+            Username
+          </label>
+          <input
+            id="username"
+            type="text"
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+            placeholder="Choose a username"
+            autoFocus
+            required
+            className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+          />
+          <p className="text-xs text-[#666] mt-1">3-20 characters, letters, numbers, underscore</p>
+        </div>
+
+        <div>
+          <label htmlFor="password" className="block text-sm text-[#888] mb-1">
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            placeholder="Enter a password"
+            required
+            className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+          />
+          <p className="text-xs text-[#666] mt-1">Min 8 characters, uppercase, lowercase, number</p>
+        </div>
+
+        <div>
+          <label htmlFor="confirmPassword" className="block text-sm text-[#888] mb-1">
+            Confirm Password
+          </label>
+          <input
+            id="confirmPassword"
+            type="password"
+            value={confirmPassword}
+            onChange={e => setConfirmPassword(e.target.value)}
+            placeholder="Confirm your password"
+            required
+            className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+          />
+        </div>
+
+        {!showEmail ? (
+          <button
+            type="button"
+            onClick={() => setShowEmail(true)}
+            className="text-sm text-[#666] hover:text-[#888] transition"
+          >
+            + Add email for password recovery (optional)
+          </button>
+        ) : (
+          <div>
+            <label htmlFor="email" className="block text-sm text-[#888] mb-1">
+              Email <span className="text-[#666]">(optional)</span>
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              placeholder="For password recovery only"
+              className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+            />
+            <p className="text-xs text-[#666] mt-1">Only used for password recovery, never shared</p>
+          </div>
+        )}
+
+        {error && (
+          <div className="p-3 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm">
+            {error}
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading || !username || !password || !confirmPassword}
+          className="w-full bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-3 rounded font-medium transition"
+        >
+          {loading ? "Creating account..." : "Create Account"}
+        </button>
+      </form>
+
+      <p className="text-xs text-[#666] mt-4 text-center">
+        This will be your admin account with full access to apteva.
+      </p>
+    </>
+  );
+}

package/src/web/components/auth/LoginPage.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { useAuth } from "../../context/AuthContext";
+
+export function LoginPage() {
+  const { login } = useAuth();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const result = await login(username, password);
+
+    if (!result.success) {
+      setError(result.error || "Login failed");
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono flex items-center justify-center p-8">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <div className="flex items-center justify-center gap-2 mb-2">
+            <span className="text-[#f97316] text-3xl">&gt;_</span>
+            <span className="text-3xl tracking-wider">apteva</span>
+          </div>
+          <p className="text-[#666]">Run AI agents locally</p>
+        </div>
+
+        <div className="bg-[#111] rounded-lg border border-[#1a1a1a] p-8">
+          <h2 className="text-2xl font-semibold mb-2">Welcome back</h2>
+          <p className="text-[#666] mb-6">Sign in to continue to apteva</p>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="username" className="block text-sm text-[#888] mb-1">
+                Username
+              </label>
+              <input
+                id="username"
+                type="text"
+                value={username}
+                onChange={e => setUsername(e.target.value)}
+                placeholder="Enter your username"
+                autoFocus
+                required
+                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm text-[#888] mb-1">
+                Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                placeholder="Enter your password"
+                required
+                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316]"
+              />
+            </div>
+
+            {error && (
+              <div className="p-3 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm">
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading || !username || !password}
+              className="w-full bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-3 rounded font-medium transition"
+            >
+              {loading ? "Signing in..." : "Sign In"}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/web/components/auth/index.ts

@@ -0,0 +1,2 @@
+export { LoginPage } from "./LoginPage";
+export { CreateAccountStep } from "./CreateAccountStep";

package/src/web/components/common/Icons.tsx

@@ -117,3 +117,59 @@ export function TelemetryIcon({ className = "w-4 h-4" }: IconProps) {
     </svg>
   );
 }
+
+export function ApiIcon({ className = "w-4 h-4" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+    </svg>
+  );
+}
+
+export function FilesIcon({ className = "w-4 h-4" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+    </svg>
+  );
+}
+
+export function MultiAgentIcon({ className = "w-4 h-4" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+    </svg>
+  );
+}
+
+export function MenuIcon({ className = "w-5 h-5" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+  );
+}
+
+export function ChevronDownIcon({ className = "w-4 h-4" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+}
+
+export function FolderIcon({ className = "w-4 h-4" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+    </svg>
+  );
+}
+
+export function PlusIcon({ className = "w-4 h-4" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+    </svg>
+  );
+}

package/src/web/components/common/Modal.tsx

@@ -8,9 +8,192 @@ interface ModalProps {
 export function Modal({ children, onClose }: ModalProps) {
   return (
     <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
-      <div className="bg-[#111] rounded p-6 w-full max-w-xl border border-[#1a1a1a] max-h-[90vh] overflow-y-auto">
+      <div className="bg-[#111] rounded p-6 w-full max-w-xl lg:max-w-2xl border border-[#1a1a1a] max-h-[90vh] overflow-y-auto">
         {children}
       </div>
     </div>
   );
 }
+
+// Confirmation Modal - replaces browser confirm()
+interface ConfirmModalProps {
+  title?: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  confirmVariant?: "danger" | "primary";
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmModal({
+  title,
+  message,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  confirmVariant = "danger",
+  onConfirm,
+  onCancel,
+}: ConfirmModalProps) {
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-sm">
+        {title && <h3 className="font-medium mb-2">{title}</h3>}
+        <p className="text-sm text-[#ccc] mb-4">{message}</p>
+        <div className="flex gap-2">
+          <button
+            onClick={onCancel}
+            className="flex-1 text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+          >
+            {cancelText}
+          </button>
+          <button
+            onClick={onConfirm}
+            className={`flex-1 text-sm text-white px-4 py-2 rounded transition ${
+              confirmVariant === "danger"
+                ? "bg-red-500 hover:bg-red-600"
+                : "bg-[#f97316] hover:bg-[#ea580c]"
+            }`}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Alert Modal - replaces browser alert()
+interface AlertModalProps {
+  title?: string;
+  message: string;
+  buttonText?: string;
+  variant?: "error" | "success" | "info";
+  onClose: () => void;
+}
+
+export function AlertModal({
+  title,
+  message,
+  buttonText = "OK",
+  variant = "info",
+  onClose,
+}: AlertModalProps) {
+  const iconColors = {
+    error: "bg-red-500/20 text-red-400",
+    success: "bg-green-500/20 text-green-400",
+    info: "bg-blue-500/20 text-blue-400",
+  };
+
+  const icons = {
+    error: "✕",
+    success: "✓",
+    info: "ℹ",
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-sm text-center">
+        <div
+          className={`w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 ${iconColors[variant]}`}
+        >
+          <span className="text-xl">{icons[variant]}</span>
+        </div>
+        {title && <h3 className="font-medium mb-2">{title}</h3>}
+        <p className="text-sm text-[#ccc] mb-4">{message}</p>
+        <button
+          onClick={onClose}
+          className="w-full text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+        >
+          {buttonText}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Hook for using confirmation dialogs
+import { useState, useCallback } from "react";
+
+interface UseConfirmOptions {
+  title?: string;
+  confirmText?: string;
+  cancelText?: string;
+  confirmVariant?: "danger" | "primary";
+}
+
+export function useConfirm() {
+  const [state, setState] = useState<{
+    message: string;
+    options: UseConfirmOptions;
+    resolve: (value: boolean) => void;
+  } | null>(null);
+
+  const confirm = useCallback((message: string, options: UseConfirmOptions = {}) => {
+    return new Promise<boolean>((resolve) => {
+      setState({ message, options, resolve });
+    });
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    state?.resolve(true);
+    setState(null);
+  }, [state]);
+
+  const handleCancel = useCallback(() => {
+    state?.resolve(false);
+    setState(null);
+  }, [state]);
+
+  const ConfirmDialog = state ? (
+    <ConfirmModal
+      title={state.options.title}
+      message={state.message}
+      confirmText={state.options.confirmText}
+      cancelText={state.options.cancelText}
+      confirmVariant={state.options.confirmVariant}
+      onConfirm={handleConfirm}
+      onCancel={handleCancel}
+    />
+  ) : null;
+
+  return { confirm, ConfirmDialog };
+}
+
+// Hook for using alert dialogs
+interface UseAlertOptions {
+  title?: string;
+  buttonText?: string;
+  variant?: "error" | "success" | "info";
+}
+
+export function useAlert() {
+  const [state, setState] = useState<{
+    message: string;
+    options: UseAlertOptions;
+    resolve: () => void;
+  } | null>(null);
+
+  const alert = useCallback((message: string, options: UseAlertOptions = {}) => {
+    return new Promise<void>((resolve) => {
+      setState({ message, options, resolve });
+    });
+  }, []);
+
+  const handleClose = useCallback(() => {
+    state?.resolve();
+    setState(null);
+  }, [state]);
+
+  const AlertDialog = state ? (
+    <AlertModal
+      title={state.options.title}
+      message={state.message}
+      buttonText={state.options.buttonText}
+      variant={state.options.variant}
+      onClose={handleClose}
+    />
+  ) : null;
+
+  return { alert, AlertDialog };
+}

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

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { useAgentActivity } from "../../context";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { useAgentActivity, useAuth, useProjects } from "../../context";
 import type { Agent, Provider, Route, DashboardStats, Task } from "../../types";
 
 interface DashboardProps {
@@ -19,20 +19,32 @@ export function Dashboard({
   onNavigate,
   onSelectAgent,
 }: DashboardProps) {
+  const { authFetch } = useAuth();
+  const { currentProjectId } = useProjects();
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [recentTasks, setRecentTasks] = useState<Task[]>([]);
 
-  useEffect(() => {
-    fetchDashboardData();
-    const interval = setInterval(fetchDashboardData, 10000);
-    return () => clearInterval(interval);
-  }, []);
+  // Filter agents by current project
+  const filteredAgents = useMemo(() => {
+    if (!currentProjectId) return agents; // "All Projects"
+    if (currentProjectId === "unassigned") return agents.filter(a => !a.projectId);
+    return agents.filter(a => a.projectId === currentProjectId);
+  }, [agents, currentProjectId]);
 
-  const fetchDashboardData = async () => {
+  const filteredRunningCount = useMemo(() => {
+    return filteredAgents.filter(a => a.status === "running").length;
+  }, [filteredAgents]);
+
+  // Get agent IDs for filtering tasks
+  const projectAgentIds = useMemo(() => {
+    return new Set(filteredAgents.map(a => a.id));
+  }, [filteredAgents]);
+
+  const fetchDashboardData = useCallback(async () => {
     try {
       const [dashRes, tasksRes] = await Promise.all([
-        fetch("/api/dashboard"),
-        fetch("/api/tasks?status=all"),
+        authFetch("/api/dashboard"),
+        authFetch("/api/tasks?status=all"),
       ]);
 
       if (dashRes.ok) {
@@ -47,15 +59,38 @@ export function Dashboard({
     } catch (e) {
       console.error("Failed to fetch dashboard data:", e);
     }
-  };
+  }, [authFetch]);
 
-  const taskStats = stats?.tasks || { total: 0, pending: 0, running: 0, completed: 0 };
+  useEffect(() => {
+    fetchDashboardData();
+    const interval = setInterval(fetchDashboardData, 10000);
+    return () => clearInterval(interval);
+  }, [fetchDashboardData]);
+
+  // Filter tasks by project agents
+  const filteredTasks = useMemo(() => {
+    if (!currentProjectId) return recentTasks;
+    return recentTasks.filter(t => projectAgentIds.has(t.agentId));
+  }, [recentTasks, currentProjectId, projectAgentIds]);
+
+  // Calculate task stats from filtered tasks
+  const taskStats = useMemo(() => {
+    if (!currentProjectId) {
+      return stats?.tasks || { total: 0, pending: 0, running: 0, completed: 0 };
+    }
+    // When filtering by project, calculate from filtered tasks
+    const total = filteredTasks.length;
+    const pending = filteredTasks.filter(t => t.status === "pending").length;
+    const running = filteredTasks.filter(t => t.status === "running").length;
+    const completed = filteredTasks.filter(t => t.status === "completed").length;
+    return { total, pending, running, completed };
+  }, [stats, currentProjectId, filteredTasks]);
 
   return (
     <div className="flex-1 overflow-auto p-6">
       {/* Stats Cards */}
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
-        <StatCard label="Agents" value={agents.length} subValue={`${runningCount} running`} />
+        <StatCard label="Agents" value={filteredAgents.length} subValue={`${filteredRunningCount} running`} />
         <StatCard label="Tasks" value={taskStats.total} subValue={`${taskStats.pending} pending`} />
         <StatCard label="Completed" value={taskStats.completed} color="text-green-400" />
         <StatCard label="Providers" value={configuredProviders.length} color="text-[#f97316]" />
@@ -70,12 +105,12 @@ export function Dashboard({
         >
           {loading ? (
             <div className="p-4 text-center text-[#666]">Loading...</div>
-          ) : agents.length === 0 ? (
+          ) : filteredAgents.length === 0 ? (
             <div className="p-4 text-center text-[#666]">No agents yet</div>
           ) : (
             <div className="divide-y divide-[#1a1a1a]">
-              {agents.slice(0, 5).map((agent) => (
-                <AgentListItem key={agent.id} agent={agent} onSelect={() => onSelectAgent(agent)} />
+              {filteredAgents.slice(0, 5).map((agent) => (
+                <AgentListItem key={agent.id} agent={agent} onSelect={() => onSelectAgent(agent)} showProject={!currentProjectId} />
               ))}
             </div>
           )}
@@ -87,14 +122,14 @@ export function Dashboard({
           actionLabel="View All"
           onAction={() => onNavigate("tasks")}
         >
-          {recentTasks.length === 0 ? (
+          {filteredTasks.length === 0 ? (
             <div className="p-4 text-center text-[#666]">
               <p>No tasks yet</p>
               <p className="text-sm text-[#444] mt-1">Tasks will appear when agents create them</p>
             </div>
           ) : (
             <div className="divide-y divide-[#1a1a1a]">
-              {recentTasks.map((task) => (
+              {filteredTasks.map((task) => (
                 <div
                   key={`${task.agentId}-${task.id}`}
                   className="px-4 py-3 flex items-center justify-between"
@@ -155,20 +190,33 @@ function DashboardCard({ title, actionLabel, onAction, children }: DashboardCard
   );
 }
 
-function AgentListItem({ agent, onSelect }: { agent: Agent; onSelect: () => void }) {
+function AgentListItem({ agent, onSelect, showProject }: { agent: Agent; onSelect: () => void; showProject?: boolean }) {
   const { isActive } = useAgentActivity(agent.id);
+  const { projects } = useProjects();
+  const project = agent.projectId ? projects.find(p => p.id === agent.projectId) : null;
 
   return (
     <div
       onClick={onSelect}
       className="px-4 py-3 hover:bg-[#1a1a1a] cursor-pointer flex items-center justify-between"
     >
-      <div>
+      <div className="flex-1 min-w-0">
         <p className="font-medium">{agent.name}</p>
-        <p className="text-sm text-[#666]">{agent.provider}</p>
+        <div className="flex items-center gap-2 text-sm text-[#666]">
+          <span>{agent.provider}</span>
+          {showProject && project && (
+            <>
+              <span className="text-[#444]">·</span>
+              <span className="flex items-center gap-1">
+                <span className="w-2 h-2 rounded-full" style={{ backgroundColor: project.color }} />
+                {project.name}
+              </span>
+            </>
+          )}
+        </div>
       </div>
       <span
-        className={`w-2 h-2 rounded-full ${
+        className={`w-2 h-2 rounded-full flex-shrink-0 ${
           agent.status === "running"
             ? isActive
               ? "bg-green-400 animate-pulse"