fix(frontend): AutoPilot notification follow-ups — branding, UX, persistence, and cross-tab sync

.gitignore

@@ -16,6 +16,7 @@ log-ingestion.txt
 /logs
 *.log
 *.mp3
+!autogpt_platform/frontend/public/notification.mp3
 mem.sqlite3
 venvAutoGPT
 

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx

@@ -125,7 +125,7 @@ export function ChatSidebar() {
     clearCompletedSession(sessionId);
     const remaining = completedSessionIDs.size - 1;
     document.title =
-      remaining > 0 ? `(${remaining}) Otto is ready - AutoGPT` : "AutoGPT";
+      remaining > 0 ? `(${remaining}) AutoPilot is ready - AutoGPT` : "AutoGPT";
   }, [sessionId, completedSessionIDs, clearCompletedSession]);
 
   const sessions =

autogpt_platform/frontend/src/app/(platform)/copilot/components/NotificationBanner/NotificationBanner.tsx

@@ -56,8 +56,8 @@ export function NotificationBanner() {
     <div className="flex items-center gap-3 border-b border-amber-200 bg-amber-50 px-4 py-2.5">
       <BellRinging className="h-5 w-5 shrink-0 text-amber-600" weight="fill" />
       <Text variant="body" className="flex-1 text-sm text-amber-800">
-        Enable browser notifications to know when Otto finishes working, even
-        when you switch tabs.
+        Enable browser notifications to know when AutoPilot finishes working,
+        even when you switch tabs.
       </Text>
       <Button variant="primary" size="small" onClick={handleEnable}>
         Enable

autogpt_platform/frontend/src/app/(platform)/copilot/components/NotificationDialog/NotificationDialog.tsx

@@ -77,11 +77,12 @@ export function NotificationDialog() {
             <BellRinging className="h-6 w-6 text-violet-600" weight="fill" />
           </div>
           <Text variant="body" className="text-center text-neutral-600">
-            Otto can notify you when a response is ready, even if you switch
-            tabs or close this page. Enable notifications so you never miss one.
+            AutoPilot can notify you when a response is ready, even if you
+            switch tabs or close this page. Enable notifications so you never
+            miss one.
           </Text>
         </div>
-        <Dialog.Footer>
+        <Dialog.Footer className="justify-center">
           <Button variant="secondary" onClick={handleDismiss}>
             Not now
           </Button>

autogpt_platform/frontend/src/app/(platform)/copilot/store.ts

@@ -6,6 +6,35 @@ export interface DeleteTarget {
   title: string | null | undefined;
 }
 
+const isClient = typeof window !== "undefined";
+
+function loadCompletedSessions(): Set<string> {
+  if (!isClient) return new Set();
+  const raw = storage.get(Key.COPILOT_COMPLETED_SESSIONS);
+  if (!raw) return new Set();
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    return Array.isArray(parsed)
+      ? new Set<string>(parsed.filter((v) => typeof v === "string"))
+      : new Set();
+  } catch {
+    return new Set();
+  }
+}
+
+function persistCompletedSessions(ids: Set<string>) {
+  if (!isClient) return;
+  try {
+    if (ids.size === 0) {
+      storage.clean(Key.COPILOT_COMPLETED_SESSIONS);
+    } else {
+      storage.set(Key.COPILOT_COMPLETED_SESSIONS, JSON.stringify([...ids]));
+    }
+  } catch {
+    // Keep in-memory state authoritative if persistence is unavailable
+  }
+}
+
 interface CopilotUIState {
   /** Prompt extracted from URL hash (e.g. /copilot#prompt=...) for input prefill. */
   initialPrompt: string | null;
@@ -44,23 +73,28 @@ export const useCopilotUIStore = create<CopilotUIState>((set) => ({
   isDrawerOpen: false,
   setDrawerOpen: (open) => set({ isDrawerOpen: open }),
 
-  completedSessionIDs: new Set<string>(),
+  completedSessionIDs: loadCompletedSessions(),
   addCompletedSession: (id) =>
     set((state) => {
       const next = new Set(state.completedSessionIDs);
       next.add(id);
+      persistCompletedSessions(next);
       return { completedSessionIDs: next };
     }),
   clearCompletedSession: (id) =>
     set((state) => {
       const next = new Set(state.completedSessionIDs);
       next.delete(id);
+      persistCompletedSessions(next);
       return { completedSessionIDs: next };
     }),
-  clearAllCompletedSessions: () =>
-    set({ completedSessionIDs: new Set<string>() }),
+  clearAllCompletedSessions: () => {
+    persistCompletedSessions(new Set());
+    set({ completedSessionIDs: new Set<string>() });
+  },
 
   isNotificationsEnabled:
+    isClient &&
     storage.get(Key.COPILOT_NOTIFICATIONS_ENABLED) === "true" &&
     typeof Notification !== "undefined" &&
     Notification.permission === "granted",
@@ -69,7 +103,8 @@ export const useCopilotUIStore = create<CopilotUIState>((set) => ({
     set({ isNotificationsEnabled: enabled });
   },
 
-  isSoundEnabled: storage.get(Key.COPILOT_SOUND_ENABLED) !== "false",
+  isSoundEnabled:
+    !isClient || storage.get(Key.COPILOT_SOUND_ENABLED) !== "false",
   toggleSound: () =>
     set((state) => {
       const next = !state.isSoundEnabled;
@@ -85,6 +120,7 @@ export const useCopilotUIStore = create<CopilotUIState>((set) => ({
     storage.clean(Key.COPILOT_SOUND_ENABLED);
     storage.clean(Key.COPILOT_NOTIFICATION_BANNER_DISMISSED);
     storage.clean(Key.COPILOT_NOTIFICATION_DIALOG_DISMISSED);
+    storage.clean(Key.COPILOT_COMPLETED_SESSIONS);
     set({
       completedSessionIDs: new Set<string>(),
       isNotificationsEnabled: false,

autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotNotifications.ts

@@ -1,28 +1,62 @@
+import { getGetV2ListSessionsQueryKey } from "@/app/api/__generated__/endpoints/chat/chat";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import type { WebSocketNotification } from "@/lib/autogpt-server-api/types";
+import { Key } from "@/services/storage/local-storage";
+import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef } from "react";
 import { useCopilotUIStore } from "./store";
 
 const ORIGINAL_TITLE = "AutoGPT";
-const NOTIFICATION_SOUND_PATH = "/sounds/notification.mp3";
+const NOTIFICATION_SOUND_PATH = "/notification.mp3";
+
+/**
+ * Show a browser notification with click-to-navigate behaviour.
+ * Wrapped in try-catch so it degrades gracefully in service-worker or
+ * other restricted contexts where the Notification constructor throws.
+ */
+function showBrowserNotification(
+  title: string,
+  opts: { body: string; icon: string; sessionID: string },
+) {
+  try {
+    const n = new Notification(title, { body: opts.body, icon: opts.icon });
+    n.onclick = () => {
+      window.focus();
+      const url = new URL(window.location.href);
+      url.searchParams.set("sessionId", opts.sessionID);
+      window.history.pushState({}, "", url.toString());
+      window.dispatchEvent(new PopStateEvent("popstate"));
+      n.close();
+    };
+  } catch {
+    // Notification constructor is unavailable (e.g. service-worker context).
+    // The user will still see the in-app badge and title update.
+  }
+}
 
 /**
  * Listens for copilot completion notifications via WebSocket.
  * Updates the Zustand store, plays a sound, and updates document.title.
  */
 export function useCopilotNotifications(activeSessionID: string | null) {
   const api = useBackendAPI();
+  const queryClient = useQueryClient();
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const activeSessionRef = useRef(activeSessionID);
   activeSessionRef.current = activeSessionID;
   const windowFocusedRef = useRef(true);
 
-  // Pre-load audio element
+  // Pre-load audio element and sync document title with persisted state
   useEffect(() => {
     if (typeof window === "undefined") return;
     const audio = new Audio(NOTIFICATION_SOUND_PATH);
     audio.volume = 0.5;
     audioRef.current = audio;
+
+    const count = useCopilotUIStore.getState().completedSessionIDs.size;
+    if (count > 0) {
+      document.title = `(${count}) AutoPilot is ready - ${ORIGINAL_TITLE}`;
+    }
   }, []);
 
   // Listen for WebSocket notifications
@@ -49,7 +83,7 @@ export function useCopilotNotifications(activeSessionID: string | null) {
       // Always update UI state (checkmark + title) regardless of notification setting
       state.addCompletedSession(sessionID);
       const count = useCopilotUIStore.getState().completedSessionIDs.size;
-      document.title = `(${count}) Otto is ready - ${ORIGINAL_TITLE}`;
+      document.title = `(${count}) AutoPilot is ready - ${ORIGINAL_TITLE}`;
 
       // Sound and browser notifications are gated by the user setting
       if (!state.isNotificationsEnabled) return;
@@ -65,18 +99,11 @@ export function useCopilotNotifications(activeSessionID: string | null) {
         Notification.permission === "granted" &&
         isUserAway
       ) {
-        const n = new Notification("Otto is ready", {
+        showBrowserNotification("AutoPilot is ready", {
           body: "A response is waiting for you.",
           icon: "/favicon.ico",
+          sessionID,
         });
-        n.onclick = () => {
-          window.focus();
-          const url = new URL(window.location.href);
-          url.searchParams.set("sessionId", sessionID);
-          window.history.pushState({}, "", url.toString());
-          window.dispatchEvent(new PopStateEvent("popstate"));
-          n.close();
-        };
       }
     }
 
@@ -115,4 +142,40 @@ export function useCopilotNotifications(activeSessionID: string | null) {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   }, []);
+
+  // Sync completedSessionIDs across tabs via localStorage storage events
+  useEffect(() => {
+    function handleStorage(e: StorageEvent) {
+      if (e.key !== Key.COPILOT_COMPLETED_SESSIONS) return;
+      let next: Set<string>;
+      try {
+        if (!e.newValue) {
+          next = new Set<string>();
+        } else {
+          const parsed: unknown = JSON.parse(e.newValue);
+          next = Array.isArray(parsed)
+            ? new Set<string>(parsed.filter((v) => typeof v === "string"))
+            : new Set<string>();
+        }
+      } catch {
+        next = new Set<string>();
+      }
+      // localStorage is the shared source of truth — adopt it directly so both
+      // additions (new completions) and removals (cleared sessions) propagate.
+      useCopilotUIStore.setState({ completedSessionIDs: next });
+      const count = next.size;
+      document.title =
+        count > 0
+          ? `(${count}) AutoPilot is ready - ${ORIGINAL_TITLE}`
+          : ORIGINAL_TITLE;
+
+      // Refetch the session list so the sidebar reflects the latest
+      // is_processing state (avoids stale spinner after cross-tab clear).
+      queryClient.invalidateQueries({
+        queryKey: getGetV2ListSessionsQueryKey(),
+      });
+    }
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [queryClient]);
 }

autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/AgentActivityDropdown.tsx

@@ -6,7 +6,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/__legacy__/ui/popover";
-import { Bell } from "@phosphor-icons/react";
+import { Pulse } from "@phosphor-icons/react";
 import { ActivityDropdown } from "./components/ActivityDropdown/ActivityDropdown";
 import { formatNotificationCount } from "./helpers";
 import { useAgentActivityDropdown } from "./useAgentActivityDropdown";
@@ -30,7 +30,7 @@ export function AgentActivityDropdown() {
           data-testid="agent-activity-button"
           aria-label="View Agent Activity"
         >
-          <Bell size={22} className="text-black" />
+          <Pulse size={22} className="text-black" />
 
           {activeCount > 0 && (
             <>

autogpt_platform/frontend/src/services/storage/local-storage.ts

@@ -15,6 +15,7 @@ export enum Key {
   COPILOT_NOTIFICATIONS_ENABLED = "copilot-notifications-enabled",
   COPILOT_NOTIFICATION_BANNER_DISMISSED = "copilot-notification-banner-dismissed",
   COPILOT_NOTIFICATION_DIALOG_DISMISSED = "copilot-notification-dialog-dismissed",
+  COPILOT_COMPLETED_SESSIONS = "copilot-completed-sessions",
 }
 
 function get(key: Key) {