pi-tui-status-beautifier 1.2.1 → 1.3.1

package/extensions/tui-status-beautifier.ts

@@ -11,9 +11,41 @@ const COMMON_NAMES: Record<string, string> = {
   "subagent-slash-text": "subagent",
   "pi-wechat-assistant": "wechat",
   "wechat-assistant": "wechat",
+  "pi-control-chrome": "chrome",
+  chrome: "chrome",
+  toolflow: "toolflow",
 };
 
-const VALID_STYLES = ["minimal", "glass", "glow", "off"] as const;
+export interface CustomStyleConfig {
+  prefix?: string;
+  suffix?: string;
+  separator?: string;
+  brackets?: [string, string];
+  inverse?: boolean;
+  glyphs?: {
+    success?: string;
+    warning?: string;
+    error?: string;
+    accent?: string;
+  };
+}
+
+const BUILTIN_PRESETS: Record<string, CustomStyleConfig> = {
+  minimal: {
+    separator: " ❯ ",
+  },
+  glass: {
+    prefix: "▕ ",
+    suffix: " ▏",
+    separator: " ",
+  },
+  glow: {
+    brackets: ["[", "]"],
+    inverse: true,
+  },
+};
+
+const VALID_STYLES = ["minimal", "glass", "glow", "custom", "off"] as const;
 
 // Store original statuses to allow dynamic redrawing on configuration changes.
 const originalStatuses = new Map<string, string | undefined>();
@@ -27,38 +59,83 @@ 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|ready|idle|ok|done|failed|waiting|stopped|listening|cleanup|starting/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+)\)/;
 const BRACKET_PATTERN = /\[(\d+)\]/;
 const NUMBER_PATTERN = /\b(\d+)\b/;
 
-// Load settings path
-const home = process.env.HOME || process.env.USERPROFILE || "";
-const settingsPath = path.join(home, ".pi/agent/settings.json");
-
 let currentStyle = "minimal";
+let customStyleConfig: CustomStyleConfig | undefined;
 
-try {
-  if (fs.existsSync(settingsPath)) {
-    const data = fs.readFileSync(settingsPath, "utf-8");
-    const config = JSON.parse(data);
-    if (config.beautifier && typeof config.beautifier.style === "string") {
-      const saved = config.beautifier.style;
-      currentStyle = (VALID_STYLES as readonly string[]).includes(saved) ? saved : "minimal";
+/**
+ * Resolves configuration hierarchically:
+ * Project-level `./.pi/settings.json` takes priority over global `~/.pi/agent/settings.json`
+ */
+export function loadConfig(cwd: string = process.cwd()): {
+  style: string;
+  custom?: CustomStyleConfig;
+  targetSettingsPath: string;
+} {
+  const home = process.env.HOME || process.env.USERPROFILE || "";
+  const globalPath = path.join(home, ".pi/agent/settings.json");
+  const localPath = path.join(cwd, ".pi/settings.json");
+
+  let resolvedStyle = "minimal";
+  let resolvedCustom: CustomStyleConfig | undefined;
+  let hasLocalConfig = false;
+
+  // 1. Read global settings
+  try {
+    if (fs.existsSync(globalPath)) {
+      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;
+        }
+        if (data.beautifier.custom && typeof data.beautifier.custom === "object") {
+          resolvedCustom = data.beautifier.custom;
+        }
+      }
     }
-  }
-} catch (_e) {
-  // Graceful fallback to default in case of JSON parse or read errors
+  } catch (_) {}
+
+  // 2. Project-level override (inherits and overrides global)
+  try {
+    if (fs.existsSync(localPath)) {
+      const data = JSON.parse(fs.readFileSync(localPath, "utf-8"));
+      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;
+        }
+        if (data.beautifier.custom && typeof data.beautifier.custom === "object") {
+          resolvedCustom = { ...(resolvedCustom || {}), ...data.beautifier.custom };
+        }
+      }
+    }
+  } catch (_) {}
+
+  currentStyle = resolvedStyle;
+  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 };
 }
 
