refactor: extract shared parseRunOutput, add delete-all-runs

- Extracted parseRunOutput (fence-stripping + JSON parsing) into
  outputUtils.js — shared by RunsSidePanel and AgentRunPage
- Fixed AgentRunPage (show_in_menu): renders markdown instead of raw JSON
- Added DELETE /api/workbench/runs endpoint + trash button in Runs panel
- Runs panel: min-height 500px so content is visible on load

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

Author: abossard

backend/agent_builder/persistence/repository.py

@@ -94,6 +94,15 @@ def update_run(self, run_id: str, **fields) -> Optional[AgentRun]:
             session.refresh(db_run)
             return db_run
 
+    def delete_all_runs(self) -> int:
+        """Delete all runs. Returns count deleted."""
+        from sqlmodel import delete as sql_delete
+        with Session(self._engine) as session:
+            count = session.exec(select(AgentRun)).all().__len__()
+            session.exec(sql_delete(AgentRun))
+            session.commit()
+            return count
+
     # ----- Evaluations -----
 
     def get_evaluation(self, run_id: str) -> Optional[AgentEvaluation]:

backend/agent_builder/routes.py

@@ -243,6 +243,12 @@ async def workbench_list_all_runs():
     return jsonify({"runs": [r.to_dict() for r in runs]})
 
 
+@agent_builder_bp.route("/api/workbench/runs", methods=["DELETE"])
+async def workbench_delete_all_runs():
+    count = _workbench_service.delete_all_runs()
+    return jsonify({"deleted": count})
+
+
 @agent_builder_bp.route("/api/workbench/runs/<run_id>", methods=["GET"])
 async def workbench_get_run(run_id: str):
     run = _workbench_service.get_run(run_id)

backend/agent_builder/service.py

@@ -417,6 +417,10 @@ def get_run(self, run_id: str) -> Optional[AgentRun]:
     def list_runs(self, agent_id: Optional[str] = None, limit: int = 50) -> list[AgentRun]:
         return self._repo.list_runs(agent_id=agent_id, limit=limit)
 
+    def delete_all_runs(self) -> int:
+        """Delete all runs from the database. Returns count deleted."""
+        return self._repo.delete_all_runs()
+
     # ------------------------------------------------------------------
     # Core: run an agent
     # ------------------------------------------------------------------

frontend/src/features/workbench/AgentRunPage.jsx

@@ -18,6 +18,7 @@ import {
 } from '@fluentui/react-components'
 import { useEffect, useState } from 'react'
 import { runWorkbenchAgent } from '../../services/api'
