From 0854ef48281e8af5f62c53fd5e804bcf1758c781 Mon Sep 17 00:00:00 2001
From: Yunfei He <i.heyunfei@gmail.com>
Date: Sun, 24 May 2026 23:03:13 +0800
Subject: [PATCH] fix(coding-agent): fix user message layout and add Agent
 prefix

- Use nested Text instead of sibling Text nodes to keep 'You: ' and
  content on the same line (avoids yoga row layout splitting them)
- Add 'Agent: ' prefix (cyan, bold) to assistant messages
---
 .../src/components/MessageList.tsx            | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/examples/coding-agent/src/components/MessageList.tsx b/examples/coding-agent/src/components/MessageList.tsx
index 74d05ff..882e400 100644
--- a/examples/coding-agent/src/components/MessageList.tsx
+++ b/examples/coding-agent/src/components/MessageList.tsx
@@ -13,10 +13,12 @@ export default defineComponent({
       if (msg.role === "user") {
         return (
           <Box>
-            <Text bold color="green">
-              {"You: "}
+            <Text>
+              <Text bold color="green">
+                {"You: "}
+              </Text>
+              {msg.content}
             </Text>
-            <Text>{msg.content}</Text>
           </Box>
         );
       }
@@ -25,7 +27,14 @@ export default defineComponent({
         if (msg.tool_calls) {
           const parts: any[] = [];
           if (msg.content) {
-            parts.push(<Text>{msg.content}</Text>);
+            parts.push(
+              <Text>
+                <Text bold color="cyan">
+                  {"Agent: "}
+                </Text>
+                {msg.content}
+              </Text>,
+            );
           }
           for (const tc of msg.tool_calls) {
             const parsed = JSON.parse(tc.function.arguments);
@@ -39,7 +48,12 @@ export default defineComponent({
         }
         return (
           <Box>
-            <Text>{msg.content}</Text>
+            <Text>
+              <Text bold color="cyan">
+                {"Agent: "}
+              </Text>
+              {msg.content}
+            </Text>
           </Box>
         );
       }