machinaos 0.0.76 → 0.0.78

package/client/src/contexts/WebSocketContext.tsx

@@ -11,13 +11,16 @@
  */
 
 import React, { createContext, useContext, useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import ReconnectingWebSocket from 'partysocket/ws';
 import { API_CONFIG } from '../config/api';
 import { useAppStore } from '../store/useAppStore';
 import { useAuth } from './AuthContext';
 import { queryClient } from '../lib/queryClient';
 import { queryKeys } from '../lib/queryConfig';
-import { CATALOGUE_QUERY_KEY } from '../hooks/useCatalogueQuery';
+import { invalidateCatalogue } from '../hooks/useCatalogueQuery';
 import { nodeParamsQueryKey } from '../hooks/useNodeParamsQuery';
+import type { WorkflowEvent } from '../types/cloudEvents';
+import { WS_CLOSE, WS_RECONNECT } from '../lib/connectionConfig';
 import {
   useNodeStatusStore,
   useNodeStatusForId,
@@ -173,9 +176,17 @@ export interface RateLimitStats {
   pause_reason?: string;
 }
 
+/**
+ * In-memory validation-result cache for an API-key provider.
+ *
+ * NOT a "do we have a stored key" answer — that comes from the
+ * `useCatalogueQuery['credentialCatalogue']` `provider.stored` field
+ * (single source of truth, derived from the encrypted DB on each
+ * `get_credential_catalogue` round-trip). Mixing the two flags caused
+ * cross-tab drift; the duplicated `hasKey` field was retired.
+ */
 export interface ApiKeyStatus {
   valid: boolean;
-  hasKey?: boolean;
   message?: string;
   models?: string[];
   timestamp?: number;
@@ -311,6 +322,12 @@ interface WebSocketContextValue {
   // Generic request method
   sendRequest: <T = any>(type: string, data?: Record<string, any>) => Promise<T>;
 
+  // Generic broadcast subscription. Returns an unsubscribe fn.
+  // Use for ad-hoc backend-pushed events like `workflow_ops_apply`
+  // (see server/services/status_broadcaster.send_custom_event) so a
+  // new listener doesn't require a new switch case + state slice.
+  addEventListener: (type: string, handler: (data: any) => void) => () => void;
+
   // Node Parameters
   getNodeParameters: (nodeId: string) => Promise<NodeParameters | null>;
   getAllNodeParameters: (nodeIds: string[]) => Promise<Record<string, NodeParameters>>;
@@ -492,10 +509,20 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   // Per-workflow compaction stats: workflow_id -> session_id -> CompactionStats (n8n pattern)
   const [allCompactionStats, setAllCompactionStats] = useState<Record<string, Record<string, CompactionStats>>>({});
 
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  // PartySocket's `ReconnectingWebSocket` implements the native WebSocket
+  // surface (`send`, `close`, `readyState`, `addEventListener`, `onopen`,
+  // `onmessage`, `onclose`, `onerror`) so consumers — including the request
+  // correlation map and ping loop below — work unchanged. The ref's element
+  // type tightens to the library's class so any feature-specific calls
+  // (`shouldReconnect`, `reconnect()`) type-check.
+  const wsRef = useRef<ReconnectingWebSocket | null>(null);
   const pingIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const pendingRequestsRef = useRef<Map<string, PendingRequest>>(new Map());
+  // Generic broadcast subscribers ({type -> Set<handler>}) for events
+  // surfaced via send_custom_event on the backend. Lets new features
+  // listen for ad-hoc broadcasts without growing the switch statement
+  // or the context state shape.
+  const eventListenersRef = useRef<Map<string, Set<(data: any) => void>>>(new Map());
   // Pending-send queue for backpressure + replay across reconnects.
   // Drained inside `ws.onopen` after the init burst. Source of truth
   // for currentWorkflowId is `useAppStore.getState().currentWorkflow?.id`
@@ -518,7 +545,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
 
       // Fetch deployment status for the new workflow (n8n pattern)
       // This ensures the deploy button shows correct state when switching workflows
-      if (wsRef.current?.readyState === WebSocket.OPEN) {
+      if (wsRef.current?.readyState === ReconnectingWebSocket.OPEN) {
         const fetchDeploymentStatus = async () => {
           try {
             const requestId = generateRequestId();
@@ -652,7 +679,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
             }
             // Catalogue 'stored' flags derive from api_keys + oauth state;
             // re-sync once after the bulk status lands.
-            queryClient.invalidateQueries({ queryKey: CATALOGUE_QUERY_KEY });
+            invalidateCatalogue(queryClient);
           }
           break;
 
@@ -664,16 +691,26 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
             }));
             // Sidebar catalogue's `stored` flag depends on server-side
             // api_keys + oauth state; refresh it.
-            queryClient.invalidateQueries({ queryKey: CATALOGUE_QUERY_KEY });
+            invalidateCatalogue(queryClient);
           }
           break;
 
-        case 'credential_catalogue_updated':
-          // Future server emitter (per useCatalogueQuery.ts TODO). Client
-          // handler is wired now so once the server pushes it, consumers
-          // refresh automatically.
-          queryClient.invalidateQueries({ queryKey: CATALOGUE_QUERY_KEY });
+        case 'credential_catalogue_updated': {
+          // The backend wraps a CloudEvents v1.0 `WorkflowEvent` envelope
+          // inside `data` (see server/services/status_broadcaster.py and
+          // server/services/events/envelope.py). The legacy outer wire
+          // key stays as the dispatch tag for back-compat, but the
+          // envelope's `id` / `time` / nested `type` (e.g.
+          // `credential.api_key.saved`) are now statically typed for any
+          // future consumer that wants ordering, dedup, or fine-grained
+          // glob dispatch via `matchesType()`.
+          const event = data as WorkflowEvent<{ provider: string; customer_id?: string }>;
+          // Today the only action is to refetch the catalogue; the
+          // envelope is read for telemetry / future dispatch.
+          void event;
+          invalidateCatalogue(queryClient);
           break;
+        }
 
         case 'android_status':
           setAndroidStatus(data || defaultAndroidStatus);
@@ -681,7 +718,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
 
         case 'whatsapp_status':
           setWhatsappStatus(data || defaultWhatsAppStatus);
-          queryClient.invalidateQueries({ queryKey: CATALOGUE_QUERY_KEY });
+          invalidateCatalogue(queryClient);
           break;
 
         case 'twitter_oauth_complete':
@@ -694,7 +731,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
               name: data.name,
               profile_image_url: data.profile_image_url,
             });
