dgxay-code-cli 1.0.0 → 1.1.0

package/src/cli/render.js

@@ -3,30 +3,27 @@
 /**
  * 流式渲染：把 agent 事件流翻译成终端输出。
  *
- * 关键约束（来自真实 Windows 控制台的实测）：不能依赖「光标上移 + 清行」来重绘。
- * 很多终端（尤其是某些 Windows 控制台组合）会忽略 `\x1b[nA`，
- * 于是每次重绘都会把整块内容当成新行往下追加，出现「一段一行」的堆积。
+ * 终端兼容性：只用 `\r` 回行首、空格擦尾、`\b` 退光标这些最基础能力，
+ * 不依赖光标上移（部分 Windows 控制台会忽略）。
  *
- * 因此只使用所有终端都支持的原始能力：`\r` 回到行首、空格覆盖清尾，绝不回退到上面的行。
- *
- * 渲染策略：
- *   - 流式阶段：只在**最后一行**用 \r 实时刷新（纯文本，不解析 Markdown），
- *     用户看到的是一行不断变长的文字；
- *   - 收尾阶段：抹掉这行预览，再用 Markdown 渲染器把整段完整输出一次，
- *     表格 / 代码块 / 标题才能正确对齐，且只发生一次。
+ * 三段输出：
+ *   1. 思考：实时显示计时 + 思考内容（超长时只保留末尾几行），结束后折叠成一行摘要；
+ *   2. 正文：流式期间只在最后一行刷新预览，结束时一次性按 Markdown 排版；
+ *   3. 工具：单行状态 + 结果摘要。
  */
 
 const { COLORS, SIGN, displayWidth, truncate, termWidth, renderMarkdown } = require('./ansi');
+const { t } = require('./i18n');
 
