feat(dashboard): live notifications phase 1 — presence, live unread, in-app toasts

Shared RealtimeProvider opens ONE dashboard-wide IIOS message socket reused by
the messenger tab and the new NotificationCenter. CrmMessagingAdapter gains
setFocus (drives presence/push suppression) and subscribeActivity (joins all
of the caller's threads, fans out incoming messages). NotificationCenter shows
a clickable toast on new messages when you're not on the messenger tab and
deep-links to the conversation. Pulls @insignia/iios-messaging-ui@0.1.7.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/dashboard/dashboard.tsx

@@ -18,6 +18,8 @@ import { TeamManagement } from "./team-management";
 import { MessengerSdk } from "./messenger-sdk";
 import { InboxSdk } from "./inbox-sdk";
 import { Settings } from "./settings";
+import { NotificationCenter } from "./notification-center";
+import { RealtimeProvider } from "@/lib/realtime";
 import { SmartGallery } from "./smart-gallery";
 import "../../app/dashboard/dashboard.css";
 
@@ -47,11 +49,13 @@ export function Dashboard() {
 
   return (
     <div className="dash-root" data-theme={theme}>
+      <RealtimeProvider>
       <Sidebar active={active} onSelect={setActive} />
       <div className="dash-main">
         <Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} onNavigate={navigateToConversation} />
         <div className="dash-content">
           <ToastProvider>
+            <NotificationCenter active={active} onNavigate={navigateToConversation} />
             {active === "profile" ? <Profile />
               : active === "support" ? <Support />
               : active === "rules" ? <Rules />
@@ -65,6 +69,7 @@ export function Dashboard() {
           </ToastProvider>
         </div>
       </div>
+      </RealtimeProvider>
     </div>
   );
 }

src/components/dashboard/messenger-sdk.tsx

@@ -5,36 +5,15 @@
 // UI + messaging logic lives in the SDK. Live path = the be-crm data door (CrmMessagingAdapter);
 // demo path = the SDK's own MockAdapter.
 
-import { useEffect, useMemo, useState } from "react";
-import { useAppShell, useAuth, useQuery } from "@abe-kap/appshell-sdk/react";
-import { MessageSocket } from "@insignia/iios-kernel-client";
+import { useMemo } from "react";
+import { useAppShell, useAuth } from "@abe-kap/appshell-sdk/react";
 import { MessagingProvider, Messenger as SdkMessenger, type MessagingAdapter } from "@insignia/iios-messaging-ui";
 import { MockAdapter } from "@insignia/iios-messaging-ui/adapters/mock";
 import "@insignia/iios-messaging-ui/styles.css";
 import { isShellConfigured } from "@/lib/appshell";
+import { useRealtime } from "@/lib/realtime";
 import { CrmMessagingAdapter, type DataDoor } from "@/lib/crm-messaging-adapter";
 
-interface RealtimeDTO { url: string; audience: string; token?: string }
-
-/** Open the IIOS message socket with the delegated token the BFF mints (crm.messenger.realtime). */
-function useRealtimeSocket(): MessageSocket | null {
-  const rt = useQuery<RealtimeDTO>("crm.messenger.realtime", {});
-  const [socket, setSocket] = useState<MessageSocket | null>(null);
-  const url = rt.data?.url;
-  const token = rt.data?.token;
-  useEffect(() => {
-    if (!url || !token) return;
-    const s = new MessageSocket({ serviceUrl: url, token, autoConnect: false });
-    s.connect();
-    setSocket(s);
-    return () => {
-      s.disconnect();
-      setSocket(null);
-    };
-  }, [url, token]);
-  return socket;
-}
-
 const SHELL = isShellConfigured();
 
 export function MessengerSdk({ focusThreadId }: { focusThreadId?: string | null } = {}) {
@@ -74,7 +53,7 @@ function DemoHost({ focusThreadId }: { focusThreadId?: string | null }) {
 function LiveHost({ focusThreadId }: { focusThreadId?: string | null }) {
   const { sdk } = useAppShell();
   const { user } = useAuth();
-  const socket = useRealtimeSocket();
+  const socket = useRealtime();
   // Rebuilds once the socket connects: the first adapter (no socket) polls; the second runs live.
   const adapter = useMemo<MessagingAdapter | null>(
     () => (user?.id ? new CrmMessagingAdapter(sdk as unknown as DataDoor, user.id, socket ?? undefined) : null),

src/components/dashboard/notification-center.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+// App-wide in-app notifications. Uses the shared dashboard socket to watch activity across ALL of
+// the user's threads (via the adapter's subscribeActivity) and shows a clickable toast when a new
+// message arrives — unless you're already on the Messenger tab (you'd see it live there). Clicking
+// deep-links to the conversation. Renders nothing.
+
+import { useEffect, useMemo, useRef } from "react";
+import { useAppShell, useAuth } from "@abe-kap/appshell-sdk/react";
+import type { MessagingAdapter } from "@insignia/iios-messaging-ui";
+import { isShellConfigured } from "@/lib/appshell";
+import { useRealtime } from "@/lib/realtime";
+import { CrmMessagingAdapter, type DataDoor } from "@/lib/crm-messaging-adapter";
+import { useToast } from "./ui";
+
+const SHELL = isShellConfigured();
+
+export function NotificationCenter({ active, onNavigate }: { active: string; onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
+  const socket = useRealtime();
+  const { sdk } = useAppShell();
+  const { user } = useAuth();
+  const toast = useToast();
+  const me = user?.id;
+
+  // Keep the current tab readable inside the (stable) subscription callback.
+  const activeRef = useRef(active);
+  activeRef.current = active;
+
+  const adapter = useMemo<MessagingAdapter | null>(
+    () => (me && socket ? new CrmMessagingAdapter(sdk as unknown as DataDoor, me, socket) : null),
+    [sdk, me, socket],
+  );
+
+  useEffect(() => {
+    if (!SHELL || !adapter?.subscribeActivity) return;
+    return adapter.subscribeActivity(({ threadId, message }) => {
+      if (message.actorId === me) return; // never notify me about my own message
+      if (activeRef.current === "messenger") return; // already watching chat live
+      toast.push({
+        tone: "info",
+        title: "New message",
+        desc: message.text?.slice(0, 90) || "You have a new message",
+        onClick: () => onNavigate("messenger", threadId),
+      });
+    });
+  }, [adapter, me, toast, onNavigate]);
+
+  return null;
+}

src/components/dashboard/ui.tsx

@@ -265,7 +265,7 @@ export function Modal({ open, onClose, title, subtitle, icon, children, footer,
 /* Toast                                                       */
 /* ---------------------------------------------------------- */
 
-type Toast = { id: number; tone: "success" | "info" | "error"; title: string; desc?: string };
+type Toast = { id: number; tone: "success" | "info" | "error"; title: string; desc?: string; onClick?: () => void };
 type ToastCtx = { push: (t: Omit<Toast, "id">) => void };
 const ToastContext = createContext<ToastCtx | null>(null);
 
@@ -288,9 +288,12 @@ export function ToastProvider({ children }: { children: ReactNode }) {
       {children}
       <div className="ds-toasts">
         {items.map((t) => (
-          <div key={t.id} className={`ds-toast tone-${t.tone}`}>
+          <div key={t.id} className={`ds-toast tone-${t.tone}${t.onClick ? " is-clickable" : ""}`}>
             <Icon name={t.tone === "success" ? "check-circle" : t.tone === "error" ? "alert" : "info"} size={18} />
-            <div className="ds-toast-body">
+            <div
+              className="ds-toast-body"
+              {...(t.onClick ? { role: "button", tabIndex: 0, onClick: () => { t.onClick?.(); setItems((s) => s.filter((x) => x.id !== t.id)); } } : {})}
+            >
               <div className="ds-toast-title">{t.title}</div>
               {t.desc && <div className="ds-toast-desc">{t.desc}</div>}
             </div>