Merge pull request #171 from lessweb/fix/prompt-cursor-wrapping

修复提示输入的换行、光标定位与 busy 状态显示

Author: qorzj

src/tests/message-view.test.ts

@@ -1,6 +1,9 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
+import React from "react";
+import { renderToString } from "ink";
 import { parseDiffPreview } from "../ui";
+import { MessageView, getPromptEchoContentWidth } from "../ui/components/MessageView";
 import {
   buildThinkingSummary,
   formatBashStatusParams,
@@ -119,6 +122,26 @@ test("renderMessageToStdout shows (no content) for empty user messages", () => {
   assert.ok(output.includes("(no content)"));
 });
 
+test("MessageView echoes submitted user prompts with live prompt wrapping width", () => {
+  assert.equal(getPromptEchoContentWidth(8), 6);
+
+  const msg = makeSessionMessage({ role: "user", content: "abcdefg" });
+  const output = renderToString(React.createElement(MessageView, { message: msg, width: 8 }), { columns: 8 });
+
+  assert.equal(output, "> abcdef\n  g\n");
+});
+
+test("MessageView echoes model changes with submitted prompt wrapping", () => {
+  const msg = makeSessionMessage({
+    role: "system",
+    content: "abcdefgh",
+    meta: { isModelChange: true },
+  });
+  const output = renderToString(React.createElement(MessageView, { message: msg, width: 8 }), { columns: 8 });
+
+  assert.equal(output, "> abcdef\n  gh\n");
+});
+
 test("renderMessageToStdout renders assistant non-thinking messages with ✦", () => {
   const msg = makeSessionMessage({ role: "assistant", content: "Here is the fix" });
   const output = renderMessageToStdout(msg, RawMode.Raw);

src/tests/prompt-input-keys.test.ts

@@ -13,8 +13,10 @@ import {
   formatSelectedSkillsStatus,
   getPromptCursorPlacement,
   getPromptReturnKeyAction,
+  isPromptCursorAtWrapBoundary,
   isClearImageAttachmentsShortcut,
   removeCurrentSlashToken,
+  resolvePromptTerminalCursorPosition,
   toggleSkillSelection,
   renderBufferWithCursor,
   buildInitPromptSubmission,
@@ -294,24 +296,83 @@ test("renderBufferWithCursor styles exactly one simulated cursor", () => {
   assert.equal((renderBufferWithCursor({ text: "hello\nworld", cursor: 6 }, true).match(ANSI_RE) ?? []).length, 2);
 });
 
-test("getPromptCursorPlacement targets the prompt row above divider and footer", () => {
-  const placement = getPromptCursorPlacement({ text: "hello", cursor: 5 }, 80, 2, "Enter send");
-  assert.deepEqual(placement, { rowsUp: 3, column: 7 });
+test("renderBufferWithCursor can suppress the simulated cursor for real terminal cursor mode", () => {
+  assert.equal(
+    (renderBufferWithCursor({ text: "", cursor: 0 }, true, undefined, undefined, false).match(ANSI_RE) ?? []).length,
+    0
+  );
+  assert.equal(
+    stripAnsi(renderBufferWithCursor({ text: "", cursor: 0 }, true, "Ask anything", undefined, false)),
+    "  Ask anything"
+  );
+  assert.equal(
+    (renderBufferWithCursor({ text: "hello", cursor: 1 }, true, undefined, undefined, false).match(ANSI_RE) ?? [])
+      .length,
+    0
+  );
+  assert.equal(
+    stripAnsi(renderBufferWithCursor({ text: "hello\n", cursor: 6 }, true, undefined, undefined, false)),
+    "hello\n "
+  );
+});
+
+test("getPromptCursorPlacement targets an Ink-relative prompt cell", () => {
+  const placement = getPromptCursorPlacement({ text: "hello", cursor: 5 }, 80);
+  assert.deepEqual(placement, { row: 0, column: 5 });
 });
 
 test("getPromptCursorPlacement targets the reserved row after a trailing newline", () => {
-  const placement = getPromptCursorPlacement({ text: "hello\n", cursor: 6 }, 80, 2, "Enter send");
-  assert.deepEqual(placement, { rowsUp: 3, column: 2 });
+  const placement = getPromptCursorPlacement({ text: "hello\n", cursor: 6 }, 80);
+  assert.deepEqual(placement, { row: 1, column: 0 });
 });
 
 test("getPromptCursorPlacement accounts for CJK character width", () => {
-  const placement = getPromptCursorPlacement({ text: "你好", cursor: 2 }, 80, 2, "Enter send");
-  assert.equal(placement.column, 6);
+  const placement = getPromptCursorPlacement({ text: "你好", cursor: 2 }, 80);
+  assert.equal(placement.column, 4);
 });
 
 test("getPromptCursorPlacement accounts for multiline buffer rows", () => {
-  const placement = getPromptCursorPlacement({ text: "hello\nworld", cursor: 11 }, 80, 2, "Enter send");
-  assert.deepEqual(placement, { rowsUp: 3, column: 7 });
-  const middle = getPromptCursorPlacement({ text: "hello\nworld", cursor: 2 }, 80, 2, "Enter send");
-  assert.deepEqual(middle, { rowsUp: 4, column: 4 });
+  const placement = getPromptCursorPlacement({ text: "hello\nworld", cursor: 11 }, 80);
+  assert.deepEqual(placement, { row: 1, column: 5 });
+  const middle = getPromptCursorPlacement({ text: "hello\nworld", cursor: 2 }, 80);
+  assert.deepEqual(middle, { row: 0, column: 2 });
+});
+
+test("getPromptCursorPlacement accounts for wrapped input rows", () => {
+  const placement = getPromptCursorPlacement({ text: "hello", cursor: 5 }, 5);
+  assert.deepEqual(placement, { row: 1, column: 0 });
+  const cursorBeforeWrappedChar = getPromptCursorPlacement({ text: "hello!", cursor: 5 }, 5);
+  assert.deepEqual(cursorBeforeWrappedChar, { row: 1, column: 0 });
+  const secondLine = getPromptCursorPlacement({ text: "hello!", cursor: 6 }, 5);
+  assert.deepEqual(secondLine, { row: 1, column: 1 });
+});
+
+test("isPromptCursorAtWrapBoundary detects hard-wrapped cursor positions", () => {
+  assert.equal(isPromptCursorAtWrapBoundary({ text: "hell", cursor: 4 }, 5), false);
+  assert.equal(isPromptCursorAtWrapBoundary({ text: "hello", cursor: 5 }, 5), true);
+  assert.equal(isPromptCursorAtWrapBoundary({ text: "hello!", cursor: 6 }, 5), true);
+  assert.equal(isPromptCursorAtWrapBoundary({ text: "hello world", cursor: 6 }, 5), true);
+  assert.equal(isPromptCursorAtWrapBoundary({ text: "hello\n", cursor: 6 }, 5), false);
+  assert.equal(isPromptCursorAtWrapBoundary({ text: "hello\nworld", cursor: 11 }, 5), true);
+});
+
+test("resolvePromptTerminalCursorPosition requires matching measured layout", () => {
+  const placement = { row: 1, column: 4 };
+  const origin = { layoutKey: "skills:1", left: 2, top: 3 };
+
+  assert.deepEqual(resolvePromptTerminalCursorPosition(placement, true, "skills:1", origin), { x: 6, y: 4 });
+  assert.equal(resolvePromptTerminalCursorPosition(placement, true, "skills:0", origin), undefined);
+  assert.equal(resolvePromptTerminalCursorPosition(placement, false, "skills:1", origin), undefined);
+  assert.equal(resolvePromptTerminalCursorPosition(placement, true, "skills:1", null), undefined);
+});
+
+test("resolvePromptTerminalCursorPosition clamps negative terminal cells", () => {
+  assert.deepEqual(
+    resolvePromptTerminalCursorPosition({ row: 0, column: 1 }, true, "current", {
+      layoutKey: "current",
+      left: -5,
+      top: -1,
+    }),
+    { x: 0, y: 0 }
+  );
 });

src/ui/components/MessageView/index.tsx

@@ -12,6 +12,8 @@ import {
 import type { DiffPreviewLine, MessageViewProps } from "./types";
 import { RawMode, useRawModeContext } from "../../contexts";
 
+const PROMPT_ECHO_PREFIX_WIDTH = 2;
+
 export function MessageView({ message, collapsed, width = 80 }: MessageViewProps): React.ReactElement | null {
   const { mode } = useRawModeContext();
   if (!message.visible) {
@@ -21,17 +23,11 @@ export function MessageView({ message, collapsed, width = 80 }: MessageViewProps
   if (message.role === "user") {
     const text = message.content || "(no content)";
     return (
-      <Box marginLeft={1} marginBottom={1} flexDirection="row" marginY={0} flexGrow={1} gap={1}>
-        <Box>
-          <Text color="#229ac3">{`>`}</Text>
-        </Box>
-        <Box flexGrow={1}>
-          <Text color="#229ac3">{text}</Text>
-          {Array.isArray(message.contentParams) && message.contentParams.length > 0 ? (
-            <Text color="#229ac3">{`  📎 ${message.contentParams.length} image attachment(s)`}</Text>
-          ) : null}
-        </Box>
-      </Box>
+      <PromptEchoLine
+        text={text}
+        width={width}
+        attachmentCount={Array.isArray(message.contentParams) ? message.contentParams.length : 0}
+      />
     );
   }
 
@@ -109,16 +105,7 @@ export function MessageView({ message, collapsed, width = 80 }: MessageViewProps
   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}>
-          <Box>
-            <Text color="#229ac3">{`>`}</Text>
-          </Box>
-          <Box flexGrow={1} flexDirection="column">
-            <Text color="#229ac3">{message.content}</Text>
-          </Box>
-        </Box>
-      );
+      return <PromptEchoLine text={message.content || ""} width={width} />;
     }
 
     if (message.meta?.skill) {
@@ -143,6 +130,35 @@ export function MessageView({ message, collapsed, width = 80 }: MessageViewProps
   return null;
 }
 
+export function getPromptEchoContentWidth(width: number): number {
+  return Math.max(1, width - PROMPT_ECHO_PREFIX_WIDTH);
+}
+
+function PromptEchoLine({
+  text,
+  width,
+  attachmentCount = 0,
+}: {
+  text: string;
+  width: number;
+  attachmentCount?: number;
+}): React.ReactElement {
+  const contentWidth = getPromptEchoContentWidth(width);
+  return (
+    <Box marginBottom={1} marginY={0} width={Math.max(1, width)} flexDirection="row">
+      <Box width={PROMPT_ECHO_PREFIX_WIDTH}>
+        <Text color="#229ac3">{"> "}</Text>
+      </Box>
+      <Box flexGrow={1} flexShrink={1} width={contentWidth}>
+        <Text color="#229ac3" wrap="hard">
+          {text}
+        </Text>
+        {attachmentCount > 0 ? <Text color="#229ac3">{`  📎 ${attachmentCount} image attachment(s)`}</Text> : null}
+      </Box>
+    </Box>
+  );
+}
+
 function StatusLine({
   bulletColor,
   name,