apteva 0.4.20 → 0.4.26

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

@@ -1,6 +1,6 @@
-import React from "react";
-import { MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, FilesIcon, MultiAgentIcon, SkillsIcon } from "../common/Icons";
-import { useAgentActivity, useProjects } from "../../context";
+import React, { useState, useEffect } from "react";
+import { MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, FilesIcon, MultiAgentIcon, SkillsIcon, ActivityIcon } from "../common/Icons";
+import { useAgentActivity, useProjects, useAuth } from "../../context";
 import type { Agent, AgentFeatures } from "../../types";
 
 interface AgentCardProps {
@@ -28,7 +28,16 @@ export function AgentCard({ agent, selected, onSelect, onToggle, showProject }:
   const skills = agent.skillDetails || [];
   const { isActive, type } = useAgentActivity(agent.id);
   const { projects } = useProjects();
+  const { authFetch } = useAuth();
   const project = agent.projectId ? projects.find(p => p.id === agent.projectId) : null;
+  const [subscriptions, setSubscriptions] = useState<{ id: string; trigger_slug: string; enabled: boolean }[]>([]);
+
+  useEffect(() => {
+    authFetch(`/api/subscriptions?agent_id=${agent.id}`)
+      .then(res => res.ok ? res.json() : { subscriptions: [] })
+      .then(data => setSubscriptions(data.subscriptions || []))
+      .catch(() => {});
+  }, [agent.id, authFetch]);
 
   return (
     <div
@@ -115,6 +124,26 @@ export function AgentCard({ agent, selected, onSelect, onToggle, showProject }:
         </div>
       )}
 
+      {/* Subscriptions (triggers listening to) */}
+      {subscriptions.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mb-3">
+          {subscriptions.map((sub) => (
+            <span
+              key={sub.id}
+              className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
+                sub.enabled
+                  ? "bg-cyan-500/10 text-cyan-400"
+                  : "bg-[#222] text-[#666]"
+              }`}
+              title={`Trigger: ${sub.trigger_slug.replace(/_/g, " ")}`}
+            >
+              <ActivityIcon className="w-3 h-3" />
+              {sub.trigger_slug.replace(/_/g, " ")}
+            </span>
+          ))}
+        </div>
+      )}
+
       <p className="text-sm text-[#666] line-clamp-2 mb-4 flex-1">
         {agent.systemPrompt}
       </p>

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

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { Chat, convertApiMessages } from "@apteva/apteva-kit";
 import { CloseIcon, MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, FilesIcon, MultiAgentIcon, RecurringIcon, ScheduledIcon, TaskOnceIcon } from "../common/Icons";
-import { formatCron, formatRelativeTime } from "../tasks/TasksPage";
+import { formatCron, formatRelativeTime, TrajectoryView } from "../tasks/TasksPage";
 import { Select } from "../common/Select";
 import { useConfirm } from "../common/Modal";
 import { useTelemetry } from "../../context";
 import { useAuth } from "../../context";
-import type { Agent, Provider, AgentFeatures, McpServer, SkillSummary, AgentMode, MultiAgentConfig } from "../../types";
+import type { Agent, Provider, AgentFeatures, McpServer, SkillSummary, AgentMode, MultiAgentConfig, Task } from "../../types";
 import { getMultiAgentConfig } from "../../types";
 
 type Tab = "chat" | "threads" | "tasks" | "memory" | "files" | "settings";
@@ -314,10 +314,13 @@ function ThreadsTab({ agent }: { agent: Agent }) {
 }
 
 function TasksTab({ agent }: { agent: Agent }) {
-  const [tasks, setTasks] = useState<any[]>([]);
+  const { authFetch } = useAuth();
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [filter, setFilter] = useState<string>("all");
+  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
+  const [loadingTask, setLoadingTask] = useState(false);
   const { events } = useTelemetry({ agent_id: agent.id, category: "task" });
 
   // Reset state when agent changes
@@ -325,6 +328,7 @@ function TasksTab({ agent }: { agent: Agent }) {
     setTasks([]);
     setError(null);
     setLoading(true);
+    setSelectedTask(null);
   }, [agent.id]);
 
   const fetchTasks = async () => {
@@ -346,6 +350,24 @@ function TasksTab({ agent }: { agent: Agent }) {
     }
   };
 
+  const selectTask = async (task: Task) => {
+    setSelectedTask(task);
+    setLoadingTask(true);
+    try {
+      const res = await authFetch(`/api/tasks/${task.agentId || agent.id}/${task.id}`);
+      if (res.ok) {
+        const data = await res.json();
+        if (data.task) {
+          setSelectedTask({ ...data.task, agentId: task.agentId || agent.id, agentName: task.agentName || agent.name });
+        }
+      }
+    } catch (e) {
+      console.error("Failed to fetch task details:", e);
+    } finally {
+      setLoadingTask(false);
+    }
+  };
+
   // Refetch when agent changes, filter changes, or task telemetry arrives
   useEffect(() => {
     setLoading(true);
@@ -403,6 +425,133 @@ function TasksTab({ agent }: { agent: Agent }) {
     { value: "failed", label: "Failed" },
   ];
 
+  // Show task detail view when a task is selected
+  if (selectedTask) {
+    return (
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Back button */}
+        <div className="px-4 pt-3 pb-2 border-b border-[#1a1a1a] shrink-0">
+          <button
+            onClick={() => setSelectedTask(null)}
+            className="text-sm text-[#666] hover:text-[#e0e0e0] transition flex items-center gap-1"
+          >
+            <span>←</span> Back to tasks
+          </button>
+        </div>
+
+        {/* Task detail content */}
+        <div className="flex-1 overflow-auto p-4 space-y-4">
+          {/* Title & Status */}
+          <div>
+            <div className="flex items-start justify-between gap-2 mb-1">
+              <h3 className="text-lg font-medium">{selectedTask.title}</h3>
+              <span className={`px-2 py-1 rounded text-xs font-medium flex-shrink-0 ${statusColors[selectedTask.status]}`}>
+                {selectedTask.status}
+              </span>
+            </div>
+          </div>
+
+          {/* Description */}
+          {selectedTask.description && (
+            <div>
+              <h4 className="text-xs text-[#666] uppercase tracking-wider mb-1">Description</h4>
+              <p className="text-sm text-[#888] whitespace-pre-wrap">{selectedTask.description}</p>
+            </div>
+          )}
+
+          {/* Metadata */}
+          <div className="grid grid-cols-2 gap-3 text-sm">
+            <div>
+              <span className="text-[#666]">Type</span>
+              <p className="capitalize">{selectedTask.type}</p>
+            </div>
+            <div>
+              <span className="text-[#666]">Priority</span>
+              <p>{selectedTask.priority}</p>
+            </div>
+            {selectedTask.recurrence && (
+              <div>
+                <span className="text-[#666]">Recurrence</span>
+                <p>{formatCron(selectedTask.recurrence)}</p>
+                <p className="text-xs text-[#444] mt-0.5 font-mono">{selectedTask.recurrence}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Timestamps */}
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-[#666]">Created</span>
+              <span>{new Date(selectedTask.created_at).toLocaleString()}</span>
+            </div>
+            {selectedTask.execute_at && (
+              <div className="flex justify-between">
+                <span className="text-[#666]">Scheduled</span>
+                <span className="text-[#f97316]">{formatRelativeTime(selectedTask.execute_at)}</span>
+              </div>
+            )}
+            {selectedTask.executed_at && (
+              <div className="flex justify-between">
+                <span className="text-[#666]">Started</span>
+                <span>{new Date(selectedTask.executed_at).toLocaleString()}</span>
+              </div>
+            )}
+            {selectedTask.completed_at && (
+              <div className="flex justify-between">
+                <span className="text-[#666]">Completed</span>
+                <span>{new Date(selectedTask.completed_at).toLocaleString()}</span>
+              </div>
+            )}
+            {selectedTask.next_run && (
+              <div className="flex justify-between">
+                <span className="text-[#666]">Next Run</span>
+                <span className="text-[#f97316]">{formatRelativeTime(selectedTask.next_run)}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Error */}
+          {selectedTask.status === "failed" && selectedTask.error && (
+            <div className="min-w-0">
+              <h4 className="text-xs text-red-400 uppercase tracking-wider mb-1">Error</h4>
+              <div className="bg-red-500/10 border border-red-500/20 rounded p-3 overflow-x-auto">
+                <pre className="text-sm text-red-400 whitespace-pre-wrap break-words">{selectedTask.error}</pre>
+              </div>
+            </div>
+          )}
+
+          {/* Result */}
+          {selectedTask.status === "completed" && selectedTask.result && (
+            <div className="min-w-0">
+              <h4 className="text-xs text-green-400 uppercase tracking-wider mb-1">Result</h4>
+              <div className="bg-green-500/10 border border-green-500/20 rounded p-3 overflow-x-auto">
+                <pre className="text-sm text-green-400 whitespace-pre-wrap break-words">
+                  {typeof selectedTask.result === "string" ? selectedTask.result : JSON.stringify(selectedTask.result, null, 2)}
+                </pre>
+              </div>
+            </div>
+          )}
+
+          {/* Trajectory */}
+          {loadingTask && !selectedTask.trajectory && (
+            <div>
+              <h4 className="text-xs text-[#666] uppercase tracking-wider mb-2">Trajectory</h4>
+              <div className="text-sm text-[#555]">Loading trajectory...</div>
+            </div>
+          )}
+          {selectedTask.trajectory && selectedTask.trajectory.length > 0 && (
+            <div>
+              <h4 className="text-xs text-[#666] uppercase tracking-wider mb-2">
+                Trajectory ({selectedTask.trajectory.length} steps)
+              </h4>
+              <TrajectoryView trajectory={selectedTask.trajectory} />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex-1 overflow-auto p-4">
       {/* Filter tabs */}
@@ -431,7 +580,11 @@ function TasksTab({ agent }: { agent: Agent }) {
       ) : (
         <div className="space-y-3">
           {tasks.map(task => (
-            <div key={task.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+            <div
+              key={task.id}
+              onClick={() => selectTask(task)}
+              className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4 cursor-pointer hover:border-[#333] transition"
+            >
               <div className="flex items-start justify-between mb-2">
                 <div className="flex-1 min-w-0">
                   <h3 className="font-medium">{task.title || task.name}</h3>
@@ -971,6 +1124,15 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
   const [availableSkills, setAvailableSkills] = useState<AvailableSkill[]>([]);
   const [apiKey, setApiKey] = useState<string | null>(null);
   const [showApiKey, setShowApiKey] = useState(false);
+  const [subscriptions, setSubscriptions] = useState<{ id: string; trigger_slug: string; enabled: boolean }[]>([]);
+
+  // Fetch subscriptions for this agent
+  useEffect(() => {
+    authFetch(`/api/subscriptions?agent_id=${agent.id}`)
+      .then(res => res.ok ? res.json() : { subscriptions: [] })
+      .then(data => setSubscriptions(data.subscriptions || []))
+      .catch(() => {});
+  }, [agent.id, authFetch]);
 
   // Fetch available MCP servers
   useEffect(() => {
@@ -1443,6 +1605,28 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
           </p>
         )}
 
+        {/* Subscriptions */}
+        <div className="mt-8 pt-6 border-t border-[#222]">
+          <p className="text-sm text-[#666] mb-3">Subscriptions</p>
+          {subscriptions.length === 0 ? (
+            <p className="text-xs text-[#555]">No subscriptions. Set up triggers in Connections to have this agent listen to external events.</p>
+          ) : (
+            <div className="space-y-2">
+              {subscriptions.map(sub => (
+                <div key={sub.id} className="flex items-center gap-2 px-3 py-2 bg-[#111] rounded border border-[#1a1a1a]">
+                  <span className={`w-2 h-2 rounded-full shrink-0 ${sub.enabled ? "bg-cyan-400" : "bg-[#444]"}`} />
+                  <span className={`text-sm flex-1 ${sub.enabled ? "text-cyan-400" : "text-[#666]"}`}>
+                    {sub.trigger_slug.replace(/_/g, " ")}
+                  </span>
+                  <span className={`text-[10px] px-1.5 py-0.5 rounded ${sub.enabled ? "bg-cyan-500/10 text-cyan-400" : "bg-[#222] text-[#555]"}`}>
+                    {sub.enabled ? "active" : "disabled"}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
         {/* Developer Info (dev mode only) */}
         {isDev && apiKey && (
           <div className="mt-8 pt-6 border-t border-[#222]">

package/src/web/components/connections/IntegrationsTab.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useAuth, useProjects } from "../../context";
 import { IntegrationsPanel } from "../mcp/IntegrationsPanel";
 
@@ -12,18 +12,35 @@ interface TriggerType {
   logo: string | null;
 }
 
+interface ProviderInfo {
+  id: string;
+  name: string;
+  connected: boolean;
+}
+
 export function IntegrationsTab() {
   const { authFetch } = useAuth();
   const { currentProjectId } = useProjects();
 
   const projectId = currentProjectId && currentProjectId !== "unassigned" ? currentProjectId : null;
+  const projectParam = projectId ? `?project_id=${projectId}` : "";
 
-  // Provider selection
-  const [selectedProvider, setSelectedProvider] = useState("composio");
-  const providerOptions = [
-    { id: "composio", name: "Composio" },
-    { id: "agentdojo", name: "AgentDojo" },
-  ];
+  // Provider selection — only show configured providers
+  const [providers, setProviders] = useState<ProviderInfo[]>([]);
+  const [selectedProvider, setSelectedProvider] = useState("");
+
+  useEffect(() => {
+    authFetch(`/api/triggers/providers${projectParam}`)
+      .then(r => r.json())
+      .then(data => {
+        const connected = (data.providers || []).filter((p: ProviderInfo) => p.connected);
+        setProviders(connected);
+        if (connected.length > 0 && !connected.find((p: ProviderInfo) => p.id === selectedProvider)) {
+          setSelectedProvider(connected[0].id);
+        }
+      })
+      .catch(() => {});
+  }, [authFetch]);
 
   // Trigger type browsing
   const [browsingToolkit, setBrowsingToolkit] = useState<string | null>(null);
@@ -53,32 +70,41 @@ export function IntegrationsTab() {
         Connect external apps via OAuth or API Key. Connected apps can be used for triggers and MCP integrations.
       </p>
 
-      {/* Provider Selector */}
-      <div className="flex items-center gap-2 mb-4">
-        <span className="text-xs text-[#666]">Provider:</span>
-        <div className="flex gap-1 bg-[#111] border border-[#1a1a1a] rounded-lg p-0.5">
-          {providerOptions.map(p => (
-            <button
-              key={p.id}
-              onClick={() => setSelectedProvider(p.id)}
-              className={`px-3 py-1 rounded text-xs font-medium transition ${
-                selectedProvider === p.id
-                  ? "bg-[#1a1a1a] text-white"
-                  : "text-[#666] hover:text-[#888]"
-              }`}
-            >
-              {p.name}
-            </button>
-          ))}
+      {/* Provider Selector — only show if multiple configured */}
+      {providers.length > 1 && (
+        <div className="flex items-center gap-2 mb-4">
+          <span className="text-xs text-[#666]">Provider:</span>
+          <div className="flex gap-1 bg-[#111] border border-[#1a1a1a] rounded-lg p-0.5">
+            {providers.map(p => (
+              <button
+                key={p.id}
+                onClick={() => setSelectedProvider(p.id)}
+                className={`px-3 py-1 rounded text-xs font-medium transition ${
+                  selectedProvider === p.id
+                    ? "bg-[#1a1a1a] text-white"
+                    : "text-[#666] hover:text-[#888]"
+                }`}
+              >
+                {p.name}
+              </button>
+            ))}
+          </div>
         </div>
-      </div>
+      )}
 
-      <IntegrationsPanel
-        providerId={selectedProvider}
-        projectId={projectId}
-        hideMcpConfig
-        onBrowseTriggers={handleBrowseTriggers}
-      />
+      {providers.length === 0 ? (
+        <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-8 text-center">
+          <p className="text-[#666]">No integration providers configured.</p>
+          <p className="text-sm text-[#555] mt-1">Add API keys for Composio or AgentDojo in Settings.</p>
+        </div>
+      ) : (
+        <IntegrationsPanel
+          providerId={selectedProvider}
+          projectId={projectId}
+          hideMcpConfig
+          onBrowseTriggers={handleBrowseTriggers}
+        />
+      )}
 
       {/* Trigger Types Panel */}
       {browsingToolkit && (