@lokiyou/pi-nano-footer 0.2.0 → 0.3.0

package/index.ts

@@ -1,13 +1,13 @@
 /**
- * pi-nano-footer — 超轻量 powerline 风格 footer + 脉冲发光效果
+ * pi-nano-footer — 超轻量 powerline 风格 footer + 输入框脉冲发光
  *
  * 精确复刻 pi-powerline-footer default 预设的样式 +
  * 用户自定义霓虹色配色方案。
  *
  * 当模型工作时（processing）：
- *   - 输入框上方显示一条脉冲发光带（霓虹色循环）
- *   - Footer 中显示脉冲指示点 ● 代替思考等级文字
- *   - 没有任何 "working..." 文字
+ *   - 输入框边框呈呼吸脉冲发光效果（霓虹色循环）
+ *   - "Working..." 保持原样
+ *   - Footer 不变
  *
  * 安装：放到 ~/.pi/agent/extensions/ 后重启 pi 即可自动加载。
  * 临时测试：pi -e ~/.pi/agent/extensions/pi-nano-footer.ts
@@ -15,6 +15,7 @@
 
 import type { AssistantMessage } from "@earendil-works/pi-ai";
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { Editor } from "@earendil-works/pi-tui";
 import { truncateToWidth } from "@earendil-works/pi-tui";
 
 // ── Nerd Font 图标（与 pi-powerline-footer 完全一致） ──
@@ -48,16 +49,13 @@ const C = {
   border:          "#dfe6e9",
 };
 
-// ── 脉冲动画颜色轮盘（霓虹色系） ──
-const PULSE_PALETTE = [
+// ── 脉冲发光色轮（5色循环，更柔和的呼吸感） ──
+const GLOW_PALETTE = [
   "#ff3cac",  // 热粉
-  "#ff6b9d",  // 粉红
   "#ff9f1c",  // 橙
-  "#fdcb6e",  // 黄
   "#00ff87",  // 荧光绿
   "#00d4ff",  // 青蓝
   "#a855f7",  // 紫
-  "#6c5ce7",  // 紫蓝
 ];
 
 // ── Rainbow 色表（high / xhigh 思考等级用） ──
@@ -66,63 +64,55 @@ const RAINBOW = [
   "#89d281", "#00afaf", "#178fb9", "#b281d6",
 ];
 
-export default function (pi: ExtensionAPI) {
-  let thinkingLevel = "off";
-  let working = false;        // 模型是否正在工作
-  let pulsePhase = 0;         // 脉冲动画相位
-  let requestRender: (() => void) | undefined;
-  const refresh = () => requestRender?.();
+// ═══════════════════════════════════════════════════════════════════════════
+// 输入框脉冲发光（Editor.borderColor monkey-patch）
+// ═══════════════════════════════════════════════════════════════════════════
 
-  // ── 脉冲动画定时器 ──
-  const PULSE_INTERVAL_MS = 100;
-  let pulseTimer: ReturnType<typeof setInterval> | null = null;
+let working = false;
 
-  function startPulse(rt: () => void) {
-    if (pulseTimer) return;
-    pulseTimer = setInterval(() => {
-      pulsePhase = (pulsePhase + 1) % PULSE_PALETTE.length;
-      rt();
-    }, PULSE_INTERVAL_MS);
-  }
+/** 时间相位：每 120ms 进一帧 */
+function getPhase(): number {
+  return Math.floor(performance.now() / 120);
+}
 
