apteva 0.4.17 → 0.4.19

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/tui/AgentList.tsx

@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import Spinner from "ink-spinner";
+import type { AptevaAPI, Agent, User } from "./api.js";
+
+interface AgentListProps {
+  api: AptevaAPI;
+  user: User;
+}
+
+export function AgentList({ api, user }: AgentListProps) {
+  const { exit } = useApp();
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selected, setSelected] = useState(0);
+
+  useEffect(() => {
+    const load = async () => {
+      const result = await api.getAgents();
+      setAgents(result);
+      setLoading(false);
+    };
+    load();
+  }, []);
+
+  useInput((input, key) => {
+    if (input === "q") exit();
+    if (input === "r") {
+      setLoading(true);
+      api.getAgents().then(result => {
+        setAgents(result);
+        setLoading(false);
+      });
+    }
+    if (key.upArrow) setSelected(s => Math.max(0, s - 1));
+    if (key.downArrow) setSelected(s => Math.min(agents.length - 1, s + 1));
+  });
+
+  const statusColor = (status: string) => {
+    if (status === "running") return "green";
+    if (status === "error") return "red";
+    return "gray";
+  };
+
+  const statusIcon = (status: string) => {
+    if (status === "running") return "●";
+    if (status === "error") return "✕";
+    return "○";
+  };
+
+  // Column widths
+  const nameW = 24;
+  const statusW = 12;
+  const modelW = 28;
+  const providerW = 14;
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      {/* Header */}
+      <Box marginBottom={1} justifyContent="space-between">
+        <Box>
+          <Text color="hex('#f97316')" bold>
+            {">"}_
+          </Text>
+          <Text bold> apteva</Text>
+          <Text dimColor> — agents</Text>
+        </Box>
+        <Text dimColor>
+          {user.username} ({user.role})
+        </Text>
+      </Box>
+
+      {loading ? (
+        <Box>
+          <Text color="hex('#f97316')">
+            <Spinner type="dots" />
+          </Text>
+          <Text> Loading agents...</Text>
+        </Box>
+      ) : agents.length === 0 ? (
+        <Text dimColor>No agents found.</Text>
+      ) : (
+        <Box flexDirection="column">
+          {/* Table header */}
+          <Box>
+            <Text bold color="hex('#888')">
+              {"  "}
+              {pad("NAME", nameW)}
+              {pad("STATUS", statusW)}
+              {pad("MODEL", modelW)}
+              {pad("PROVIDER", providerW)}
+            </Text>
+          </Box>
+          <Box marginBottom={0}>
+            <Text dimColor>
+              {"  "}
+              {"─".repeat(nameW + statusW + modelW + providerW)}
+            </Text>
+          </Box>
+
+          {/* Rows */}
+          {agents.map((agent, i) => (
+            <Box key={agent.id}>
+              <Text color={i === selected ? "hex('#f97316')" : undefined}>
+                {i === selected ? "▸ " : "  "}
+              </Text>
+              <Text color={i === selected ? "white" : undefined}>
+                {pad(agent.name, nameW)}
+              </Text>
+              <Text color={statusColor(agent.status)}>
+                {statusIcon(agent.status)}{" "}
+                {pad(agent.status, statusW - 2)}
+              </Text>
+              <Text dimColor>
+                {pad(agent.model, modelW)}
+              </Text>
+              <Text dimColor>
+                {pad(agent.provider, providerW)}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      {/* Footer */}
+      <Box marginTop={1}>
+        <Text dimColor>
+          ↑↓ navigate · r refresh · q quit
+        </Text>
+      </Box>
+      <Box>
+        <Text dimColor>
+          {agents.length} agent{agents.length !== 1 ? "s" : ""}
+          {" · "}
+          {agents.filter(a => a.status === "running").length} running
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+function pad(str: string, width: number): string {
+  if (str.length >= width) return str.slice(0, width - 1) + "…";
+  return str + " ".repeat(width - str.length);
+}

package/src/tui/App.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { AptevaAPI, type User } from "./api.js";
+import { Login } from "./Login.js";
+import { AgentList } from "./AgentList.js";
+import { spawn } from "child_process";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+interface AppProps {
+  baseUrl: string;
+}
+
+export function App({ baseUrl }: AppProps) {
+  const [api] = useState(() => new AptevaAPI(baseUrl));
+  const [screen, setScreen] = useState<"connecting" | "login" | "agents">("connecting");
+  const [user, setUser] = useState<User | null>(null);
+  const [connectError, setConnectError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const tryConnect = async () => {
+      // First check if server is already running
+      const connected = await api.checkConnection();
+      if (cancelled) return;
+
+      if (connected) {
+        setScreen("login");
+        return;
+      }
+
+      // Server not running — try to start it
+      setConnectError("Server not running. Starting...");
+
+      try {
+        // Find the server entry point relative to this file
+        const serverPath = resolve(dirname(fileURLToPath(import.meta.url)), "../server.ts");
+        const child = spawn("bun", ["run", serverPath], {
+          stdio: "ignore",
+          detached: true,
+          env: { ...process.env, PORT: new URL(baseUrl).port || "4280" },
+        });
+        child.unref();
+
+        // Wait for server to come up (poll for up to 10 seconds)
+        for (let i = 0; i < 20; i++) {
+          if (cancelled) return;
+          await new Promise(r => setTimeout(r, 500));
+          const up = await api.checkConnection();
+          if (up) {
+            if (!cancelled) setScreen("login");
+            return;
+          }
+        }
+      } catch {
+        // Spawn failed
+      }
+
+      if (!cancelled) {
+        setConnectError(`Cannot connect to ${baseUrl}. Start the server with: bun run dev`);
+      }
+    };
+
+    tryConnect();
+    return () => { cancelled = true; };
+  }, []);
+
+  if (screen === "connecting") {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Box marginBottom={1}>
+          <Text color="hex('#f97316')" bold>{">"}_</Text>
+          <Text bold> apteva</Text>
+        </Box>
+        <Box>
+          <Text color="hex('#f97316')"><Spinner type="dots" /></Text>
+          <Text> {connectError || `Connecting to ${baseUrl}...`}</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (screen === "login") {
+    return (
+      <Login
+        api={api}
+        onSuccess={(u) => {
+          setUser(u);
+          setScreen("agents");
+        }}
+      />
+    );
+  }
+
+  if (screen === "agents" && user) {
+    return <AgentList api={api} user={user} />;
+  }
+
+  return null;
+}

package/src/tui/Login.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import Spinner from "ink-spinner";
+import type { AptevaAPI, User } from "./api.js";
+
+interface LoginProps {
+  api: AptevaAPI;
+  onSuccess: (user: User) => void;
+}
+
+export function Login({ api, onSuccess }: LoginProps) {
+  const [field, setField] = useState<"username" | "password">("username");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useInput((input, key) => {
+    if (key.tab || (key.return && field === "username" && username)) {
+      setField(field === "username" ? "password" : "username");
+    }
+  });
+
+  const handleSubmit = async () => {
+    if (!username || !password) return;
+    setLoading(true);
+    setError("");
+    const result = await api.login(username, password);
+    setLoading(false);
+    if (result.success && result.user) {
+      onSuccess(result.user);
+    } else {
+      setError(result.error || "Login failed");
+    }
+  };
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text color="hex('#f97316')" bold>
+          {">"}_
+        </Text>
+        <Text bold> apteva</Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text dimColor>Sign in to continue</Text>
+      </Box>
+
+      <Box>
+        <Text color={field === "username" ? "hex('#f97316')" : "white"}>
+          Username:{" "}
+        </Text>
+        {field === "username" ? (
+          <TextInput
+            value={username}
+            onChange={setUsername}
+            onSubmit={() => {
+              if (username) setField("password");
+            }}
+          />
+        ) : (
+          <Text>{username}</Text>
+        )}
+      </Box>
+
+      <Box>
+        <Text color={field === "password" ? "hex('#f97316')" : "white"}>
+          Password:{" "}
+        </Text>
+        {field === "password" ? (
+          <TextInput
+            value={password}
+            onChange={setPassword}
+            onSubmit={handleSubmit}
+            mask="*"
+          />
+        ) : (
+          <Text dimColor>{"*".repeat(password.length) || "..."}</Text>
+        )}
+      </Box>
+
+      {loading && (
+        <Box marginTop={1}>
+          <Text color="hex('#f97316')">
+            <Spinner type="dots" />
+          </Text>
+          <Text> Signing in...</Text>
+        </Box>
+      )}
+
+      {error && (
+        <Box marginTop={1}>
+          <Text color="red">{error}</Text>
+        </Box>
+      )}
+
+      <Box marginTop={1}>
+        <Text dimColor>Tab to switch fields · Enter to submit</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/api.ts

@@ -0,0 +1,72 @@
+export interface Agent {
+  id: string;
+  name: string;
+  model: string;
+  provider: string;
+  status: "running" | "stopped" | "error";
+  port: number | null;
+  projectId: string | null;
+}
+
+export interface User {
+  id: string;
+  username: string;
+  role: string;
+}
+
+export class AptevaAPI {
+  baseUrl: string;
+  private token: string | null = null;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl.replace(/\/$/, "");
+  }
+
+  async checkConnection(): Promise<boolean> {
+    try {
+      const res = await fetch(`${this.baseUrl}/api/auth/check`, { signal: AbortSignal.timeout(3000) });
+      return res.ok;
+    } catch {
+      return false;
+    }
+  }
+
+  private async fetch(path: string, opts: RequestInit = {}): Promise<Response> {
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      ...(opts.headers as Record<string, string> || {}),
+    };
+    if (this.token) {
+      headers.Authorization = `Bearer ${this.token}`;
+    }
+    return fetch(`${this.baseUrl}${path}`, { ...opts, headers });
+  }
+
+  async login(username: string, password: string): Promise<{ success: boolean; user?: User; error?: string }> {
+    try {
+      const res = await this.fetch("/api/auth/login", {
+        method: "POST",
+        body: JSON.stringify({ username, password }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        return { success: false, error: data.error || "Login failed" };
+      }
+      this.token = data.accessToken;
+      return { success: true, user: data.user };
+    } catch (err: any) {
+      return { success: false, error: err.message || "Connection failed" };
+    }
+  }
+
+  async getAgents(): Promise<Agent[]> {
+    try {
+      const res = await this.fetch("/api/agents");
+      if (!res.ok) return [];
+      const data = await res.json();
+      return data.agents || [];
+    } catch {
+      return [];
+    }
+  }
+}

package/src/tui/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { render } from "ink";
+import { App } from "./App.js";
+
+const baseUrl = process.argv[2] || "http://localhost:4280";
+
+render(<App baseUrl={baseUrl} />);

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();
@@ -237,7 +240,7 @@ function AppContent() {
 
   return (
     <div className="h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono flex flex-col overflow-hidden">
-      <Header onMenuClick={() => setMobileMenuOpen(true)} />
+      <Header onMenuClick={() => setMobileMenuOpen(true)} agents={agents} />
 
       {startError && (
         <ErrorBanner message={startError} onDismiss={() => setStartError(null)} />
@@ -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>
 

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

@@ -121,13 +121,16 @@ export function AgentCard({ agent, selected, onSelect, onToggle, showProject }:
 
       <button
         onClick={onToggle}
+        disabled={agent.status === "starting" || agent.status === "stopping"}
         className={`w-full px-3 py-1.5 rounded text-sm font-medium transition mt-auto ${
-          agent.status === "running"
-            ? "bg-[#f97316]/20 text-[#f97316] hover:bg-[#f97316]/30"
-            : "bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30"
+          agent.status === "starting" || agent.status === "stopping"
+            ? "bg-[#333] text-[#666] cursor-wait"
+            : agent.status === "running"
+              ? "bg-[#f97316]/20 text-[#f97316] hover:bg-[#f97316]/30"
+              : "bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30"
         }`}
       >
-        {agent.status === "running" ? "Stop" : "Start"}
+        {agent.status === "starting" ? "Starting..." : agent.status === "stopping" ? "Stopping..." : agent.status === "running" ? "Stop" : "Start"}
       </button>
     </div>
   );
@@ -142,12 +145,16 @@ function StatusBadge({ status, isActive, activityType }: { status: Agent["status
     );
   }
 
+  const isTransitioning = status === "starting" || status === "stopping";
+
   return (
     <span
       className={`px-2 py-1 rounded text-xs font-medium ${
-        status === "running"
-          ? "bg-[#3b82f6]/20 text-[#3b82f6]"
-          : "bg-[#333] text-[#666]"
+        isTransitioning
+          ? "bg-yellow-500/20 text-yellow-400 animate-pulse"
+          : status === "running"
+            ? "bg-[#3b82f6]/20 text-[#3b82f6]"
+            : "bg-[#333] text-[#666]"
       }`}
     >
       {status}