apteva 0.4.16 → 0.4.18

package/src/web/components/layout/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DashboardIcon, ActivityIcon, AgentsIcon, TasksIcon, McpIcon, SkillsIcon, TestsIcon, TelemetryIcon, ApiIcon, SettingsIcon, CloseIcon } from "../common/Icons";
+import { DashboardIcon, ActivityIcon, AgentsIcon, TasksIcon, ConnectionsIcon, McpIcon, SkillsIcon, TestsIcon, TelemetryIcon, ApiIcon, SettingsIcon, CloseIcon } from "../common/Icons";
 import type { Route } from "../../types";
 
 interface SidebarProps {
@@ -88,6 +88,12 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
             active={route === "skills"}
             onClick={() => handleNavigate("skills")}
           />
+          <NavButton
+            icon={<ConnectionsIcon />}
+            label="Connections"
+            active={route === "connections"}
+            onClick={() => handleNavigate("connections")}
+          />
           <NavButton
             icon={<TestsIcon />}
             label="Tests"

package/src/web/components/mcp/IntegrationsPanel.tsx

@@ -46,10 +46,14 @@ export function IntegrationsPanel({
   providerId = "composio",
   projectId,
   onConnectionComplete,
+  onBrowseTriggers,
+  hideMcpConfig,
 }: {
   providerId?: string;
   projectId?: string | null;
   onConnectionComplete?: () => void;
+  onBrowseTriggers?: (toolkitSlug: string) => void;
+  hideMcpConfig?: boolean;
 }) {
   const { authFetch } = useAuth();
   const [apps, setApps] = useState<IntegrationApp[]>([]);
@@ -314,9 +318,10 @@ export function IntegrationsPanel({
     );
   };
 
-  // Get connection for app
+  // Get connection for app (prefer active account)
   const getConnection = (appSlug: string) => {
-    return connectedAccounts.find((a) => a.appId === appSlug);
+    return connectedAccounts.find((a) => a.appId === appSlug && a.status === "active")
+      || connectedAccounts.find((a) => a.appId === appSlug);
   };
 
   // Filter apps
@@ -590,7 +595,8 @@ export function IntegrationsPanel({
                   const conn = getConnection(app.slug);
                   if (conn) handleDisconnect(conn);
                 }}
-                onCreateMcpConfig={() => openMcpConfigModal(app)}
+                onCreateMcpConfig={hideMcpConfig ? undefined : () => openMcpConfigModal(app)}
+                onBrowseTriggers={onBrowseTriggers ? () => onBrowseTriggers(app.slug) : undefined}
                 connecting={connecting === app.slug}
               />
             ))}
