pi-powerline-footer 0.2.2

package/CHANGELOG.md

@@ -0,0 +1,66 @@
+# Changelog
+
+## [0.2.2] - 2026-01-15
+
+### Changed
+- **Path segment defaults to basename** — Shows just the directory name (e.g., `powerline-footer`) instead of full path to save space
+- **New path modes** — `basename` (default), `abbreviated` (truncated full path), `full` (complete path)
+- Simplified path options: replaced `abbreviate`, `stripWorkPrefix` with cleaner `mode` option
+- Full/nerd presets use `abbreviated` mode, default/minimal/compact use `basename`
+- Thinking segment now uses dedicated gradient colors (thinkingOff → thinkingMedium)
+
+### Fixed
+- Path basename extraction now uses `path.basename()` for Windows compatibility
+- Git branch cache now stores `null` results, preventing repeated git calls in non-git directories
+- Git status cache now stores empty results for non-git directories (was also spawning repeatedly)
+- Removed dead `footerDispose` variable (cleanup handled by pi internally)
+
+## [0.2.1] - 2026-01-10
+
+### Added
+- **Live git branch updates** — Branch now updates in real-time when switching via `git checkout`, `git switch`, etc.
+- **Own branch fetching** — Extension fetches branch directly via `git branch --show-current` instead of relying solely on FooterDataProvider
+- **Branch cache with 500ms TTL** — Faster refresh cycle for branch changes
+- **Staggered re-renders for escape commands** — Multiple re-renders at 100/300/500ms to catch updates from `!` commands
+
+### Fixed
+- Git branch not updating after `git checkout` to existing branches
+- Race condition where FooterDataProvider's branch cache wasn't updating in time
+
+## [0.2.0] - 2026-01-10
+
+### Added
+- **Extension statuses segment** — Displays status text from other extensions (e.g., rewind checkpoint count)
+- **Thinking level segment** — Live-updating display of current thinking level (`thinking:off`, `thinking:med`, etc.)
+- **Rainbow effect** — High and xhigh thinking levels display with rainbow gradient inspired by Claude Code's ultrathink
+- **Color gradient** — Thinking levels use progressive colors: gray → purple-gray → blue → teal → rainbow
+- **Streaming visibility** — Status bar now renders in footer during streaming so it's always visible
+
+### Changed
+- Extension statuses appear at end of status bar (last item in default/full/nerd presets)
+- Default preset now includes `thinking` segment after model
+- Thinking level reads from session branch entries for live updates
+- Footer invalidate() now triggers re-render for settings changes
+- Responsive truncation — progressively removes segments on narrow windows instead of hiding status
+
+### Fixed
+- ANSI color reset after status content to prevent color bleeding
+- ANSI color reset after rainbow text
+
+### Removed
+- Unused brain icon definitions
+
+## [0.1.0] - 2026-01-10
+
+### Added
+- Initial release
+- Rounded box design rendering in editor top border
+- 18 segment types: pi, model, thinking, path, git, subagents, token_in, token_out, token_total, cost, context_pct, context_total, time_spent, time, session, hostname, cache_read, cache_write
+- 6 presets: default, minimal, compact, full, nerd, ascii
+- 10 separator styles: powerline, powerline-thin, slash, pipe, dot, chevron, star, block, none, ascii
+- Git integration with async status fetching and 1s cache TTL
+- Nerd Font auto-detection for common terminals
+- oh-my-pi dark theme color matching
+- Context percentage warnings at 70%/90%
+- Auto-compact indicator
+- Subscription detection

package/README.md

