fix: hyphenate wrapped text in agent thinking output (#1597)

reverb256 · web-flow · commit b6e4325b09d5 · 2026-04-09T14:04:44.000-07:00
## Problem Agent thinking output wraps long words mid-word without hyphenation marks, making it hard to read where words break. Fixes #1593 ## Solution Changed the `<pre>` className from `break-all` to `break-words hyphens-auto` in `ThoughtView.tsx`. This enables CSS hyphenation with proper hyphen marks at word breaks. - `break-words` prevents mid-word breaks without indication - `hyphens-auto` adds proper hyphenation marks (the `<html lang="en">` attribute already enables English hyphenation rules) ## Screenshot Before: words break mid-character with no indication After: words wrap with proper hyphen marks (e.g., `hyphe-` at line end) ## Files Changed - `apps/code/src/renderer/features/sessions/components/session-update/ThoughtView.tsx` — 1 line changed
diff --git a/apps/code/src/renderer/features/sessions/components/session-update/ThoughtView.tsx b/apps/code/src/renderer/features/sessions/components/session-update/ThoughtView.tsx
@@ -46,7 +46,7 @@ export const ThoughtView = memo(function ThoughtView({
         <Box className="mt-1 ml-5 max-w-4xl overflow-hidden rounded-lg border border-gray-6">
           <Box className="max-h-64 overflow-auto px-3 py-2">
             <Text asChild size="1" className="text-gray-11">
-              <pre className="m-0 whitespace-pre-wrap break-all font-mono">
+              <pre className="m-0 hyphens-auto whitespace-pre-wrap break-words font-mono">
                 {displayedContent}
               </pre>
             </Text>
