add notifications to web admin

apps/web/src/app/inbox/page.tsx

@@ -36,11 +36,13 @@ import {
   useIsCompactViewport,
 } from "@/components/ResponsiveLayout";
 import {
+  INBOX_CUE_PREFERENCES_UPDATED_EVENT,
   buildUnreadSnapshot,
   getUnreadIncreases,
   loadInboxCuePreferences,
   shouldSuppressAttentionCue,
 } from "@/lib/inboxNotificationCues";
+import { playInboxBingSound } from "@/lib/playInboxBingSound";
 
 function PresenceIndicator({ visitorId }: { visitorId: Id<"visitors"> }) {
   const isOnline = useQuery(api.visitors.isOnline, { visitorId });
@@ -123,7 +125,7 @@ function InboxContent(): React.JSX.Element | null {
     sound: boolean;
   }>({
     browserNotifications: false,
-    sound: false,
+    sound: true,
   });
   const unreadSnapshotRef = useRef<Record<string, number> | null>(null);
   const defaultTitleRef = useRef<string | null>(null);
@@ -259,34 +261,6 @@ function InboxContent(): React.JSX.Element | null {
     setActiveCompactPanel((current) => (current === panel ? null : panel));
   };
 
-  const playInboxCueSound = () => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const AudioContextCtor =
-      window.AudioContext ||
-      (window as typeof window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
-    if (!AudioContextCtor) {
-      return;
-    }
-
-    const context = new AudioContextCtor();
-    const oscillator = context.createOscillator();
-    const gainNode = context.createGain();
-    oscillator.type = "sine";
-    oscillator.frequency.setValueAtTime(880, context.currentTime);
-    gainNode.gain.setValueAtTime(0.05, context.currentTime);
-    gainNode.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 0.18);
-
-    oscillator.connect(gainNode);
-    gainNode.connect(context.destination);
-    oscillator.start();
-    oscillator.stop(context.currentTime + 0.18);
-    oscillator.onended = () => {
-      void context.close();
-    };
-  };
-
   // Keyboard shortcut for knowledge search (Ctrl+K / Cmd+K)
   useEffect(() => {
     const handleGlobalKeyDown = (e: KeyboardEvent) => {
@@ -472,8 +446,10 @@ function InboxContent(): React.JSX.Element | null {
     };
     refreshCuePreferences();
     window.addEventListener("storage", refreshCuePreferences);
+    window.addEventListener(INBOX_CUE_PREFERENCES_UPDATED_EVENT, refreshCuePreferences);
     return () => {
       window.removeEventListener("storage", refreshCuePreferences);
+      window.removeEventListener(INBOX_CUE_PREFERENCES_UPDATED_EVENT, refreshCuePreferences);
     };
   }, []);
 
@@ -547,7 +523,7 @@ function InboxContent(): React.JSX.Element | null {
 
       const preferences = inboxCuePreferencesRef.current;
       if (preferences.sound) {
-        playInboxCueSound();
+        playInboxBingSound();
       }
 
       if (

apps/web/src/app/settings/NotificationSettingsSection.tsx

@@ -6,7 +6,11 @@ import { Bell } from "lucide-react";
 import { Button, Card } from "@opencom/ui";
 import { api } from "@opencom/convex";
 import type { Id } from "@opencom/convex/dataModel";
-import { loadInboxCuePreferences, saveInboxCuePreferences } from "@/lib/inboxNotificationCues";
+import {
+  broadcastInboxCuePreferencesUpdated,
+  loadInboxCuePreferences,
+  saveInboxCuePreferences,
+} from "@/lib/inboxNotificationCues";
 
 interface NotificationSettingsSectionProps {
   workspaceId?: Id<"workspaces">;
@@ -130,6 +134,7 @@ export function NotificationSettingsSection({
         },
         window.localStorage
       );
+      broadcastInboxCuePreferencesUpdated(window);
     } finally {
       setSavingCues(false);
     }

apps/web/src/components/AppSidebar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useMemo, useRef } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { useQuery } from "convex/react";
@@ -27,6 +28,13 @@ import {
   X,
 } from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
+import {
+  INBOX_CUE_PREFERENCES_UPDATED_EVENT,
+  buildUnreadSnapshot,
+  getUnreadIncreases,
+  loadInboxCuePreferences,
+} from "@/lib/inboxNotificationCues";
+import { playInboxBingSound } from "@/lib/playInboxBingSound";
 import { WorkspaceSelector } from "./WorkspaceSelector";
 
 type SidebarNavItem = {
@@ -81,16 +89,92 @@ export function AppSidebar({
 }: AppSidebarProps): React.JSX.Element {
   const pathname = usePathname();
   const { activeWorkspace, logout, user } = useAuth();
+  const isAdmin = activeWorkspace?.role === "owner" || activeWorkspace?.role === "admin";
   const integrationSignals = useQuery(
     api.workspaces.getHostedOnboardingIntegrationSignals,
     activeWorkspace?._id ? { workspaceId: activeWorkspace._id } : "skip"
   );
+  const sidebarConversations = useQuery(
+    api.conversations.list,
+    activeWorkspace?._id && isAdmin ? { workspaceId: activeWorkspace._id } : "skip"
+  );
+  const inboxCuePreferencesRef = useRef<{
+    browserNotifications: boolean;
+    sound: boolean;
+  }>({
+    browserNotifications: false,
+    sound: true,
+  });
+  const unreadSnapshotRef = useRef<Record<string, number> | null>(null);
   const hasActiveWidgetOrSdk = (integrationSignals?.integrations ?? []).some(
     (signal) => signal.isActiveNow
   );
   const navItems: SidebarNavItem[] = hasActiveWidgetOrSdk
     ? [...CORE_NAV_ITEMS, ONBOARDING_NAV_ITEM, SETTINGS_NAV_ITEM]
     : [ONBOARDING_NAV_ITEM, ...CORE_NAV_ITEMS, SETTINGS_NAV_ITEM];
+  const inboxUnreadCount = useMemo(
+    () =>
+      sidebarConversations?.reduce((sum, conversation) => sum + (conversation.unreadByAgent ?? 0), 0) ??
+      0,
+    [sidebarConversations]
+  );
+  const showInboxUnreadBadge = isAdmin && inboxUnreadCount > 0;
+  const inboxUnreadBadgeLabel = inboxUnreadCount > 99 ? "99+" : String(inboxUnreadCount);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const refreshCuePreferences = () => {
+      inboxCuePreferencesRef.current = loadInboxCuePreferences(window.localStorage);
+    };
+    refreshCuePreferences();
+    window.addEventListener("storage", refreshCuePreferences);
+    window.addEventListener(INBOX_CUE_PREFERENCES_UPDATED_EVENT, refreshCuePreferences);
+    return () => {
+      window.removeEventListener("storage", refreshCuePreferences);
+      window.removeEventListener(INBOX_CUE_PREFERENCES_UPDATED_EVENT, refreshCuePreferences);
+    };
+  }, []);
+
+  useEffect(() => {
+    unreadSnapshotRef.current = null;
+  }, [activeWorkspace?._id, isAdmin]);
+
+  useEffect(() => {
+    if (!isAdmin || !sidebarConversations || typeof window === "undefined") {
+      return;
+    }
+
+    const previousSnapshot = unreadSnapshotRef.current;
+    const currentSnapshot = buildUnreadSnapshot(
+      sidebarConversations.map((conversation) => ({
+        _id: conversation._id,
+        unreadByAgent: conversation.unreadByAgent,
+      }))
+    );
+    unreadSnapshotRef.current = currentSnapshot;
+
+    if (!previousSnapshot || pathname === "/inbox" || pathname.startsWith("/inbox/")) {
+      return;
+    }
+
+    const increasedConversationIds = getUnreadIncreases({
+      previous: previousSnapshot,
+      conversations: sidebarConversations.map((conversation) => ({
+        _id: conversation._id,
+        unreadByAgent: conversation.unreadByAgent,
+      })),
+    });
+    if (increasedConversationIds.length === 0) {
+      return;
+    }
+
+    if (inboxCuePreferencesRef.current.sound) {
+      playInboxBingSound();
+    }
+  }, [isAdmin, pathname, sidebarConversations]);
 
   return (
     <aside className={`w-64 bg-white border-r flex flex-col h-full ${className ?? ""}`}>
@@ -138,7 +222,15 @@ export function AppSidebar({
                   }`}
                 >
                   <Icon className="h-5 w-5" />
-                  {item.label}
+                  <span className="flex-1">{item.label}</span>
+                  {item.href === "/inbox" && showInboxUnreadBadge && (
+                    <span
+                      className="inline-flex min-w-5 items-center justify-center rounded-full bg-primary px-1.5 py-0.5 text-[11px] font-semibold leading-none text-white"
+                      data-testid="sidebar-inbox-unread-badge"
+                    >
+                      {inboxUnreadBadgeLabel}
+                    </span>
+                  )}
                 </Link>
               </li>
             );

apps/web/src/lib/__tests__/inboxNotificationCues.test.ts

@@ -1,5 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
+  INBOX_CUE_PREFERENCES_UPDATED_EVENT,
+  broadcastInboxCuePreferencesUpdated,
   buildUnreadSnapshot,
   getUnreadIncreases,
   loadInboxCuePreferences,
@@ -22,7 +24,7 @@ describe("inboxNotificationCues", () => {
     const storage = createStorage();
     expect(loadInboxCuePreferences(storage as Storage)).toEqual({
       browserNotifications: false,
-      sound: false,
+      sound: true,
     });
   });
 
@@ -83,4 +85,18 @@ describe("inboxNotificationCues", () => {
       })
     ).toBe(false);
   });
+
+  it("broadcasts cue preference updates for same-tab listeners", () => {
+    const seenEvents: string[] = [];
+    const dispatcher = {
+      dispatchEvent: (event: Event) => {
+        seenEvents.push(event.type);
+        return true;
+      },
+    };
+
+    broadcastInboxCuePreferencesUpdated(dispatcher);
+
+    expect(seenEvents).toEqual([INBOX_CUE_PREFERENCES_UPDATED_EVENT]);
+  });
 });

apps/web/src/lib/inboxNotificationCues.ts

@@ -4,9 +4,10 @@ export interface InboxCuePreferences {
 }
 
 const STORAGE_KEY = "opencom.web.inboxCuePreferences";
+export const INBOX_CUE_PREFERENCES_UPDATED_EVENT = "opencom:inbox-cue-preferences-updated";
 const DEFAULT_PREFERENCES: InboxCuePreferences = {
   browserNotifications: false,
-  sound: false,
+  sound: true,
 };
 
 type StorageLike = Pick<Storage, "getItem" | "setItem">;
@@ -43,6 +44,15 @@ export function saveInboxCuePreferences(
   storage.setItem(STORAGE_KEY, JSON.stringify(preferences));
 }
 
+type EventDispatcher = Pick<Window, "dispatchEvent">;
+
+export function broadcastInboxCuePreferencesUpdated(eventDispatcher?: EventDispatcher): void {
+  if (!eventDispatcher) {
+    return;
+  }
+  eventDispatcher.dispatchEvent(new Event(INBOX_CUE_PREFERENCES_UPDATED_EVENT));
+}
+
 export function buildUnreadSnapshot(
   conversations: Array<{ _id: string; unreadByAgent?: number }>
 ): Record<string, number> {

apps/web/src/lib/playInboxBingSound.ts

@@ -0,0 +1,39 @@
+export function playInboxBingSound(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const AudioContextCtor =
+    window.AudioContext ||
+    (window as typeof window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+  if (!AudioContextCtor) {
+    return;
+  }
+
+  const context = new AudioContextCtor();
+  const gainNode = context.createGain();
+  gainNode.connect(context.destination);
+
+  // Two quick tones create a "bing" cue without shipping an audio asset.
+  const firstTone = context.createOscillator();
+  firstTone.type = "sine";
+  firstTone.frequency.setValueAtTime(784, context.currentTime);
+  firstTone.connect(gainNode);
+  firstTone.start(context.currentTime);
+  firstTone.stop(context.currentTime + 0.09);
+
+  const secondTone = context.createOscillator();
+  secondTone.type = "sine";
+  secondTone.frequency.setValueAtTime(1046, context.currentTime + 0.1);
+  secondTone.connect(gainNode);
+  secondTone.start(context.currentTime + 0.1);
+  secondTone.stop(context.currentTime + 0.24);
+
+  gainNode.gain.setValueAtTime(0.0001, context.currentTime);
+  gainNode.gain.exponentialRampToValueAtTime(0.06, context.currentTime + 0.015);
+  gainNode.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 0.26);
+
+  secondTone.onended = () => {
+    void context.close();
+  };
+}