Add widget E2E tests + strict tools + Agent Chat JSON mode

New Playwright tests (23 total, +3):
- 'renders bar-chart and pie-chart from x-ui annotations' — injects
  mock agent with output_schema containing x-ui widgets, verifies
  SVG rendering for pie/bar charts, stat-card with label, badges
- 'renders raw JSON for object data' — verifies auto-detection:
  objects render as formatted JSON in pre blocks
- 'falls back gracefully for non-JSON output' — verifies plain
  markdown string wraps as {message: text} and renders correctly

Agent Chat (agents.py) fixes:
- Added JSON output mode (response_format: json_object)
- Added strict=True tool binding for compatibility
- Matches the same pattern as agent_builder

Strict tool binding (react_runner.py):
- build_react_agent pre-binds tools with strict=True
- Required for OpenAI JSON mode (response_format: json_object)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: abossard

backend/agent_builder/engine/react_runner.py

@@ -33,14 +33,15 @@ def build_llm(
     temperature: float = 0.0,
     max_tokens: int = 0,
 ) -> Any:
-    """Construct a ChatOpenAI instance with configurable parameters."""
+    """Construct a ChatOpenAI instance with JSON output mode."""
     from langchain_openai import ChatOpenAI
 
     kwargs: dict[str, Any] = {
         "model": model,
         "api_key": api_key,
         "base_url": base_url or None,
         "temperature": temperature,
+        "model_kwargs": {"response_format": {"type": "json_object"}},
     }
     if max_tokens > 0:
         kwargs["max_tokens"] = max_tokens
@@ -53,11 +54,18 @@ def build_react_agent(
     system_prompt: str,
     response_format: Any = None,
 ) -> Any:
-    """Construct a LangGraph ReAct agent, optionally with structured output."""
+    """Construct a LangGraph ReAct agent with strict tool schemas.
+
+    Pre-binds tools with strict=True so they're compatible with OpenAI's
+    JSON output mode (response_format: json_object).
+    """
     from langgraph.prebuilt import create_react_agent
 
+    # Pre-bind tools with strict=True for OpenAI JSON mode compatibility
+    model_with_tools = llm.bind_tools(tools, strict=True) if tools else llm
+
     kwargs: dict[str, Any] = {
-        "model": llm,
+        "model": model_with_tools,
         "tools": tools,
         "prompt": system_prompt,
     }

backend/agents.py

@@ -200,18 +200,21 @@ def __init__(self):
                 "Please set OPENAI_API_KEY environment variable."
             )
 
-        # Initialize ChatOpenAI
+        # Initialize ChatOpenAI with JSON output mode
         self.llm = ChatOpenAI(
             model=OPENAI_MODEL,
             api_key=OPENAI_API_KEY,
             base_url=OPENAI_BASE_URL or None,
             temperature=0.0,
+            model_kwargs={"response_format": {"type": "json_object"}},
         )
 
         # CSV tools only
         self.tools = self._build_csv_tools()
         self._system_prompt = self._build_system_prompt()
-        self._react_agent = create_react_agent(self.llm, self.tools)
+        # Pre-bind tools with strict=True for JSON mode compatibility
+        model_with_tools = self.llm.bind_tools(self.tools, strict=True) if self.tools else self.llm
+        self._react_agent = create_react_agent(model_with_tools, self.tools)
 
     def _build_system_prompt(self) -> str:
         """Build a concise system prompt optimized for low-latency tool usage."""

tests/e2e/workbench.spec.js

@@ -457,4 +457,195 @@ test.describe("SchemaRenderer widgets", () => {
     // Clean up
     await createdRow.getByRole("button", { name: "Delete" }).click();
   });
