@serve.zone/dcrouter 17.0.0 → 17.1.0

package/ts_web/appstate/email-domains.ts

@@ -2,6 +2,7 @@ import * as plugins from '../plugins.js';
 import * as interfaces from '../../ts_interfaces/index.js';
 import { appState } from './shared.js';
 import { getActionContext } from './login.js';
+import { captureRealtimeTicket, isRealtimeTicketCurrent } from './realtime.js';
 
 
 // ============================================================================
@@ -20,6 +21,7 @@ export type TEmailDomainOperationName =
 export interface IEmailDomainOperationState extends interfaces.requests.IEmailDomainActionResult {
   operation: TEmailDomainOperationName;
   completedAt: number;
+  domain?: interfaces.data.IEmailDomain;
 }
 
 export interface IEmailDomainsState {
@@ -46,7 +48,9 @@ export const emailDomainsStatePart = await appState.getStatePart<IEmailDomainsSt
 
 const createOperationState = (
   operationArg: TEmailDomainOperationName,
-  responseArg: interfaces.requests.IEmailDomainActionResult,
+  responseArg: interfaces.requests.IEmailDomainActionResult & {
+    domain?: interfaces.data.IEmailDomain;
+  },
 ): IEmailDomainOperationState => ({
   operation: operationArg,
   completedAt: Date.now(),
@@ -120,6 +124,7 @@ export const fetchEmailDomainsAction = emailDomainsStatePart.createAction(
     const context = getActionContext();
     const currentState = statePartArg.getState()!;
     if (!context.identity) return currentState;
+    const ticket = captureRealtimeTicket('emailDomains');
 
     try {
       const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
@@ -130,8 +135,9 @@ export const fetchEmailDomainsAction = emailDomainsStatePart.createAction(
       >('/typedrequest', 'getEmailServerSettings');
       const response = await request.fire({ identity: context.identity });
       const settingsResponse = await settingsRequest.fire({ identity: context.identity });
+      if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
       return {
-        ...currentState,
+        ...statePartArg.getState()!,
         domains: response.domains,
         settings: settingsResponse.settings,
         isLoading: false,
@@ -139,8 +145,9 @@ export const fetchEmailDomainsAction = emailDomainsStatePart.createAction(
         lastUpdated: Date.now(),
       };
     } catch (error: unknown) {
+      if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
       return {
-        ...currentState,
+        ...statePartArg.getState()!,
         isLoading: false,
         error: error instanceof Error ? error.message : 'Failed to fetch email domains',
       };
@@ -169,14 +176,16 @@ export const createEmailDomainAction = emailDomainsStatePart.createAction<{
     >('/typedrequest', 'createEmailDomain');
     const response = await request.fire({ identity: context.identity, ...args });
     const operation = createOperationState('create', response);
-    if (!response.success) {
-      return applyOperationState(currentState, operation, 'Failed to create email domain');
-    }
     const refreshedState = await actionContext!.dispatch(fetchEmailDomainsAction, null);
-    return applyOperationState(refreshedState, operation, 'Email domain created');
+    return applyOperationState(
+      refreshedState,
+      operation,
+      response.success ? 'Email domain created' : 'Failed to create email domain',
+    );
   } catch (error: unknown) {
     const operation = createFailedOperationState('create', error, 'Failed to create email domain');
-    return applyOperationState(currentState, operation, 'Failed to create email domain');
+    const refreshedState = await actionContext!.dispatch(fetchEmailDomainsAction, null);
+    return applyOperationState(refreshedState, operation, 'Failed to create email domain');
   }
 });
 
@@ -260,27 +269,50 @@ export const deleteEmailDomainAction = emailDomainsStatePart.createAction<string
 );
 
 export const validateEmailDomainAction = emailDomainsStatePart.createAction<string>(
-  async (statePartArg, id, actionContext) => {
+  async (statePartArg, id) => {
     const context = getActionContext();
     const currentState = statePartArg.getState()!;
     if (!context.identity) {
       const operation = createFailedOperationState('validate', new Error('Not authenticated'), 'Not authenticated');
       return applyOperationState(currentState, operation, 'Failed to validate email domain DNS');
     }
+
+    const ticket = captureRealtimeTicket('emailDomains');
     try {
       const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
         interfaces.requests.IReq_ValidateEmailDomain
       >('/typedrequest', 'validateEmailDomain');
       const response = await request.fire({ identity: context.identity, id });
       const operation = createOperationState('validate', response);
-      if (!response.success) {
-        return applyOperationState(currentState, operation, 'Failed to validate email domain DNS');
+      let latestState = statePartArg.getState()!;
+
+      if (response.domain && isRealtimeTicketCurrent(ticket)) {
+        const existingIndex = latestState.domains.findIndex((domain) => domain.id === response.domain!.id);
+        const domains = [...latestState.domains];
+        if (existingIndex >= 0) {
+          domains[existingIndex] = response.domain;
+        } else {
+          domains.push(response.domain);
+        }
+        latestState = {
+          ...latestState,
+          domains,
+          lastUpdated: Date.now(),
+        };
       }
-      const refreshedState = await actionContext!.dispatch(fetchEmailDomainsAction, null);
-      return applyOperationState(refreshedState, operation, 'Email domain DNS validated');
+
+      return applyOperationState(
+        latestState,
+        operation,
+        response.success ? 'Email domain DNS validated' : 'Failed to validate email domain DNS',
+      );
     } catch (error: unknown) {
       const operation = createFailedOperationState('validate', error, 'Failed to validate email domain DNS');
-      return applyOperationState(currentState, operation, 'Failed to validate email domain DNS');
+      return applyOperationState(
+        statePartArg.getState()!,
+        operation,
+        'Failed to validate email domain DNS',
+      );
     }
   },
 );
@@ -315,6 +347,28 @@ export const provisionEmailDomainDnsAction = emailDomainsStatePart.createAction<
 // Email Domain Standalone Functions
 // ============================================================================
 
+export async function fetchEmailDomainsSnapshot(): Promise<interfaces.data.IEmailDomain[]> {
+  const context = getActionContext();
+  if (!context.identity) throw new Error('Not authenticated');
+  const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+    interfaces.requests.IReq_GetEmailDomains
+  >('/typedrequest', 'getEmailDomains');
+  const response = await request.fire({ identity: context.identity });
+  return response.domains;
+}
+
+export async function fetchEmailDomainSnapshot(
+  idArg: string,
+): Promise<interfaces.data.IEmailDomain | null> {
+  const context = getActionContext();
+  if (!context.identity) throw new Error('Not authenticated');
+  const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+    interfaces.requests.IReq_GetEmailDomain
+  >('/typedrequest', 'getEmailDomain');
+  const response = await request.fire({ identity: context.identity, id: idArg });
+  return response.domain;
+}
+
 export async function fetchEmailDomainDnsRecords(id: string) {
   const context = getActionContext();
   const request = new plugins.domtools.plugins.typedrequest.TypedRequest<

package/ts_web/appstate/email-ops.ts

@@ -2,6 +2,7 @@ import * as plugins from '../plugins.js';
 import * as interfaces from '../../ts_interfaces/index.js';
 import { appState } from './shared.js';
 import { getActionContext } from './login.js';
+import { captureRealtimeTicket, isRealtimeTicketCurrent } from './realtime.js';
 
 export interface IEmailOpsState {
   emails: interfaces.requests.IEmail[];
@@ -29,6 +30,7 @@ export const fetchAllEmailsAction = emailOpsStatePart.createAction(async (stateP
   const context = getActionContext();
   const currentState = statePartArg.getState()!;
   if (!context.identity) return currentState;
+  const ticket = captureRealtimeTicket(['emailQueue', 'smtpAttempts']);
 
   try {
     const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
@@ -38,16 +40,19 @@ export const fetchAllEmailsAction = emailOpsStatePart.createAction(async (stateP
     const response = await request.fire({
       identity: context.identity,
     });
+    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
 
     return {
+      ...statePartArg.getState()!,
       emails: response.emails,
       isLoading: false,
       error: null,
       lastUpdated: Date.now(),
     };
   } catch (error) {
+    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
     return {
-      ...currentState,
+      ...statePartArg.getState()!,
       isLoading: false,
       error: error instanceof Error ? error.message : 'Failed to fetch emails',
     };
@@ -55,3 +60,17 @@ export const fetchAllEmailsAction = emailOpsStatePart.createAction(async (stateP
 });
 
 // ============================================================================
+export async function fetchEmailDetailSnapshot(
+  emailIdArg: string,
+): Promise<interfaces.requests.IEmailDetail | null> {
+  const context = getActionContext();
+  if (!context.identity) return null;
+  const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+    interfaces.requests.IReq_GetEmailDetail
+  >('/typedrequest', 'getEmailDetail');
+  const response = await request.fire({
+    identity: context.identity,
+    emailId: emailIdArg,
+  });
+  return response.email;
+}

package/ts_web/appstate/realtime.ts

@@ -0,0 +1,109 @@
+import * as interfaces from '../../ts_interfaces/index.js';
+
+export interface IOpsRealtimeTicket {
+  serverEpoch: string | null;
+  revisions: Partial<interfaces.requests.IOpsRealtimeRevisionMap>;
+}
+
+export type TOpsRealtimeListener = (
+  invalidationsArg: interfaces.requests.IOpsRealtimeInvalidation[],
+) => void;
+
+const emptyRevisions = (): interfaces.requests.IOpsRealtimeRevisionMap => {
+  return Object.fromEntries(
+    interfaces.requests.opsRealtimeResources.map((resource) => [resource, 0]),
+  ) as unknown as interfaces.requests.IOpsRealtimeRevisionMap;
+};
+
+/**
+ * Orders pushes and HTTP reads. A read may apply only while every captured
+ * resource revision is still current.
+ */
+export class OpsRealtimeFreshness {
+  private serverEpoch: string | null = null;
+  private revisions = emptyRevisions();
+  private listeners = new Set<TOpsRealtimeListener>();
+
+  public getKnownState(): {
+    knownServerEpoch?: string;
+    knownRevisions: interfaces.requests.IOpsRealtimeRevisionMap;
+  } {
+    return {
+      knownServerEpoch: this.serverEpoch || undefined,
+      knownRevisions: { ...this.revisions },
+    };
+  }
+
+  public capture(
+    resourcesArg:
+      | interfaces.requests.TOpsRealtimeResource
+      | interfaces.requests.TOpsRealtimeResource[],
+  ): IOpsRealtimeTicket {
+    const resources = Array.isArray(resourcesArg) ? resourcesArg : [resourcesArg];
+    return {
+      serverEpoch: this.serverEpoch,
+      revisions: Object.fromEntries(
+        resources.map((resource) => [resource, this.revisions[resource]]),
+      ),
+    };
+  }
+
+  public isCurrent(ticketArg: IOpsRealtimeTicket): boolean {
+    if (ticketArg.serverEpoch !== this.serverEpoch) return false;
+    return Object.entries(ticketArg.revisions).every(([resource, revision]) => {
+      return this.revisions[resource as interfaces.requests.TOpsRealtimeResource] === revision;
+    });
+  }
+
+  public accept(
+    serverEpochArg: string,
+    invalidationsArg: interfaces.requests.IOpsRealtimeInvalidation[],
+  ): interfaces.requests.IOpsRealtimeInvalidation[] {
+    const epochChanged = this.serverEpoch !== serverEpochArg;
+    if (epochChanged) {
+      this.serverEpoch = serverEpochArg;
+      this.revisions = emptyRevisions();
+    }
+
+    const accepted: interfaces.requests.IOpsRealtimeInvalidation[] = [];
+    for (const invalidation of invalidationsArg) {
+      if (!interfaces.requests.opsRealtimeResources.includes(invalidation.resource)) {
+        continue;
+      }
+      if (invalidation.revision <= this.revisions[invalidation.resource]) {
+        continue;
+      }
+      this.revisions[invalidation.resource] = invalidation.revision;
+      accepted.push(invalidation);
+    }
+
+    if (accepted.length > 0) {
+      for (const listener of Array.from(this.listeners)) {
+        listener(accepted);
+      }
+    }
+    return accepted;
+  }
+
+  public subscribe(listenerArg: TOpsRealtimeListener): () => void {
+    this.listeners.add(listenerArg);
+    return () => this.listeners.delete(listenerArg);
+  }
+
+  public reset(): void {
+    this.serverEpoch = null;
+    this.revisions = emptyRevisions();
+  }
+}
+
+export const opsRealtimeFreshness = new OpsRealtimeFreshness();
+
+export const captureRealtimeTicket = (
+  resourcesArg:
+    | interfaces.requests.TOpsRealtimeResource
+    | interfaces.requests.TOpsRealtimeResource[],
+): IOpsRealtimeTicket => opsRealtimeFreshness.capture(resourcesArg);
+
+export const isRealtimeTicketCurrent = (ticketArg: IOpsRealtimeTicket): boolean => {
+  return opsRealtimeFreshness.isCurrent(ticketArg);
+};

package/ts_web/appstate/remoteingress.ts

@@ -2,6 +2,7 @@ import * as plugins from '../plugins.js';
 import * as interfaces from '../../ts_interfaces/index.js';
 import { appState } from './shared.js';
 import { getActionContext } from './login.js';
+import { captureRealtimeTicket, isRealtimeTicketCurrent } from './realtime.js';
 
 // ============================================================================
 // Remote Ingress State
@@ -52,6 +53,7 @@ export const fetchRemoteIngressAction = remoteIngressStatePart.createAction(asyn
   const context = getActionContext();
   const currentState = statePartArg.getState()!;
   if (!context.identity) return currentState;
+  const ticket = captureRealtimeTicket('edges');
 
   try {
     const edgesRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
@@ -71,9 +73,10 @@ export const fetchRemoteIngressAction = remoteIngressStatePart.createAction(asyn
       statusRequest.fire({ identity: context.identity }),
       hubSettingsRequest.fire({ identity: context.identity }),
     ]);
+    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
 
     return {
-      ...currentState,
+      ...statePartArg.getState()!,
       edges: edgesResponse.edges,
       statuses: statusResponse.statuses,
       hubSettings: hubSettingsResponse.settings,
@@ -82,8 +85,9 @@ export const fetchRemoteIngressAction = remoteIngressStatePart.createAction(asyn
       lastUpdated: Date.now(),
     };
   } catch (error) {
+    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
     return {
-      ...currentState,
+      ...statePartArg.getState()!,
       isLoading: false,
       error: error instanceof Error ? error.message : 'Failed to fetch remote ingress data',
     };

package/ts_web/appstate/routes.ts

@@ -2,6 +2,7 @@ import * as plugins from '../plugins.js';
 import * as interfaces from '../../ts_interfaces/index.js';
 import { appState } from './shared.js';
 import { getActionContext } from './login.js';
+import { captureRealtimeTicket, isRealtimeTicketCurrent } from './realtime.js';
 
 // ============================================================================
 // Route Management State
@@ -40,6 +41,7 @@ export const fetchMergedRoutesAction = routeManagementStatePart.createAction(asy
   const context = getActionContext();
   const currentState = statePartArg.getState()!;
   if (!context.identity) return currentState;
+  const ticket = captureRealtimeTicket('routes');
 
   try {
     const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
@@ -49,9 +51,10 @@ export const fetchMergedRoutesAction = routeManagementStatePart.createAction(asy
     const response = await request.fire({
       identity: context.identity,
     });
+    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
 
     return {
-      ...currentState,
+      ...statePartArg.getState()!,
       mergedRoutes: response.routes,
       warnings: response.warnings,
       isLoading: false,
@@ -59,8 +62,9 @@ export const fetchMergedRoutesAction = routeManagementStatePart.createAction(asy
       lastUpdated: Date.now(),
     };
   } catch (error) {
+    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
     return {
-      ...currentState,
+      ...statePartArg.getState()!,
       isLoading: false,
       error: error instanceof Error ? error.message : 'Failed to fetch routes',
     };
@@ -71,6 +75,7 @@ export const fetchHttpRedirectsAction = routeManagementStatePart.createAction(as
   const context = getActionContext();
   const currentState = statePartArg.getState()!;
   if (!context.identity) return currentState;
+  const ticket = captureRealtimeTicket('routes');
 
   try {
     const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
@@ -80,17 +85,19 @@ export const fetchHttpRedirectsAction = routeManagementStatePart.createAction(as
     const response = await request.fire({
       identity: context.identity,
     });
+    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
 
     return {
-      ...currentState,
+      ...statePartArg.getState()!,
       httpRedirects: response.redirects,
       isLoading: false,
       error: null,
       lastUpdated: Date.now(),
     };
   } catch (error) {
+    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
     return {
-      ...currentState,
+      ...statePartArg.getState()!,
       isLoading: false,
       error: error instanceof Error ? error.message : 'Failed to fetch HTTP redirects',
     };

package/ts_web/appstate/runtime.ts

@@ -10,14 +10,124 @@ import { securityPolicyStatePart, fetchSecurityPolicyAction } from './security.j
 import { certificateStatePart, fetchCertificateOverviewAction } from './certificates.js';
 import { remoteIngressStatePart, fetchRemoteIngressAction } from './remoteingress.js';
 import { vpnStatePart, fetchVpnAction } from './vpn.js';
-
+import { emailDomainsStatePart, fetchEmailDomainsAction } from './email-domains.js';
+import { emailOpsStatePart, fetchAllEmailsAction } from './email-ops.js';
+import {
+  domainsStatePart,
+  fetchDnsRecordsForDomainAction,
+  fetchDomainsAndProvidersAction,
+} from './domains.js';
+import {
+  fetchHttpRedirectsAction,
+  fetchMergedRoutesAction,
+  routeManagementStatePart,
+} from './routes.js';
+import { opsRealtimeFreshness } from './realtime.js';
 
 // ============================================================================
 // TypedSocket Client for Real-time Log Streaming
 // ============================================================================
 
 let socketClient: plugins.typedsocket.TypedSocket | null = null;
+let socketStatusSubscription: { unsubscribe: () => void } | null = null;
+let socketConnectInFlight = false;
+let socketGeneration = 0;
 const socketRouter = new plugins.domtools.plugins.typedrequest.TypedRouter();
+type TRealtimeRefreshGroup =
+  | 'emailDomains'
+  | 'emailOps'
+  | 'dns'
+  | 'routes'
+  | 'edges'
+  | 'certificates';
+
+const pendingRealtimeRefreshes = new Set<TRealtimeRefreshGroup>();
+let realtimeRefreshLoopRunning = false;
+
+const resourceRefreshGroups: Record<
+  interfaces.requests.TOpsRealtimeResource,
+  TRealtimeRefreshGroup
+> = {
+  emailDomains: 'emailDomains',
+  emailQueue: 'emailOps',
+  smtpAttempts: 'emailOps',
+  dns: 'dns',
+  routes: 'routes',
+  edges: 'edges',
+  certificates: 'certificates',
+};
+
+const refreshRealtimeGroup = async (groupArg: TRealtimeRefreshGroup): Promise<void> => {
+  switch (groupArg) {
+    case 'emailDomains':
+      await emailDomainsStatePart.dispatchAction(fetchEmailDomainsAction, null);
+      break;
+    case 'emailOps':
+      await emailOpsStatePart.dispatchAction(fetchAllEmailsAction, null);
+      break;
+    case 'dns': {
+      const selectedDomainId = domainsStatePart.getState()!.selectedDomainId;
+      await domainsStatePart.dispatchAction(fetchDomainsAndProvidersAction, null);
+      if (selectedDomainId) {
+        await domainsStatePart.dispatchAction(
+          fetchDnsRecordsForDomainAction,
+          { domainId: selectedDomainId },
+        );
+      }
+      break;
+    }
+    case 'routes':
+      await Promise.all([
+        routeManagementStatePart.dispatchAction(fetchMergedRoutesAction, null),
+        routeManagementStatePart.dispatchAction(fetchHttpRedirectsAction, null),
+      ]);
+      break;
+    case 'edges':
+      await remoteIngressStatePart.dispatchAction(fetchRemoteIngressAction, null);
+      break;
+    case 'certificates':
+      await certificateStatePart.dispatchAction(fetchCertificateOverviewAction, null);
+      break;
+  }
+};
+
+const runRealtimeRefreshLoop = async (): Promise<void> => {
+  if (realtimeRefreshLoopRunning) return;
+  realtimeRefreshLoopRunning = true;
+  try {
+    while (pendingRealtimeRefreshes.size > 0) {
+      const groups = Array.from(pendingRealtimeRefreshes);
+      pendingRealtimeRefreshes.clear();
+      await Promise.all(
+        groups.map(async (group) => {
+          try {
+            await refreshRealtimeGroup(group);
+          } catch (error) {
+            console.error('Realtime resource refresh failed:', group, error);
+          }
+        }),
+      );
+    }
+  } finally {
+    realtimeRefreshLoopRunning = false;
+    if (pendingRealtimeRefreshes.size > 0) {
+      queueMicrotask(() => void runRealtimeRefreshLoop());
+    }
+  }
+};
+
+const acceptRealtimeInvalidations = (
+  serverEpochArg: string,
+  invalidationsArg: interfaces.requests.IOpsRealtimeInvalidation[],
+): void => {
+  const accepted = opsRealtimeFreshness.accept(serverEpochArg, invalidationsArg);
+  for (const invalidation of accepted) {
+    pendingRealtimeRefreshes.add(resourceRefreshGroups[invalidation.resource]);
+  }
+  if (accepted.length > 0) {
+    queueMicrotask(() => void runRealtimeRefreshLoop());
+  }
+};
 
 // Batched log entry handler — buffers incoming entries and flushes once per animation frame
 let logEntryBuffer: interfaces.data.ILogEntry[] = [];
@@ -51,28 +161,85 @@ socketRouter.addTypedHandler(
   )
 );
 
+socketRouter.addTypedHandler(
+  new plugins.domtools.plugins.typedrequest.TypedHandler<
+    interfaces.requests.IReq_PushOpsRealtimeInvalidation
+  >(
+    'pushOpsRealtimeInvalidation',
+    async (dataArg) => {
+      acceptRealtimeInvalidations(dataArg.serverEpoch, dataArg.invalidations);
+      return {};
+    },
+  ),
+);
+
+const subscribeSocket = async (
+  clientArg: plugins.typedsocket.TypedSocket,
+  generationArg: number,
+): Promise<void> => {
+  const identity = getActionContext().identity;
+  if (!identity || generationArg !== socketGeneration || clientArg !== socketClient) return;
+
+  const request = clientArg.createTypedRequest<interfaces.requests.IReq_SubscribeOpsRealtime>(
+    'subscribeOpsRealtime',
+  );
+  const response = await request.fire({
+    identity,
+    ...opsRealtimeFreshness.getKnownState(),
+  });
+  if (generationArg !== socketGeneration || clientArg !== socketClient) return;
+  acceptRealtimeInvalidations(response.serverEpoch, response.invalidations);
+};
+
 async function connectSocket() {
-  if (socketClient) return;
+  if (socketClient || socketConnectInFlight || document.hidden) return;
+  socketConnectInFlight = true;
+  const generation = ++socketGeneration;
   try {
-    socketClient = await plugins.typedsocket.TypedSocket.createClient(
+    const client = await plugins.typedsocket.TypedSocket.createClient(
       socketRouter,
       plugins.typedsocket.TypedSocket.useWindowLocationOriginUrl(),
+      { autoReconnect: true },
     );
-    await socketClient.setTag('role', 'ops_dashboard');
+    if (generation !== socketGeneration || !loginStatePart.getState()!.isLoggedIn) {
+      await client.stop();
+      return;
+    }
+
+    socketClient = client;
+    socketStatusSubscription = client.statusSubject.subscribe((status) => {
+      if (status === 'connected') {
+        void subscribeSocket(client, generation).catch((error) => {
+          console.error('Realtime subscription failed after reconnect:', error);
+        });
+      }
+    });
+    await subscribeSocket(client, generation);
   } catch (err) {
     console.error('TypedSocket connection failed:', err);
+    socketStatusSubscription?.unsubscribe();
+    socketStatusSubscription = null;
+    if (socketClient) {
+      await socketClient.stop().catch(() => undefined);
+    }
     socketClient = null;
+  } finally {
+    socketConnectInFlight = false;
   }
 }
 
 async function disconnectSocket() {
-  if (socketClient) {
+  socketGeneration++;
+  socketStatusSubscription?.unsubscribe();
+  socketStatusSubscription = null;
+  const client = socketClient;
+  socketClient = null;
+  if (client) {
     try {
-      await socketClient.stop();
+      await client.stop();
     } catch {
       // ignore disconnect errors
     }
-    socketClient = null;
   }
 }
 
@@ -285,6 +452,8 @@ loginStatePart.select((s) => s.isLoggedIn).subscribe((isLoggedIn) => {
     if (isLoggedIn) {
       connectSocket();
     } else {
+      pendingRealtimeRefreshes.clear();
+      opsRealtimeFreshness.reset();
       disconnectSocket();
     }
   }

package/ts_web/appstate.ts

@@ -19,6 +19,7 @@ export * from './appstate/domains.js';
 export * from './appstate/routes.js';
 export * from './appstate/users.js';
 export * from './appstate/email-domains.js';
+export * from './appstate/realtime.js';
 
 // Side-effect module: auto-refresh scheduling and TypedSocket log streaming.
 import './appstate/runtime.js';