@@ -0,0 +1,75 @@
+# pi-powerline-footer
+
+A powerline-style status bar extension for [pi](https://github.com/badlogic/pi-mono), the coding agent. Inspired by [oh-my-pi](https://github.com/can1357/oh-my-pi).
+
+<img width="1555" height="171" alt="image" src="https://github.com/user-attachments/assets/7bfc8a5a-29b5-478e-b9c8-c462c032a840" />
+
+## Features
+
+**Rounded box design** — Status renders directly in the editor's top border, not as a separate footer.
+
+**Live thinking level indicator** — Shows current thinking level (`thinking:off`, `thinking:med`, etc.) with color-coded gradient. High and xhigh levels get a rainbow shimmer effect inspired by Claude Code's ultrathink.
+
+**Smart defaults** — Nerd Font auto-detection for iTerm, WezTerm, Kitty, Ghostty, and Alacritty with ASCII fallbacks. Colors matched to oh-my-pi's dark theme.
+
+**Git integration** — Async status fetching with 1s cache TTL. Automatically invalidates on file writes/edits. Shows branch, staged (+), unstaged (*), and untracked (?) counts.
+
+**Context awareness** — Color-coded warnings at 70% (yellow) and 90% (red) context usage. Auto-compact indicator when enabled.
+
+**Token intelligence** — Smart formatting (1.2k, 45M), subscription detection (shows "(sub)" vs dollar cost).
+
+## Installation
+
+```bash
+npx pi-powerline-footer
+```
+
+This copies the extension to `~/.pi/agent/extensions/powerline-footer/`. Restart pi to activate.
+
+## Usage
+
+Activates automatically. Toggle with `/powerline`, switch presets with `/powerline <name>`.
+
+| Preset | Description |
+|--------|-------------|
+| `default` | Model, thinking, path (basename), git, context, tokens, cost |
+| `minimal` | Just path (basename), git, context |
+| `compact` | Model, git, cost, context |
+| `full` | Everything including hostname, time, abbreviated path |
+| `nerd` | Maximum detail for Nerd Font users |
+| `ascii` | Safe for any terminal |
+
+**Environment:** `POWERLINE_NERD_FONTS=1` to force Nerd Fonts, `=0` for ASCII.
+
+## Thinking Level Display
+
+The thinking segment shows live updates when you change thinking level:
+
+| Level | Display | Color |
+|-------|---------|-------|
+| off | `thinking:off` | gray |
+| minimal | `thinking:min` | purple-gray |
+| low | `thinking:low` | blue |
+| medium | `thinking:med` | teal |
+| high | `thinking:high` | 🌈 rainbow |
+| xhigh | `thinking:xhigh` | 🌈 rainbow |
+
+## Path Display
+
+The path segment supports three modes:
+
+| Mode | Example | Description |
+|------|---------|-------------|
+| `basename` | `powerline-footer` | Just the directory name (default) |
+| `abbreviated` | `…/extensions/powerline-footer` | Full path with home abbreviated and length limit |
+| `full` | `~/.pi/agent/extensions/powerline-footer` | Complete path with home abbreviated |
+
+Configure via preset options: `path: { mode: "full" }`
+
+## Segments
+
+`pi` · `model` · `thinking` · `path` · `git` · `subagents` · `token_in` · `token_out` · `token_total` · `cost` · `context_pct` · `context_total` · `time_spent` · `time` · `session` · `hostname` · `cache_read` · `cache_write`
+
+## Separators
+
+`powerline` · `powerline-thin` · `slash` · `pipe` · `dot` · `chevron` · `star` · `block` · `none` · `ascii`

package/colors.ts

@@ -0,0 +1,126 @@
+// ANSI escape codes for colors
+// Matching oh-my-pi dark theme colors exactly
+
+export interface AnsiColors {
+  getBgAnsi(r: number, g: number, b: number): string;
+  getFgAnsi(r: number, g: number, b: number): string;
+  getFgAnsi256(code: number): string;
+  reset: string;
+}
+
+export const ansi: AnsiColors = {
+  getBgAnsi: (r, g, b) => `\x1b[48;2;${r};${g};${b}m`,
+  getFgAnsi: (r, g, b) => `\x1b[38;2;${r};${g};${b}m`,
+  getFgAnsi256: (code) => `\x1b[38;5;${code}m`,
+  reset: "\x1b[0m",
+};
+
+// Convert hex to RGB tuple
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace("#", "");
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16),
+  ];
+}
+
+// oh-my-pi dark theme colors (exact match)
+const THEME = {
+  // Status line colors
+  sep: 244,                           // ANSI 256 gray
+  model: "#d787af",                   // Pink/mauve
+  path: "#00afaf",                    // Teal/cyan
+  gitClean: "#5faf5f",                // Green
+  gitDirty: "#d7af5f",                // Gold/orange
+  context: "#8787af",                 // Purple-gray
+  spend: "#5fafaf",                   // Teal
+  staged: 70,                         // ANSI 256 green
+  unstaged: 178,                      // ANSI 256 gold
+  untracked: 39,                      // ANSI 256 blue
+  output: 205,                        // ANSI 256 pink
+  cost: 205,                          // ANSI 256 pink
+  subagents: "#febc38",               // Accent orange
+
+  // UI colors
+  accent: "#febc38",                  // Orange (for pi icon)
+  border: "#178fb9",                  // Blue (for box border)
+  warning: "#e4c00f",                 // Yellow
+  error: "#fc3a4b",                   // Red
+  text: "",                           // Default terminal color
+
+  // Thinking level colors (gradient from dim to bright)
+  thinkingOff: "#3d424a",             // Dark gray
+  thinkingMinimal: "#5f6673",         // Dim gray
+  thinkingLow: "#178fb9",             // Blue
+  thinkingMedium: "#0088fa",          // Bright blue
+  thinkingHigh: "#b281d6",            // Purple
+  thinkingXhigh: "#e5c1ff",           // Bright lavender
+};
+
+// Color name to ANSI code mapping
+type ColorName = 
+  | "sep" | "model" | "path" | "gitClean" | "gitDirty" 
+  | "context" | "spend" | "staged" | "unstaged" | "untracked"
+  | "output" | "cost" | "subagents" | "accent" | "border"
+  | "warning" | "error" | "text"
+  | "thinkingOff" | "thinkingMinimal" | "thinkingLow" 
+  | "thinkingMedium" | "thinkingHigh" | "thinkingXhigh";
+
+function getAnsiCode(color: ColorName): string {
+  const value = THEME[color as keyof typeof THEME];
+  
+  if (value === undefined || value === "") {
+    return ""; // No color, use terminal default
+  }
+  
+  if (typeof value === "number") {
+    return ansi.getFgAnsi256(value);
+  }
+  
+  if (typeof value === "string" && value.startsWith("#")) {
+    const [r, g, b] = hexToRgb(value);
+    return ansi.getFgAnsi(r, g, b);
+  }
+  
+  return "";
+}
+
+// Helper to apply foreground color only (no reset - caller manages reset)
+export function fgOnly(color: ColorName, text: string): string {
+  const code = getAnsiCode(color);
+  return code ? `${code}${text}` : text;
+}
+
+// Get raw ANSI code for a color
+export function getFgAnsiCode(color: ColorName): string {
+  return getAnsiCode(color);
+}
+
+// Rainbow colors for ultra/xhigh thinking (matches Claude Code ultrathink)
+const RAINBOW_COLORS = [
+  "#b281d6",  // purple
+  "#d787af",  // pink
+  "#febc38",  // orange
+  "#e4c00f",  // yellow
+  "#89d281",  // green
+  "#00afaf",  // cyan
+  "#178fb9",  // blue
+  "#b281d6",  // purple (loop)
+];
+
+// Apply rainbow gradient to text (each character gets next color)
+export function rainbow(text: string): string {
+  let result = "";
+  let colorIndex = 0;
+  for (const char of text) {
+    if (char === " " || char === ":") {
+      result += char;
+    } else {
+      const [r, g, b] = hexToRgb(RAINBOW_COLORS[colorIndex % RAINBOW_COLORS.length]);
+      result += `${ansi.getFgAnsi(r, g, b)}${char}`;
+      colorIndex++;
+    }
+  }
+  return result + ansi.reset;
+}

