apteva 0.2.7 → 0.2.9

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, ApiIcon, SettingsIcon, CloseIcon } from "../common/Icons";
 import type { Route } from "../../types";
 
 interface SidebarProps {
@@ -7,52 +7,96 @@ 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={<ApiIcon />}
+            label="API"
+            active={route === "api"}
+            onClick={() => handleNavigate("api")}
+          />
+          <NavButton
+            icon={<SettingsIcon />}
+            label="Settings"
+            active={route === "settings"}
+            onClick={() => handleNavigate("settings")}
+          />
+        </nav>
+      </aside>
+    </>
   );
 }