-            queryClient.invalidateQueries({ queryKey: CATALOGUE_QUERY_KEY });
+            invalidateCatalogue(queryClient);
           }
           break;
 
@@ -707,7 +744,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
               name: data.name,
               profile_image_url: data.profile_image_url,
             });
-            queryClient.invalidateQueries({ queryKey: CATALOGUE_QUERY_KEY });
+            invalidateCatalogue(queryClient);
           }
           break;
 
@@ -719,7 +756,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
               email: data.email || null,
               name: data.name,
             });
-            queryClient.invalidateQueries({ queryKey: CATALOGUE_QUERY_KEY });
+            invalidateCatalogue(queryClient);
           }
           break;
 
@@ -733,7 +770,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
               bot_id: data.bot_id || null,
               owner_chat_id: data.owner_chat_id ?? null,
             });
-            queryClient.invalidateQueries({ queryKey: CATALOGUE_QUERY_KEY });
+            invalidateCatalogue(queryClient);
           }
           break;
 
@@ -804,6 +841,53 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
           }
           break;
 
+        case 'agent_progress': {
+          // CloudEvents v1.0 envelope from broadcaster.broadcast_agent_progress.
+          // Inner payload: { node_id, iteration, max_iterations, phase? }.
+          // Routes into nodeStatusStore (same per-workflow / per-node slot
+          // the existing useNodeStatus consumers read) so the AI-agent body
+          // can render "iteration / max_iterations" live without a parallel
+          // store. Wire-key parity with `credential_catalogue_updated`.
+          const envelope = data as WorkflowEvent<{
+            node_id?: string;
+            iteration?: number;
+            max_iterations?: number;
+            phase?: string;
+          }> | undefined;
+          const inner = envelope?.data;
+          const targetNodeId = inner?.node_id || envelope?.subject;
+          const progressWorkflowId =
+            envelope?.workflow_id || message.workflow_id || 'unknown';
+          if (targetNodeId && inner) {
+            const store = useNodeStatusStore.getState();
+            const previous =
+              store.allStatuses[progressWorkflowId]?.[targetNodeId] ||
+              ({} as NodeStatus);
+            // Defensive: an agent_progress event implies the agent IS
+            // mid-loop. Set status='executing' even if no prior
+            // node_status broadcast arrived first (race or edge case
+            // where the agent finishes in a single step). Without this,
+            // AIAgentNode's `isExecuting && iteration != null` gate
+            // hides the badge entirely.
+            const carriedStatus =
+              previous.status === 'success' || previous.status === 'error'
+                ? previous.status
+                : 'executing';
+            store.setStatus(progressWorkflowId, targetNodeId, {
+              ...previous,
+              status: carriedStatus,
+              workflow_id: progressWorkflowId,
+              data: {
+                ...(previous.data || {}),
+                iteration: inner.iteration,
+                max_iterations: inner.max_iterations,
+                ...(inner.phase ? { phase: inner.phase } : {}),
+              },
+            });
+          }
+          break;
+        }
+
         case 'node_status_cleared':
           // Handle broadcast from server when node status is cleared
           if (node_id || message.node_id) {
@@ -889,6 +973,57 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
           break;
         }
 