+loadConfig();
+
 // Clean status text and map state and details
 export function beautifyStatus(
   key: string,
   originalVal: string | undefined,
   theme: any,
-  style: string
+  style: string,
+  customCfg?: CustomStyleConfig
 ): string | undefined {
   if (originalVal === undefined) return undefined;
   if (style === "off") return originalVal;
@@ -83,6 +160,9 @@ export function beautifyStatus(
         name = name.slice(lastSlash + 1);
       }
       name = name.replace(NAME_SUFFIX_PATTERN, "").toLowerCase();
+      if (COMMON_NAMES[name]) {
+        name = COMMON_NAMES[name];
+      }
     }
     const visualName = padToVisualWidth(sliceToVisualWidth(name, 10), 10);
 
@@ -113,7 +193,8 @@ export function beautifyStatus(
       valLower.includes("✗") ||
       valLower.includes("offline") ||
       valLower.includes("error") ||
-      valLower.includes("failed")
+      valLower.includes("failed") ||
+      valLower.includes("stopped")
     ) {
       state = "error";
     } else if (
@@ -123,7 +204,9 @@ export function beautifyStatus(
       valLower.includes("warning") ||
       valLower.includes("pause") ||
       valLower.includes("planning") ||
-      valLower.includes("plan")
+      valLower.includes("plan") ||
+      valLower.includes("waiting") ||
+      valLower.includes("cleanup")
     ) {
       state = "warning";
     } else if (
@@ -131,45 +214,64 @@ export function beautifyStatus(
       valLower.includes("✅") ||
       valLower.includes("✓") ||
       valLower.includes("online") ||
-      valLower.includes("success")
+      valLower.includes("success") ||
+      valLower.includes("ready") ||
+      valLower.includes("idle") ||
+      valLower.includes("ok") ||
+      valLower.includes("done")
     ) {
       state = "success";
     } else {
       state = name === "plan" ? "accent" : "success";
     }
 
-    // 4. Map state to target glyph shapes
-    let char = "●";
-    if (state === "warning") char = "◌";
-    else if (state === "error") char = "▲";
+    // 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] ||
+      (state === "warning" ? "◌" : state === "error" ? "▲" : state === "accent" ? "◆" : "●");
 
     const hasThemeFg = theme && typeof theme.fg === "function";
-    const coloredIndicator = hasThemeFg ? theme.fg(state, char) : char;
-
-    // 5. Render layout presets (3 curated baseline layouts: minimal, glass, glow)
-    switch (style) {
-      case "glass": {
-        const prefix = hasThemeFg ? theme.fg("dim", "▕ ") : "▕ ";
-        const suffix = hasThemeFg ? theme.fg("dim", " ▏") : " ▏";
-        const dimmedName = hasThemeFg ? theme.fg("muted", visualName) : visualName;
-        const detailStr = details ? ` (${details})` : "";
-        return `${prefix}${dimmedName} ${coloredIndicator}${detailStr}${suffix}`;
-      }
-      case "glow": {
-        const label = ` ${char}${details ? ` ${details}` : ""} `;
-        const hasInverse = theme && typeof theme.inverse === "function";
-        const coloredBadge = hasInverse && hasThemeFg ? theme.inverse(theme.fg(state, label)) : `[${label}]`;
-        const dimmedName = hasThemeFg ? theme.fg("muted", visualName) : visualName;
-        return `${dimmedName} ${coloredBadge}`;
-      }
-      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}`;
-      }
+    const coloredGlyph = hasThemeFg ? theme.fg(state, glyph) : glyph;
+    const dimmedName = hasThemeFg ? theme.fg("muted", visualName) : visualName;
+
+    const openBracket = preset.brackets?.[0] ?? "";
+    const closeBracket = preset.brackets?.[1] ?? "";
+    const prefix = preset.prefix ?? "";
+    const suffix = preset.suffix ?? "";
+    const sep = preset.separator ?? (preset.brackets ? " " : " ❯ ");
+
+    // Inverse pill badge (glow preset)
+    if (preset.inverse && theme && typeof theme.inverse === "function") {
+      const pillContent = ` ${glyph}${details ? ` ${details}` : ""} `;
+      const coloredBadge = hasThemeFg ? theme.inverse(theme.fg(state, pillContent)) : `[${pillContent}]`;
+      return `${prefix}${dimmedName} ${coloredBadge}${suffix}`;
+    }
+
+    let badge = coloredGlyph;
+    if (details) {
+      badge = `${coloredGlyph} ${details}`;
+    }
+    if (openBracket && closeBracket) {
+      const styledOpen = hasThemeFg ? theme.fg("dim", openBracket) : openBracket;
+      const styledClose = hasThemeFg ? theme.fg("dim", closeBracket) : closeBracket;
+      badge = `${styledOpen}${badge}${styledClose}`;
+    } else if (details && !preset.brackets) {
+      const detailStr = hasThemeFg ? theme.fg("dim", ` (${details})`) : ` (${details})`;
+      badge = `${coloredGlyph}${detailStr}`;
     }
+
+    const styledSep =
+      hasThemeFg && (sep.includes("│") || sep.includes("⁝") || sep.includes("❯") || sep.includes("»"))
+        ? theme.fg("dim", sep)
+        : sep;
+
+    return `${prefix}${dimmedName}${styledSep}${badge}${suffix}`;
   } catch (_error) {
     return originalVal;
   }
@@ -278,13 +380,111 @@ export function padToVisualWidth(str: string, targetWidth: number, padChar = " "
   return str + padChar.repeat(targetWidth - currentWidth);
 }
 
+/**
+ * Full-Footer Renderer (Hooked via ctx.ui.setFooter)
+ * Formats working folder, Git branch, token metrics, and active model on Line 1,
+ * and formats all extension statuses on Line 2.
+ */
+export function renderBeautifiedFooter(
+  width: number,
+  _tui: any,
+  theme: any,
+  footerData: any,
+  ctx: any,
+  style: string,
+  customCfg?: CustomStyleConfig
+): string[] {
+  const preset =
+    style === "custom"
+      ? (customCfg || customStyleConfig || {})
+      : (BUILTIN_PRESETS[style] || BUILTIN_PRESETS.minimal);
+
+  const hasThemeFg = theme && typeof theme.fg === "function";
+  const sep = preset.separator || (preset.brackets ? " " : " ❯ ");
+  const styledSep =
+    hasThemeFg && (sep.includes("│") || sep.includes("⁝") || sep.includes("❯") || sep.includes("»"))
+      ? theme.fg("dim", sep)
+      : sep;
+
+  // 1. Folder & Git branch
+  const branch = typeof footerData?.getGitBranch === "function" ? footerData.getGitBranch() : "";
+  const folder = path.basename(ctx?.cwd || process.cwd()) || "workspace";
+  const branchPart = branch ? `${folder} (${branch})` : folder;
+  const styledBranch = hasThemeFg ? theme.fg("dim", branchPart) : branchPart;
+
+  // 2. Model
+  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) {
+    try {
+      for (const e of ctx.sessionManager.getBranch()) {
+        if (e.type === "message" && e.message?.role === "assistant" && e.message?.usage) {
+          const u = e.message.usage;
+          input += u.input || 0;
+          output += u.output || 0;
+        }
+      }
+    } catch (_) {}
+  }
+  const fmt = (n: number) => (n < 1000 ? `${n}` : `${(n / 1000).toFixed(1)}k`);
+  const tokenStr = input > 0 || output > 0 ? `↑${fmt(input)} ↓${fmt(output)}` : "";
+  const styledTokens = tokenStr ? (hasThemeFg ? theme.fg("dim", tokenStr) : tokenStr) : "";
+
+  // Left & right parts of Line 1
+  const leftText = styledBranch;
+  const rightParts = [styledTokens, styledModel].filter(Boolean);
+  const rightText = rightParts.join(styledSep);
+
+  const leftVis = getStringWidth(leftText);
+  const rightVis = getStringWidth(rightText);
+  const padLen = Math.max(1, width - leftVis - rightVis);
+  const line1 = leftText + " ".repeat(padLen) + rightText;
+
+  const lines = [line1];
+
+  // Line 2: Extension status badges
+  const extStatuses: Array<[string, string]> = [];
+  if (footerData && typeof footerData.getExtensionStatuses === "function") {
+    try {
+      const map = footerData.getExtensionStatuses();
+      if (map && typeof map.entries === "function") {
+        for (const [k, v] of map.entries()) {
+          if (v) extStatuses.push([k, v]);
+        }
+      }
+    } catch (_) {}
+  }
+  if (extStatuses.length === 0) {
+    for (const [k, v] of originalStatuses.entries()) {
+      if (v) extStatuses.push([k, v]);
+    }
+  }
+
+  if (extStatuses.length > 0) {
+    const badges = extStatuses
+      .map(([k, v]) => beautifyStatus(k, v, theme, style, customCfg))
+      .filter(Boolean) as string[];
+    if (badges.length > 0) {
+      lines.push(badges.join("  "));
+    }
+  }
+
+  return lines;
+}
+
 export default function (pi: ExtensionAPI) {
   pi.on("session_start", async (_event, ctx) => {
     if (!ctx.hasUI || !ctx.ui) return;
 
+    loadConfig(ctx.cwd || process.cwd());
+
     originalStatuses.clear();
     lastRenderedStatus.clear();
 
+    // 1. Hook setStatus for granular extension badge formatting
     const originalSetStatus = ctx.ui.setStatus;
     if (originalSetStatus && !(originalSetStatus as any).__beautifierHooked) {
       const wrapped = function (key: string, value: string | undefined) {
@@ -303,6 +503,25 @@ export default function (pi: ExtensionAPI) {
       (wrapped as any).__beautifierHooked = true;
       ctx.ui.setStatus = wrapped;
     }
+
+    // 2. Hook setFooter for full-footer beautification
+    if (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") return [];
+            return renderBeautifiedFooter(width, tui, theme, footerData, ctx, currentStyle, customStyleConfig);
+          },
+        };
+      });
+    }
   });
 
   // Dynamic status bar style controller registry
@@ -329,15 +548,27 @@ export default function (pi: ExtensionAPI) {
 
       if (styleKey === "custom") {
         const promptRecipe = [
-          "You are acting as my Pi TUI Status Bar designer.",
-          "1. Detect my primary language from our recent conversation history or environment locale.",
-          "2. In that EXACT primary language, proactively ask me what visual aesthetic I want for my status bar, and propose 3 distinct creative ideas (e.g. Cyberpunk Dot-Matrix, Warm Minimalist, High-Contrast Pill).",
-          "3. Wait for my preference or feedback, then inspect `tui-status-beautifier.ts` and apply the custom layout for me."
+          "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`:",
+          "   {",
+          '     "beautifier": {',
+          '       "style": "custom",',
+          '       "custom": {',
+          '         "separator": " » ",',
+          '         "brackets": ["«", "»"],',
+          '         "prefix": "✦ ",',
+          '         "suffix": "",',
+          '         "glyphs": { "success": "✦", "warning": "◇", "error": "✖", "accent": "✧" }',
+          "       }",
+          "     }",
+          "   }",
+          "Do NOT crawl filesystem or edit extension source code files."
         ].join("\n");
 
         if (typeof (ctx.ui as any).setEditorText === "function") {
           (ctx.ui as any).setEditorText(promptRecipe);
-          ctx.ui.notify("Press Enter to let your agent consult your style preference in your native language!", "info");
+          ctx.ui.notify("Press Enter to let your agent consult your style preference with visual previews!", "info");
         } else {
           ctx.ui.notify(promptRecipe, "info");
         }
@@ -349,23 +580,25 @@ export default function (pi: ExtensionAPI) {
         lastRenderedStatus.clear();
         ctx.ui.notify(`TUI status style changed to: ${styleKey}`, "info");
 
-        for (const [key, val] of originalStatuses.entries()) {
-          ctx.ui.setStatus(key, val);
-        }
+        const { targetSettingsPath } = loadConfig(ctx.cwd || process.cwd());
 
         try {
-          if (fs.existsSync(settingsPath)) {
-            const data = fs.readFileSync(settingsPath, "utf-8");
+          if (fs.existsSync(targetSettingsPath)) {
+            const data = fs.readFileSync(targetSettingsPath, "utf-8");
             const config = JSON.parse(data);
             if (!config.beautifier) config.beautifier = {};
             config.beautifier.style = styleKey;
-            const tempSettings = `${settingsPath}.tmp.${process.pid}.${Date.now()}`;
+            const tempSettings = `${targetSettingsPath}.tmp.${process.pid}.${Date.now()}`;
             fs.writeFileSync(tempSettings, JSON.stringify(config, null, 2), "utf-8");
-            fs.renameSync(tempSettings, settingsPath);
+            fs.renameSync(tempSettings, targetSettingsPath);
           }
         } catch (_e) {
           // Silently ignore disk write errors
         }
+
+        for (const [key, val] of originalStatuses.entries()) {
+          ctx.ui.setStatus(key, val);
+        }
       }
     },
   });

package/package.json

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