-const TOOL_TITLES = {
-  list_directory: '列出目录',
-  read_file: '读取文件',
-  write_file: '写入文件',
-  create_directory: '创建目录',
-  delete_path: '删除',
-  run_command: '执行命令',
-  fetch_url: '访问网络',
-  install_mcp_server: '安装 MCP'
+const TOOL_KEYS = {
+  list_directory: 'tool_list',
+  read_file: 'tool_read',
+  write_file: 'tool_write',
+  create_directory: 'tool_mkdir',
+  delete_path: 'tool_delete',
+  run_command: 'tool_command',
+  fetch_url: 'tool_fetch',
+  install_mcp_server: 'tool_mcp'
 };
 
 function toolSummary(name, argsRaw) {
@@ -36,14 +33,14 @@ function toolSummary(name, argsRaw) {
   } catch {
     args = {};
   }
-  const title = TOOL_TITLES[name] || name;
+  const title = t(TOOL_KEYS[name] || name);
   const target = args.path || args.url || args.command || args.name || '';
   return target
     ? `${title} ${truncate(String(target).replace(/\s+/g, ' '), Math.max(20, termWidth() - 24))}`
     : title;
 }
 
-/** 把一行过长的文本按显示宽度折开（流式预览用，纯文本） */
+/** 按显示宽度折行（纯文本预览用） */
 function foldLine(text, width) {
   const limit = Math.max(20, width);
   if (displayWidth(text) <= limit) return [text];
@@ -64,30 +61,40 @@ function foldLine(text, width) {
   return out.length ? out : [''];
 }
 
+function formatSeconds(ms) {
+  const seconds = ms / 1000;
+  return seconds < 10 ? `${seconds.toFixed(1)}s` : `${Math.round(seconds)}s`;
+}
+
 class StreamRenderer {
   constructor(options = {}) {
     this.out = options.output || process.stdout;
     this.editor = options.editor || null;
-    // 只有真正的交互终端才做「行内实时刷新」；管道输出保持纯净
     const tty = Boolean(this.out.isTTY);
     this.live = options.redraw !== undefined ? Boolean(options.redraw) : tty;
     this.width = Math.max(20, (options.width || termWidth()) - 1);
+    /** 是否显示思考内容（默认 true；DGXAY_SHOW_REASONING=0 可关闭） */
+    this.showReasoning = process.env.DGXAY_SHOW_REASONING !== '0';
+    /** 思考内容最多显示几行 */
+    this.reasoningLines = Number(process.env.DGXAY_REASONING_LINES) || 6;
+    this.timer = null;
     this.reset();
   }
 
   reset() {
     this.started = false;
-    /** 已收到的完整正文 */
     this.text = '';
-    /** 当前物理行屏幕上的内容（用于 \r 覆盖清尾） */
     this.onScreen = '';
-    /** 收到的换行数，用来决定收尾时是否需要重排 */
     this.newlines = 0;
     this.tools = new Map();
+
     this.reasoning = '';
     this.reasoningStart = 0;
     this.reasoningMs = 0;
+    this.reasoningRows = 0;
+    this.reasoningDone = false;
     this.suspended = false;
+    this.statusShown = false;
   }
 
   /* ------------------------------ 编辑器协调 ------------------------------ */
@@ -104,39 +111,109 @@ class StreamRenderer {
     this.editor?.resume();
   }
 
-  /* ------------------------------ 行内刷新 ------------------------------ */
+  /* ------------------------------ 基础绘制 ------------------------------ */
 
-  /**
-   * 把「当前物理行」替换成 text：\r 回到行首，写出 text，再用空格擦掉多余的尾部。
-   * 全程不换行、不上移，因此无论终端是否支持光标控制都不会堆积。
-   */
   repaintLine(text) {
     const visible = displayWidth(text);
     const previous = displayWidth(this.onScreen);
     const pad = Math.max(0, previous - visible);
     this.out.write(`\r${text}${' '.repeat(pad)}`);
-    if (pad) this.out.write(`\b`.repeat(pad));
+    if (pad) this.out.write('\b'.repeat(pad));
     this.onScreen = text;
   }
 
-  /** 结束当前物理行 */
   breakLine() {
     this.out.write('\n');
     this.onScreen = '';
   }
 
-  /* ------------------------------ 正文 ------------------------------ */
-
   ensureHeader() {
     if (this.started) return;
     this.started = true;
     this.suspend();
-    this.out.write(`\n${COLORS.accent('•')} ${COLORS.bold('DgxayCode')}\n`);
+    this.out.write(`\n${COLORS.accent('•')} ${COLORS.bold(t('assistant'))}\n`);
     this.onScreen = '';
   }
 
-  /** 流式阶段：交互终端才刷新预览行；管道模式下只累积，收尾时一次性输出 */
+  /* ------------------------------ 思考 ------------------------------ */
+
+  /** 开始思考：立刻给出提示，用户不用干等 */
+  beginReasoning() {
+    this.ensureHeader();
+    if (this.reasoningStart) return;
+    this.reasoningStart = Date.now();
+    this.reasoningDone = false;
+    this.reasoningRows = 0;
+    this.paintReasoning();
+    // 每 100ms 刷新一次计时，让用户看到“还在跑”
+    this.timer = setInterval(() => this.paintReasoning(), 100);
+    this.timer.unref?.();
+  }
+
+  /**
+   * 把已收到的思考内容画出来（末尾若干行），并带上实时计时。
+   * 只用 \r + 空格覆盖当前物理行，不依赖光标上移：
+   * - 计时和最新一行思考内容合并在同一行刷新；
+   * - 更早的思考内容不逐行打印，避免需要回退光标。
+   */
+  paintReasoning() {
+    if (!this.reasoningStart || this.reasoningDone) return;
+    if (!this.live) return;
+    const elapsed = Date.now() - this.reasoningStart;
+    const width = Math.max(20, this.width - 6);
+
+    if (!this.showReasoning) {
+      this.repaintLine(COLORS.faint(`  ${SIGN.run} ${t('thinking')} ${formatSeconds(elapsed)}`));
+      return;
+    }
+
+    // 最新一行思考内容（把换行压成空格，保持单行刷新）
+    const latest = this.reasoning.replace(/\s+/g, ' ').trim();
+    const tailText = latest.length > width ? `…${latest.slice(-width)}` : latest;
+    const head = `${COLORS.faint(`  ${SIGN.run} ${t('thinking')} ${formatSeconds(elapsed)}`)}`;
+    this.repaintLine(tailText ? `${head} ${COLORS.faint(tailText)}` : head);
+  }
+
+  /** 思考结束：当前位置就是摘要行，直接覆盖即可，不需要上移光标 */
+  endReasoning() {
+    if (!this.reasoningStart || this.reasoningDone) return;
+    this.reasoningDone = true;
+    this.reasoningMs = Date.now() - this.reasoningStart;
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    if (this.live) {
+      // 覆盖掉“思考中”的实时行
+      this.repaintLine('');
+      this.out.write('\r');
+      this.onScreen = '';
+    }
+    if (this.reasoning.trim()) {
+      this.out.write(
+        `${COLORS.faint(`  ⌁ ${t('thought_for')} ${formatSeconds(this.reasoningMs)} · ${this.reasoning.length} ${t('chars')}`)}\n`
+      );
+      // 详细内容用灰色缩进段落呈现，最多若干行，避免刷屏
+      if (this.showReasoning) {
+        const width = Math.max(20, this.width - 4);
+        const lines = [];
+        for (const line of this.reasoning.split('\n')) {
+          for (const piece of foldLine(line, width)) lines.push(piece);
+        }
+        const max = Math.max(1, this.reasoningLines);
+        const shown = lines.length > max ? lines.slice(-max) : lines;
+        if (lines.length > max) this.out.write(`${COLORS.faint('  │ …')}\n`);
+        for (const piece of shown) {
+          if (piece.trim()) this.out.write(`${COLORS.faint(`  │ ${piece}`)}\n`);
+        }
+      }
+    }
+  }
+
+  /* ------------------------------ 正文 ------------------------------ */
+
   writeText(text) {
+    this.endReasoning();
     this.ensureHeader();
     this.text += text;
     this.newlines += (text.match(/\n/g) || []).length;
@@ -145,20 +222,14 @@ class StreamRenderer {
     const lines = this.text.split('\n');
     const tail = lines[lines.length - 1];
     const folded = foldLine(tail, this.width);
-    // 只保留最后一段可视宽度内的一行，避免预览超出屏幕后折行导致覆盖错位
-    const preview = folded[folded.length - 1];
-    this.repaintLine(preview);
+    this.repaintLine(folded[folded.length - 1]);
   }
 
-  /**
-   * 收尾：抹掉预览行，按 Markdown 完整输出正文（只发生一次）。
-   */
   finalizeText() {
     if (!this.text) {
       this.onScreen = '';
       return;
     }
-    // 预览行 → 清空（仅交互终端才有预览行）
     if (this.live && this.onScreen) this.repaintLine('');
     const rendered = renderMarkdown(this.text, { width: this.width });
     if (rendered && rendered.trim()) {
@@ -176,48 +247,50 @@ class StreamRenderer {
     switch (event.type) {
       case 'status':
         return;
-      case 'delta':
-        if (!event.text) return;
-        this.writeText(event.text);
-        return;
       case 'reasoning':
         if (!event.text) return;
-        if (!this.reasoningStart) this.reasoningStart = Date.now();
         this.reasoning += event.text;
-        this.ensureHeader();
+        this.beginReasoning();
+        if (this.showReasoning && this.live) this.paintReasoning();
+        return;
+      case 'delta':
+        if (!event.text) return;
+        this.writeText(event.text);
         return;
       case 'tool':
         this.onTool(event);
         return;
       case 'review-start':
         this.endInline();
-        this.out.write(`${COLORS.faint(`  ${SIGN.run} 正在自动审查 ${event.name}…`)}\n`);
+        this.out.write(`${COLORS.faint(`  ${SIGN.run} ${t('reviewing')} ${event.name}…`)}\n`);
         return;
       case 'review':
         this.endInline();
         if (event.decision === 'allow') {
           this.out.write(
-            `${COLORS.green(`  ${SIGN.ok}`)} ${COLORS.green('自动审查放行')} ${COLORS.faint(
+            `${COLORS.green(`  ${SIGN.ok}`)} ${COLORS.green(t('review_allow'))} ${COLORS.faint(
               `${event.reviewer || ''} · ${event.reason || ''}`
             )}\n`
           );
         } else {
           this.out.write(
-            `${COLORS.yellow(`  ${SIGN.run}`)} ${COLORS.yellow('自动审查判定可疑，转交确认')} ${COLORS.faint(
-              event.reason || ''
-            )}\n`
+            `${COLORS.yellow(`  ${SIGN.run}`)} ${COLORS.yellow(t('review_suspect'))} ${COLORS.faint(event.reason || '')}\n`
           );
         }
         return;
       case 'waiting':
         this.endInline();
-        this.out.write(`${COLORS.faint(`  ${SIGN.run} 等待用户确认 ${event.name}…`)}\n`);
+        this.out.write(`${COLORS.faint(`  ${SIGN.run} ${t('waiting_confirm')} ${event.name}…`)}\n`);
         return;
       case 'file':
         this.endInline();
         this.out.write(
           `${COLORS.green(`  ${SIGN.ok}`)} ${COLORS.dim(
-            event.action === 'deleted' ? '删除' : event.action === 'updated' ? '更新' : '创建'
+            event.action === 'deleted'
+              ? t('file_deleted')
+              : event.action === 'updated'
+                ? t('file_updated')
+                : t('file_created')
           )} ${COLORS.cyan(event.display || event.path)}${event.bytes ? COLORS.faint(` (${event.bytes} B)`) : ''}\n`
         );
         return;
@@ -231,8 +304,8 @@ class StreamRenderer {
     }
   }
 
-  /** 正文中途插入了其他内容（工具调用、审查提示等）：先把已有正文按 Markdown 落地 */
   endInline() {
+    this.endReasoning();
     if (this.text) this.finalizeText();
     if (this.onScreen) this.breakLine();
   }
@@ -264,61 +337,59 @@ class StreamRenderer {
       );
     }
     if (event.review?.reason) {
-      this.out.write(
-        `${COLORS.faint(`     ${event.review.source === 'auto' ? '自动审查' : '确认'} · ${event.review.reason}`)}\n`
-      );
+      const source = event.review.source === 'auto' ? t('reviewing') : t('approval_op');
+      this.out.write(`${COLORS.faint(`     ${source} · ${event.review.reason}`)}\n`);
     }
   }
 
   toolDetail(event) {
     const output = String(event.output || '');
-    if (event.name === 'read_file') return `${output.length} 字符`;
+    if (event.name === 'read_file') return `${output.length} ${t('chars')}`;
     if (event.name === 'run_command') {
       const exit = output.match(/\[exit\] code=(\S+)/);
-      if (exit) return `退出码 ${exit[1]}`;
-      return `${output.split('\n').filter(Boolean).length} 行输出`;
+      if (exit) return `${t('exit_code')} ${exit[1]}`;
+      return `${output.split('\n').filter(Boolean).length} ${t('lines')}`;
     }
-    if (event.name === 'list_directory') return `${output.split('\n').filter(Boolean).length} 项`;
+    if (event.name === 'list_directory') return `${output.split('\n').filter(Boolean).length} ${t('items')}`;
     if (event.name === 'fetch_url') {
       const match = output.match(/^HTTP (\d{3})/);
       return match ? `HTTP ${match[1]}` : '';
     }
-    if (event.name === 'install_mcp_server') return '已保存配置';
+    if (event.name === 'install_mcp_server') return 'saved';
     return '';
   }
 
   finish(event) {
-    if (this.reasoningStart && !this.reasoningMs) this.reasoningMs = Date.now() - this.reasoningStart;
     const hadText = Boolean(this.text.trim());
+    this.endReasoning();
 
     if (event.type === 'error') {
       this.endInline();
-      this.out.write(`\n${COLORS.red(`${SIGN.fail} 出错了：${event.message}`)}\n`);
+      this.out.write(`\n${COLORS.red(`${SIGN.fail} ${t('generation_error')}: ${event.message}`)}\n`);
     } else if (event.type === 'aborted') {
       this.finalizeText();
-      this.out.write(`${COLORS.yellow(`${SIGN.bullet} 已停止生成`)}\n`);
+      this.out.write(`${COLORS.yellow(`${SIGN.bullet} ${t('stopped')}`)}\n`);
     } else {
       this.finalizeText();
       if (!hadText && !this.tools.size && !this.reasoning.trim()) {
-        this.out.write(`${COLORS.faint('（模型没有返回内容）')}\n`);
+        this.out.write(`${COLORS.faint(t('no_content'))}\n`);
       }
     }
 
-    if (this.reasoning.trim()) {
-      const ms = this.reasoningMs || 0;
-      const seconds = ms > 0 ? (ms / 1000).toFixed(ms < 10000 ? 1 : 0) : '0';
-      this.out.write(`${COLORS.faint(`  ⌁ 已思考 ${seconds}s · ${this.reasoning.length} 字符`)}\n`);
-    }
     if (event.usage) {
       const usage = event.usage;
       const input = usage.input_tokens ?? usage.prompt_tokens ?? usage.inputTokens ?? null;
       const output = usage.output_tokens ?? usage.completion_tokens ?? usage.outputTokens ?? null;
       if (input != null || output != null) {
-        this.out.write(`${COLORS.faint(`  用量 ${input ?? '?'} in / ${output ?? '?'} out`)}\n`);
+        this.out.write(`${COLORS.faint(`  ${input ?? '?'} ${t('in_out')} ${output ?? '?'} ${t('out')}`)}\n`);
       }
     }
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
     this.resume();
   }
 }
 
-module.exports = { StreamRenderer, toolSummary, TOOL_TITLES, foldLine };
+module.exports = { StreamRenderer, toolSummary, foldLine, TOOL_KEYS, formatSeconds };