From ee801065c2d9d90ede458553d2b4f9d9156521fa Mon Sep 17 00:00:00 2001
From: "[._.]/ Adam Eivy" <atomantic@gmail.com>
Date: Wed, 2 Sep 2026 06:19:18 +0000
Subject: [PATCH] fix: wrap the machine-output pre blocks the app shell was
 clipping (#5675)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layout's root is `overflow-x-hidden`, so a <pre> whose content can exceed the viewport loses its tail off the right edge with no horizontal scrollbar to recover it.

The update log and the read-only legacy script command were the last two single-line <pre> openers in the client tree carrying no wrap or overflow class at all; both now match the ProcessLogLines idiom (`whitespace-pre-wrap break-all`), with the update log additionally capped at `max-h-48 overflow-y-auto` so a long log doesn't push the rest of the tab off-screen.

JobCard's two other output blocks had `whitespace-pre-wrap` but no break class, which only wraps at whitespace — a shell job's last output is full of unbroken paths and URLs that still ran past the clip edge, so it gets `break-all` too. The prompt template beside it gets `break-words` instead: it is human-authored prose, where breaking mid-word is worse than the rare long token.
---
 client/src/components/apps/tabs/UpdateTab.jsx |  2 +-
 .../components/apps/tabs/UpdateTab.test.jsx   | 29 ++++++++
 client/src/components/cos/JobCard.jsx         |  6 +-
 client/src/components/cos/JobCard.test.jsx    | 71 +++++++++++++++++++
 4 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/cos/JobCard.test.jsx

diff --git a/client/src/components/apps/tabs/UpdateTab.jsx b/client/src/components/apps/tabs/UpdateTab.jsx
index 35004cefad..55d89ae27e 100644
--- a/client/src/components/apps/tabs/UpdateTab.jsx
+++ b/client/src/components/apps/tabs/UpdateTab.jsx
@@ -678,7 +678,7 @@ export default function UpdateTab() {
               )}
             </div>
             {status.lastUpdateResult.log && (
-              <pre className="text-xs text-gray-400 mt-2 font-mono">{status.lastUpdateResult.log}</pre>
+              <pre className="text-xs text-gray-400 mt-2 font-mono whitespace-pre-wrap break-all max-h-48 overflow-y-auto">{status.lastUpdateResult.log}</pre>
             )}
           </div>
         </div>
diff --git a/client/src/components/apps/tabs/UpdateTab.test.jsx b/client/src/components/apps/tabs/UpdateTab.test.jsx
index f44a7b8b26..709692ea92 100644
--- a/client/src/components/apps/tabs/UpdateTab.test.jsx
+++ b/client/src/components/apps/tabs/UpdateTab.test.jsx
@@ -331,3 +331,32 @@ describe('UpdateTab — active CoS agent suppression', () => {
     expect(screen.getByRole('button', { name: 'Reconcile Now' })).toBeTruthy();
   });
 });