@@ -636,6 +642,7 @@ function AppCard({
   onConnect,
   onDisconnect,
   onCreateMcpConfig,
+  onBrowseTriggers,
   connecting,
 }: {
   app: IntegrationApp;
@@ -643,6 +650,7 @@ function AppCard({
   onConnect: () => void;
   onDisconnect?: () => void;
   onCreateMcpConfig?: () => void;
+  onBrowseTriggers?: () => void;
   connecting: boolean;
 }) {
   const isConnected = connection?.status === "active";
@@ -723,6 +731,14 @@ function AppCard({
                 Create MCP Config
               </button>
             )}
+            {onBrowseTriggers && (
+              <button
+                onClick={onBrowseTriggers}
+                className="flex-1 text-xs bg-[#1a1a2a] hover:bg-[#1a1a3a] border border-blue-500/30 hover:border-blue-500/50 text-blue-400 px-3 py-1.5 rounded transition"
+              >
+                Browse Triggers
+              </button>
+            )}
             {onDisconnect && (
               <button
                 onClick={onDisconnect}

package/src/web/components/mcp/McpPage.tsx

@@ -948,9 +948,12 @@ function HostedServices({ onServerAdded, projectId }: { onServerAdded?: () => vo
 
   const fetchStatus = async () => {
     try {
+      const serversUrl = projectId && projectId !== "unassigned"
+        ? `/api/mcp/servers?project=${encodeURIComponent(projectId)}`
+        : "/api/mcp/servers";
       const [providersRes, serversRes] = await Promise.all([
         authFetch("/api/providers"),
-        authFetch("/api/mcp/servers"),
+        authFetch(serversUrl),
       ]);
       const providersData = await providersRes.json();
       const serversData = await serversRes.json();
@@ -1037,7 +1040,7 @@ function HostedServices({ onServerAdded, projectId }: { onServerAdded?: () => vo
 
   useEffect(() => {
     fetchStatus();
-  }, [authFetch]);
+  }, [authFetch, projectId]);
 
   if (loading) {
     return <div className="text-center py-8 text-[#666]">Loading...</div>;
@@ -1360,9 +1363,12 @@ function AgentDojoContent({
     setLoadingConfigs(true);
     try {
       const projectParam = projectId && projectId !== "unassigned" ? `?project_id=${projectId}` : "";
+      const serversUrl = projectId && projectId !== "unassigned"
+        ? `/api/mcp/servers?project=${encodeURIComponent(projectId)}`
+        : "/api/mcp/servers";
       const [configsRes, serversRes] = await Promise.all([
         authFetch(`/api/integrations/agentdojo/configs${projectParam}`),
-        authFetch("/api/mcp/servers"),
+        authFetch(serversUrl),
       ]);
       const configsData = await configsRes.json();
       const serversData = await serversRes.json();

package/src/web/components/settings/SettingsPage.tsx

@@ -5,13 +5,14 @@ import { Select } from "../common/Select";
 import { useProjects, useAuth, type Project } from "../../context";
 import type { Provider } from "../../types";
 
-type SettingsTab = "providers" | "projects" | "api-keys" | "account" | "updates" | "data";
+type SettingsTab = "general" | "providers" | "projects" | "api-keys" | "account" | "updates" | "data";
 
 export function SettingsPage() {
   const { projectsEnabled } = useProjects();
-  const [activeTab, setActiveTab] = useState<SettingsTab>("providers");
+  const [activeTab, setActiveTab] = useState<SettingsTab>("general");
 
   const tabs: { key: SettingsTab; label: string }[] = [
+    { key: "general", label: "General" },
     { key: "providers", label: "Providers" },
     ...(projectsEnabled ? [{ key: "projects" as SettingsTab, label: "Projects" }] : []),
     { key: "api-keys", label: "API Keys" },
@@ -58,6 +59,7 @@ export function SettingsPage() {
 
       {/* Settings Content */}
       <div className="flex-1 overflow-auto p-4 md:p-6">
+        {activeTab === "general" && <GeneralSettings />}
         {activeTab === "providers" && <ProvidersSettings />}
         {activeTab === "projects" && projectsEnabled && <ProjectsSettings />}
         {activeTab === "api-keys" && <ApiKeysSettings />}
@@ -92,6 +94,98 @@ function SettingsNavItem({
   );
 }
 
+function GeneralSettings() {
+  const { authFetch } = useAuth();
+  const [instanceUrl, setInstanceUrl] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+  useEffect(() => {
+    const fetch = async () => {
+      try {
+        const res = await authFetch("/api/settings/instance-url");
+        const data = await res.json();
+        setInstanceUrl(data.instance_url || "");
+      } catch {
+        // ignore
+      }
+      setLoading(false);
+    };
+    fetch();
+  }, []);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMessage(null);
+    try {
+      const res = await authFetch("/api/settings/instance-url", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ instance_url: instanceUrl }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        setInstanceUrl(data.instance_url || "");
+        setMessage({ type: "success", text: "Instance URL saved" });
+      } else {
+        setMessage({ type: "error", text: data.error || "Failed to save" });
+      }
+    } catch {
+      setMessage({ type: "error", text: "Failed to save" });
+    }
+    setSaving(false);
+  };
+
+  return (
+    <div className="max-w-4xl w-full">
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold mb-1">General</h1>
+        <p className="text-[#666]">Instance configuration.</p>
+      </div>
+
+      <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+        <h3 className="font-medium mb-2">Instance URL</h3>
+        <p className="text-sm text-[#666] mb-4">
+          The public HTTPS URL for this instance. Used for webhook callbacks from external services like Composio.
+        </p>
+
+        {loading ? (
+          <div className="text-[#666] text-sm">Loading...</div>
+        ) : (
+          <div className="space-y-3 max-w-lg">
+            <input
+              type="text"
+              value={instanceUrl}
+              onChange={e => setInstanceUrl(e.target.value)}
+              placeholder="https://your-domain.com"
+              className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316] font-mono text-sm"
+            />
+
+            {message && (
+              <div className={`p-3 rounded text-sm ${
+                message.type === "success"
+                  ? "bg-green-500/10 text-green-400 border border-green-500/30"
+                  : "bg-red-500/10 text-red-400 border border-red-500/30"
+              }`}>
+                {message.text}
+              </div>
+            )}
+
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              className="px-4 py-2 bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 text-black rounded text-sm font-medium transition"
+            >
+              {saving ? "Saving..." : "Save"}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 function ProvidersSettings() {
   const { authFetch } = useAuth();
   const { projects, projectsEnabled } = useProjects();

package/src/web/components/tasks/TasksPage.tsx

@@ -500,7 +500,7 @@ function TrajectoryView({ trajectory }: { trajectory: TaskTrajectoryStep[] }) {
 
 const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-function formatCron(cron: string): string {
+export function formatCron(cron: string): string {
   try {
     const parts = cron.trim().split(/\s+/);
     if (parts.length !== 5) return cron;
@@ -558,7 +558,7 @@ function formatCron(cron: string): string {
   }
 }
 
-function formatRelativeTime(dateStr: string): string {
+export function formatRelativeTime(dateStr: string): string {
   const date = new Date(dateStr);
   const now = new Date();
   const diffMs = date.getTime() - now.getTime();

package/src/web/components/tests/TestsPage.tsx

@@ -157,8 +157,7 @@ export function TestsPage() {
   };
 
   useEffect(() => {
-    fetchTests();
-    fetchAgents();
+    Promise.all([fetchTests(), fetchAgents()]);
   }, [currentProjectId]);
 
   const openCreate = () => {

package/src/web/context/TelemetryContext.tsx

@@ -20,6 +20,7 @@ interface TelemetryContextValue {
   lastActivityByAgent: Record<string, { timestamp: string; category: string; type: string }>;
   activeAgents: Record<string, { type: string; expiresAt: number }>;
   statusChangeCounter: number;
+  taskChangeCounter: number;
   clearEvents: () => void;
 }
 
@@ -33,6 +34,7 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
   const [lastActivityByAgent, setLastActivityByAgent] = useState<Record<string, { timestamp: string; category: string; type: string }>>({});
   const [activeAgents, setActiveAgents] = useState<Record<string, { type: string; expiresAt: number }>>({});
   const [statusChangeCounter, setStatusChangeCounter] = useState(0);
+  const [taskChangeCounter, setTaskChangeCounter] = useState(0);
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -117,6 +119,11 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
             if (data.some((e: TelemetryEvent) => e.category === "system" && (e.type === "agent_started" || e.type === "agent_stopped"))) {
               setStatusChangeCounter(c => c + 1);
             }
+
+            // Detect task change events
+            if (data.some((e: TelemetryEvent) => e.category === "TASK" && (e.type === "task_created" || e.type === "task_updated" || e.type === "task_deleted"))) {
+              setTaskChangeCounter(c => c + 1);
+            }
           }
         } catch {
           // Ignore parse errors (likely keepalive or empty message)
@@ -162,7 +169,7 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   return (
-    <TelemetryContext.Provider value={{ connected, events, lastActivityByAgent, activeAgents, statusChangeCounter, clearEvents }}>
+    <TelemetryContext.Provider value={{ connected, events, lastActivityByAgent, activeAgents, statusChangeCounter, taskChangeCounter, clearEvents }}>
       {children}
     </TelemetryContext.Provider>
   );
@@ -235,3 +242,9 @@ export function useAgentStatusChange(): number {
   const { statusChangeCounter } = useTelemetryContext();
   return statusChangeCounter;
 }
+
+// Hook to trigger task count refetch on task mutations
+export function useTaskChange(): number {
+  const { taskChangeCounter } = useTelemetryContext();
+  return taskChangeCounter;
+}

package/src/web/context/index.ts

@@ -1,4 +1,4 @@
-export { TelemetryProvider, useTelemetryContext, useTelemetry, useAgentActivity, useAgentStatusChange } from "./TelemetryContext";
+export { TelemetryProvider, useTelemetryContext, useTelemetry, useAgentActivity, useAgentStatusChange, useTaskChange } from "./TelemetryContext";
 export type { TelemetryEvent } from "./TelemetryContext";
 
 export { AuthProvider, useAuth, useAuthHeaders } from "./AuthContext";

package/src/web/hooks/useAgents.ts

@@ -23,19 +23,13 @@ export function useAgents(enabled: boolean) {
     setLoading(false);
   }, [getHeaders]);
 
-  // Auto-refetch when agents start/stop/crash (via SSE telemetry)
+  // Fetch on mount + auto-refetch when agents start/stop/crash (via SSE telemetry)
   const statusChangeCounter = useAgentStatusChange();
-  useEffect(() => {
-    if (enabled && statusChangeCounter > 0) {
-      fetchAgents();
-    }
-  }, [enabled, statusChangeCounter, fetchAgents]);
-
   useEffect(() => {
     if (enabled) {
       fetchAgents();
     }
-  }, [enabled, fetchAgents]);
+  }, [enabled, statusChangeCounter, fetchAgents]);
 
   const createAgent = async (agent: {
     name: string;
@@ -83,10 +77,20 @@ export function useAgents(enabled: boolean) {
 
   const toggleAgent = async (agent: Agent): Promise<{ error?: string }> => {
     const action = agent.status === "running" ? "stop" : "start";
+
+    // Optimistic UI update — show transitioning state immediately
+    setAgents(prev => prev.map(a =>
+      a.id === agent.id ? { ...a, status: action === "start" ? "starting" as any : "stopping" as any } : a
+    ));
+
+    // Fire API call — telemetry SSE will trigger a refetch with the real status
     const res = await fetch(`/api/agents/${agent.id}/${action}`, { method: "POST", headers: getHeaders() });
-    const data = await res.json();
-    await fetchAgents();
-    if (!res.ok && data.error) {
+    if (!res.ok) {
+      const data = await res.json();
+      // Revert on error
+      setAgents(prev => prev.map(a =>
+        a.id === agent.id ? { ...a, status: agent.status } : a
+      ));
       return { error: data.error };
     }
     return {};

package/src/web/types.ts

@@ -143,7 +143,7 @@ export interface OnboardingStatus {
   has_any_keys: boolean;
 }
 
-export type Route = "dashboard" | "activity" | "agents" | "tasks" | "mcp" | "skills" | "tests" | "telemetry" | "settings" | "api";
+export type Route = "dashboard" | "activity" | "agents" | "tasks" | "connections" | "mcp" | "skills" | "tests" | "telemetry" | "settings" | "api";
 
 // Tool use content block in trajectory
 export interface ToolUseBlock {