apteva 0.4.17 → 0.4.19

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

@@ -0,0 +1,1169 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useAuth, useProjects } from "../../context";
+import { Select } from "../common";
+
+interface TriggerType {
+  slug: string;
+  name: string;
+  description: string;
+  type: "webhook" | "poll";
+  toolkit_slug: string;
+  toolkit_name: string;
+  logo: string | null;
+  config_schema: Record<string, unknown>;
+  payload_schema: Record<string, unknown>;
+}
+
+interface TriggerInstance {
+  id: string;
+  trigger_slug: string;
+  connected_account_id: string | null;
+  status: "active" | "disabled";
+  config: Record<string, unknown>;
+  created_at: string;
+}
+
+interface Subscription {
+  id: string;
+  trigger_slug: string;
+  trigger_instance_id: string | null;
+  agent_id: string;
+  enabled: boolean;
+  project_id: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+interface ConnectedAccount {
+  id: string;
+  appId: string;
+  appName: string;
+  status: string;
+}
+
+interface Agent {
+  id: string;
+  name: string;
+  status: string;
+  port: number | null;
+}
+
+interface TriggerProviderInfo {
+  id: string;
+  name: string;
+  connected: boolean;
+}
+
+export function TriggersTab() {
+  const { authFetch } = useAuth();
+  const { currentProjectId } = useProjects();
+
+  // Provider selection
+  const [providers, setProviders] = useState<TriggerProviderInfo[]>([]);
+  const [selectedProvider, setSelectedProvider] = useState("composio");
+
+  // Trigger instances (from selected provider)
+  const [triggers, setTriggers] = useState<TriggerInstance[]>([]);
+  const [triggersLoading, setTriggersLoading] = useState(true);
+
+  // Subscriptions (local routing)
+  const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
+
+  // Browse trigger types
+  const [triggerTypes, setTriggerTypes] = useState<TriggerType[]>([]);
+  const [typesLoading, setTypesLoading] = useState(false);
+  const [toolkitFilter, setToolkitFilter] = useState("");
+  const [typeSearch, setTypeSearch] = useState("");
+
+  // Create trigger
+  const [showCreate, setShowCreate] = useState(false);
+  const [selectedType, setSelectedType] = useState<TriggerType | null>(null);
+  const [connectedAccounts, setConnectedAccounts] = useState<ConnectedAccount[]>([]);
+  const [selectedAccountId, setSelectedAccountId] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [createAgentId, setCreateAgentId] = useState(""); // For AgentDojo direct subscription flow
+  const [browseConfig, setBrowseConfig] = useState<Record<string, string>>({});
+
+  // AgentDojo add subscription modal — uses composio as data source (same as Integrations tab)
+  const [showAddDojo, setShowAddDojo] = useState(false);
+  const [dojoTriggerTypes, setDojoTriggerTypes] = useState<TriggerType[]>([]);
+  const [dojoTypesLoading, setDojoTypesLoading] = useState(false);
+  const [dojoAccounts, setDojoAccounts] = useState<ConnectedAccount[]>([]);
+  const [dojoSelectedType, setDojoSelectedType] = useState<string>("");
+  const [dojoAgentId, setDojoAgentId] = useState("");
+  const [dojoCreating, setDojoCreating] = useState(false);
+  const [dojoTypeSearch, setDojoTypeSearch] = useState("");
+  const [dojoConfig, setDojoConfig] = useState<Record<string, string>>({});
+
+  // Add subscription
+  const [showAddSub, setShowAddSub] = useState(false);
+  const [subTriggerId, setSubTriggerId] = useState("");
+  const [subAgentId, setSubAgentId] = useState("");
+  const [addingSub, setAddingSub] = useState(false);
+
+  // Agents
+  const [agents, setAgents] = useState<Agent[]>([]);
+
+  const [error, setError] = useState<string | null>(null);
+
+  const projectParam = currentProjectId && currentProjectId !== "unassigned" ? `?project_id=${currentProjectId}` : "";
+
+  // Fetch available providers
+  const fetchProviders = useCallback(async () => {
+    try {
+      const res = await authFetch(`/api/triggers/providers${projectParam}`);
+      if (res.ok) {
+        const data = await res.json();
+        setProviders(data.providers || []);
+      }
+    } catch (e) {
+      console.error("Failed to fetch providers:", e);
+    }
+  }, [authFetch]);
+
+  // Fetch active triggers
+  const fetchTriggers = useCallback(async () => {
+    setTriggersLoading(true);
+    try {
+      const providerParam = `provider=${selectedProvider}`;
+      const sep = projectParam ? "&" : "?";
+      const url = projectParam
+        ? `/api/triggers${projectParam}&${providerParam}`
+        : `/api/triggers?${providerParam}`;
+      const res = await authFetch(url);
+      if (res.ok) {
+        const data = await res.json();
+        setTriggers(data.triggers || []);
+      }
+    } catch (e) {
+      console.error("Failed to fetch triggers:", e);
+    }
+    setTriggersLoading(false);
+  }, [authFetch, projectParam, selectedProvider]);
+
+  // Fetch subscriptions
+  const fetchSubscriptions = useCallback(async () => {
+    try {
+      const res = await authFetch(`/api/subscriptions${projectParam}`);
+      if (res.ok) {
+        const data = await res.json();
+        setSubscriptions(data.subscriptions || []);
+      }
+    } catch (e) {
+      console.error("Failed to fetch subscriptions:", e);
+    }
+  }, [authFetch, projectParam]);
+
+  // Fetch agents
+  const fetchAgents = useCallback(async () => {
+    try {
+      const res = await authFetch(`/api/agents`);
+      if (res.ok) {
+        const data = await res.json();
+        setAgents(data.agents || []);
+      }
+    } catch (e) {
+      // Ignore
+    }
+  }, [authFetch]);
+
+  useEffect(() => {
+    fetchProviders();
+    fetchTriggers();
+    fetchSubscriptions();
+    fetchAgents();
+  }, [fetchProviders, fetchTriggers, fetchSubscriptions, fetchAgents]);
+
+  // Browse trigger types
+  const browseTriggerTypes = async (toolkit?: string) => {
+    setTypesLoading(true);
+    try {
+      let url = `/api/triggers/types?provider=${selectedProvider}`;
+      if (toolkit) url += `&toolkit_slugs=${toolkit}`;
+      if (currentProjectId && currentProjectId !== "unassigned") url += `&project_id=${currentProjectId}`;
+      const res = await authFetch(url);
+      if (res.ok) {
+        const data = await res.json();
+        setTriggerTypes(data.types || []);
+      } else {
+        const data = await res.json();
+        setError(data.error || "Failed to fetch trigger types");
+      }
+    } catch (e) {
+      setError("Failed to fetch trigger types");
+    }
+    setTypesLoading(false);
+  };
+
+  // Fetch connected accounts when creating
+  const fetchConnectedAccounts = async () => {
+    try {
+      const res = await authFetch(`/api/integrations/${selectedProvider}/connected${projectParam}`);
+      if (res.ok) {
+        const data = await res.json();
+        setConnectedAccounts((data.accounts || []).filter((a: ConnectedAccount) => a.status === "active"));
+      }
+    } catch (e) {
+      // Ignore
+    }
+  };
+
+  // Start create flow
+  const startCreate = (triggerType: TriggerType) => {
+    setSelectedType(triggerType);
+    setSelectedAccountId("");
+    setCreateAgentId("");
+    setBrowseConfig({});
+    setShowCreate(true);
+    fetchConnectedAccounts();
+  };
+
+  const isAgentDojo = selectedProvider === "agentdojo";
+
+  // Open AgentDojo add subscription modal — fetches from agentdojo provider (same as Integrations tab)
+  const openAddDojoSub = async () => {
+    setShowAddDojo(true);
+    setDojoSelectedType("");
+    setDojoAgentId("");
+    setDojoTypeSearch("");
+    setDojoConfig({});
+
+    console.log("[openAddDojoSub] Opening modal, selectedProvider:", selectedProvider);
+    console.log("[openAddDojoSub] currentProjectId:", currentProjectId, "projectParam:", projectParam);
+    console.log("[openAddDojoSub] existing dojoTriggerTypes:", dojoTriggerTypes.length, "dojoAccounts:", dojoAccounts.length);
+
+    // Fetch trigger types from agentdojo (same provider as Integrations tab uses)
+    const loadTypes = async () => {
+      if (dojoTriggerTypes.length > 0) {
+        console.log("[openAddDojoSub] Already have", dojoTriggerTypes.length, "trigger types, skipping fetch");
+        return;
+      }
+      setDojoTypesLoading(true);
+      try {
+        let url = `/api/triggers/types?provider=agentdojo`;
+        if (currentProjectId && currentProjectId !== "unassigned") url += `&project_id=${currentProjectId}`;
+        console.log("[openAddDojoSub] Fetching trigger types:", url);
+        const res = await authFetch(url);
+        const data = await res.json();
+        console.log("[openAddDojoSub] Trigger types response:", res.status, "ok:", res.ok, "types count:", (data.types || []).length, "error:", data.error);
+        if (data.types && data.types.length > 0) {
+          console.log("[openAddDojoSub] Sample trigger type:", JSON.stringify(data.types[0]));
+        }
+        setDojoTriggerTypes(data.types || []);
+      } catch (e) {
+        console.error("[openAddDojoSub] Failed to load trigger types:", e);
+      }
+      setDojoTypesLoading(false);
+    };
+
+    // Fetch connected accounts from agentdojo (same as Integrations tab)
+    const loadAccounts = async () => {
+      try {
+        const url = `/api/integrations/agentdojo/connected${projectParam}`;
+        console.log("[openAddDojoSub] Fetching connected accounts:", url);
+        const res = await authFetch(url);
+        const data = await res.json();
+        console.log("[openAddDojoSub] Connected accounts response:", res.status, "ok:", res.ok, "accounts count:", (data.accounts || []).length, "error:", data.error);
+        if (data.accounts && data.accounts.length > 0) {
+          console.log("[openAddDojoSub] Sample account:", JSON.stringify(data.accounts[0]));
+        }
+        const active = (data.accounts || []).filter((a: ConnectedAccount) => a.status === "active");
+        console.log("[openAddDojoSub] Active accounts:", active.length);
+        setDojoAccounts(active);
+      } catch (e) {
+        console.error("[openAddDojoSub] Failed to load connected accounts:", e);
+      }
+    };
+
+    await Promise.all([loadTypes(), loadAccounts()]);
+  };
+
+  // Create AgentDojo subscription from the add-subscription modal
+  const handleAddDojoSub = async () => {
+    const tt = dojoTriggerTypes.find(t => t.slug === dojoSelectedType);
+    const matched = tt ? matchAccount(dojoAccounts, tt.toolkit_slug) : null;
+    console.log("[handleAddDojoSub] tt:", tt?.slug, "matched:", matched?.id, matched?.appName, "agentId:", dojoAgentId);
+    if (!tt || !dojoAgentId || !matched) return;
+
+    setDojoCreating(true);
+    setError(null);
+    try {
+      const agent = agents.find(a => a.id === dojoAgentId);
+      const providerParam = `provider=agentdojo`;
+      const url = projectParam
+        ? `/api/triggers${projectParam}&${providerParam}`
+        : `/api/triggers?${providerParam}`;
+      const configPayload = {
+        callback_url: `${window.location.origin}/api/webhooks/agentdojo`,
+        title: `${tt.name} → ${agent?.name || "Agent"}`,
+        server: tt.toolkit_slug,
+        agent_id: dojoAgentId,
+        ...dojoConfig, // Merge dynamic config fields (e.g. owner, repo for GitHub)
+      };
+      console.log("[handleAddDojoSub] config:", JSON.stringify(configPayload));
+      const res = await authFetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          slug: tt.slug,
+          connectedAccountId: matched.id,
+          config: configPayload,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || "Failed to create subscription");
+      } else {
+        setShowAddDojo(false);
+        fetchTriggers();
+      }
+    } catch (e: any) {
+      setError(e.message || "Failed to create subscription");
+    }
+    setDojoCreating(false);
+  };
+
+  // Create trigger (Composio: trigger instance, AgentDojo: subscription + agent routing)
+  const handleCreate = async () => {
+    if (!selectedType) return;
+
+    // AgentDojo: create remote subscription directly (callback_url points to apteva webhook handler)
+    if (isAgentDojo) {
+      if (!createAgentId || !browseMatchedAccount) return;
+      setCreating(true);
+      setError(null);
+      try {
+        const agent = agents.find(a => a.id === createAgentId);
+        const instanceUrl = window.location.origin;
+        const providerParam = `provider=${selectedProvider}`;
+        const url = projectParam
+          ? `/api/triggers${projectParam}&${providerParam}`
+          : `/api/triggers?${providerParam}`;
+        const res = await authFetch(url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            slug: selectedType.slug,
+            connectedAccountId: browseMatchedAccount.id,
+            config: {
+              callback_url: `${instanceUrl}/api/webhooks/agentdojo`,
+              title: `${selectedType.name} → ${agent?.name || "Agent"}`,
+              server: selectedType.toolkit_slug,
+              agent_id: createAgentId,
+              ...browseConfig, // Dynamic config fields (e.g. owner, repo)
+            },
+          }),
+        });
+        const data = await res.json();
+        if (!res.ok) {
+          setError(data.error || "Failed to create subscription");
+        } else {
+          setShowCreate(false);
+          setSelectedType(null);
+          fetchTriggers();
+        }
+      } catch (e: any) {
+        setError(e.message || "Failed to create subscription");
+      }
+      setCreating(false);
+      return;
+    }
+
+    // Composio: standard trigger instance creation
+    if (!selectedAccountId) return;
+    setCreating(true);
+    setError(null);
+    try {
+      const providerParam = `provider=${selectedProvider}`;
+      const url = projectParam
+        ? `/api/triggers${projectParam}&${providerParam}`
+        : `/api/triggers?${providerParam}`;
+      const res = await authFetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          slug: selectedType.slug,
+          connectedAccountId: selectedAccountId,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || "Failed to create trigger");
+      } else {
+        setShowCreate(false);
+        setSelectedType(null);
+        fetchTriggers();
+      }
+    } catch (e: any) {
+      setError(e.message || "Failed to create trigger");
+    }
+    setCreating(false);
+  };
+
+  // Enable/disable trigger
+  const toggleTrigger = async (triggerId: string, currentStatus: string) => {
+    const action = currentStatus === "active" ? "disable" : "enable";
+    try {
+      const providerQ = projectParam ? `&provider=${selectedProvider}` : `?provider=${selectedProvider}`;
+      const res = await authFetch(`/api/triggers/${triggerId}/${action}${projectParam}${providerQ}`, {
+        method: "POST",
+      });
+      if (res.ok) {
+        fetchTriggers();
+      } else {
+        const data = await res.json();
+        setError(data.error || `Failed to ${action} trigger`);
+      }
+    } catch (e) {
+      setError(`Failed to ${action} trigger`);
+    }
+  };
+
+  // Delete trigger
+  const deleteTrigger = async (triggerId: string) => {
+    try {
+      const providerQ = projectParam ? `&provider=${selectedProvider}` : `?provider=${selectedProvider}`;
+      const res = await authFetch(`/api/triggers/${triggerId}${projectParam}${providerQ}`, {
+        method: "DELETE",
+      });
+      if (res.ok) {
+        fetchTriggers();
+      } else {
+        const data = await res.json();
+        setError(data.error || "Failed to delete trigger");
+      }
+    } catch (e) {
+      setError("Failed to delete trigger");
+    }
+  };
+
+  // Add subscription — backend auto-creates webhook if needed
+  const handleAddSubscription = async () => {
+    if (!subTriggerId || !subAgentId) return;
+
+    // Find the trigger instance to get its slug
+    const trigger = triggers.find(t => t.id === subTriggerId);
+    if (!trigger) return;
+
+    setAddingSub(true);
+    setError(null);
+    try {
+      const res = await authFetch(`/api/subscriptions`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          trigger_slug: trigger.trigger_slug,
+          trigger_instance_id: trigger.id,
+          agent_id: subAgentId,
+          provider: selectedProvider,
+          project_id: currentProjectId && currentProjectId !== "unassigned" ? currentProjectId : null,
+          public_url: window.location.origin,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || "Failed to create subscription");
+      } else {
+        setShowAddSub(false);
+        setSubTriggerId("");
+        setSubAgentId("");
+        fetchSubscriptions();
+      }
+    } catch (e: any) {
+      setError(e.message || "Failed to create subscription");
+    }
+    setAddingSub(false);
+  };
+
+  // Toggle subscription
+  const toggleSubscription = async (sub: Subscription) => {
+    const action = sub.enabled ? "disable" : "enable";
+    try {
+      const res = await authFetch(`/api/subscriptions/${sub.id}/${action}`, {
+        method: "POST",
+      });
+      if (res.ok) fetchSubscriptions();
+    } catch (e) {
+      setError(`Failed to ${action} subscription`);
+    }
+  };
+
+  // Delete subscription
+  const deleteSubscription = async (id: string) => {
+    try {
+      const res = await authFetch(`/api/subscriptions/${id}`, {
+        method: "DELETE",
+      });
+      if (res.ok) fetchSubscriptions();
+    } catch (e) {
+      setError("Failed to delete subscription");
+    }
+  };
+
+  // Filter trigger types by search
+  const filteredTypes = triggerTypes.filter(t => {
+    if (!typeSearch) return true;
+    const s = typeSearch.toLowerCase();
+    return t.name.toLowerCase().includes(s) || t.slug.toLowerCase().includes(s) || t.description.toLowerCase().includes(s);
+  });
+
+  // Auto-match connected account from toolkit slug
+  const matchAccount = (accounts: ConnectedAccount[], toolkitSlug: string): ConnectedAccount | null => {
+    if (!toolkitSlug || accounts.length === 0) return null;
+    const slug = toolkitSlug.toLowerCase();
+    return accounts.find(a =>
+      a.appId?.toLowerCase() === slug ||
+      a.appName?.toLowerCase() === slug ||
+      a.appId?.toLowerCase().includes(slug) ||
+      a.appName?.toLowerCase().includes(slug)
+    ) || null;
+  };
+
+  // Derived: auto-matched account for Add Subscription modal
+  const dojoSelectedTriggerType = dojoTriggerTypes.find(t => t.slug === dojoSelectedType);
+  const dojoMatchedAccount = dojoSelectedTriggerType ? matchAccount(dojoAccounts, dojoSelectedTriggerType.toolkit_slug) : null;
+
+  // Derived: auto-matched account for Browse Subscribe modal
+  const browseMatchedAccount = selectedType && isAgentDojo ? matchAccount(connectedAccounts, selectedType.toolkit_slug) : null;
+
+  // Agent map for quick lookups
+  const agentMap = new Map(agents.map(a => [a.id, a]));
+
+  return (
+    <div className="space-y-6">
+      {/* Error */}
+      {error && (
+        <div className="text-red-400 text-sm p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center justify-between">
+          <span>{error}</span>
+          <button onClick={() => setError(null)} className="text-red-400 hover:text-red-300">x</button>
+        </div>
+      )}
+
+      {/* Provider Selector */}
+      {providers.length > 1 && (
+        <div className="flex items-center gap-2">
+          <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);
+                  setTriggerTypes([]);
+                  setToolkitFilter("");
+                  setTypeSearch("");
+                }}
+                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}
+                {!p.connected && (
+                  <span className="ml-1 text-[10px] text-yellow-500" title="API key not configured">!</span>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Subscriptions (trigger → agent routing) — hide entirely for AgentDojo (handled in Active Subscriptions) */}
+      {!isAgentDojo && (
+      <section>
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-sm font-medium text-[#888]">
+            Subscriptions ({subscriptions.length})
+          </h3>
+          <button
+            onClick={() => setShowAddSub(true)}
+            className="text-xs bg-[#1a1a1a] hover:bg-[#222] border border-[#333] hover:border-[#f97316] px-3 py-1.5 rounded transition"
+          >
+            + Add Subscription
+          </button>
+        </div>
+
+        {subscriptions.length === 0 ? (
+          <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-6 text-center text-[#666] text-sm">
+            No subscriptions yet. Add one to route trigger events to an agent.
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {subscriptions.map(sub => {
+              const agent = agentMap.get(sub.agent_id);
+              return (
+                <div key={sub.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-3 flex items-center gap-3">
+                  <div className={`w-2 h-2 rounded-full flex-shrink-0 ${sub.enabled ? "bg-green-400" : "bg-[#666]"}`} />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium truncate">
+                      {sub.trigger_slug.replace(/_/g, " ")}
+                      <span className="text-[#555] mx-1.5">&rarr;</span>
+                      <span className="text-[#f97316]">{agent?.name || "Unknown Agent"}</span>
+                    </div>
+                    <div className="text-xs text-[#666]">
+                      {sub.trigger_instance_id
+                        ? `Instance: ${sub.trigger_instance_id.slice(0, 12)}...`
+                        : "All instances"
+                      }
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 flex-shrink-0">
+                    <button
+                      onClick={() => toggleSubscription(sub)}
+                      className={`text-xs px-3 py-1 rounded transition ${
+                        sub.enabled
+                          ? "bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20"
+                          : "bg-green-500/10 text-green-400 hover:bg-green-500/20"
+                      }`}
+                    >
+                      {sub.enabled ? "Disable" : "Enable"}
+                    </button>
+                    <button
+                      onClick={() => deleteSubscription(sub.id)}
+                      className="text-xs text-[#666] hover:text-red-400 transition px-2"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </section>
+      )}
+
+      {/* Trigger Instances — only show for providers that have them (not AgentDojo) */}
+      {!isAgentDojo && (
+        <section>
+          <h3 className="text-sm font-medium text-[#888] mb-3">
+            Trigger Instances ({triggers.length})
+          </h3>
+          {triggersLoading ? (
+            <div className="text-center py-6 text-[#666] text-sm">Loading triggers...</div>
+          ) : triggers.length === 0 ? (
+            <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-6 text-center text-[#666] text-sm">
+              No trigger instances. Browse trigger types below to create one.
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {triggers.map(trigger => (
+                <div key={trigger.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-3 flex items-center gap-3">
+                  <div className={`w-2 h-2 rounded-full flex-shrink-0 ${trigger.status === "active" ? "bg-green-400" : "bg-[#666]"}`} />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium truncate">
+                      {trigger.trigger_slug.replace(/_/g, " ")}
+                    </div>
+                    <div className="text-xs text-[#666]">
+                      ID: {trigger.id.slice(0, 12)}... | Created: {new Date(trigger.created_at).toLocaleDateString()}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 flex-shrink-0">
+                    <button
+                      onClick={() => toggleTrigger(trigger.id, trigger.status)}
+                      className={`text-xs px-3 py-1 rounded transition ${
+                        trigger.status === "active"
+                          ? "bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20"
+                          : "bg-green-500/10 text-green-400 hover:bg-green-500/20"
+                      }`}
+                    >
+                      {trigger.status === "active" ? "Disable" : "Enable"}
+                    </button>
+                    <button
+                      onClick={() => deleteTrigger(trigger.id)}
+                      className="text-xs text-[#666] hover:text-red-400 transition px-2"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+      )}
+
+      {/* AgentDojo Active Subscriptions — shows remote subscriptions directly */}
+      {isAgentDojo && (
+        <section>
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-sm font-medium text-[#888]">
+              Active Subscriptions ({triggers.length})
+            </h3>
+            <button
+              onClick={openAddDojoSub}
+              className="text-xs bg-[#1a1a1a] hover:bg-[#222] border border-[#333] hover:border-[#f97316] px-3 py-1.5 rounded transition"
+            >
+              + Add Subscription
+            </button>
+          </div>
+          {triggersLoading ? (
+            <div className="text-center py-6 text-[#666] text-sm">Loading subscriptions...</div>
+          ) : triggers.length === 0 ? (
+            <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-6 text-center text-[#666] text-sm">
+              No active subscriptions. Browse trigger types below to create one.
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {triggers.map(trigger => {
+                const localSub = subscriptions.find(s => s.trigger_instance_id === trigger.id);
+                const agent = localSub ? agentMap.get(localSub.agent_id) : null;
+                return (
+                  <div key={trigger.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-3 flex items-center gap-3">
+                    <div className={`w-2 h-2 rounded-full flex-shrink-0 ${trigger.status === "active" ? "bg-green-400" : "bg-[#666]"}`} />
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-medium truncate">
+                        {(trigger.config?.title as string) || trigger.trigger_slug.replace(/_/g, " ")}
+                        {agent && (
+                          <>
+                            <span className="text-[#555] mx-1.5">&rarr;</span>
+                            <span className="text-[#f97316]">{agent.name}</span>
+                          </>
+                        )}
+                      </div>
+                      <div className="text-xs text-[#666]">
+                        {trigger.config?.server && <span>{String(trigger.config.server)} | </span>}
+                        ID: {String(trigger.id).slice(0, 8)} | Created: {new Date(trigger.created_at).toLocaleDateString()}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 flex-shrink-0">
+                      <button
+                        onClick={() => toggleTrigger(trigger.id, trigger.status)}
+                        className={`text-xs px-3 py-1 rounded transition ${
+                          trigger.status === "active"
+                            ? "bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20"
+                            : "bg-green-500/10 text-green-400 hover:bg-green-500/20"
+                        }`}
+                      >
+                        {trigger.status === "active" ? "Disable" : "Enable"}
+                      </button>
+                      <button
+                        onClick={() => deleteTrigger(trigger.id)}
+                        className="text-xs text-[#666] hover:text-red-400 transition px-2"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </section>
+      )}
+
+      {/* Browse Trigger Types */}
+      <section>
+        <h3 className="text-sm font-medium text-[#888] mb-3">Browse Trigger Types</h3>
+        <div className="flex gap-2 mb-3">
+          <input
+            type="text"
+            value={toolkitFilter}
+            onChange={(e) => setToolkitFilter(e.target.value)}
+            placeholder="Toolkit filter (e.g. github, gmail, slack)"
+            className="flex-1 bg-[#111] border border-[#333] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316]"
+          />
+          <button
+            onClick={() => browseTriggerTypes(toolkitFilter || undefined)}
+            disabled={typesLoading}
+            className="text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] hover:border-[#f97316] px-4 py-2 rounded transition disabled:opacity-50"
+          >
+            {typesLoading ? "Loading..." : "Browse"}
+          </button>
+        </div>
+
+        {triggerTypes.length > 0 && (
+          <>
+            <input
+              type="text"
+              value={typeSearch}
+              onChange={(e) => setTypeSearch(e.target.value)}
+              placeholder="Search trigger types..."
+              className="w-full bg-[#111] border border-[#333] rounded px-3 py-2 text-sm mb-3 focus:outline-none focus:border-[#f97316]"
+            />
+            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+              {filteredTypes.slice(0, 30).map(tt => (
+                <div key={tt.slug} className="bg-[#111] border border-[#1a1a1a] hover:border-[#333] rounded-lg p-3 transition">
+                  <div className="flex items-start gap-3">
+                    {tt.logo ? (
+                      <img src={tt.logo} alt={tt.toolkit_name} className="w-8 h-8 rounded object-contain flex-shrink-0" />
+                    ) : (
+                      <div className="w-8 h-8 rounded bg-[#1a1a1a] flex items-center justify-center text-xs flex-shrink-0">
+                        {tt.toolkit_name?.[0]?.toUpperCase() || "?"}
+                      </div>
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-medium truncate">{tt.name}</div>
+                      <div className="text-xs text-[#666]">{tt.toolkit_name}</div>
+                      <div className="text-xs text-[#555] mt-1 line-clamp-2">{tt.description}</div>
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => startCreate(tt)}
+                    className="w-full mt-3 text-xs bg-[#1a1a1a] hover:bg-[#222] border border-[#333] hover:border-[#f97316] px-3 py-1.5 rounded transition"
+                  >
+                    {isAgentDojo ? "Subscribe" : "Create Trigger"}
+                  </button>
+                </div>
+              ))}
+            </div>
+            {filteredTypes.length > 30 && (
+              <p className="text-xs text-[#555] mt-3 text-center">
+                Showing first 30 of {filteredTypes.length} types. Use search to filter.
+              </p>
+            )}
+          </>
+        )}
+      </section>
+
+      {/* Create Trigger Modal */}
+      {showCreate && selectedType && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-md mx-4">
+            <h3 className="font-medium mb-1">
+              {isAgentDojo ? "Create Subscription" : "Create Trigger"}
+            </h3>
+            <p className="text-xs text-[#666] mb-4">
+              {selectedType.name}
+              {selectedType.toolkit_name && <span className="text-[#555]"> ({selectedType.toolkit_name})</span>}
+            </p>
+
+            <div className="space-y-4">
+              {/* Connected Account — only for Composio */}
+              {!isAgentDojo && (
+                <div>
+                  <label className="block text-xs text-[#888] mb-1.5">Connected Account</label>
+                  {connectedAccounts.length === 0 ? (
+                    <div className="text-xs text-[#666] bg-[#0a0a0a] rounded p-3">
+                      No connected accounts available. Connect an app first in the Integrations tab.
+                    </div>
+                  ) : (
+                    <Select
+                      value={selectedAccountId}
+                      onChange={setSelectedAccountId}
+                      placeholder="Select account..."
+                      options={connectedAccounts.map(acc => ({
+                        value: acc.id,
+                        label: `${acc.appName} (${acc.id.slice(0, 8)}...)`,
+                      }))}
+                    />
+                  )}
+                </div>
+              )}
+
+              {/* Agent selection — for AgentDojo direct subscription */}
+              {isAgentDojo && (
+                <div>
+                  <label className="block text-xs text-[#888] mb-1.5">Route to Agent</label>
+                  {agents.length === 0 ? (
+                    <div className="text-xs text-[#666] bg-[#0a0a0a] rounded p-3">
+                      No agents available. Create an agent first.
+                    </div>
+                  ) : (
+                    <Select
+                      value={createAgentId}
+                      onChange={setCreateAgentId}
+                      placeholder="Select agent..."
+                      options={agents.map(agent => ({
+                        value: agent.id,
+                        label: `${agent.name} (${agent.status})`,
+                      }))}
+                    />
+                  )}
+
+                  {/* Connected account — auto-matched from toolkit */}
+                  <div className="mt-3">
+                    <label className="block text-xs text-[#888] mb-1.5">Connected Account</label>
+                    {browseMatchedAccount ? (
+                      <div className="text-xs text-green-400 bg-green-500/10 border border-green-500/20 rounded p-3">
+                        Connected: {browseMatchedAccount.appName}
+                      </div>
+                    ) : (
+                      <div className="text-xs text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded p-3">
+                        No connected account for {selectedType?.toolkit_name || "this app"}. Connect it first in the Integrations tab.
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Dynamic config fields from config_schema */}
+                  {selectedType.config_schema && Object.keys((selectedType.config_schema as any).properties || {}).length > 0 && (
+                    <div className="mt-3">
+                      <label className="block text-xs text-[#888] mb-1.5">Configuration</label>
+                      <div className="space-y-2">
+                        {Object.entries((selectedType.config_schema as any).properties || {}).map(([key, schema]: [string, any]) => {
+                          const required = ((selectedType.config_schema as any).required || []).includes(key);
+                          return (
+                            <div key={key}>
+                              <label className="block text-[11px] text-[#888] mb-1">
+                                {schema.title || key}
+                                {required && <span className="text-red-400 ml-0.5">*</span>}
+                              </label>
+                              <input
+                                type="text"
+                                value={browseConfig[key] || ""}
+                                onChange={(e) => setBrowseConfig(prev => ({ ...prev, [key]: e.target.value }))}
+                                placeholder={schema.description || `Enter ${schema.title || key}...`}
+                                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316]"
+                              />
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="flex gap-2 mt-4">
+              <button
+                onClick={() => { setShowCreate(false); setSelectedType(null); }}
+                className="flex-1 text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreate}
+                disabled={isAgentDojo ? (
+                  !createAgentId || !browseMatchedAccount || creating ||
+                  (selectedType?.config_schema && ((selectedType.config_schema as any).required || []).some((key: string) => !browseConfig[key]?.trim()))
+                ) : (!selectedAccountId || creating)}
+                className="flex-1 text-sm bg-[#f97316] hover:bg-[#ea580c] text-white px-4 py-2 rounded transition disabled:opacity-50"
+              >
+                {creating ? "Creating..." : isAgentDojo ? "Subscribe" : "Create"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Add Subscription Modal */}
+      {showAddSub && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-md mx-4">
+            <h3 className="font-medium mb-1">Route Trigger to Agent</h3>
+            <p className="text-xs text-[#666] mb-4">
+              {triggers.length === 0
+                ? "No trigger instances yet. Create one first from the Browse section below."
+                : "Select a trigger instance and the agent that should handle its events."
+              }
+            </p>
+
+            {triggers.length > 0 ? (
+              <>
+                <div className="space-y-4">
+                  <div>
+                    <label className="block text-xs text-[#888] mb-1.5">Trigger Instance</label>
+                    <Select
+                      value={subTriggerId}
+                      onChange={setSubTriggerId}
+                      placeholder="Select trigger..."
+                      options={triggers.map(t => ({
+                        value: t.id,
+                        label: `${t.trigger_slug.replace(/_/g, " ")}`,
+                      }))}
+                    />
+                    {subTriggerId && (
+                      <div className="text-xs text-[#555] mt-1 font-mono">
+                        ID: {subTriggerId.slice(0, 16)}...
+                      </div>
+                    )}
+                  </div>
+
+                  <div>
+                    <label className="block text-xs text-[#888] mb-1.5">Target Agent</label>
+                    <Select
+                      value={subAgentId}
+                      onChange={setSubAgentId}
+                      placeholder="Select agent..."
+                      options={agents.map(agent => ({
+                        value: agent.id,
+                        label: `${agent.name} (${agent.status})`,
+                      }))}
+                    />
+                  </div>
+                </div>
+
+                <div className="flex gap-2 mt-5">
+                  <button
+                    onClick={() => { setShowAddSub(false); setSubTriggerId(""); setSubAgentId(""); }}
+                    className="flex-1 text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleAddSubscription}
+                    disabled={!subTriggerId || !subAgentId || addingSub}
+                    className="flex-1 text-sm bg-[#f97316] hover:bg-[#ea580c] text-white px-4 py-2 rounded transition disabled:opacity-50"
+                  >
+                    {addingSub ? "Adding..." : "Add"}
+                  </button>
+                </div>
+              </>
+            ) : (
+              <div className="flex gap-2 mt-4">
+                <button
+                  onClick={() => setShowAddSub(false)}
+                  className="flex-1 text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+                >
+                  Close
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* AgentDojo Add Subscription Modal */}
+      {showAddDojo && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-lg mx-4">
+            <h3 className="font-medium mb-1">Add Subscription</h3>
+            <p className="text-xs text-[#666] mb-4">
+              Select a trigger from your connected apps and route it to an agent.
+            </p>
+
+            <div className="space-y-4">
+              {/* Trigger type selection */}
+              <div>
+                <label className="block text-xs text-[#888] mb-1.5">Trigger</label>
+                {dojoTypesLoading ? (
+                  <div className="text-xs text-[#666] bg-[#0a0a0a] rounded p-3">Loading triggers...</div>
+                ) : dojoTriggerTypes.length === 0 ? (
+                  <div className="text-xs text-[#666] bg-[#0a0a0a] rounded p-3">
+                    No triggers available. Connect an app first in the Integrations tab.
+                  </div>
+                ) : (
+                  <>
+                    <input
+                      type="text"
+                      value={dojoTypeSearch}
+                      onChange={(e) => setDojoTypeSearch(e.target.value)}
+                      placeholder="Search triggers..."
+                      className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 text-sm mb-2 focus:outline-none focus:border-[#f97316]"
+                    />
+                    <div className="max-h-48 overflow-y-auto border border-[#1a1a1a] rounded-lg">
+                      {dojoTriggerTypes
+                        .filter(t => {
+                          if (!dojoTypeSearch) return true;
+                          const s = dojoTypeSearch.toLowerCase();
+                          return t.name.toLowerCase().includes(s) || t.slug.toLowerCase().includes(s) || t.toolkit_name.toLowerCase().includes(s);
+                        })
+                        .slice(0, 50)
+                        .map(t => (
+                          <button
+                            key={t.slug}
+                            onClick={() => { setDojoSelectedType(t.slug); setDojoConfig({}); }}
+                            className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 transition border-b border-[#1a1a1a] last:border-0 ${
+                              dojoSelectedType === t.slug
+                                ? "bg-[#f97316]/10 text-[#f97316]"
+                                : "hover:bg-[#1a1a1a] text-[#ccc]"
+                            }`}
+                          >
+                            {t.logo ? (
+                              <img src={t.logo} alt="" className="w-5 h-5 rounded object-contain flex-shrink-0" />
+                            ) : (
+                              <div className="w-5 h-5 rounded bg-[#1a1a1a] flex items-center justify-center text-[10px] flex-shrink-0">
+                                {t.toolkit_name?.[0]?.toUpperCase() || "?"}
+                              </div>
+                            )}
+                            <div className="flex-1 min-w-0">
+                              <div className="truncate">{t.name}</div>
+                              <div className="text-[10px] text-[#666] truncate">{t.toolkit_name}</div>
+                            </div>
+                          </button>
+                        ))}
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {/* Connected account — auto-matched */}
+              {dojoSelectedType && (
+                <div>
+                  <label className="block text-xs text-[#888] mb-1.5">Connected Account</label>
+                  {dojoMatchedAccount ? (
+                    <div className="text-xs text-green-400 bg-green-500/10 border border-green-500/20 rounded p-3">
+                      Connected: {dojoMatchedAccount.appName}
+                    </div>
+                  ) : (
+                    <div className="text-xs text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded p-3">
+                      No connected account for {dojoSelectedTriggerType?.toolkit_name || "this app"}. Connect it first in the Integrations tab.
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Dynamic config fields from config_schema */}
+              {dojoSelectedTriggerType && dojoSelectedTriggerType.config_schema && Object.keys(dojoSelectedTriggerType.config_schema.properties || {}).length > 0 && (
+                <div>
+                  <label className="block text-xs text-[#888] mb-1.5">Configuration</label>
+                  <div className="space-y-2">
+                    {Object.entries((dojoSelectedTriggerType.config_schema as any).properties || {}).map(([key, schema]: [string, any]) => {
+                      const required = ((dojoSelectedTriggerType.config_schema as any).required || []).includes(key);
+                      return (
+                        <div key={key}>
+                          <label className="block text-[11px] text-[#888] mb-1">
+                            {schema.title || key}
+                            {required && <span className="text-red-400 ml-0.5">*</span>}
+                          </label>
+                          <input
+                            type="text"
+                            value={dojoConfig[key] || ""}
+                            onChange={(e) => setDojoConfig(prev => ({ ...prev, [key]: e.target.value }))}
+                            placeholder={schema.description || `Enter ${schema.title || key}...`}
+                            className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316]"
+                          />
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              {/* Agent selection */}
+              <div>
+                <label className="block text-xs text-[#888] mb-1.5">Target Agent</label>
+                {agents.length === 0 ? (
+                  <div className="text-xs text-[#666] bg-[#0a0a0a] rounded p-3">
+                    No agents available. Create an agent first.
+                  </div>
+                ) : (
+                  <Select
+                    value={dojoAgentId}
+                    onChange={setDojoAgentId}
+                    placeholder="Select agent..."
+                    options={agents.map(agent => ({
+                      value: agent.id,
+                      label: `${agent.name} (${agent.status})`,
+                    }))}
+                  />
+                )}
+              </div>
+            </div>
+
+            <div className="flex gap-2 mt-5">
+              <button
+                onClick={() => setShowAddDojo(false)}
+                className="flex-1 text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleAddDojoSub}
+                disabled={!dojoSelectedType || !dojoAgentId || !dojoMatchedAccount || dojoCreating || (
+                  dojoSelectedTriggerType?.config_schema &&
+                  ((dojoSelectedTriggerType.config_schema as any).required || []).some((key: string) => !dojoConfig[key]?.trim())
+                )}
+                className="flex-1 text-sm bg-[#f97316] hover:bg-[#ea580c] text-white px-4 py-2 rounded transition disabled:opacity-50"
+              >
+                {dojoCreating ? "Creating..." : "Subscribe"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}