package/git-status.ts

@@ -0,0 +1,242 @@
+import { spawn } from "node:child_process";
+import type { GitStatus } from "./types.js";
+
+interface CachedGitStatus {
+  staged: number;
+  unstaged: number;
+  untracked: number;
+  timestamp: number;
+}
+
+interface CachedBranch {
+  branch: string | null;
+  timestamp: number;
+}
+
+const CACHE_TTL_MS = 1000; // 1 second for file status
+const BRANCH_TTL_MS = 500; // Shorter TTL so branch updates quickly after invalidation
+let cachedStatus: CachedGitStatus | null = null;
+let cachedBranch: CachedBranch | null = null;
+let pendingFetch: Promise<void> | null = null;
+let pendingBranchFetch: Promise<void> | null = null;
+let invalidationCounter = 0; // Track invalidations to prevent stale updates
+let branchInvalidationCounter = 0;
+
+/**
+ * Parse git status --porcelain output
+ * 
+ * Format: XY filename
+ * X = index status, Y = working tree status
+ * ?? = untracked
+ * Other X values = staged
+ * Other Y values = unstaged
+ */
+function parseGitStatusOutput(output: string): { staged: number; unstaged: number; untracked: number } {
+  let staged = 0;
+  let unstaged = 0;
+  let untracked = 0;
+
+  for (const line of output.split("\n")) {
+    if (!line) continue;
+    const x = line[0];
+    const y = line[1];
+
+    if (x === "?" && y === "?") {
+      untracked++;
+      continue;
+    }
+
+    // X position (index/staged)
+    if (x && x !== " " && x !== "?") {
+      staged++;
+    }
+
+    // Y position (working tree/unstaged)
+    if (y && y !== " ") {
+      unstaged++;
+    }
+  }
+
+  return { staged, unstaged, untracked };
+}
+
+/**
+ * Fetch current git branch asynchronously
+ */
+async function fetchGitBranch(): Promise<string | null> {
+  return new Promise((resolve) => {
+    const proc = spawn("git", ["branch", "--show-current"], {
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+
+    let stdout = "";
+    let resolved = false;
+
+    const finish = (result: string | null) => {
+      if (resolved) return;
+      resolved = true;
+      clearTimeout(timeoutId);
+      resolve(result);
+    };
+
+    proc.stdout.on("data", (data) => {
+      stdout += data.toString();
+    });
+
+    proc.on("close", (code) => {
+      if (code !== 0) {
+        finish(null);
+        return;
+      }
+      const branch = stdout.trim();
+      finish(branch || null); // Empty string means detached HEAD
+    });
+
+    proc.on("error", () => {
+      finish(null);
+    });
+
+    // Timeout after 200ms
+    const timeoutId = setTimeout(() => {
+      proc.kill();
+      finish(null);
+    }, 200);
+  });
+}
+
+/**
+ * Fetch git status asynchronously
+ */
+async function fetchGitStatus(): Promise<{ staged: number; unstaged: number; untracked: number } | null> {
+  return new Promise((resolve) => {
+    const proc = spawn("git", ["status", "--porcelain"], {
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+
+    let stdout = "";
+    let resolved = false;
+
+    const finish = (result: { staged: number; unstaged: number; untracked: number } | null) => {
+      if (resolved) return;
+      resolved = true;
+      clearTimeout(timeoutId);
+      resolve(result);
+    };
+
+    proc.stdout.on("data", (data) => {
+      stdout += data.toString();
+    });
+
+    proc.on("close", (code) => {
+      if (code !== 0) {
+        finish(null);
+        return;
+      }
+      finish(parseGitStatusOutput(stdout));
+    });
+
+    proc.on("error", () => {
+      finish(null);
+    });
+
+    // Timeout after 500ms
+    const timeoutId = setTimeout(() => {
+      proc.kill();
+      finish(null);
+    }, 500);
+  });
+}
+
+/**
+ * Get the current git branch with caching.
+ * Falls back to provider branch if our cache is empty.
+ */
+export function getCurrentBranch(providerBranch: string | null): string | null {
+  const now = Date.now();
+
+  // Return cached if fresh
+  if (cachedBranch && now - cachedBranch.timestamp < BRANCH_TTL_MS) {
+    return cachedBranch.branch;
+  }
+
+  // Trigger background fetch if not already pending
+  if (!pendingBranchFetch) {
+    const fetchId = branchInvalidationCounter;
+    pendingBranchFetch = fetchGitBranch().then((result) => {
+      // Cache result if no invalidation happened (including null for non-git dirs)
+      if (fetchId === branchInvalidationCounter) {
+        cachedBranch = {
+          branch: result,
+          timestamp: Date.now(),
+        };
+      }
+      pendingBranchFetch = null;
+    });
+  }
+
+  // Return cached branch, or fall back to provider
+  return cachedBranch?.branch ?? providerBranch;
+}
+
+/**
+ * Get git status with caching.
+ * Returns cached value if within TTL, otherwise triggers async fetch.
+ * This is designed for synchronous render() calls - returns last known value
+ * while refreshing in background.
+ */
+export function getGitStatus(providerBranch: string | null): GitStatus {
+  const now = Date.now();
+  const branch = getCurrentBranch(providerBranch);
+
+  // Return cached if fresh
+  if (cachedStatus && now - cachedStatus.timestamp < CACHE_TTL_MS) {
+    return { 
+      branch, 
+      staged: cachedStatus.staged,
+      unstaged: cachedStatus.unstaged,
+      untracked: cachedStatus.untracked,
+    };
+  }
+
+  // Trigger background fetch if not already pending
+  if (!pendingFetch) {
+    const fetchId = invalidationCounter; // Capture current counter
+    pendingFetch = fetchGitStatus().then((result) => {
+      // Cache result if no invalidation happened (including null for non-git dirs)
+      if (fetchId === invalidationCounter) {
+        cachedStatus = result
+          ? { staged: result.staged, unstaged: result.unstaged, untracked: result.untracked, timestamp: Date.now() }
+          : { staged: 0, unstaged: 0, untracked: 0, timestamp: Date.now() };
+      }
+      pendingFetch = null;
+    });
+  }
+
+  // Return last cached or empty
+  if (cachedStatus) {
+    return { 
+      branch, 
+      staged: cachedStatus.staged,
+      unstaged: cachedStatus.unstaged,
+      untracked: cachedStatus.untracked,
+    };
+  }
+
+  return { branch, staged: 0, unstaged: 0, untracked: 0 };
+}
+
+/**
+ * Force refresh git status (call when you know files changed)
+ */
+export function invalidateGitStatus(): void {
+  cachedStatus = null;
+  invalidationCounter++; // Increment to invalidate any pending fetches
+}
+
+/**
+ * Force refresh git branch (call when you know branch might have changed)
+ */
+export function invalidateGitBranch(): void {
+  cachedBranch = null;
+  branchInvalidationCounter++;
+}

package/icons.ts

@@ -0,0 +1,156 @@
+export interface IconSet {
+  pi: string;
+  model: string;
+  folder: string;
+  branch: string;
+  git: string;
+  tokens: string;
+  context: string;
+  cost: string;
+  time: string;
+  agents: string;
+  cache: string;
+  input: string;
+  output: string;
+  host: string;
+  session: string;
+  auto: string;
+  warning: string;
+}
+
+// Separator characters
+export const SEP_DOT = " · ";
+
+// Thinking level display text (Unicode/ASCII)
+export const THINKING_TEXT_UNICODE: Record<string, string> = {
+  minimal: "[min]",
+  low: "[low]",
+  medium: "[med]",
+  high: "[high]",
+  xhigh: "[xhi]",
+};
+
+// Thinking level display text (Nerd Fonts - with icons)
+export const THINKING_TEXT_NERD: Record<string, string> = {
+  minimal: "\u{F0E7} min",   // lightning bolt
+  low: "\u{F10C} low",       // circle outline
+  medium: "\u{F192} med",    // dot circle
+  high: "\u{F111} high",     // circle
+  xhigh: "\u{F06D} xhi",     // fire
+};
+
+// Get thinking text based on font support
+export function getThinkingText(level: string): string | undefined {
+  if (hasNerdFonts()) {
+    return THINKING_TEXT_NERD[level];
+  }
+  return THINKING_TEXT_UNICODE[level];
+}
+
+// Nerd Font icons (matching oh-my-pi exactly)
+export const NERD_ICONS: IconSet = {
+  pi: "\uE22C",         // nf-oct-pi (stylized pi icon)
+  model: "\uEC19",      // nf-md-chip (model/AI chip)
+  folder: "\uF115",     // nf-fa-folder_open
+  branch: "\uF126",     // nf-fa-code_fork (git branch)
+  git: "\uF1D3",        // nf-fa-git (git logo)
+  tokens: "\uE26B",     // nf-seti-html (tokens symbol)
+  context: "\uE70F",    // nf-dev-database (database)
+  cost: "\uF155",       // nf-fa-dollar
+  time: "\uF017",       // nf-fa-clock_o
+  agents: "\uF0C0",     // nf-fa-users
+  cache: "\uF1C0",      // nf-fa-database (cache)
+  input: "\uF090",      // nf-fa-sign_in (input arrow)
+  output: "\uF08B",     // nf-fa-sign_out (output arrow)
+  host: "\uF109",       // nf-fa-laptop (host)
+  session: "\uF550",    // nf-md-identifier (session id)
+  auto: "\u{F0068}",    // nf-md-lightning_bolt (auto-compact)
+  warning: "\uF071",    // nf-fa-warning
+};
+
+// ASCII/Unicode fallback icons (matching oh-my-pi)
+export const ASCII_ICONS: IconSet = {
+  pi: "π",
+  model: "◈",
+  folder: "📁",
+  branch: "⎇",
+  git: "⎇",
+  tokens: "⊛",
+  context: "◫",
+  cost: "$",
+  time: "◷",
+  agents: "AG",
+  cache: "cache",
+  input: "in:",
+  output: "out:",
+  host: "host",
+  session: "id",
+  auto: "⚡",
+  warning: "⚠",
+};
+
+// Separator characters
+export interface SeparatorChars {
+  powerlineLeft: string;
+  powerlineRight: string;
+  powerlineThinLeft: string;
+  powerlineThinRight: string;
+  slash: string;
+  pipe: string;
+  block: string;
+  space: string;
+  asciiLeft: string;
+  asciiRight: string;
+  dot: string;
+}
+
+export const NERD_SEPARATORS: SeparatorChars = {
+  powerlineLeft: "\uE0B0",    // 
+  powerlineRight: "\uE0B2",   // 
+  powerlineThinLeft: "\uE0B1", // 
+  powerlineThinRight: "\uE0B3", // 
+  slash: "/",
+  pipe: "|",
+  block: "█",
+  space: " ",
+  asciiLeft: ">",
+  asciiRight: "<",
+  dot: "·",
+};
+
+export const ASCII_SEPARATORS: SeparatorChars = {
+  powerlineLeft: ">",
+  powerlineRight: "<",
+  powerlineThinLeft: "|",
+  powerlineThinRight: "|",
+  slash: "/",
+  pipe: "|",
+  block: "#",
+  space: " ",
+  asciiLeft: ">",
+  asciiRight: "<",
+  dot: ".",
+};
+
+// Detect Nerd Font support (check TERM or specific env var)
+export function hasNerdFonts(): boolean {
+  // User can set this env var to force Nerd Fonts
+  if (process.env.POWERLINE_NERD_FONTS === "1") return true;
+  if (process.env.POWERLINE_NERD_FONTS === "0") return false;
+  
+  // Check for Ghostty (survives into tmux via GHOSTTY_RESOURCES_DIR)
+  if (process.env.GHOSTTY_RESOURCES_DIR) return true;
+  
+  // Check common terminals known to support Nerd Fonts (case-insensitive)
+  const term = (process.env.TERM_PROGRAM || "").toLowerCase();
+  const nerdTerms = ["iterm", "wezterm", "kitty", "ghostty", "alacritty"];
+  return nerdTerms.some(t => term.includes(t));
+}
+
+export function getIcons(): IconSet {
+  return hasNerdFonts() ? NERD_ICONS : ASCII_ICONS;
+}
+
+export function getSeparatorChars(): SeparatorChars {
+  return hasNerdFonts() ? NERD_SEPARATORS : ASCII_SEPARATORS;
+}