fix: the new left margin need to be included in width calculations

Author: qorzj

packages/cli/src/tests/message-view.test.ts

@@ -127,12 +127,19 @@ test("renderMessageToStdout shows (no content) for empty user messages", () => {
 });
 
 test("MessageView echoes submitted user prompts with live prompt wrapping width", () => {
-  assert.equal(getPromptEchoContentWidth(8), 6);
+  assert.equal(getPromptEchoContentWidth(8), 5);
 
   const msg = makeSessionMessage({ role: "user", content: "abcdefg" });
   const output = renderToString(React.createElement(MessageView, { message: msg, width: 8 }), { columns: 8 });
 
-  assert.equal(stripAnsi(output), " > abcdef\n   g\n");
+  const text = stripAnsi(output);
+  assert.equal(text, " > abcde\n   fg\n");
+  assert.ok(
+    text
+      .trimEnd()
+      .split("\n")
+      .every((line) => line.length <= 8)
+  );
 });
 
 test("MessageView echoes model changes with submitted prompt wrapping", () => {
@@ -143,7 +150,14 @@ test("MessageView echoes model changes with submitted prompt wrapping", () => {
   });
   const output = renderToString(React.createElement(MessageView, { message: msg, width: 8 }), { columns: 8 });
 
-  assert.equal(stripAnsi(output), " > abcdef\n   gh\n");
+  const text = stripAnsi(output);
+  assert.equal(text, " > abcde\n   fgh\n");
+  assert.ok(
+    text
+      .trimEnd()
+      .split("\n")
+      .every((line) => line.length <= 8)
+  );
 });
 
 test("renderMessageToStdout renders assistant non-thinking messages with ✦", () => {

packages/cli/src/ui/components/MessageView/index.tsx

@@ -13,6 +13,7 @@ import type { DiffPreviewLine, MessageViewProps } from "./types";
 import { RawMode, useRawModeContext } from "../../contexts";
 
 const PROMPT_ECHO_PREFIX_WIDTH = 2;
+const PROMPT_ECHO_MARGIN_LEFT = 1;
 
 export function MessageView({ message, collapsed, width = 80 }: MessageViewProps): React.ReactElement | null {
   const { mode } = useRawModeContext();
@@ -131,7 +132,7 @@ export function MessageView({ message, collapsed, width = 80 }: MessageViewProps
 }
 
 export function getPromptEchoContentWidth(width: number): number {
-  return Math.max(1, width - PROMPT_ECHO_PREFIX_WIDTH);
+  return Math.max(1, width - PROMPT_ECHO_MARGIN_LEFT - PROMPT_ECHO_PREFIX_WIDTH);
 }
 
 function PromptEchoLine({
@@ -144,8 +145,9 @@ function PromptEchoLine({
   attachmentCount?: number;
 }): React.ReactElement {
   const contentWidth = getPromptEchoContentWidth(width);
+  const containerWidth = Math.max(1, width - PROMPT_ECHO_MARGIN_LEFT);
   return (
-    <Box marginBottom={1} marginLeft={1} marginY={0} width={Math.max(1, width)} flexDirection="row">
+    <Box marginBottom={1} marginLeft={PROMPT_ECHO_MARGIN_LEFT} marginY={0} width={containerWidth} flexDirection="row">
       <Box width={PROMPT_ECHO_PREFIX_WIDTH}>
         <Text color="#229ac3">{"> "}</Text>
       </Box>