apteva 0.2.3 → 0.2.5

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

@@ -1,38 +1,42 @@
 import React from "react";
 import { AgentCard } from "./AgentCard";
-import { ChatPanel } from "./ChatPanel";
+import { AgentPanel } from "./AgentPanel";
 import { LoadingSpinner } from "../common/LoadingSpinner";
-import type { Agent } from "../../types";
+import type { Agent, Provider } from "../../types";
 
 interface AgentsViewProps {
   agents: Agent[];
   loading: boolean;
   selectedAgent: Agent | null;
+  providers: Provider[];
   onSelectAgent: (agent: Agent) => void;
   onCloseAgent: () => void;
   onToggleAgent: (agent: Agent, e?: React.MouseEvent) => void;
   onDeleteAgent: (id: string, e?: React.MouseEvent) => void;
+  onUpdateAgent: (id: string, updates: Partial<Agent>) => Promise<{ error?: string }>;
 }
 
 export function AgentsView({
   agents,
   loading,
   selectedAgent,
+  providers,
   onSelectAgent,
   onCloseAgent,
   onToggleAgent,
   onDeleteAgent,
+  onUpdateAgent,
 }: AgentsViewProps) {
   return (
-    <div className="flex-1 flex overflow-hidden">
+    <div className="flex-1 flex overflow-hidden relative">
       {/* Agents list */}
-      <div className={`${selectedAgent ? 'w-1/2 border-r border-[#1a1a1a]' : 'flex-1'} overflow-auto p-6 transition-all`}>
+      <div className="flex-1 overflow-auto p-6">
         {loading ? (
           <LoadingSpinner message="Loading agents..." />
         ) : agents.length === 0 ? (
           <EmptyState />
         ) : (
-          <div className={`grid gap-4 ${selectedAgent ? 'grid-cols-1 xl:grid-cols-2' : 'md:grid-cols-2 xl:grid-cols-3'}`}>
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
             {agents.map((agent) => (
               <AgentCard
                 key={agent.id}
@@ -47,14 +51,27 @@ export function AgentsView({
         )}
       </div>
 
-      {/* Chat Panel */}
+      {/* Overlay backdrop */}
       {selectedAgent && (
-        <ChatPanel
-          agent={selectedAgent}
-          onClose={onCloseAgent}
-          onStartAgent={(e) => onToggleAgent(selectedAgent, e)}
+        <div
+          className="absolute inset-0 bg-black/40 backdrop-blur-[2px] z-10"
+          onClick={onCloseAgent}
         />
       )}
+
+      {/* Agent Panel - slides in from right */}
+      {selectedAgent && (
+        <div className="absolute right-0 top-0 bottom-0 w-[600px] z-20">
+          <AgentPanel
+            agent={selectedAgent}
+            providers={providers}
+            onClose={onCloseAgent}
+            onStartAgent={(e) => onToggleAgent(selectedAgent, e)}
+            onUpdateAgent={(updates) => onUpdateAgent(selectedAgent.id, updates)}
+            onDeleteAgent={() => onDeleteAgent(selectedAgent.id)}
+          />
+        </div>
+      )}
     </div>
   );
 }

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

@@ -16,11 +16,11 @@ interface CreateAgentModalProps {
 }
 
 const FEATURE_CONFIG = [
-  { key: "memory" as keyof AgentFeatures, label: "Memory", description: "Remember information across conversations", icon: MemoryIcon },
-  { key: "tasks" as keyof AgentFeatures, label: "Tasks", description: "Create and execute scheduled tasks", icon: TasksIcon },
+  { 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: "vision" as keyof AgentFeatures, label: "Vision", description: "Process images and PDFs", icon: VisionIcon },
-  { key: "operator" as keyof AgentFeatures, label: "Operator", description: "Browser automation (computer use)", icon: OperatorIcon },
-  { key: "mcp" as keyof AgentFeatures, label: "MCP", description: "Connect to external tools and services", icon: McpIcon },
+  { 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 },
 ];
 
@@ -103,7 +103,7 @@ export function CreateAgentModal({
             </FormField>
 
             <FormField label="Features">
-              <div className="grid grid-cols-2 gap-2">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                 {FEATURE_CONFIG.map(({ key, label, description, icon: Icon }) => (
                   <button
                     key={key}
@@ -115,12 +115,12 @@ export function CreateAgentModal({
                         : "border-[#222] hover:border-[#333]"
                     }`}
                   >
-                    <Icon className={`w-5 h-5 ${form.features[key] ? "text-[#f97316]" : "text-[#666]"}`} />
+                    <Icon className={`w-5 h-5 flex-shrink-0 ${form.features[key] ? "text-[#f97316]" : "text-[#666]"}`} />
                     <div className="flex-1 min-w-0">
                       <div className={`text-sm font-medium ${form.features[key] ? "text-[#f97316]" : ""}`}>
                         {label}
                       </div>
-                      <div className="text-xs text-[#666] truncate">{description}</div>
+                      <div className="text-xs text-[#666]">{description}</div>
                     </div>
                   </button>
                 ))}

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

@@ -1,4 +1,4 @@
 export { AgentCard } from "./AgentCard";
 export { CreateAgentModal } from "./CreateAgentModal";
-export { ChatPanel } from "./ChatPanel";
+export { AgentPanel } from "./AgentPanel";
 export { AgentsView } from "./AgentsView";

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

@@ -109,3 +109,11 @@ export function RealtimeIcon({ className = "w-4 h-4" }: IconProps) {
     </svg>
   );
 }
+
+export function TelemetryIcon({ 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+    </svg>
+  );
+}

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

@@ -7,8 +7,8 @@ interface ModalProps {
 
 export function Modal({ children, onClose }: ModalProps) {
   return (
-    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
-      <div className="bg-[#111] rounded p-6 w-full max-w-md border border-[#1a1a1a]">
+    <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">
         {children}
       </div>
     </div>

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

@@ -50,7 +50,7 @@ export function Select({ value, options, onChange, placeholder = "Select..." }:
       </button>
 
       {isOpen && (
-        <div className="absolute z-50 w-full mt-1 bg-[#111] border border-[#222] rounded shadow-lg max-h-60 overflow-auto">
+        <div className="absolute z-50 w-full min-w-max mt-1 bg-[#111] border border-[#222] rounded shadow-lg max-h-60 overflow-y-auto scrollbar-hide">
           {options.map((option) => (
             <button
               key={option.value}

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

@@ -13,4 +13,5 @@ export {
   OperatorIcon,
   McpIcon,
   RealtimeIcon,
+  TelemetryIcon,
 } from "./Icons";

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

@@ -1,5 +1,5 @@
-import React from "react";
-import type { Agent, Provider, Route } from "../../types";
+import React, { useState, useEffect } from "react";
+import type { Agent, Provider, Route, DashboardStats, Task } from "../../types";
 
 interface DashboardProps {
   agents: Agent[];
@@ -18,16 +18,49 @@ export function Dashboard({
   onNavigate,
   onSelectAgent,
 }: DashboardProps) {
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [recentTasks, setRecentTasks] = useState<Task[]>([]);
+
+  useEffect(() => {
+    fetchDashboardData();
+    const interval = setInterval(fetchDashboardData, 10000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const fetchDashboardData = async () => {
+    try {
+      const [dashRes, tasksRes] = await Promise.all([
+        fetch("/api/dashboard"),
+        fetch("/api/tasks?status=all"),
+      ]);
+
+      if (dashRes.ok) {
+        const data = await dashRes.json();
+        setStats(data);
+      }
+
+      if (tasksRes.ok) {
+        const data = await tasksRes.json();
+        setRecentTasks((data.tasks || []).slice(0, 5));
+      }
+    } catch (e) {
+      console.error("Failed to fetch dashboard data:", e);
+    }
+  };
+
+  const taskStats = stats?.tasks || { total: 0, pending: 0, running: 0, completed: 0 };
+
   return (
     <div className="flex-1 overflow-auto p-6">
       {/* Stats Cards */}
-      <div className="grid grid-cols-3 gap-4 mb-6">
-        <StatCard label="Total Agents" value={agents.length} />
-        <StatCard label="Running" value={runningCount} color="text-[#3b82f6]" />
+      <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="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]" />
       </div>
 
-      <div className="grid grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Agents List */}
         <DashboardCard
           title="Agents"
@@ -61,31 +94,29 @@ export function Dashboard({
           )}
         </DashboardCard>
 
-        {/* Configured Providers */}
+        {/* Recent Tasks */}
         <DashboardCard
-          title="Providers"
-          actionLabel="Manage"
-          onAction={() => onNavigate("settings")}
+          title="Recent Tasks"
+          actionLabel="View All"
+          onAction={() => onNavigate("tasks")}
         >
-          {configuredProviders.length === 0 ? (
+          {recentTasks.length === 0 ? (
             <div className="p-4 text-center text-[#666]">
-              <p>No providers configured</p>
-              <button
-                onClick={() => onNavigate("settings")}
-                className="text-[#f97316] hover:underline mt-1"
-              >
-                Add API Key
-              </button>
+              <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]">
-              {configuredProviders.map((provider) => (
-                <div key={provider.id} className="px-4 py-3 flex items-center justify-between">
-                  <div>
-                    <p className="font-medium">{provider.name}</p>
-                    <p className="text-sm text-[#666]">{provider.models.length} models</p>
+              {recentTasks.map((task) => (
+                <div
+                  key={`${task.agentId}-${task.id}`}
+                  className="px-4 py-3 flex items-center justify-between"
+                >
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium truncate">{task.title}</p>
+                    <p className="text-sm text-[#666]">{task.agentName}</p>
                   </div>
-                  <span className="text-green-400 text-sm">{provider.keyHint}</span>
+                  <TaskStatusBadge status={task.status} />
                 </div>
               ))}
             </div>
@@ -99,14 +130,16 @@ export function Dashboard({
 interface StatCardProps {
   label: string;
   value: number;
+  subValue?: string;
   color?: string;
 }
 
-function StatCard({ label, value, color }: StatCardProps) {
+function StatCard({ label, value, subValue, color }: StatCardProps) {
   return (
     <div className="bg-[#111] rounded p-4 border border-[#1a1a1a]">
       <p className="text-sm text-[#666] mb-1">{label}</p>
       <p className={`text-2xl font-semibold ${color || ''}`}>{value}</p>
+      {subValue && <p className="text-xs text-[#555] mt-1">{subValue}</p>}
     </div>
   );
 }
@@ -134,3 +167,19 @@ function DashboardCard({ title, actionLabel, onAction, children }: DashboardCard
     </div>
   );
 }
+
+function TaskStatusBadge({ status }: { status: Task["status"] }) {
+  const colors: Record<string, string> = {
+    pending: "bg-yellow-500/20 text-yellow-400",
+    running: "bg-blue-500/20 text-blue-400",
+    completed: "bg-green-500/20 text-green-400",
+    failed: "bg-red-500/20 text-red-400",
+    cancelled: "bg-gray-500/20 text-gray-400",
+  };
+
+  return (
+    <span className={`px-2 py-0.5 rounded text-xs font-medium ${colors[status] || colors.pending}`}>
+      {status}
+    </span>
+  );
+}

package/src/web/components/index.ts

@@ -1,5 +1,5 @@
 // Common components
-export { LoadingSpinner, Modal, Select, CheckIcon, CloseIcon, DashboardIcon, AgentsIcon, SettingsIcon } from "./common";
+export { LoadingSpinner, Modal, Select, CheckIcon, CloseIcon, DashboardIcon, AgentsIcon, SettingsIcon, TasksIcon } from "./common";
 
 // Layout components
 export { Header, Sidebar, ErrorBanner } from "./layout";
@@ -7,5 +7,8 @@ export { Header, Sidebar, ErrorBanner } from "./layout";
 // Feature components
 export { OnboardingWizard } from "./onboarding";
 export { SettingsPage } from "./settings";
-export { AgentCard, CreateAgentModal, ChatPanel, AgentsView } from "./agents";
+export { AgentCard, CreateAgentModal, AgentPanel, AgentsView } from "./agents";
 export { Dashboard } from "./dashboard";
+export { TasksPage } from "./tasks";
+export { McpPage } from "./mcp";
+export { TelemetryPage } from "./telemetry/TelemetryPage";

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

@@ -1,14 +1,15 @@
 import React from "react";
-import { DashboardIcon, AgentsIcon, SettingsIcon } from "../common/Icons";
+import { DashboardIcon, AgentsIcon, TasksIcon, McpIcon, TelemetryIcon, SettingsIcon } from "../common/Icons";
 import type { Route } from "../../types";
 
 interface SidebarProps {
   route: Route;
   agentCount: number;
+  taskCount?: number;
   onNavigate: (route: Route) => void;
 }
 
-export function Sidebar({ route, agentCount, onNavigate }: SidebarProps) {
+export function Sidebar({ route, agentCount, taskCount, onNavigate }: SidebarProps) {
   return (
     <aside className="w-56 border-r border-[#1a1a1a] flex-shrink-0 p-4">
       <nav className="space-y-1">
@@ -25,6 +26,25 @@ export function Sidebar({ route, agentCount, onNavigate }: SidebarProps) {
           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")}
+        />
         <NavButton
           icon={<SettingsIcon />}
           label="Settings"