feat: markdown 表格闭合边框渲染 + CJK/emoji 宽度适配

src/tests/markdown.test.ts

@@ -1,11 +1,26 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
-import { renderMarkdown } from "../ui";
+import { renderMarkdown, renderMarkdownSegments } from "../ui";
 
 function stripAnsi(text: string): string {
   return text.replace(/\[[0-9;]*m/g, "");
 }
 
+function visualWidth(text: string): number {
+  let width = 0;
+  for (const ch of text) {
+    const code = ch.codePointAt(0) ?? 0;
+    width +=
+      ch.length >= 2 ||
+      (code >= 0x2e80 && code <= 0xa4cf) ||
+      (code >= 0xf900 && code <= 0xfaff) ||
+      (code >= 0xff00 && code <= 0xffe6)
+        ? 2
+        : 1;
+  }
+  return width;
+}
+
 test("renderMarkdown returns empty string for empty input", () => {
   assert.equal(renderMarkdown(""), "");
 });
@@ -38,3 +53,41 @@ test("renderMarkdown handles plain text unchanged in stripped form", () => {
   const result = stripAnsi(renderMarkdown(text));
   assert.equal(result, text);
 });
+
+test("renderMarkdownSegments renders CJK table cells within the requested width", () => {
+  const table = [
+    "| 编号 | 状态 | 任务 | 备注 |",
+    "|---|---|---|---|",
+    "| 1 | ✅ | 写代码 | 这是一个很长很长的中文备注用于验证表格在终端宽度不足时是否能够自动换行而不是溢出 |",
+  ].join("\n");
+
+  const segment = renderMarkdownSegments(table, 60).find((item) => item.kind === "table");
+  assert.ok(segment);
+  const lines = stripAnsi(segment.body).split("\n");
+  assert.equal(lines[0].startsWith("┌"), true);
+  assert.equal(lines.at(-1)?.startsWith("└"), true);
+  assert.equal(
+    lines.every((line) => visualWidth(line) <= 60),
+    true
+  );
+  assert.equal(lines.length > 4, true);
+});
+
+test("renderMarkdown preserves empty table cells", () => {
+  const result = stripAnsi(renderMarkdown("| A | B | C |\n|---|---|---|\n|x||z|", 80));
+  const bodyRow = result.split("\n").find((line) => line.includes("x") && line.includes("z"));
+  assert.ok(bodyRow);
+  assert.equal((bodyRow.match(/│/g) ?? []).length, 4);
+});
+
+test("renderMarkdown keeps text separated from rendered table blocks", () => {
+  const result = stripAnsi(renderMarkdown("Before\n| A | B |\n|---|---|\n| 1 | 2 |\nAfter", 40));
+  assert.equal(result.includes("Before\n┌"), true);
+  assert.equal(result.includes("┘\nAfter"), true);
+});
+
+test("renderMarkdown does not render tables inside code fences", () => {
+  const result = stripAnsi(renderMarkdown("```md\n| A | B |\n|---|---|\n| 1 | 2 |\n```", 40));
+  assert.equal(result.includes("| A | B |"), true);
+  assert.equal(result.includes("┌"), false);
+});

src/ui/components/MessageView/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { renderMarkdown } from "./markdown";
+import { renderMarkdown, renderMarkdownSegments } from "./markdown";
 import {
   buildThinkingSummary,
   buildToolSummary,
@@ -66,8 +66,23 @@ export function MessageView({ message, collapsed, width = 80 }: MessageViewProps
         <Box alignSelf="stretch">
           <Text color="#229ac3">✦</Text>
         </Box>
-        <Box flexGrow={1} width={contentWidth}>
-          {content ? <Text wrap="wrap">{renderMarkdown(content)}</Text> : null}
+        <Box flexGrow={1} width={contentWidth} flexDirection="column">
+          {content
+            ? renderMarkdownSegments(content, Math.max(20, contentWidth - 4)).map((seg, i) => {
+                if (seg.kind === "table") {
+                  return (
+                    <Box key={i} flexDirection="column">
+                      {seg.body.split("\n").map((line, lineIndex) => (
+                        <Text key={lineIndex} wrap="truncate-end">
+                          {line}
+                        </Text>
+                      ))}
+                    </Box>
+                  );
+                }
+                return <Text key={i}>{seg.body}</Text>;
+              })
+            : null}
         </Box>
       </Box>
     );