pi-tui-status-beautifier 1.1.2 → 1.2.0

package/README.md

@@ -1,45 +1,31 @@
-# 🎨 Pi TUI Status Beautifier
+# pi-tui-status-beautifier
 
-A premium status bar beautifier extension for the Pi Terminal TUI. Instantly transforms boring status lines into brand-inspired themes and clean layouts.
+Minimalist status bar formatter & AI-customizable layout engine for the [Pi](https://github.com/earendil-works/pi-coding-agent) terminal TUI.
 
-## 🚀 Installation & Usage
+Automatically normalizes verbose extension status strings (`plannotator`, `pi-mcp-adapter`, `pi-subagents`, `toolflow`, etc.) into clean, visually aligned 10-column status badges with zero runtime disk I/O overhead.
 
-Install directly via the Pi package manager:
+## Installation
 
 ```bash
 pi install npm:pi-tui-status-beautifier
 ```
 
-Or install from git:
-```bash
-pi install git:github.com/3ZEROS12/pi-tui-status-beautifier
-```
-
-### Enable/Disable Styles
-Once installed, open the Pi TUI terminal and run the dynamic interactive switch command:
-```bash
-/beautify
-```
-This renders a live selectable menu to instantly toggle between brand themes (`Cupertino`, `OpenAI`, `Claude`, `Microsoft Fluent`, `Material`) and layout styles (`Minimal`, `Glass`, `Glow badge`, `Matrix frame`, or `Default/Off`).
-
----
+## Usage
 
-## 🎨 Layout Themes
+Run `/beautify` inside Pi to switch status bar layouts or generate a custom style with your AI agent:
 
-* **Minimal (Default)**: `wechat ❯ ●` | `plan ❯ ● (2)`
-* **Glass (毛玻璃)**: `▕ wechat ● ▏`
-* **Glow Badge**: `wechat [ ● ]`
-* **Matrix (机架双线框)**: `wechat ⦗ ● ⦘`
+- **`custom` — [AI Prompt Recipe]**: Pre-fills a structured prompt into your terminal editor so your coding agent can inspect `tui-status-beautifier.ts` and craft a bespoke status bar layout tailored to your exact aesthetic.
+- **`minimal`**: Clean chevron indicator (`name       ❯ ● (2)`)
+- **`glass`**: Framed capsule badge (`▕ name       ● (2) ▏`)
+- **`glow`**: High-contrast inverse pill (`name       [ ● 2 ]`)
+- **`off`**: Pass through raw status strings untouched
 
-## 🍎 Tech & Brand Themes
+## Engineering Highlights
 
-* **Mac Cupertino (`apple`)**: Minimal vertical divider with native traffic-light state dots.
-* **ChatGPT (`openai`)**: Star/spirograph symbol `❂` wrapping plugin indicators in OpenAI Cyan.
-* **Claude Humanist (`anthropic`)**: Artful 4-corner Claude star `✦` styling.
-* **Fluent Microsoft (`microsoft`)**: Flat terminal tile layout using Microsoft Fluent block `⊞`.
-* **Material Google (`google`)**: Google multi-color letters rendering index name values.
+- **Unicode & Surrogate-Pair Safe**: Full `codePointAt(0)` visual cell width measurement across CJK ideographs, Hiragana/Katakana, Hangul, emojis, and zero-width joiners (`0x200d`, `0xfe0f`).
+- **Zero Render-Loop Disk I/O**: Reads `~/.pi/agent/settings.json` once at startup and performs dirty-checked in-memory rendering; atomic temp-file rename (`writeFileSync` + `renameSync`) only when switching styles via `/beautify`.
+- **ReDoS-Safe ANSI Stripping**: Fast-path bypass when no ESC/CSI bytes are present.
 
----
+## License
 
-## 🛠️ Contribution & Development
-The core logic resides in `extensions/tui-status-beautifier.ts`. All status mapping is completely memory-cached to eliminate Paint Loop I/O bottlenecks.
+MIT

package/extensions/tui-status-beautifier.ts

@@ -13,13 +13,11 @@ const COMMON_NAMES: Record<string, string> = {
   "wechat-assistant": "wechat",
 };
 
+const VALID_STYLES = ["minimal", "glass", "glow", "off"] as const;
+
 // Store original statuses to allow dynamic redrawing on configuration changes.
-// Cleaned up on session restart to prevent memory leaks from replaced sessions.
 const originalStatuses = new Map<string, string | undefined>();
 
-// Memoization cache for Google colorized text to reduce GC overhead and theme calls.
-const googleColorizeCache = new Map<string, string>();
-
 // State Cache for Dirty-Checking
 const lastRenderedStatus = new Map<string, string | undefined>();
 
@@ -29,7 +27,7 @@ const ANSI_STRIP_REGEX =
 
 // Hoisted regex patterns to prevent instantiation and GC overhead in the render hot-path
 const STATUS_PATTERN =
-  /[🟢🔴🟡⚪⏸✅❌✓✗?✔✖☑☐◆📋]|[0-9]+\/[0-9]+|active|online|offline|running|paused|error|success|connected|disconnected/i;
+  /[🟢🔴🟡⚪⏸✅❌✓✗?✔✖☑☐◆📋⌬]|[0-9]+\/[0-9]+|active|online|offline|running|paused|error|success|connected|disconnected/i;
 const NAME_SUFFIX_PATTERN = /-(extension|plugin|assistant|adapter|slash-text|slash|text|widget)$/gi;
 const FRACTION_PATTERN = /(\d+\/\d+|\d+%\s*)/;
 const PARENTHESES_PATTERN = /\((\d+)\)/;
@@ -40,9 +38,6 @@ const NUMBER_PATTERN = /\b(\d+)\b/;
 const home = process.env.HOME || process.env.USERPROFILE || "";
 const settingsPath = path.join(home, ".pi/agent/settings.json");
 
-// Command-Driven I/O State:
-// Loaded ONCE synchronously during extension loading, thereafter handled entirely in memory.
-// Disk I/O only occurs when the user triggers the "/beautify" selection command.
 let currentStyle = "minimal";
 
 try {
@@ -50,34 +45,14 @@ try {
     const data = fs.readFileSync(settingsPath, "utf-8");
     const config = JSON.parse(data);
     if (config.beautifier && typeof config.beautifier.style === "string") {
-      currentStyle = config.beautifier.style;
+      const saved = config.beautifier.style;
+      currentStyle = (VALID_STYLES as readonly string[]).includes(saved) ? saved : "minimal";
     }
   }
-} catch (e) {
+} catch (_e) {
   // Graceful fallback to default in case of JSON parse or read errors
 }
 
-// Google playful multi-color letter colorizer with type safeguards and memoization
-export function googleColorize(text: string, theme: any): string {
-  if (!theme || typeof theme.fg !== "function") return text;
-
-  const cached = googleColorizeCache.get(text);
-  if (cached !== undefined) return cached;
-
-  // Google's brand colors cycle: Blue, Red, Yellow, Green
-  const colors = ["accent", "error", "warning", "success"];
-  const colorized = text
-    .split("")
-    .map((char, index) => {
-      const color = colors[index % colors.length];
-      return theme.fg(color, char);
-    })
-    .join("");
-
-  googleColorizeCache.set(text, colorized);
-  return colorized;
-}
-
 // Clean status text and map state and details
 export function beautifyStatus(
   key: string,
@@ -86,16 +61,14 @@ export function beautifyStatus(
   style: string
 ): string | undefined {
   if (originalVal === undefined) return undefined;
-  if (style === "off") return originalVal; // Pass through untouched if disabled
+  if (style === "off") return originalVal;
 
   try {
-    // Fast-path: bypass Regex search if no ESC or CSI bytes exist to reduce hot redraw latency
     const hasAnsi = originalVal.includes("\u001B") || originalVal.includes("\u009B");
     const cleanVal = hasAnsi ? originalVal.replace(ANSI_STRIP_REGEX, "").trim() : originalVal.trim();
 
     if (cleanVal === "") return "";
 
-    // Safely bypass values that have no status signifiers (such as logs or text widgets)
     if (!STATUS_PATTERN.test(cleanVal)) {
       return originalVal;
     }
@@ -111,7 +84,6 @@ export function beautifyStatus(
       }
       name = name.replace(NAME_SUFFIX_PATTERN, "").toLowerCase();
     }
-    // Optimization (Finding 5): Use visual cell width calculations rather than standard .length for CJK/emojis
     const visualName = padToVisualWidth(sliceToVisualWidth(name, 10), 10);
 
     // 2. Extract metrics/progress details safely (e.g. (2) or fraction 2/5 or count)
@@ -141,7 +113,6 @@ export function beautifyStatus(
       valLower.includes("✗") ||
       valLower.includes("offline") ||
       valLower.includes("error") ||
-      valLower.includes("未登录") ||
       valLower.includes("failed")
     ) {
       state = "error";
@@ -160,8 +131,7 @@ export function beautifyStatus(
       valLower.includes("✅") ||
       valLower.includes("✓") ||
       valLower.includes("online") ||
-      valLower.includes("success") ||
-      valLower.includes("已连接")
+      valLower.includes("success")
     ) {
       state = "success";
     } else {
@@ -176,39 +146,8 @@ export function beautifyStatus(
     const hasThemeFg = theme && typeof theme.fg === "function";
     const coloredIndicator = hasThemeFg ? theme.fg(state, char) : char;
 
-    // 5. Render layout presets
+    // 5. Render layout presets (3 curated baseline layouts: minimal, glass, glow)
     switch (style) {
-      case "apple": {
-        const separator = hasThemeFg ? theme.fg("dim", "  │  ") : "  │  ";
-        const dimmedName = hasThemeFg ? theme.fg("dim", visualName) : visualName;
-        const detailStr = details ? ` (${details})` : "";
-        return `${dimmedName}${separator}${coloredIndicator}${detailStr}`;
-      }
-      case "openai": {
-        const spirograph = hasThemeFg ? theme.fg("success", "❂") : "❂";
-        const detailStr = details ? ` [${details}]` : "";
-        const dimmedName = hasThemeFg ? theme.fg("muted", visualName) : visualName;
-        return `${spirograph} ${dimmedName}${detailStr}`;
-      }
-      case "anthropic": {
-        const organicStar = "✦";
-        const coloredStar = hasThemeFg ? theme.fg(state, organicStar) : organicStar;
-        const dimmedName = hasThemeFg ? theme.fg("muted", visualName) : visualName;
-        const detailStr = details ? ` ❖ ${details}` : "";
-        return `${dimmedName} ${coloredStar}${detailStr}`;
-      }
-      case "microsoft": {
-        const windowsLogo = hasThemeFg ? theme.fg("accent", "⊞") : "⊞";
-        const detailStr = details ? ` │ ${details}` : "";
-        const prefix = hasThemeFg ? theme.fg("dim", "[") : "[";
-        const suffix = hasThemeFg ? theme.fg("dim", "]") : "]";
-        return `${windowsLogo} ${prefix}${visualName}${suffix} ${coloredIndicator}${detailStr}`;
-      }
-      case "google": {
-        const coloredName = googleColorize(visualName, theme);
-        const detailStr = details ? `:${details}` : "";
-        return `${coloredName} ➔ ${coloredIndicator}${detailStr}`;
-      }
       case "glass": {
         const prefix = hasThemeFg ? theme.fg("dim", "▕ ") : "▕ ";
         const suffix = hasThemeFg ? theme.fg("dim", " ▏") : " ▏";
@@ -223,99 +162,108 @@ export function beautifyStatus(
         const dimmedName = hasThemeFg ? theme.fg("muted", visualName) : visualName;
         return `${dimmedName} ${coloredBadge}`;
       }
-      case "matrix": {
-        const prefix = hasThemeFg ? theme.fg("dim", " \u2397 ") : " \u2397 ";
-        const suffix = hasThemeFg ? theme.fg("dim", " \u2398") : "  \u2398";
-        const separator = hasThemeFg ? theme.fg("dim", " | ") : " | ";
-        const detailStr = details ? `${separator}${details}` : "";
-        return `${visualName}${prefix}${coloredIndicator}${detailStr}${suffix}`;
-      }
-      case "minimal": {
+      case "minimal":
+      default: {
         const separator = hasThemeFg ? theme.fg("dim", " ❯ ") : " ❯ ";
         const dimmedName = hasThemeFg ? theme.fg("muted", visualName) : visualName;
         const detailStr = details ? ` (${details})` : "";
         return `${dimmedName}${separator}${coloredIndicator}${detailStr}`;
       }
-      default:
-        return originalVal;
     }
-  } catch (error) {
-    // Resilience fallback: prevent rendering exceptions from ever crashing UI updates
+  } catch (_error) {
     return originalVal;
   }
 }
 
 /**
- * Calculates the visual column cell width of a string (Finding 5), taking into account
- * full-width Unicode characters, East Asian characters, and emojis.
+ * Calculates the visual column cell width of a string, taking into account
+ * full-width Unicode characters, East Asian ideographs, Kana, Hangul, emojis, and zero-width joiners.
  */
 export function getStringWidth(str: string): number {
   if (!str) return 0;
-  // Strip ANSI escape sequences & control codes before counting visual width
   const clean = str.replace(ANSI_STRIP_REGEX, "");
   let width = 0;
-  for (let i = 0; i < clean.length; i++) {
-    const code = clean.charCodeAt(i);
+
+  for (const char of clean) {
+    const code = char.codePointAt(0) || 0;
+
+    if (
+      code === 0x200d ||
+      code === 0xfe0f ||
+      code === 0xfe0e ||
+      (code >= 0x0300 && code <= 0x036f) ||
+      (code >= 0x200b && code <= 0x200f)
+    ) {
+      continue;
+    }
+
     if (isFullWidth(code)) {
       width += 2;
     } else {
       width += 1;
     }
   }
+
   return width;
 }
 
 /**
  * Checks if a character unicode code point is full-width (East Asian Width).
  */
-function isFullWidth(code: number): boolean {
+export function isFullWidth(code: number): boolean {
   if (isNaN(code)) return false;
   return (
-    code >= 0x1100 &&
-    (code <= 0x115f ||
-      code === 0x2329 ||
-      code === 0x232a ||
-      // CJK Radicals Supplement .. Enclosed CJK Letters and Months
-      (code >= 0x2e80 && code <= 0x3247 && code !== 0x303f) ||
-      // Enclosed CJK Letters and Months .. CJK Unified Ideographs Extension A
-      (code >= 0x3250 && code <= 0x4dbf) ||
-      // CJK Unified Ideographs .. Yi Radicals
-      (code >= 0x4e00 && code <= 0xa4c6) ||
-      // Hangul Jamo Extended-A
-      (code >= 0xa960 && code <= 0xa97c) ||
-      // Hangul Syllables
-      (code >= 0xac00 && code <= 0xd7a3) ||
-      // CJK Compatibility Ideographs
-      (code >= 0xf900 && code <= 0xfaff) ||
-      // Vertical Forms
-      (code >= 0xfe10 && code <= 0xfe19) ||
-      // CJK Compatibility Forms .. Small Form Variants
-      (code >= 0xfe30 && code <= 0xfe6b) ||
-      // Halfwidth and Fullwidth Forms
-      (code >= 0xff01 && code <= 0xff60) ||
-      (code >= 0xffe0 && code <= 0xffe6) ||
-      // East Asian Wide characters beyond BMP
-      (code >= 0x1b000 && code <= 0x1b001) ||
-      (code >= 0x1f200 && code <= 0x1f251) ||
-      (code >= 0x20000 && code <= 0x3fffd))
+    (code >= 0x1100 && code <= 0x115f) || // Hangul Jamo
+    code === 0x2329 ||
+    code === 0x232a ||
+    (code >= 0x2e80 && code <= 0x3247 && code !== 0x303f) || // CJK Radicals
+    (code >= 0x3040 && code <= 0x309f) || // Hiragana
+    (code >= 0x30a0 && code <= 0x30ff) || // Katakana
+    (code >= 0x3250 && code <= 0x4dbf) || // CJK Extension A
+    (code >= 0x4e00 && code <= 0xa4c6) || // CJK Unified Ideographs .. Yi
+    (code >= 0xa960 && code <= 0xa97c) || // Hangul Jamo Extended-A
+    (code >= 0xac00 && code <= 0xd7af) || // Hangul Syllables
+    (code >= 0xf900 && code <= 0xfaff) || // CJK Compatibility Ideographs
+    (code >= 0xfe10 && code <= 0xfe19) || // Vertical Forms
+    (code >= 0xfe30 && code <= 0xfe6b) || // CJK Compatibility Forms
+    (code >= 0xff01 && code <= 0xff60) || // Fullwidth Forms
+    (code >= 0xffe0 && code <= 0xffe6) || // Fullwidth Symbols
+    (code >= 0x1f300 && code <= 0x1f9ff) || // Emojis & Pictographs
+    (code >= 0x1f600 && code <= 0x1f64f) || // Emoticons
+    (code >= 0x1f680 && code <= 0x1f6ff) || // Transport & Map
+    (code >= 0x2600 && code <= 0x27bf) || // Dingbats & Misc
+    (code >= 0x1fa70 && code <= 0x1faff) || // Symbols Extended-A
+    (code >= 0x20000 && code <= 0x3fffd) // CJK Extensions B/C/D
   );
 }
 
 /**
- * Slices a string to a maximum visual cell width.
+ * Slices a string to a maximum visual cell width without cutting surrogate pairs in half.
  */
 export function sliceToVisualWidth(str: string, maxWidth: number): string {
   let width = 0;
   let sliced = "";
-  for (let i = 0; i < str.length; i++) {
-    const code = str.charCodeAt(i);
-    const charWidth = isFullWidth(code) ? 2 : 1;
+
+  for (const char of str) {
+    const code = char.codePointAt(0) || 0;
+    const charWidth =
+      code === 0x200d ||
+      code === 0xfe0f ||
+      code === 0xfe0e ||
+      (code >= 0x0300 && code <= 0x036f) ||
+      (code >= 0x200b && code <= 0x200f)
+        ? 0
+        : isFullWidth(code)
+          ? 2
+          : 1;
+
     if (width + charWidth > maxWidth) {
       break;
     }
     width += charWidth;
-    sliced += str.charAt(i);
+    sliced += char;
   }
+
   return sliced;
 }
 
@@ -334,21 +282,16 @@ export default function (pi: ExtensionAPI) {
   pi.on("session_start", async (_event, ctx) => {
     if (!ctx.hasUI || !ctx.ui) return;
 
-    // Flush stale statuses from previous sessions to prevent memory leaks and clear color cache
     originalStatuses.clear();
-    googleColorizeCache.clear();
     lastRenderedStatus.clear();
 
     const originalSetStatus = ctx.ui.setStatus;
     if (originalSetStatus && !(originalSetStatus as any).__beautifierHooked) {
       const wrapped = function (key: string, value: string | undefined) {
-        // Track original statuses for dynamic updates
         originalStatuses.set(key, value);
 
-        // Uses in-memory synchronization (zero file I/O overhead on render pipeline ticks)
         const beautified = beautifyStatus(key, value, ctx.ui.theme, currentStyle);
 
-        // Dirty-checking (Finding 6): Skip redundant stdout paint updates
         const cacheKey = `${key}:${currentStyle}`;
         if (lastRenderedStatus.get(cacheKey) === beautified) {
           return;
@@ -364,66 +307,64 @@ export default function (pi: ExtensionAPI) {
 
   // Dynamic status bar style controller registry
   pi.registerCommand("beautify", {
-    description: "Choose TUI status bar beautification style",
-    handler: async (args, ctx) => {
+    description: "Choose TUI status bar beautification style or generate a custom style with AI",
+    handler: async (_args, ctx) => {
       if (!ctx.hasUI || !ctx.ui) {
         return;
       }
 
       const styleOptions = [
-        "minimal (Millennial Minimalist - e.g. name ❯ ●)",
-        "apple (Apple Cupertino - e.g. name │ ●)",
-        "openai (OpenAI Spirograph - e.g. ❂ name)",
-        "anthropic (Anthropic Claude - e.g. name ✦)",
-        "google (Google Playful - e.g. n-a-m-e ➔ ●)",
-        "microsoft (Microsoft Fluent - e.g. ⊞ [name] ●)",
-        "glass (Charm Glass - e.g. ▕ name ● ▏)",
-        "glow (Glow Badge - e.g. name [ ● ])",
-        "matrix (Retro Matrix - e.g. name ⦗ ● | 2 ⦘)",
-        "off (use raw output)",
+        "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",
       ];
 
       const choice = await ctx.ui.select(`Choose status style (Current: ${currentStyle}):`, styleOptions);
 
-      if (choice) {
-        const styleKey = choice.split(" ")[0].trim();
-        const validStyles = [
-          "apple",
-          "openai",
-          "anthropic",
-          "google",
-          "microsoft",
-          "minimal",
-          "glass",
-          "glow",
-          "matrix",
-          "off",
-        ];
-
-        if (validStyles.includes(styleKey)) {
-          // 1. Instantly update in-memory caching
-          currentStyle = styleKey;
-          googleColorizeCache.clear(); // Clear cache when changing style/redrawing to ensure new colors are loaded
-          lastRenderedStatus.clear();  // Clear dirty checking cache to force repaint
-          ctx.ui.notify(`TUI status style changed to: ${styleKey}`, "info");
-
-          // 2. Redraw TUI indicator widgets instantly on configuration event using cached data
-          for (const [key, val] of originalStatuses.entries()) {
-            ctx.ui.setStatus(key, val);
-          }
+      if (!choice) return;
+
+      const styleKey = choice.split(" ")[0].trim();
+
+      if (styleKey === "custom") {
+        const promptRecipe = [
+          "Please customize my Pi TUI status bar style in `tui-status-beautifier.ts`.",
+          "1. Inspect the installed extension (`~/.pi/agent/npm/node_modules/pi-tui-status-beautifier/extensions/tui-status-beautifier.ts` or local repo).",
+          "2. In `beautifyStatus()`, design a bespoke status bar layout matching my taste (custom separators, status glyphs, brackets, and theme colors: accent/success/warning/error/muted/dim).",
+          "3. Apply the new style as default and show me a preview of the updated format."
+        ].join("\n");
+
+        if (typeof (ctx.ui as any).setEditorText === "function") {
+          (ctx.ui as any).setEditorText(promptRecipe);
+          ctx.ui.notify("Custom style prompt loaded into editor. Edit your preferences and press Enter!", "info");
+        } else {
+          ctx.ui.notify(promptRecipe, "info");
+        }
+        return;
+      }
+
+      if ((VALID_STYLES as readonly string[]).includes(styleKey)) {
+        currentStyle = styleKey;
+        lastRenderedStatus.clear();
+        ctx.ui.notify(`TUI status style changed to: ${styleKey}`, "info");
+
+        for (const [key, val] of originalStatuses.entries()) {
+          ctx.ui.setStatus(key, val);
+        }
 
-          // 3. Command-Driven Disk I/O: Persist settings to disk asynchronously outside core paint loop
-          try {
-            if (fs.existsSync(settingsPath)) {
-              const data = fs.readFileSync(settingsPath, "utf-8");
-              const config = JSON.parse(data);
-              if (!config.beautifier) config.beautifier = {};
-              config.beautifier.style = styleKey;
-              fs.writeFileSync(settingsPath, JSON.stringify(config, null, 2), "utf-8");
-            }
-          } catch (e) {
-            // Silently fail disk write to avoid crashing active user sessions
+        try {
+          if (fs.existsSync(settingsPath)) {
+            const data = fs.readFileSync(settingsPath, "utf-8");
+            const config = JSON.parse(data);
+            if (!config.beautifier) config.beautifier = {};
+            config.beautifier.style = styleKey;
+            const tempSettings = `${settingsPath}.tmp.${process.pid}.${Date.now()}`;
+            fs.writeFileSync(tempSettings, JSON.stringify(config, null, 2), "utf-8");
+            fs.renameSync(tempSettings, settingsPath);
           }
+        } catch (_e) {
+          // Silently ignore disk write errors
         }
       }
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pi-tui-status-beautifier",
-  "version": "1.1.2",
-  "description": "Premium brand & layout status bar beautifier for Pi terminal TUI.",
+  "version": "1.2.0",
+  "description": "Minimalist status bar formatter & AI-customizable layout engine for Pi TUI.",
   "main": "extensions/tui-status-beautifier.ts",
   "keywords": [
     "pi-package"