-  function stopPulse() {
-    if (pulseTimer) {
-      clearInterval(pulseTimer);
-      pulseTimer = null;
+/** 保存原始 render */
+const origRender = Editor.prototype.render;
+
+Editor.prototype.render = function (width: number): string[] {
+  if (working) {
+    const saved = this.borderColor; // 保存原始边框颜色函数
+    const phase = getPhase() % GLOW_PALETTE.length;
+    const hex = GLOW_PALETTE[phase];
+    // 临时用脉冲色渲染边框
+    this.borderColor = (str: string) => ansi(hex, str);
+    try {
+      return origRender.call(this, width);
+    } finally {
+      this.borderColor = saved; // 恢复原始颜色
     }
   }
+  return origRender.call(this, width);
+};
 
-  pi.on("session_start", async (_event, ctx) => {
-    thinkingLevel = pi.getThinkingLevel();
+// ═══════════════════════════════════════════════════════════════════════════
+// Extension
+// ═══════════════════════════════════════════════════════════════════════════
 
-    // ── 脉冲发光 Widget（输入框上方） ──
-    ctx.ui.setWidget("nano-glow", (tui) => {
-      startPulse(() => tui.requestRender());
+export default function (pi: ExtensionAPI) {
+  let thinkingLevel = "off";
+  let requestRender: (() => void) | undefined;
+  const refresh = () => requestRender?.();
 
-      return {
-        dispose() { stopPulse(); },
-        invalidate() {},
-        render(width: number): string[] {
-          if (!working || width <= 0) return [];
-          return [renderGlowLine(width, pulsePhase)];
-        },
-      };
-    }, { placement: "aboveEditor" });
+  pi.on("session_start", async (_event, ctx) => {
+    thinkingLevel = pi.getThinkingLevel();
 
-    // ── Footer ──
     ctx.ui.setFooter((tui, theme, footerData) => {
       requestRender = () => tui.requestRender();
-      startPulse(() => tui.requestRender());
-
       const unsubBranch = footerData.onBranchChange(() => tui.requestRender());
       const clock = setInterval(() => tui.requestRender(), 30_000);
 
       return {
-        dispose() {
-          unsubBranch();
-          clearInterval(clock);
-          stopPulse();
-        },
+        dispose() { unsubBranch(); clearInterval(clock); },
         invalidate() {},
         render(width: number): string[] {
           if (width <= 0) return [];
@@ -134,20 +124,15 @@ export default function (pi: ExtensionAPI) {
           // 1. 模型 —— #ff3cac 热粉色
           parts.push(ansi(C.model, `${icons.model} ${shorten(ctx.model?.id ?? "–")}`));
 
-          // 2. 工作时 → 脉冲指示点，不显示任何文字
-          //    空闲时 → 显示思考等级
-          if (working) {
-            parts.push(renderPulseDot(pulsePhase));
-          } else {
-            parts.push(renderThinkingLevel(thinkingLevel));
-          }
+          // 2. 思考等级 —— 按等级变色，high/xhigh 彩虹
+          parts.push(renderThinkingN(thinkingLevel));
 
           // 3. 目录 basename —— #00d4ff 青蓝色
           const dir = ctx.cwd.replace(/\\/g, "/").split("/").filter(Boolean).pop() || ctx.cwd;
           parts.push(ansi(C.path, `${icons.folder} ${dir}`));
 
           // 4. 上下文用量 —— #6c5ce7 紫 / #fdcb6e 黄 / #ff3366 红
-          parts.push(renderContextBar(ctx));
+          parts.push(renderContextN(ctx));
 
           // 5. Token 用量 —— #00ff87 荧光绿
           const { input, cost } = calcTotals(ctx);
@@ -170,10 +155,9 @@ export default function (pi: ExtensionAPI) {
   });
   pi.on("model_select", () => refresh());
 
-  // 工作状态切换
+  // 工作状态切换 → 控制脉冲发光
   pi.on("agent_start", () => {
     working = true;
-    pulsePhase = 0;
     refresh();
   });
   pi.on("agent_end", () => {
@@ -181,20 +165,17 @@ export default function (pi: ExtensionAPI) {
     refresh();
   });
 
-  // 传统事件：保持 footer 刷新
   pi.on("turn_start", () => refresh());
   pi.on("turn_end", () => refresh());
 
   pi.on("session_shutdown", (_event, ctx) => {
     ctx.ui.setFooter(undefined);
-    ctx.ui.setWidget("nano-glow", undefined);
-    stopPulse();
     requestRender = undefined;
   });
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-// 渲染函数
+// Helper 函数
 // ═══════════════════════════════════════════════════════════════════════════
 
 /** 16 进制色值 → ANSI 24-bit true color 前景色转义序列 */
@@ -206,62 +187,8 @@ function ansi(hex: string, text: string): string {
   return `\x1b[38;2;${r};${g};${b}m${text}\x1b[0m`;
 }
 
-/** 16 进制色值 → ANSI 24-bit true color 背景色转义序列 */
-function ansiBg(hex: string, text: string): string {
-  const h = hex.replace("#", "");
-  const r = parseInt(h.slice(0, 2), 16);
-  const g = parseInt(h.slice(2, 4), 16);
-  const b = parseInt(h.slice(4, 6), 16);
-  return `\x1b[48;2;${r};${g};${b}m${text}\x1b[0m`;
-}
-
-/** 基于亮度的半透明色（在黑色背景上混合） */
-function alphaOnBlack(hex: string, alpha: number): string {
-  const h = hex.replace("#", "");
-  const r = Math.round(parseInt(h.slice(0, 2), 16) * alpha);
-  const g = Math.round(parseInt(h.slice(2, 4), 16) * alpha);
-  const b = Math.round(parseInt(h.slice(4, 6), 16) * alpha);
-  return `\x1b[48;2;${r};${g};${b}m \x1b[0m`;
-}
-
-// ── 脉冲发光带（输入框上方） ──
-
-/** 渲染一条脉冲发光带，霓虹色从左到右波浪式前进 */
-function renderGlowLine(width: number, phase: number): string {
-  const barWidth = Math.min(width, 60);
-  const offset = Math.floor((width - barWidth) / 2);
-  let line = "";
-
-  for (let i = 0; i < width; i++) {
-    if (i < offset || i >= offset + barWidth) {
-      line += " ";
-    } else {
-      const pos = (i - offset) / barWidth;                    // 0..1 位置
-      const colorIdx = (phase + Math.floor(pos * 4)) % PULSE_PALETTE.length;
-      // 边缘暗、中间亮 → 制作光晕效果
-      const edge = Math.sin(pos * Math.PI);                    // 0→1→0 正弦波
-      const alpha = 0.3 + 0.7 * edge;                          // 边缘 0.3，中间 1.0
-      const hex = PULSE_PALETTE[colorIdx].replace("#", "");
-      const r = Math.round(parseInt(hex.slice(0, 2), 16) * alpha);
-      const g = Math.round(parseInt(hex.slice(2, 4), 16) * alpha);
-      const b = Math.round(parseInt(hex.slice(4, 6), 16) * alpha);
-      line += `\x1b[48;2;${r};${g};${b}m \x1b[0m`;            // 空格背景色 = 发光像素
-    }
-  }
-  return line;
-}
-
-// ── 脉冲指示点（Footer 中替代思考等级文字） ──
-
-/** 渲染一个脉冲发光 ● 指示点 */
-function renderPulseDot(phase: number): string {
-  const color = PULSE_PALETTE[phase % PULSE_PALETTE.length];
-  return ansi(color, "●");
-}
-
-// ── 思考等级渲染 ──
-
-function renderThinkingLevel(level: string): string {
+/** 渲染思考等级 */
+function renderThinkingN(level: string): string {
   const label = level === "minimal" ? "min"
               : level === "medium" ? "med"
               : level;
@@ -282,9 +209,8 @@ function renderThinkingLevel(level: string): string {
   }
 }
 
-// ── 上下文用量 ──
-
-function renderContextBar(ctx: any): string {
+/** 渲染上下文用量，带百分比阈值颜色 */
+function renderContextN(ctx: any): string {
   const usage = ctx.getContextUsage();
   const pct = usage?.percent;
   const color = pct == null ? C.context
@@ -297,10 +223,6 @@ function renderContextBar(ctx: any): string {
   return ansi(color, `${icons.context} ${pct?.toFixed(1) ?? "?"}%${maxStr}`);
 }
 
-// ═══════════════════════════════════════════════════════════════════════════
-// 工具函数
-// ═══════════════════════════════════════════════════════════════════════════
-
 /** 遍历会话分支，累计 input token 数和总费用 */
 function calcTotals(ctx: any): { input: number; cost: number } {
   let input = 0, cost = 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lokiyou/pi-nano-footer",
-  "version": "0.2.0",
-  "description": "超轻量 powerline 风格 footer for Pi Coding Agent — 霓虹配色，脉冲发光指示，实时显示模型、目录、上下文、token 和费用",
+  "version": "0.3.0",
+  "description": "超轻量 powerline 风格 footer for Pi Coding Agent — 输入框脉冲发光，霓虹配色，实时显示模型、目录、上下文、token 和费用",
   "type": "module",
   "keywords": [
     "pi-package",