apteva 0.4.17 → 0.4.18

package/src/server.ts

@@ -167,7 +167,9 @@ export const agentProcesses: Map<string, { proc: Subprocess; port: number }> = n
 // Track agents currently being started (to prevent race conditions)
 export const agentsStarting: Set<string> = new Set();
 
-// Graceful shutdown handler - stop all agents when server exits
+// Graceful shutdown handler - stop all agent processes when server exits
+// NOTE: We intentionally do NOT update DB status here — agents marked "running"
+// in the DB will be auto-restarted on next boot via findRunning() + resetAllStatus().
 async function shutdownAllAgents() {
   if (agentProcesses.size === 0) return;
 
@@ -182,7 +184,6 @@ async function shutdownAllAgents() {
       }).catch(() => {});
 
       proc.kill();
-      AgentDB.setStatus(agentId, "stopped");
     } catch {
       // Ignore errors during shutdown
     }
@@ -192,6 +193,7 @@ async function shutdownAllAgents() {
 
 // Handle process termination signals
 let shuttingDown = false;
+export function isShuttingDown(): boolean { return shuttingDown; }
 process.on("SIGINT", async () => {
   if (shuttingDown) return;
   shuttingDown = true;

package/src/triggers/agentdojo.ts

@@ -0,0 +1,248 @@
+// AgentDojo Trigger Provider
+// Uses our MCP API's subscription and trigger system
+// Docs: POST /mcp/subscribe, GET /mcp/subscriptions, GET /mcp/triggers
+
+import { createHmac, timingSafeEqual } from "crypto";
+import type { TriggerProvider, TriggerType, TriggerInstance } from "./index";
+
+const AGENTDOJO_API_BASE = process.env.AGENTDOJO_API_BASE || "https://api.agentdojo.dev";
+
+function headers(apiKey: string) {
+  return { "X-API-Key": apiKey, "Content-Type": "application/json" };
+}
+
+export const AgentDojoTriggerProvider: TriggerProvider = {
+  id: "agentdojo",
+  name: "AgentDojo",
+
+  async listTriggerTypes(apiKey: string, toolkitSlugs?: string[]): Promise<TriggerType[]> {
+    const params = new URLSearchParams({ is_active: "true", limit: "200" });
+    if (toolkitSlugs?.length) {
+      // Filter by toolkit name(s) — API supports one at a time, so fetch each
+      const allItems: any[] = [];
+      for (const slug of toolkitSlugs) {
+        const res = await fetch(
+          `${AGENTDOJO_API_BASE}/mcp/triggers?${new URLSearchParams({ toolkit_name: slug, is_active: "true", limit: "200" })}`,
+          { headers: headers(apiKey) },
+        );
+        if (res.ok) {
+          const data = await res.json();
+          const items = data.data || data.triggers || [];
+          allItems.push(...items);
+        }
+      }
+      return mapTriggerTypes(allItems);
+    }
+
+    const res = await fetch(`${AGENTDOJO_API_BASE}/mcp/triggers?${params}`, {
+      headers: headers(apiKey),
+    });
+
+    if (!res.ok) {
+      console.error("AgentDojo listTriggerTypes error:", res.status, await res.text());
+      return [];
+    }
+
+    const data = await res.json();
+    const items = data.data || data.triggers || [];
+    return mapTriggerTypes(items);
+  },
+
+  async getTriggerType(apiKey: string, slug: string): Promise<TriggerType | null> {
+    const res = await fetch(
+      `${AGENTDOJO_API_BASE}/mcp/triggers/${encodeURIComponent(slug)}`,
+      { headers: headers(apiKey) },
+    );
+
+    if (!res.ok) {
+      if (res.status === 404) return null;
+      console.error("AgentDojo getTriggerType error:", res.status, await res.text());
+      return null;
+    }
+
+    const data = await res.json();
+    const item = data.data || data;
+    return {
+      slug: item.slug,
+      name: item.display_name || item.event_name || item.slug,
+      description: item.description || "",
+      type: (item.mechanism as "webhook" | "poll") || "webhook",
+      toolkit_slug: item.toolkit?.name || item.toolkit_name || "",
+      toolkit_name: item.toolkit?.display_name || item.toolkit_display_name || "",
+      logo: item.toolkit?.icon_url || null,
+      config_schema: item.config_schema || {},
+      payload_schema: item.payload_schema || {},
+    };
+  },
+
+  async createTrigger(
+    apiKey: string,
+    slug: string,
+    connectedAccountId: string,
+    config?: Record<string, unknown>,
+  ): Promise<{ triggerId: string }> {
+    // AgentDojo uses subscriptions — we create a subscription for this trigger
+    // The callback_url should be set in config or from stored webhook URL
+    const callbackUrl = (config?.callback_url as string) || "";
+    if (!callbackUrl) {
+      throw new Error("callback_url is required in config for AgentDojo triggers");
+    }
+
+    const body: Record<string, unknown> = {
+      trigger_type_slug: slug,
+      credential_id: connectedAccountId,
+      callback_url: callbackUrl,
+      title: (config?.title as string) || `Trigger: ${slug}`,
+    };
+
+    if (config?.events) {
+      body.events = config.events;
+    }
+    if (config?.server) {
+      body.server = config.server;
+    }
+    if (config?.prompt) {
+      body.prompt = config.prompt;
+    }
+
+    const res = await fetch(`${AGENTDOJO_API_BASE}/mcp/subscribe`, {
+      method: "POST",
+      headers: headers(apiKey),
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) {
+      const errText = await res.text();
+      console.error("AgentDojo createTrigger error:", res.status, errText);
+      throw new Error(`Failed to create AgentDojo subscription: ${errText}`);
+    }
+
+    const data = await res.json();
+    return { triggerId: String(data.subscription_id || data.id) };
+  },
+
+  async listTriggers(apiKey: string): Promise<TriggerInstance[]> {
+    const res = await fetch(`${AGENTDOJO_API_BASE}/mcp/subscriptions?status=active`, {
+      headers: headers(apiKey),
+    });
+
+    if (!res.ok) {
+      console.error("AgentDojo listTriggers error:", res.status, await res.text());
+      return [];
+    }
+
+    const data = await res.json();
+    const items = data.subscriptions || data.data || [];
+
+    return items.map((item: any) => ({
+      id: String(item.id || item.subscription_id),
+      trigger_slug: item.title || item.server || "",
+      connected_account_id: item.credential_id || null,
+      status: item.status === "active" ? "active" as const : "disabled" as const,
+      config: {
+        server: item.server,
+        events: item.events,
+        callback_url: item.callback_url,
+        prompt: item.prompt,
+        title: item.title,
+      },
+      created_at: item.created_at || "",
+    }));
+  },
+
+  async enableTrigger(apiKey: string, triggerId: string): Promise<boolean> {
+    const res = await fetch(`${AGENTDOJO_API_BASE}/mcp/subscription/update`, {
+      method: "POST",
+      headers: headers(apiKey),
+      body: JSON.stringify({ subscription_id: parseInt(triggerId), status: "active" }),
+    });
+    return res.ok;
+  },
+
+  async disableTrigger(apiKey: string, triggerId: string): Promise<boolean> {
+    const res = await fetch(`${AGENTDOJO_API_BASE}/mcp/subscription/update`, {
+      method: "POST",
+      headers: headers(apiKey),
+      body: JSON.stringify({ subscription_id: parseInt(triggerId), status: "disabled" }),
+    });
+    return res.ok;
+  },
+
+  async deleteTrigger(apiKey: string, triggerId: string): Promise<boolean> {
+    const res = await fetch(`${AGENTDOJO_API_BASE}/mcp/unsubscribe`, {
+      method: "POST",
+      headers: headers(apiKey),
+      body: JSON.stringify({ subscription_id: parseInt(triggerId) }),
+    });
+    return res.ok;
+  },
+
+  async setupWebhook(apiKey: string, webhookUrl: string): Promise<{ secret?: string }> {
+    // AgentDojo uses per-subscription callback URLs, not a global webhook.
+    // We just store the base URL locally — it will be passed when creating subscriptions.
+    // No remote API call needed.
+    return {};
+  },
+
+  async getWebhookConfig(apiKey: string): Promise<{ url: string | null; secret: string | null }> {
+    // AgentDojo doesn't have a global webhook config — each subscription has its own callback_url.
+    // Return null to indicate per-subscription mode.
+    return { url: null, secret: null };
+  },
+
+  verifyWebhook(req: Request, body: string, secret: string): boolean {
+    // AgentDojo forwards webhooks with an HMAC signature
+    const signature = req.headers.get("x-webhook-signature") || "";
+    if (!signature) {
+      // If no signature header, check for a simple shared token
+      const token = req.headers.get("x-webhook-token") || "";
+      return token === secret;
+    }
+
+    // HMAC-SHA256 verification: signature is "sha256=<hex>"
+    const sig = signature.startsWith("sha256=") ? signature.slice(7) : signature;
+
+    try {
+      const expected = createHmac("sha256", secret).update(body).digest("hex");
+      return timingSafeEqual(Buffer.from(sig, "hex"), Buffer.from(expected, "hex"));
+    } catch {
+      return false;
+    }
+  },
+
+  parseWebhookPayload(body: Record<string, unknown>): {
+    triggerSlug: string;
+    triggerInstanceId: string | null;
+    payload: Record<string, unknown>;
+  } {
+    // AgentDojo forwarded payload format:
+    // { type: "webhook", server: "stripe-payments", event: "payment_intent.succeeded",
+    //   data: { ... }, prompt: "...", subscription_id: 123, timestamp: "..." }
+
+    const server = (body.server as string) || "";
+    const event = (body.event as string) || "";
+    const triggerSlug = event ? `${server}:${event}` : server || (body.type as string) || "unknown";
+
+    const triggerInstanceId = body.subscription_id
+      ? String(body.subscription_id)
+      : null;
+
+    const payload = (body.data as Record<string, unknown>) || {};
+
+    return { triggerSlug, triggerInstanceId, payload };
+  },
+};
+
+function mapTriggerTypes(items: any[]): TriggerType[] {
+  return items.map((item: any) => ({
+    slug: item.slug,
+    name: item.display_name || item.event_name || item.slug,
+    description: item.description || "",
+    type: (item.mechanism as "webhook" | "poll") || "webhook",
+    toolkit_slug: item.toolkit?.name || item.toolkit_name || "",
+    toolkit_name: item.toolkit?.display_name || item.toolkit_display_name || "",
+    logo: item.toolkit?.icon_url || null,
+    config_schema: item.config_schema || {},
+    payload_schema: item.payload_schema || {},
+  }));
+}

package/src/triggers/composio.ts

@@ -0,0 +1,264 @@
+// Composio Trigger Provider
+// https://docs.composio.dev/api-reference/triggers
+
+import { createHmac, timingSafeEqual } from "crypto";
+import type { TriggerProvider, TriggerType, TriggerInstance } from "./index";
+
+const COMPOSIO_API_BASE = "https://backend.composio.dev";
+
+function headers(apiKey: string) {
+  return { "x-api-key": apiKey, "Content-Type": "application/json" };
+}
+
+export const ComposioTriggerProvider: TriggerProvider = {
+  id: "composio",
+  name: "Composio",
+
+  async listTriggerTypes(apiKey: string, toolkitSlugs?: string[]): Promise<TriggerType[]> {
+    const params = new URLSearchParams();
+    if (toolkitSlugs?.length) {
+      params.set("toolkit_slugs", toolkitSlugs.join(","));
+    }
+
+    const res = await fetch(`${COMPOSIO_API_BASE}/api/v3/triggers_types?${params}`, {
+      headers: headers(apiKey),
+    });
+
+    if (!res.ok) {
+      console.error("Composio listTriggerTypes error:", res.status, await res.text());
+      return [];
+    }
+
+    const data = await res.json();
+    const items = data.items || data || [];
+
+    return items.map((item: any) => ({
+      slug: item.slug || item.enum,
+      name: item.name || item.slug,
+      description: item.description || "",
+      type: item.type || "webhook",
+      toolkit_slug: item.toolkit?.slug || item.app_slug || "",
+      toolkit_name: item.toolkit?.name || item.app_name || "",
+      logo: item.toolkit?.logo || item.logo || null,
+      config_schema: item.config || {},
+      payload_schema: item.payload || {},
+    }));
+  },
+
+  async getTriggerType(apiKey: string, slug: string): Promise<TriggerType | null> {
+    const res = await fetch(`${COMPOSIO_API_BASE}/api/v3/triggers_types/${encodeURIComponent(slug)}`, {
+      headers: headers(apiKey),
+    });
+
+    if (!res.ok) {
+      if (res.status === 404) return null;
+      console.error("Composio getTriggerType error:", res.status, await res.text());
+      return null;
+    }
+
+    const item = await res.json();
+    return {
+      slug: item.slug || item.enum,
+      name: item.name || item.slug,
+      description: item.description || "",
+      type: item.type || "webhook",
+      toolkit_slug: item.toolkit?.slug || item.app_slug || "",
+      toolkit_name: item.toolkit?.name || item.app_name || "",
+      logo: item.toolkit?.logo || item.logo || null,
+      config_schema: item.config || {},
+      payload_schema: item.payload || {},
+    };
+  },
+
+  async createTrigger(
+    apiKey: string,
+    slug: string,
+    connectedAccountId: string,
+    config?: Record<string, unknown>,
+  ): Promise<{ triggerId: string }> {
+    const body: any = {
+      connected_account_id: connectedAccountId,
+    };
+    if (config) {
+      body.trigger_config = config;
+    }
+
+    const res = await fetch(
+      `${COMPOSIO_API_BASE}/api/v3/trigger_instances/${encodeURIComponent(slug)}/upsert`,
+      {
+        method: "POST",
+        headers: headers(apiKey),
+        body: JSON.stringify(body),
+      },
+    );
+
+    if (!res.ok) {
+      const errText = await res.text();
+      console.error("Composio createTrigger error:", res.status, errText);
+      throw new Error(`Failed to create trigger: ${errText}`);
+    }
+
+    const data = await res.json();
+    return { triggerId: data.trigger_id || data.deprecated?.uuid || data.id };
+  },
+
+  async listTriggers(apiKey: string): Promise<TriggerInstance[]> {
+    const res = await fetch(`${COMPOSIO_API_BASE}/api/v3/trigger_instances/active`, {
+      headers: headers(apiKey),
+    });
+
+    if (!res.ok) {
+      console.error("Composio listTriggers error:", res.status, await res.text());
+      return [];
+    }
+
+    const data = await res.json();
+    const items = data.items || data.triggers || data || [];
+
+    return items.map((item: any) => ({
+      id: item.id || item.trigger_id,
+      trigger_slug: item.trigger_name || item.trigger_slug || item.slug || "",
+      connected_account_id: item.connected_account_id || item.connectedAccountId || null,
+      status: item.disabled ? "disabled" : "active",
+      config: item.trigger_config || item.triggerConfig || {},
+      created_at: item.created_at || item.createdAt || "",
+    }));
+  },
+
+  async enableTrigger(apiKey: string, triggerId: string): Promise<boolean> {
+    const res = await fetch(
+      `${COMPOSIO_API_BASE}/api/v3/trigger_instances/manage/${encodeURIComponent(triggerId)}`,
+      {
+        method: "PATCH",
+        headers: headers(apiKey),
+        body: JSON.stringify({ status: "enable" }),
+      },
+    );
+    return res.ok;
+  },
+
+  async disableTrigger(apiKey: string, triggerId: string): Promise<boolean> {
+    const res = await fetch(
+      `${COMPOSIO_API_BASE}/api/v3/trigger_instances/manage/${encodeURIComponent(triggerId)}`,
+      {
+        method: "PATCH",
+        headers: headers(apiKey),
+        body: JSON.stringify({ status: "disable" }),
+      },
+    );
+    return res.ok;
+  },
+
+  async deleteTrigger(apiKey: string, triggerId: string): Promise<boolean> {
+    const res = await fetch(
+      `${COMPOSIO_API_BASE}/api/v3/trigger_instances/manage/${encodeURIComponent(triggerId)}`,
+      {
+        method: "DELETE",
+        headers: headers(apiKey),
+      },
+    );
+    return res.ok;
+  },
+
+  async setupWebhook(apiKey: string, webhookUrl: string): Promise<{ secret?: string }> {
+    // Use webhook_subscriptions API (requires HTTPS)
+    const res = await fetch(`${COMPOSIO_API_BASE}/api/v3/webhook_subscriptions`, {
+      method: "POST",
+      headers: headers(apiKey),
+      body: JSON.stringify({
+        webhook_url: webhookUrl,
+        enabled_events: ["composio.trigger.message"],
+        version: "V3",
+      }),
+    });
+
+    if (!res.ok) {
+      const errText = await res.text();
+      console.error("Composio setupWebhook error:", res.status, errText);
+      throw new Error(`Failed to set webhook URL: ${errText}`);
+    }
+
+    const data = await res.json();
+    const secret = data.secret || data.webhook_secret || undefined;
+    return { secret };
+  },
+
+  async getWebhookConfig(apiKey: string): Promise<{ url: string | null; secret: string | null }> {
+    const res = await fetch(`${COMPOSIO_API_BASE}/api/v3/webhook_subscriptions`, {
+      headers: headers(apiKey),
+    });
+
+    if (!res.ok) {
+      console.error("Composio getWebhookConfig error:", res.status, await res.text());
+      return { url: null, secret: null };
+    }
+
+    const data = await res.json();
+    const items = data.items || data.subscriptions || (Array.isArray(data) ? data : [data]);
+    const sub = items[0];
+    return {
+      url: sub?.webhook_url || sub?.callback_url || sub?.url || null,
+      secret: sub?.secret || sub?.webhook_secret || null,
+    };
+  },
+
+  verifyWebhook(req: Request, body: string, secret: string): boolean {
+    const signature = req.headers.get("webhook-signature") || "";
+    const webhookId = req.headers.get("webhook-id") || "";
+    const timestamp = req.headers.get("webhook-timestamp") || "";
+
+    if (!signature || !webhookId || !timestamp) return false;
+
+    // Check timestamp freshness (5-minute window to prevent replay)
+    const now = Math.floor(Date.now() / 1000);
+    const ts = parseInt(timestamp, 10);
+    if (isNaN(ts) || Math.abs(now - ts) > 300) return false;
+
+    // Composio signature: HMAC-SHA256("{webhook-id}.{timestamp}.{body}", secret)
+    const signedContent = `${webhookId}.${timestamp}.${body}`;
+    const expectedSignature = createHmac("sha256", secret)
+      .update(signedContent)
+      .digest("base64");
+
+    // Signature header format: "v1,<base64>"
+    const sig = signature.startsWith("v1,") ? signature.slice(3) : signature;
+
+    try {
+      return timingSafeEqual(
+        Buffer.from(sig, "base64"),
+        Buffer.from(expectedSignature, "base64"),
+      );
+    } catch {
+      return false;
+    }
+  },
+
+  parseWebhookPayload(body: Record<string, unknown>): {
+    triggerSlug: string;
+    triggerInstanceId: string | null;
+    payload: Record<string, unknown>;
+  } {
+    // V3 format: { type: "composio.trigger.message", metadata: { trigger_slug, trigger_id, ... }, data: { ... } }
+    // V2/V1 format: { trigger_name, trigger_id, payload: { ... } }
+    const metadata = (body.metadata as Record<string, unknown>) || {};
+    const data = (body.data as Record<string, unknown>) || {};
+
+    const triggerSlug =
+      (metadata.trigger_slug as string) ||
+      (body.trigger_name as string) ||
+      ((body.type as string) !== "composio.trigger.message" ? (body.type as string) : null) ||
+      "unknown";
+
+    const triggerInstanceId =
+      (metadata.trigger_id as string) ||
+      (body.trigger_id as string) ||
+      (body.triggerId as string) ||
+      null;
+
+    const payload =
+      (body.payload as Record<string, unknown>) ||
+      data;
+
+    return { triggerSlug, triggerInstanceId, payload };
+  },
+};

package/src/triggers/index.ts

@@ -0,0 +1,71 @@
+// Generic Trigger Provider Interface
+// Allows multiple providers (Composio, AgentDojo, local, etc.) to offer trigger/webhook integrations
+
+export 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>;
+}
+
+export interface TriggerInstance {
+  id: string;
+  trigger_slug: string;
+  connected_account_id: string | null;
+  status: "active" | "disabled";
+  config: Record<string, unknown>;
+  created_at: string;
+}
+
+export interface TriggerProvider {
+  id: string;
+  name: string;
+
+  // Browse available trigger types
+  listTriggerTypes(apiKey: string, toolkitSlugs?: string[]): Promise<TriggerType[]>;
+  getTriggerType(apiKey: string, slug: string): Promise<TriggerType | null>;
+
+  // CRUD trigger instances (all remote)
+  createTrigger(
+    apiKey: string,
+    slug: string,
+    connectedAccountId: string,
+    config?: Record<string, unknown>,
+  ): Promise<{ triggerId: string }>;
+  listTriggers(apiKey: string): Promise<TriggerInstance[]>;
+  enableTrigger(apiKey: string, triggerId: string): Promise<boolean>;
+  disableTrigger(apiKey: string, triggerId: string): Promise<boolean>;
+  deleteTrigger(apiKey: string, triggerId: string): Promise<boolean>;
+
+  // Webhook configuration
+  setupWebhook(apiKey: string, webhookUrl: string): Promise<{ secret?: string }>;
+  getWebhookConfig(apiKey: string): Promise<{ url: string | null; secret: string | null }>;
+
+  // Webhook verification and parsing (each provider signs differently)
+  verifyWebhook(req: Request, body: string, secret: string): boolean;
+  parseWebhookPayload(body: Record<string, unknown>): {
+    triggerSlug: string;
+    triggerInstanceId: string | null;
+    payload: Record<string, unknown>;
+  };
+}
+
+// Provider registry
+const triggerProviders: Map<string, TriggerProvider> = new Map();
+
+export function registerTriggerProvider(provider: TriggerProvider) {
+  triggerProviders.set(provider.id, provider);
+}
+
+export function getTriggerProvider(id: string): TriggerProvider | undefined {
+  return triggerProviders.get(id);
+}
+
+export function getTriggerProviderIds(): string[] {
+  return Array.from(triggerProviders.keys());
+}

package/src/web/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, lazy, Suspense } from "react";
 import { createRoot } from "react-dom/client";
 import "@apteva/apteva-kit/styles.css";
 
@@ -12,28 +12,31 @@ import { TelemetryProvider, AuthProvider, ProjectProvider, useAuth, useProjects,
 // Hooks
 import { useAgents, useProviders, useOnboarding } from "./hooks";
 
-// Components
+// Core components (always needed)
 import {
   LoadingSpinner,
   Header,
   Sidebar,
   ErrorBanner,
   OnboardingWizard,
-  SettingsPage,
   CreateAgentModal,
   AgentsView,
   Dashboard,
-  ActivityPage,
-  TasksPage,
-  McpPage,
-  SkillsPage,
-  TestsPage,
-  TelemetryPage,
   LoginPage,
 } from "./components";
-import { ApiDocsPage } from "./components/api/ApiDocsPage";
 import { MetaAgentProvider, MetaAgentPanel } from "./components/meta-agent/MetaAgent";
 
+// Lazy-loaded page components (only loaded when navigated to)
+const SettingsPage = lazy(() => import("./components/settings/SettingsPage").then(m => ({ default: m.SettingsPage })));
+const ActivityPage = lazy(() => import("./components/activity/ActivityPage").then(m => ({ default: m.ActivityPage })));
+const TasksPage = lazy(() => import("./components/tasks/TasksPage").then(m => ({ default: m.TasksPage })));
+const McpPage = lazy(() => import("./components/mcp/McpPage").then(m => ({ default: m.McpPage })));
+const SkillsPage = lazy(() => import("./components/skills/SkillsPage").then(m => ({ default: m.SkillsPage })));
+const TestsPage = lazy(() => import("./components/tests/TestsPage").then(m => ({ default: m.TestsPage })));
+const TelemetryPage = lazy(() => import("./components/telemetry/TelemetryPage").then(m => ({ default: m.TelemetryPage })));
+const ConnectionsPage = lazy(() => import("./components/connections/ConnectionsPage").then(m => ({ default: m.ConnectionsPage })));
+const ApiDocsPage = lazy(() => import("./components/api/ApiDocsPage").then(m => ({ default: m.ApiDocsPage })));
+
 function AppContent() {
   // Auth state
   const { isAuthenticated, isLoading: authLoading, hasUsers, accessToken, checkAuth } = useAuth();
@@ -254,6 +257,7 @@ function AppContent() {
         />
 
         <main className="flex-1 overflow-hidden flex">
+          <Suspense fallback={<LoadingSpinner />}>
           {route === "settings" && <SettingsPage />}
 
           {route === "activity" && (
@@ -292,6 +296,8 @@ function AppContent() {
 
           {route === "tasks" && <TasksPage />}
 
+          {route === "connections" && <ConnectionsPage />}
+
           {route === "mcp" && <McpPage />}
 
           {route === "skills" && <SkillsPage />}
@@ -301,6 +307,7 @@ function AppContent() {
           {route === "telemetry" && <TelemetryPage />}
 
           {route === "api" && <ApiDocsPage />}
+          </Suspense>
         </main>
       </div>