From ba3969bd434254f64318a8afdca7d949e3fbaa8a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 17 Mar 2026 23:30:25 +0000
Subject: [PATCH] fix: improve UI visibility with dark theme and text wrapping

- Add dark background (#0f172a) to main app, model picker, input
- Set explicit text/background colors on input for visibility
- Use wrapMode='word' on all text content for proper wrapping
- Use children instead of content prop for user messages
- Add Grok label to streaming content display

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

diff --git a/src/ui/app.tsx b/src/ui/app.tsx
index 29a31b0..3e11257 100644
--- a/src/ui/app.tsx
+++ b/src/ui/app.tsx
@@ -213,7 +213,7 @@ export function App({ agent, initialMessage }: AppProps) {
   }
 
   return (
-    <box flexDirection="column" width="100%" height="100%">
+    <box flexDirection="column" width="100%" height="100%" backgroundColor="#0f172a">
       <StatusBar model={model} cwd={agent.getCwd()} isProcessing={isProcessing} />
       <scrollbox
         ref={scrollRef}
@@ -240,8 +240,9 @@ export function App({ agent, initialMessage }: AppProps) {
             </box>
           )}
           {streamContent && (
-            <box>
-              <text fg="#e2e8f0">{streamContent}</text>
+            <box flexDirection="column">
+              <text fg="#34d399"><b>{"✦ Grok"}</b></text>
+              <text fg="#e2e8f0" wrapMode="word">{streamContent}</text>
             </box>
           )}
           {isProcessing && !streamContent && activeToolCalls.length === 0 && (
@@ -259,6 +260,9 @@ export function App({ agent, initialMessage }: AppProps) {
           ref={inputRef}
           focused={!isProcessing && !showModelPicker}
           placeholder={isProcessing ? "Processing... (Esc to cancel)" : "Type a message... (/help for commands)"}
+          textColor="#e2e8f0"
+          backgroundColor="#0f172a"
+          placeholderColor="#6b7280"
           onSubmit={handleSubmit as any}
         />
       </box>
@@ -294,7 +298,7 @@ function MessageView({ entry }: { entry: ChatEntry }) {
       return (
         <box flexDirection="column">
           <text fg="#60a5fa"><b>{"❯ You"}</b></text>
-          <text content={entry.content} />
+          <text fg="#cbd5e1" wrapMode="word">{entry.content}</text>
         </box>
       );
 
@@ -302,7 +306,7 @@ function MessageView({ entry }: { entry: ChatEntry }) {
       return (
         <box flexDirection="column">
           <text fg="#34d399"><b>{"✦ Grok"}</b></text>
-          <text fg="#e2e8f0">{entry.content}</text>
+          <text fg="#e2e8f0" wrapMode="word">{entry.content}</text>
         </box>
       );
 
@@ -318,7 +322,7 @@ function MessageView({ entry }: { entry: ChatEntry }) {
           <text fg={color}>{`${icon} ${name}`}</text>
           {output && (
             <box>
-              <text fg="#9ca3af">{output}</text>
+              <text fg="#9ca3af" wrapMode="word">{output}</text>
             </box>
           )}
         </box>
@@ -358,7 +362,7 @@ function ModelPicker({ currentModel, selectedIndex }: { currentModel: string; se
   const models = getAvailableModels();
 
   return (
-    <box flexDirection="column" width="100%" height="100%">
+    <box flexDirection="column" width="100%" height="100%" backgroundColor="#0f172a">
       <box
         border
         borderStyle="rounded"