+        case 'deployment_snapshot': {
+          // CloudEvents v1.0 envelope from broadcaster._send_deployment_snapshot.
+          // Pushed once per WS connect so the FE can reconcile its stale
+          // `deploymentStatus.isRunning=true` after a backend restart that
+          // wiped DeploymentManager._deployments. Empty list is meaningful
+          // and forces a reset — the prior bug was: backend restart wiped
+          // the deployment dict, FE never got a `stopped` broadcast (because
+          // there was nothing to broadcast about), so the Start button
+          // stayed showing "Stop" forever.
+          const envelope = data as WorkflowEvent<{
+            running_workflow_ids?: string[];
+          }> | undefined;
+          const runningIds = envelope?.data?.running_workflow_ids ?? [];
+          const runningSet = new Set(runningIds);
+          const store = useAppStore.getState();
+          const currentId = store.currentWorkflow?.id;
+
+          // Reconcile per-workflow execution state in workflowUIStates.
+          // Anything currently flagged isExecuting=true that isn't in
+          // the snapshot's running set gets cleared (the load-bearing
+          // reset for stale state after backend restart). Anything in
+          // the snapshot gets flagged true.
+          const existingStates = store.workflowUIStates ?? {};
+          for (const [wid, ui] of Object.entries(existingStates)) {
+            if (ui?.isExecuting && !runningSet.has(wid)) {
+              store.setWorkflowExecuting(wid, false);
+            }
+          }
+          for (const wid of runningIds) {
+            store.setWorkflowExecuting(wid, true);
+          }
+
+          // Reconcile the toolbar `deploymentStatus` for the active workflow
+          setDeploymentStatus(prev => {
+            const next: DeploymentStatus = { ...prev };
+            if (currentId && runningSet.has(currentId)) {
+              next.isRunning = true;
+              next.status = 'running';
+              next.workflow_id = currentId;
+            } else if (currentId && !runningSet.has(currentId) && prev.workflow_id === currentId) {
+              // Previously thought current workflow was deployed; backend says no.
+              next.isRunning = false;
+              next.status = 'stopped';
+              next.workflow_id = null;
+              next.activeRuns = 0;
+            }
+            return next;
+          });
+          break;
+        }
+
         case 'deployment_status':
           // Handle deployment status updates (event-driven, no iterations)
           // Per-workflow scoping (n8n pattern): Only apply updates for current workflow
@@ -1141,8 +1276,21 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
           console.error('[WebSocket] Server error:', message.code, message.message);
           break;
 
