Python: Improve DevUI, add Context Inspector view as new tab under traces (#2742)

* Improve DevUI, add Context Inspector view as new tab under traces

* fix mypy errors

* fix: Handle stale MCP connections in DevUI executor

MCP tools can become stale when HTTP streaming responses end - the underlying
stdio streams close but `is_connected` remains True. This causes subsequent
requests to fail with `ClosedResourceError`.

Add `_ensure_mcp_connections()` to detect and reconnect stale MCP tools before
agent execution. This is a workaround for an upstream Agent Framework issue
where connection state isn't properly tracked.

Fixes MCP tools failing on second HTTP request in DevUI.

fixes  #1476 #1515 #2865

* fix #1572 report import dependency errors more clearly

* Ensure there is streaming toggle where users can select streaming vs non streaming mode in devui . Fixes .NET: [Python] DevUI tool call rendering in non-streaming mode?

* remove unused dead code

* improve ux - workflows with agents show a chat component in execution timelien, also ensure magentic final output shows correctly

* update ui build

* update devui to use instrumentation instead of tracing, other instrumentation and type/instance check fixes

python/packages/devui/frontend/src/stores/devuiStore.ts

@@ -60,6 +60,13 @@ interface DevUIState {
   debugEvents: ExtendedResponseStreamEvent[];
   isResizing: boolean;
   showToolCalls: boolean; // UI setting to show/hide tool calls in chat
+  streamingEnabled: boolean; // Whether to use streaming mode for responses
+
+  // Debug Panel Preferences (persisted)
+  debugPanelTab: "events" | "traces" | "tools"; // Main debug panel tab
+  debugTraceSubTab: "spans" | "context"; // OTel Spans vs Context Inspector
+  contextInspectorViewMode: "tokens" | "composition";
+  contextInspectorCumulative: boolean;
 
   // Modal Slice
   showAboutModal: boolean;
@@ -82,7 +89,7 @@ interface DevUIState {
   uiMode: "developer" | "user";
   runtime: "python" | "dotnet";
   serverCapabilities: {
-    tracing: boolean;
+    instrumentation: boolean;
     openai_proxy: boolean;
     deployment: boolean;
   };
@@ -146,6 +153,13 @@ interface DevUIActions {
   clearDebugEvents: () => void;
   setIsResizing: (resizing: boolean) => void;
   setShowToolCalls: (show: boolean) => void;
+  setStreamingEnabled: (enabled: boolean) => void;
+
+  // Debug Panel Preference Actions
+  setDebugPanelTab: (tab: "events" | "traces" | "tools") => void;
+  setDebugTraceSubTab: (tab: "spans" | "context") => void;
+  setContextInspectorViewMode: (mode: "tokens" | "composition") => void;
+  setContextInspectorCumulative: (cumulative: boolean) => void;
 
   // Modal Actions
   setShowAboutModal: (show: boolean) => void;
@@ -166,7 +180,7 @@ interface DevUIActions {
   toggleOAIMode: () => void;
 
   // Server Meta Actions
-  setServerMeta: (meta: { uiMode: "developer" | "user"; runtime: "python" | "dotnet"; capabilities: { tracing: boolean; openai_proxy: boolean; deployment: boolean }; authRequired: boolean; version?: string }) => void;
+  setServerMeta: (meta: { uiMode: "developer" | "user"; runtime: "python" | "dotnet"; capabilities: { instrumentation: boolean; openai_proxy: boolean; deployment: boolean }; authRequired: boolean; version?: string }) => void;
 
   // Deployment Actions
   startDeployment: () => void;
@@ -228,6 +242,13 @@ export const useDevUIStore = create<DevUIStore>()(
         debugEvents: [],
         isResizing: false,
         showToolCalls: true, // Default to showing tool calls
+        streamingEnabled: true, // Default to streaming mode (recommended)
+
+        // Debug Panel Preferences (persisted)
+        debugPanelTab: "events", // Default to events tab
+        debugTraceSubTab: "spans", // Default to spans sub-tab
+        contextInspectorViewMode: "tokens", // Default to tokens view
+        contextInspectorCumulative: false, // Default to per-message view
 
         // Modal State
         showAboutModal: false,
@@ -248,7 +269,7 @@ export const useDevUIStore = create<DevUIStore>()(
         uiMode: "developer", // Default to developer mode
         runtime: "python", // Default to Python runtime
         serverCapabilities: {
-          tracing: false,
+          instrumentation: false,
           openai_proxy: false,
           deployment: false,
         },
@@ -371,14 +392,16 @@ export const useDevUIStore = create<DevUIStore>()(
         setDebugPanelMinimized: (minimized) => set({ debugPanelMinimized: minimized }),
         setDebugPanelWidth: (width) => set({ debugPanelWidth: width }),
         setShowToolCalls: (show) => set({ showToolCalls: show }),
+        setStreamingEnabled: (enabled) => set({ streamingEnabled: enabled }),
         addDebugEvent: (event) =>
           set((state) => {
             // Generate unique timestamp for each event
             // Use current time + small increment to ensure uniqueness even for rapid events
             const baseTimestamp = Math.floor(Date.now() / 1000);
-            const lastTimestamp = state.debugEvents.length > 0
-              ? (state.debugEvents[state.debugEvents.length - 1] as any)._uiTimestamp || 0
-              : 0;
+            const lastEvent = state.debugEvents.length > 0
+              ? state.debugEvents[state.debugEvents.length - 1] as { _uiTimestamp?: number }
+              : null;
+            const lastTimestamp = lastEvent?._uiTimestamp ?? 0;
             // Ensure new timestamp is always greater than the last one
             const uniqueTimestamp = Math.max(baseTimestamp, lastTimestamp + 1);
 
@@ -399,6 +422,12 @@ export const useDevUIStore = create<DevUIStore>()(
         clearDebugEvents: () => set({ debugEvents: [] }),
         setIsResizing: (resizing) => set({ isResizing: resizing }),
 
+        // Debug Panel Preference Actions
+        setDebugPanelTab: (tab) => set({ debugPanelTab: tab }),
+        setDebugTraceSubTab: (tab) => set({ debugTraceSubTab: tab }),
+        setContextInspectorViewMode: (mode) => set({ contextInspectorViewMode: mode }),
+        setContextInspectorCumulative: (cumulative) => set({ contextInspectorCumulative: cumulative }),
+
         // ========================================
         // Modal Actions
         // ========================================
@@ -605,8 +634,14 @@ export const useDevUIStore = create<DevUIStore>()(
           debugPanelMinimized: state.debugPanelMinimized,
           debugPanelWidth: state.debugPanelWidth,
           showToolCalls: state.showToolCalls, // Persist tool calls visibility preference
+          streamingEnabled: state.streamingEnabled, // Persist streaming mode preference
           oaiMode: state.oaiMode, // Persist OpenAI proxy mode settings
           azureDeploymentEnabled: state.azureDeploymentEnabled, // Persist Azure deployment preference
+          // Debug panel tab preferences
+          debugPanelTab: state.debugPanelTab,
+          debugTraceSubTab: state.debugTraceSubTab,
+          contextInspectorViewMode: state.contextInspectorViewMode,
+          contextInspectorCumulative: state.contextInspectorCumulative,
         }),
       }
     ),