@lokiyou/pi-nano-footer 0.2.0 → 0.4.0

package/index.ts

@@ -1,20 +1,18 @@
 /**
- * pi-nano-footer — 超轻量 powerline 风格 footer + 脉冲发光效果
+ * pi-nano-footer — 超轻量 powerline 风格 footer + 输入框呼吸发光
  *
  * 精确复刻 pi-powerline-footer default 预设的样式 +
  * 用户自定义霓虹色配色方案。
  *
- * 当模型工作时（processing）：
- *   - 输入框上方显示一条脉冲发光带（霓虹色循环）
- *   - Footer 中显示脉冲指示点 ● 代替思考等级文字
- *   - 没有任何 "working..." 文字
- *
- * 安装：放到 ~/.pi/agent/extensions/ 后重启 pi 即可自动加载。
- * 临时测试：pi -e ~/.pi/agent/extensions/pi-nano-footer.ts
+ * 当模型工作时：
+ *   - 输入框边框基于当前颜色做呼吸发光（明暗渐变）
+ *   - "Working..." 保持原样
+ *   - Footer 不变
  */
 
 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,17 +46,8 @@ const C = {
   border:          "#dfe6e9",
 };
 
-// ── 脉冲动画颜色轮盘（霓虹色系） ──
-const PULSE_PALETTE = [
-  "#ff3cac",  // 热粉
-  "#ff6b9d",  // 粉红
-  "#ff9f1c",  // 橙
-  "#fdcb6e",  // 黄
-  "#00ff87",  // 荧光绿
-  "#00d4ff",  // 青蓝
-  "#a855f7",  // 紫
-  "#6c5ce7",  // 紫蓝
-];
+// ── ANSI 24-bit true color 正则（用于从 borderColor 函数提取颜色） ──
+const ANSI_RE = /\x1b\[38;2;(\d+);(\d+);(\d+)m/;
 
 // ── Rainbow 色表（high / xhigh 思考等级用） ──
 const RAINBOW = [
@@ -66,63 +55,67 @@ 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?.();
+// ═══════════════════════════════════════════════════════════════════════════
+// 输入框呼吸发光（基于当前边框颜色做明暗呼吸）
+// ═══════════════════════════════════════════════════════════════════════════
 
-  // ── 脉冲动画定时器 ──
-  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);
-  }
+/**
+ * 从 borderColor 函数采样一个字符，提取其中使用的 RGB 色值
+ */
+function extractRGB(fn: (str: string) => string): [number, number, number] | null {
+  const sample = fn("─");
+  // borderColor 输出格式：\x1b[38;2;R;G;Bm─\x1b[0m
+  const m = sample.match(ANSI_RE);
+  if (!m) return null;
+  return [parseInt(m[1]), parseInt(m[2]), parseInt(m[3])];
+}
 
-  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 rgb = extractRGB(saved);
+    if (rgb) {
+      const [r, g, b] = rgb;
+      // 呼吸亮度：sin 周期 ~800ms，亮度范围 40%~100%
+      // 用 performance.now() 保证时间连续的呼吸曲线
+      const t = 0.5 + 0.5 * Math.sin(performance.now() / 400);
+      const bright = 0.4 + 0.6 * t;
+      this.borderColor = (str: string) =>
+        `\x1b[38;2;${Math.round(r * bright)};${Math.round(g * bright)};${Math.round(b * bright)}m${str}\x1b[0m`;
+    }
+    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 +127,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 +158,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 +168,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 +190,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 +212,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 +226,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.4.0",
+  "description": "超轻量 powerline 风格 footer for Pi Coding Agent — 输入框脉冲发光，霓虹配色，实时显示模型、目录、上下文、token 和费用",
   "type": "module",
   "keywords": [
     "pi-package",