apteva 0.2.3 → 0.2.6

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"