+import { parseRunOutput } from './outputUtils'
 import SchemaRenderer from './SchemaRenderer'
 
 const useStyles = makeStyles({
@@ -26,7 +27,7 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     gap: tokens.spacingVerticalL,
-    maxWidth: '800px',
+    maxWidth: '900px',
   },
   outputContainer: {
     border: `1px solid ${tokens.colorNeutralStroke1}`,
@@ -50,14 +51,7 @@ export default function AgentRunPage({ agent }) {
     return <Spinner label="Loading agent..." />
   }
 
-  const parsedOutput = (() => {
-    if (!output) return null
-    try {
-      const parsed = JSON.parse(output)
-      if (typeof parsed === 'object' && parsed !== null) return parsed
-    } catch { /* not JSON */ }
-    return { message: output }
-  })()
+  const parsedOutput = parseRunOutput(output)
 
   const handleRun = async () => {
     setError('')

frontend/src/features/workbench/RunsSidePanel.jsx

@@ -22,7 +22,8 @@ import {
   makeStyles,
   tokens,
 } from '@fluentui/react-components'
-import { ArrowClockwise24Regular, Dismiss24Regular } from '@fluentui/react-icons'
+import { ArrowClockwise24Regular, Delete24Regular, Dismiss24Regular } from '@fluentui/react-icons'
+import { parseRunOutput } from './outputUtils'
 import SchemaRenderer from './SchemaRenderer'
 
 const useStyles = makeStyles({
@@ -148,22 +149,6 @@ function resolveAgentName(agentMap, run) {
   return agentMap[run.agent_id]?.name ?? run.agent_snapshot?.name ?? 'Unknown Agent'
 }
 
-function parseRunOutput(output) {
-  if (!output) return null
-  if (typeof output !== 'string') return output
-
-  // Strip markdown code fences (```json ... ```) that LLMs often wrap output in
-  let cleaned = output.trim()
-  const fenceMatch = cleaned.match(/^```(?:json)?\s*\n?([\s\S]*?)\n?```\s*$/)
-  if (fenceMatch) cleaned = fenceMatch[1].trim()
-
-  try {
-    const parsed = JSON.parse(cleaned)
-    if (typeof parsed === 'object' && parsed !== null) return parsed
-  } catch { /* not JSON */ }
-  return { message: output }
-}
-
 function formatRelativeTime(dateStr, now = Date.now()) {
   if (!dateStr) return ''
   const diffSec = Math.max(0, Math.floor((now - new Date(dateStr).getTime()) / 1000))
@@ -192,7 +177,7 @@ function StatusBadge({ status }) {
   )
 }
 
-export default function RunsSidePanel({ runs = [], agents = [], selectedRunId, onSelectRun, onRefresh }) {
+export default function RunsSidePanel({ runs = [], agents = [], selectedRunId, onSelectRun, onRefresh, onDeleteAll }) {
   const styles = useStyles()
 
   const agentMap = buildAgentMap(agents)
@@ -208,14 +193,26 @@ export default function RunsSidePanel({ runs = [], agents = [], selectedRunId, o
       <div className={styles.panel} data-testid="runs-side-panel">
         <div className={styles.header}>
           <Text weight="semibold" size={400}>Runs</Text>
-          <Button
-            appearance="subtle"
-            icon={<ArrowClockwise24Regular />}
-            size="small"
-            onClick={onRefresh}
-            data-testid="runs-panel-refresh"
-            title="Refresh runs"
-          />
+          <div style={{ display: 'flex', gap: '4px' }}>
+            {sortedRuns.length > 0 && (
+              <Button
+                appearance="subtle"
+                icon={<Delete24Regular />}
+                size="small"
+                onClick={onDeleteAll}
+                data-testid="runs-panel-delete-all"
+                title="Delete all runs"
+              />
+            )}
+            <Button
+              appearance="subtle"
+              icon={<ArrowClockwise24Regular />}
+              size="small"
+              onClick={onRefresh}
+              data-testid="runs-panel-refresh"
+              title="Refresh runs"
+            />
+          </div>
         </div>
 
         <div className={styles.runList}>

frontend/src/features/workbench/WorkbenchPage.jsx

@@ -12,6 +12,7 @@ import { Apps24Regular, Add24Regular } from '@fluentui/react-icons'
 import { useEffect, useState, useCallback } from 'react'
 import {
   deleteWorkbenchAgent,
+  deleteAllRuns,
   getWorkbenchUiConfig,
   listWorkbenchAgents,
   listWorkbenchTools,
@@ -92,6 +93,14 @@ export default function WorkbenchPage() {
     } catch { /* ignore */ }
   }, [])
 
+  const handleDeleteAllRuns = useCallback(async () => {
+    try {
+      await deleteAllRuns()
+      setRuns([])
+      setSelectedRunId(null)
+    } catch { /* ignore */ }
+  }, [])
+
   const handleRunStarted = useCallback((run) => {
     setRuns((prev) => [run, ...prev])
     setSelectedRunId(run.id)
@@ -175,6 +184,7 @@ export default function WorkbenchPage() {
               selectedRunId={selectedRunId}
               onSelectRun={setSelectedRunId}
               onRefresh={refreshRuns}
+              onDeleteAll={handleDeleteAllRuns}
             />
           </div>
         </div>

frontend/src/features/workbench/outputUtils.js

@@ -0,0 +1,34 @@
+/**
+ * Workbench output utilities — pure calculations (no side effects).
+ *
+ * Following "Grokking Simplicity": these are calculations that transform
+ * data without I/O. Shared across RunsSidePanel and AgentRunPage.
+ */
+
+/**
+ * Parse raw LLM output into an object suitable for SchemaRenderer.
+ *
+ * Handles:
+ * - Already-parsed objects (returned as-is)
+ * - JSON strings (parsed to object)
+ * - JSON wrapped in markdown fences (```json ... ```) — fences stripped first
+ * - Plain text / markdown (wrapped as { message: text })
+ *
+ * @param {*} output - Raw output from agent run (string or object)
+ * @returns {object|null} Parsed object for SchemaRenderer, or null if empty
+ */
+export function parseRunOutput(output) {
+  if (!output) return null
+  if (typeof output !== 'string') return output
+
+  let cleaned = output.trim()
+  const fenceMatch = cleaned.match(/^```(?:json)?\s*\n?([\s\S]*?)\n?```\s*$/)
+  if (fenceMatch) cleaned = fenceMatch[1].trim()
+
+  try {
+    const parsed = JSON.parse(cleaned)
+    if (typeof parsed === 'object' && parsed !== null) return parsed
+  } catch { /* not JSON */ }
+
+  return { message: output }
+}

frontend/src/services/api.js

@@ -378,6 +378,10 @@ export async function getRun(runId) {
   return fetchJSON(`${API_BASE_URL}/workbench/runs/${runId}`);
 }
 
+export async function deleteAllRuns() {
+  return fetchJSON(`${API_BASE_URL}/workbench/runs`, { method: "DELETE" });
+}
+
 // ============================================================================
 // KBA Drafter APIs
 // ============================================================================