@memori.ai/memori-react 8.43.0 → 8.45.0

package/src/helpers/message.ts

@@ -114,6 +114,21 @@ export const renderMsg = (
         /<output\s+class\s*=\s*["\']memori-artifact["\'][^>]*data-mimetype\s*=\s*["\']([^"']+)["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi,
         ''
       )
+      // Preferred: data-action="update" on memori-artifact
+      .replaceAll(
+        /<output\s+class\s*=\s*["\']memori-artifact["\'][^>]*data-action\s*=\s*["\']update["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi,
+        ''
+      )
+      // data-action may appear before class
+      .replaceAll(
+        /<output\s+[^>]*data-action\s*=\s*["\']update["\'][^>]*class\s*=\s*["\'][^"']*memori-artifact[^"']*["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi,
+        ''
+      )
+      // Legacy class name
+      .replaceAll(
+        /<output\s+class\s*=\s*["\']memori-artifact-update["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi,
+        ''
+      )
       .replaceAll(/```markdown([^```]+)```/g, '$1')
       .replaceAll('($', '( $')
       .replaceAll(':$', ': $')

package/src/helpers/nats/getNatsConfig.ts

@@ -7,7 +7,10 @@
 export interface NatsConfig {
   /** WebSocket URL of the NATS server (e.g. wss://nats.hz.slnode.net:8080). */
   url: string;
-  /** Bearer token used to authenticate the WebSocket connection. */
+  /**
+   * Per-session NATS user JWT. Presented with `jwtAuthenticator` (bearer:
+   * no nkey seed on the client).
+   */
   token: string;
   /**
    * JetStream stream that stores session events. When set, the client consumes
@@ -104,7 +107,7 @@ export function parseNatsConfig(raw: Record<string, unknown>): NatsConfig {
  * @param signal Optional AbortSignal to cancel the request.
  */
 export async function getNatsConfig(
-  baseUrl: string,
+  _baseUrl: string,
   sessionId: string,
   signal?: AbortSignal
 ): Promise<NatsConfig> {
@@ -113,7 +116,9 @@ export async function getNatsConfig(
   }
 
   const response = await fetch(
-    `${baseUrl}/api/nats?sessionId=${encodeURIComponent(sessionId)}`,
+    `${'http://localhost:3000'}/api/nats?sessionId=${encodeURIComponent(
+      sessionId
+    )}`,
     { signal }
   );
 

package/src/helpers/nats/useNats.test.tsx

@@ -0,0 +1,81 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { getNatsConfig } from './getNatsConfig';
+import { useNats } from './useNats';
+import { NatsSessionLifecycle, useNatsSession } from './useNatsSession';
+
+jest.mock('./getNatsConfig', () => ({
+  getNatsConfig: jest.fn(),
+}));
+
+jest.mock('./useNatsSession', () => ({
+  useNatsSession: jest.fn(),
+}));
+
+const mockGetNatsConfig = getNatsConfig as jest.MockedFunction<
+  typeof getNatsConfig
+>;
+const mockUseNatsSession = useNatsSession as jest.MockedFunction<
+  typeof useNatsSession
+>;
+
+function latestLifecycle(): NatsSessionLifecycle {
+  return mockUseNatsSession.mock.calls.at(-1)?.[3] ?? {};
+}
+
+describe('useNats credential lifecycle', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGetNatsConfig.mockResolvedValue({
+      url: 'wss://nats.example.test',
+      token: 'fresh-jwt',
+    });
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      value: 'visible',
+    });
+  });
+
+  it('refreshes the JWT on resume and catches up after reconnecting', async () => {
+    const onCatchUp = jest.fn();
+    renderHook(() =>
+      useNats({
+        baseUrl: 'https://dashboard.example.test',
+        sessionId: 'session-a',
+        onCatchUp,
+      })
+    );
+
+    await waitFor(() => expect(mockGetNatsConfig).toHaveBeenCalledTimes(1));
+
+    act(() => {
+      (document.dispatchEvent as (event: Event) => boolean)(
+        new Event('visibilitychange')
+      );
+    });
+    await waitFor(() => expect(mockGetNatsConfig).toHaveBeenCalledTimes(2));
+
+    act(() => latestLifecycle().onConnected?.());
+    expect(onCatchUp).toHaveBeenCalledTimes(1);
+  });
+
+  it('refreshes the JWT after an authorization error', async () => {
+    const onCatchUp = jest.fn();
+    renderHook(() =>
+      useNats({
+        baseUrl: 'https://dashboard.example.test',
+        sessionId: 'session-a',
+        onCatchUp,
+      })
+    );
+
+    await waitFor(() => expect(mockGetNatsConfig).toHaveBeenCalledTimes(1));
+
+    act(() => {
+      latestLifecycle().onAuthError?.(new Error('Authorization Violation'));
+    });
+    await waitFor(() => expect(mockGetNatsConfig).toHaveBeenCalledTimes(2));
+
+    act(() => latestLifecycle().onConnected?.());
+    expect(onCatchUp).toHaveBeenCalledTimes(1);
+  });
+});

package/src/helpers/nats/useNats.ts

@@ -24,6 +24,11 @@ export interface UseNatsOptions {
   onDialogResponse?: (event: NatsDialogResponseEvent) => void;
   /** `error` events (logging / user notification). */
   onError?: (event: NatsErrorEvent) => void;
+  /**
+   * Reconcile a pending turn from the engine after a resumed or reauthenticated
+   * subscription is installed.
+   */
+  onCatchUp?: () => void | Promise<void>;
 }
 
 /**
@@ -38,6 +43,7 @@ export function useNats({
   onProgress,
   onDialogResponse,
   onError,
+  onCatchUp,
 }: UseNatsOptions) {
   const [config, setConfig] = useState<NatsConfig | null>(null);
   const [configError, setConfigError] = useState<Error | null>(null);
@@ -46,33 +52,42 @@ export function useNats({
   const onProgressRef = useRef(onProgress);
   const onDialogResponseRef = useRef(onDialogResponse);
   const onErrorRef = useRef(onError);
+  const onCatchUpRef = useRef(onCatchUp);
+  const abortRef = useRef<AbortController | null>(null);
+  const catchUpAfterConnectRef = useRef(false);
+  const refreshInFlightRef = useRef(false);
+  const lastAuthRefreshRef = useRef(0);
   useEffect(() => {
     onProgressRef.current = onProgress;
     onDialogResponseRef.current = onDialogResponse;
     onErrorRef.current = onError;
-  }, [onProgress, onDialogResponse, onError]);
+    onCatchUpRef.current = onCatchUp;
+  }, [onProgress, onDialogResponse, onError, onCatchUp]);
 
-  // Fetch connection config whenever the active session changes.
-  useEffect(() => {
-    if (!sessionId) {
-      console.debug('[NATS] no sessionId, skipping config fetch');
-      setConfig(null);
-      setConfigError(null);
-      return;
-    }
+  const refreshConfig = useCallback(
+    async (reason: 'initial' | 'resume' | 'auth') => {
+      if (!sessionId || refreshInFlightRef.current) return;
+      if (reason === 'auth' && Date.now() - lastAuthRefreshRef.current < 5000) {
+        return;
+      }
 
-    const controller = new AbortController();
-    let cancelled = false;
-
-    console.info(
-      '[NATS] fetching config from',
-      `${baseUrl}/api/nats`,
-      'for session',
-      sessionId
-    );
-    getNatsConfig(baseUrl, sessionId, controller.signal)
-      .then(cfg => {
-        if (!cancelled) {
+      refreshInFlightRef.current = true;
+      if (reason === 'auth') lastAuthRefreshRef.current = Date.now();
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      console.info(
+        '[NATS] fetching config from',
+        `${baseUrl}/api/nats`,
+        'for session',
+        sessionId,
+        `(${reason})`
+      );
+      try {
+        const cfg = await getNatsConfig(baseUrl, sessionId, controller.signal);
+        if (!controller.signal.aborted) {
+          catchUpAfterConnectRef.current = reason !== 'initial';
           console.info('[NATS] config received', {
             url: cfg.url,
             jetStream: !!cfg.stream,
@@ -81,20 +96,65 @@ export function useNats({
           setConfig(cfg);
           setConfigError(null);
         }
-      })
-      .catch(err => {
-        if (!cancelled && err?.name !== 'AbortError') {
+      } catch (err: any) {
+        if (!controller.signal.aborted && err?.name !== 'AbortError') {
           console.error('[NATS] config error', err);
           setConfig(null);
           setConfigError(err instanceof Error ? err : new Error(String(err)));
         }
-      });
+      } finally {
+        if (abortRef.current === controller) {
+          abortRef.current = null;
+          refreshInFlightRef.current = false;
+        }
+      }
+    },
+    [baseUrl, sessionId]
+  );
 
+  // Fetch connection config whenever the active session changes.
+  useEffect(() => {
+    if (!sessionId) {
+      console.debug('[NATS] no sessionId, skipping config fetch');
+      setConfig(null);
+      setConfigError(null);
+      return;
+    }
+
+    void refreshConfig('initial');
     return () => {
-      cancelled = true;
-      controller.abort();
+      abortRef.current?.abort();
+      abortRef.current = null;
+      refreshInFlightRef.current = false;
     };
-  }, [baseUrl, sessionId]);
+  }, [sessionId, refreshConfig]);
+
+  // A suspended browser may lose core NATS messages. Refresh the short-lived
+  // JWT, reconnect, then reconcile the pending turn from the engine.
+  useEffect(() => {
+    if (!sessionId) return;
+
+    const requestResume = () => {
+      if (document.visibilityState === 'visible') {
+        void refreshConfig('resume');
+      }
+    };
+    const onVisibilityChange = () => {
+      if (document.visibilityState === 'visible') requestResume();
+    };
+    const onPageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) requestResume();
+    };
+
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    window.addEventListener('online', requestResume);
+    window.addEventListener('pageshow', onPageShow);
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+      window.removeEventListener('online', requestResume);
+      window.removeEventListener('pageshow', onPageShow);
+    };
+  }, [sessionId, refreshConfig]);
 
   const handleMessage = useCallback((event: NatsSessionEvent) => {
     console.debug('[NATS] dispatching event', { eventType: event.eventType });
@@ -113,7 +173,27 @@ export function useNats({
     }
   }, []);
 
-  useNatsSession(sessionId, config ?? undefined, handleMessage);
+  const handleConnected = useCallback(() => {
+    if (!catchUpAfterConnectRef.current) return;
+    catchUpAfterConnectRef.current = false;
+    void onCatchUpRef.current?.();
+  }, []);
+
+  const handleAuthError = useCallback(
+    (error: Error) => {
+      console.warn(
+        '[NATS] JWT rejected or expired; refreshing credentials',
+        error
+      );
+      void refreshConfig('auth');
+    },
+    [refreshConfig]
+  );
+
+  useNatsSession(sessionId, config ?? undefined, handleMessage, {
+    onConnected: handleConnected,
+    onAuthError: handleAuthError,
+  });
 
   return {
     /** True once connection config has been retrieved. */

package/src/helpers/nats/useNatsSession.test.ts

@@ -0,0 +1,16 @@
+import { AuthorizationError } from '@nats-io/nats-core';
+import { isNatsAuthError } from './useNatsSession';
+
+describe('isNatsAuthError', () => {
+  it('recognizes typed NATS authorization failures', () => {
+    expect(isNatsAuthError(new AuthorizationError('test'))).toBe(true);
+  });
+
+  it('recognizes the server authorization violation message', () => {
+    expect(isNatsAuthError(new Error('Authorization Violation'))).toBe(true);
+  });
+
+  it('does not classify unrelated connection failures as auth failures', () => {
+    expect(isNatsAuthError(new Error('connection refused'))).toBe(false);
+  });
+});

package/src/helpers/nats/useNatsSession.ts

@@ -11,7 +11,13 @@
 // The cleanup (`consumerMessages.stop()` + `nc.close()`) is essential: without
 // it, every `sessionId` change would leave orphan connections / iterators.
 import { useEffect, useRef, useState, type MutableRefObject } from 'react';
-import { wsconnect, NatsConnection } from '@nats-io/nats-core';
+import {
+  wsconnect,
+  jwtAuthenticator,
+  AuthorizationError,
+  NatsConnection,
+  UserAuthenticationExpiredError,
+} from '@nats-io/nats-core';
 import {
   jetstream,
   DeliverPolicy,
@@ -66,6 +72,24 @@ export type NatsSessionEvent =
 
 type JetStreamConsumeMode = 'live' | 'catch-up';
 
+export interface NatsSessionLifecycle {
+  /** Called after the live subscription is installed. */
+  onConnected?: () => void;
+  /** Called once when this connection is rejected because its JWT expired. */
+  onAuthError?: (error: Error) => void;
+}
+
+export function isNatsAuthError(error: unknown): error is Error {
+  return (
+    error instanceof AuthorizationError ||
+    error instanceof UserAuthenticationExpiredError ||
+    (error instanceof Error &&
+      /authorization violation|authentication expired|user authentication expired/i.test(
+        error.message
+      ))
+  );
+}
+
 function readString(
   raw: Record<string, unknown>,
   camelKey: string,
@@ -107,7 +131,9 @@ function unwrapDialogState(value: unknown): unknown {
 /**
  * Normalizes raw NATS payloads (snake_case or camelCase) into typed events.
  */
-export function normalizeNatsEvent(raw: Record<string, unknown>): NatsSessionEvent {
+export function normalizeNatsEvent(
+  raw: Record<string, unknown>
+): NatsSessionEvent {
   const eventType = (readString(raw, 'eventType', 'event_type') ??
     'unknown') as NatsSessionEvent['eventType'];
 
@@ -130,8 +156,7 @@ export function normalizeNatsEvent(raw: Record<string, unknown>): NatsSessionEve
   if (eventType === 'dialog_text_entered_response') {
     return {
       eventType: 'dialog_text_entered_response',
-      requestID:
-        typeof raw.requestID === 'string' ? raw.requestID : undefined,
+      requestID: typeof raw.requestID === 'string' ? raw.requestID : undefined,
       resultCode:
         typeof raw.resultCode === 'number' ? raw.resultCode : undefined,
       resultMessage:
@@ -144,7 +169,10 @@ export function normalizeNatsEvent(raw: Record<string, unknown>): NatsSessionEve
   if (eventType === 'error') {
     return {
       eventType: 'error',
-      errorCode: (raw.errorCode ?? raw.error_code) as string | number | undefined,
+      errorCode: (raw.errorCode ?? raw.error_code) as
+        | string
+        | number
+        | undefined,
       errorMessage: readString(raw, 'errorMessage', 'error_message'),
       backtrace: typeof raw.backtrace === 'string' ? raw.backtrace : undefined,
       correlationID,
@@ -174,10 +202,12 @@ function decodeMessage(
 async function consumeCoreSubscription(
   nc: NatsConnection,
   subject: string,
-  onMessage: (event: NatsSessionEvent) => void
+  onMessage: (event: NatsSessionEvent) => void,
+  onReady: () => void
 ) {
   const sub = nc.subscribe(subject);
   console.info('[NATS] subscribed to subject', subject);
+  onReady();
   let received = 0;
   for await (const msg of sub) {
     received += 1;
@@ -203,7 +233,8 @@ async function consumeJetStream(
   subject: string,
   mode: JetStreamConsumeMode,
   onMessage: (event: NatsSessionEvent) => void,
-  setConsumerMessages: (messages: ConsumerMessages) => void
+  setConsumerMessages: (messages: ConsumerMessages) => void,
+  onReady: () => void
 ) {
   const js = jetstream(nc);
   const consumer = config.consumer
@@ -225,6 +256,7 @@ async function consumeJetStream(
 
   const messages = await consumer.consume();
   setConsumerMessages(messages);
+  onReady();
   let received = 0;
   for await (const msg of messages) {
     received += 1;
@@ -258,17 +290,19 @@ function closeNatsSession(
  * change.
  *
  * @param sessionId Current session UUID (subscription is skipped when falsy).
- * @param config Connection config from `/api/nats` (url + token required).
+ * @param config Connection config from `/api/nats` (url + per-session JWT).
  * @param onMessage Callback invoked for each decoded event.
  */
 export function useNatsSession(
   sessionId: string | undefined,
   config: NatsConfig | undefined,
-  onMessage: (event: NatsSessionEvent) => void
+  onMessage: (event: NatsSessionEvent) => void,
+  lifecycle: NatsSessionLifecycle = {}
 ) {
   const connRef = useRef<NatsConnection | null>(null);
   const consumerMessagesRef = useRef<ConsumerMessages | null>(null);
   const onMessageRef = useRef(onMessage);
+  const lifecycleRef = useRef(lifecycle);
   const wasHiddenRef = useRef(false);
   const [resumeGeneration, setResumeGeneration] = useState(0);
 
@@ -277,6 +311,10 @@ export function useNatsSession(
     onMessageRef.current = onMessage;
   }, [onMessage]);
 
+  useEffect(() => {
+    lifecycleRef.current = lifecycle;
+  }, [lifecycle]);
+
   // Reconnect when the tab returns from background or the network comes back.
   useEffect(() => {
     if (!sessionId || !config?.stream) {
@@ -348,7 +386,7 @@ export function useNatsSession(
       );
       const nc = await wsconnect({
         servers: [config.url],
-        token: config.token,
+        authenticator: jwtAuthenticator(config.token),
       });
       if (closed) {
         console.debug(
@@ -363,6 +401,28 @@ export function useNatsSession(
       const dispatch = (event: NatsSessionEvent) => {
         onMessageRef.current(event);
       };
+      const ready = () => lifecycleRef.current.onConnected?.();
+      let authRefreshRequested = false;
+      const requestAuthRefresh = (error: Error) => {
+        if (closed || authRefreshRequested) return;
+        authRefreshRequested = true;
+        lifecycleRef.current.onAuthError?.(error);
+      };
+
+      void (async () => {
+        for await (const status of nc.status()) {
+          if (status.type === 'error' && isNatsAuthError(status.error)) {
+            requestAuthRefresh(status.error);
+            return;
+          }
+        }
+      })();
+
+      void nc.closed().then(error => {
+        if (error && isNatsAuthError(error)) {
+          requestAuthRefresh(error);
+        }
+      });
 
       if (useJetStream) {
         await consumeJetStream(
@@ -373,12 +433,18 @@ export function useNatsSession(
           dispatch,
           messages => {
             consumerMessagesRef.current = messages;
-          }
+          },
+          ready
         );
       } else {
-        await consumeCoreSubscription(nc, subject, dispatch);
+        await consumeCoreSubscription(nc, subject, dispatch, ready);
+      }
+    })().catch(err => {
+      console.error('[NATS] connection error', err);
+      if (!closed && isNatsAuthError(err)) {
+        lifecycleRef.current.onAuthError?.(err);
       }
-    })().catch(err => console.error('[NATS] connection error', err));
+    });
 
     return () => {
       console.info('[NATS] cleanup: closing connection for subject', subject);

package/src/locales/de.json

@@ -197,6 +197,9 @@
   "artifact": {
     "close": "Schließen",
     "size": "Größe",
+    "updated": "aktualisiert",
+    "updateFailed": "Update konnte nicht angewendet werden",
+    "updateFailedHint": "Der Patch stimmt nicht mit dem aktuellen Inhalt überein. Bitten Sie um ein Neuschreiben des Artifacts.",
     "generated": "Generiert",
     "download": "Herunterladen",
     "print": "Drucken",

package/src/locales/en.json

@@ -210,6 +210,9 @@
   "artifact": {
     "close": "Close",
     "size": "Size",
+    "updated": "updated",
+    "updateFailed": "Update could not be applied",
+    "updateFailedHint": "The patch did not match the current content. Ask to rewrite the artifact.",
     "generated": "Generated",
     "download": "Download",
     "print": "Print",

package/src/locales/es.json

@@ -197,6 +197,9 @@
   "artifact": {
     "close": "Cerrar",
     "size": "Tamaño",
+    "updated": "actualizado",
+    "updateFailed": "No se pudo aplicar la actualización",
+    "updateFailedHint": "El parche no coincide con el contenido actual. Pide reescribir el artifact.",
     "generated": "Generado",
     "download": "Descargar",
     "print": "Imprimir",

package/src/locales/fr.json

@@ -196,6 +196,9 @@
   "artifact": {
     "close": "Fermer",
     "size": "Taille",
+    "updated": "mis à jour",
+    "updateFailed": "Mise à jour non appliquée",
+    "updateFailedHint": "Le correctif ne correspond pas au contenu actuel. Demandez de réécrire l'artifact.",
     "generated": "Généré",
     "download": "Télécharger",
     "print": "Imprimer",

package/src/locales/it.json

@@ -212,6 +212,9 @@
   "artifact": {
     "close": "Chiudi",
     "size": "Dimensione",
+    "updated": "aggiornato",
+    "updateFailed": "Aggiornamento non applicato",
+    "updateFailedHint": "Il patch non corrisponde al contenuto attuale. Chiedi di riscrivere l'artifact.",
     "generated": "Generato",
     "download": "Scarica",
     "print": "Stampa",

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '8.43.0';
+export const version = '8.45.0';