apteva 0.2.7 → 0.2.8

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"

package/src/web/components/index.ts

@@ -4,6 +4,9 @@ export { LoadingSpinner, Modal, Select, CheckIcon, CloseIcon, DashboardIcon, Age
 // Layout components
 export { Header, Sidebar, ErrorBanner } from "./layout";
 
+// Auth components
+export { LoginPage, CreateAccountStep } from "./auth";
+
 // Feature components
 export { OnboardingWizard } from "./onboarding";
 export { SettingsPage } from "./settings";

package/src/web/components/layout/Header.tsx

@@ -1,37 +1,154 @@
-import React from "react";
-import { useTelemetryContext } from "../../context";
+import React, { useState } from "react";
+import { useTelemetryContext, useAuth, useProjects } from "../../context";
+import { MenuIcon, ChevronDownIcon } from "../common/Icons";
 
 interface HeaderProps {
-  onNewAgent: () => void;
-  canCreateAgent: boolean;
+  onMenuClick?: () => void;
 }
 
-export function Header({ onNewAgent, canCreateAgent }: HeaderProps) {
+export function Header({ onMenuClick }: HeaderProps) {
   const { connected } = useTelemetryContext();
+  const { user, logout } = useAuth();
+  const { projects, currentProjectId, currentProject, setCurrentProjectId, unassignedCount } = useProjects();
+  const [showUserMenu, setShowUserMenu] = useState(false);
+  const [showProjectMenu, setShowProjectMenu] = useState(false);
+
+  const handleLogout = async () => {
+    await logout();
+    setShowUserMenu(false);
+  };
+
+  const handleProjectSelect = (projectId: string | null) => {
+    setCurrentProjectId(projectId);
+    setShowProjectMenu(false);
+  };
+
+  const getProjectLabel = () => {
+    if (currentProjectId === null) return "All Projects";
+    if (currentProjectId === "unassigned") return "Unassigned";
+    return currentProject?.name || "Select Project";
+  };
+
+  const getProjectColor = () => {
+    if (currentProjectId === null) return "#666";
+    if (currentProjectId === "unassigned") return "#888";
+    return currentProject?.color || "#6366f1";
+  };
 
   return (
-    <header className="border-b border-[#1a1a1a] px-6 py-4 flex-shrink-0">
+    <header className="border-b border-[#1a1a1a] px-4 md:px-6 py-4 flex-shrink-0">
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <span className="text-[#f97316]">&gt;_</span>
-          <span className="text-xl tracking-wider">apteva</span>
+        <div className="flex items-center gap-3">
+          {/* Hamburger menu button - mobile only */}
+          <button
+            onClick={onMenuClick}
+            className="p-2 -ml-2 text-[#666] hover:text-[#e0e0e0] transition md:hidden"
+          >
+            <MenuIcon />
+          </button>
+          <div className="flex items-center gap-2">
+            <span className="text-[#f97316]">&gt;_</span>
+            <span className="text-xl tracking-wider">apteva</span>
+          </div>
+
+          {/* Project Selector */}
+          {projects.length > 0 && (
+            <div className="relative ml-2 md:ml-4">
+              <button
+                onClick={() => setShowProjectMenu(!showProjectMenu)}
+                className="flex items-center gap-2 px-3 py-1.5 rounded border border-[#222] bg-[#111] hover:bg-[#1a1a1a] transition text-sm"
+              >
+                <span
+                  className="w-2.5 h-2.5 rounded-full"
+                  style={{ backgroundColor: getProjectColor() }}
+                />
+                <span className="hidden sm:inline max-w-[120px] md:max-w-[180px] truncate">
+                  {getProjectLabel()}
+                </span>
+                <ChevronDownIcon />
+              </button>
+              {showProjectMenu && (
+                <div className="absolute left-0 top-full mt-1 w-56 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50">
+                  <div className="py-1 max-h-64 overflow-y-auto">
+                    <button
+                      onClick={() => handleProjectSelect(null)}
+                      className={`w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-[#1a1a1a] transition ${
+                        currentProjectId === null ? "bg-[#1a1a1a] text-[#f97316]" : ""
+                      }`}
+                    >
+                      <span className="w-2.5 h-2.5 rounded-full bg-[#666]" />
+                      All Projects
+                    </button>
+                    {projects.map(project => (
+                      <button
+                        key={project.id}
+                        onClick={() => handleProjectSelect(project.id)}
+                        className={`w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-[#1a1a1a] transition ${
+                          currentProjectId === project.id ? "bg-[#1a1a1a] text-[#f97316]" : ""
+                        }`}
+                      >
+                        <span
+                          className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+                          style={{ backgroundColor: project.color }}
+                        />
+                        <span className="truncate">{project.name}</span>
+                        <span className="ml-auto text-xs text-[#666]">{project.agentCount}</span>
+                      </button>
+                    ))}
+                    {unassignedCount > 0 && (
+                      <button
+                        onClick={() => handleProjectSelect("unassigned")}
+                        className={`w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-[#1a1a1a] transition ${
+                          currentProjectId === "unassigned" ? "bg-[#1a1a1a] text-[#f97316]" : ""
+                        }`}
+                      >
+                        <span className="w-2.5 h-2.5 rounded-full bg-[#888]" />
+                        <span className="truncate">Unassigned</span>
+                        <span className="ml-auto text-xs text-[#666]">{unassignedCount}</span>
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3 md:gap-4">
           <div className="flex items-center gap-2">
             <span
               className={`w-2 h-2 rounded-full ${connected ? "bg-green-400" : "bg-red-400"}`}
             />
-            <span className="text-xs text-[#666]">
+            <span className="text-xs text-[#666] hidden sm:inline">
               {connected ? "Live" : "Offline"}
             </span>
           </div>
-          <button
-            onClick={onNewAgent}
-            disabled={!canCreateAgent}
-            className="bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-2 rounded font-medium transition"
-          >
-            + New Agent
-          </button>
+          {user && (
+            <div className="relative">
+              <button
+                onClick={() => setShowUserMenu(!showUserMenu)}
+                className="flex items-center gap-2 px-2 md:px-3 py-2 rounded hover:bg-[#1a1a1a] transition"
+              >
+                <div className="w-8 h-8 rounded-full bg-[#f97316] flex items-center justify-center text-black font-medium text-sm">
+                  {user.username.charAt(0).toUpperCase()}
+                </div>
+                <span className="text-sm text-[#888] hidden sm:block">{user.username}</span>
+              </button>
+              {showUserMenu && (
+                <div className="absolute right-0 top-full mt-1 w-48 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50">
+                  <div className="px-4 py-3 border-b border-[#222]">
+                    <p className="text-sm font-medium">{user.username}</p>
+                    <p className="text-xs text-[#f97316] mt-1">{user.role}</p>
+                  </div>
+                  <button
+                    onClick={handleLogout}
+                    className="w-full px-4 py-2 text-left text-sm text-red-400 hover:bg-[#1a1a1a] transition"
+                  >
+                    Sign out
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </header>

package/src/web/components/layout/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DashboardIcon, AgentsIcon, TasksIcon, McpIcon, TelemetryIcon, SettingsIcon } from "../common/Icons";
+import { DashboardIcon, AgentsIcon, TasksIcon, McpIcon, TelemetryIcon, SettingsIcon, CloseIcon } from "../common/Icons";
 import type { Route } from "../../types";
 
 interface SidebarProps {
@@ -7,52 +7,90 @@ interface SidebarProps {
   agentCount: number;
   taskCount?: number;
   onNavigate: (route: Route) => void;
+  isOpen?: boolean;
+  onClose?: () => void;
 }
 
-export function Sidebar({ route, agentCount, taskCount, onNavigate }: SidebarProps) {
+export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onClose }: SidebarProps) {
+  const handleNavigate = (newRoute: Route) => {
+    onNavigate(newRoute);
+    onClose?.();
+  };
+
   return (
-    <aside className="w-56 border-r border-[#1a1a1a] flex-shrink-0 p-4">
-      <nav className="space-y-1">
-        <NavButton
-          icon={<DashboardIcon />}
-          label="Dashboard"
-          active={route === "dashboard"}
-          onClick={() => onNavigate("dashboard")}
-        />
-        <NavButton
-          icon={<AgentsIcon />}
-          label="Agents"
-          active={route === "agents"}
-          onClick={() => onNavigate("agents")}
-          badge={agentCount > 0 ? String(agentCount) : undefined}
-        />
-        <NavButton
-          icon={<TasksIcon />}
-          label="Tasks"
-          active={route === "tasks"}
-          onClick={() => onNavigate("tasks")}
-          badge={taskCount && taskCount > 0 ? String(taskCount) : undefined}
-        />
-        <NavButton
-          icon={<McpIcon />}
-          label="MCP"
-          active={route === "mcp"}
-          onClick={() => onNavigate("mcp")}
-        />
-        <NavButton
-          icon={<TelemetryIcon />}
-          label="Telemetry"
-          active={route === "telemetry"}
-          onClick={() => onNavigate("telemetry")}
+    <>
+      {/* Mobile overlay backdrop */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/60 z-40 md:hidden"
+          onClick={onClose}
         />
-        <NavButton
-          icon={<SettingsIcon />}
-          label="Settings"
-          active={route === "settings"}
-          onClick={() => onNavigate("settings")}
-        />
-      </nav>
-    </aside>
+      )}
+
+      {/* Sidebar - hidden on mobile unless open, always visible on md+ */}
+      <aside
+        className={`
+          fixed inset-y-0 left-0 z-50 w-64 bg-[#0a0a0a] border-r border-[#1a1a1a] p-4 transform transition-transform duration-200 ease-in-out
+          md:relative md:w-56 md:translate-x-0 md:z-auto
+          ${isOpen ? "translate-x-0" : "-translate-x-full"}
+        `}
+      >
+        {/* Mobile header with close button */}
+        <div className="flex items-center justify-between mb-4 md:hidden">
+          <div className="flex items-center gap-2">
+            <span className="text-[#f97316]">&gt;_</span>
+            <span className="text-lg tracking-wider">apteva</span>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-[#666] hover:text-[#e0e0e0] transition"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+
+        <nav className="space-y-1">
+          <NavButton
+            icon={<DashboardIcon />}
+            label="Dashboard"
+            active={route === "dashboard"}
+            onClick={() => handleNavigate("dashboard")}
+          />
+          <NavButton
+            icon={<AgentsIcon />}
+            label="Agents"
+            active={route === "agents"}
+            onClick={() => handleNavigate("agents")}
+            badge={agentCount > 0 ? String(agentCount) : undefined}
+          />
+          <NavButton
+            icon={<TasksIcon />}
+            label="Tasks"
+            active={route === "tasks"}
+            onClick={() => handleNavigate("tasks")}
+            badge={taskCount && taskCount > 0 ? String(taskCount) : undefined}
+          />
+          <NavButton
+            icon={<McpIcon />}
+            label="MCP"
+            active={route === "mcp"}
+            onClick={() => handleNavigate("mcp")}
+          />
+          <NavButton
+            icon={<TelemetryIcon />}
+            label="Telemetry"
+            active={route === "telemetry"}
+            onClick={() => handleNavigate("telemetry")}
+          />
+          <NavButton
+            icon={<SettingsIcon />}
+            label="Settings"
+            active={route === "settings"}
+            onClick={() => handleNavigate("settings")}
+          />
+        </nav>
+      </aside>
+    </>
   );
 }