Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/tests/message-view.test.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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);
Expand Down
83 changes: 72 additions & 11 deletions src/tests/prompt-input-keys.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ import {
formatSelectedSkillsStatus,
getPromptCursorPlacement,
getPromptReturnKeyAction,
isPromptCursorAtWrapBoundary,
isClearImageAttachmentsShortcut,
removeCurrentSlashToken,
resolvePromptTerminalCursorPosition,
toggleSkillSelection,
renderBufferWithCursor,
buildInitPromptSubmission,
Expand Down Expand Up @@ -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 }
);
});
58 changes: 37 additions & 21 deletions src/ui/components/MessageView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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}
/>
);
}

Expand Down Expand Up @@ -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) {
Expand All @@ -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,
Expand Down
Loading
Loading