@lokiyou/pi-nano-footer 0.10.0 → 0.12.0

package/index.ts

@@ -1,292 +1,296 @@
-/**
- * pi-nano-footer — 超轻量 powerline 风格 footer + 输入框呼吸发光
- *
- * 精确复刻 pi-powerline-footer default 预设的样式 +
- * 用户自定义霓虹色配色方案。
- *
- * 当模型工作时：
- *   - 输入框边框基于当前颜色做呼吸发光（明暗渐变）
- *   - "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 完全一致） ──
-const icons = {
-  model:   "\uec19",  // nf-md-chip
-  folder:  "\uf115",  // nf-fa-folder_open
-  context: "\ue70f",  // nf-dev-database
-  cache:   "\uf1c0",  // nf-fa-database
-  input:   "\uf090",  // nf-fa-sign_in
-  cost:    "\uf155",  // nf-fa-dollar
-  sep:     "\ue0b1",  // powerline-thin
-};
-
-// ── 用户自定义霓虹配色 ──
-const C = {
-  model:           "#ff3cac",
-  shellMode:       "#00ff87",
-  path:            "#00d4ff",
-  gitDirty:        "#ff9f1c",
-  gitClean:        "#00ff87",
-  thinking:        "#ff6b6b",
-  thinkingMinimal: "#a855f7",
-  thinkingLow:     "#00d4ff",
-  thinkingMedium:  "#ff9f1c",
-  context:         "#6c5ce7",
-  contextWarn:     "#fdcb6e",
-  contextError:    "#ff3366",
-  cost:            "#fdcb6e",
-  tokens:          "#00ff87",
-  separator:       "#a855f7",
-  border:          "#dfe6e9",
-};
-
-// ── ANSI 24-bit true color 正则（用于从 borderColor 函数提取颜色） ──
-const ANSI_RE = /\x1b\[38;2;(\d+);(\d+);(\d+)m/;
-
-// ── Rainbow 色表（high / xhigh 思考等级用） ──
-const RAINBOW = [
-  "#b281d6", "#d787af", "#febc38", "#e4c00f",
-  "#89d281", "#00afaf", "#178fb9", "#b281d6",
-];
-
-// ═══════════════════════════════════════════════════════════════════════════
-// 输入框呼吸发光（基于当前边框颜色做明暗呼吸）
-// ═══════════════════════════════════════════════════════════════════════════
-
-let working = false;
-let animInterval: ReturnType<typeof setInterval> | undefined;
-
-/**
- * 从 borderColor 函数采样字符，提取当前 RGB 色值
- */
-function extractRGB(fn: (str: string) => string): [number, number, number] | null {
-  const sample = fn("─");
-  const m = sample.match(ANSI_RE);
-  if (!m) return null;
-  return [parseInt(m[1]), parseInt(m[2]), parseInt(m[3])];
-}
-
-/** 保存原始 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;
-      // 基于当前边框颜色做呼吸，颜色不变只是明暗+辉光变化
-      // 周期 ~800ms，60fps 驱动，非工作→工作无突兀跳变
-      const t = 0.5 + 0.5 * Math.sin(performance.now() / 400);
-      const bright = 0.25 + 0.75 * t;
-      const glow = t * t * 0.35;
-      const nr = Math.round(Math.min(255, r * bright + (255 - r) * glow));
-      const ng = Math.round(Math.min(255, g * bright + (255 - g) * glow));
-      const nb = Math.round(Math.min(255, b * bright + (255 - b) * glow));
-      this.borderColor = (str: string) =>
-        `\x1b[38;2;${nr};${ng};${nb}m${str}\x1b[0m`;
-    }
-    try {
-      return origRender.call(this, width);
-    } finally {
-      this.borderColor = saved;
-    }
-  }
-  return origRender.call(this, width);
-};
-
-// ═══════════════════════════════════════════════════════════════════════════
-// Extension
-// ═══════════════════════════════════════════════════════════════════════════
-
-export default function (pi: ExtensionAPI) {
-  let thinkingLevel = "off";
-  let requestRender: (() => void) | undefined;
-  const refresh = () => requestRender?.();
-
-  pi.on("session_start", async (_event, ctx) => {
-    thinkingLevel = pi.getThinkingLevel();
-
-    // 隐藏内置的 "Working..." 指示器，用输入框呼吸代替
-    ctx.ui.setWorkingVisible(false);
-
-    ctx.ui.setFooter((tui, theme, footerData) => {
-      requestRender = () => tui.requestRender();
-      const unsubBranch = footerData.onBranchChange(() => tui.requestRender());
-      const clock = setInterval(() => tui.requestRender(), 30_000);
-
-      return {
-        dispose() { unsubBranch(); clearInterval(clock); },
-        invalidate() {},
-        render(width: number): string[] {
-          if (width <= 0) return [];
-
-          // 分隔符：dim 色（低调，不抢眼）
-          const S = ` ${theme.fg("dim", icons.sep)} `;
-          const parts: string[] = [];
-
-          // 1. 模型 —— #ff3cac 热粉色
-          parts.push(ansi(C.model, `${icons.model} ${shorten(ctx.model?.id ?? "–")}`));
-
-          // 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(renderContextN(ctx));
-
-          // 5. Token 用量 —— #00ff87 荧光绿
-          const { input, cost } = calcTotals(ctx);
-          parts.push(ansi(C.tokens, `${icons.cache} ${icons.input} ${fmt(input)}`));
-
-          // 6. 费用 —— #fdcb6e 明黄色
-          parts.push(ansi(C.cost, `${icons.cost} ${cost.toFixed(2)}`));
-
-          return [truncateToWidth(parts.join(S), width, "")];
-        },
-      };
-    });
-  });
-
-  // ── 事件订阅 ──
-
-  pi.on("thinking_level_select", (event) => {
-    thinkingLevel = event.level;
-    refresh();
-  });
-  pi.on("model_select", () => refresh());
-
-  // 工作状态切换 → 控制呼吸发光
-  pi.on("agent_start", () => {
-    working = true;
-    // 50ms 间隔主动刷新，保证呼吸动画 20fps 流畅
-    if (requestRender) {
-      animInterval = setInterval(requestRender, 50);
-    }
-    refresh();
-  });
-  pi.on("agent_end", () => {
-    working = false;
-    if (animInterval) {
-      clearInterval(animInterval);
-      animInterval = undefined;
-    }
-    refresh();
-  });
-
-  pi.on("turn_start", () => refresh());
-  pi.on("turn_end", () => refresh());
-
-  pi.on("session_shutdown", (_event, ctx) => {
-    ctx.ui.setFooter(undefined);
-    requestRender = undefined;
-    if (animInterval) {
-      clearInterval(animInterval);
-      animInterval = undefined;
-    }
-  });
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// Helper 函数
-// ═══════════════════════════════════════════════════════════════════════════
-
-/** 16 进制色值 → ANSI 24-bit true color 前景色转义序列 */
-function ansi(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[38;2;${r};${g};${b}m${text}\x1b[0m`;
-}
-
-/** 渲染思考等级 */
-function renderThinkingN(level: string): string {
-  const label = level === "minimal" ? "min"
-              : level === "medium" ? "med"
-              : level;
-  const text = `think:${label}`;
-
-  switch (level) {
-    case "high":
-    case "xhigh":
-      return rainbow(text);
-    case "minimal":
-      return ansi(C.thinkingMinimal, text);
-    case "low":
-      return ansi(C.thinkingLow, text);
-    case "medium":
-      return ansi(C.thinkingMedium, text);
-    default:
-      return ansi(C.thinking, text);
-  }
-}
-
-/** 渲染上下文用量，带百分比阈值颜色 */
-function renderContextN(ctx: any): string {
-  const usage = ctx.getContextUsage();
-  const pct = usage?.percent;
-  const color = pct == null ? C.context
-              : pct >= 90 ? C.contextError
-              : pct >= 70 ? C.contextWarn
-              : C.context;
-  const maxStr = ctx.model?.contextWindow
-    ? `/${(ctx.model.contextWindow / 1_000_000).toFixed(1)}M`
-    : "";
-  return ansi(color, `${icons.context} ${pct?.toFixed(1) ?? "?"}%${maxStr}`);
-}
-
-/** 遍历会话分支，累计 input token 数和总费用 */
-function calcTotals(ctx: any): { input: number; cost: number } {
-  let input = 0, cost = 0;
-  for (const e of ctx.sessionManager.getBranch()) {
-    if (e.type === "message" && e.message.role === "assistant") {
-      const m = e.message as AssistantMessage;
-      input += m.usage.input ?? 0;
-      cost += m.usage.cost?.total ?? 0;
-    }
-  }
-  return { input, cost };
-}
-
-/** 格式化数字：1.2k / 45M */
-function fmt(n: number): string {
-  if (n < 1000) return `${n}`;
-  if (n < 1_000_000) return `${(n / 1000).toFixed(n < 10_000 ? 1 : 0)}k`;
-  return `${(n / 1_000_000).toFixed(1)}m`;
-}
-
-/** 缩短模型名 */
-function shorten(m: string): string {
-  return m
-    .replace(/^claude-/i, "")
-    .replace(/^gpt-/i, "gpt ")
-    .replace(/-20\d{6}$/, "")
-    .replace(/-latest$/i, "");
-}
-
-/** 彩虹渐变 ANSI 渲染 */
-function rainbow(text: string): string {
-  let out = "", ci = 0;
-  for (const ch of text) {
-    if (ch === " " || ch === ":") {
-      out += ch;
-    } else {
-      const hex = RAINBOW[ci++ % RAINBOW.length].replace("#", "");
-      const r = parseInt(hex.slice(0, 2), 16);
-      const g = parseInt(hex.slice(2, 4), 16);
-      const b = parseInt(hex.slice(4, 6), 16);
-      out += `\x1b[38;2;${r};${g};${b}m${ch}\x1b[0m`;
-    }
-  }
-  return out;
-}
+/**
+ * pi-nano-footer — 超轻量 powerline 风格 footer + 输入框呼吸发光
+ *
+ * 精确复刻 pi-powerline-footer default 预设的样式 +
+ * 用户自定义霓虹色配色方案。
+ *
+ * 当模型工作时：
+ *   - 输入框边框基于当前颜色做呼吸发光（明暗渐变）
+ *   - "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 完全一致） ──
+const icons = {
+  model:   "\uec19",  // nf-md-chip
+  folder:  "\uf115",  // nf-fa-folder_open
+  context: "\ue70f",  // nf-dev-database
+  cache:   "\uf1c0",  // nf-fa-database
+  input:   "\uf090",  // nf-fa-sign_in
+  cost:    "\uf155",  // nf-fa-dollar
+  sep:     "\ue0b1",  // powerline-thin
+};
+
+// ── 用户自定义霓虹配色 ──
+const C = {
+  model:           "#ff3cac",
+  shellMode:       "#00ff87",
+  path:            "#00d4ff",
+  gitDirty:        "#ff9f1c",
+  gitClean:        "#00ff87",
+  thinking:        "#ff6b6b",
+  thinkingMinimal: "#a855f7",
+  thinkingLow:     "#00d4ff",
+  thinkingMedium:  "#ff9f1c",
+  context:         "#6c5ce7",
+  contextWarn:     "#fdcb6e",
+  contextError:    "#ff3366",
+  cost:            "#fdcb6e",
+  tokens:          "#00ff87",
+  separator:       "#a855f7",
+  border:          "#dfe6e9",
+};
+
+// ── ANSI 24-bit true color 正则（用于从 borderColor 函数提取颜色） ──
+const ANSI_RE = /\x1b\[38;2;(\d+);(\d+);(\d+)m/;
+
+// ── Rainbow 色表（high / xhigh 思考等级用） ──
+const RAINBOW = [
+  "#b281d6", "#d787af", "#febc38", "#e4c00f",
+  "#89d281", "#00afaf", "#178fb9", "#b281d6",
+];
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 输入框呼吸发光（基于当前边框颜色做明暗呼吸）
+// ═══════════════════════════════════════════════════════════════════════════
+
+let working = false;
+let animInterval: ReturnType<typeof setInterval> | undefined;
+
+/**
+ * 从 borderColor 函数采样字符，提取当前 RGB 色值
+ */
+function extractRGB(fn: (str: string) => string): [number, number, number] | null {
+  const sample = fn("─");
+  const m = sample.match(ANSI_RE);
+  if (!m) return null;
+  return [parseInt(m[1]), parseInt(m[2]), parseInt(m[3])];
+}
+
+/** 保存原始 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;
+      // 沿用输入框当前颜色，峰值泛白 + 背景阴影辉光
+      // 周期 ~800ms，60fps 驱动
+      const t = 0.5 + 0.5 * Math.sin(performance.now() / 400);
+      const bright = 0.25 + 0.75 * t;
+      const glow = t * t * 0.65;  // 0~0.65 白色 blend，峰值明显泛白
+      const nr = Math.round(Math.min(255, r * bright + (255 - r) * glow));
+      const ng = Math.round(Math.min(255, g * bright + (255 - g) * glow));
+      const nb = Math.round(Math.min(255, b * bright + (255 - b) * glow));
+      // 阴影光晕背景：铺满格子模拟辉光
+      const sr = Math.round(nr * 0.2);
+      const sg = Math.round(ng * 0.2);
+      const sb = Math.round(nb * 0.2);
+      this.borderColor = (str: string) =>
+        `\x1b[48;2;${sr};${sg};${sb}m\x1b[38;2;${nr};${ng};${nb}m${str}\x1b[0m`;
+    }
+    try {
+      return origRender.call(this, width);
+    } finally {
+      this.borderColor = saved;
+    }
+  }
+  return origRender.call(this, width);
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Extension
+// ═══════════════════════════════════════════════════════════════════════════
+
+export default function (pi: ExtensionAPI) {
+  let thinkingLevel = "off";
+  let requestRender: (() => void) | undefined;
+  const refresh = () => requestRender?.();
+
+  pi.on("session_start", async (_event, ctx) => {
+    thinkingLevel = pi.getThinkingLevel();
+
+    // 隐藏内置的 "Working..." 指示器，用输入框呼吸代替
+    ctx.ui.setWorkingVisible(false);
+
+    ctx.ui.setFooter((tui, theme, footerData) => {
+      requestRender = () => tui.requestRender();
+      const unsubBranch = footerData.onBranchChange(() => tui.requestRender());
+      const clock = setInterval(() => tui.requestRender(), 30_000);
+
+      return {
+        dispose() { unsubBranch(); clearInterval(clock); },
+        invalidate() {},
+        render(width: number): string[] {
+          if (width <= 0) return [];
+
+          // 分隔符：dim 色（低调，不抢眼）
+          const S = ` ${theme.fg("dim", icons.sep)} `;
+          const parts: string[] = [];
+
+          // 1. 模型 —— #ff3cac 热粉色
+          parts.push(ansi(C.model, `${icons.model} ${shorten(ctx.model?.id ?? "–")}`));
+
+          // 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(renderContextN(ctx));
+
+          // 5. Token 用量 —— #00ff87 荧光绿
+          const { input, cost } = calcTotals(ctx);
+          parts.push(ansi(C.tokens, `${icons.cache} ${icons.input} ${fmt(input)}`));
+
+          // 6. 费用 —— #fdcb6e 明黄色
+          parts.push(ansi(C.cost, `${icons.cost} ${cost.toFixed(2)}`));
+
+          return [truncateToWidth(parts.join(S), width, "")];
+        },
+      };
+    });
+  });
+
+  // ── 事件订阅 ──
+
+  pi.on("thinking_level_select", (event) => {
+    thinkingLevel = event.level;
+    refresh();
+  });
+  pi.on("model_select", () => refresh());
+
+  // 工作状态切换 → 控制呼吸发光
+  pi.on("agent_start", () => {
+    working = true;
+    // 50ms 间隔主动刷新，保证呼吸动画 20fps 流畅
+    if (requestRender) {
+      animInterval = setInterval(requestRender, 50);
+    }
+    refresh();
+  });
+  pi.on("agent_end", () => {
+    working = false;
+    if (animInterval) {
+      clearInterval(animInterval);
+      animInterval = undefined;
+    }
+    refresh();
+  });
+
+  pi.on("turn_start", () => refresh());
+  pi.on("turn_end", () => refresh());
+
+  pi.on("session_shutdown", (_event, ctx) => {
+    ctx.ui.setFooter(undefined);
+    requestRender = undefined;
+    if (animInterval) {
+      clearInterval(animInterval);
+      animInterval = undefined;
+    }
+  });
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Helper 函数
+// ═══════════════════════════════════════════════════════════════════════════
+
+/** 16 进制色值 → ANSI 24-bit true color 前景色转义序列 */
+function ansi(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[38;2;${r};${g};${b}m${text}\x1b[0m`;
+}
+
+/** 渲染思考等级 */
+function renderThinkingN(level: string): string {
+  const label = level === "minimal" ? "min"
+              : level === "medium" ? "med"
+              : level;
+  const text = `think:${label}`;
+
+  switch (level) {
+    case "high":
+    case "xhigh":
+      return rainbow(text);
+    case "minimal":
+      return ansi(C.thinkingMinimal, text);
+    case "low":
+      return ansi(C.thinkingLow, text);
+    case "medium":
+      return ansi(C.thinkingMedium, text);
+    default:
+      return ansi(C.thinking, text);
+  }
+}
+
+/** 渲染上下文用量，带百分比阈值颜色 */
+function renderContextN(ctx: any): string {
+  const usage = ctx.getContextUsage();
+  const pct = usage?.percent;
+  const color = pct == null ? C.context
+              : pct >= 90 ? C.contextError
+              : pct >= 70 ? C.contextWarn
+              : C.context;
+  const maxStr = ctx.model?.contextWindow
+    ? `/${(ctx.model.contextWindow / 1_000_000).toFixed(1)}M`
+    : "";
+  return ansi(color, `${icons.context} ${pct?.toFixed(1) ?? "?"}%${maxStr}`);
+}
+
+/** 遍历会话分支，累计 input token 数和总费用 */
+function calcTotals(ctx: any): { input: number; cost: number } {
+  let input = 0, cost = 0;
+  for (const e of ctx.sessionManager.getBranch()) {
+    if (e.type === "message" && e.message.role === "assistant") {
+      const m = e.message as AssistantMessage;
+      input += m.usage.input ?? 0;
+      cost += m.usage.cost?.total ?? 0;
+    }
+  }
+  return { input, cost };
+}
+
+/** 格式化数字：1.2k / 45M */
+function fmt(n: number): string {
+  if (n < 1000) return `${n}`;
+  if (n < 1_000_000) return `${(n / 1000).toFixed(n < 10_000 ? 1 : 0)}k`;
+  return `${(n / 1_000_000).toFixed(1)}m`;
+}
+
+/** 缩短模型名 */
+function shorten(m: string): string {
+  return m
+    .replace(/^claude-/i, "")
+    .replace(/^gpt-/i, "gpt ")
+    .replace(/-20\d{6}$/, "")
+    .replace(/-latest$/i, "");
+}
+
+/** 彩虹渐变 ANSI 渲染 */
+function rainbow(text: string): string {
+  let out = "", ci = 0;
+  for (const ch of text) {
+    if (ch === " " || ch === ":") {
+      out += ch;
+    } else {
+      const hex = RAINBOW[ci++ % RAINBOW.length].replace("#", "");
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      out += `\x1b[38;2;${r};${g};${b}m${ch}\x1b[0m`;
+    }
+  }
+  return out;
+}

package/package.json

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