apteva 0.4.18 → 0.4.20

package/src/web/components/dashboard/Dashboard.tsx

@@ -45,10 +45,11 @@ export function Dashboard({
 
   const fetchDashboardData = useCallback(async () => {
     try {
+      const projectParam = currentProjectId ? `project_id=${encodeURIComponent(currentProjectId)}` : "";
       const [dashRes, tasksRes, activityRes] = await Promise.all([
-        authFetch("/api/dashboard"),
-        authFetch("/api/tasks?status=all"),
-        authFetch("/api/telemetry/events?type=thread_activity&limit=20"),
+        authFetch(`/api/dashboard${projectParam ? `?${projectParam}` : ""}`),
+        authFetch(`/api/tasks?status=all${projectParam ? `&${projectParam}` : ""}`),
+        authFetch(`/api/telemetry/events?type=thread_activity&limit=20${projectParam ? `&${projectParam}` : ""}`),
       ]);
 
       if (dashRes.ok) {
@@ -68,7 +69,7 @@ export function Dashboard({
     } catch (e) {
       console.error("Failed to fetch dashboard data:", e);
     }
-  }, [authFetch]);
+  }, [authFetch, currentProjectId]);
 
   useEffect(() => {
     fetchDashboardData();

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/settings/SettingsPage.tsx

@@ -5,7 +5,7 @@ import { Select } from "../common/Select";
 import { useProjects, useAuth, type Project } from "../../context";
 import type { Provider } from "../../types";
 
-type SettingsTab = "general" | "providers" | "projects" | "api-keys" | "account" | "updates" | "data";
+type SettingsTab = "general" | "providers" | "projects" | "channels" | "api-keys" | "account" | "updates" | "data";
 
 export function SettingsPage() {
   const { projectsEnabled } = useProjects();
@@ -15,6 +15,7 @@ export function SettingsPage() {
     { key: "general", label: "General" },
     { key: "providers", label: "Providers" },
     ...(projectsEnabled ? [{ key: "projects" as SettingsTab, label: "Projects" }] : []),
+    { key: "channels", label: "Channels" },
     { key: "api-keys", label: "API Keys" },
     { key: "account", label: "Account" },
     { key: "updates", label: "Updates" },
@@ -62,6 +63,7 @@ export function SettingsPage() {
         {activeTab === "general" && <GeneralSettings />}
         {activeTab === "providers" && <ProvidersSettings />}
         {activeTab === "projects" && projectsEnabled && <ProjectsSettings />}
+        {activeTab === "channels" && <ChannelsSettings />}
         {activeTab === "api-keys" && <ApiKeysSettings />}
         {activeTab === "account" && <AccountSettings />}
         {activeTab === "updates" && <UpdatesSettings />}
@@ -1884,3 +1886,269 @@ function DataSettings() {
     </>
   );
 }
+
+// --- Channels Settings ---
+
+interface ChannelInfo {
+  id: string;
+  type: string;
+  name: string;
+  agent_id: string;
+  status: "stopped" | "running" | "error";
+  error: string | null;
+  created_at: string;
+}
+
+interface AgentOption {
+  id: string;
+  name: string;
+  status: string;
+}
+
+function ChannelsSettings() {
+  const { authFetch } = useAuth();
+  const [channels, setChannels] = useState<ChannelInfo[]>([]);
+  const [agents, setAgents] = useState<AgentOption[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [formData, setFormData] = useState({ name: "", agent_id: "", botToken: "" });
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { confirm, ConfirmDialog } = useConfirm();
+
+  const fetchChannels = async () => {
+    try {
+      const res = await authFetch("/api/channels");
+      const data = await res.json();
+      setChannels(data.channels || []);
+    } catch {
+      // Ignore
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchAgents = async () => {
+    try {
+      const res = await authFetch("/api/agents");
+      const data = await res.json();
+      setAgents((data.agents || []).map((a: any) => ({ id: a.id, name: a.name, status: a.status })));
+    } catch {
+      // Ignore
+    }
+  };
+
+  useEffect(() => {
+    fetchChannels();
+    fetchAgents();
+  }, []);
+
+  const createChannel = async () => {
+    if (!formData.name || !formData.agent_id || !formData.botToken) return;
+    setCreating(true);
+    setError(null);
+
+    try {
+      const res = await authFetch("/api/channels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          type: "telegram",
+          name: formData.name,
+          agent_id: formData.agent_id,
+          config: { botToken: formData.botToken },
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || "Failed to create channel");
+      } else {
+        setFormData({ name: "", agent_id: "", botToken: "" });
+        setShowForm(false);
+        await fetchChannels();
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const toggleChannel = async (channel: ChannelInfo) => {
+    const action = channel.status === "running" ? "stop" : "start";
+    try {
+      const res = await authFetch(`/api/channels/${channel.id}/${action}`, { method: "POST" });
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || `Failed to ${action} channel`);
+      }
+      await fetchChannels();
+    } catch {
+      setError(`Failed to ${action} channel`);
+    }
+  };
+
+  const deleteChannel = async (channel: ChannelInfo) => {
+    const confirmed = await confirm(`Delete channel "${channel.name}"?`, {
+      confirmText: "Delete",
+      title: "Delete Channel",
+    });
+    if (!confirmed) return;
+
+    try {
+      await authFetch(`/api/channels/${channel.id}`, { method: "DELETE" });
+      await fetchChannels();
+    } catch {
+      // Ignore
+    }
+  };
+
+  const statusColors: Record<string, string> = {
+    running: "bg-green-500/20 text-green-400",
+    stopped: "bg-[#333] text-[#666]",
+    error: "bg-red-500/20 text-red-400",
+  };
+
+  const getAgentName = (agentId: string) => {
+    return agents.find(a => a.id === agentId)?.name || agentId;
+  };
+
+  return (
+    <>
+    {ConfirmDialog}
+    <div className="max-w-2xl">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-semibold mb-1">Channels</h2>
+          <p className="text-sm text-[#666]">Connect agents to external messaging platforms</p>
+        </div>
+        <button
+          onClick={() => setShowForm(!showForm)}
+          className="flex items-center gap-2 bg-[#f97316] hover:bg-[#fb923c] text-black px-3 py-1.5 rounded text-sm font-medium transition"
+        >
+          <PlusIcon /> Add Channel
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-4 bg-red-500/10 text-red-400 border border-red-500/30 px-3 py-2 rounded text-sm flex items-center justify-between">
+          <span>{error}</span>
+          <button onClick={() => setError(null)} className="text-red-400 hover:text-red-300 ml-2">
+            <CloseIcon />
+          </button>
+        </div>
+      )}
+
+      {/* Create form */}
+      {showForm && (
+        <div className="mb-6 bg-[#111] border border-[#1a1a1a] rounded-lg p-4 space-y-3">
+          <h3 className="text-sm font-medium text-[#888] mb-2">New Telegram Channel</h3>
+
+          <div>
+            <label className="block text-xs text-[#666] mb-1">Channel Name</label>
+            <input
+              type="text"
+              value={formData.name}
+              onChange={e => setFormData(prev => ({ ...prev, name: e.target.value }))}
+              placeholder="e.g. My Telegram Bot"
+              className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316]"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-[#666] mb-1">Agent</label>
+            <Select
+              value={formData.agent_id}
+              options={agents.map(a => ({ value: a.id, label: a.name }))}
+              onChange={value => setFormData(prev => ({ ...prev, agent_id: value }))}
+              placeholder="Select an agent..."
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-[#666] mb-1">Bot Token</label>
+            <input
+              type="password"
+              value={formData.botToken}
+              onChange={e => setFormData(prev => ({ ...prev, botToken: e.target.value }))}
+              placeholder="From @BotFather on Telegram"
+              className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316]"
+            />
+            <p className="text-xs text-[#555] mt-1">
+              Create a bot via <a href="https://t.me/BotFather" target="_blank" className="text-[#f97316] hover:underline">@BotFather</a> on Telegram to get a token.
+            </p>
+          </div>
+
+          <div className="flex gap-2 pt-1">
+            <button
+              onClick={createChannel}
+              disabled={creating || !formData.name || !formData.agent_id || !formData.botToken}
+              className="bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 text-black px-4 py-1.5 rounded text-sm font-medium transition"
+            >
+              {creating ? "Creating..." : "Create"}
+            </button>
+            <button
+              onClick={() => { setShowForm(false); setFormData({ name: "", agent_id: "", botToken: "" }); }}
+              className="border border-[#333] hover:border-[#444] px-4 py-1.5 rounded text-sm transition"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Channel list */}
+      {loading ? (
+        <p className="text-[#666] text-sm">Loading channels...</p>
+      ) : channels.length === 0 ? (
+        <div className="text-center py-12 text-[#666]">
+          <p className="text-lg mb-2">No channels configured</p>
+          <p className="text-sm">Add a Telegram channel to let users message your agents directly.</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {channels.map(channel => (
+            <div key={channel.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+              <div className="flex items-start justify-between">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-medium">{channel.name}</h3>
+                    <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusColors[channel.status] || statusColors.stopped}`}>
+                      {channel.status}
+                    </span>
+                  </div>
+                  <p className="text-sm text-[#666]">
+                    {channel.type === "telegram" ? "Telegram" : channel.type} → {getAgentName(channel.agent_id)}
+                  </p>
+                  {channel.status === "error" && channel.error && (
+                    <p className="text-xs text-red-400 mt-1">{channel.error}</p>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 ml-4">
+                  <button
+                    onClick={() => toggleChannel(channel)}
+                    className={`px-3 py-1 rounded text-xs font-medium transition ${
+                      channel.status === "running"
+                        ? "bg-[#f97316]/20 text-[#f97316] hover:bg-[#f97316]/30"
+                        : "bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30"
+                    }`}
+                  >
+                    {channel.status === "running" ? "Stop" : "Start"}
+                  </button>
+                  <button
+                    onClick={() => deleteChannel(channel)}
+                    className="text-[#666] hover:text-red-400 transition text-sm"
+                  >
+                    ×
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+    </>
+  );
+}

package/src/web/context/AuthContext.tsx

@@ -20,6 +20,8 @@ interface AuthContextValue {
   hasUsers: boolean | null;
   isDev: boolean;
   accessToken: string | null;
+  onboardingComplete: boolean | null;
+  setOnboardingComplete: (v: boolean) => void;
   login: (username: string, password: string) => Promise<{ success: boolean; error?: string }>;
   logout: () => Promise<void>;
   refreshToken: () => Promise<boolean>;
@@ -47,6 +49,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [hasUsers, setHasUsers] = useState<boolean | null>(null);
   const [isDev, setIsDev] = useState(false);
+  const [onboardingComplete, setOnboardingComplete] = useState<boolean | null>(null);
 
   // Refs to track state without causing re-renders
   const tokenRef = useRef<string | null>(null);
@@ -80,18 +83,15 @@ export function AuthProvider({ children }: AuthProviderProps) {
       const data = await res.json();
       updateToken(data.accessToken);
 
-      // Get user info with new token
-      const meRes = await fetch("/api/auth/me", {
-        headers: { Authorization: `Bearer ${data.accessToken}` },
-      });
-
-      if (meRes.ok) {
-        const meData = await meRes.json();
-        setUser(meData.user);
-        return true;
+      // User info + onboarding included in refresh response to avoid extra round trip
+      if (data.user) {
+        setUser(data.user);
+      }
+      if (data.onboarding) {
+        setOnboardingComplete(data.onboarding.completed || data.onboarding.has_any_keys);
       }
 
-      return false;
+      return !!data.user;
     } catch (e) {
       console.error("Token refresh failed:", e);
       return false;
@@ -107,11 +107,16 @@ export function AuthProvider({ children }: AuthProviderProps) {
       const res = await fetch("/api/auth/check", {
         headers: token ? { Authorization: `Bearer ${token}` } : {},
       });
-      const data: AuthStatus = await res.json();
+      const data: AuthStatus & { onboarding?: { completed: boolean; has_any_keys: boolean } } = await res.json();
 
       setHasUsers(data.hasUsers);
       setIsDev(data.isDev ?? false);
 
+      // Extract onboarding status (piggybacks on auth check to avoid extra round trip)
+      if (data.onboarding) {
+        setOnboardingComplete(data.onboarding.completed || data.onboarding.has_any_keys);
+      }
+
       if (data.authenticated && data.user) {
         setUser(data.user as User);
       } else {
@@ -218,6 +223,8 @@ export function AuthProvider({ children }: AuthProviderProps) {
     hasUsers,
     isDev,
     accessToken,
+    onboardingComplete,
+    setOnboardingComplete,
     login,
     logout,
     refreshToken,

package/src/web/context/TelemetryContext.tsx

@@ -21,6 +21,7 @@ interface TelemetryContextValue {
   activeAgents: Record<string, { type: string; expiresAt: number }>;
   statusChangeCounter: number;
   taskChangeCounter: number;
+  notificationCounter: number;
   clearEvents: () => void;
 }
 
@@ -35,6 +36,7 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
   const [activeAgents, setActiveAgents] = useState<Record<string, { type: string; expiresAt: number }>>({});
   const [statusChangeCounter, setStatusChangeCounter] = useState(0);
   const [taskChangeCounter, setTaskChangeCounter] = useState(0);
+  const [notificationCounter, setNotificationCounter] = useState(0);
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -124,6 +126,11 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
             if (data.some((e: TelemetryEvent) => e.category === "TASK" && (e.type === "task_created" || e.type === "task_updated" || e.type === "task_deleted"))) {
               setTaskChangeCounter(c => c + 1);
             }
+
+            // Detect notification-worthy events (errors, agent crashes)
+            if (data.some((e: TelemetryEvent) => e.level === "error" || e.category === "ERROR" || (e.category === "system" && e.type === "agent_stopped"))) {
+              setNotificationCounter(c => c + 1);
+            }
           }
         } catch {
           // Ignore parse errors (likely keepalive or empty message)
@@ -169,7 +176,7 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   return (
-    <TelemetryContext.Provider value={{ connected, events, lastActivityByAgent, activeAgents, statusChangeCounter, taskChangeCounter, clearEvents }}>
+    <TelemetryContext.Provider value={{ connected, events, lastActivityByAgent, activeAgents, statusChangeCounter, taskChangeCounter, notificationCounter, clearEvents }}>
       {children}
     </TelemetryContext.Provider>
   );
@@ -248,3 +255,9 @@ export function useTaskChange(): number {
   const { taskChangeCounter } = useTelemetryContext();
   return taskChangeCounter;
 }
+
+// Hook to trigger notification badge refresh
+export function useNotificationChange(): number {
+  const { notificationCounter } = useTelemetryContext();
+  return notificationCounter;
+}

package/src/web/context/index.ts

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