apteva 0.4.20 → 0.4.29

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

@@ -41,6 +41,13 @@ interface ConnectedAccount {
   status: string;
 }
 
+interface IntegrationApp {
+  id: string;
+  name: string;
+  slug: string;
+  logo: string | null;
+}
+
 interface Agent {
   id: string;
   name: string;
@@ -58,9 +65,9 @@ export function TriggersTab() {
   const { authFetch } = useAuth();
   const { currentProjectId } = useProjects();
 
-  // Provider selection
+  // Provider selection — only show configured providers
   const [providers, setProviders] = useState<TriggerProviderInfo[]>([]);
-  const [selectedProvider, setSelectedProvider] = useState("composio");
+  const [selectedProvider, setSelectedProvider] = useState("");
 
   // Trigger instances (from selected provider)
   const [triggers, setTriggers] = useState<TriggerInstance[]>([]);
@@ -83,17 +90,24 @@ export function TriggersTab() {
   const [creating, setCreating] = useState(false);
   const [createAgentId, setCreateAgentId] = useState(""); // For AgentDojo direct subscription flow
   const [browseConfig, setBrowseConfig] = useState<Record<string, string>>({});
+  const [browseSelectedAccountId, setBrowseSelectedAccountId] = useState("");
 
-  // AgentDojo add subscription modal — uses composio as data source (same as Integrations tab)
+  // AgentDojo add subscription modal
   const [showAddDojo, setShowAddDojo] = useState(false);
   const [dojoTriggerTypes, setDojoTriggerTypes] = useState<TriggerType[]>([]);
   const [dojoTypesLoading, setDojoTypesLoading] = useState(false);
   const [dojoAccounts, setDojoAccounts] = useState<ConnectedAccount[]>([]);
+  const [dojoApps, setDojoApps] = useState<IntegrationApp[]>([]);
+  const [dojoSelectedToolkit, setDojoSelectedToolkit] = useState("");
   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>>({});
+  const [dojoSelectedAccountId, setDojoSelectedAccountId] = useState("");
+  const [dojoAppDropdownOpen, setDojoAppDropdownOpen] = useState(false);
+  const [dojoAppSearch, setDojoAppSearch] = useState("");
+  const [dojoTriggerDropdownOpen, setDojoTriggerDropdownOpen] = useState(false);
+  const [dojoTriggerSearch, setDojoTriggerSearch] = useState("");
 
   // Add subscription
   const [showAddSub, setShowAddSub] = useState(false);
@@ -108,13 +122,21 @@ export function TriggersTab() {
 
   const projectParam = currentProjectId && currentProjectId !== "unassigned" ? `?project_id=${currentProjectId}` : "";
 
-  // Fetch available providers
+  // Fetch available providers — only show ones with API keys configured
   const fetchProviders = useCallback(async () => {
     try {
       const res = await authFetch(`/api/triggers/providers${projectParam}`);
       if (res.ok) {
         const data = await res.json();
-        setProviders(data.providers || []);
+        const connected = (data.providers || []).filter((p: TriggerProviderInfo) => p.connected);
+        setProviders(connected);
+        // Auto-select first connected provider if none selected
+        if (connected.length > 0) {
+          setSelectedProvider(prev => {
+            if (!prev || !connected.find((p: TriggerProviderInfo) => p.id === prev)) return connected[0].id;
+            return prev;
+          });
+        }
       }
     } catch (e) {
       console.error("Failed to fetch providers:", e);
@@ -154,10 +176,10 @@ export function TriggersTab() {
     }
   }, [authFetch, projectParam]);
 
-  // Fetch agents
+  // Fetch agents (project-scoped)
   const fetchAgents = useCallback(async () => {
     try {
-      const res = await authFetch(`/api/agents`);
+      const res = await authFetch(`/api/agents${projectParam}`);
       if (res.ok) {
         const data = await res.json();
         setAgents(data.agents || []);
@@ -165,7 +187,7 @@ export function TriggersTab() {
     } catch (e) {
       // Ignore
     }
-  }, [authFetch]);
+  }, [authFetch, projectParam]);
 
   useEffect(() => {
     fetchProviders();
@@ -214,6 +236,7 @@ export function TriggersTab() {
     setSelectedAccountId("");
     setCreateAgentId("");
     setBrowseConfig({});
+    setBrowseSelectedAccountId("");
     setShowCreate(true);
     fetchConnectedAccounts();
   };
@@ -224,65 +247,58 @@ export function TriggersTab() {
   const openAddDojoSub = async () => {
     setShowAddDojo(true);
     setDojoSelectedType("");
+    setDojoSelectedToolkit("");
     setDojoAgentId("");
-    setDojoTypeSearch("");
     setDojoConfig({});
+    setDojoSelectedAccountId("");
 
-    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;
-      }
+      if (dojoTriggerTypes.length > 0) 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);
+        console.error("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);
+        console.error("Failed to load connected accounts:", e);
       }
     };
 
-    await Promise.all([loadTypes(), loadAccounts()]);
+    const loadApps = async () => {
+      if (dojoApps.length > 0) return;
+      try {
+        const url = `/api/integrations/agentdojo/apps${projectParam}`;
+        const res = await authFetch(url);
+        const data = await res.json();
+        setDojoApps((data.apps || []).map((a: any) => ({ id: a.id, name: a.name, slug: a.slug, logo: a.logo })));
+      } catch (e) {
+        console.error("Failed to load apps:", e);
+      }
+    };
+
+    await Promise.all([loadTypes(), loadAccounts(), loadApps()]);
   };
 
   // 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);
+    // Use derived dojoMatchedAccount (respects user dropdown selection + auto-match fallback)
+    const matched = dojoMatchedAccount;
     if (!tt || !dojoAgentId || !matched) return;
 
     setDojoCreating(true);
@@ -298,9 +314,8 @@ export function TriggersTab() {
         title: `${tt.name} → ${agent?.name || "Agent"}`,
         server: tt.toolkit_slug,
         agent_id: dojoAgentId,
-        ...dojoConfig, // Merge dynamic config fields (e.g. owner, repo for GitHub)
+        ...dojoConfig,
       };
-      console.log("[handleAddDojoSub] config:", JSON.stringify(configPayload));
       const res = await authFetch(url, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -507,28 +522,85 @@ export function TriggersTab() {
     return t.name.toLowerCase().includes(s) || t.slug.toLowerCase().includes(s) || t.description.toLowerCase().includes(s);
   });
 
-  // Auto-match connected account from toolkit slug
+  // Best-effort match connected account from toolkit slug
+  // A single credential can serve multiple toolkits (e.g. "OmniKit Platform" for "OmniKit Messaging")
   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 ||
+    const slug = toolkitSlug.toLowerCase().replace(/[-_]/g, " ");
+    // Exact match
+    const exact = accounts.find(a =>
+      a.appId?.toLowerCase() === toolkitSlug.toLowerCase() ||
+      a.appName?.toLowerCase() === toolkitSlug.toLowerCase()
+    );
+    if (exact) return exact;
+    // Contains match
+    const contains = accounts.find(a =>
       a.appId?.toLowerCase().includes(slug) ||
-      a.appName?.toLowerCase().includes(slug)
-    ) || null;
+      a.appName?.toLowerCase().replace(/[-_]/g, " ").includes(slug) ||
+      slug.includes(a.appId?.toLowerCase() || "") ||
+      slug.includes(a.appName?.toLowerCase().replace(/[-_]/g, " ") || "")
+    );
+    if (contains) return contains;
+    // Prefix match — first word overlap (e.g. "omnikit" matches "omnikit platform" and "omnikit messaging")
+    const slugWords = slug.split(/\s+/);
+    return accounts.find(a => {
+      const nameWords = (a.appName || "").toLowerCase().replace(/[-_]/g, " ").split(/\s+/);
+      return slugWords[0] && nameWords[0] && slugWords[0] === nameWords[0];
+    }) || null;
   };
 
-  // Derived: auto-matched account for Add Subscription modal
+  // Derived: auto-matched or user-selected account for Add Subscription modal
   const dojoSelectedTriggerType = dojoTriggerTypes.find(t => t.slug === dojoSelectedType);
-  const dojoMatchedAccount = dojoSelectedTriggerType ? matchAccount(dojoAccounts, dojoSelectedTriggerType.toolkit_slug) : null;
+  const dojoAutoMatch = dojoSelectedTriggerType ? matchAccount(dojoAccounts, dojoSelectedTriggerType.toolkit_slug) : null;
+  const dojoMatchedAccount = dojoSelectedAccountId
+    ? dojoAccounts.find(a => a.id === dojoSelectedAccountId) || dojoAutoMatch
+    : dojoAutoMatch;
+
+  // Derived: auto-matched or user-selected account for Browse Subscribe modal
+  const browseAutoMatch = selectedType && isAgentDojo ? matchAccount(connectedAccounts, selectedType.toolkit_slug) : null;
+  const browseMatchedAccount = browseSelectedAccountId
+    ? connectedAccounts.find(a => a.id === browseSelectedAccountId) || browseAutoMatch
+    : browseAutoMatch;
+
+  // Derived: group trigger types by toolkit, enriched with logos from apps list
+  const dojoToolkits = React.useMemo(() => {
+    const appLogos = new Map<string, string>();
+    for (const app of dojoApps) {
+      if (app.logo) appLogos.set(app.slug, app.logo);
+    }
+    const map = new Map<string, { slug: string; name: string; logo: string | null; count: number }>();
+    for (const t of dojoTriggerTypes) {
+      const existing = map.get(t.toolkit_slug);
+      if (existing) {
+        existing.count++;
+      } else {
+        const logo = appLogos.get(t.toolkit_slug) || t.logo || null;
+        map.set(t.toolkit_slug, { slug: t.toolkit_slug, name: t.toolkit_name, logo, count: 1 });
+      }
+    }
+    return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name));
+  }, [dojoTriggerTypes, dojoApps]);
+
+  // Derived: triggers for the selected toolkit
+  const dojoToolkitTriggers = dojoSelectedToolkit
+    ? dojoTriggerTypes.filter(t => t.toolkit_slug === dojoSelectedToolkit)
+    : [];
 
-  // Derived: auto-matched account for Browse Subscribe modal
-  const browseMatchedAccount = selectedType && isAgentDojo ? matchAccount(connectedAccounts, selectedType.toolkit_slug) : null;
+  // Derived: selected toolkit info (for logo in trigger dropdown)
+  const dojoSelectedToolkitInfo = dojoToolkits.find(t => t.slug === dojoSelectedToolkit);
 
   // Agent map for quick lookups
   const agentMap = new Map(agents.map(a => [a.id, a]));
 
+  if (providers.length === 0 && !triggersLoading) {
+    return (
+      <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-8 text-center">
+        <p className="text-[#666]">No trigger providers configured.</p>
+        <p className="text-sm text-[#555] mt-1">Add API keys for Composio or AgentDojo in Settings to enable triggers.</p>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
       {/* Error */}
@@ -539,7 +611,7 @@ export function TriggersTab() {
         </div>
       )}
 
-      {/* Provider Selector */}
+      {/* Provider Selector — only show if multiple configured */}
       {providers.length > 1 && (
         <div className="flex items-center gap-2">
           <span className="text-xs text-[#666]">Provider:</span>
@@ -560,9 +632,6 @@ export function TriggersTab() {
                 }`}
               >
                 {p.name}
-                {!p.connected && (
-                  <span className="ml-1 text-[10px] text-yellow-500" title="API key not configured">!</span>
-                )}
               </button>
             ))}
           </div>
@@ -1021,127 +1090,235 @@ export function TriggersTab() {
           <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.
+              Select an app and trigger, then 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.
+            {dojoTypesLoading ? (
+              <div className="text-center py-8 text-[#666] text-sm">Loading...</div>
+            ) : dojoTriggerTypes.length === 0 ? (
+              <div className="text-center py-8 text-[#666] text-sm">
+                No triggers available. Connect an app first in the Integrations tab.
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {/* App selector — custom dropdown with logos */}
+                <div>
+                  <label className="block text-xs text-[#888] mb-1.5">App</label>
+                  <div className="relative">
+                    <button
+                      onClick={() => { setDojoAppDropdownOpen(!dojoAppDropdownOpen); setDojoTriggerDropdownOpen(false); setDojoAppSearch(""); }}
+                      className="w-full flex items-center gap-2 bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 text-sm text-left hover:border-[#555] transition"
+                    >
+                      {dojoSelectedToolkitInfo ? (
+                        <>
+                          {dojoSelectedToolkitInfo.logo ? (
+                            <img src={dojoSelectedToolkitInfo.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">
+                              {dojoSelectedToolkitInfo.name?.[0]?.toUpperCase() || "?"}
+                            </div>
+                          )}
+                          <span className="flex-1 truncate">{dojoSelectedToolkitInfo.name}</span>
+                          <span className="text-[10px] text-[#666]">{dojoSelectedToolkitInfo.count} triggers</span>
+                        </>
+                      ) : (
+                        <span className="text-[#666] flex-1">Select app...</span>
+                      )}
+                      <span className="text-[#666] text-xs ml-1">&#9662;</span>
+                    </button>
+                    {dojoAppDropdownOpen && (
+                      <>
+                        <div className="fixed inset-0 z-10" onClick={() => setDojoAppDropdownOpen(false)} />
+                        <div className="absolute left-0 right-0 top-full mt-1 bg-[#0a0a0a] border border-[#333] rounded-lg shadow-xl z-20 max-h-64 flex flex-col">
+                          <div className="p-2 border-b border-[#1a1a1a] flex-shrink-0">
+                            <input
+                              type="text"
+                              value={dojoAppSearch}
+                              onChange={(e) => setDojoAppSearch(e.target.value)}
+                              placeholder="Search apps..."
+                              className="w-full bg-[#111] border border-[#333] rounded px-2 py-1.5 text-sm focus:outline-none focus:border-[#f97316]"
+                              autoFocus
+                            />
+                          </div>
+                          <div className="overflow-y-auto flex-1">
+                            {dojoToolkits
+                              .filter(tk => {
+                                if (!dojoAppSearch) return true;
+                                const s = dojoAppSearch.toLowerCase();
+                                return tk.name.toLowerCase().includes(s) || tk.slug.toLowerCase().includes(s);
+                              })
+                              .map(tk => (
+                                <button
+                                  key={tk.slug}
+                                  onClick={() => {
+                                    setDojoSelectedToolkit(tk.slug);
+                                    setDojoSelectedType("");
+                                    setDojoConfig({});
+                                    setDojoAppDropdownOpen(false);
+                                  }}
+                                  className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition hover:bg-[#1a1a1a] ${
+                                    dojoSelectedToolkit === tk.slug ? "bg-[#1a1a1a] text-[#f97316]" : ""
+                                  }`}
+                                >
+                                  {tk.logo ? (
+                                    <img src={tk.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">
+                                      {tk.name?.[0]?.toUpperCase() || "?"}
+                                    </div>
+                                  )}
+                                  <span className="flex-1 truncate">{tk.name}</span>
+                                  <span className="text-[10px] text-[#666]">{tk.count}</span>
+                                </button>
+                              ))}
+                          </div>
+                        </div>
+                      </>
+                    )}
                   </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>
