foliko 1.1.62 → 1.1.63

package/.agent/sessions/test-session.json

@@ -0,0 +1,16 @@
+{
+  "sessionId": "test-session",
+  "messages": [
+    {
+      "role": "user",
+      "content": "测试消息"
+    }
+  ],
+  "variables": {},
+  "metadata": {
+    "createdAt": 1779443838550,
+    "lastActive": 1779443838550,
+    "messageCount": 0,
+    "compressionCount": 0
+  }
+}

package/cli/src/ui/chat-ui.js

@@ -12,6 +12,8 @@ const { renderLine } = require('../utils/markdown');
 const { MessageBubble } = require('./message-bubble');
 const Queue=require('js-queue');
 const hl = require('cli-highlight');
+const { renderDiffWithHeader } = require('../utils/render-diff');
+const { FooterBar } = require('./footer-bar');
 const queue=new Queue();
 // Foliko 主色（蓝绿）
 const folikoPrimary = chalk.hex('#2A9D8F');
@@ -100,6 +102,39 @@ class ChatUI {
     this.editor.onSubmit=this.handleOnSubmit.bind(this)
     this.tui.addChild(this.editor);
     this.tui.setFocus(this.editor);
+
+    // 底部状态栏（使用 Text 组件，动态更新内容）
+    this.footerBar = new FooterBar(agent, {
+      maxContextTokens: agent._chatHandler?._maxContextTokens || 100000,
+    });
+    this._footerText = new Text('', 0, 0);
+    this.footerContainer = new Container(1); // 固定高度 1 行
+    this.footerContainer.addChild(this._footerText);
+    this.tui.addChild(this.footerContainer);
+
+    // 监听 framework 的 agent:usage 事件（绕过 queue，更可靠）
+    if (agent.framework) {
+      agent.framework.on('agent:usage', (data) => {
+        if (this.footerBar && data.usage) {
+          const u = data.usage;
+          const input = u.promptTokens || u.prompt_tokens || 0;
+          const output = u.completionTokens || u.completion_tokens || 0;
+          this.footerBar.updateUsage(input, output);
+          const footerLines = this.footerBar.render(this.tui.width || process.stdout.columns || 80);
+          if (footerLines.length > 0 && this._footerText) {
+            this._footerText.setText(footerLines[0]);
+          }
+          this.tui.requestRender();
+        }
+      });
+    }
+
+    // 初始渲染 footer（refreshFromAgent 内部会主动加载历史消息）
+    this.footerBar.refreshFromAgent();
+    const initialFooter = this.footerBar.render(this.tui.width || 80);
+    if (initialFooter.length > 0) {
+      this._footerText.setText(initialFooter[0]);
+    }
     const tooler=new Loader(
           tui,
           (s) => chalk.green(s),       // indicatorColorFn
@@ -316,7 +351,10 @@ class ChatUI {
   sendMessage(message){
     const self=this;
     queue.add(function(){
-      self.agent.sendMessage(message, { sessionId:self.sessionId }).then(this.next).catch(self.clear_message_done.bind(self));
+      var next = this.next;
+      self.agent.sendMessage(message, { sessionId:self.sessionId }).then(next).catch(function(e){
+        self.clear_message_done();
+      });
     })
     
     this.tui.setFocus(this.editor);
@@ -370,10 +408,10 @@ class ChatUI {
     }
   }
 
-  create_message(text, icon="",isBot=false){
+  create_message(text, icon="", isBot=false, bgFn=null){
     // 使用 MessageBubble 组件实现左侧图标 + 右侧 markdown 布局
-    // 无额外 padding，Markdown 自身的段落间距已经足够
-    const bubble = new MessageBubble(icon, text, isBot, markdownTheme, 0, 0, 1);
+    // bgFn: 可选背景色函数 (line) => coloredLine，用于代码块等整块背景
+    const bubble = new MessageBubble(icon, text, isBot, markdownTheme, 0, 0, 1, bgFn);
     const children = this.messageContainer.children;
     children.splice(children.length, 0, bubble);
     this.tui.requestRender();
@@ -423,6 +461,15 @@ class ChatUI {
     while (msgChildren.length > 1) {
       msgChildren.splice(1, 1);
     }
+
+    // 重置 footer 统计
+    if (this.footerBar) {
+      this.footerBar.reset();
+      const footerLines = this.footerBar.render(this.tui.width || 80);
+      if (footerLines.length > 0 && this._footerText) {
+        this._footerText.setText(footerLines[0]);
+      }
+    }
     this.tui.requestRender();
   }
 
@@ -516,16 +563,49 @@ class ChatUI {
         const result = chunk.result;
         const shortResult = typeof result === 'string' ? result.slice(0, 30) : JSON.stringify(result).slice(0, 30);
         this.tooler.show(`${chalk.green('[Tool]')} ${folikoGold(chunk.toolName)} ${chalk.gray(shortResult+'...')}`)
+
+        // 如果是 edit/edit_file 的结果并且包含 diff，渲染彩色 diff
+        if (chunk.toolName === 'edit' || chunk.toolName === 'edit_file') {
+          let resultObj = result;
+          // 字符串需要解析
+          if (typeof result === 'string') {
+            try { resultObj = JSON.parse(result); } catch (e) { resultObj = null; }
+          }
+          if (resultObj && resultObj.diff) {
+            const diffContent = renderDiffWithHeader(resultObj.diff, resultObj.filePath);
+            const bgColor = chalk.bgHex('#1a1a2e');
+            this.create_message(diffContent, chalk.yellow('▸ '), true, (line) => bgColor(line));
+            this.tooler.show(`${chalk.green('[Diff]')} ${folikoGold(resultObj.filePath)}`);
+          }
+        }
         // setTimeout(() => this.tooler.hide(), 3000);
-      }else if (chunk.type === 'error') {
-        this.tooler.show(chalk.red(`[Error] ${chunk.error}`))
+      } else if (chunk.type === 'usage') {
+                // 直接从 stream 获取用量数据，立即更新 footer
+        if (this.footerBar) {
+          this.footerBar.updateUsage(chunk.inputTokens || 0, chunk.outputTokens || 0);
+          const footerLines = this.footerBar.render(this.tui.width || process.stdout.columns || 80);
+          if (footerLines.length > 0 && this._footerText) {
+            this._footerText.setText(footerLines[0]);
+          }
+          this.tui.requestRender();
+        }
       }
     });
     this.sessionScope.on('message:start', async () => {
       this.loader.show();
     })
-    this.sessionScope.on('message:complete', async ({ content }) => {
+    this.sessionScope.on('message:complete', async ({ content, requestId }) => {
       try{
+        // 更新 footer 中的 token 用量和模型信息
+        if (this.footerBar) {
+          this.footerBar.refreshFromAgent();
+          const footerLines = this.footerBar.render(this.tui.width || process.stdout.columns || 80);
+          if (footerLines.length > 0 && this._footerText) {
+            this._footerText.setText(footerLines[0]);
+          }
+          this.tui.requestRender();
+        }
+
         if (!content) {
           const msg = '继续'
           await this.agent.sendMessage(msg, { sessionId:this.sessionId, priority: 1 })

package/cli/src/ui/footer-bar.js

@@ -0,0 +1,263 @@
+/**
+ * FooterBar — 底部状态栏组件
+ *
+ * 类似 pi 的底部栏，显示 token 用量、费用、上下文占比、模型名等信息。
+ * 格式: ↑input ↓output $cost  context%/max  (model-name)
+ */
+
+const chalk = require('chalk').default;
+const { TokenCounter } = require('../../../src/core/token-counter');
+
+// Foliko 配色
+const folikoDim = chalk.hex('#6B7280');
+const folikoAccent = chalk.hex('#2A9D8F');
+const folikoGold = chalk.hex('#E9C46A');
+
+class FooterBar {
+  /**
+   * @param {Object} agent - Agent 实例
+   * @param {Object} options
+   */
+  constructor(agent, options = {}) {
+    this.agent = agent;
+
+    // Token 计算器
+    this._tokenCounter = new TokenCounter();
+
+    // 累积统计
+    this._stats = {
+      inputTokens: 0,
+      outputTokens: 0,
+      cost: 0,
+      contextTokens: 0,
+      maxContextTokens: options.maxContextTokens || 100000,
+      contextPercent: 0,
+    };
+
+    // 上次看到的 usage（用于计算增量）
+    this._lastUsage = null;
+
+    // 模型信息
+    this._modelName = agent.model || 'deepseek-chat';
+    this._thinkingLevel = this._getThinkingLevel();
+
+    // 缓存行
+    this._cachedLine = '';
+  }
+
+  /**
+   * 获取思考级别
+   */
+  _getThinkingLevel() {
+    const chatHandler = this.agent._chatHandler;
+    if (chatHandler && chatHandler._thinkingMode) {
+      return 'thinking';
+    }
+    return 'normal';
+  }
+
+  /**
+   * 格式化数字（千分位）
+   */
+  _formatNum(n) {
+    if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+    if (n >= 1000) return (n / 1000).toFixed(0) + 'K';
+    return String(n);
+  }
+
+  /**
+   * 更新 token 用量
+   * @param {number} inputDelta - 本次输入 token
+   * @param {number} outputDelta - 本次输出 token
+   * @param {number} costDelta - 本次费用
+   * @param {Object} contextInfo - 上下文信息 { current, max }
+   */
+  updateUsage(inputDelta = 0, outputDelta = 0, costDelta = 0, contextInfo = null) {
+    this._stats.inputTokens += inputDelta;
+    this._stats.outputTokens += outputDelta;
+    this._stats.cost += costDelta;
+
+    if (contextInfo) {
+      this._stats.contextTokens = contextInfo.current || this._stats.contextTokens;
+      this._stats.maxContextTokens = contextInfo.max || this._stats.maxContextTokens;
+    }
+
+    if (this._stats.maxContextTokens > 0) {
+      this._stats.contextPercent = (this._stats.contextTokens / this._stats.maxContextTokens) * 100;
+    }
+
+    this._cachedLine = '';
+  }
+
+  /**
+   * 更新模型名
+   */
+  updateModel(modelName) {
+    if (modelName) {
+      this._modelName = modelName;
+      this._cachedLine = '';
+    }
+  }
+
+  /**
+   * 重置统计
+   */
+  reset() {
+    this._stats = {
+      inputTokens: 0,
+      outputTokens: 0,
+      cost: 0,
+      contextTokens: 0,
+      maxContextTokens: 100000,
+      contextPercent: 0,
+    };
+    this._cachedLine = '';
+  }
+
+  /**
+   * 从 agent 刷新数据
+   * 从 messageStore 获取最新一次调用的用量，计算增量后累加
+   */
+  refreshFromAgent() {
+    try {
+      const chatHandler = this.agent._chatHandler;
+      if (!chatHandler) return;
+
+      const sessionId = 'cli_default';
+
+      // 主动加载历史记录（确保从 SessionContext/文件加载历史消息）
+      chatHandler._chatSession.loadHistory(sessionId);
+
+      const messageStore = chatHandler._chatSession.getSessionMessageStore(sessionId);
+      if (!messageStore) return;
+
+      // 1. Token 用量：计算与上次记录的增量
+      if (messageStore.usage) {
+        const u = messageStore.usage;
+        const inputTokens = u.promptTokens || u.prompt_tokens || 0;
+        const outputTokens = u.completionTokens || u.completion_tokens || 0;
+
+        if (this._lastUsage) {
+          // 有上一次记录，计算增量
+          const inputDelta = Math.max(0, inputTokens - this._lastUsage.inputTokens);
+          const outputDelta = Math.max(0, outputTokens - this._lastUsage.outputTokens);
+          if (inputDelta > 0 || outputDelta > 0) {
+            this.updateUsage(inputDelta, outputDelta);
+          }
+        } else {
+          // 第一次，直接设置
+          this._stats.inputTokens = inputTokens;
+          this._stats.outputTokens = outputTokens;
+        }
+        this._lastUsage = { inputTokens, outputTokens };
+      }
+
+      // 2. 上下文 token 估算（使用 TokenCounter）
+      if (messageStore.messages && messageStore.messages.length > 0) {
+        const msgTokens = this._tokenCounter.countMessages(messageStore.messages);
+        this._stats.contextTokens = msgTokens;
+        if (this._stats.maxContextTokens > 0) {
+          this._stats.contextPercent = Math.min(100, (msgTokens / this._stats.maxContextTokens) * 100);
+        }
+      }
+
+      // 3. 模型名
+      this._modelName = chatHandler.model || this._modelName;
+    } catch (e) {
+      // 静默忽略
+    }
+    this._cachedLine = '';
+  }
+
+  /**
+   * 渲染组件
+   * @param {number} width - 终端宽度
+   * @returns {string[]} 行数组
+   */
+  render(width) {
+    if (width <= 0) return [''];
+
+    // 构建状态行
+    const s = this._stats;
+    const parts = [];
+
+    // ↑ input tokens
+    parts.push(folikoGold(`↑${this._formatNum(s.inputTokens)}`));
+
+    // ↓ output tokens
+    parts.push(folikoGold(`↓${this._formatNum(s.outputTokens)}`));
+
+    // $ cost
+    if (s.cost > 0) {
+      parts.push(chalk.white(`$${s.cost.toFixed(3)}`));
+    }
+
+    // context% / max
+    const ctxPercent = Math.round(s.contextPercent);
+    const ctxMax = this._formatNum(s.maxContextTokens);
+    parts.push(chalk.dim(`${ctxPercent}%/${ctxMax}`));
+
+    // 模型名
+    const modelShort = this._modelName.length > 20
+      ? this._modelName.slice(0, 18) + '..'
+      : this._modelName;
+    parts.push(folikoAccent(`(${modelShort})`));
+
+    // 思考级别指示
+    if (this._thinkingLevel === 'thinking') {
+      parts.push(chalk.magenta('🧠'));
+    }
+
+    // 组装
+    let line = parts.join(' ');
+
+    // 计算实际显示宽度（去除 ANSI 编码）
+    const visibleLen = visibleWidth ? visibleWidth(line) : line.length;
+
+    // 如果太长，缩短模型名
+    if (visibleLen > width) {
+      const modelLen = this._modelName.length > 12 ? 10 : this._modelName.length;
+      const shortModel = this._modelName.length > 12
+        ? this._modelName.slice(0, modelLen) + '..'
+        : this._modelName;
+      const shortAccent = folikoAccent(`(${shortModel})`);
+      const shortLine = parts.slice(0, 3).join(' ') + ' ' + chalk.dim(`${ctxPercent}%`) + ' ' + shortAccent;
+      line = shortLine;
+    }
+
+    // 截断到可用宽度
+    if (visibleWidth && visibleWidth(line) > width) {
+      line = truncateToWidth ? truncateToWidth(line, width) : line.slice(0, width);
+    }
+
+    return [line];
+  }
+}
+
+function visibleWidth(text) {
+  // 简易 ANSI 不可见宽度计算
+  const stripped = text.replace(/\x1B\[[0-9;]*m/g, '');
+  return stripped.length;
+}
+
+function truncateToWidth(text, maxWidth) {
+  const stripped = text.replace(/\x1B\[[0-9;]*m/g, '');
+  if (stripped.length <= maxWidth) return text;
+
+  // 需要截断，保留 ANSI 编码不变
+  let result = '';
+  let visLen = 0;
+  const regex = /(\x1B\[[0-9;]*m)|(.)/g;
+  let match;
+  while ((match = regex.exec(text)) !== null && visLen < maxWidth) {
+    if (match[1]) {
+      result += match[1];
+    } else {
+      result += match[2];
+      visLen++;
+    }
+  }
+  return result;
+}
+
+module.exports = { FooterBar };

package/cli/src/ui/message-bubble.js

@@ -12,8 +12,9 @@ class MessageBubble {
    * @param {number} paddingX - 左右内边距
    * @param {number} paddingTop - 上方内边距
    * @param {number} paddingBottom - 下方内边距
+   * @param {Function} [bgFn] - 背景色函数 (line) => coloredLine，每行渲染后调用
    */
-  constructor(icon, content, isBot, markdownTheme, paddingX = 0, paddingTop = 0, paddingBottom = 0) {
+  constructor(icon, content, isBot, markdownTheme, paddingX = 0, paddingTop = 0, paddingBottom = 0, bgFn = null) {
     this.icon = icon;
     this.content = content;
     this.isBot = isBot;
@@ -21,6 +22,7 @@ class MessageBubble {
     this.paddingX = paddingX;
     this.paddingTop = paddingTop;
     this.paddingBottom = paddingBottom;
+    this._bgFn = bgFn;
     this._markdown = null;
     this._cacheKey = null;
     this._cachedLines = null;
@@ -78,9 +80,14 @@ class MessageBubble {
     // 确保最终输出不超过 width
     const truncatedResult = result.map(line => truncateToWidth(line, width));
 
+    // 应用背景色（如果有 bgFn）
+    const finalLines = this._bgFn
+      ? truncatedResult.map(line => this._bgFn(line))
+      : truncatedResult;
+
     // 更新缓存
     this._cacheKey = cacheKey;
-    this._cachedLines = [...topPadding, ...truncatedResult, ...bottomPadding];
+    this._cachedLines = [...topPadding, ...finalLines, ...bottomPadding];
 
     return this._cachedLines;
   }

package/cli/src/utils/render-diff.js

@@ -0,0 +1,149 @@
+/**
+ * render-diff.js — TUI diff 渲染
+ *
+ * 只负责文字颜色（红/绿/灰/白），不处理背景色。
+ * 背景色由 MessageBubble 的 bgFn 统一提供。
+ * 使用 \x1b[39m（仅重置前景色），避免破坏 bgFn 的背景。
+ */
+
+const Diff = require('diff');
+
+const A = {
+  RED:   '\x1b[38;2;248;113;113m', // 删除文字色
+  GREEN: '\x1b[38;2;74;222;128m',  // 新增文字色
+  GRAY:  '\x1b[38;2;156;163;175m', // 上下文文字色
+  WHITE: '\x1b[97m',               // 变化部分突出
+  HFG:   '\x1b[38;2;229;231;235m', // 文件头文字色
+  BOLD:  '\x1b[1m',
+  FGRST: '\x1b[39m',               // 仅重置前景色（不碰背景）
+};
+
+function parseDiffLine(line) {
+  const match = line.match(/^([+-\s])(\s*\d*)\s(.*)$/);
+  if (!match) return null;
+  return { prefix: match[1], lineNum: match[2], content: match[3] };
+}
+
+function replaceTabs(text) {
+  return text.replace(/\t/g, '   ');
+}
+
+/**
+ * 单词级 diff，变化部分用白色突出
+ */
+function renderIntraLineDiff(oldContent, newContent) {
+  const wordDiff = Diff.diffWords(oldContent, newContent);
+  let removedLine = '';
+  let addedLine = '';
+  let skippedRemovedWs = false;
+  let skippedAddedWs = false;
+
+  for (const part of wordDiff) {
+    if (part.removed) {
+      let value = part.value;
+      if (!skippedRemovedWs) {
+        const ws = value.match(/^(\s*)/)?.[1] || '';
+        removedLine += ws;
+        value = value.slice(ws.length);
+        skippedRemovedWs = true;
+      }
+      if (value) removedLine += A.WHITE + value + A.FGRST;
+    } else if (part.added) {
+      let value = part.value;
+      if (!skippedAddedWs) {
+        const ws = value.match(/^(\s*)/)?.[1] || '';
+        addedLine += ws;
+        value = value.slice(ws.length);
+        skippedAddedWs = true;
+      }
+      if (value) addedLine += A.WHITE + value + A.FGRST;
+    } else {
+      removedLine += part.value;
+      addedLine += part.value;
+    }
+  }
+  return { removedLine, addedLine };
+}
+
+/**
+ * 渲染 diff 文本（只有文字颜色，无背景色）
+ */
+function renderDiff(diffText) {
+  if (!diffText) return '';
+
+  const lines = diffText.split('\n');
+  const result = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+    const parsed = parseDiffLine(line);
+
+    if (!parsed) {
+      result.push(A.GRAY + line + A.FGRST);
+      i++;
+      continue;
+    }
+
+    if (parsed.prefix === '-') {
+      const removedLines = [];
+      while (i < lines.length) {
+        const p = parseDiffLine(lines[i]);
+        if (!p || p.prefix !== '-') break;
+        removedLines.push({ lineNum: p.lineNum, content: p.content });
+        i++;
+      }
+      const addedLines = [];
+      while (i < lines.length) {
+        const p = parseDiffLine(lines[i]);
+        if (!p || p.prefix !== '+') break;
+        addedLines.push({ lineNum: p.lineNum, content: p.content });
+        i++;
+      }
+
+      if (removedLines.length === 1 && addedLines.length === 1) {
+        const r = removedLines[0];
+        const a = addedLines[0];
+        const { removedLine, addedLine } = renderIntraLineDiff(
+          replaceTabs(r.content),
+          replaceTabs(a.content)
+        );
+        result.push(A.RED + `-${r.lineNum} ${removedLine}` + A.FGRST);
+        result.push(A.GREEN + `+${a.lineNum} ${addedLine}` + A.FGRST);
+      } else {
+        for (const r of removedLines) {
+          result.push(A.RED + `-${r.lineNum} ${replaceTabs(r.content)}` + A.FGRST);
+        }
+        for (const a of addedLines) {
+          result.push(A.GREEN + `+${a.lineNum} ${replaceTabs(a.content)}` + A.FGRST);
+        }
+      }
+    } else if (parsed.prefix === '+') {
+      result.push(A.GREEN + `+${parsed.lineNum} ${replaceTabs(parsed.content)}` + A.FGRST);
+      i++;
+    } else {
+      result.push(A.GRAY + ` ${parsed.lineNum} ${replaceTabs(parsed.content)}` + A.FGRST);
+      i++;
+    }
+  }
+
+  return result.join('\n');
+}
+
+/**
+ * 带文件路径头的 diff 渲染
+ */
+function renderDiffWithHeader(diffText, filePath, prefix='Edit') {
+  if (!diffText) return '';
+  const parts = [];
+  if (filePath) {
+    parts.push(A.HFG + A.BOLD + ` ${prefix} ${filePath} ` + A.FGRST);
+  }
+  parts.push(renderDiff(diffText));
+  return parts.join('\n');
+}
+
+module.exports = {
+  renderDiff,
+  renderDiffWithHeader,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foliko",
-  "version": "1.1.62",
+  "version": "1.1.63",
   "description": "简约的插件化 Agent 框架",
   "main": "src/index.js",
   "type": "commonjs",
@@ -65,6 +65,7 @@
     "chalk": "^5.6.2",
     "cli-highlight": "^2.1.11",
     "crypto": "^1.0.1",
+    "diff": "^9.0.0",
     "dotenv": "^17.3.1",
     "figlet": "^1.11.0",
     "file-type": "^22.0.1",