@lokiyou/pi-nano-footer 0.1.0

package/README.md

@@ -0,0 +1,45 @@
+# @lokiyou/pi-nano-footer
+
+超轻量 powerline 风格 footer for **Pi Coding Agent**，霓虹配色方案。
+
+精确复刻 pi-powerline-footer default 预设的样式 + 自定义霓虹色配色。
+
+## 安装
+
+```bash
+pi install npm:@lokiyou/pi-nano-footer
+```
+
+或手动放入 `~/.pi/agent/extensions/` 后 `/reload`。
+
+## 效果
+
+```
+ deepseek-v4-flash  think:high   project   45.2%/128K    1.2k   0.03
+```
+
+从左到右依次展示：
+- 🤖 **模型名**（热粉色）
+- 💭 **思考等级**（按等级变色，high/xhigh 彩虹）
+- 📁 **目录名**（青蓝色）
+- 📊 **上下文用量**（紫 → 黄 >70% → 红 >90%）
+- 💾 **Token 用量**（荧光绿）
+- 💰 **费用**（明黄色）
+
+## 配色
+
+| 令牌 | 色值 | 用途 |
+|------|------|------|
+| 模型 | `#ff3cac` | 热粉 |
+| 路径 | `#00d4ff` | 青蓝 |
+| thinking | `#ff6b6b` | 珊瑚红 |
+| thinking high/xhigh | rainbow | 彩虹渐变 |
+| 上下文正常 | `#6c5ce7` | 紫色 |
+| 上下文 >70% | `#fdcb6e` | 黄色警告 |
+| 上下文 >90% | `#ff3366` | 红色错误 |
+| 费用 | `#fdcb6e` | 明黄 |
+| tokens | `#00ff87` | 荧光绿 |
+
+## 许可
+
+MIT

package/index.ts

@@ -0,0 +1,211 @@
+/**
+ * pi-nano-footer — 超轻量 powerline 风格 footer
+ *
+ * 精确复刻 pi-powerline-footer default 预设的样式 +
+ * 用户自定义霓虹色配色方案。
+ *
+ * 安装：放到 ~/.pi/agent/extensions/ 后重启 pi 即可自动加载。
+ * 临时测试：pi -e ~/.pi/agent/extensions/pi-nano-footer.ts
+ */
+
+import type { AssistantMessage } from "@earendil-works/pi-ai";
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+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",
+};
+
+// ── Rainbow 色表（high / xhigh 思考等级用） ──
+const RAINBOW = [
+  "#b281d6", "#d787af", "#febc38", "#e4c00f",
+  "#89d281", "#00afaf", "#178fb9", "#b281d6",
+];
+
+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();
+
+    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. Cache read —— #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, "")];
+        },
+      };
+    });
+  });
+
+  // ── 事件订阅：保持 footer 实时刷新 ──
+
+  pi.on("thinking_level_select", (event) => {
+    thinkingLevel = event.level;
+    refresh();
+  });
+  pi.on("model_select", () => refresh());
+  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);
+    requestRender = 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

@@ -0,0 +1,37 @@
+{
+  "name": "@lokiyou/pi-nano-footer",
+  "version": "0.1.0",
+  "description": "超轻量 powerline 风格 footer for Pi Coding Agent — 霓虹配色，实时显示模型、思考等级、目录、上下文、token 和费用",
+  "type": "module",
+  "keywords": [
+    "pi-package",
+    "pi-extension",
+    "footer",
+    "statusline",
+    "powerline",
+    "neon"
+  ],
+  "author": "lokiyou",
+  "license": "MIT",
+  "files": [
+    "index.ts",
+    "README.md"
+  ],
+  "pi": {
+    "extensions": [
+      "./index.ts"
+    ]
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*",
+    "@earendil-works/pi-ai": "*"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}