apteva 0.2.3 → 0.2.6

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

@@ -0,0 +1 @@
+export { McpPage } from "./McpPage";

package/src/web/components/onboarding/OnboardingWizard.tsx

@@ -19,7 +19,11 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
   useEffect(() => {
     fetch("/api/providers")
       .then(res => res.json())
-      .then(data => setProviders(data.providers || []));
+      .then(data => {
+        // Only show LLM providers in onboarding, not integrations
+        const llmProviders = (data.providers || []).filter((p: Provider) => p.type === "llm");
+        setProviders(llmProviders);
+      });
   }, []);
 
   const configuredProviders = providers.filter(p => p.hasKey);

package/src/web/components/settings/SettingsPage.tsx

@@ -126,43 +126,87 @@ function ProvidersSettings() {
     fetchProviders();
   };
 
-  const configuredCount = providers.filter(p => p.hasKey).length;
+  const llmProviders = providers.filter(p => p.type === "llm");
+  const integrations = providers.filter(p => p.type === "integration");
+  const llmConfiguredCount = llmProviders.filter(p => p.hasKey).length;
+  const intConfiguredCount = integrations.filter(p => p.hasKey).length;
 
   return (
-    <div className="max-w-4xl">
-      <div className="mb-6">
-        <h1 className="text-2xl font-semibold mb-1">AI Providers</h1>
-        <p className="text-[#666]">
-          Manage your API keys for AI providers. {configuredCount} of {providers.length} configured.
-        </p>
+    <div className="max-w-4xl space-y-10">
+      {/* AI Providers Section */}
+      <div>
+        <div className="mb-6">
+          <h1 className="text-2xl font-semibold mb-1">AI Providers</h1>
+          <p className="text-[#666]">
+            Manage your API keys for AI providers. {llmConfiguredCount} of {llmProviders.length} configured.
+          </p>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          {llmProviders.map(provider => (
+            <ProviderKeyCard
+              key={provider.id}
+              provider={provider}
+              isEditing={selectedProvider === provider.id}
+              apiKey={apiKey}
+              saving={saving}
+              testing={testing}
+              error={selectedProvider === provider.id ? error : null}
+              success={selectedProvider === provider.id ? success : null}
+              onStartEdit={() => {
+                setSelectedProvider(provider.id);
+                setError(null);
+                setSuccess(null);
+              }}
+              onCancelEdit={() => {
+                setSelectedProvider(null);
+                setApiKey("");
+                setError(null);
+              }}
+              onApiKeyChange={setApiKey}
+              onSave={saveKey}
+              onDelete={() => deleteKey(provider.id)}
+            />
+          ))}
+        </div>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-2">
-        {providers.map(provider => (
-          <ProviderKeyCard
-            key={provider.id}
-            provider={provider}
-            isEditing={selectedProvider === provider.id}
-            apiKey={apiKey}
-            saving={saving}
-            testing={testing}
-            error={selectedProvider === provider.id ? error : null}
-            success={selectedProvider === provider.id ? success : null}
-            onStartEdit={() => {
-              setSelectedProvider(provider.id);
-              setError(null);
-              setSuccess(null);
-            }}
-            onCancelEdit={() => {
-              setSelectedProvider(null);
-              setApiKey("");
-              setError(null);
-            }}
-            onApiKeyChange={setApiKey}
-            onSave={saveKey}
-            onDelete={() => deleteKey(provider.id)}
-          />
-        ))}
+      {/* MCP Integrations Section */}
+      <div>
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold mb-1">MCP Integrations</h2>
+          <p className="text-[#666]">
+            Connect to MCP gateways for tool integrations. {intConfiguredCount} of {integrations.length} configured.
+          </p>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          {integrations.map(provider => (
+            <IntegrationKeyCard
+              key={provider.id}
+              provider={provider}
+              isEditing={selectedProvider === provider.id}
+              apiKey={apiKey}
+              saving={saving}
+              testing={testing}
+              error={selectedProvider === provider.id ? error : null}
+              success={selectedProvider === provider.id ? success : null}
+              onStartEdit={() => {
+                setSelectedProvider(provider.id);
+                setError(null);
+                setSuccess(null);
+              }}
+              onCancelEdit={() => {
+                setSelectedProvider(null);
+                setApiKey("");
+                setError(null);
+              }}
+              onApiKeyChange={setApiKey}
+              onSave={saveKey}
+              onDelete={() => deleteKey(provider.id)}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
@@ -184,17 +228,24 @@ interface ProviderKeyCardProps {
 }
 
 interface VersionInfo {
-  current: string;
-  latest: string;
+  installed: string | null;
+  latest: string | null;
   updateAvailable: boolean;
-  updateCommand: string;
+  lastChecked: string | null;
+}
+
+interface AllVersionInfo {
+  apteva: VersionInfo;
+  agent: VersionInfo;
 }
 
 function UpdatesSettings() {
-  const [version, setVersion] = useState<VersionInfo | null>(null);
+  const [versions, setVersions] = useState<AllVersionInfo | null>(null);
   const [checking, setChecking] = useState(false);
+  const [updatingAgent, setUpdatingAgent] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
+  const [updateSuccess, setUpdateSuccess] = useState<string | null>(null);
+  const [copied, setCopied] = useState<string | null>(null);
 
   const checkForUpdates = async () => {
     setChecking(true);
@@ -203,92 +254,165 @@ function UpdatesSettings() {
       const res = await fetch("/api/version");
       if (!res.ok) throw new Error("Failed to check for updates");
       const data = await res.json();
-      setVersion(data);
+      setVersions(data);
     } catch (e) {
       setError("Failed to check for updates");
     }
     setChecking(false);
   };
 
+  const updateAgent = async () => {
+    setUpdatingAgent(true);
+    setError(null);
+    setUpdateSuccess(null);
+    try {
+      const res = await fetch("/api/version/update", { method: "POST" });
+      const data = await res.json();
+      if (!data.success) {
+        setError(data.error || "Update failed");
+      } else {
+        setUpdateSuccess(`Agent updated to v${data.version}. New agents will use this version.`);
+        await checkForUpdates();
+      }
+    } catch (e) {
+      setError("Failed to update agent");
+    }
+    setUpdatingAgent(false);
+  };
+
   useEffect(() => {
     checkForUpdates();
   }, []);
 
-  const copyCommand = () => {
-    if (version?.updateCommand) {
-      navigator.clipboard.writeText(version.updateCommand);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
+  const copyCommand = (cmd: string, id: string) => {
+    navigator.clipboard.writeText(cmd);
+    setCopied(id);
+    setTimeout(() => setCopied(null), 2000);
   };
 
+  const hasAnyUpdate = versions?.apteva.updateAvailable || versions?.agent.updateAvailable;
+
   return (
     <div className="max-w-2xl">
       <div className="mb-6">
         <h1 className="text-2xl font-semibold mb-1">Updates</h1>
         <p className="text-[#666]">
-          Check for new versions of apteva.
+          Check for new versions of apteva and the agent binary.
         </p>
       </div>
 
-      <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-6">
-        {checking && !version ? (
-          <div className="text-[#666]">Checking for updates...</div>
-        ) : error ? (
-          <div className="text-red-400">{error}</div>
-        ) : version ? (
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
+      {checking && !versions ? (
+        <div className="text-[#666]">Checking for updates...</div>
+      ) : error && !versions ? (
+        <div className="text-red-400">{error}</div>
+      ) : versions ? (
+        <div className="space-y-6">
+          {updateSuccess && (
+            <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-4 text-green-400">
+              {updateSuccess}
+            </div>
+          )}
+
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 text-red-400">
+              {error}
+            </div>
+          )}
+
+          {/* Apteva App Version */}
+          <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-5">
+            <div className="flex items-center justify-between mb-4">
               <div>
-                <div className="text-sm text-[#666]">Current version</div>
-                <div className="text-xl font-mono">v{version.current}</div>
+                <h3 className="font-medium text-lg">apteva</h3>
+                <p className="text-sm text-[#666]">The app you're running</p>
               </div>
               <div className="text-right">
-                <div className="text-sm text-[#666]">Latest version</div>
-                <div className="text-xl font-mono">v{version.latest}</div>
+                <div className="text-xl font-mono">v{versions.apteva.installed || "?"}</div>
+                {versions.apteva.updateAvailable && (
+                  <div className="text-sm text-[#f97316]">→ v{versions.apteva.latest}</div>
+                )}
               </div>
             </div>
 
-            {version.updateAvailable ? (
+            {versions.apteva.updateAvailable ? (
               <div className="bg-[#f97316]/10 border border-[#f97316]/30 rounded-lg p-4">
-                <div className="flex items-center gap-2 text-[#f97316] font-medium mb-2">
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                  </svg>
-                  Update available!
-                </div>
                 <p className="text-sm text-[#888] mb-3">
-                  A new version of apteva is available. Run this command to update:
+                  Update by running:
                 </p>
                 <div className="flex items-center gap-2">
-                  <code className="flex-1 bg-[#0a0a0a] px-3 py-2 rounded font-mono text-sm">
-                    {version.updateCommand}
+                  <code className="flex-1 bg-[#0a0a0a] px-3 py-2 rounded font-mono text-sm text-[#888]">
+                    npx apteva@latest
                   </code>
                   <button
-                    onClick={copyCommand}
+                    onClick={() => copyCommand("npx apteva@latest", "apteva")}
                     className="px-3 py-2 bg-[#1a1a1a] hover:bg-[#222] rounded text-sm"
                   >
-                    {copied ? "Copied!" : "Copy"}
+                    {copied === "apteva" ? "Copied!" : "Copy"}
                   </button>
                 </div>
               </div>
             ) : (
-              <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-4 flex items-center gap-2 text-green-400">
-                <CheckIcon className="w-5 h-5" />
-                You're running the latest version!
+              <div className="flex items-center gap-2 text-green-400 text-sm">
+                <CheckIcon className="w-4 h-4" />
+                Up to date
               </div>
             )}
+          </div>
+
+          {/* Agent Binary Version */}
+          <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-5">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h3 className="font-medium text-lg">Agent Binary</h3>
+                <p className="text-sm text-[#666]">The Go binary that runs agents</p>
+              </div>
+              <div className="text-right">
+                <div className="text-xl font-mono">v{versions.agent.installed || "?"}</div>
+                {versions.agent.updateAvailable && (
+                  <div className="text-sm text-[#f97316]">→ v{versions.agent.latest}</div>
+                )}
+              </div>
+            </div>
 
-            <button
-              onClick={checkForUpdates}
-              disabled={checking}
-              className="text-sm text-[#666] hover:text-[#888] disabled:opacity-50"
-            >
-              {checking ? "Checking..." : "Check again"}
-            </button>
+            {versions.agent.updateAvailable ? (
+              <div className="bg-[#f97316]/10 border border-[#f97316]/30 rounded-lg p-4">
+                <p className="text-sm text-[#888] mb-3">
+                  A new version is available. Stop all agents before updating.
+                </p>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={updateAgent}
+                    disabled={updatingAgent}
+                    className="px-4 py-2 bg-[#f97316] text-black rounded font-medium text-sm disabled:opacity-50"
+                  >
+                    {updatingAgent ? "Updating..." : "Update Agent"}
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-green-400 text-sm">
+                <CheckIcon className="w-4 h-4" />
+                Up to date
+              </div>
+            )}
           </div>
-        ) : null}
-      </div>
+
+          {!hasAnyUpdate && !updateSuccess && (
+            <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-4 flex items-center gap-2 text-green-400">
+              <CheckIcon className="w-5 h-5" />
+              Everything is up to date!
+            </div>
+          )}
+
+          <button
+            onClick={checkForUpdates}
+            disabled={checking}
+            className="text-sm text-[#666] hover:text-[#888] disabled:opacity-50"
+          >
+            {checking ? "Checking..." : "Check for updates"}
+          </button>
+        </div>
+      ) : null}
     </div>
   );
 }
@@ -398,3 +522,109 @@ function ProviderKeyCard({
     </div>
   );
 }
+
+function IntegrationKeyCard({
+  provider,
+  isEditing,
+  apiKey,
+  saving,
+  testing,
+  error,
+  success,
+  onStartEdit,
+  onCancelEdit,
+  onApiKeyChange,
+  onSave,
+  onDelete,
+}: ProviderKeyCardProps) {
+  return (
+    <div className={`bg-[#111] border rounded-lg p-4 ${
+      provider.hasKey ? 'border-[#f97316]/20' : 'border-[#1a1a1a]'
+    }`}>
+      <div className="flex items-center justify-between mb-2">
+        <div>
+          <h3 className="font-medium">{provider.name}</h3>
+          <p className="text-sm text-[#666]">{provider.description || "MCP integration"}</p>
+        </div>
+        {provider.hasKey ? (
+          <span className="text-[#f97316] text-xs flex items-center gap-1 bg-[#f97316]/10 px-2 py-1 rounded">
+            <CheckIcon className="w-3 h-3" />
+            {provider.keyHint}
+          </span>
+        ) : (
+          <span className="text-[#666] text-xs bg-[#1a1a1a] px-2 py-1 rounded">
+            Not configured
+          </span>
+        )}
+      </div>
+
+      {provider.hasKey ? (
+        <div className="flex items-center justify-between mt-3 pt-3 border-t border-[#1a1a1a]">
+          <a
+            href={provider.docsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-[#3b82f6] hover:underline"
+          >
+            View docs
+          </a>
+          <button
+            onClick={onDelete}
+            className="text-red-400 hover:text-red-300 text-sm"
+          >
+            Remove key
+          </button>
+        </div>
+      ) : (
+        <div className="mt-3 pt-3 border-t border-[#1a1a1a]">
+          {isEditing ? (
+            <div className="space-y-3">
+              <input
+                type="password"
+                value={apiKey}
+                onChange={e => onApiKeyChange(e.target.value)}
+                placeholder="Enter API key..."
+                autoFocus
+                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
+              />
+              {error && <p className="text-red-400 text-sm">{error}</p>}
+              {success && <p className="text-green-400 text-sm">{success}</p>}
+              <div className="flex gap-2">
+                <button
+                  onClick={onCancelEdit}
+                  className="flex-1 px-3 py-1.5 border border-[#333] rounded text-sm hover:border-[#666]"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={onSave}
+                  disabled={!apiKey || saving}
+                  className="flex-1 px-3 py-1.5 bg-[#f97316] text-black rounded text-sm font-medium disabled:opacity-50"
+                >
+                  {testing ? "Validating..." : saving ? "Saving..." : "Save"}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between">
+              <a
+                href={provider.docsUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-[#3b82f6] hover:underline"
+              >
+                Get API key
+              </a>
+              <button
+                onClick={onStartEdit}
+                className="text-sm text-[#f97316] hover:text-[#fb923c]"
+              >
+                + Add key
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/components/tasks/TasksPage.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from "react";
+import { TasksIcon } from "../common/Icons";
+import type { Task } from "../../types";
+
+interface TasksPageProps {
+  onSelectAgent?: (agentId: string) => void;
+}
+
+export function TasksPage({ onSelectAgent }: TasksPageProps) {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState<string>("all");
+
+  useEffect(() => {
+    fetchTasks();
+    // Refresh every 10 seconds
+    const interval = setInterval(fetchTasks, 10000);
+    return () => clearInterval(interval);
+  }, [filter]);
+
+  const fetchTasks = async () => {
+    try {
+      const res = await fetch(`/api/tasks?status=${filter}`);
+      const data = await res.json();
+      setTasks(data.tasks || []);
+    } catch (e) {
+      console.error("Failed to fetch tasks:", e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const statusColors: 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",
+  };
+
+  const filterOptions = [
+    { value: "all", label: "All" },
+    { value: "pending", label: "Pending" },
+    { value: "running", label: "Running" },
+    { value: "completed", label: "Completed" },
+    { value: "failed", label: "Failed" },
+  ];
+
+  return (
+    <div className="flex-1 p-6 overflow-auto">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className="text-2xl font-semibold mb-1">Tasks</h1>
+            <p className="text-[#666]">
+              View tasks from all running agents
+            </p>
+          </div>
+          <div className="flex gap-2">
+            {filterOptions.map(opt => (
+              <button
+                key={opt.value}
+                onClick={() => setFilter(opt.value)}
+                className={`px-3 py-1.5 rounded text-sm transition ${
+                  filter === opt.value
+                    ? "bg-[#f97316] text-black"
+                    : "bg-[#1a1a1a] hover:bg-[#222]"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="text-center py-12 text-[#666]">Loading tasks...</div>
+        ) : tasks.length === 0 ? (
+          <div className="text-center py-12">
+            <TasksIcon className="w-12 h-12 mx-auto mb-4 text-[#333]" />
+            <p className="text-[#666]">No tasks found</p>
+            <p className="text-sm text-[#444] mt-1">
+              Tasks will appear here when agents create them
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {tasks.map(task => (
+              <div
+                key={`${task.agentId}-${task.id}`}
+                className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4 hover:border-[#333] transition"
+              >
+                <div className="flex items-start justify-between mb-2">
+                  <div className="flex-1">
+                    <h3 className="font-medium">{task.title}</h3>
+                    <p className="text-sm text-[#666]">
+                      {task.agentName}
+                      {task.execute_at && (
+                        <span className="ml-2">
+                          · Scheduled: {new Date(task.execute_at).toLocaleString()}
+                        </span>
+                      )}
+                    </p>
+                  </div>
+                  <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[task.status] || statusColors.pending}`}>
+                    {task.status}
+                  </span>
+                </div>
+
+                {task.description && (
+                  <p className="text-sm text-[#888] mb-2 line-clamp-2">
+                    {task.description}
+                  </p>
+                )}
+
+                <div className="flex items-center gap-4 text-xs text-[#555]">
+                  <span>Type: {task.type}</span>
+                  <span>Priority: {task.priority}</span>
+                  {task.recurrence && <span>Recurrence: {task.recurrence}</span>}
+                  <span>Created: {new Date(task.created_at).toLocaleString()}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export { TasksPage } from "./TasksPage";