Python: .Net: Dotnet devui compatibility fixes (#2026)

* DevUI: Add OpenAI Responses API proxy support with enhanced UI features

This commit adds support for proxying requests to OpenAI's Responses API,
allowing DevUI to route conversations to OpenAI models when configured to enable testing.

Backend changes:
- Add OpenAI proxy executor with conversation routing logic
- Enhance event mapper to support OpenAI Responses API format
- Extend server endpoints to handle OpenAI proxy mode
- Update models with OpenAI-specific response types
- Remove emojis from logging and CLI output for cleaner text

Frontend changes:
- Add settings modal with OpenAI proxy configuration UI
- Enhance agent and workflow views with improved state management
- Add new UI components (separator, switch) for settings
- Update debug panel with better event filtering
- Improve message renderers for OpenAI content types
- Update types and API client for OpenAI integration

* update ui, settings modal and workflow input form, add register cleanup hooks.

* add workflow HIL support, user mode, other fixes

* feat(devui): add human-in-the-loop (HIL) support with dynamic response schemas

Implement  HIL workflow support allowing workflows to pause for user input
with dynamically generated JSON schemas based on response handler type hints.

Key Features:
- Automatic response schema extraction from @response_handler decorators
- Dynamic form generation in UI based on Pydantic/dataclass response types
- Checkpoint-based conversation storage for HIL requests/responses
- Resume workflow execution after user provides HIL response

Backend Changes:
- Add extract_response_type_from_executor() to introspect response handlers
- Enrich RequestInfoEvent with response_schema via _enrich_request_info_event_with_response_schema()
- Map RequestInfoEvent to response.input.requested OpenAI event format
- Store HIL responses in conversation history and restore checkpoints

Frontend Changes:
- Add HILInputModal component with SchemaFormRenderer for dynamic forms
- Support Pydantic BaseModel and dataclass response types
- Render enum fields as dropdowns, strings as text/textarea, numbers, booleans, arrays, objects
- Display original request context alongside response form

Testing:
- Add  tests for checkpoint storage (test_checkpoints.py)
- Add schema generation tests for all input types (test_schema_generation.py)
- Validate end-to-end HIL flow with spam workflow sample

This enables workflows to seamlessly pause execution and request structured user input
with type-safe, validated forms generated automatically from response type annotations.

* improve HIL support, improve workflow execution view

* ui updates

* ui updates

* improve HIL for workflows, add auth and view modes

* update workflow

* security improvements , ui fixes

* fix mypy error

* update loading spinner in ui

* DevUI: Serialize workflow input as string to maintain conformance with OpenAI Responses format

* Phase 1: Add /meta endpoint and fix workflow event naming for .NET DevUI compatibility

* additional fixes for .NET DevUI workflow visualization item ID tracking

**Problem:**
.NET DevUI was generating different item IDs for ExecutorInvokedEvent and
ExecutorCompletedEvent, causing only the first executor to highlight in the
workflow graph. Long executor names and error messages also broke UI layout.

**Changes:**
- Add ExecutorActionItemResource to match Python DevUI implementation
- Track item IDs per executor using dictionary in AgentRunResponseUpdateExtensions
- Reuse same item ID across invoked/completed/failed events for proper pairing
- Add truncateText() utility to workflow-utils.ts
- Truncate executor names to 35 chars in execution timeline
- Truncate error messages to 150 chars in workflow graph nodes

** Details:**
- ExecutorActionItemResource registered with JSON source generation context
- Dictionary cleaned up after executor completion/failure to prevent memory leaks
- Frontend item tracking by unique item.id supports multiple executor runs
- All changes follow existing codebase patterns and conventions

Tested with review-workflow showing correct executor highlighting and state
transitions for sequential and concurrent executors.

* format fixes, remove cors tests

* remove unecessary attributes

---------

Co-authored-by: Mark Wallace <127216156+markwallace-microsoft@users.noreply.github.com>
Co-authored-by: Reuben Bond <reuben.bond@gmail.com>

python/packages/devui/agent_framework_devui/_server.py

@@ -397,6 +397,7 @@ class DevServer:
                 ui_mode=self.mode,  # type: ignore[arg-type]
                 version=__version__,
                 framework="agent_framework",
+                runtime="python",  # Python DevUI backend
                 capabilities={
                     "tracing": os.getenv("ENABLE_OTEL") == "true",
                     "openai_proxy": openai_executor.is_configured,

python/packages/devui/agent_framework_devui/models/_openai_custom.py

@@ -386,6 +386,9 @@ class MetaResponse(BaseModel):
     framework: str = "agent_framework"
     """Backend framework identifier."""
 
+    runtime: Literal["python", "dotnet"] = "python"
+    """Backend runtime/language - 'python' or 'dotnet' for deployment guides and feature availability."""
+
     capabilities: dict[str, bool] = {}
     """Server capabilities (e.g., tracing, openai_proxy)."""
 

python/packages/devui/frontend/src/App.tsx

@@ -104,6 +104,7 @@ export default function App() {
 
         useDevUIStore.getState().setServerMeta({
           uiMode: meta.ui_mode,
+          runtime: meta.runtime,
           capabilities: meta.capabilities,
           authRequired: meta.auth_required,
         });

python/packages/devui/frontend/src/components/features/workflow/execution-timeline.tsx

@@ -19,6 +19,7 @@ import {
 } from "lucide-react";
 import type { ExtendedResponseStreamEvent } from "@/types";
 import type { ExecutorState } from "./executor-node";
+import { truncateText } from "@/utils/workflow-utils";
 
 interface ExecutorRun {
   executorId: string;
@@ -112,24 +113,28 @@ function ExecutorRunItem({
           if (canExpand) onToggle();
         }}
       >
-        <div className="flex items-center gap-2 mb-1">
-          {canExpand && (
-            <div className="text-muted-foreground">
-              {isExpanded ? (
-                <ChevronDown className="w-3 h-3" />
-              ) : (
-                <ChevronRight className="w-3 h-3" />
-              )}
-            </div>
-          )}
-          {getStateIcon(run.state)}
-          <span className="font-medium text-sm truncate flex-1">
+        <div className="grid grid-cols-[auto_auto_1fr_auto] items-center gap-2 mb-1">
+          <div className="w-3 text-muted-foreground">
+            {canExpand && (
+              <>
+                {isExpanded ? (
+                  <ChevronDown className="w-3 h-3" />
+                ) : (
+                  <ChevronRight className="w-3 h-3" />
+                )}
+              </>
+            )}
+          </div>
+          <div>{getStateIcon(run.state)}</div>
+          <span className="font-medium text-sm truncate overflow-hidden">
             {run.executorName}
           </span>
-          {run.runNumber > 1 && (
-            <Badge variant="outline" className="text-xs">
+          {run.runNumber > 1 ? (
+            <Badge variant="outline" className="text-xs whitespace-nowrap">
               Run #{run.runNumber}
             </Badge>
+          ) : (
+            <div></div>
           )}
         </div>
         <div className="flex items-center gap-2 text-xs text-muted-foreground ml-5">
@@ -228,7 +233,7 @@ export function ExecutionTimeline({
 
           runs.push({
             executorId,
-            executorName: executorId,
+            executorName: truncateText(executorId, 35),
             itemId,
             state: "running",
             output: itemOutputs[itemId] || "",
@@ -244,7 +249,7 @@ export function ExecutionTimeline({
 
           runs.push({
             executorId,
-            executorName: executorId,
+            executorName: truncateText(executorId, 35),
             itemId,
             state: "running",
             output: itemOutputs[itemId] || "",
@@ -310,7 +315,7 @@ export function ExecutionTimeline({
 
         runs.push({
           executorId,
-          executorName: executorId,
+          executorName: truncateText(executorId, 35),
           itemId: syntheticItemId,
           state: "running",
           output: itemOutputs[syntheticItemId] || "",

python/packages/devui/frontend/src/components/features/workflow/executor-node.tsx

@@ -6,6 +6,7 @@ import {
   Loader2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { truncateText } from "@/utils/workflow-utils";
 
 export type ExecutorState =
   | "pending"
@@ -82,11 +83,13 @@ export const ExecutorNode = memo(({ data, selected }: NodeProps) => {
     const details = [];
 
     if (nodeData.error && typeof nodeData.error === "string") {
+      // Truncate error to first 150 characters for node display
+      const truncatedError = truncateText(nodeData.error, 150);
       details.push(
         <div key="error" className="mb-2">
           <div className="text-xs font-medium text-red-600 dark:text-red-400 mb-1">Error:</div>
-          <div className="text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/20 p-2 rounded border border-red-200 dark:border-red-800">
-            {nodeData.error}
+          <div className="text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/20 p-2 rounded border border-red-200 dark:border-red-800 break-words">
+            {truncatedError}
           </div>
         </div>
       );

python/packages/devui/frontend/src/components/features/workflow/workflow-session-manager.tsx

@@ -28,6 +28,7 @@ export const WorkflowSessionManager: React.FC<WorkflowSessionManagerProps> = ({
   const addSession = useDevUIStore((state) => state.addSession);
   const removeSession = useDevUIStore((state) => state.removeSession);
   const addToast = useDevUIStore((state) => state.addToast);
+  const runtime = useDevUIStore((state) => state.runtime);
 
   const [creatingSession, setCreatingSession] = useState(false);
   const [deletingSession, setDeletingSession] = useState<string | null>(null);
@@ -63,14 +64,19 @@ export const WorkflowSessionManager: React.FC<WorkflowSessionManagerProps> = ({
       }
     } catch (error) {
       console.error("Failed to load workflow conversations:", error);
-      addToast({
-        message: "Failed to load workflow conversations",
-        type: "error",
-      });
+
+      // Silently handle for .NET backend (doesn't support conversations yet)
+      // Only show error for Python backend where this is unexpected
+      if (runtime !== "dotnet") {
+        addToast({
+          message: "Failed to load workflow conversations",
+          type: "error",
+        });
+      }
     } finally {
       setLoadingSessions(false);
     }
-  }, [workflowId, currentSession, setLoadingSessions, setAvailableSessions, setCurrentSession, onSessionChange, addToast]);
+  }, [workflowId, currentSession, runtime, setLoadingSessions, setAvailableSessions, setCurrentSession, onSessionChange, addToast]);
 
   // Load sessions on mount
   useEffect(() => {

python/packages/devui/frontend/src/components/features/workflow/workflow-view.tsx

@@ -433,6 +433,7 @@ export function WorkflowView({
   const addSession = useDevUIStore((state) => state.addSession);
   const removeSession = useDevUIStore((state) => state.removeSession);
   const addToast = useDevUIStore((state) => state.addToast);
+  const runtime = useDevUIStore((state) => state.runtime);
 
   // Selected checkpoint for resume (local state)
   const [selectedCheckpointId, setSelectedCheckpointId] = useState<
@@ -595,14 +596,23 @@ export function WorkflowView({
         }
       } catch (error) {
         console.error("Failed to load sessions:", error);
-        addToast({ message: "Failed to load sessions", type: "error" });
+
+        // Silently handle for .NET backend (doesn't support conversations yet)
+        // Only show error for Python backend where this is unexpected
+        if (runtime !== "dotnet") {
+          addToast({
+            message: "Failed to load sessions",
+            type: "error"
+          });
+        }
       } finally {
         setLoadingSessions(false);
       }
     };
 
     loadSessions();
-  }, [workflowInfo?.id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workflowInfo?.id, runtime]);
 
   // Handle session change - just clear checkpoint selection
   const handleSessionChange = useCallback(

python/packages/devui/frontend/src/components/layout/settings-modal.tsx

@@ -41,8 +41,8 @@ export function SettingsModal({
 }: SettingsModalProps) {
   const [activeTab, setActiveTab] = useState<Tab>("general");
 
-  // OpenAI proxy mode, Azure deployment, and auth status from store
-  const { oaiMode, setOAIMode, azureDeploymentEnabled, setAzureDeploymentEnabled, authRequired } = useDevUIStore();
+  // OpenAI proxy mode, Azure deployment, auth status, and server capabilities from store
+  const { oaiMode, setOAIMode, azureDeploymentEnabled, setAzureDeploymentEnabled, authRequired, serverCapabilities } = useDevUIStore();
 
   // Get current backend URL from localStorage or default
   const defaultUrl = import.meta.env.VITE_API_BASE_URL !== undefined ? import.meta.env.VITE_API_BASE_URL : "";
@@ -128,19 +128,21 @@ export function SettingsModal({
               <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
             )}
           </button>
-          <button
-            onClick={() => setActiveTab("proxy")}
-            className={`px-4 py-2 text-sm font-medium transition-colors relative ${
-              activeTab === "proxy"
-                ? "text-foreground"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            OpenAI Proxy
-            {activeTab === "proxy" && (
-              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
-            )}
-          </button>
+          {serverCapabilities.openai_proxy && (
+            <button
+              onClick={() => setActiveTab("proxy")}
+              className={`px-4 py-2 text-sm font-medium transition-colors relative ${
+                activeTab === "proxy"
+                  ? "text-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              OpenAI Proxy
+              {activeTab === "proxy" && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
+              )}
+            </button>
+          )}
           <button
             onClick={() => setActiveTab("about")}
             className={`px-4 py-2 text-sm font-medium transition-colors relative ${
@@ -281,7 +283,8 @@ export function SettingsModal({
                 </div>
               )}
 
-              {/* Deployment Setting */}
+              {/* Deployment Setting - Only show if backend supports deployment */}
+              {serverCapabilities.deployment && (
               <div className="space-y-3 border-t pt-6">
                 <div className="flex items-center justify-between">
                   <div className="space-y-0.5">
@@ -331,10 +334,11 @@ export function SettingsModal({
                   </div>
                 </details>
               </div>
+              )}
             </div>
           )}
 
-          {activeTab === "proxy" && (
+          {activeTab === "proxy" && serverCapabilities.openai_proxy && (
             <div className="space-y-6 pt-4">
               <div className="space-y-4">
                 <div className="flex items-center justify-between">

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

@@ -79,9 +79,11 @@ interface DevUIState {
 
   // Server Meta Slice
   uiMode: "developer" | "user";
+  runtime: "python" | "dotnet";
   serverCapabilities: {
     tracing: boolean;
     openai_proxy: boolean;
+    deployment: boolean;
   };
   authRequired: boolean;
 
@@ -161,7 +163,7 @@ interface DevUIActions {
   toggleOAIMode: () => void;
 
   // Server Meta Actions
-  setServerMeta: (meta: { uiMode: "developer" | "user"; capabilities: { tracing: boolean; openai_proxy: boolean }; authRequired: boolean }) => void;
+  setServerMeta: (meta: { uiMode: "developer" | "user"; runtime: "python" | "dotnet"; capabilities: { tracing: boolean; openai_proxy: boolean; deployment: boolean }; authRequired: boolean }) => void;
 
   // Deployment Actions
   startDeployment: () => void;
@@ -240,9 +242,11 @@ export const useDevUIStore = create<DevUIStore>()(
 
         // Server Meta State
         uiMode: "developer", // Default to developer mode
+        runtime: "python", // Default to Python runtime
         serverCapabilities: {
           tracing: false,
           openai_proxy: false,
+          deployment: false,
         },
         authRequired: false,
 
@@ -505,6 +509,7 @@ export const useDevUIStore = create<DevUIStore>()(
         setServerMeta: (meta) =>
           set({
             uiMode: meta.uiMode,
+            runtime: meta.runtime,
             serverCapabilities: meta.capabilities,
             authRequired: meta.authRequired,
           }),

python/packages/devui/frontend/src/types/index.ts

@@ -157,9 +157,11 @@ export interface MetaResponse {
   ui_mode: "developer" | "user";
   version: string;
   framework: string;
+  runtime: "python" | "dotnet";
   capabilities: {
     tracing: boolean;
     openai_proxy: boolean;
+    deployment: boolean;
   };
   auth_required: boolean;
 }

python/packages/devui/frontend/src/utils/workflow-utils.ts

@@ -11,6 +11,23 @@ import type {
 import type { Workflow } from "@/types/workflow";
 import { getTypedWorkflow } from "@/types/workflow";
 
+/**
+ * Truncates text that exceeds the maximum length and appends ellipsis
+ * @param text - The text to truncate
+ * @param maxLength - Maximum length before truncation (default: 50)
+ * @param ellipsis - String to append when truncated (default: '...')
+ * @returns Truncated text with ellipsis if it exceeds maxLength, otherwise original text
+ *
+ * @example
+ * truncateText('Hello World', 5) // 'Hello...'
+ * truncateText('Short', 10) // 'Short'
+ * truncateText('workflow_assistant_43ca50a006aa425e96e8fcf54206a7e3', 35) // 'workflow_assistant_43ca50a006aa4...'
+ */
+export function truncateText(text: string, maxLength: number = 50, ellipsis: string = '...'): string {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + ellipsis;
+}
+
 export interface WorkflowDumpExecutor {
   id: string;
   type: string;