@lokiyou/pi-nano-footer 0.1.0 → 0.2.0

package/index.ts

@@ -1,9 +1,14 @@
 /**
- * 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
  */
@@ -43,6 +48,18 @@ const C = {
   border:          "#dfe6e9",
 };
 
+// ── 脉冲动画颜色轮盘（霓虹色系） ──
+const PULSE_PALETTE = [
+  "#ff3cac",  // 热粉
+  "#ff6b9d",  // 粉红
+  "#ff9f1c",  // 橙
+  "#fdcb6e",  // 黄
+  "#00ff87",  // 荧光绿
+  "#00d4ff",  // 青蓝
+  "#a855f7",  // 紫
+  "#6c5ce7",  // 紫蓝
+];
+
 // ── Rainbow 色表（high / xhigh 思考等级用） ──
 const RAINBOW = [
   "#b281d6", "#d787af", "#febc38", "#e4c00f",
@@ -51,19 +68,61 @@ const RAINBOW = [
 
 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;
+
+  function startPulse(rt: () => void) {
+    if (pulseTimer) return;
+    pulseTimer = setInterval(() => {
+      pulsePhase = (pulsePhase + 1) % PULSE_PALETTE.length;
+      rt();
+    }, PULSE_INTERVAL_MS);
+  }
+
+  function stopPulse() {
+    if (pulseTimer) {
+      clearInterval(pulseTimer);
+      pulseTimer = null;
+    }
+  }
+
   pi.on("session_start", async (_event, ctx) => {
     thinkingLevel = pi.getThinkingLevel();
 
+    // ── 脉冲发光 Widget（输入框上方） ──
+    ctx.ui.setWidget("nano-glow", (tui) => {
+      startPulse(() => tui.requestRender());
+
+      return {
+        dispose() { stopPulse(); },
+        invalidate() {},
+        render(width: number): string[] {
+          if (!working || width <= 0) return [];
+          return [renderGlowLine(width, pulsePhase)];
+        },
+      };
+    }, { placement: "aboveEditor" });
+
+    // ── 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); },
+        dispose() {
+          unsubBranch();
+          clearInterval(clock);
+          stopPulse();
+        },
         invalidate() {},
         render(width: number): string[] {
           if (width <= 0) return [];
@@ -75,17 +134,22 @@ export default function (pi: ExtensionAPI) {
           // 1. 模型 —— #ff3cac 热粉色
           parts.push(ansi(C.model, `${icons.model} ${shorten(ctx.model?.id ?? "–")}`));
 
-          // 2. 思考等级 —— 按等级变色，high/xhigh 彩虹
-          parts.push(renderThinkingN(thinkingLevel));
+          // 2. 工作时 → 脉冲指示点，不显示任何文字
+          //    空闲时 → 显示思考等级
+          if (working) {
+            parts.push(renderPulseDot(pulsePhase));
+          } else {
+            parts.push(renderThinkingLevel(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(renderContextN(ctx));
+          parts.push(renderContextBar(ctx));
 
-          // 5. Cache read —— #00ff87 荧光绿
+          // 5. Token 用量 —— #00ff87 荧光绿
           const { input, cost } = calcTotals(ctx);
           parts.push(ansi(C.tokens, `${icons.cache} ${icons.input} ${fmt(input)}`));
 
@@ -98,25 +162,39 @@ export default function (pi: ExtensionAPI) {
     });
   });
 
-  // ── 事件订阅：保持 footer 实时刷新 ──
+  // ── 事件订阅 ──
 
   pi.on("thinking_level_select", (event) => {
     thinkingLevel = event.level;
     refresh();
   });
   pi.on("model_select", () => refresh());
+
+  // 工作状态切换
+  pi.on("agent_start", () => {
+    working = true;
+    pulsePhase = 0;
+    refresh();
+  });
+  pi.on("agent_end", () => {
+    working = false;
+    refresh();
+  });
+
+  // 传统事件：保持 footer 刷新
   pi.on("turn_start", () => refresh());
   pi.on("turn_end", () => refresh());
-  pi.on("agent_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 前景色转义序列 */
@@ -128,8 +206,62 @@ function ansi(hex: string, text: string): string {
   return `\x1b[38;2;${r};${g};${b}m${text}\x1b[0m`;
 }
 
-/** 渲染思考等级 */
-function renderThinkingN(level: string): string {
+/** 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 {
   const label = level === "minimal" ? "min"
               : level === "medium" ? "med"
               : level;
@@ -150,8 +282,9 @@ function renderThinkingN(level: string): string {
   }
 }
 
-/** 渲染上下文用量，带百分比阈值颜色 */
-function renderContextN(ctx: any): string {
+// ── 上下文用量 ──
+
+function renderContextBar(ctx: any): string {
   const usage = ctx.getContextUsage();
   const pct = usage?.percent;
   const color = pct == null ? C.context
@@ -164,6 +297,10 @@ function renderContextN(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.1.0",
-  "description": "超轻量 powerline 风格 footer for Pi Coding Agent — 霓虹配色，实时显示模型、思考等级、目录、上下文、token 和费用",
+  "version": "0.2.0",
+  "description": "超轻量 powerline 风格 footer for Pi Coding Agent — 霓虹配色，脉冲发光指示，实时显示模型、目录、上下文、token 和费用",
   "type": "module",
   "keywords": [
     "pi-package",