feat: Enhance Markdown output handling in agent workflow and update UI components

Signed-off-by: Andre Bossard <anbossar@microsoft.com>

Author: abossard

backend/agent_workbench/service.py

@@ -52,6 +52,18 @@ def _build_react_agent(llm: Any, tools: list[Any], system_prompt: str) -> Any:
     return create_react_agent(llm, tools, prompt=system_prompt)
 
 
+def _append_markdown_output_instruction(system_prompt: str) -> str:
+    instruction = (
+        "Format your final answer as GitHub-flavored Markdown. "
+        "Use headings, bullet lists, and tables when helpful. "
+        "Do not wrap the entire response in a code block."
+    )
+    base_prompt = (system_prompt or "").strip()
+    if not base_prompt:
+        return instruction
+    return f"{base_prompt}\n\n{instruction}"
+
+
 # ============================================================================
 # WORKBENCH SERVICE
 # ============================================================================
@@ -366,7 +378,8 @@ async def run_agent(
         # -- Execute --
         try:
             tools = self._registry.resolve(validated_tool_names)
-            react = _build_react_agent(self.llm, tools, agent_def.system_prompt)
+            runtime_system_prompt = _append_markdown_output_instruction(agent_def.system_prompt)
+            react = _build_react_agent(self.llm, tools, runtime_system_prompt)
 
             result = await react.ainvoke(
                 {"messages": [("user", user_message)]},

backend/tests/test_workbench_integration_e2e.py

@@ -56,6 +56,8 @@ async def ainvoke(self, _payload: dict, config: dict | None = None) -> dict:
 
 
 def _fake_build_react_agent(_llm: object, tools: list[object], _prompt: str) -> _FakeReactAgent:
+    if "GitHub-flavored Markdown" not in _prompt:
+        raise AssertionError("Expected markdown output instruction in runtime system prompt")
     return _FakeReactAgent(tools)
 
 

frontend/src/features/workbench/WorkbenchPage.jsx

@@ -13,6 +13,8 @@ import {
   tokens,
 } from '@fluentui/react-components'
 import { useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import {
   createWorkbenchAgent,
   deleteWorkbenchAgent,
@@ -82,6 +84,48 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
     color: tokens.colorNeutralForeground1,
   },
+  runOutputMarkdown: {
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    borderRadius: tokens.borderRadiusMedium,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    backgroundColor: tokens.colorNeutralBackground1,
+    maxHeight: '320px',
+    overflowY: 'auto',
+    '& h1, & h2, & h3': {
+      margin: `${tokens.spacingVerticalXS} 0`,
+      fontWeight: tokens.fontWeightSemibold,
+    },
+    '& ul, & ol': {
+      margin: `${tokens.spacingVerticalXS} 0`,
+      paddingLeft: tokens.spacingHorizontalL,
+    },
+    '& table': {
+      width: '100%',
+      borderCollapse: 'collapse',
+      marginTop: tokens.spacingVerticalXS,
+    },
+    '& th, & td': {
+      border: `1px solid ${tokens.colorNeutralStroke1}`,
+      padding: tokens.spacingHorizontalXS,
+      textAlign: 'left',
+    },
+    '& pre': {
+      backgroundColor: tokens.colorNeutralBackground3,
+      padding: tokens.spacingHorizontalM,
+      borderRadius: tokens.borderRadiusSmall,
+      overflowX: 'auto',
+    },
+    '& code': {
+      fontFamily: 'monospace',
+      backgroundColor: tokens.colorNeutralBackground3,
+      padding: '0 4px',
+      borderRadius: tokens.borderRadiusSmall,
+    },
+    '& a': {
+      color: tokens.colorBrandForegroundLink,
+      textDecoration: 'underline',
+    },
+  },
 })
 
 export default function WorkbenchPage() {
@@ -543,14 +587,12 @@ export default function WorkbenchPage() {
 
           {runError && <Text data-testid="workbench-run-error">{runError}</Text>}
           {runOutput && (
-            <Field label="Run output">
-              <Textarea
-                data-testid="workbench-run-output"
-                value={runOutput}
-                readOnly
-                resize="vertical"
-                rows={6}
-              />
+            <Field label="Run output (Markdown)">
+              <div data-testid="workbench-run-output" className={styles.runOutputMarkdown}>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {runOutput}
+                </ReactMarkdown>
+              </div>
             </Field>
           )}
         </div>

tests/e2e/workbench.spec.js

@@ -61,7 +61,7 @@ test.describe("Agent Fabric UI", () => {
           agent_id: "agent-e2e-1",
           input_prompt: "Summarize ticket trends",
           status: "completed",
-          output: "Ticket trend summary: high priority incidents are concentrated in Network services.",
+          output: "# Ticket trend summary\n\n- High priority incidents are concentrated in **Network services**.",
           agent_snapshot: { tool_names: ["csv_ticket_stats"] },
           tools_used: ["csv_ticket_stats"],
           error: null,
@@ -99,6 +99,9 @@ test.describe("Agent Fabric UI", () => {
       "Ticket trend summary",
       { timeout: 10000 }
     );
+    await expect(
+      page.locator('[data-testid="workbench-run-output"] h1')
+    ).toHaveText("Ticket trend summary");
   });
 
   test("requires and forwards configured run input", async ({ page }) => {