From dff84fb8de819eed8f778c38cbf48d27c08a7ce8 Mon Sep 17 00:00:00 2001
From: Tom Brandenburg <40181002+tbrandenburg@users.noreply.github.com>
Date: Tue, 24 Mar 2026 22:15:52 +0100
Subject: [PATCH] Improve workflow diagnostics readability on Tasks page

---
 .../frontend/src/pages/TasksPage.test.tsx     |  6 ++++--
 packages/frontend/src/pages/TasksPage.tsx     | 20 +++++++++----------
 packages/frontend/src/styles/page.css         | 14 +++++++++++++
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/pages/TasksPage.test.tsx b/packages/frontend/src/pages/TasksPage.test.tsx
index fb4cb31..f92ee30 100644
--- a/packages/frontend/src/pages/TasksPage.test.tsx
+++ b/packages/frontend/src/pages/TasksPage.test.tsx
@@ -158,8 +158,10 @@ describe("TasksPage", () => {
     );
 
     expect(await screen.findByText("Diagnostics")).toBeInTheDocument();
-    expect(screen.getByText(/Error: captured stderr/)).toBeInTheDocument();
-    expect(screen.getByText(/Stdout: line-11/)).toBeInTheDocument();
+    expect(screen.getByText("Error")).toBeInTheDocument();
+    expect(screen.getByText("captured stderr")).toBeInTheDocument();
+    expect(screen.getByText("Stdout")).toBeInTheDocument();
+    expect(screen.getByText(/line-11/)).toBeInTheDocument();
   });
 
   it("shows fallback diagnostics label when no diagnostics exist", async () => {
diff --git a/packages/frontend/src/pages/TasksPage.tsx b/packages/frontend/src/pages/TasksPage.tsx
index 5e6448e..c519ba3 100644
--- a/packages/frontend/src/pages/TasksPage.tsx
+++ b/packages/frontend/src/pages/TasksPage.tsx
@@ -50,11 +50,7 @@ const formatErrorText = (value?: string | null) => {
   if (!value || !value.trim()) {
     return "-";
   }
-  const normalized = value.trim();
-  if (normalized.length <= 80) {
-    return normalized;
-  }
-  return `${normalized.slice(0, 77)}...`;
+  return value.trim();
 };
 
 const formatWorkflowLastRun = (workflow: WorkspaceWorkflowSummary) => {
@@ -93,12 +89,14 @@ const renderWorkflowDiagnosticsSummary = (diagnostics: WorkflowDiagnostics) => {
         <span>Started: {formatDateTime(diagnostics.lastStartedAt)}</span>
         <span>Finished: {formatDateTime(diagnostics.lastFinishedAt)}</span>
       </div>
-      <div className="meta-secondary">
-        Error: {formatErrorText(diagnostics.lastStderr ?? diagnostics.lastError)}
-      </div>
-      <div className="meta-secondary">
-        Stdout: {formatErrorText(diagnostics.lastStdout)}
-      </div>
+      <div className="meta-secondary">Error</div>
+      <pre className="workflow-diagnostics__output">
+        {formatErrorText(diagnostics.lastStderr ?? diagnostics.lastError)}
+      </pre>
+      <div className="meta-secondary">Stdout</div>
+      <pre className="workflow-diagnostics__output">
+        {formatErrorText(diagnostics.lastStdout)}
+      </pre>
     </details>
   );
 };
diff --git a/packages/frontend/src/styles/page.css b/packages/frontend/src/styles/page.css
index 5148c9f..3e2caa8 100644
--- a/packages/frontend/src/styles/page.css
+++ b/packages/frontend/src/styles/page.css
@@ -483,3 +483,17 @@
   gap: 0.35rem;
   cursor: pointer;
 }
+
+.workflow-diagnostics__output {
+  margin: 0;
+  max-height: 12rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 0.5rem 0.6rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--panel-border);
+  background: var(--surface-strong);
+  color: var(--text);
+  font-size: 0.82rem;
+}