pi-powerline-footer 0.2.2

package/index.ts

@@ -0,0 +1,412 @@
+import type { ExtensionAPI, ReadonlyFooterDataProvider } from "@mariozechner/pi-coding-agent";
+import type { AssistantMessage } from "@mariozechner/pi-ai";
+import { visibleWidth } from "@mariozechner/pi-tui";
+
+import type { SegmentContext, StatusLinePreset } from "./types.js";
+import { getPreset, PRESETS } from "./presets.js";
+import { getSeparator } from "./separators.js";
+import { renderSegment } from "./segments.js";
+import { getGitStatus, invalidateGitStatus, invalidateGitBranch } from "./git-status.js";
+import { ansi, getFgAnsiCode } from "./colors.js";
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Configuration
+// ═══════════════════════════════════════════════════════════════════════════
+
+interface PowerlineConfig {
+  preset: StatusLinePreset;
+}
+
+let config: PowerlineConfig = {
+  preset: "default",
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Status Line Builder (for top border)
+// ═══════════════════════════════════════════════════════════════════════════
+
+/** Build just the status content (segments with separators, no borders) */
+function buildStatusContent(ctx: SegmentContext, presetDef: ReturnType<typeof getPreset>): string {
+  const separatorDef = getSeparator(presetDef.separator);
+  const sepAnsi = getFgAnsiCode("sep");
+
+  // Collect visible segment contents
+  const leftParts: string[] = [];
+  for (const segId of presetDef.leftSegments) {
+    const rendered = renderSegment(segId, ctx);
+    if (rendered.visible && rendered.content) {
+      leftParts.push(rendered.content);
+    }
+  }
+
+  const rightParts: string[] = [];
+  for (const segId of presetDef.rightSegments) {
+    const rendered = renderSegment(segId, ctx);
+    if (rendered.visible && rendered.content) {
+      rightParts.push(rendered.content);
+    }
+  }
+
+  if (leftParts.length === 0 && rightParts.length === 0) {
+    return "";
+  }
+
+  // Build content with powerline separators (no background)
+  const sep = separatorDef.left;
+  const allParts = [...leftParts, ...rightParts];
+  return " " + allParts.join(` ${sepAnsi}${sep}${ansi.reset} `) + ansi.reset + " ";
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Extension
+// ═══════════════════════════════════════════════════════════════════════════
+
+export default function powerlineFooter(pi: ExtensionAPI) {
+  let enabled = true;
+  let sessionStartTime = Date.now();
+  let currentCtx: any = null;
+  let footerDataRef: ReadonlyFooterDataProvider | null = null;
+  let getThinkingLevelFn: (() => string) | null = null;
+  let isStreaming = false;
+  let tuiRef: any = null; // Store TUI reference for forcing re-renders
+
+  // Track session start
+  pi.on("session_start", async (_event, ctx) => {
+    sessionStartTime = Date.now();
+    currentCtx = ctx;
+    
+    // Store thinking level getter if available
+    if (typeof ctx.getThinkingLevel === 'function') {
+      getThinkingLevelFn = () => ctx.getThinkingLevel();
+    }
+    
+    if (enabled && ctx.hasUI) {
+      setupCustomEditor(ctx);
+    }
+  });
+
+  // Check if a bash command might change git branch
+  const mightChangeGitBranch = (cmd: string): boolean => {
+    const gitBranchPatterns = [
+      /\bgit\s+(checkout|switch|branch\s+-[dDmM]|merge|rebase|pull|reset|worktree)/,
+      /\bgit\s+stash\s+(pop|apply)/,
+    ];
+    return gitBranchPatterns.some(p => p.test(cmd));
+  };
+
+  // Invalidate git status on file changes, trigger re-render on potential branch changes
+  pi.on("tool_result", async (event, _ctx) => {
+    if (event.toolName === "write" || event.toolName === "edit") {
+      invalidateGitStatus();
+    }
+    // Check for bash commands that might change git branch
+    if (event.toolName === "bash" && event.input?.command) {
+      const cmd = String(event.input.command);
+      if (mightChangeGitBranch(cmd)) {
+        // Invalidate caches since working tree state changes with branch
+        invalidateGitStatus();
+        invalidateGitBranch();
+        // Small delay to let git update, then re-render
+        setTimeout(() => tuiRef?.requestRender(), 100);
+      }
+    }
+  });
+
+  // Also catch user escape commands (! prefix)
+  // Note: This fires BEFORE execution, so we use a longer delay and multiple re-renders
+  // to ensure we catch the update after the command completes.
+  pi.on("user_bash", async (event, _ctx) => {
+    if (mightChangeGitBranch(event.command)) {
+      // Invalidate immediately so next render fetches fresh data
+      invalidateGitStatus();
+      invalidateGitBranch();
+      // Multiple staggered re-renders to catch fast and slow commands
+      setTimeout(() => tuiRef?.requestRender(), 100);
+      setTimeout(() => tuiRef?.requestRender(), 300);
+      setTimeout(() => tuiRef?.requestRender(), 500);
+    }
+  });
+
+  // Track streaming state (footer only shows status during streaming)
+  pi.on("stream_start", async () => {
+    isStreaming = true;
+  });
+
+  pi.on("stream_end", async () => {
+    isStreaming = false;
+  });
+
+  // Command to toggle/configure
+  pi.registerCommand("powerline", {
+    description: "Configure powerline status (toggle, preset)",
+    handler: async (args, ctx) => {
+      // Update context reference (command ctx may have more methods)
+      currentCtx = ctx;
+      
+      if (!args) {
+        // Toggle
+        enabled = !enabled;
+        if (enabled) {
+          setupCustomEditor(ctx);
+          ctx.ui.notify("Powerline status enabled", "info");
+        } else {
+          // setFooter(undefined) internally calls the old footer's dispose()
+          ctx.ui.setEditorComponent(undefined);
+          ctx.ui.setFooter(undefined);
+          footerDataRef = null;
+          tuiRef = null;
+          ctx.ui.notify("Default editor restored", "info");
+        }
+        return;
+      }
+
+      // Check if args is a preset name
+      const preset = args.trim().toLowerCase() as StatusLinePreset;
+      if (preset in PRESETS) {
+        config.preset = preset;
+        if (enabled) {
+          setupCustomEditor(ctx);
+        }
+        ctx.ui.notify(`Preset set to: ${preset}`, "info");
+        return;
+      }
+
+      // Show available presets
+      const presetList = Object.keys(PRESETS).join(", ");
+      ctx.ui.notify(`Available presets: ${presetList}`, "info");
+    },
+  });
+
+  function buildSegmentContext(ctx: any, width: number): SegmentContext {
+    const presetDef = getPreset(config.preset);
+
+    // Build usage stats and get thinking level from session
+    let input = 0, output = 0, cacheRead = 0, cacheWrite = 0, cost = 0;
+    let lastAssistant: AssistantMessage | undefined;
+    let thinkingLevelFromSession = "off";
+    
+    const sessionEvents = ctx.sessionManager?.getBranch?.() ?? [];
+    for (const e of sessionEvents) {
+      // Check for thinking level change entries
+      if (e.type === "thinking_level_change" && e.thinkingLevel) {
+        thinkingLevelFromSession = e.thinkingLevel;
+      }
+      if (e.type === "message" && e.message.role === "assistant") {
+        const m = e.message as AssistantMessage;
+        if (m.stopReason === "error" || m.stopReason === "aborted") {
+          continue;
+        }
+        input += m.usage.input;
+        output += m.usage.output;
+        cacheRead += m.usage.cacheRead;
+        cacheWrite += m.usage.cacheWrite;
+        cost += m.usage.cost.total;
+        lastAssistant = m;
+      }
+    }
+
+    // Calculate context percentage (total tokens used in last turn)
+    const contextTokens = lastAssistant
+      ? lastAssistant.usage.input + lastAssistant.usage.output +
+        lastAssistant.usage.cacheRead + lastAssistant.usage.cacheWrite
+      : 0;
+    const contextWindow = ctx.model?.contextWindow || 0;
+    const contextPercent = contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
+
+    // Get git status (cached)
+    const gitBranch = footerDataRef?.getGitBranch() ?? null;
+    const gitStatus = getGitStatus(gitBranch);
+
+    // Check if using OAuth subscription
+    const usingSubscription = ctx.model
+      ? ctx.modelRegistry?.isUsingOAuth?.(ctx.model) ?? false
+      : false;
+
+    return {
+      model: ctx.model,
+      thinkingLevel: thinkingLevelFromSession || getThinkingLevelFn?.() || "off",
+      sessionId: ctx.sessionManager?.getSessionId?.(),
+      usageStats: { input, output, cacheRead, cacheWrite, cost },
+      contextPercent,
+      contextWindow,
+      autoCompactEnabled: ctx.settingsManager?.getCompactionSettings?.()?.enabled ?? true,
+      usingSubscription,
+      sessionStartTime,
+      git: gitStatus,
+      extensionStatuses: footerDataRef?.getExtensionStatuses() ?? new Map(),
+      options: presetDef.segmentOptions ?? {},
+      width,
+    };
+  }
+
+  function setupCustomEditor(ctx: any) {
+    // Import CustomEditor dynamically and create wrapper
+    import("@mariozechner/pi-coding-agent").then(({ CustomEditor }) => {
+      ctx.ui.setEditorComponent((tui: any, theme: any, keybindings: any) => {
+        // Create custom editor that overrides render for status in top border
+        const editor = new CustomEditor(theme, keybindings);
+        
+        // Store original render
+        const originalRender = editor.render.bind(editor);
+        
+        // Override render to match oh-my-pi design with rounded box:
+        // ╭─ status content ────────────────────╮
+        // │  input text here                   │
+        // ╰─                                  ─╯
+        // + autocomplete items (if showing)
+        editor.render = (width: number): string[] => {
+          const bc = (s: string) => `${getFgAnsiCode("border")}${s}${ansi.reset}`;
+          
+          // Box drawing chars
+          const topLeft = bc("╭─");
+          const topRight = bc("─╮");
+          const bottomLeft = bc("╰─");
+          const bottomRight = bc("─╯");
+          const vertical = bc("│");
+          
+          // Content area is width - 6 (3 chars border on each side)
+          const contentWidth = Math.max(1, width - 6);
+          const lines = originalRender(contentWidth);
+          
+          if (lines.length === 0 || !currentCtx) return lines;
+          
+          // Find where the bottom border is (last line that's all ─ chars)
+          // Lines after it are autocomplete items
+          let bottomBorderIndex = lines.length - 1;
+          for (let i = lines.length - 1; i >= 1; i--) {
+            const stripped = lines[i]?.replace(/\x1b\[[0-9;]*m/g, "") || "";
+            if (stripped.length > 0 && /^─+$/.test(stripped)) {
+              bottomBorderIndex = i;
+              break;
+            }
+          }
+          
+          const result: string[] = [];
+          
+          // Top border: ╭─ status ────────────╮
+          const presetDef = getPreset(config.preset);
+          const segmentCtx = buildSegmentContext(currentCtx, width);
+          const statusContent = buildStatusContent(segmentCtx, presetDef);
+          const statusWidth = visibleWidth(statusContent);
+          const topFillWidth = width - 4; // Reserve 4 for corners (╭─ and ─╮)
+          
+          if (statusWidth <= topFillWidth) {
+            const fillWidth = topFillWidth - statusWidth;
+            result.push(topLeft + statusContent + bc("─".repeat(fillWidth)) + topRight);
+          } else {
+            // Status too wide - truncate by removing segments from the end
+            // Build progressively shorter content until it fits
+            const allSegments = [...presetDef.leftSegments, ...presetDef.rightSegments];
+            let truncatedContent = "";
+            
+            for (let numSegments = allSegments.length - 1; numSegments >= 1; numSegments--) {
+              const limitedPreset = {
+                ...presetDef,
+                leftSegments: presetDef.leftSegments.slice(0, numSegments),
+                rightSegments: [],
+              };
+              truncatedContent = buildStatusContent(segmentCtx, limitedPreset);
+              const truncWidth = visibleWidth(truncatedContent);
+              if (truncWidth <= topFillWidth - 1) { // -1 for ellipsis
+                truncatedContent += "…";
+                break;
+              }
+            }
+            
+            const truncWidth = visibleWidth(truncatedContent);
+            if (truncWidth <= topFillWidth) {
+              const fillWidth = topFillWidth - truncWidth;
+              result.push(topLeft + truncatedContent + bc("─".repeat(fillWidth)) + topRight);
+            } else {
+              // Still too wide, show minimal
+              result.push(topLeft + bc("─".repeat(Math.max(0, topFillWidth))) + topRight);
+            }
+          }
+          
+          // Content lines (between top border at 0 and bottom border)
+          for (let i = 1; i < bottomBorderIndex; i++) {
+            const line = lines[i] || "";
+            const lineWidth = visibleWidth(line);
+            const padding = " ".repeat(Math.max(0, contentWidth - lineWidth));
+            
+            const isLastContent = i === bottomBorderIndex - 1;
+            if (isLastContent) {
+              // Last content line: ╰─ content ─╯
+              result.push(`${bottomLeft} ${line}${padding} ${bottomRight}`);
+            } else {
+              // Middle lines: │  content  │
+              result.push(`${vertical}  ${line}${padding}  ${vertical}`);
+            }
+          }
+          
+          // If only had top/bottom borders (empty editor), add the bottom
+          if (bottomBorderIndex === 1) {
+            const padding = " ".repeat(contentWidth);
+            result.push(`${bottomLeft} ${padding} ${bottomRight}`);
+          }
+          
+          // Append any autocomplete lines that come after the bottom border
+          for (let i = bottomBorderIndex + 1; i < lines.length; i++) {
+            result.push(lines[i] || "");
+          }
+          
+          return result;
+        };
+        
+        return editor;
+      });
+
+      // Also set up footer data provider access via a minimal footer
+      ctx.ui.setFooter((tui: any, _theme: any, footerData: ReadonlyFooterDataProvider) => {
+        footerDataRef = footerData;
+        tuiRef = tui; // Store TUI reference for re-renders on git branch changes
+        const unsub = footerData.onBranchChange(() => tui.requestRender());
+
+        return {
+          dispose: unsub,
+          invalidate() {
+            // Re-render when thinking level or other settings change
+            tui.requestRender();
+          },
+          render(width: number): string[] {
+            // Only show status in footer during streaming (editor hidden)
+            // When editor is visible, status shows in editor top border instead
+            if (!isStreaming || !currentCtx) return [];
+            
+            const presetDef = getPreset(config.preset);
+            const segmentCtx = buildSegmentContext(currentCtx, width);
+            const statusContent = buildStatusContent(segmentCtx, presetDef);
+            
+            if (!statusContent) return [];
+            
+            // Single line with status content, padded/truncated to width
+            const statusWidth = visibleWidth(statusContent);
+            if (statusWidth <= width) {
+              return [statusContent + " ".repeat(width - statusWidth)];
+            } else {
+              // Truncate by removing segments (same logic as editor)
+              const allSegments = [...presetDef.leftSegments, ...presetDef.rightSegments];
+              let truncatedContent = "";
+              
+              for (let numSegments = allSegments.length - 1; numSegments >= 1; numSegments--) {
+                const limitedPreset = {
+                  ...presetDef,
+                  leftSegments: presetDef.leftSegments.slice(0, numSegments),
+                  rightSegments: [],
+                };
+                truncatedContent = buildStatusContent(segmentCtx, limitedPreset);
+                const truncWidth = visibleWidth(truncatedContent);
+                if (truncWidth <= width - 1) {
+                  truncatedContent += "…";
+                  break;
+                }
+              }
+              
+              return [truncatedContent];
+            }
+          },
+        };
+      });
+    });
+  }
+}

package/install.mjs

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, copyFileSync, readdirSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { homedir } from "node:os";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const targetDir = join(homedir(), ".pi", "agent", "extensions", "powerline-footer");
+
+// Files to copy (TypeScript sources + docs)
+const files = readdirSync(__dirname).filter(
+  (f) => f.endsWith(".ts") || f === "README.md" || f === "CHANGELOG.md"
+);
+
+// Create target directory
+mkdirSync(targetDir, { recursive: true });
+
+// Copy files
+let copied = 0;
+for (const file of files) {
+  const src = join(__dirname, file);
+  const dest = join(targetDir, file);
+  copyFileSync(src, dest);
+  copied++;
+}
+
+console.log(`✓ Installed pi-powerline-footer to ${targetDir}`);
+console.log(`  Copied ${copied} files`);
+console.log(`\nRestart pi to activate the extension.`);

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "pi-powerline-footer",
+  "version": "0.2.2",
+  "description": "Powerline-style status bar extension for pi coding agent",
+  "type": "module",
+  "bin": {
+    "pi-powerline-footer": "./install.mjs"
+  },
+  "files": [
+    "*.ts",
+    "*.md",
+    "install.mjs"
+  ],
+  "keywords": [
+    "pi",
+    "coding-agent",
+    "powerline",
+    "status-bar",
+    "extension"
+  ],
+  "author": "Nico Bailon",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nicobailon/pi-powerline-footer"
+  }
+}

package/presets.ts

@@ -0,0 +1,80 @@
+import type { PresetDef, StatusLinePreset } from "./types.js";
+
+export const PRESETS: Record<StatusLinePreset, PresetDef> = {
+  default: {
+    leftSegments: ["pi", "model", "thinking", "path", "git", "context_pct", "token_total", "cost", "extension_statuses"],
+    rightSegments: [],
+    separator: "powerline-thin",
+    segmentOptions: {
+      model: { showThinkingLevel: false },
+      path: { mode: "basename" },
+      git: { showBranch: true, showStaged: true, showUnstaged: true, showUntracked: true },
+    },
+  },
+
+  minimal: {
+    leftSegments: ["path", "git"],
+    rightSegments: ["context_pct"],
+    separator: "slash",
+    segmentOptions: {
+      path: { mode: "basename" },
+      git: { showBranch: true, showStaged: false, showUnstaged: false, showUntracked: false },
+    },
+  },
+
+  compact: {
+    leftSegments: ["model", "git"],
+    rightSegments: ["cost", "context_pct"],
+    separator: "powerline-thin",
+    segmentOptions: {
+      model: { showThinkingLevel: false },
+      git: { showBranch: true, showStaged: true, showUnstaged: true, showUntracked: false },
+    },
+  },
+
+  full: {
+    leftSegments: ["pi", "hostname", "model", "thinking", "path", "git", "subagents"],
+    rightSegments: ["token_in", "token_out", "cache_read", "cost", "context_pct", "time_spent", "time", "extension_statuses"],
+    separator: "powerline",
+    segmentOptions: {
+      model: { showThinkingLevel: false },
+      path: { mode: "abbreviated", maxLength: 50 },
+      git: { showBranch: true, showStaged: true, showUnstaged: true, showUntracked: true },
+      time: { format: "24h", showSeconds: false },
+    },
+  },
+
+  nerd: {
+    leftSegments: ["pi", "hostname", "model", "thinking", "path", "git", "session", "subagents"],
+    rightSegments: ["token_in", "token_out", "cache_read", "cache_write", "cost", "context_pct", "context_total", "time_spent", "time", "extension_statuses"],
+    separator: "powerline",
+    segmentOptions: {
+      model: { showThinkingLevel: false },
+      path: { mode: "abbreviated", maxLength: 60 },
+      git: { showBranch: true, showStaged: true, showUnstaged: true, showUntracked: true },
+      time: { format: "24h", showSeconds: true },
+    },
+  },
+
+  ascii: {
+    leftSegments: ["model", "path", "git"],
+    rightSegments: ["token_total", "cost", "context_pct"],
+    separator: "ascii",
+    segmentOptions: {
+      model: { showThinkingLevel: true },
+      path: { mode: "abbreviated", maxLength: 40 },
+      git: { showBranch: true, showStaged: true, showUnstaged: true, showUntracked: true },
+    },
+  },
+
+  custom: {
+    leftSegments: ["model", "path", "git"],
+    rightSegments: ["token_total", "cost", "context_pct"],
+    separator: "powerline-thin",
+    segmentOptions: {},
+  },
+};
+
+export function getPreset(name: StatusLinePreset): PresetDef {
+  return PRESETS[name] ?? PRESETS.default;
+}