+
+                {/* Trigger selector — only shown when app is selected */}
+                {dojoSelectedToolkit && (
+                  <div>
+                    <label className="block text-xs text-[#888] mb-1.5">Trigger</label>
+                    <div className="relative">
+                      <button
+                        onClick={() => { setDojoTriggerDropdownOpen(!dojoTriggerDropdownOpen); setDojoAppDropdownOpen(false); setDojoTriggerSearch(""); }}
+                        className="w-full flex items-center gap-2 bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 text-sm text-left hover:border-[#555] transition"
+                      >
+                        {dojoSelectedTriggerType ? (
+                          <>
+                            <span className="flex-1 truncate">{dojoSelectedTriggerType.name}</span>
+                            <span className={`text-[10px] px-1.5 py-0.5 rounded flex-shrink-0 ${
+                              dojoSelectedTriggerType.type === "webhook" ? "bg-blue-500/10 text-blue-400" : "bg-yellow-500/10 text-yellow-400"
+                            }`}>
+                              {dojoSelectedTriggerType.type}
+                            </span>
+                          </>
+                        ) : (
+                          <span className="text-[#666] flex-1">Select trigger...</span>
+                        )}
+                        <span className="text-[#666] text-xs ml-1">&#9662;</span>
+                      </button>
+                      {dojoTriggerDropdownOpen && (
+                        <>
+                          <div className="fixed inset-0 z-10" onClick={() => setDojoTriggerDropdownOpen(false)} />
+                          <div className="absolute left-0 right-0 top-full mt-1 bg-[#0a0a0a] border border-[#333] rounded-lg shadow-xl z-20 max-h-64 flex flex-col">
+                            {dojoToolkitTriggers.length > 3 && (
+                              <div className="p-2 border-b border-[#1a1a1a] flex-shrink-0">
+                                <input
+                                  type="text"
+                                  value={dojoTriggerSearch}
+                                  onChange={(e) => setDojoTriggerSearch(e.target.value)}
+                                  placeholder="Search triggers..."
+                                  className="w-full bg-[#111] border border-[#333] rounded px-2 py-1.5 text-sm focus:outline-none focus:border-[#f97316]"
+                                  autoFocus
+                                />
                               </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 className="overflow-y-auto flex-1">
+                              {dojoToolkitTriggers
+                                .filter(t => {
+                                  if (!dojoTriggerSearch) return true;
+                                  const s = dojoTriggerSearch.toLowerCase();
+                                  return t.name.toLowerCase().includes(s) || t.slug.toLowerCase().includes(s) || t.description.toLowerCase().includes(s);
+                                })
+                                .map(t => (
+                                  <button
+                                    key={t.slug}
+                                    onClick={() => {
+                                      setDojoSelectedType(t.slug);
+                                      setDojoConfig({});
+                                      setDojoTriggerDropdownOpen(false);
+                                    }}
+                                    className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition hover:bg-[#1a1a1a] ${
+                                      dojoSelectedType === t.slug ? "bg-[#1a1a1a] text-[#f97316]" : ""
+                                    }`}
+                                  >
+                                    <div className="flex-1 min-w-0">
+                                      <div className="truncate">{t.name}</div>
+                                      <div className="text-[10px] text-[#666] truncate">{t.description}</div>
+                                    </div>
+                                    <span className={`text-[10px] px-1.5 py-0.5 rounded flex-shrink-0 ${
+                                      t.type === "webhook" ? "bg-blue-500/10 text-blue-400" : "bg-yellow-500/10 text-yellow-400"
+                                    }`}>
+                                      {t.type}
+                                    </span>
+                                  </button>
+                                ))}
                             </div>
-                          </button>
-                        ))}
+                          </div>
+                        </>
+                      )}
                     </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>
                 )}
-              </div>
 
-              {/* Connected account — auto-matched */}
-              {dojoSelectedType && (
+                {/* 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">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}
+                  <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>
                   ) : (
-                    <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>
+                    <Select
+                      value={dojoAgentId}
+                      onChange={setDojoAgentId}
+                      placeholder="Select agent..."
+                      options={agents.map(agent => ({
+                        value: agent.id,
+                        label: `${agent.name} (${agent.status})`,
+                      }))}
+                    />
                   )}
                 </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