feat(ui): 改进代码块和确认提示的显示效果

- 在 MessageArea 中禁用代码块的纯文本渲染，以支持语法高亮
- 简化 ConfirmationStage 中的确认标题，移除冗余的"权限确认:"前缀
- 移除 useCommandHandler 中最大轮次确认的硬编码标题
- 重构 ConfirmationPrompt 组件，不再显示副标题，动态设置主标题
- 在 rawStreamRenderer 中为代码块和 diff 添加视觉边框和语法着色

Author: echoVic

packages/cli/src/tools/execution/PipelineStages.ts

@@ -394,7 +394,7 @@ export class ConfirmationStage implements PipelineStage {
 
       // 从权限检查结果构建确认详情
       const confirmationDetails = {
-        title: `权限确认: ${signature}`,
+        title: signature,
         message: confirmationReason || '此操作需要用户确认',
         kind: tool.kind, // 工具类型，用于 ACP 权限模式判断
         details: this.generatePreviewForTool(tool.name, execution.params),

packages/cli/src/ui/components/ConfirmationPrompt.tsx

@@ -30,13 +30,6 @@ interface ConfirmationContentProps {
 const ConfirmationContent = React.memo<ConfirmationContentProps>(
   ({ details, headerColor, isPlanModeExit, isPlanModeEnter, terminalWidth }) => (
     <>
-      {/* 副标题：显示工具签名等上下文信息（如 "Bash(git status)"） */}
-      {details.title && (
-        <Box marginBottom={1}>
-          <Text dimColor>{details.title}</Text>
-        </Box>
-      )}
-
       <Box marginBottom={1}>
         <Text>{details.message}</Text>
       </Box>
@@ -292,8 +285,8 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = React.memo(
       if (isMaxTurnsExceeded) {
         return { color: 'yellow' as const, title: '已达最大轮次' };
       }
-      return { color: 'yellow' as const, title: '操作确认' };
-    }, [isPlanModeExit, isPlanModeEnter, isMaxTurnsExceeded]);
+      return { color: 'yellow' as const, title: details.title || '操作确认' };
+    }, [isPlanModeExit, isPlanModeEnter, isMaxTurnsExceeded, details.title]);
 
     return (
       <Box

packages/cli/src/ui/components/MessageArea.tsx

@@ -239,7 +239,7 @@ export const MessageArea: React.FC = React.memo(() => {
           hidePrefix={hidePrefix}
           noMargin={true}
           blocksOverride={blocksToRender}
-          renderCodeBlocksAsPlainText={true}
+          renderCodeBlocksAsPlainText={false}
         />
       </Box>,
     ]);

packages/cli/src/ui/hooks/useCommandHandler.ts

@@ -250,7 +250,6 @@ export const useCommandHandler = (
               ? async (data: { turnsCount: number }) => {
                   const response = await confirmationHandler.requestConfirmation({
                     type: 'maxTurnsExceeded',
-                    title: '对话轮次上限',
                     message: `已进行 ${data.turnsCount} 轮对话。是否继续？`,
                     risks: ['继续执行可能导致更长的等待时间', '可能产生更多的 API 费用'],
                   });

packages/cli/src/ui/utils/rawStreamRenderer.ts

@@ -100,6 +100,7 @@ export function renderTail(
   const outputLines: string[] = [];
   const theme = themeManager.getTheme();
   const indent = ' '.repeat(state.prefixIndent);
+  const borderColor = chalk.dim.hex(theme.colors.border.light);
 
   // 隐藏行提示
   if (hiddenLines > 0) {
@@ -108,27 +109,74 @@ export function renderTail(
     );
   }
 
+  // 代码块模式：从 lines 中分离 fence 行和实际代码
+  const isCodeMode = mode === 'code';
+  const isDiffMode = mode === 'diff';
+  let codeLang = '';
+  let contentLines = lines;
+
+  if (isCodeMode && lines.length > 0) {
+    // 第一行是 fence（如 "```typescript"），解析语言并跳过
+    const fenceMatch = lines[0].match(/^```(\w+)?/);
+    codeLang = fenceMatch?.[1] || '';
+    contentLines = lines.slice(1);
+  } else if (isDiffMode && lines.length > 0 && lines[0] === '<<<DIFF>>>') {
+    contentLines = lines.slice(1);
+  }
+
+  const visibleLines = contentLines.slice(-maxDisplayLines);
+
+  // 代码块：渲染顶部边框 + 语言标签
+  if (isCodeMode && hiddenLines === 0) {
+    const langLabel = codeLang
+      ? ` ${chalk.hex(theme.colors.text.secondary)(codeLang)}`
+      : '';
+    outputLines.push(`${indent}${borderColor('╭─')}${langLabel}`);
+  }
+
   // 内容行
-  const visibleLines = lines.slice(-maxDisplayLines);
   for (let i = 0; i < visibleLines.length; i++) {
     const line = visibleLines[i];
     let prefix = indent;
 
-    // 首行前缀
-    if (i === 0 && !hidePrefix && state.isFirstRender) {
+    // 首行前缀（仅 text 模式使用 bullet）
+    if (i === 0 && !hidePrefix && state.isFirstRender && !isCodeMode && !isDiffMode) {
       prefix = chalk.bold.hex(theme.colors.success)('• ') + ' ';
       state.isFirstRender = false;
     }
 
     // 截断超宽行
-    const maxContentWidth = state.terminalWidth - state.prefixIndent - 2;
+    const borderExtra = isCodeMode ? 4 : 0; // "│ " 占 2 字符 + 2 边距
+    const maxContentWidth = state.terminalWidth - state.prefixIndent - 2 - borderExtra;
     let displayLine = line;
     if (stringWidth(line) > maxContentWidth) {
       // 简单截断（不处理 ANSI，因为 tail 是纯文本）
       displayLine = line.slice(0, maxContentWidth);
     }
 
-    outputLines.push(`${prefix}${displayLine}`);
+    if (isCodeMode) {
+      // 代码块行：添加左边框
+      outputLines.push(`${indent}${borderColor('│')} ${displayLine}`);
+    } else if (isDiffMode) {
+      // Diff 行：按前缀着色
+      const trimmed = displayLine;
+      if (trimmed.startsWith('+')) {
+        outputLines.push(`${prefix}${chalk.green(displayLine)}`);
+      } else if (trimmed.startsWith('-')) {
+        outputLines.push(`${prefix}${chalk.red(displayLine)}`);
+      } else if (trimmed.startsWith('@@')) {
+        outputLines.push(`${prefix}${chalk.dim(displayLine)}`);
+      } else {
+        outputLines.push(`${prefix}${displayLine}`);
+      }
+    } else {
+      outputLines.push(`${prefix}${displayLine}`);
+    }
+
+    // 首次渲染标记（代码块和 diff 模式在首行已输出边框，此处仍需标记）
+    if (i === 0 && !hidePrefix && state.isFirstRender) {
+      state.isFirstRender = false;
+    }
   }
 
   // 差量渲染：对比上一帧，只更新变化的行