+
+describe('UpdateTab — last update log', () => {
+  beforeEach(() => {
+    handlers.clear();
+    mockCheckHealth.mockReset().mockResolvedValue({ version: '2.24.0', uptime: 120 });
+    mockExecutePortosUpdate.mockReset();
+    mockToast.mockClear();
+  });
+
+  it('wraps a long single-line update log so its tail stays reachable', async () => {
+    // Real update logs contain long unbroken paths/URLs. The app shell is
+    // `overflow-x-hidden`, so an unwrapped <pre> clips the tail with no
+    // horizontal scrollbar to recover it — the wrap pair is the fix.
+    const log = `error: ${'no-spaces-in-this-path/'.repeat(20)}done`;
+    mockGetUpdateStatus.mockReset().mockResolvedValue({
+      currentVersion: '2.24.0',
+      lastUpdateResult: { success: false, version: '2.25.0', log },
+    });
+
+    render(<UpdateTab />);
+
+    const pre = await screen.findByText(log);
+    expect(pre.tagName).toBe('PRE');
+    expect(pre.className).toContain('whitespace-pre-wrap');
+    expect(pre.className).toContain('break-all');
+    // A multi-thousand-line log must not push the rest of the tab off-screen.
+    expect(pre.className).toContain('overflow-y-auto');
+  });
+});
diff --git a/client/src/components/cos/JobCard.jsx b/client/src/components/cos/JobCard.jsx
index c3a3186ba2..7109fe98fe 100644
--- a/client/src/components/cos/JobCard.jsx
+++ b/client/src/components/cos/JobCard.jsx
@@ -530,7 +530,7 @@ export default function JobCard({
               ) : editData.type === 'script' ? (
                 <div className="space-y-1">
                   <span className="text-xs text-gray-400">Legacy script command (read-only)</span>
-                  <pre className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-gray-400 text-sm font-mono">{editData.command || 'No command'}</pre>
+                  <pre className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-gray-400 text-sm font-mono whitespace-pre-wrap break-all">{editData.command || 'No command'}</pre>
                 </div>
               ) : (
                 <textarea
@@ -585,13 +585,13 @@ export default function JobCard({
               {isShell && job.lastOutput && (
                 <details className="group">
                   <summary className="text-xs text-gray-500 cursor-pointer hover:text-gray-300 transition-colors">Last output (exit {job.lastExitCode})</summary>
-                  <pre className="mt-2 p-3 bg-port-bg border border-port-border rounded-lg text-xs text-gray-400 font-mono whitespace-pre-wrap max-h-48 overflow-y-auto">{job.lastOutput}</pre>
+                  <pre className="mt-2 p-3 bg-port-bg border border-port-border rounded-lg text-xs text-gray-400 font-mono whitespace-pre-wrap break-all max-h-48 overflow-y-auto">{job.lastOutput}</pre>
                 </details>
               )}
               {!isShell && !isScript && (
                 <details className="group">
                   <summary className="text-xs text-gray-500 cursor-pointer hover:text-gray-300 transition-colors">View prompt template</summary>
-                  <pre className="mt-2 p-3 bg-port-bg border border-port-border rounded-lg text-xs text-gray-400 font-mono whitespace-pre-wrap max-h-48 overflow-y-auto">{job.promptTemplate}</pre>
+                  <pre className="mt-2 p-3 bg-port-bg border border-port-border rounded-lg text-xs text-gray-400 font-mono whitespace-pre-wrap break-words max-h-48 overflow-y-auto">{job.promptTemplate}</pre>
                 </details>
               )}
               {isConfirming(job.id) ? (
diff --git a/client/src/components/cos/JobCard.test.jsx b/client/src/components/cos/JobCard.test.jsx
new file mode 100644
index 0000000000..8ec9ebf457
--- /dev/null
+++ b/client/src/components/cos/JobCard.test.jsx
@@ -0,0 +1,71 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('../ui/Toast', () => ({
+  default: Object.assign(vi.fn(), { success: vi.fn(), error: vi.fn(), loading: vi.fn(), dismiss: vi.fn() })
+}));
+vi.mock('../../services/api', () => ({ updateCosJob: vi.fn() }));
+
+const JobCard = (await import('./JobCard')).default;
+
+// A legacy script command with no spaces — the shape that used to run off the
+// edge of the card, unreachable because Layout's root is `overflow-x-hidden`.
+const LONG_COMMAND = `node scripts/${'legacy-handler-segment-'.repeat(20)}run.js`;
+
+const SCRIPT_JOB = {
+  id: 'job-legacy',
+  name: 'Legacy handler',
+  description: '',
+  type: 'script',
+  interval: '1h',
+  intervalMs: 3600000,
+  priority: 'MEDIUM',
+  autonomyLevel: 'standby',
+  enabled: true,
+  command: LONG_COMMAND
+};
+
+const noop = () => {};
+
+const renderCard = (job) => render(
+  <JobCard
+    job={job}
+    onToggle={noop}
+    onTrigger={noop}
+    onDelete={noop}
+    onUpdate={noop}
+  />
+);
+
+describe('JobCard machine output', () => {
+  it('wraps the read-only legacy command so a long single-line value stays fully readable', () => {
+    renderCard(SCRIPT_JOB);
+    fireEvent.click(screen.getByRole('button', { name: 'Edit' }));
+
+    const pre = screen.getByText(LONG_COMMAND);
+    expect(pre.tagName).toBe('PRE');
+    // Without the wrap pair the tail of the command is clipped by the app
+    // shell's `overflow-x-hidden` with no scrollbar to recover it.
+    expect(pre.className).toContain('whitespace-pre-wrap');
+    expect(pre.className).toContain('break-all');
+  });
+
+  it('breaks unbroken tokens in a shell job last-output block, not just at whitespace', () => {
+    // `whitespace-pre-wrap` alone only wraps at whitespace — shell output is
+    // full of long unbroken paths and URLs that still run past the clip edge.
+    const lastOutput = `fatal: ${'unbroken-token-'.repeat(30)}end`;
+    renderCard({
+      ...SCRIPT_JOB,
+      id: 'job-shell',
+      type: 'shell',
+      command: 'echo hi',
+      lastExitCode: 1,
+      lastOutput
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Expand' }));
+
+    const pre = screen.getByText(lastOutput);
+    expect(pre.tagName).toBe('PRE');
+    expect(pre.className).toContain('break-all');
+  });
+});