apteva 0.2.7 → 0.2.8

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

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { AgentCard } from "./AgentCard";
 import { AgentPanel } from "./AgentPanel";
 import { LoadingSpinner } from "../common/LoadingSpinner";
+import { useProjects } from "../../context";
 import type { Agent, Provider } from "../../types";
 
 interface AgentsViewProps {
@@ -14,6 +15,8 @@ interface AgentsViewProps {
   onToggleAgent: (agent: Agent, e?: React.MouseEvent) => void;
   onDeleteAgent: (id: string, e?: React.MouseEvent) => void;
   onUpdateAgent: (id: string, updates: Partial<Agent>) => Promise<{ error?: string }>;
+  onNewAgent?: () => void;
+  canCreateAgent?: boolean;
 }
 
 export function AgentsView({
@@ -26,25 +29,76 @@ export function AgentsView({
   onToggleAgent,
   onDeleteAgent,
   onUpdateAgent,
+  onNewAgent,
+  canCreateAgent = true,
 }: AgentsViewProps) {
+  const { currentProjectId, currentProject } = useProjects();
+
+  // Filter agents by current project
+  const filteredAgents = useMemo(() => {
+    if (currentProjectId === null) {
+      // "All Projects" - show all agents
+      return agents;
+    }
+    if (currentProjectId === "unassigned") {
+      // Show only agents without a project
+      return agents.filter(a => !a.projectId);
+    }
+    // Show only agents in the selected project
+    return agents.filter(a => a.projectId === currentProjectId);
+  }, [agents, currentProjectId]);
+
+  const headerTitle = currentProjectId === null
+    ? "Agents"
+    : currentProjectId === "unassigned"
+    ? "Unassigned Agents"
+    : currentProject?.name || "Agents";
+
   return (
     <div className="flex-1 flex overflow-hidden relative">
       {/* Agents list */}
       <div className="flex-1 overflow-auto p-6">
+        {/* Header with create button */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            {currentProject && (
+              <span
+                className="w-3 h-3 rounded-full"
+                style={{ backgroundColor: currentProject.color }}
+              />
+            )}
+            <h1 className="text-xl font-semibold">{headerTitle}</h1>
+            {currentProjectId !== null && (
+              <span className="text-sm text-[#666]">
+                ({filteredAgents.length} agent{filteredAgents.length !== 1 ? "s" : ""})
+              </span>
+            )}
+          </div>
+          {onNewAgent && (
+            <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>
+          )}
+        </div>
+
         {loading ? (
           <LoadingSpinner message="Loading agents..." />
-        ) : agents.length === 0 ? (
-          <EmptyState />
+        ) : filteredAgents.length === 0 ? (
+          <EmptyState onNewAgent={onNewAgent} canCreateAgent={canCreateAgent} hasProjectFilter={currentProjectId !== null} />
         ) : (
           <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-            {agents.map((agent) => (
+            {filteredAgents.map((agent) => (
               <AgentCard
                 key={agent.id}
                 agent={agent}
                 selected={selectedAgent?.id === agent.id}
                 onSelect={() => onSelectAgent(agent)}
                 onToggle={(e) => onToggleAgent(agent, e)}
-                onDelete={(e) => onDeleteAgent(agent.id, e)}
+                showProject={currentProjectId === null}
               />
             ))}
           </div>
@@ -61,7 +115,7 @@ export function AgentsView({
 
       {/* Agent Panel - slides in from right */}
       {selectedAgent && (
-        <div className="absolute right-0 top-0 bottom-0 w-[600px] z-20">
+        <div className="absolute right-0 top-0 bottom-0 w-full sm:w-[500px] lg:w-[600px] xl:w-[700px] z-20">
           <AgentPanel
             agent={selectedAgent}
             providers={providers}
@@ -76,11 +130,29 @@ export function AgentsView({
   );
 }
 
-function EmptyState() {
+function EmptyState({ onNewAgent, canCreateAgent, hasProjectFilter }: { onNewAgent?: () => void; canCreateAgent?: boolean; hasProjectFilter?: boolean }) {
   return (
     <div className="text-center py-20 text-[#666]">
-      <p className="text-lg">No agents yet</p>
-      <p className="text-sm mt-1">Create your first agent to get started</p>
+      {hasProjectFilter ? (
+        <>
+          <p className="text-lg">No agents in this project</p>
+          <p className="text-sm mt-1">Create an agent or assign existing agents to this project</p>
+        </>
+      ) : (
+        <>
+          <p className="text-lg">No agents yet</p>
+          <p className="text-sm mt-1">Create your first agent to get started</p>
+        </>
+      )}
+      {onNewAgent && (
+        <button
+          onClick={onNewAgent}
+          disabled={!canCreateAgent}
+          className="mt-4 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>
+      )}
     </div>
   );
 }

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { Modal } from "../common/Modal";
 import { Select } from "../common/Select";
-import { MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon } from "../common/Icons";
+import { MemoryIcon, TasksIcon, FilesIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, MultiAgentIcon } from "../common/Icons";
+import { useProjects } from "../../context";
 import type { Provider, NewAgentForm, AgentFeatures } from "../../types";
 
 interface CreateAgentModalProps {
@@ -18,10 +19,12 @@ interface CreateAgentModalProps {
 const FEATURE_CONFIG = [
   { key: "memory" as keyof AgentFeatures, label: "Memory", description: "Persistent recall", icon: MemoryIcon },
   { key: "tasks" as keyof AgentFeatures, label: "Tasks", description: "Schedule and execute tasks", icon: TasksIcon },
+  { key: "files" as keyof AgentFeatures, label: "Files", description: "File storage and management", icon: FilesIcon },
   { key: "vision" as keyof AgentFeatures, label: "Vision", description: "Process images and PDFs", icon: VisionIcon },
   { key: "operator" as keyof AgentFeatures, label: "Operator", description: "Browser automation", icon: OperatorIcon },
   { key: "mcp" as keyof AgentFeatures, label: "MCP", description: "External tools/services", icon: McpIcon },
   { key: "realtime" as keyof AgentFeatures, label: "Realtime", description: "Voice conversations", icon: RealtimeIcon },
+  { key: "agents" as keyof AgentFeatures, label: "Multi-Agent", description: "Communicate with peer agents", icon: MultiAgentIcon },
 ];
 
 export function CreateAgentModal({
@@ -34,6 +37,7 @@ export function CreateAgentModal({
   onClose,
   onGoToSettings,
 }: CreateAgentModalProps) {
+  const { projects, currentProjectId } = useProjects();
   const selectedProvider = providers.find(p => p.id === form.provider);
 
   const providerOptions = configuredProviders.map(p => ({
@@ -47,6 +51,18 @@ export function CreateAgentModal({
     recommended: m.recommended,
   })) || [];
 
+  const projectOptions = [
+    { value: "", label: "No Project" },
+    ...projects.map(p => ({ value: p.id, label: p.name })),
+  ];
+
+  // Set default project from current selection (but not "unassigned" or "all")
+  React.useEffect(() => {
+    if (form.projectId === undefined && currentProjectId && currentProjectId !== "unassigned") {
+      onFormChange({ ...form, projectId: currentProjectId });
+    }
+  }, [currentProjectId]);
+
   const toggleFeature = (key: keyof AgentFeatures) => {
     onFormChange({
       ...form,
@@ -76,6 +92,17 @@ export function CreateAgentModal({
               />
             </FormField>
 
+            {projects.length > 0 && (
+              <FormField label="Project">
+                <Select
+                  value={form.projectId || ""}
+                  options={projectOptions}
+                  onChange={(value) => onFormChange({ ...form, projectId: value || null })}
+                  placeholder="Select project..."
+                />
+              </FormField>
+            )}
+
             <FormField label="Provider">
               <Select
                 value={form.provider}

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,51 @@ export function TelemetryIcon({ className = "w-4 h-4" }: IconProps) {
     </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,7 +8,7 @@ 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>