Implement runtime configuration debugging in DebugDrawer by adding a new function to format session metadata and WebSocket configuration. Update the display logic to enhance clarity and user experience, including renaming UI elements for better context.

web/pages/Assistants.tsx

@@ -2897,6 +2897,27 @@ export const DebugDrawer: React.FC<{
     return sanitized;
   };
 
+  const formatRuntimeConfigDebugView = (args: {
+    submittedSessionStartMetadata?: Record<string, any> | null;
+    wsResolvedConfig?: Record<string, any> | null;
+  }): string => {
+    const hasWsResolved = Boolean(args.wsResolvedConfig && Object.keys(args.wsResolvedConfig).length > 0);
+    const payload: Record<string, any> = {
+      protocol: 'ws_v1',
+      wsConfigResolvedEvent: hasWsResolved ? 'received' : 'not_emitted',
+      note: hasWsResolved
+        ? 'Optional ws config.resolved event received.'
+        : 'ws config.resolved is optional and disabled by default. Showing local session.start metadata preview.',
+    };
+    if (args.submittedSessionStartMetadata) {
+      payload.submittedSessionStartMetadata = args.submittedSessionStartMetadata;
+    }
+    if (hasWsResolved) {
+      payload.wsResolvedConfig = args.wsResolvedConfig;
+    }
+    return JSON.stringify(payload, null, 2);
+  };
+
   const buildDynamicVariablesPayload = (): { variables: Record<string, string>; error?: string } => {
     const variables: Record<string, string> = {};
     const nonEmptyRows = dynamicVariables
@@ -3018,13 +3039,9 @@ export const DebugDrawer: React.FC<{
     }
     submittedMetadataRef.current = mergedMetadata;
     setResolvedConfigView(
-      JSON.stringify(
-        {
-          submittedSessionStartMetadata: mergedMetadata,
-        },
-        null,
-        2
-      )
+      formatRuntimeConfigDebugView({
+        submittedSessionStartMetadata: mergedMetadata,
+      })
     );
     return mergedMetadata;
   };
@@ -3440,14 +3457,10 @@ export const DebugDrawer: React.FC<{
           const resolved = payload?.config || payload?.data?.config;
           if (resolved) {
             setResolvedConfigView(
-              JSON.stringify(
-                {
-                  submittedSessionStartMetadata: submittedMetadataRef.current,
-                  engineResolvedConfig: resolved,
-                },
-                null,
-                2
-              )
+              formatRuntimeConfigDebugView({
+                submittedSessionStartMetadata: submittedMetadataRef.current,
+                wsResolvedConfig: resolved,
+              })
             );
           }
           return;
@@ -3718,7 +3731,11 @@ export const DebugDrawer: React.FC<{
 
   useEffect(() => {
     if (!isOpen) return;
-    setResolvedConfigView('Connect to load submitted session.start metadata...');
+    setResolvedConfigView(
+      formatRuntimeConfigDebugView({
+        submittedSessionStartMetadata: submittedMetadataRef.current,
+      })
+    );
   }, [isOpen, assistant, voices, llmModels, asrModels, tools]);
 
   const renderLocalVideo = (isSmall: boolean) => (
@@ -3908,12 +3925,12 @@ export const DebugDrawer: React.FC<{
             className="w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground flex items-center justify-between"
             onClick={() => setResolvedConfigOpen((v) => !v)}
           >
-            <span>Resolved Runtime Config</span>
+            <span>Session Config Debug</span>
             <ChevronDown className={`h-3.5 w-3.5 transition-transform ${resolvedConfigOpen ? 'rotate-180' : ''}`} />
           </button>
           {resolvedConfigOpen && (
             <pre className="px-3 pb-3 text-[11px] leading-5 text-cyan-100/90 whitespace-pre-wrap break-all max-h-64 overflow-auto">
-              {resolvedConfigView || 'Connect to load resolved config...'}
+              {resolvedConfigView || 'Preparing session.start metadata preview...'}
             </pre>
           )}
         </div>