apteva 0.4.20 → 0.4.29

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 {
@@ -26,9 +26,18 @@ export function AgentCard({ agent, selected, onSelect, onToggle, showProject }:
   const enabledFeatures = FEATURE_ICONS.filter(f => agent.features?.[f.key]);
   const mcpServers = agent.mcpServerDetails || [];
   const skills = agent.skillDetails || [];
-  const { isActive, type } = useAgentActivity(agent.id);
+  const { isActive, label: activityLabel } = 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
@@ -53,7 +62,7 @@ export function AgentCard({ agent, selected, onSelect, onToggle, showProject }:
             </p>
           )}
         </div>
-        <StatusBadge status={agent.status} isActive={isActive && agent.status === "running"} activityType={type} />
+        <StatusBadge status={agent.status} isActive={isActive && agent.status === "running"} activityLabel={activityLabel} />
       </div>
 
       {enabledFeatures.length > 0 && (
@@ -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>
@@ -136,11 +165,11 @@ export function AgentCard({ agent, selected, onSelect, onToggle, showProject }:
   );
 }
 
-function StatusBadge({ status, isActive, activityType }: { status: Agent["status"]; isActive?: boolean; activityType?: string }) {
-  if (status === "running" && isActive && activityType) {
+function StatusBadge({ status, isActive, activityLabel }: { status: Agent["status"]; isActive?: boolean; activityLabel?: string }) {
+  if (status === "running" && isActive && activityLabel) {
     return (
       <span className="px-2 py-1 rounded text-xs font-medium bg-green-500/20 text-green-400 animate-pulse">
-        {activityType}
+        {activityLabel}
       </span>
     );
   }

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

@@ -1,13 +1,13 @@
 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 { getMultiAgentConfig } from "../../types";
+import type { Agent, Provider, AgentFeatures, McpServer, SkillSummary, AgentMode, MultiAgentConfig, OperatorConfig, Task } from "../../types";
+import { getMultiAgentConfig, getOperatorConfig } 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>
@@ -970,7 +1123,17 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
   const [availableMcpServers, setAvailableMcpServers] = useState<McpServer[]>([]);
   const [availableSkills, setAvailableSkills] = useState<AvailableSkill[]>([]);
   const [apiKey, setApiKey] = useState<string | null>(null);
+  const [apiKeyFull, setApiKeyFull] = 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(() => {
@@ -986,22 +1149,22 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
     fetchMcpServers();
   }, [authFetch]);
 
-  // Fetch API key (dev mode only)
+  // Fetch API key
   useEffect(() => {
-    if (!isDev) return;
     const fetchApiKey = async () => {
       try {
         const res = await authFetch(`/api/agents/${agent.id}/api-key`);
         if (res.ok) {
           const data = await res.json();
           setApiKey(data.apiKey);
+          setApiKeyFull(data.fullKey || null);
         }
       } catch (e) {
         // Ignore - not critical
       }
     };
     fetchApiKey();
-  }, [agent.id, isDev, authFetch]);
+  }, [agent.id, authFetch]);
 
   // Fetch available skills
   useEffect(() => {
@@ -1055,19 +1218,13 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
   const toggleFeature = (key: keyof AgentFeatures) => {
     if (key === "agents") {
       // Special handling for agents feature - convert to MultiAgentConfig
-      const current = prev => {
-        const agentConfig = getMultiAgentConfig(prev.features, agent.projectId);
-        return agentConfig.enabled;
-      };
       setForm(prev => {
         const isEnabled = typeof prev.features.agents === "boolean"
           ? prev.features.agents
           : (prev.features.agents as MultiAgentConfig)?.enabled ?? false;
         if (isEnabled) {
-          // Turning off - set to false
           return { ...prev, features: { ...prev.features, agents: false } };
         } else {
-          // Turning on - set to config with defaults
           return {
             ...prev,
             features: {
@@ -1077,6 +1234,22 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
           };
         }
       });
+    } else if (key === "operator") {
+      // Special handling for operator feature - convert to OperatorConfig
+      setForm(prev => {
+        const opConfig = getOperatorConfig(prev.features);
+        if (opConfig.enabled) {
+          return { ...prev, features: { ...prev.features, operator: false } };
+        } else {
+          return {
+            ...prev,
+            features: {
+              ...prev.features,
+              operator: { enabled: true },
+            },
+          };
+        }
+      });
     } else {
       setForm(prev => ({
         ...prev,
@@ -1112,6 +1285,33 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
     return config.mode || "worker";
   };
 
+  // Helper to check if operator feature is enabled
+  const isOperatorEnabled = () => {
+    return getOperatorConfig(form.features).enabled;
+  };
+
+  // Get current operator config
+  const getOperatorCfg = (): OperatorConfig => {
+    return getOperatorConfig(form.features);
+  };
+
+  // Get browser providers from the providers list
+  const browserProviders = providers.filter(p => p.type === "browser" && p.hasKey);
+
+  // Set operator browser provider
+  const setOperatorBrowserProvider = (browserProvider: string) => {
+    setForm(prev => {
+      const current = getOperatorConfig(prev.features);
+      return {
+        ...prev,
+        features: {
+          ...prev.features,
+          operator: { ...current, enabled: true, browser_provider: browserProvider },
+        },
+      };
+    });
+  };
+
   const toggleMcpServer = (serverId: string) => {
     setForm(prev => ({
       ...prev,
@@ -1191,8 +1391,10 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
         <FormField label="Features">
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
             {FEATURE_CONFIG.map(({ key, label, description, icon: Icon }) => {
-              // For agents feature, check the enabled property of the config
-              const isEnabled = key === "agents" ? isAgentsEnabled() : !!form.features[key];
+              // For agents/operator features, check the enabled property of the config
+              const isEnabled = key === "agents" ? isAgentsEnabled()
+                : key === "operator" ? isOperatorEnabled()
+                : !!form.features[key];
               return (
                 <button
                   key={key}
@@ -1258,6 +1460,29 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
           </FormField>
         )}
 
+        {/* Operator Browser Provider - shown when operator is enabled */}
+        {isOperatorEnabled() && (
+          <FormField label="Browser Provider">
+            {browserProviders.length > 0 ? (
+              <Select
+                value={getOperatorCfg().browser_provider || ""}
+                options={[
+                  { value: "", label: "Auto (first available)" },
+                  ...browserProviders.map(p => ({
+                    value: p.id,
+                    label: p.name,
+                  })),
+                ]}
+                onChange={(value) => setOperatorBrowserProvider(value)}
+              />
+            ) : (
+              <p className="text-sm text-[#666] p-3 border border-[#222] rounded bg-[#0a0a0a]">
+                No browser providers configured. Go to Settings &rarr; Providers to add one.
+              </p>
+            )}
+          </FormField>
+        )}
+
         {/* Agent Built-in Tools - Anthropic only */}
         {form.provider === "anthropic" && (
         <FormField label="Agent Built-in Tools">
@@ -1443,8 +1668,30 @@ 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 && (
+        {apiKey && (
           <div className="mt-8 pt-6 border-t border-[#222]">
             <p className="text-sm text-[#666] mb-3">Developer Info</p>
             <div className="space-y-2">
@@ -1466,17 +1713,15 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
                     {showApiKey ? "Hide" : "Show"}
                   </button>
                 </div>
-                {showApiKey && (
-                  <code className="text-xs bg-[#1a1a1a] px-2 py-1 rounded text-[#888] break-all">
-                    {apiKey}
-                  </code>
-                )}
+                <code className="text-xs bg-[#1a1a1a] px-2 py-1 rounded text-[#888] break-all">
+                  {showApiKey ? (apiKeyFull || apiKey) : apiKey}
+                </code>
               </div>
               {agent.status === "running" && agent.port && (
                 <div className="flex flex-col gap-1 mt-2">
                   <span className="text-xs text-[#666]">Test with curl</span>
                   <code className="text-xs bg-[#1a1a1a] px-2 py-1.5 rounded text-[#666] break-all">
-                    curl -H "X-API-Key: {showApiKey ? apiKey : "***"}" http://localhost:{agent.port}/config
+                    curl -H "X-API-Key: {showApiKey ? (apiKeyFull || apiKey) : "***"}" http://localhost:{agent.port}/config
                   </code>
                 </div>
               )}

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 && (