apteva 0.4.17 → 0.4.19

package/src/web/components/index.ts

@@ -18,3 +18,4 @@ export { McpPage } from "./mcp";
 export { SkillsPage } from "./skills/SkillsPage";
 export { TestsPage } from "./tests/TestsPage";
 export { TelemetryPage } from "./telemetry/TelemetryPage";
+export { ConnectionsPage } from "./connections/ConnectionsPage";

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

@@ -1,18 +1,128 @@
-import React, { useState } from "react";
-import { useTelemetryContext, useAuth, useProjects } from "../../context";
-import { MenuIcon, ChevronDownIcon } from "../common/Icons";
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useTelemetryContext, useAuth, useAuthHeaders, useProjects, useNotificationChange } from "../../context";
+import { MenuIcon, ChevronDownIcon, BellIcon } from "../common/Icons";
 import { MetaAgentButton } from "../meta-agent/MetaAgent";
 
+interface Notification {
+  id: string;
+  agent_id: string;
+  timestamp: string;
+  category: string;
+  type: string;
+  level: string;
+  error: string | null;
+  data: Record<string, unknown> | null;
+  seen?: boolean;
+}
+
 interface HeaderProps {
   onMenuClick?: () => void;
+  agents?: Array<{ id: string; name: string; projectId: string | null }>;
 }
 