+
+  test("renders bar-chart and pie-chart from x-ui annotations", async ({ page }) => {
+    const agentName = `e2e-charts-${Date.now()}`;
+    const mockAgentId = `agent-charts-${Date.now()}`;
+    const outputSchema = {
+      type: "object",
+      title: "ChartOutput",
+      properties: {
+        message: { type: "string", "x-ui": { widget: "markdown" } },
+        status_distribution: {
+          type: "object",
+          description: "Tickets per status",
+          "x-ui": { widget: "pie-chart" },
+        },
+        tickets_by_city: {
+          type: "array",
+          items: { type: "object", properties: { city: { type: "string" }, count: { type: "integer" } } },
+          "x-ui": { widget: "bar-chart", indexBy: "city", keys: ["count"] },
+        },
+        total: { type: "integer", "x-ui": { widget: "stat-card", label: "Total Tickets" } },
+        ticket_ids: { type: "array", items: { type: "string" }, "x-ui": { widget: "badge-list" } },
+      },
+    };
+
+    await page.route("**/api/workbench/agents/*/runs", async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          id: "run-charts-1",
+          agent_id: mockAgentId,
+          input_prompt: "show charts",
+          status: "completed",
+          output: JSON.stringify({
+            message: "## Dashboard\n\nTicket statistics overview.",
+            status_distribution: { assigned: 43, in_progress: 45, pending: 115 },
+            tickets_by_city: [
+              { city: "Bern", count: 103 },
+              { city: "Zollikofen", count: 26 },
+              { city: "Ittigen", count: 20 },
+            ],
+            total: 206,
+            ticket_ids: ["INC-100", "INC-200", "INC-300"],
+          }, null, 2),
+          agent_snapshot: { tool_names: ["csv_ticket_stats"] },
+          tools_used: ["csv_ticket_stats"],
+          error: null,
+          created_at: "2026-03-04T10:00:00Z",
+          completed_at: "2026-03-04T10:00:02Z",
+        }),
+      });
+    });
+
+    // Inject mock agent with output_schema into agent list
+    let realAgents = null;
+    await page.route("**/api/workbench/agents", async (route) => {
+      if (route.request().method() === "GET") {
+        if (!realAgents) {
+          const resp = await route.fetch();
+          realAgents = (await resp.json()).agents || [];
+        }
+        const agents = [...realAgents];
+        if (!agents.find(a => a.id === mockAgentId)) {
+          agents.push({
+            id: mockAgentId, name: agentName, description: "", system_prompt: "charts",
+            tool_names: ["csv_ticket_stats"], output_schema: outputSchema,
+            requires_input: false, required_input_description: "",
+            model: "", temperature: 0, recursion_limit: 3, max_tokens: 4096,
+            output_instructions: "", success_criteria: [],
+            created_at: "2026-03-04T10:00:00Z", updated_at: "2026-03-04T10:00:00Z",
+          });
+        }
+        await route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify({ agents }) });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await page.goto(`${APP_URL}/workbench`, { waitUntil: "load" });
+    await expect(page.getByTestId("workbench-page-title")).toBeVisible();
+
+    // Select mock agent and run
+    await page.locator('[data-testid="workbench-run-agent-select"]').selectOption(mockAgentId);
+    await page.getByTestId("workbench-run-agent-button").click();
+
+    const renderer = page.getByTestId("schema-renderer");
+    await expect(renderer).toBeVisible({ timeout: 10000 });
+
+    // Verify markdown widget
+    await expect(renderer.getByRole("heading", { name: "Dashboard" })).toBeVisible();
+
+    // Verify stat-card with label
+    const statField = renderer.getByTestId("schema-field-total");
+    await expect(statField).toBeVisible();
+    await expect(statField.getByText("206")).toBeVisible();
+    await expect(statField.getByText("Total Tickets").first()).toBeVisible();
+
+    // Verify badge-list
+    await expect(renderer.getByText("INC-100")).toBeVisible();
+    await expect(renderer.getByText("INC-300")).toBeVisible();
+
+    // Verify pie-chart (Nivo renders SVG)
+    const pieField = renderer.getByTestId("schema-field-status_distribution");
+    await expect(pieField).toBeVisible();
+    await expect(pieField.locator("svg")).toBeVisible();
+
+    // Verify bar-chart (Nivo renders SVG)
+    const barField = renderer.getByTestId("schema-field-tickets_by_city");
+    await expect(barField).toBeVisible();
+    await expect(barField.locator("svg")).toBeVisible();
+  });
+
+  test("renders raw JSON for object data (auto-detected)", async ({ page }) => {
+    const agentName = `e2e-json-${Date.now()}`;
+
+    await page.route("**/api/workbench/agents/*/runs", async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          id: "run-json-1", agent_id: "agent-json-1", input_prompt: "raw",
+          status: "completed",
+          output: JSON.stringify({
+            message: "Here is raw data.",
+            metadata: { version: "1.0", source: "csv", processed_at: "2026-03-04" },
+          }, null, 2),
+          agent_snapshot: { tool_names: ["csv_ticket_stats"] },
+          tools_used: ["csv_ticket_stats"], error: null,
+          created_at: "2026-03-04T10:00:00Z", completed_at: "2026-03-04T10:00:01Z",
+        }),
+      });
+    });
+
+    await page.goto(`${APP_URL}/workbench`, { waitUntil: "load" });
+    await page.getByTestId("workbench-agent-name-input").fill(agentName);
+    await page.getByTestId("workbench-agent-system-prompt-input").fill("Raw data");
+    await page.getByTestId("workbench-create-agent-button").click();
+
+    const createdRow = page.locator('[data-testid="workbench-agents-table"] tbody tr', { hasText: agentName });
+    await expect(createdRow).toBeVisible({ timeout: 10000 });
+    await page.getByTestId("workbench-run-agent-button").click();
+
+    const renderer = page.getByTestId("schema-renderer");
+    await expect(renderer).toBeVisible({ timeout: 10000 });
+    await expect(renderer.getByText("Here is raw data.")).toBeVisible();
+
+    // metadata auto-detected as json (object → pre block)
+    const metaField = renderer.getByTestId("schema-field-metadata");
+    await expect(metaField).toBeVisible();
+    await expect(metaField.locator("pre")).toBeVisible();
+    await expect(metaField.getByText("csv")).toBeVisible();
+
+    await createdRow.getByRole("button", { name: "Delete" }).click();
+  });
+
+  test("falls back gracefully for non-JSON output", async ({ page }) => {
+    const agentName = `e2e-fallback-${Date.now()}`;
+
+    await page.route("**/api/workbench/agents/*/runs", async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          id: "run-fb-1", agent_id: "agent-fb-1", input_prompt: "test",
+          status: "completed",
+          output: "# Plain Markdown\n\nThis is **not JSON** — just regular markdown.",
+          agent_snapshot: { tool_names: ["csv_ticket_stats"] },
+          tools_used: ["csv_ticket_stats"], error: null,
+          created_at: "2026-03-04T10:00:00Z", completed_at: "2026-03-04T10:00:01Z",
+        }),
+      });
+    });
+
+    await page.goto(`${APP_URL}/workbench`, { waitUntil: "load" });
+    await page.getByTestId("workbench-agent-name-input").fill(agentName);
+    await page.getByTestId("workbench-agent-system-prompt-input").fill("Fallback");
+    await page.getByTestId("workbench-create-agent-button").click();
+
+    const createdRow = page.locator('[data-testid="workbench-agents-table"] tbody tr', { hasText: agentName });
+    await expect(createdRow).toBeVisible({ timeout: 10000 });
+    await page.getByTestId("workbench-run-agent-button").click();
+
+    const renderer = page.getByTestId("schema-renderer");
+    await expect(renderer).toBeVisible({ timeout: 10000 });
+
+    // Non-JSON falls back: wrapped as {message: raw_text} → markdown
+    await expect(renderer.getByRole("heading", { name: "Plain Markdown" })).toBeVisible();
+    await expect(renderer.getByText("not JSON")).toBeVisible();
+
+    await createdRow.getByRole("button", { name: "Delete" }).click();
+  });
 });