-        default:
+        default: {
+          // Generic broadcast dispatch -- any listener registered via
+          // addEventListener(type, handler) gets the message data. Lets
+          // backend-only features (e.g. workflow_ops_apply) ship without
+          // adding a switch case + state slice every time.
+          const listeners = eventListenersRef.current.get(type);
+          if (listeners && listeners.size > 0) {
+            for (const handler of listeners) {
+              try { handler(data); } catch (err) {
+                console.error(`[WebSocket] Listener for '${type}' threw:`, err);
+              }
+            }
+          }
           break;
+        }
       }
     } catch (error) {
       console.error('[WebSocket] Failed to parse message:', error);
@@ -1153,7 +1301,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   // fresh request_id and a reset timeout budget; responses correlate via the
   // existing pendingRequestsRef map. Per-call abortController cancels the
   // queue-side timeout that was running while the request was waiting in line.
-  const drainPendingSends = useCallback((ws: WebSocket) => {
+  const drainPendingSends = useCallback((ws: ReconnectingWebSocket) => {
     const queue = pendingSendQueueRef.current;
     pendingSendQueueRef.current = [];
     for (const queued of queue) {
@@ -1194,16 +1342,34 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
     }
   }, []);
 
-  // Connect to WebSocket
+  // Connect to WebSocket. Uses PartySocket's `ReconnectingWebSocket` —
+  // a native-WebSocket-compatible class with built-in jittered exponential
+  // backoff, message replay, and intentional-close (code 1000) handling.
+  // Replaces the previous flat 3 s `setTimeout(reconnect)` loop.
+  // Backoff envelope is configured via `WS_RECONNECT` in
+  // `lib/connectionConfig.ts` so a future tuning pass is a one-file edit.
+  // Ref: https://docs.partykit.io/reference/partysocket-api/
   const connect = useCallback(() => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
+    if (wsRef.current?.readyState === ReconnectingWebSocket.OPEN) {
       return;
     }
 
     const wsUrl = getWebSocketUrl();
 
     try {
-      const ws = new WebSocket(wsUrl);
+      const ws = new ReconnectingWebSocket(wsUrl, [], {
+        minReconnectionDelay: WS_RECONNECT.MIN_DELAY_MS,
+        maxReconnectionDelay: WS_RECONNECT.MAX_DELAY_MS,
+        reconnectionDelayGrowFactor: WS_RECONNECT.GROW_FACTOR,
+        // Reconnect indefinitely while the page is open. Intentional
+        // closes via `ws.close(1000, ...)` (logout / unmount) skip the
+        // reconnect path because PartySocket inspects the close code.
+        maxRetries: Infinity,
+        // Send-while-disconnected buffer; replayed automatically on the
+        // next OPEN. Mirrors the previous `pendingSendQueueRef` cap intent
+        // for opportunistic out-of-band sends.
+        maxEnqueuedMessages: WS_RECONNECT.MAX_ENQUEUED_MESSAGES,
+      });
 
       ws.onopen = async () => {
         setIsConnected(true);
@@ -1219,51 +1385,65 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
 
         // Start ping interval
         pingIntervalRef.current = setInterval(() => {
-          if (ws.readyState === WebSocket.OPEN) {
+          if (ws.readyState === ReconnectingWebSocket.OPEN) {
             ws.send(JSON.stringify({ type: 'ping' }));
           }
         }, 30000);
 
-        // Load initial API key statuses for known providers
-        const providers = ['openai', 'anthropic', 'gemini', 'google_maps', 'android_remote'];
-        for (const provider of providers) {
-          try {
-            const response = await new Promise<any>((resolve, reject) => {
-              const requestId = `init_${provider}_${Date.now()}`;
-              const timeout = setTimeout(() => reject(new Error('Timeout')), 5000);
-
-              const handler = (event: MessageEvent) => {
-                try {
-                  const msg = JSON.parse(event.data);
-                  if (msg.request_id === requestId) {
-                    clearTimeout(timeout);
-                    ws.removeEventListener('message', handler);
-                    resolve(msg);
-                  }
-                } catch {}
-              };
-
-              ws.addEventListener('message', handler);
-              ws.send(JSON.stringify({ type: 'get_stored_api_key', provider, request_id: requestId }));
-            });
-
-            if (response.hasKey) {
-              setApiKeyStatuses(prev => ({
-                ...prev,
-                [provider]: { hasKey: true, valid: true }
-              }));
-            }
-          } catch {
-            // Ignore errors during initial check
-          }
-        }
+        // Drain any sends that were queued while the socket was reconnecting.
+        // Runs BEFORE setIsReady(true) so isReady-gated callers don't race
+        // an empty pendingRequestsRef. Mirrors socket.io-client's offline
+        // buffer + Apollo RetryLink semantics.
+        drainPendingSends(ws);
 
-        // Load terminal log history
-        try {
-          const terminalResponse = await new Promise<any>((resolve, reject) => {
-            const requestId = `terminal_logs_${Date.now()}`;
-            const timeout = setTimeout(() => reject(new Error('Timeout')), 5000);
+        // Wave 32: flip `isReady` IMMEDIATELY on socket open + queue drain.
+        // The page-state restore (terminal / chat / console history) fires
+        // in the BACKGROUND below — its results trickle into state writes
+        // when each request settles, but UI interaction is no longer blocked
+        // behind a serial 5-up-to-25-second `Promise.allSettled` await.
+        //
+        // Why this matters: tab-blur + WS reconnect previously left the user
+        // staring at an unresponsive workflow until init-burst finished.
+        // First click "did nothing" because catalogue / nodeSpec / credentials
+        // queries gate on `isReady` and stayed disabled. The cache (warmed
+        // from localStorage via PersistQueryClientProvider for `nodeSpec` /
+        // `nodeGroups` / `pluginCatalogue` / `skillContent`) carries the
+        // visible state until refreshes land.
+        //
+        // Wave 32 also dropped the legacy hardcoded `probeApiKey` loop over
+        // `['openai', 'anthropic', 'gemini', 'google_maps', 'android_remote']`.
+        // Those probes were redundant — credential state has TWO authoritative
+        // sources already:
+        //   1. The backend's `initial_status` broadcast (handled at line ~638)
+        //      pushes the full `api_keys` map on every reconnect.
+        //   2. The catalogue (TanStack Query `useCatalogueQuery`) carries the
+        //      `provider.stored` flag for every provider; refetched via the
+        //      debounced `invalidateCatalogue(queryClient)` helper that 8+
+        //      credential CloudEvent handlers already fire (`api_key_status`,
+        //      `credential_catalogue_updated`, `whatsapp_status`,
+        //      `twitter_oauth_complete`, `google_oauth_complete`,
+        //      `google_status`, `telegram_status`, `initial_status`).
+        // No frontend should hardcode a provider list — adding a new
+        // provider should be a backend-only edit.
+        setIsReady(true);
 
+        // Single-shot catalogue invalidate so any credential mutations that
+        // landed on the server while the socket was disconnected propagate
+        // to the in-memory cache immediately. Debounced (300ms trailing) so
+        // it coalesces with other broadcast-driven invalidations.
+        invalidateCatalogue(queryClient);
+
+        // Page-state restore (background). Fire-and-forget — these writes
+        // hydrate panels that PersistQueryClient doesn't cache (terminal /
+        // chat / console history come straight from the server's per-request
+        // log read, not from a query cache).
+        const sendBurstRequest = <T = any>(payload: object, idPrefix: string): Promise<T> =>
+          new Promise<T>((resolve, reject) => {
+            const requestId = `${idPrefix}_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+            const timeout = setTimeout(() => {
+              ws.removeEventListener('message', handler);
+              reject(new Error('Timeout'));
+            }, 5000);
             const handler = (event: MessageEvent) => {
               try {
                 const msg = JSON.parse(event.data);
@@ -1274,124 +1454,77 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
                 }
               } catch {}
             };
-
             ws.addEventListener('message', handler);
-            ws.send(JSON.stringify({ type: 'get_terminal_logs', request_id: requestId }));
+            ws.send(JSON.stringify({ ...payload, request_id: requestId }));
           });
 
-          if (terminalResponse.success && terminalResponse.logs) {
-            // Map server logs to TerminalLogEntry format (newest first)
-            const logs: TerminalLogEntry[] = terminalResponse.logs.map((log: any) => ({
-              timestamp: log.timestamp || new Date().toISOString(),
-              level: log.level || 'info',
-              message: log.message || '',
-              source: log.source,
-              details: log.details
-            })).reverse();  // Server stores oldest first, we want newest first
-            setTerminalLogs(logs);
+        void (async () => {
+          try {
+            const terminalResponse = await sendBurstRequest<any>(
+              { type: 'get_terminal_logs' },
+              'terminal_logs',
+            );
+            if (terminalResponse.success && terminalResponse.logs) {
+              const logs: TerminalLogEntry[] = terminalResponse.logs.map((log: any) => ({
+                timestamp: log.timestamp || new Date().toISOString(),
+                level: log.level || 'info',
+                message: log.message || '',
+                source: log.source,
+                details: log.details,
+              })).reverse();
+              setTerminalLogs(logs);
+            }
+          } catch {
+            // Ignore errors loading terminal logs
           }
-        } catch {
-          // Ignore errors loading terminal logs
-        }
-
-        // Load chat message history from database
-        try {
-          const chatResponse = await new Promise<any>((resolve, reject) => {
-            const requestId = `chat_messages_${Date.now()}`;
-            const timeout = setTimeout(() => reject(new Error('Timeout')), 5000);
-
-            const handler = (event: MessageEvent) => {
-              try {
-                const msg = JSON.parse(event.data);
-                if (msg.request_id === requestId) {
-                  clearTimeout(timeout);
-                  ws.removeEventListener('message', handler);
-                  resolve(msg);
-                }
-              } catch {}
-            };
+        })();
 
-            ws.addEventListener('message', handler);
-            // Scope to the currently-open workflow if any. session_id is
-            // re-used as the workflow identifier on the chat side so the
-            // panel only shows messages tied to this workflow. Falls
-            // back to "default" when no workflow is selected (initial
-            // bootstrap before the user opens any workflow).
+        void (async () => {
+          try {
             const workflowId = useAppStore.getState().currentWorkflow?.id || 'default';
-            ws.send(JSON.stringify({ type: 'get_chat_messages', session_id: workflowId, request_id: requestId }));
-          });
-
-          if (chatResponse.success && chatResponse.messages) {
-            const messages: ChatMessage[] = chatResponse.messages.map((msg: any) => ({
-              role: msg.role as 'user' | 'assistant',
-              message: msg.message,
-              timestamp: msg.timestamp
-            }));
-            setChatMessages(messages);
+            const chatResponse = await sendBurstRequest<any>(
+              { type: 'get_chat_messages', session_id: workflowId },
+              'chat_messages',
+            );
+            if (chatResponse.success && chatResponse.messages) {
+              const messages: ChatMessage[] = chatResponse.messages.map((msg: any) => ({
+                role: msg.role as 'user' | 'assistant',
+                message: msg.message,
+                timestamp: msg.timestamp,
+              }));
+              setChatMessages(messages);
+            }
+          } catch {
+            // Ignore errors loading chat messages
           }
-        } catch {
-          // Ignore errors loading chat messages
-        }
+        })();
 
-        // Load console logs from database
-        try {
-          const consoleRequestId = `console_${Date.now()}`;
-          const consoleResponse = await new Promise<any>((resolve, reject) => {
-            const timeout = setTimeout(() => reject(new Error('Timeout')), 5000);
-
-            const handler = (event: MessageEvent) => {
-              try {
-                const msg = JSON.parse(event.data);
-                if (msg.request_id === consoleRequestId) {
-                  clearTimeout(timeout);
-                  ws.removeEventListener('message', handler);
-                  resolve(msg);
-                }
-              } catch {}
-            };
-
-            ws.addEventListener('message', handler);
-            // Scope to the currently-open workflow so the panel only
-            // shows console output from this workflow's runs.
+        void (async () => {
+          try {
             const consoleWorkflowId = useAppStore.getState().currentWorkflow?.id;
-            ws.send(JSON.stringify({
-              type: 'get_console_logs',
-              limit: 100,
-              workflow_id: consoleWorkflowId,
-              request_id: consoleRequestId,
-            }));
-          });
-
-          if (consoleResponse.success && consoleResponse.logs) {
-            const logs: ConsoleLogEntry[] = consoleResponse.logs.map((log: any) => ({
-              node_id: log.node_id,
-              label: log.label,
-              timestamp: log.timestamp,
-              data: log.data,
-              formatted: log.formatted,
-              format: log.format,
-              workflow_id: log.workflow_id,
-              source_node_id: log.source_node_id,
-              source_node_type: log.source_node_type,
-              source_node_label: log.source_node_label,
-            }));
-            setConsoleLogs(logs);
+            const consoleResponse = await sendBurstRequest<any>(
+              { type: 'get_console_logs', limit: 100, workflow_id: consoleWorkflowId },
+              'console',
+            );
+            if (consoleResponse.success && consoleResponse.logs) {
+              const logs: ConsoleLogEntry[] = consoleResponse.logs.map((log: any) => ({
+                node_id: log.node_id,
+                label: log.label,
+                timestamp: log.timestamp,
+                data: log.data,
+                formatted: log.formatted,
+                format: log.format,
+                workflow_id: log.workflow_id,
+                source_node_id: log.source_node_id,
+                source_node_type: log.source_node_type,
+                source_node_label: log.source_node_label,
+              }));
+              setConsoleLogs(logs);
+            }
+          } catch {
+            // Ignore errors loading console logs
           }
-        } catch {
-          // Ignore errors loading console logs
-        }
-
-        // Drain any sends that were queued while the socket was reconnecting.
-        // Must run BEFORE setIsReady(true) so isReady-gated callers don't race
-        // an empty pendingRequestsRef. Mirrors socket.io-client's offline buffer
-        // and Apollo RetryLink semantics.
-        drainPendingSends(ws);
-
-        // Init burst complete — flip `isReady` so queries that gate on
-        // it (catalogue, node specs, node parameters, user settings,
-        // credential panels) fire once against a stable socket instead
-        // of racing the serial init awaits above.
-        setIsReady(true);
+        })();
       };
 
       ws.onmessage = handleMessage;
@@ -1419,9 +1552,10 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
           pendingRequestsRef.current.clear();
         }
 
-        // Pending-send queue handling: only drop on intentional close (code 1000).
-        // Transient closes preserve the queue so the next onopen drain replays them.
-        if (event.code === 1000) {
+        // Pending-send queue handling: only drop on intentional close
+        // (RFC 6455 §7.4.1 Normal Closure, code 1000). Transient closes
+        // preserve the queue so the next onopen drain replays them.
+        if (event.code === WS_CLOSE.NORMAL_CLOSURE) {
           if (pendingSendQueueRef.current.length > 0) {
             for (const queued of pendingSendQueueRef.current) {
               try {
@@ -1441,12 +1575,13 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
           pingIntervalRef.current = null;
         }
 
-        // Reconnect after delay (unless intentional close)
-        if (event.code !== 1000) {
+        // PartySocket performs the reconnect itself when
+        // `event.code !== WS_CLOSE.NORMAL_CLOSURE`, honouring the
+        // `WS_RECONNECT` envelope passed at construction time. Surface
+        // "reconnecting" to the UI for transient closes; intentional
+        // closes (logout / unmount) leave the flag false.
+        if (event.code !== WS_CLOSE.NORMAL_CLOSURE) {
           setReconnecting(true);
-          reconnectTimeoutRef.current = setTimeout(() => {
-            connect();
-          }, 3000);
         }
       };
 
@@ -1456,15 +1591,18 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
 
       wsRef.current = ws;
     } catch (error) {
+      // Construction-time error (e.g. malformed URL). PartySocket has
+      // not installed its retry loop yet, so just log — there is
+      // nothing to reconnect to. The runtime path (network drops after
+      // successful construction) is covered by PartySocket's internal
+      // jittered backoff.
       console.error('[WebSocket] Failed to create connection:', error);
-      setReconnecting(true);
-      reconnectTimeoutRef.current = setTimeout(connect, 3000);
     }
   }, [handleMessage, drainPendingSends]);
 
   // Request current status
   const requestStatus = useCallback(() => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
+    if (wsRef.current?.readyState === ReconnectingWebSocket.OPEN) {
       wsRef.current.send(JSON.stringify({ type: 'get_status' }));
     }
   }, []);
@@ -1524,7 +1662,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   // the currently-open workflow so other workflows' history survives.
   const clearConsoleLogs = useCallback(() => {
     setConsoleLogs([]);
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
+    if (wsRef.current?.readyState === ReconnectingWebSocket.OPEN) {
       const workflowId = useAppStore.getState().currentWorkflow?.id;
       wsRef.current.send(JSON.stringify({
         type: 'clear_console_logs',
@@ -1537,7 +1675,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   const clearTerminalLogs = useCallback(() => {
     setTerminalLogs([]);
     // Also notify server to clear its terminal log history
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
+    if (wsRef.current?.readyState === ReconnectingWebSocket.OPEN) {
       wsRef.current.send(JSON.stringify({ type: 'clear_terminal_logs' }));
     }
   }, []);
@@ -1548,7 +1686,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   // Uses direct WebSocket send to avoid dependency on sendRequest (which is defined later).
   const clearChatMessages = useCallback(() => {
     setChatMessages([]);
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
+    if (wsRef.current?.readyState === ReconnectingWebSocket.OPEN) {
       const workflowId = useAppStore.getState().currentWorkflow?.id || 'default';
       wsRef.current.send(JSON.stringify({
         type: 'clear_chat_messages',
@@ -1665,7 +1803,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
       const effectiveTimeout = (timeoutMs === -1 || !useTimeout) ? -1 : actualTimeout;
 
       // FAST PATH: socket open — send immediately.
-      if (wsRef.current?.readyState === WebSocket.OPEN) {
+      if (wsRef.current?.readyState === ReconnectingWebSocket.OPEN) {
         const requestId = generateRequestId();
         let timeout: NodeJS.Timeout | null = null;
         if (effectiveTimeout > 0) {
@@ -2113,17 +2251,24 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
         provider,
         api_key: apiKey
       });
+      // Backend returns one of:
+      //   { success: true,  valid: true,  models }         — key is good
+      //   { success: true,  valid: false, message }        — clean rejection (401/403/timeout/etc)
+      //   { success: false, error }                        — handler bug (uncaught exception)
+      // Surface the message field first; fall back to error so the toast
+      // shows the actual reason instead of a generic "Validation failed".
       const result = {
-        valid: response.valid || false,
-        message: response.message,
+        valid: response.valid === true,
+        message: response.message ?? response.error,
         models: response.models
       };
 
-      // Update apiKeyStatuses on successful validation
+      // Update apiKeyStatuses on successful validation. "is stored"
+      // lives on catalogue.provider.stored — don't duplicate it here.
       if (result.valid) {
         setApiKeyStatuses(prev => ({
           ...prev,
-          [provider]: { hasKey: true, valid: true, models: result.models }
+          [provider]: { valid: true, models: result.models }
         }));
       }
 
@@ -2151,12 +2296,13 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
         models: response.models,
       };
 
-      // Mirror into apiKeyStatuses so consumers reading from context
-      // stay in sync without an extra round-trip.
+      // Mirror models into apiKeyStatuses so consumers reading from
+      // context stay in sync without an extra round-trip. "is stored"
+      // lives on the catalogue's provider.stored, not here.
       if (result.hasKey) {
         setApiKeyStatuses(prev => ({
           ...prev,
-          [provider]: { hasKey: true, valid: true, models: result.models }
+          [provider]: { valid: true, models: result.models }
         }));
       }
 
@@ -2180,11 +2326,14 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
       });
       const success = response.success !== false;
 
-      // Update apiKeyStatuses on successful save
+      // Update apiKeyStatuses on successful save. The 'valid: true'
+      // here is optimistic — save_api_key doesn't actually validate
+      // upstream. Catalogue refetch (via the credential.api_key.saved
+      // broadcast) is the truthful source for "is stored".
       if (success) {
         setApiKeyStatuses(prev => ({
           ...prev,
-          [provider]: { hasKey: true, valid: true, models }
+          [provider]: { valid: true, models }
         }));
       }
 
@@ -2198,14 +2347,16 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   const deleteApiKeyAsync = useCallback(async (provider: string): Promise<boolean> => {
     try {
       await sendRequest<any>('delete_api_key', { provider });
-
-      // Remove from apiKeyStatuses on successful delete
-      setApiKeyStatuses(prev => {
-        const newStatuses = { ...prev };
-        delete newStatuses[provider];
-        return newStatuses;
-      });
-
+      // Don't optimistically clear apiKeyStatuses[provider] here. The
+      // backend's `api_key_status` broadcast (fired before this reply
+      // lands) already wrote `{valid: false, hasKey: false, message:
+      // 'deleted'}` to every connected client. The catalogue refetch
+      // (debounced 300 ms after `credential_catalogue_updated`) will
+      // flip `provider.stored` to false. A local optimistic clear here
+      // raced with the broadcast and produced a green-flash mid-delete:
+      // broadcast → red, optimistic clear → green (validation undefined
+      // but stored still cached true), catalogue refetch → gray.
+      // Trusting the broadcast pipeline gives a clean red → gray.
       return true;
     } catch (error) {
       console.error('[WebSocket] Failed to delete API key:', error);
@@ -2522,7 +2673,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
     }
 
     // Skip if already connected
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
+    if (wsRef.current?.readyState === ReconnectingWebSocket.OPEN) {
       return;
     }
 
@@ -2553,7 +2704,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
         }
         pendingSendQueueRef.current = [];
       }
-      wsRef.current.close(1000, 'User logged out');
+      wsRef.current.close(WS_CLOSE.NORMAL_CLOSURE, 'User logged out');
       wsRef.current = null;
       setIsConnected(false);
       setIsReady(false);
@@ -2564,7 +2715,6 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   useEffect(() => {
     return () => {
       isMountedRef.current = false;
-      if (reconnectTimeoutRef.current) clearTimeout(reconnectTimeoutRef.current);
       if (pingIntervalRef.current) clearInterval(pingIntervalRef.current);
       // Drain the pending-send queue so any in-flight awaiters fail fast on
       // unmount instead of dangling forever.
@@ -2579,8 +2729,8 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
         }
         pendingSendQueueRef.current = [];
       }
-      if (wsRef.current?.readyState === WebSocket.OPEN) {
-        wsRef.current.close(1000, 'Component unmounted');
+      if (wsRef.current?.readyState === ReconnectingWebSocket.OPEN) {
+        wsRef.current.close(WS_CLOSE.NORMAL_CLOSURE, 'Component unmounted');
       }
     };
   }, []);
@@ -2636,6 +2786,23 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ chi
     // Generic request method
     sendRequest,
 
+    // Generic broadcast subscription
+    addEventListener: (type: string, handler: (data: any) => void) => {
+      let set = eventListenersRef.current.get(type);
+      if (!set) {
+        set = new Set();
+        eventListenersRef.current.set(type, set);
+      }
+      set.add(handler);
+      return () => {
+        const current = eventListenersRef.current.get(type);
+        if (current) {
+          current.delete(handler);
+          if (current.size === 0) eventListenersRef.current.delete(type);
+        }
+      };
+    },
+
     // Node Parameters
     getNodeParameters: getNodeParametersAsync,
     getAllNodeParameters: getAllNodeParametersAsync,