-export function Header({ onMenuClick }: HeaderProps) {
+export function Header({ onMenuClick, agents = [] }: HeaderProps) {
   const { connected } = useTelemetryContext();
   const { user, logout } = useAuth();
+  const authHeaders = useAuthHeaders();
   const { projects, currentProjectId, currentProject, setCurrentProjectId, unassignedCount, projectsEnabled } = useProjects();
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [showProjectMenu, setShowProjectMenu] = useState(false);
+  const [showNotifications, setShowNotifications] = useState(false);
+  const [unseenCount, setUnseenCount] = useState(0);
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const notificationChange = useNotificationChange();
+  const { events } = useTelemetryContext();
+  const { accessToken } = useAuth();
+  const fetchedOnce = useRef(false);
+
+  const agentNames = React.useMemo(() => {
+    const map: Record<string, string> = {};
+    for (const a of agents) map[a.id] = a.name;
+    return map;
+  }, [agents]);
+
+  // Set of agent IDs matching the current project filter
+  const projectAgentIds = React.useMemo(() => {
+    if (!projectsEnabled || currentProjectId === null) return null; // null = show all
+    if (currentProjectId === "unassigned") return new Set(agents.filter(a => !a.projectId).map(a => a.id));
+    return new Set(agents.filter(a => a.projectId === currentProjectId).map(a => a.id));
+  }, [agents, currentProjectId, projectsEnabled]);
+
+  // Fetch initial unseen count once
+  useEffect(() => {
+    if (fetchedOnce.current || !accessToken) return;
+    fetchedOnce.current = true;
+    fetch("/api/notifications/count", { headers: { Authorization: `Bearer ${accessToken}` } })
+      .then(r => r.json())
+      .then(d => setUnseenCount(d.count || 0))
+      .catch(() => {});
+  }, [accessToken]);
+
+  // Bump count live from SSE (only if event matches current project)
+  useEffect(() => {
+    if (notificationChange === 0) return;
+    const latest = events.find(e =>
+      e.level === "error" || e.category === "ERROR" || (e.category === "system" && e.type === "agent_stopped")
+    );
+    if (latest && (!projectAgentIds || projectAgentIds.has(latest.agent_id))) {
+      setUnseenCount(c => c + 1);
+    }
+  }, [notificationChange]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Re-count when project filter changes (from cached notifications or reset)
+  const prevProjectRef = useRef(currentProjectId);
+  useEffect(() => {
+    if (prevProjectRef.current === currentProjectId) return;
+    prevProjectRef.current = currentProjectId;
+    // Refetch count with project filter
+    if (!accessToken) return;
+    fetch("/api/notifications/count", { headers: { Authorization: `Bearer ${accessToken}` } })
+      .then(r => r.json())
+      .then(d => {
+        // API returns total unseen — client filters by project
+        if (!projectAgentIds) {
+          setUnseenCount(d.count || 0);
+        } else {
+          // We need to fetch actual notifications to filter by project
+          fetch("/api/notifications?limit=200", { headers: { Authorization: `Bearer ${accessToken}` } })
+            .then(r => r.json())
+            .then(nd => {
+              const unseen = (nd.notifications || []).filter(
+                (n: Notification) => !n.seen && projectAgentIds.has(n.agent_id)
+              );
+              setUnseenCount(unseen.length);
+            })
+            .catch(() => {});
+        }
+      })
+      .catch(() => {});
+  }, [currentProjectId, accessToken, projectAgentIds]);
+
+  const openNotifications = useCallback(async () => {
+    setShowNotifications(prev => !prev);
+    if (!showNotifications) {
+      try {
+        const headers: Record<string, string> = { "Content-Type": "application/json" };
+        if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+        const res = await fetch("/api/notifications?limit=50", { headers });
+        const data = await res.json();
+        let items: Notification[] = data.notifications || [];
+        if (projectAgentIds) items = items.filter(n => projectAgentIds.has(n.agent_id));
+        setNotifications(items);
+        // Mark all as seen
+        if (unseenCount > 0) {
+          await fetch("/api/notifications/mark-seen", {
+            method: "POST",
+            headers,
+            body: JSON.stringify({ all: true }),
+          });
+          setUnseenCount(0);
+        }
+      } catch {
+        // Ignore
+      }
+    }
+  }, [showNotifications, unseenCount, accessToken, projectAgentIds]);
 
   const handleLogout = async () => {
     await logout();
@@ -123,6 +233,77 @@ export function Header({ onMenuClick }: HeaderProps) {
               {connected ? "Live" : "Offline"}
             </span>
           </div>
+          {/* Notification Bell */}
+          <div className="relative">
+            <button
+              onClick={openNotifications}
+              className="relative p-2 text-[#666] hover:text-[#e0e0e0] transition rounded hover:bg-[#1a1a1a]"
+            >
+              <BellIcon className="w-5 h-5" />
+              {unseenCount > 0 && (
+                <span
+                  className="absolute flex items-center justify-center bg-red-500 text-white font-bold rounded-full pointer-events-none"
+                  style={{
+                    top: 2,
+                    right: 2,
+                    fontSize: 9,
+                    lineHeight: 1,
+                    minWidth: 16,
+                    height: 16,
+                    padding: "0 4px",
+                  }}
+                >
+                  {unseenCount > 99 ? "99+" : unseenCount}
+                </span>
+              )}
+            </button>
+            {showNotifications && (
+              <>
+                <div className="fixed inset-0 z-40" onClick={() => setShowNotifications(false)} />
+                <div className="absolute right-0 top-full mt-1 w-80 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto">
+                  <div className="px-4 py-3 border-b border-[#222] flex items-center justify-between">
+                    <span className="text-sm font-medium">Notifications</span>
+                    {notifications.length > 0 && (
+                      <span className="text-xs text-[#666]">{notifications.length} recent</span>
+                    )}
+                  </div>
+                  {notifications.length === 0 ? (
+                    <div className="px-4 py-8 text-center text-sm text-[#666]">
+                      No notifications
+                    </div>
+                  ) : (
+                    <div className="py-1">
+                      {notifications.map(n => (
+                        <div key={n.id} className={`px-4 py-3 hover:bg-[#1a1a1a] transition border-b border-[#1a1a1a] ${!n.seen ? "bg-[#0f0f0f]" : ""}`}>
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                              !n.seen
+                                ? (n.level === "error" || n.category === "ERROR" ? "bg-red-400" : "bg-[#f97316]")
+                                : "bg-[#333]"
+                            }`} />
+                            <span className={`text-xs font-medium truncate ${!n.seen ? "text-[#ccc]" : "text-[#666]"}`}>
+                              {n.category === "system" && n.type === "agent_stopped" ? "Agent Stopped" :
+                               n.category === "ERROR" ? "Error" :
+                               `${n.category} / ${n.type}`}
+                            </span>
+                            <span className="text-[10px] text-[#555] ml-auto flex-shrink-0">
+                              {formatNotifTime(n.timestamp)}
+                            </span>
+                          </div>
+                          <div className={`text-xs truncate ${!n.seen ? "text-[#aaa]" : "text-[#666]"}`}>
+                            {n.error || (n.data as any)?.message || (n.data as any)?.error || `${n.type} event`}
+                          </div>
+                          <div className="text-[10px] text-[#555] mt-1">
+                            {agentNames[n.agent_id] || n.agent_id.slice(0, 8)}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
           <MetaAgentButton />
           {user && (
             <div className="relative">
@@ -156,3 +337,14 @@ export function Header({ onMenuClick }: HeaderProps) {
     </header>
   );
 }
+
+function formatNotifTime(timestamp: string): string {
+  const diff = Date.now() - new Date(timestamp).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}

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}