From b2b108768134bcaf4c8ab18e2788db4d66e7805d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 17 Mar 2026 23:41:34 +0000
Subject: [PATCH] fix: remove wrapMode that caused garbled text rendering

wrapMode='word' was corrupting character display in OpenTUI text components.
Removed it from all message views and streaming display.

Co-authored-by: Ismail Pelaseyed <homanp@users.noreply.github.com>
---
 src/ui/app.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/ui/app.tsx b/src/ui/app.tsx
index 3e11257..c002789 100644
--- a/src/ui/app.tsx
+++ b/src/ui/app.tsx
@@ -223,7 +223,9 @@ export function App({ agent, initialMessage }: AppProps) {
         <box flexDirection="column" gap={1} padding={1}>
           {showHelp && <HelpPanel />}
           {messages.map((msg, i) => (
-            <MessageView key={i} entry={msg} />
+            <box key={i} flexDirection="column">
+              <MessageView entry={msg} />
+            </box>
           ))}
           {activeToolCalls.length > 0 && (
             <box flexDirection="column">
@@ -242,7 +244,7 @@ export function App({ agent, initialMessage }: AppProps) {
           {streamContent && (
             <box flexDirection="column">
               <text fg="#34d399"><b>{"✦ Grok"}</b></text>
-              <text fg="#e2e8f0" wrapMode="word">{streamContent}</text>
+              <text fg="#e2e8f0">{streamContent}</text>
             </box>
           )}
           {isProcessing && !streamContent && activeToolCalls.length === 0 && (
@@ -298,7 +300,7 @@ function MessageView({ entry }: { entry: ChatEntry }) {
       return (
         <box flexDirection="column">
           <text fg="#60a5fa"><b>{"❯ You"}</b></text>
-          <text fg="#cbd5e1" wrapMode="word">{entry.content}</text>
+          <text fg="#cbd5e1">{entry.content}</text>
         </box>
       );
 
@@ -306,7 +308,7 @@ function MessageView({ entry }: { entry: ChatEntry }) {
       return (
         <box flexDirection="column">
           <text fg="#34d399"><b>{"✦ Grok"}</b></text>
-          <text fg="#e2e8f0" wrapMode="word">{entry.content}</text>
+          <text fg="#e2e8f0">{entry.content}</text>
         </box>
       );
 
@@ -320,11 +322,7 @@ function MessageView({ entry }: { entry: ChatEntry }) {
       return (
         <box flexDirection="column">
           <text fg={color}>{`${icon} ${name}`}</text>
-          {output && (
-            <box>
-              <text fg="#9ca3af" wrapMode="word">{output}</text>
-            </box>
-          )}
+          {output && <text fg="#9ca3af">{output}</text>}
         </box>
       );
     }