refactor: improve MessageView component by adding width prop and enhancing layout handling

Author: qorzj

src/ui/App.tsx

@@ -321,12 +321,12 @@ export function App({ projectRoot, version = "", onRestart }: AppProps): React.R
         process.stdout.write("\u001B[2J\u001B[3J\u001B[H");
       }
       sessionManager.setActiveSessionId(sessionId);
-      // 先清空让 <Static> 的 index 重置为 0
+      // Clear first so <Static> resets its index to 0.
       setMessages([]);
       setShowWelcome(false);
       setWelcomeNonce((n) => n + 1);
       setView("chat");
-      // 再加载新消息，此时 index 已为 0，会渲染全部 items
+      // Load messages after the reset so all static items are rendered.
       setTimeout(() => {
         setMessages(loadVisibleMessages(sessionManager, sessionId));
         setShowWelcome(true);
@@ -447,7 +447,14 @@ export function App({ projectRoot, version = "", onRestart }: AppProps): React.R
               />
             );
           }
-          return <MessageView key={item.id} message={item} collapsed={isCollapsedThinking(item, expandedThinkingId)} />;
+          return (
+            <MessageView
+              key={item.id}
+              message={item}
+              collapsed={isCollapsedThinking(item, expandedThinkingId)}
+              width={screenWidth}
+            />
+          );
         }}
       </Static>
       {statusLine ? (

src/ui/MessageView.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { Box, Text, useWindowSize } from "ink";
+import { Box, Text } from "ink";
 import { renderMarkdown } from "./markdown";
 import type { SessionMessage } from "../session";
 
 type Props = {
   message: SessionMessage;
   collapsed?: boolean;
+  width?: number;
 };
 
-export function MessageView({ message, collapsed }: Props): React.ReactElement | null {
-  const { columns } = useWindowSize();
+export function MessageView({ message, collapsed, width = 80 }: Props): React.ReactElement | null {
   if (!message.visible) {
     return null;
   }
@@ -54,12 +54,15 @@ export function MessageView({ message, collapsed }: Props): React.ReactElement |
       );
     }
 
+    const containerWidth = Math.max(1, width - 2);
+    const contentWidth = Math.max(1, width - 4);
+
     return (
-      <Box marginLeft={1} marginBottom={1} width={columns - 2} gap={1} marginY={0} flexDirection="row">
+      <Box marginLeft={1} marginBottom={1} width={containerWidth} gap={1} marginY={0} flexDirection="row">
         <Box alignSelf="stretch">
           <Text color="#229ac3">✦</Text>
         </Box>
-        <Box flexGrow={1} width={columns - 4}>
+        <Box flexGrow={1} width={contentWidth}>
           {content ? <Text wrap="wrap">{renderMarkdown(content)}</Text> : null}
         </Box>
       </Box>
@@ -82,7 +85,7 @@ export function MessageView({ message, collapsed }: Props): React.ReactElement |
   }
 
   if (message.role === "system") {
-    // 渲染模型变更消息
+    // Render model change messages in the same style as user commands.
     if (message.meta?.isModelChange) {
       return (
         <Box marginY={0} marginLeft={1} marginBottom={1} flexGrow={1} flexDirection="row" gap={1}>