refactor(BtwPanel): Add Markdown Rendering

Author: MayDay-wpf

source/ui/components/common/MarkdownRenderer.tsx

@@ -163,6 +163,17 @@ function trimLines(lines: string[]): string[] {
 	return result;
 }
 
+export function renderMarkdownToLines(content: string): string[] {
+	try {
+		const sanitized = sanitizeMarkdownContent(content);
+		const rendered = marked.parse(sanitized) as string;
+		if (!rendered || typeof rendered !== 'string') return content.split('\n');
+		return trimLines(rendered.split('\n'));
+	} catch {
+		return content.split('\n');
+	}
+}
+
 export default function MarkdownRenderer({content}: Props) {
 	try {
 		const sanitizedContent = sanitizeMarkdownContent(content);

source/ui/components/panels/BtwPanel.tsx

@@ -5,45 +5,13 @@ import {useI18n} from '../../../i18n/I18nContext.js';
 import {useTerminalSize} from '../../../hooks/ui/useTerminalSize.js';
 import {streamBtwResponse} from '../../../utils/commands/btwStream.js';
 import {visualWidth} from '../../../utils/core/textUtils.js';
+import {renderMarkdownToLines} from '../common/MarkdownRenderer.js';
 
 type Step = 'streaming' | 'done' | 'error';
 
 const VISIBLE_ROWS = 8;
 const DEBOUNCE_MS = 80;
 
-/**
- * Split text into visual lines that each fit within `maxWidth` columns.
- * Accounts for wide characters (CJK, emoji) via visualWidth.
- */
-function toVisualLines(text: string, maxWidth: number): string[] {
-	if (maxWidth <= 0) return text.split('\n');
-
-	const result: string[] = [];
-	for (const logical of text.split('\n')) {
-		if (!logical || visualWidth(logical) <= maxWidth) {
-			result.push(logical);
-			continue;
-		}
-
-		const chars = [...logical];
-		let cur = '';
-		let curW = 0;
-		for (const ch of chars) {
-			const w = visualWidth(ch);
-			if (curW + w > maxWidth) {
-				result.push(cur);
-				cur = ch;
-				curW = w;
-			} else {
-				cur += ch;
-				curW += w;
-			}
-		}
-		if (cur) result.push(cur);
-	}
-	return result;
-}
-
 interface Props {
 	prompt: string;
 	onClose: () => void;
@@ -68,8 +36,8 @@ export const BtwPanel: React.FC<Props> = ({prompt, onClose}) => {
 	const contentWidth = Math.max(1, columns - 4);
 
 	const visualLines = useMemo(
-		() => toVisualLines(response, contentWidth),
-		[response, contentWidth],
+		() => (response ? renderMarkdownToLines(response) : []),
+		[response],
 	);
 
 	const flushPending = useCallback(() => {