@flamingo-stack/openframe-frontend-core 0.0.210 → 0.0.212-snapshot.20260528112413

package/src/components/chat/hooks/use-nats-dialog-subscription.ts

@@ -1,35 +1,22 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { createNatsClient, type NatsClient, type NatsSubscriptionHandle } from '../../../nats'
+import { useEffect, useRef, useState } from 'react'
+import {
+  acquireClient as acquireSharedClient,
+  releaseClient as releaseSharedClient,
+  startConnectionLifecycle,
+  type NatsClient,
+  type NatsStatus,
+  type NatsSubscriptionHandle,
+  type SharedConnection,
+} from '../../../nats'
 import {
   type NatsConnectionSource,
   type NatsMessageType,
   type UseNatsDialogSubscriptionOptions,
   type UseNatsDialogSubscriptionReturn,
-  NETWORK_CONFIG,
 } from '../types'
 
-type SharedConnection = {
-  wsUrl: string
-  client: NatsClient
-  connectPromise: Promise<void> | null
-  refCount: number
-  closeTimer: ReturnType<typeof setTimeout> | null
-  retryTimer: ReturnType<typeof setTimeout> | null
-}
-
-let shared: SharedConnection | null = null
-
-/**
- * Hook for managing NATS dialog subscriptions.
- * 
- * This hook handles:
- * - Connecting to NATS WebSocket
- * - Subscribing to dialog topics (message and/or admin-message)
- * - Reconnection and error handling
- * - Shared connection management
- */
 export function useNatsDialogSubscription({
   enabled,
   dialogId,
@@ -49,8 +36,7 @@ export function useNatsDialogSubscription({
   
   const clientRef = useRef<NatsClient | null>(null)
   const subscriptionRefs = useRef<Map<NatsMessageType, NatsSubscriptionHandle | null>>(new Map())
-  
-  // Stable refs for callbacks
+
   const onEventRef = useRef(onEvent)
   useEffect(() => {
     onEventRef.current = onEvent
@@ -88,66 +74,24 @@ export function useNatsDialogSubscription({
     reconnectionBackoffRef.current = reconnectionBackoff
   }, [reconnectionBackoff])
 
-  const acquireClient = useCallback((url: string): SharedConnection => {
-    if (shared?.wsUrl !== url) {
-      // Close existing connection if URL changed
-      if (shared) {
-        shared.closeTimer && clearTimeout(shared.closeTimer)
-        const old = shared
-        shared = null
-        void old.client.close().catch(() => {})
-      }
-      
-      const { name = 'openframe-frontend', user = 'machine', pass = '' } = clientConfig
-      
-      const client = createNatsClient({
-        servers: url,
-        name,
-        user,
-        pass,
-        connectTimeoutMs: NETWORK_CONFIG.CONNECT_TIMEOUT_MS,
-        reconnect: false,
-        pingIntervalMs: NETWORK_CONFIG.PING_INTERVAL_MS,
-        maxPingOut: NETWORK_CONFIG.MAX_PING_OUT,
-      })
-      shared = { wsUrl: url, client, connectPromise: null, refCount: 0, closeTimer: null, retryTimer: null }
-    }
-
-    shared.refCount += 1
-    shared.closeTimer && clearTimeout(shared.closeTimer)
-    shared.closeTimer = null
-    return shared
+  const clientConfigRef = useRef(clientConfig)
+  useEffect(() => {
+    clientConfigRef.current = clientConfig
   }, [clientConfig])
 
-  const releaseClient = useCallback((url: string) => {
-    if (!shared || shared.wsUrl !== url) return
-    
-    shared.refCount = Math.max(0, shared.refCount - 1)
-    if (shared.refCount > 0) return
-
-    shared.closeTimer = setTimeout(() => {
-      const s = shared
-      shared = null
-      if (s) {
-        if (s.retryTimer) {
-          clearTimeout(s.retryTimer)
-          s.retryTimer = null
-        }
-        void s.client.close().catch(() => {})
-      }
-    }, NETWORK_CONFIG.SHARED_CLOSE_DELAY_MS)
-  }, [])
-
-  // Store the current WebSocket URL to prevent unnecessary reconnections
   const currentWsUrlRef = useRef<string>('')
-  
-  // Connection effect
+
+  // Resolve the URL synchronously each render so the effect's dep is the URL string
+  // itself, not the (often inline-allocated) getNatsWsUrl callback identity. Without
+  // this the effect re-runs on every render that produces a new callback identity —
+  // e.g. every silent token rotation when `useNatsAppConfig` rebuilds getWsUrl —
+  // tearing the WS down and reacquiring even though the resolved URL hasn't changed.
+  const wsUrl = getNatsWsUrl()
+
   useEffect(() => {
-    const wsUrl = getNatsWsUrl()
     if (!enabled || !wsUrl) {
-      // Clean up if disabled or no URL
       if (currentWsUrlRef.current && clientRef.current) {
-        releaseClient(currentWsUrlRef.current)
+        releaseSharedClient(currentWsUrlRef.current)
         clientRef.current = null
         currentWsUrlRef.current = ''
         setIsConnected(false)
@@ -160,159 +104,81 @@ export function useNatsDialogSubscription({
       return
     }
 
-    // Clean up existing connection if URL changed
     if (currentWsUrlRef.current && currentWsUrlRef.current !== wsUrl && clientRef.current) {
-      releaseClient(currentWsUrlRef.current)
+      releaseSharedClient(currentWsUrlRef.current)
       clientRef.current = null
       setIsConnected(false)
     }
 
     currentWsUrlRef.current = wsUrl
-    const sharedConn = acquireClient(wsUrl)
+    const cfg = clientConfigRef.current
+    const sharedConn = acquireSharedClient(wsUrl, {
+      name: cfg.name ?? 'openframe-frontend',
+      user: cfg.user ?? 'machine',
+      pass: cfg.pass ?? '',
+    })
     const client = sharedConn.client
 
     clientRef.current = client
-    setIsConnected(false)
-
-    let closed = false
-    let retryAttempt = 0
-
-    function scheduleRetry() {
-      if (closed) return
-      if (shared !== sharedConn) return
-
-      if (sharedConn.retryTimer) {
-        clearTimeout(sharedConn.retryTimer)
-        sharedConn.retryTimer = null
-      }
-
-      const cfg = reconnectionBackoffRef.current ?? {}
-      const fastRetries = cfg.fastRetries ?? 0
-      const fastDelay = cfg.fastRetryDelayMs ?? NETWORK_CONFIG.RETRY_INITIAL_DELAY_MS
-      const baseDelay = cfg.initialDelayMs ?? NETWORK_CONFIG.RETRY_INITIAL_DELAY_MS
-      const maxDelay = cfg.maxDelayMs ?? NETWORK_CONFIG.RETRY_MAX_DELAY_MS
-      const multiplier = cfg.multiplier ?? NETWORK_CONFIG.RETRY_BACKOFF_MULTIPLIER
-
-      const delay = retryAttempt < fastRetries
-        ? fastDelay
-        : Math.min(baseDelay * (multiplier ** (retryAttempt - fastRetries)), maxDelay)
-      const jitteredDelay = delay * (0.5 + Math.random() * 0.5)
-      retryAttempt++
-
-      sharedConn.retryTimer = setTimeout(async () => {
-        sharedConn.retryTimer = null
-        if (closed) return
-        if (shared !== sharedConn) return
-
-        try {
-          await onBeforeReconnectRef.current?.()
-        } catch {
-          // Token refresh failed; still try to reconnect
-        }
-
-        if (closed) return
-        if (shared !== sharedConn) return
-
-        const freshUrl = getNatsWsUrlRef.current()
-        if (freshUrl !== wsUrl) return
+    setIsConnected(client.isConnected())
 
+    const tearDownSubscriptions = () => {
+      subscriptionRefs.current.forEach((sub) => {
         try {
-          sharedConn.connectPromise = null
-          sharedConn.connectPromise = client.connect()
-          await sharedConn.connectPromise
-          if (!closed && shared === sharedConn) {
-            retryAttempt = 0
-            setIsConnected(true)
-          }
+          sub?.unsubscribe()
         } catch {
-          sharedConn.connectPromise = null
-          if (!closed && shared === sharedConn) {
-            scheduleRetry()
-          }
+          // ignore
         }
-      }, jitteredDelay)
+      })
+      subscriptionRefs.current.clear()
+      lastSubscribedDialogIdRef.current = null
+      abortControllerRef.current?.abort()
+      abortControllerRef.current = null
     }
 
-    const unsubscribeStatus = client.onStatus((event) => {
-      const connected = event.status === 'connected'
-      const disconnected = ['closed', 'disconnected', 'error'].includes(event.status)
-      if (connected) {
-        setIsConnected(true)
-        if (hadConnectionBeforeRef.current) {
-          setReconnectionCount(c => c + 1)
-        }
-        hadConnectionBeforeRef.current = true
-        retryAttempt = 0
-        onConnectRef.current?.()
-      }
-      if (disconnected) {
-        setIsConnected(false)
-        setIsSubscribed(false)
-        
-        subscriptionRefs.current.forEach((sub) => {
-          try {
-            sub?.unsubscribe()
-          } catch {
-            // ignore
-          }
-        })
-        subscriptionRefs.current.clear()
-        lastSubscribedDialogIdRef.current = null
-        abortControllerRef.current?.abort()
-        abortControllerRef.current = null
-
-        onDisconnectRef.current?.()
-        scheduleRetry()
-      }
-    })
-
-    ;(async () => {
-      try {
-        sharedConn.connectPromise ||= client.connect()
-        await sharedConn.connectPromise
-        if (!closed) {
+    // This hook treats 'error' as a disconnect (pre-existing behaviour); JetStream's
+    // hook does not — it skips retry on protocol errors.
+    const isDisconnectStatus = (status: NatsStatus) =>
+      status === 'closed' || status === 'disconnected' || status === 'error'
+
+    const lifecycle = startConnectionLifecycle({
+      conn: sharedConn,
+      wsUrl,
+      onBeforeReconnect: () => onBeforeReconnectRef.current?.(),
+      backoff: reconnectionBackoffRef.current,
+      getFreshUrl: () => getNatsWsUrlRef.current(),
+      shouldRetryOn: isDisconnectStatus,
+      onStatusChange: (status) => {
+        if (status === 'connected') {
           setIsConnected(true)
+          if (hadConnectionBeforeRef.current) {
+            setReconnectionCount((c) => c + 1)
+          }
           hadConnectionBeforeRef.current = true
+          onConnectRef.current?.()
         }
-      } catch {
-        sharedConn.connectPromise = null
-        if (!closed) {
+        if (isDisconnectStatus(status)) {
           setIsConnected(false)
+          setIsSubscribed(false)
+          tearDownSubscriptions()
           onDisconnectRef.current?.()
-          scheduleRetry()
         }
-      }
-    })()
+      },
+    })
 
     return () => {
-      closed = true
+      lifecycle.stop()
       setIsConnected(false)
       setIsSubscribed(false)
-      unsubscribeStatus()
-
-      if (sharedConn.retryTimer) {
-        clearTimeout(sharedConn.retryTimer)
-        sharedConn.retryTimer = null
-      }
-
-      // Unsubscribe all subscriptions
-      subscriptionRefs.current.forEach((sub) => {
-        try {
-          sub?.unsubscribe()
-        } catch {
-          // ignore
-        }
-      })
-      subscriptionRefs.current.clear()
-      lastSubscribedDialogIdRef.current = null
+      tearDownSubscriptions()
 
       if (clientRef.current && currentWsUrlRef.current) {
-        releaseClient(currentWsUrlRef.current)
+        releaseSharedClient(currentWsUrlRef.current)
         clientRef.current = null
         currentWsUrlRef.current = ''
       }
     }
-  }, [enabled, getNatsWsUrl, acquireClient, releaseClient])
+  }, [enabled, wsUrl])
 
   const topicsKey = topics.join(',')
   const lastSubscribedDialogIdRef = useRef<string | null>(null)
@@ -322,16 +188,13 @@ export function useNatsDialogSubscription({
     isConnectedRef.current = isConnected
   }, [isConnected])
 
-  // Track subscription state separately from dialog changes
   const currentDialogIdRef = useRef<string | null>(null)
   const abortControllerRef = useRef<AbortController | null>(null)
-  
-  // Handle dialog changes and subscription lifecycle
+
   useEffect(() => {
     currentDialogIdRef.current = dialogId
-    
+
     if (!enabled || !dialogId) {
-      // Clean up if disabled or no dialog
       if (subscriptionRefs.current.size > 0) {
         setIsSubscribed(false)
         subscriptionRefs.current.forEach((sub) => {
@@ -357,7 +220,6 @@ export function useNatsDialogSubscription({
       return
     }
     
-    // Clean up any existing subscriptions before creating new ones
     if (subscriptionRefs.current.size > 0) {
       subscriptionRefs.current.forEach((sub) => {
         try {
@@ -369,8 +231,7 @@ export function useNatsDialogSubscription({
       subscriptionRefs.current.clear()
       abortControllerRef.current?.abort()
     }
-    
-    // Create new abort controller for this subscription set
+
     abortControllerRef.current = new AbortController()
     const abort = abortControllerRef.current
 
@@ -397,7 +258,6 @@ export function useNatsDialogSubscription({
         }
       }
       
-      // Subscribe to all configured topics
       topics.forEach((topic) => {
         const subscription = client.subscribeBytes(
           `chat.${dialogId}.${topic}`,
@@ -431,8 +291,7 @@ export function useNatsDialogSubscription({
       abortControllerRef.current = null
     }
   }, [enabled, dialogId, topicsKey, topics])
-  
-  // Separate effect to handle connection state changes
+
   useEffect(() => {
     if (!enabled || !currentDialogIdRef.current || !isConnected) {
       return
@@ -461,7 +320,6 @@ export function useNatsDialogSubscription({
         }
       }
       
-      // Subscribe to all configured topics
       topics.forEach((topic) => {
         const subscription = client.subscribeBytes(
           `chat.${dialogId}.${topic}`,
@@ -475,7 +333,6 @@ export function useNatsDialogSubscription({
       setIsSubscribed(true)
       onSubscribedRef.current?.()
     } else if (subscriptionRefs.current.size > 0) {
-      // We have subscriptions, just update the state
       setIsSubscribed(true)
     }
   }, [isConnected, enabled, topics, topicsKey])

package/src/components/features/notifications/index.ts

@@ -3,7 +3,7 @@ export {
   useNotifications,
   useOptionalNotifications,
 } from './notifications-context'
-export type { NotificationsProviderProps } from './notifications-context'
+export type { NotificationsProviderProps, NotificationsActions } from './notifications-context'
 export { NotificationDrawer } from './notification-drawer'
 export type { NotificationDrawerProps } from './notification-drawer'
 export { NotificationTile } from './notification-tile'
@@ -11,5 +11,6 @@ export type { NotificationTileProps } from './notification-tile'
 export type {
   Notification,
   NotificationVariant,
+  NotificationSeverity,
   AddNotificationInput,
 } from './types'

package/src/components/features/notifications/notifications-context.tsx

@@ -9,6 +9,8 @@ interface NotificationsContextValue {
   isOpen: boolean
   showPopups: boolean
   addNotification: (input: AddNotificationInput) => string
+  upsertNotification: (input: AddNotificationInput & { id: string }) => string
+  setNotifications: (list: Notification[]) => void
   markRead: (id: string) => void
   markAllRead: () => void
   markSettled: (id: string) => void
@@ -23,6 +25,17 @@ interface NotificationsContextValue {
 
 const NotificationsContext = React.createContext<NotificationsContextValue | null>(null)
 
+export interface NotificationsActions {
+  /** Called after the local reducer marks an item read; persist server-side. */
+  onMarkRead?: (id: string) => void | Promise<void>
+  /** Called after the local reducer marks all read; persist server-side. */
+  onMarkAllRead?: () => void | Promise<void>
+  /** Called after the local reducer removes an item; persist server-side. */
+  onRemove?: (id: string) => void | Promise<void>
+  /** Called after the local reducer marks an item settled; optional persistence. */
+  onMarkSettled?: (id: string) => void | Promise<void>
+}
+
 export interface NotificationsProviderProps {
   children: React.ReactNode
   initialNotifications?: Notification[]
@@ -30,22 +43,63 @@ export interface NotificationsProviderProps {
   defaultShowPopups?: boolean
   onShowPopupsChange?: (value: boolean) => void
   onHistoryClick?: () => void
+  actions?: NotificationsActions
 }
 
 type Action =
   | { type: 'add'; notification: Notification; max: number }
+  | { type: 'upsert'; notification: Notification; max: number }
+  | { type: 'set'; notifications: Notification[] }
   | { type: 'markRead'; id: string }
   | { type: 'markAllRead' }
   | { type: 'markSettled'; id: string }
   | { type: 'remove'; id: string }
   | { type: 'clear' }
 
+function mergeNotification(base: Notification, incoming: Notification): Notification {
+  const out: Notification = { ...base }
+  for (const key of Object.keys(incoming) as (keyof Notification)[]) {
+    const value = incoming[key]
+    if (value !== undefined) (out as unknown as Record<string, unknown>)[key] = value
+  }
+
+  out.read = (incoming.read ?? false) || (base.read ?? false) || false
+  out.settled = (incoming.settled ?? false) || (base.settled ?? false) || false
+  return out
+}
+
 function reducer(state: Notification[], action: Action): Notification[] {
   switch (action.type) {
     case 'add': {
-      const next = [action.notification, ...state.filter((n) => n.id !== action.notification.id)]
+      const existing = state.find((n) => n.id === action.notification.id)
+      if (existing) {
+        const merged = mergeNotification(existing, action.notification)
+        return [merged, ...state.filter((n) => n.id !== action.notification.id)]
+      }
+      const next = [action.notification, ...state]
       return next.length > action.max ? next.slice(0, action.max) : next
     }
+    case 'upsert': {
+      const existing = state.find((n) => n.id === action.notification.id)
+      if (existing) {
+        const merged = mergeNotification(existing, action.notification)
+        return state.map((n) => (n.id === action.notification.id ? merged : n))
+      }
+      const next = [action.notification, ...state]
+      return next.length > action.max ? next.slice(0, action.max) : next
+    }
+    case 'set': {
+      const existingById = new Map(state.map((n) => [n.id, n]))
+      return action.notifications.map((incoming) => {
+        const existing = existingById.get(incoming.id)
+        if (!existing) return incoming
+        return {
+          ...incoming,
+          read: incoming.read || existing.read,
+          settled: incoming.settled || existing.settled,
+        }
+      })
+    }
     case 'markRead':
       return state.map((n) => (n.id === action.id ? { ...n, read: true } : n))
     case 'markAllRead':
@@ -75,11 +129,17 @@ export function NotificationsProvider({
   defaultShowPopups = true,
   onShowPopupsChange,
   onHistoryClick,
+  actions,
 }: NotificationsProviderProps) {
   const [notifications, dispatch] = React.useReducer(reducer, initialNotifications)
   const [isOpen, setIsOpen] = React.useState(false)
   const [showPopups, setShowPopupsState] = React.useState(defaultShowPopups)
 
+  const actionsRef = React.useRef(actions)
+  React.useEffect(() => {
+    actionsRef.current = actions
+  }, [actions])
+
   const addNotification = React.useCallback(
     (input: AddNotificationInput) => {
       const id = input.id ?? generateId()
@@ -87,7 +147,7 @@ export function NotificationsProvider({
         ...input,
         id,
         createdAt: input.createdAt ?? Date.now(),
-        read: false,
+        read: input.read ?? false,
       }
       dispatch({ type: 'add', notification, max: maxNotifications })
       return id
@@ -95,10 +155,44 @@ export function NotificationsProvider({
     [maxNotifications],
   )
 
-  const markRead = React.useCallback((id: string) => dispatch({ type: 'markRead', id }), [])
-  const markAllRead = React.useCallback(() => dispatch({ type: 'markAllRead' }), [])
-  const markSettled = React.useCallback((id: string) => dispatch({ type: 'markSettled', id }), [])
-  const remove = React.useCallback((id: string) => dispatch({ type: 'remove', id }), [])
+  const upsertNotification = React.useCallback(
+    (input: AddNotificationInput & { id: string }) => {
+      const notification: Notification = {
+        ...input,
+        id: input.id,
+        createdAt: input.createdAt ?? Date.now(),
+        read: input.read ?? false,
+      }
+      dispatch({ type: 'upsert', notification, max: maxNotifications })
+      return input.id
+    },
+    [maxNotifications],
+  )
+
+  const setNotifications = React.useCallback((list: Notification[]) => {
+    dispatch({ type: 'set', notifications: list })
+  }, [])
+
+  const markRead = React.useCallback((id: string) => {
+    dispatch({ type: 'markRead', id })
+    void actionsRef.current?.onMarkRead?.(id)
+  }, [])
+
+  const markAllRead = React.useCallback(() => {
+    dispatch({ type: 'markAllRead' })
+    void actionsRef.current?.onMarkAllRead?.()
+  }, [])
+
+  const markSettled = React.useCallback((id: string) => {
+    dispatch({ type: 'markSettled', id })
+    void actionsRef.current?.onMarkSettled?.(id)
+  }, [])
+
+  const remove = React.useCallback((id: string) => {
+    dispatch({ type: 'remove', id })
+    void actionsRef.current?.onRemove?.(id)
+  }, [])
+
   const clear = React.useCallback(() => dispatch({ type: 'clear' }), [])
 
   const open = React.useCallback(() => setIsOpen(true), [])
@@ -125,6 +219,8 @@ export function NotificationsProvider({
       isOpen,
       showPopups,
       addNotification,
+      upsertNotification,
+      setNotifications,
       markRead,
       markAllRead,
       markSettled,
@@ -142,6 +238,8 @@ export function NotificationsProvider({
       isOpen,
       showPopups,
       addNotification,
+      upsertNotification,
+      setNotifications,
       markRead,
       markAllRead,
       markSettled,

package/src/components/features/notifications/types.ts

@@ -2,6 +2,8 @@ import type { ReactNode } from 'react'
 
 export type NotificationVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
 
+export type NotificationSeverity = 'INFO' | 'WARNING' | 'DANGER'
+
 export interface Notification {
   id: string
   variant?: NotificationVariant
@@ -10,6 +12,8 @@ export interface Notification {
   createdAt: number
   read?: boolean
   settled?: boolean
+  severity?: NotificationSeverity
+  category?: string
   meta?: Record<string, unknown>
 }
 
@@ -17,4 +21,5 @@ export type AddNotificationInput =
   Omit<Notification, 'id' | 'createdAt' | 'read' | 'settled'> & {
     id?: string
     createdAt?: number
+    read?: boolean
   }