pi-tui-status-beautifier 1.3.2 → 1.5.0

package/extensions/tui-status-beautifier.ts

@@ -22,6 +22,7 @@ export interface CustomStyleConfig {
   separator?: string;
   brackets?: [string, string];
   inverse?: boolean;
+  padName?: boolean;
   glyphs?: {
     success?: string;
     warning?: string;
@@ -31,21 +32,52 @@ export interface CustomStyleConfig {
 }
 
 const BUILTIN_PRESETS: Record<string, CustomStyleConfig> = {
-  minimal: {
+  stream: {
     separator: " ❯ ",
   },
-  glass: {
-    prefix: "▕ ",
-    suffix: " ▏",
+  powerline: {
+    brackets: ["‹", "›"],
     separator: " ",
+    glyphs: {
+      success: "◆",
+      warning: "◌",
+      error: "▲",
+      accent: "◈",
+    },
+  },
+  matrix: {
+    brackets: ["⦗", "⦘"],
+    separator: " ",
+    glyphs: {
+      success: "✦",
+      warning: "◍",
+      error: "✖",
+      accent: "✧",
+    },
   },
   glow: {
     brackets: ["[", "]"],
     inverse: true,
   },
+  // Backward-compatible aliases
+  minimal: {
+    separator: " ❯ ",
+    padName: true,
+  },
+  glass: {
+    brackets: ["‹", "›"],
+    separator: " ",
+    glyphs: {
+      success: "◆",
+      warning: "◌",
+      error: "▲",
+      accent: "◈",
+    },
+  },
 };
 
-const VALID_STYLES = ["minimal", "glass", "glow", "custom", "off"] as const;
+const VALID_STYLES = ["stream", "powerline", "matrix", "glow", "minimal", "glass", "custom", "off"] as const;
+const OFF_STYLES = new Set(["off", "default", "none", "raw", "vanilla", "disable", "disabled"]);
 
 // Store original statuses to allow dynamic redrawing on configuration changes.
 const originalStatuses = new Map<string, string | undefined>();
@@ -67,6 +99,7 @@ const BRACKET_PATTERN = /\[(\d+)\]/;
 const NUMBER_PATTERN = /\b(\d+)\b/;
 
 let currentStyle = "minimal";
+let fullFooterEnabled = false;
 let customStyleConfig: CustomStyleConfig | undefined;
 
 /**
@@ -75,6 +108,7 @@ let customStyleConfig: CustomStyleConfig | undefined;
  */
 export function loadConfig(cwd: string = process.cwd()): {
   style: string;
+  fullFooter: boolean;
   custom?: CustomStyleConfig;
   targetSettingsPath: string;
 } {
@@ -83,6 +117,7 @@ export function loadConfig(cwd: string = process.cwd()): {
   const localPath = path.join(cwd, ".pi/settings.json");
 
   let resolvedStyle = "minimal";
+  let resolvedFullFooter = false;
   let resolvedCustom: CustomStyleConfig | undefined;
   let hasLocalConfig = false;
 
@@ -92,8 +127,15 @@ export function loadConfig(cwd: string = process.cwd()): {
       const data = JSON.parse(fs.readFileSync(globalPath, "utf-8"));
       if (data.beautifier) {
         if (typeof data.beautifier.style === "string") {
-          const s = data.beautifier.style;
-          if ((VALID_STYLES as readonly string[]).includes(s)) resolvedStyle = s;
+          const s = data.beautifier.style.toLowerCase().trim();
+          if (OFF_STYLES.has(s)) {
+            resolvedStyle = "off";
+          } else if ((VALID_STYLES as readonly string[]).includes(s)) {
+            resolvedStyle = s;
+          }
+        }
+        if (typeof data.beautifier.fullFooter === "boolean") {
+          resolvedFullFooter = data.beautifier.fullFooter;
         }
         if (data.beautifier.custom && typeof data.beautifier.custom === "object") {
           resolvedCustom = data.beautifier.custom;
@@ -109,8 +151,15 @@ export function loadConfig(cwd: string = process.cwd()): {
       if (data.beautifier) {
         hasLocalConfig = true;
         if (typeof data.beautifier.style === "string") {
-          const s = data.beautifier.style;
-          if ((VALID_STYLES as readonly string[]).includes(s)) resolvedStyle = s;
+          const s = data.beautifier.style.toLowerCase().trim();
+          if (OFF_STYLES.has(s)) {
+            resolvedStyle = "off";
+          } else if ((VALID_STYLES as readonly string[]).includes(s)) {
+            resolvedStyle = s;
+          }
+        }
+        if (typeof data.beautifier.fullFooter === "boolean") {
+          resolvedFullFooter = data.beautifier.fullFooter;
         }
         if (data.beautifier.custom && typeof data.beautifier.custom === "object") {
           resolvedCustom = { ...(resolvedCustom || {}), ...data.beautifier.custom };
@@ -120,11 +169,12 @@ export function loadConfig(cwd: string = process.cwd()): {
   } catch (_) {}
 
   currentStyle = resolvedStyle;
+  fullFooterEnabled = resolvedFullFooter;
   customStyleConfig = resolvedCustom;
 
   // Target path for atomic write: local project if exists or in project directory, otherwise global
   const targetSettingsPath = hasLocalConfig || fs.existsSync(localPath) ? localPath : globalPath;
-  return { style: resolvedStyle, custom: resolvedCustom, targetSettingsPath };
+  return { style: resolvedStyle, fullFooter: resolvedFullFooter, custom: resolvedCustom, targetSettingsPath };
 }
 
 loadConfig();
@@ -138,7 +188,7 @@ export function beautifyStatus(
   customCfg?: CustomStyleConfig
 ): string | undefined {
   if (originalVal === undefined) return undefined;
-  if (style === "off") return originalVal;
+  if (style === "off" || OFF_STYLES.has((style || "").toLowerCase().trim())) return originalVal;
 
   try {
     const hasAnsi = originalVal.includes("\u001B") || originalVal.includes("\u009B");
@@ -150,7 +200,7 @@ export function beautifyStatus(
       return originalVal;
     }
 
-    // 1. Get display name
+    // 1. Get display name (compact natural width by default to save precious terminal columns)
     let name = key.toLowerCase();
     if (COMMON_NAMES[name]) {
       name = COMMON_NAMES[name];
@@ -164,7 +214,14 @@ export function beautifyStatus(
         name = COMMON_NAMES[name];
       }
     }
-    const visualName = padToVisualWidth(sliceToVisualWidth(name, 10), 10);
+    const preset =
+      style === "custom"
+        ? (customCfg || customStyleConfig || {})
+        : (BUILTIN_PRESETS[style] || BUILTIN_PRESETS.stream);
+
+    const visualName = preset.padName === true
+      ? padToVisualWidth(sliceToVisualWidth(name, 10), 10)
+      : name;
 
     // 2. Extract metrics/progress details safely (e.g. (2) or fraction 2/5 or count)
     let details: string | undefined;
@@ -234,11 +291,6 @@ export function beautifyStatus(
     }
 
     // 4. Determine state glyph & indicator
-    const preset =
-      style === "custom"
-        ? (customCfg || customStyleConfig || {})
-        : (BUILTIN_PRESETS[style] || BUILTIN_PRESETS.minimal);
-
     const glyphMap = preset.glyphs || {};
     let glyph =
       glyphMap[state] ||
@@ -424,26 +476,66 @@ export function renderBeautifiedFooter(
   const modelName = ctx?.model?.name || ctx?.model?.id || "";
   const styledModel = modelName ? (hasThemeFg ? theme.fg("muted", modelName) : modelName) : "";
 
-  // 3. Token metrics
-  let input = 0, output = 0;
-  if (ctx?.sessionManager?.getBranch) {
+  // 3. Token metrics & context usage (full fidelity matching native Pi footer)
+  let input = 0, output = 0, cacheRead = 0, cacheWrite = 0, cost = 0;
+  let latestCacheHitRate: number | undefined;
+
+  if (ctx?.sessionManager?.getEntries) {
     try {
-      for (const e of ctx.sessionManager.getBranch()) {
-        if (e.type === "message" && e.message?.role === "assistant" && e.message?.usage) {
-          const u = e.message.usage;
+      for (const entry of ctx.sessionManager.getEntries()) {
+        if (entry.type === "usage" && entry.usage) {
+          input += entry.usage.input || 0;
+          output += entry.usage.output || 0;
+          cacheRead += entry.usage.cacheRead || 0;
+          cacheWrite += entry.usage.cacheWrite || 0;
+          cost += entry.usage.cost?.total || 0;
+        } else if (entry.type === "message" && entry.message?.role === "assistant" && entry.message?.usage) {
+          const u = entry.message.usage;
           input += u.input || 0;
           output += u.output || 0;
+          cacheRead += u.cacheRead || 0;
+          cacheWrite += u.cacheWrite || 0;
+          cost += u.cost?.total || 0;
+          const promptTokens = (u.input || 0) + (u.cacheRead || 0) + (u.cacheWrite || 0);
+          if (promptTokens > 0 && u.cacheRead) {
+            latestCacheHitRate = (u.cacheRead / promptTokens) * 100;
+          }
         }
       }
     } catch (_) {}
   }
-  const fmt = (n: number) => (n < 1000 ? `${n}` : `${(n / 1000).toFixed(1)}k`);
-  const tokenStr = input > 0 || output > 0 ? `↑${fmt(input)} ↓${fmt(output)}` : "";
+
+  const fmt = (n: number) => {
+    if (n < 1000) return `${n}`;
+    if (n < 10000) return `${(n / 1000).toFixed(1)}k`;
+    if (n < 1000000) return `${Math.round(n / 1000)}k`;
+    if (n < 10000000) return `${(n / 1000000).toFixed(1)}M`;
+    return `${Math.round(n / 1000000)}M`;
+  };
+
+  const statParts: string[] = [];
+  if (input > 0) statParts.push(`↑${fmt(input)}`);
+  if (output > 0) statParts.push(`↓${fmt(output)}`);
+  if (cacheRead > 0) statParts.push(`R${fmt(cacheRead)}`);
+  if (latestCacheHitRate !== undefined) statParts.push(`CH${latestCacheHitRate.toFixed(1)}%`);
+  if (cost > 0) statParts.push(`$${cost.toFixed(3)}`);
+
+  const contextUsage = ctx?.getContextUsage?.();
+  const contextWindow = contextUsage?.contextWindow || ctx?.model?.contextWindow || 0;
+  if (contextUsage?.percent !== undefined && contextUsage?.percent !== null) {
+    statParts.push(`${contextUsage.percent.toFixed(1)}%/${fmt(contextWindow)} (auto)`);
+  }
+
+  const tokenStr = statParts.join(" ");
   const styledTokens = tokenStr ? (hasThemeFg ? theme.fg("dim", tokenStr) : tokenStr) : "";
 
+  // Thinking level
+  const thinking = ctx?.thinkingLevel && ctx.thinkingLevel !== "off" ? ` • ${ctx.thinkingLevel}` : "";
+  const fullModelStr = styledModel ? `${styledModel}${hasThemeFg ? theme.fg("dim", thinking) : thinking}` : "";
+
   // Left & right parts of Line 1
   const leftText = styledBranch;
-  const rightParts = [styledTokens, styledModel].filter(Boolean);
+  const rightParts = [styledTokens, fullModelStr].filter(Boolean);
   const rightText = rightParts.join(styledSep);
 
   const leftVis = getStringWidth(leftText);
@@ -492,7 +584,7 @@ export default function (pi: ExtensionAPI) {
     originalStatuses.clear();
     lastRenderedStatus.clear();
 
-    // Hook setStatus for clean status badge formatting (never hijack Pi's native footer)
+    // 1. Hook setStatus for clean status badge formatting (always active unless style === "off")
     const originalSetStatus = ctx.ui.setStatus;
     if (originalSetStatus && !(originalSetStatus as any).__beautifierHooked) {
       const wrapped = function (key: string, value: string | undefined) {
@@ -511,6 +603,28 @@ export default function (pi: ExtensionAPI) {
       (wrapped as any).__beautifierHooked = true;
       ctx.ui.setStatus = wrapped;
     }
+
+    // 2. Hook setFooter ONLY if user explicitly opted in with fullFooter === true!
+    // By default fullFooter is FALSE: Pi's native top two lines remain 100% native and untouched!
+    if (fullFooterEnabled && currentStyle !== "off" && typeof (ctx.ui as any).setFooter === "function") {
+      (ctx.ui as any).setFooter((tui: any, theme: any, footerData: any) => {
+        const unsub =
+          typeof footerData?.onBranchChange === "function"
+            ? footerData.onBranchChange(() => tui.requestRender())
+            : undefined;
+
+        return {
+          dispose: unsub,
+          invalidate() {},
+          render(width: number): string[] {
+            if (currentStyle === "off" || !fullFooterEnabled) return [];
+            return renderBeautifiedFooter(width, tui, theme, footerData, ctx, currentStyle, customStyleConfig);
+          },
+        };
+      });
+    } else if (typeof (ctx.ui as any).setFooter === "function") {
+      (ctx.ui as any).setFooter(undefined); // Restore native Pi footer
+    }
   });
 
   // Dynamic status bar style controller registry
@@ -522,11 +636,13 @@ export default function (pi: ExtensionAPI) {
       }
 
       const styleOptions = [
-        "custom  - [AI Prompt Recipe] Let your agent generate or tailor your own style",
-        "minimal - Clean chevron indicator (e.g. name ❯ ●)",
-        "glass   - Framed capsule badge (e.g. ▕ name ● ▏)",
-        "glow    - High-contrast inverse pill (e.g. name [ ● ])",
-        "off     - Pass through raw status output",
+        "stream    - Clean chevron stream (e.g. name ❯ ● ready)",
+        "powerline - Angled brackets & diamonds (e.g. name ‹◆ ready›)",
+        "matrix    - Dot-matrix brackets & stars (e.g. name ⦗✦ ready⦘)",
+        "glow      - High-contrast inverse pill (e.g. name [ ● ready ])",
+        "custom    - [AI Prompt Recipe] Let your agent tailor your bespoke style",
+        `footer    - Toggle Full-Footer beautification (Git/Model/Tokens) [Currently: ${fullFooterEnabled ? "ON" : "OFF"}]`,
+        "off       - Revert to native Pi status bar & clean settings",
       ];
 
       const choice = await ctx.ui.select(`Choose status style (Current: ${currentStyle}):`, styleOptions);
@@ -535,24 +651,96 @@ export default function (pi: ExtensionAPI) {
 
       const styleKey = choice.split(" ")[0].trim();
 
+      if (styleKey === "footer") {
+        fullFooterEnabled = !fullFooterEnabled;
+        const { targetSettingsPath } = loadConfig(ctx.cwd || process.cwd());
+        try {
+          if (fs.existsSync(targetSettingsPath)) {
+            const data = fs.readFileSync(targetSettingsPath, "utf-8");
+            const config = JSON.parse(data);
+            if (!config.beautifier) config.beautifier = {};
+            config.beautifier.fullFooter = fullFooterEnabled;
+            const tempSettings = `${targetSettingsPath}.tmp.${process.pid}.${Date.now()}`;
+            fs.writeFileSync(tempSettings, JSON.stringify(config, null, 2), "utf-8");
+            fs.renameSync(tempSettings, targetSettingsPath);
+          }
+        } catch (_) {}
+
+        if (fullFooterEnabled && currentStyle !== "off" && typeof (ctx.ui as any).setFooter === "function") {
+          (ctx.ui as any).setFooter((tui: any, theme: any, footerData: any) => {
+            const unsub = typeof footerData?.onBranchChange === "function" ? footerData.onBranchChange(() => tui.requestRender()) : undefined;
+            return {
+              dispose: unsub,
+              invalidate() {},
+              render(width: number): string[] {
+                if (currentStyle === "off" || !fullFooterEnabled) return [];
+                return renderBeautifiedFooter(width, tui, theme, footerData, ctx, currentStyle, customStyleConfig);
+              }
+            };
+          });
+        } else if (typeof (ctx.ui as any).setFooter === "function") {
+          (ctx.ui as any).setFooter(undefined);
+        }
+
+        ctx.ui.notify(`Full-footer beautification is now ${fullFooterEnabled ? "ENABLED" : "DISABLED (Native Pi Footer)"}`, "info");
+        return;
+      }
+
+      if (styleKey === "off") {
+        currentStyle = "off";
+        customStyleConfig = undefined;
+        lastRenderedStatus.clear();
+
+        // Restore all raw original statuses immediately
+        for (const [key, val] of originalStatuses.entries()) {
+          ctx.ui.setStatus(key, val);
+        }
+
+        // Zero-trace physical cleanup: completely prune the `beautifier` key from settings.json!
+        const { targetSettingsPath } = loadConfig(ctx.cwd || process.cwd());
+        try {
+          if (fs.existsSync(targetSettingsPath)) {
+            const data = fs.readFileSync(targetSettingsPath, "utf-8");
+            const config = JSON.parse(data);
+            if (config.beautifier) {
+              delete config.beautifier;
+              const tempSettings = `${targetSettingsPath}.tmp.${process.pid}.${Date.now()}`;
+              fs.writeFileSync(tempSettings, JSON.stringify(config, null, 2), "utf-8");
+              fs.renameSync(tempSettings, targetSettingsPath);
+            }
+          }
+        } catch (_e) {
+          // Silently ignore disk write errors
+        }
+
+        ctx.ui.notify("Reverted to native Pi status bar. Cleaned up settings.json.", "info");
+        return;
+      }
+
       if (styleKey === "custom") {
         const promptRecipe = [
           "You are acting as my Pi TUI Status Bar designer for `pi-tui-status-beautifier`.",
-          "1. In my primary language, call `ask_user_question` with ASCII visual preview mockups (e.g. Cyber Powerline ‹●›, Nordic Minimalist │ ◈, Capsule Pill [●], Tokyo Night » ✦) to consult my visual taste.",
-          "2. Once I select or describe my aesthetic, save the configuration directly into `./.pi/settings.json` (or `~/.pi/agent/settings.json`) under `beautifier`:",
+          "1. In my primary language, call `ask_user_question` with ASCII visual preview mockups showing ONLY realistic extension statuses (e.g. `chrome`, `toolflow`, `plan`):",
+          "   - Powerline:  chrome ‹◆ ready›  |  toolflow ‹◈ 2/5›",
+          "   - Matrix:     chrome ⦗✦ ready⦘  |  toolflow ⦗◍ 2/5⦘",
+          "   - Stream:     chrome ❯ ● ready  |  toolflow ❯ ◐ 2/5",
+          "   - Glow:       chrome [ ● ready ]  |  toolflow [ ◐ 2/5 ]",
+          "   (Do NOT include git branch or model name in mockups).",
+          "2. If I describe or pick a style, write the configuration into `./.pi/settings.json` (or `~/.pi/agent/settings.json`) under `beautifier`:",
           "   {",
           '     "beautifier": {',
           '       "style": "custom",',
           '       "custom": {',
           '         "separator": " » ",',
           '         "brackets": ["«", "»"],',
-          '         "prefix": "✦ ",',
+          '         "prefix": "",',
           '         "suffix": "",',
           '         "glyphs": { "success": "✦", "warning": "◇", "error": "✖", "accent": "✧" }',
           "       }",
           "     }",
           "   }",
-          "Do NOT crawl filesystem or edit extension source code files."
+          "3. If I say revert, restore, default, off, or cancel, DELETE the `beautifier` key from `settings.json` and exit quietly without asking more questions.",
+          "4. Do NOT search filesystem or edit extension source files."
         ].join("\n");
 
         if (typeof (ctx.ui as any).setEditorText === "function") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-tui-status-beautifier",
-  "version": "1.3.2",
+  "version": "1.5.0",
   "description": "Minimalist status bar formatter & AI-customizable layout engine for Pi TUI.",
   "main": "extensions/tui-status-beautifier.ts",
   "keywords": [