pi-powerline 0.1.0

package/README.md

@@ -0,0 +1,214 @@
+# pi-powerline
+
+Powerline-style UI extensions for [pi](https://github.com/badlogic/pi-mono) coding agent: custom editor, breadcrumb widget, footer, and header.
+
+![pi-powerline screenshot](https://github.com/user-attachments/assets/9ee65cd5-8501-4502-ba69-0209b19e0499)
+
+## Features
+
+**Custom editor** — Always-on bordered input area with a `❯` prompt prefix. Switches to bash-mode coloring when the prompt starts with `!`. Breadcrumb info (model → directory) can be embedded in the top border.
+
+**Breadcrumb widget** — Displays current model → working directory above the editor, shown only when breadcrumb mode is `top`.
+
+**Custom footer** — A compact status bar showing token usage (`↑input ↓output` + cache read/write), context usage % with auto-compact indicator, session cost, thinking level, git branch, and extension statuses. Updates in real-time during streaming.
+
+**Custom header** — A gradient-colored PI logo rendered with ANSI 256-color codes, replacing the built-in header.
+
+> Highly inspired by [nicobailon/pi-powerline-footer](https://github.com/nicobailon/pi-powerline-footer).
+
+## Installation
+
+### Local development
+
+Clone the repository and use pi's `--extension` flag:
+
+```bash
+git clone <repo-url> pi-powerline
+cd pi-powerline
+pi -e ./index.ts
+```
+
+Or add it to your project's `.pi/settings.json`:
+
+```json
+{
+  "extensions": ["./index.ts"]
+}
+```
+
+### From npm (after publishing)
+
+```bash
+pi install npm:pi-powerline
+```
+
+Restart pi to activate.
+
+## Usage
+
+All extensions activate automatically on session start. Each can be configured via the `/powerline` command.
+
+### Settings
+
+Configure in `.pi/settings.json`:
+
+```json
+{
+  "breadcrumb": "inner",
+  "footer": true,
+  "header": true
+}
+```
+
+| Setting | Type | Default | Description |
+|---------|------|---------|-------------|
+| `breadcrumb` | `"hide"` \| `"top"` \| `"inner"` | `"inner"` | Breadcrumb display mode |
+| `footer` | `boolean` | `true` | Enable custom footer |
+| `header` | `boolean` | `true` | Enable gradient-logo header |
+
+**Breadcrumb modes:**
+
+- `hide` — No breadcrumb display
+- `top` — Breadcrumb as a widget above the editor
+- `inner` — Breadcrumb embedded in the editor's top border
+
+### Commands
+
+| Command | Description |
+|---------|-------------|
+| `/powerline` | Show current powerline settings |
+| `/powerline breadcrumb:hide` | Disable breadcrumb |
+| `/powerline breadcrumb:top` | Breadcrumb as top widget |
+| `/powerline breadcrumb:inner` | Breadcrumb in editor border |
+| `/powerline footer:on` | Enable custom footer |
+| `/powerline footer:off` | Disable custom footer |
+| `/powerline header:on` | Enable custom header |
+| `/powerline header:off` | Disable custom header |
+
+### Nerd Fonts
+
+The breadcrumb and footer use Nerd Font icons when a compatible terminal is detected (iTerm, WezTerm, Kitty, Ghostty, Alacritty). Set `POWERLINE_NERD_FONTS=1` or `POWERLINE_NERD_FONTS=0` to explicitly enable/disable.
+
+## Development
+
+### Project structure
+
+```
+.
+├── index.ts              # Single entry point (default export)
+├── editor.ts             # Custom editor with prompt prefix
+├── breadcrumb.ts         # Shared breadcrumb data & rendering helpers
+├── widget.ts             # Top widget (shown when breadcrumb=top)
+├── footer.ts             # Custom footer (token stats, git, thinking level)
+├── header.ts             # Gradient-logo header
+├── settings.ts           # Shared .pi/settings.json read/write helpers
+├── tests/
+│   ├── editor.test.ts
+│   ├── footer.test.ts
+│   ├── header.test.ts
+│   └── widget.test.ts
+├── .pi/
+│   ├── settings.json
+│   ├── APPEND_SYSTEM.md
+│   └── extensions/
+│       └── auto-format.ts  # Auto prettier on edit/write
+├── .husky/
+│   └── pre-commit          # prettier check + bun test
+├── .editorconfig
+├── .prettierrc
+├── .prettierignore
+├── package.json
+└── tsconfig.json           # gitignored
+```
+
+### Architecture
+
+`index.ts` is the single entry point registered in `package.json` → `"pi": { "extensions": ["./index.ts"] }`. It registers four extensions:
+
+```ts
+import type { ExtensionAPI } from '@mariozechner/pi-coding-agent';
+import { registerEditor } from './editor.ts';
+import { registerFooter } from './footer.ts';
+import { registerHeader } from './header.ts';
+import { registerWidget } from './widget.ts';
+
+export default function (pi: ExtensionAPI) {
+  registerEditor(pi);
+  registerFooter(pi);
+  registerHeader(pi);
+  registerWidget(pi);
+}
+```
+
+Settings are managed via `settings.ts` — a shared module that reads/writes `.pi/settings.json`. When `/powerline` changes a setting, it emits a `powerline_settings_changed` event that all modules listen to for live reconfiguration.
+
+### Code quality
+
+- **Formatting**: `.pi/extensions/auto-format.ts` runs prettier automatically after edit/write tools touch `.ts` files. Prettier config: single quotes, semicolons, trailing commas, 2-space indent, 100 char width.
+- **Pre-commit**: `.husky/pre-commit` runs `prettier --check` + `bun test` before every commit.
+- Use `bun run format` to format all files, `bun run format:check` to verify.
+
+### Editor setup
+
+Neovim's tsserver can't resolve `@mariozechner/pi-*` imports because those packages are bundled inside pi, not in `node_modules`. Create a `tsconfig.json` with path mappings pointing to the global pi installation:
+
+```bash
+# Find the pi install path
+ls -d $(dirname $(which pi))/../lib/node_modules/@mariozechner/pi-coding-agent
+```
+
+Then copy the example below and adjust paths to match your system:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "paths": {
+      "@mariozechner/pi-coding-agent": [
+        "/path/to/.nvm/versions/node/vXX/lib/node_modules/@mariozechner/pi-coding-agent/dist"
+      ],
+      "@mariozechner/pi-ai": [
+        "/path/to/.nvm/.../pi-coding-agent/node_modules/@mariozechner/pi-ai/dist"
+      ],
+      "@mariozechner/pi-tui": [
+        "/path/to/.nvm/.../pi-coding-agent/node_modules/@mariozechner/pi-tui/dist"
+      ]
+    }
+  },
+  "include": ["*.ts", "tests/**/*.ts"]
+}
+```
+
+`tsconfig.json` is gitignored — each developer creates their own.
+
+### Running tests
+
+```bash
+bun test
+# or via npm:
+npm run test:bun
+```
+
+Tests use bun's built-in test runner (compatible with `node:test`). Run `npm run test` for the Node.js variant.
+
+### Testing a single extension
+
+```bash
+pi -e ./index.ts
+```
+
+Then verify:
+- **Header**: startup screen → should show gradient-colored PI logo
+- **Editor**: type text → should see `❯` prefix with `─` borders; type `!command` → bash-mode coloring
+- **Breadcrumb**: check top border or widget → should show model name and folder
+- **Footer**: check bottom bar → should show model, token stats, git branch, thinking level
+
+## License
+
+MIT

package/breadcrumb.ts

@@ -0,0 +1,80 @@
+/**
+ * Shared breadcrumb display helpers
+ *
+ * Export nerd font detection, icons, and helper functions used by
+ * widget.ts and editor.ts to render the model→folder breadcrumb.
+ */
+import { basename } from 'node:path';
+import type { ExtensionContext, Theme } from '@mariozechner/pi-coding-agent';
+
+// ═══════════════════════════════════════════════════════════════════════════
+// nerd font detection
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function hasNerdFonts(): boolean {
+  if (process.env.POWERLINE_NERD_FONTS === '1') return true;
+  if (process.env.POWERLINE_NERD_FONTS === '0') return false;
+  if (process.env.GHOSTTY_RESOURCES_DIR) return true;
+  const term = (process.env.TERM_PROGRAM || '').toLowerCase();
+  return ['iterm', 'wezterm', 'kitty', 'ghostty', 'alacritty'].some((t) => term.includes(t));
+}
+
+const NERD = hasNerdFonts();
+
+export const ICON_MODEL = NERD ? '\uF4BC' : '';
+export const ICON_FOLDER = NERD ? '\uF115' : 'dir';
+export const SEP = NERD ? '\uE0B1' : '|';
+
+// ═══════════════════════════════════════════════════════════════════════════
+// helpers
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function withIcon(icon: string, text: string): string {
+  return icon ? `${icon} ${text}` : text;
+}
+
+/** hex → ANSI true color (model/folder use hex, not pi theme tokens) */
+export function hexFg(hex: string, text: string): string {
+  const h = hex.replace('#', '');
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `\x1b[38;2;${r};${g};${b}m${text}`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// breadcrumb data
+// ═══════════════════════════════════════════════════════════════════════════
+
+export interface BreadcrumbData {
+  modelName: string;
+  folder: string;
+  modelText: string; // icon + modelName
+  folderText: string; // icon + folder
+}
+
+export function getBreadcrumbData(ctx: ExtensionContext | null): BreadcrumbData {
+  const cwd = ctx?.cwd ?? process.cwd();
+  const folder = basename(cwd) || cwd;
+  const modelName = ctx?.model?.name || ctx?.model?.id || 'no-model';
+
+  return {
+    modelName,
+    folder,
+    modelText: withIcon(ICON_MODEL, modelName),
+    folderText: withIcon(ICON_FOLDER, folder),
+  };
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// breadcrumb info renderer (model → folder, colored)
+// ═══════════════════════════════════════════════════════════════════════════
+
+/** Render the "model→folder" breadcrumb info string. Optionally append ANSI reset. */
+export function renderBreadcrumbInfo(data: BreadcrumbData, theme: Theme, reset = false): string {
+  const line =
+    hexFg('#d787af', data.modelText) +
+    theme.fg('dim', ` ${SEP} `) +
+    hexFg('#00afaf', data.folderText);
+  return reset ? line + '\x1b[0m' : line;
+}

package/editor.ts

@@ -0,0 +1,185 @@
+/**
+ * Custom Editor Extension
+ *
+ * Replaces the default editor with a bordered input area using a ❯ prompt prefix.
+ * Switches to bash-mode coloring when the prompt starts with !.
+ * Editor is always enabled; breadcrumb mode controls whether widget info is embedded.
+ */
+import { type EditorTheme, truncateToWidth, visibleWidth } from '@mariozechner/pi-tui';
+import {
+  CustomEditor,
+  type ExtensionAPI,
+  type ExtensionContext,
+  type Theme,
+  type ThemeColor,
+} from '@mariozechner/pi-coding-agent';
+import { getBreadcrumbData, renderBreadcrumbInfo } from './breadcrumb.ts';
+import { readPowerlineSettings } from './settings.ts';
+
+/** Pure transform: add > prompt prefix and borders to rendered editor lines. */
+function renderPromptPrefix(
+  lines: string[],
+  width: number,
+  borderChar: string,
+  prefixChar: string,
+  indentChar: string,
+): string[] {
+  if (lines.length < 3) return lines;
+
+  let bottomIdx = 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 && /^─{3,}/.test(stripped)) {
+      bottomIdx = i;
+      break;
+    }
+  }
+
+  const result: string[] = [];
+
+  result.push(borderChar.repeat(width));
+
+  for (let i = 1; i < bottomIdx; i++) {
+    if (i === 1) {
+      result.push(prefixChar + ' ' + (lines[i] ?? ''));
+    } else {
+      result.push(indentChar + ' ' + (lines[i] ?? ''));
+    }
+  }
+
+  if (bottomIdx === 1) {
+    result.push(prefixChar + ' ' + ' '.repeat(width - 2));
+  }
+
+  result.push(borderChar.repeat(width));
+
+  for (let i = bottomIdx + 1; i < lines.length; i++) {
+    result.push(lines[i] ?? '');
+  }
+
+  return result;
+}
+
+// live state, updated on enable / model_select
+let liveCtx: ExtensionContext | null = null;
+let liveEditorTui: any = null;
+let breadcrumbMode: string = 'inner';
+
+let currentTheme: Theme | null = null;
+
+/** Maps each editor element to a pi theme color token. @example PromptPrefixEditor.colorTokens.prefix = "success"; */
+export interface PromptPrefixColorTokens {
+  border?: ThemeColor;
+  prefix?: ThemeColor;
+  indent?: ThemeColor;
+}
+
+/** Custom editor with a ❯ prompt prefix. Colors use `PromptPrefixColorTokens`. */
+export class PromptPrefixEditor extends CustomEditor {
+  static colorTokens: PromptPrefixColorTokens = {
+    border: 'borderAccent',
+    prefix: 'dim',
+    indent: 'border',
+  };
+
+  render(width: number): string[] {
+    const contentWidth = Math.max(1, width - 2);
+    const lines = super.render(contentWidth);
+    if (lines.length < 3) return lines;
+
+    const theme = currentTheme;
+    const color = (token: ThemeColor | undefined, text: string) =>
+      !theme || !token ? text : theme.fg(token, text);
+
+    // Bash mode: when text starts with !, switch to bashMode coloring
+    const isBash = this.getText().trimStart().startsWith('!');
+    const tokens = isBash
+      ? {
+          border: 'bashMode' as ThemeColor,
+          prefix: 'bashMode' as ThemeColor,
+          indent: 'bashMode' as ThemeColor,
+        }
+      : PromptPrefixEditor.colorTokens;
+
+    const result = renderPromptPrefix(
+      lines,
+      width,
+      color(tokens.border, '─'),
+      color(tokens.prefix, '❯'),
+      tokens.indent ? color(tokens.indent, ' ') : ' ',
+    );
+
+    // Embed widget info (model + folder) into the top border when mode is "inner"
+    if (breadcrumbMode === 'inner') {
+      const ctx = liveCtx;
+      if (ctx && theme) {
+        const data = getBreadcrumbData(ctx);
+        const infoPart = renderBreadcrumbInfo(data, theme, false);
+
+        const infoWidth = visibleWidth(infoPart);
+        // '─ ' (2) + info + ' ' (1) + dashes → total width
+        let paddingLen = width - 3 - infoWidth;
+        let displayInfo = infoPart;
+
+        if (paddingLen < 2) {
+          // info too wide or not enough dashes, truncate with ellipsis, keep at least 2 dashes
+          const minDashes = 2;
+          const availForInfo = width - 3 - minDashes;
+          if (availForInfo > 0) {
+            displayInfo = truncateToWidth(infoPart, availForInfo, '...');
+            paddingLen = width - 3 - visibleWidth(displayInfo);
+          }
+        }
+
+        if (paddingLen >= 0) {
+          const borderColored = color(tokens.border, '─');
+          result[0] =
+            borderColored + ' ' + displayInfo + ' ' + color(tokens.border, '─'.repeat(paddingLen));
+        }
+      }
+    }
+
+    return result;
+  }
+}
+
+export function updateTheme(theme: Theme): void {
+  currentTheme = theme;
+}
+
+/** Register the custom editor extension. Editor is always enabled; breadcrumb mode controls info embedding. */
+export function registerEditor(pi: ExtensionAPI) {
+  function createEditorFactory() {
+    return (tui: any, theme: EditorTheme, keybindings: any) => {
+      liveEditorTui = tui;
+      return new PromptPrefixEditor(tui, theme, keybindings);
+    };
+  }
+
+  function enable(ctx: ExtensionContext) {
+    liveCtx = ctx;
+    currentTheme = ctx.ui.theme;
+    breadcrumbMode = readPowerlineSettings(ctx.cwd).breadcrumb;
+    ctx.ui.setEditorComponent(createEditorFactory());
+  }
+
+  // always enable on session start
+  pi.on('session_start', (_event, ctx) => {
+    enable(ctx);
+  });
+
+  // keep widget info in sync when model/cwd changes
+  pi.on('model_select', (_event, ctx) => {
+    liveCtx = ctx;
+    breadcrumbMode = readPowerlineSettings(ctx.cwd).breadcrumb;
+    liveEditorTui?.requestRender();
+  });
+
+  // re-render on /powerline command (settings changed)
+  pi.events.on('powerline_settings_changed', (ctx) => {
+    const c = ctx as ExtensionContext;
+    breadcrumbMode = readPowerlineSettings(c.cwd).breadcrumb;
+    liveCtx = c;
+    liveEditorTui?.requestRender();
+  });
+}

package/footer.ts

@@ -0,0 +1,406 @@
+/**
+ * Custom Footer Extension
+ *
+ * Mirrors the built-in footer layout: pwd line, stats line, extension statuses line.
+ *
+ * Token stats and context usage come from ctx.sessionManager/ctx.model/ctx.getContextUsage().
+ * Git branch, provider count, extension statuses come from footerData.
+ * Thinking level comes from pi.getThinkingLevel() + pi.on(thinking_level_select).
+ *
+ * Controlled by .pi/settings.json → footer (boolean, default true).
+ * Toggle at runtime via /powerline footer:on / footer:off.
+ */
+
+import { readFileSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+import type { AssistantMessage } from '@mariozechner/pi-ai';
+import type { ExtensionAPI, ExtensionContext } from '@mariozechner/pi-coding-agent';
+import { truncateToWidth, visibleWidth } from '@mariozechner/pi-tui';
+import { readPowerlineSettings } from './settings.ts';
+
+// ═══════════════════════════════════════════════════════════════════════════
+// auto-compact detection (nested under compaction.enabled, not powerline)
+// ═══════════════════════════════════════════════════════════════════════════
+function readAutoCompactEnabled(cwd: string): boolean {
+  const settingsPath = join(cwd, '.pi', 'settings.json');
+  if (existsSync(settingsPath)) {
+    try {
+      const content = readFileSync(settingsPath, 'utf-8');
+      const settings = JSON.parse(content || '{}');
+      if (
+        settings.compaction &&
+        typeof settings.compaction === 'object' &&
+        'enabled' in (settings.compaction as Record<string, unknown>)
+      ) {
+        return !!(settings.compaction as Record<string, unknown>).enabled;
+      }
+    } catch {
+      // ignore parse errors
+    }
+  }
+  return true;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// token formatting (mirrors built-in footer)
+// ═══════════════════════════════════════════════════════════════════════════
+
+function formatTokens(count: number): string {
+  if (count < 1000) return count.toString();
+  if (count < 10000) return `${(count / 1000).toFixed(1)}k`;
+  if (count < 1000000) return `${Math.round(count / 1000)}k`;
+  if (count < 10000000) return `${(count / 1000000).toFixed(1)}M`;
+  return `${Math.round(count / 1000000)}M`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// think level display (mirrors widget.ts style)
+// ═══════════════════════════════════════════════════════════════════════════
+
+function hasNerdFonts(): boolean {
+  if (process.env.POWERLINE_NERD_FONTS === '1') return true;
+  if (process.env.POWERLINE_NERD_FONTS === '0') return false;
+  if (process.env.GHOSTTY_RESOURCES_DIR) return true;
+  const term = (process.env.TERM_PROGRAM || '').toLowerCase();
+  return ['iterm', 'wezterm', 'kitty', 'ghostty', 'alacritty'].some((t) => term.includes(t));
+}
+
+const ICON_THINK = hasNerdFonts() ? '' : '';
+const ICON_GIT = hasNerdFonts() ? '' : '⎇';
+
+function withIcon(icon: string, text: string): string {
+  return icon ? `${icon} ${text}` : text;
+}
+
+const THINK_LABELS: Record<string, string> = {
+  minimal: 'min',
+  low: 'low',
+  medium: 'med',
+  high: 'high',
+  xhigh: 'xhi',
+};
+
+const THINK_COLORS: Record<string, string> = {
+  high: 'thinkingHigh',
+  xhigh: 'thinkingXhigh',
+  minimal: 'thinkingMinimal',
+  low: 'thinkingLow',
+  medium: 'thinkingMedium',
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// usage helpers (for fusing live streaming data with persisted entries)
+// ═══════════════════════════════════════════════════════════════════════════
+
+type SessionAssistantUsage = AssistantMessage['usage'];
+
+function getUsageTokenTotal(usage: SessionAssistantUsage): number {
+  return (
+    ('totalTokens' in usage && typeof usage.totalTokens === 'number' ? usage.totalTokens : 0) ||
+    usage.input + usage.output + usage.cacheRead + usage.cacheWrite
+  );
+}
+
+function isSessionAssistantMessage(value: unknown): value is AssistantMessage {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'role' in value &&
+    (value as any).role === 'assistant' &&
+    'usage' in value &&
+    typeof (value as any).usage?.input === 'number' &&
+    typeof (value as any).usage?.output === 'number'
+  );
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// live state (updated by events)
+// ═══════════════════════════════════════════════════════════════════════════
+
+let liveThinkLevel = 'off';
+let liveTui: any = null;
+let isStreaming = false;
+let liveAssistantUsage: SessionAssistantUsage | null = null;
+let autoCompactEnabled = true;
+
+// ═══════════════════════════════════════════════════════════════════════════
+// footer renderer
+// ═══════════════════════════════════════════════════════════════════════════
+
+// hex → ANSI true color (for git branch, not using pi theme tokens)
+function hexFg(hex: string, text: string): string {
+  const h = hex.replace('#', '');
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `\x1b[38;2;${r};${g};${b}m${text}`;
+}
+
+/** Sanitize text for single-line status display. */
+function sanitizeStatusText(text: string): string {
+  return text
+    .replace(/[\r\n\t]/g, ' ')
+    .replace(/ +/g, ' ')
+    .trim();
+}
+
+function createFooterRenderer(ctx: ExtensionContext) {
+  return (tui: any, theme: any, footerData: any) => {
+    liveTui = tui;
+    const unsubBranch = footerData.onBranchChange(() => tui.requestRender());
+
+    return {
+      dispose() {
+        liveTui = null;
+        unsubBranch();
+      },
+      invalidate() {},
+      render(width: number): string[] {
+        // ── cumulative token stats from persisted entries + live streaming ──
+        let totalInput = 0,
+          totalOutput = 0,
+          totalCacheRead = 0,
+          totalCacheWrite = 0,
+          totalCost = 0;
+        let lastPersistedAssistant: AssistantMessage | undefined;
+        for (const e of ctx.sessionManager.getEntries()) {
+          if (e.type === 'message' && e.message.role === 'assistant') {
+            const m = e.message as AssistantMessage;
+            if (m.stopReason === 'error' || m.stopReason === 'aborted') continue;
+            totalInput += m.usage.input;
+            totalOutput += m.usage.output;
+            totalCacheRead += m.usage.cacheRead;
+            totalCacheWrite += m.usage.cacheWrite;
+            totalCost += m.usage.cost.total;
+            if (getUsageTokenTotal(m.usage) > 0) {
+              lastPersistedAssistant = m;
+            }
+          }
+        }
+
+        // fuse live streaming usage (not yet persisted) on top of persisted totals
+        const latestUsage = isStreaming
+          ? (liveAssistantUsage ?? lastPersistedAssistant?.usage)
+          : lastPersistedAssistant?.usage;
+        if (isStreaming && liveAssistantUsage) {
+          totalInput += liveAssistantUsage.input;
+          totalOutput += liveAssistantUsage.output;
+          totalCacheRead += liveAssistantUsage.cacheRead;
+          totalCacheWrite += liveAssistantUsage.cacheWrite;
+          totalCost += liveAssistantUsage.cost.total;
+        }
+
+        // ── context usage ──
+        // During streaming, ctx.getContextUsage() may be stale; estimate from usage.
+        const coreContextUsage = isStreaming && liveAssistantUsage ? null : ctx.getContextUsage();
+        const contextTokens =
+          coreContextUsage?.tokens ?? (latestUsage ? getUsageTokenTotal(latestUsage) : null);
+        const contextWindow = coreContextUsage?.contextWindow ?? ctx.model?.contextWindow ?? 0;
+        const contextPercent =
+          contextTokens !== null ? ((contextTokens / contextWindow) * 100).toFixed(1) : '?';
+
+        // ── git branch (leftmost, before stats) ──
+        const branch = footerData.getGitBranch();
+        const gitSegment = branch ? hexFg('#5faf5f', withIcon(ICON_GIT, branch)) : '';
+        const gitFull = gitSegment ? gitSegment + ' ' : '';
+        const gitFullWidth = gitSegment ? visibleWidth(gitSegment) + 1 : 0;
+
+        // ── stats + model ──
+        const statsParts: string[] = [];
+
+        // context % with threshold coloring (always first)
+        const contextPercentNum =
+          contextTokens !== null && contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
+        const contextPercentDisplay =
+          contextPercent === '?'
+            ? `?/${formatTokens(contextWindow)}`
+            : `${contextPercent}%/${formatTokens(contextWindow)}${autoCompactEnabled ? ' (auto)' : ''}`;
+        let contextPercentStr: string;
+        if (contextPercentNum > 90) {
+          contextPercentStr = theme.fg('error', contextPercentDisplay);
+        } else if (contextPercentNum > 70) {
+          contextPercentStr = theme.fg('warning', contextPercentDisplay);
+        } else {
+          contextPercentStr = contextPercentDisplay;
+        }
+        statsParts.push(contextPercentStr);
+
+        if (totalInput) statsParts.push(`↑${formatTokens(totalInput)}`);
+        if (totalOutput) statsParts.push(`↓${formatTokens(totalOutput)}`);
+        if (totalCacheRead) statsParts.push(`R${formatTokens(totalCacheRead)}`);
+        if (totalCacheWrite) statsParts.push(`W${formatTokens(totalCacheWrite)}`);
+
+        const usingSubscription = ctx.model ? ctx.modelRegistry.isUsingOAuth(ctx.model) : false;
+        if (totalCost || usingSubscription) {
+          const costStr = `$${totalCost.toFixed(3)}${usingSubscription ? ' (sub)' : ''}`;
+          statsParts.push(costStr);
+        }
+
+        let statsLeft = statsParts.join(' ');
+        let statsLeftWidth = visibleWidth(statsLeft);
+        if (statsLeftWidth > width) {
+          statsLeft = truncateToWidth(statsLeft, width, '...');
+          statsLeftWidth = visibleWidth(statsLeft);
+        }
+
+        // ── stats line layout: git (green) + left (dim) + padding (dim) + right (colored think level) ──
+        const dimLeft = theme.fg('dim', statsLeft);
+
+        // right side: think level only, colored (omitted when model lacks reasoning)
+        let rightSidePlain = '';
+        if (ctx.model?.reasoning) {
+          const tl = liveThinkLevel || 'off';
+          const label = THINK_LABELS[tl] ?? tl;
+          rightSidePlain = withIcon(ICON_THINK, label);
+        }
+        const rightWidth = visibleWidth(rightSidePlain);
+
+        const minPad = 2;
+        let statsLine: string;
+
+        const totalBase = gitFullWidth + statsLeftWidth + minPad + rightWidth;
+        if (totalBase <= width) {
+          // everything fits
+          const pad = width - gitFullWidth - statsLeftWidth - rightWidth;
+          const dimPadding = pad > 0 ? theme.fg('dim', ' '.repeat(pad)) : '';
+          let coloredRight = '';
+          if (rightSidePlain) {
+            const tl = liveThinkLevel || 'off';
+            coloredRight = theme.fg(THINK_COLORS[tl] ?? 'thinkingOff', rightSidePlain);
+          }
+          statsLine = gitFull + dimLeft + dimPadding + coloredRight;
+        } else if (gitFullWidth + minPad + rightWidth <= width) {
+          // drop git → fit statsLeft
+          const availStats = width - gitFullWidth - minPad - rightWidth;
+          let statsTrimmed: string;
+          let statsTrimmedWidth: number;
+          if (availStats > 0) {
+            statsTrimmed = truncateToWidth(statsLeft, availStats, '');
+            statsTrimmedWidth = visibleWidth(statsTrimmed);
+          } else {
+            statsTrimmed = '';
+            statsTrimmedWidth = 0;
+          }
+          const pad = width - gitFullWidth - statsTrimmedWidth - rightWidth;
+          const dimPadding = pad > 0 ? theme.fg('dim', ' '.repeat(pad)) : '';
+          let coloredRight = '';
+          if (rightSidePlain) {
+            const tl = liveThinkLevel || 'off';
+            coloredRight = theme.fg(THINK_COLORS[tl] ?? 'thinkingOff', rightSidePlain);
+          }
+          statsLine = gitFull + theme.fg('dim', statsTrimmed) + dimPadding + coloredRight;
+        } else {
+          // drop git, drop right → only stats
+          const availStats = width - minPad;
+          let statsTrimmed: string;
+          if (availStats > 0) {
+            statsTrimmed = truncateToWidth(statsLeft, availStats, '');
+          } else {
+            statsTrimmed = '';
+          }
+          statsLine = theme.fg('dim', statsTrimmed);
+        }
+
+        const lines = [statsLine];
+
+        // ── line 3: extension statuses ──
+        const extensionStatuses = footerData.getExtensionStatuses() as Map<string, string>;
+        if (extensionStatuses.size > 0) {
+          const sorted = Array.from(extensionStatuses.entries())
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([, text]) => sanitizeStatusText(text));
+          const statusLine = sorted.join(' ');
+          lines.push(truncateToWidth(statusLine, width, theme.fg('dim', '...')));
+        }
+
+        return lines;
+      },
+    };
+  };
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// module registration
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function registerFooter(pi: ExtensionAPI) {
+  let enabled = false;
+
+  function enable(ctx: ExtensionContext) {
+    enabled = true;
+    liveThinkLevel = pi.getThinkingLevel();
+    ctx.ui.setFooter(createFooterRenderer(ctx));
+  }
+
+  function disable(ctx: ExtensionContext) {
+    enabled = false;
+    liveTui = null;
+    ctx.ui.setFooter(undefined);
+  }
+
+  // enable on session start if footer setting is true
+  pi.on('session_start', (_event, ctx) => {
+    autoCompactEnabled = readAutoCompactEnabled(ctx.cwd);
+    if (readPowerlineSettings(ctx.cwd).footer) {
+      enable(ctx);
+    }
+  });
+
+  // track thinking level changes for footer display
+  pi.on('thinking_level_select', (event) => {
+    if (!enabled) return;
+    liveThinkLevel = event.level;
+    liveTui?.requestRender();
+  });
+
+  // model switch may affect reasoning support / provider count
+  pi.on('model_select', (_event, ctx) => {
+    const show = readPowerlineSettings(ctx.cwd).footer;
+    if (show && !enabled) {
+      enable(ctx);
+    } else if (!show && enabled) {
+      disable(ctx);
+    } else if (enabled) {
+      liveThinkLevel = pi.getThinkingLevel();
+      liveTui?.requestRender();
+    }
+  });
+
+  // re-evaluate on /powerline command (settings changed)
+  pi.events.on('powerline_settings_changed', (ctx) => {
+    const c = ctx as ExtensionContext;
+    const show = readPowerlineSettings(c.cwd).footer;
+    if (show && !enabled) {
+      enable(c);
+    } else if (!show && enabled) {
+      disable(c);
+    }
+  });
+
+  // ── real-time token updates during streaming ──
+
+  pi.on('agent_start', () => {
+    isStreaming = true;
+    liveAssistantUsage = null;
+  });
+
+  pi.on('message_update', (event) => {
+    if (!enabled) return;
+    if (isSessionAssistantMessage(event.message)) {
+      liveAssistantUsage = event.message.usage;
+      liveTui?.requestRender();
+    }
+  });
+
+  pi.on('message_end', (event) => {
+    isStreaming = false;
+    if (!enabled) return;
+    if (isSessionAssistantMessage(event.message)) {
+      liveAssistantUsage =
+        event.message.stopReason === 'error' || event.message.stopReason === 'aborted'
+          ? null
+          : event.message.usage;
+    }
+    liveTui?.requestRender();
+  });
+}

package/header.ts

@@ -0,0 +1,108 @@
+/**
+ * Custom Header Extension
+ *
+ * Shows a gradient-colored PI logo.
+ * Controlled by .pi/settings.json → header (boolean, default true).
+ */
+import type { ExtensionAPI, ExtensionContext, Theme } from '@mariozechner/pi-coding-agent';
+import { VERSION } from '@mariozechner/pi-coding-agent';
+import { readPowerlineSettings } from './settings.ts';
+
+/** Left-to-right ANSI gradient coloring. Spaces are left uncolored. */
+const GRADIENT_COLORS = [
+  '\x1b[38;5;199m',
+  '\x1b[38;5;171m',
+  '\x1b[38;5;135m',
+  '\x1b[38;5;99m',
+  '\x1b[38;5;75m',
+  '\x1b[38;5;51m',
+];
+
+function gradientLine(line: string): string {
+  const reset = '\x1b[0m';
+  let result = '';
+  let colorIdx = 0;
+  const step = Math.max(1, Math.floor(line.length / GRADIENT_COLORS.length));
+
+  for (let i = 0; i < line.length; i++) {
+    if (i > 0 && i % step === 0 && colorIdx < GRADIENT_COLORS.length - 1) {
+      colorIdx++;
+    }
+
+    const char = line[i];
+    if (char !== ' ') {
+      result += GRADIENT_COLORS[colorIdx] + char + reset;
+    } else {
+      result += char;
+    }
+  }
+  return result;
+}
+
+const PI_LOGO = [
+  '██████████    ',
+  '████  ████    ',
+  '████  ████    ',
+  '████████  ████',
+  '████      ████',
+  '████      ████',
+];
+
+function renderLogo(theme: Theme): string[] {
+  const lines = PI_LOGO.map((line) => '  ' + gradientLine(line) + '\x1b[0m');
+  const subtitle = `${theme.fg('muted', '  pi agent')}${theme.fg('dim', ` v${VERSION}`)}`;
+  return ['', ...lines, subtitle];
+}
+
+/** Register the custom header extension. */
+export function registerHeader(pi: ExtensionAPI) {
+  let headerEnabled = false;
+
+  function createHeaderComponent() {
+    return (_tui: any, theme: Theme) => ({
+      render(_width: number): string[] {
+        return renderLogo(theme);
+      },
+      invalidate() {},
+    });
+  }
+
+  function enable(ctx: ExtensionContext) {
+    headerEnabled = true;
+    ctx.ui.setHeader(createHeaderComponent());
+  }
+
+  function disable(ctx: ExtensionContext) {
+    headerEnabled = false;
+    ctx.ui.setHeader(undefined);
+  }
+
+  // auto-enable on session start if header setting is true
+  pi.on('session_start', (_event, ctx) => {
+    if (!ctx.hasUI) return;
+    if (readPowerlineSettings(ctx.cwd).header) {
+      enable(ctx);
+    }
+  });
+
+  // re-evaluate on model switch
+  pi.on('model_select', (_event, ctx) => {
+    const show = readPowerlineSettings(ctx.cwd).header;
+    if (show && !headerEnabled) {
+      enable(ctx);
+    } else if (!show && headerEnabled) {
+      disable(ctx);
+    }
+  });
+
+  // re-evaluate on /powerline command (settings changed)
+  pi.events.on('powerline_settings_changed', (ctx) => {
+    const c = ctx as ExtensionContext;
+    const show = readPowerlineSettings(c.cwd).header;
+    if (show && !headerEnabled) {
+      enable(c);
+    } else if (!show && headerEnabled) {
+      disable(c);
+    }
+  });
+}

package/index.ts

@@ -0,0 +1,150 @@
+import type { ExtensionAPI } from '@mariozechner/pi-coding-agent';
+import type { AutocompleteItem } from '@mariozechner/pi-tui';
+import { registerEditor } from './editor.ts';
+import { registerFooter } from './footer.ts';
+import { registerHeader } from './header.ts';
+import { registerWidget } from './widget.ts';
+import { readPowerlineSettings, writePowerlineSetting } from './settings.ts';
+
+export default function (pi: ExtensionAPI) {
+  // flags
+  pi.registerFlag('breadcrumb', {
+    description: 'Breadcrumb display mode: hide, top, inner',
+    type: 'string',
+    default: 'inner',
+  });
+
+  pi.registerFlag('footer', {
+    description: 'Enable custom footer with token stats',
+    type: 'boolean',
+    default: true,
+  });
+
+  pi.registerFlag('header', {
+    description: 'Enable custom gradient-logo header',
+    type: 'boolean',
+    default: true,
+  });
+
+  // register all sub-extensions
+  registerEditor(pi);
+  registerFooter(pi);
+  registerHeader(pi);
+  registerWidget(pi);
+
+  // unified /powerline command
+  pi.registerCommand('powerline', {
+    description: 'Configure powerline: breadcrumb, footer, header',
+    getArgumentCompletions: (prefix: string): AutocompleteItem[] | null => {
+      const items: AutocompleteItem[] = [
+        {
+          value: 'breadcrumb:hide',
+          label: 'breadcrumb:hide',
+          description: 'No breadcrumb display',
+        },
+        {
+          value: 'breadcrumb:top',
+          label: 'breadcrumb:top',
+          description: 'Breadcrumb as a widget above the editor',
+        },
+        {
+          value: 'breadcrumb:inner',
+          label: 'breadcrumb:inner',
+          description: 'Breadcrumb embedded in editor top border',
+        },
+        {
+          value: 'footer:on',
+          label: 'footer:on',
+          description: 'Enable custom footer',
+        },
+        {
+          value: 'footer:off',
+          label: 'footer:off',
+          description: 'Disable custom footer',
+        },
+        {
+          value: 'header:on',
+          label: 'header:on',
+          description: 'Enable custom header',
+        },
+        {
+          value: 'header:off',
+          label: 'header:off',
+          description: 'Disable custom header',
+        },
+      ];
+      if (!prefix) return items;
+      return items.filter((i) => i.value.startsWith(prefix));
+    },
+    handler: async (args, ctx) => {
+      const arg = args?.trim().toLowerCase();
+
+      // no args: show status
+      if (!arg) {
+        const { breadcrumb, footer, header } = readPowerlineSettings(ctx.cwd);
+        const lines = [
+          `breadcrumb: ${breadcrumb}`,
+          `footer: ${footer ? 'on' : 'off'}`,
+          `header: ${header ? 'on' : 'off'}`,
+        ];
+        ctx.ui.notify(lines.join('\n'), 'info');
+        return;
+      }
+
+      // parse namespace:value
+      const colonIdx = arg.indexOf(':');
+      if (colonIdx === -1) {
+        ctx.ui.notify(
+          'Usage: /powerline <breadcrumb:hide|top|inner|footer:on|off|header:on|off>',
+          'warning',
+        );
+        return;
+      }
+
+      const ns = arg.slice(0, colonIdx);
+      const val = arg.slice(colonIdx + 1);
+      let msg = '';
+
+      switch (ns) {
+        case 'breadcrumb': {
+          if (!['hide', 'top', 'inner'].includes(val)) {
+            ctx.ui.notify('breadcrumb must be: hide, top, or inner', 'warning');
+            return;
+          }
+          writePowerlineSetting(ctx.cwd, 'breadcrumb', val);
+          pi.events.emit('powerline_settings_changed', ctx);
+          msg = `breadcrumb → ${val}`;
+          break;
+        }
+        case 'footer': {
+          if (val !== 'on' && val !== 'off') {
+            ctx.ui.notify('footer must be: on or off', 'warning');
+            return;
+          }
+          writePowerlineSetting(ctx.cwd, 'footer', val === 'on');
+          pi.events.emit('powerline_settings_changed', ctx);
+          msg = `footer → ${val}`;
+          break;
+        }
+        case 'header': {
+          if (val !== 'on' && val !== 'off') {
+            ctx.ui.notify('header must be: on or off', 'warning');
+            return;
+          }
+          writePowerlineSetting(ctx.cwd, 'header', val === 'on');
+          pi.events.emit('powerline_settings_changed', ctx);
+          msg = `header → ${val}`;
+          break;
+        }
+        default:
+          ctx.ui.notify(
+            'Usage: /powerline <breadcrumb:hide|top|inner|footer:on|off|header:on|off>',
+            'warning',
+          );
+          return;
+      }
+
+      ctx.ui.notify(msg, 'info');
+    },
+  });
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "pi-powerline",
+  "version": "0.1.0",
+  "description": "Powerline-style UI extensions for pi coding agent (custom editor, breadcrumb, footer, header)",
+  "type": "module",
+  "files": [
+    "index.ts",
+    "editor.ts",
+    "breadcrumb.ts",
+    "widget.ts",
+    "footer.ts",
+    "header.ts",
+    "settings.ts"
+  ],
+  "keywords": [
+    "pi-package",
+    "pi",
+    "coding-agent",
+    "powerline",
+    "extension"
+  ],
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "test": "node --experimental-strip-types --test tests/**/*.test.ts",
+    "test:bun": "bun test",
+    "format": "prettier --write '**/*.ts'",
+    "format:check": "prettier --check '**/*.ts'",
+    "prepare": "husky"
+  },
+  "pi": {
+    "extensions": [
+      "./index.ts"
+    ],
+    "image": "https://github.com/user-attachments/assets/9ee65cd5-8501-4502-ba69-0209b19e0499"
+  },
+  "peerDependencies": {
+    "@mariozechner/pi-coding-agent": "*",
+    "@mariozechner/pi-ai": "*",
+    "@mariozechner/pi-tui": "*"
+  },
+  "devDependencies": {
+    "husky": "^9.1.7",
+    "prettier": "^3.8.3",
+    "typescript": "^6.0.3"
+  }
+}

package/settings.ts

@@ -0,0 +1,56 @@
+// shared settings read/write helpers for pi-powerline
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+export type BreadcrumbMode = 'hide' | 'top' | 'inner';
+
+export interface PowerlineSettings {
+  breadcrumb: BreadcrumbMode;
+  footer: boolean;
+  header: boolean;
+}
+
+const DEFAULTS: PowerlineSettings = {
+  breadcrumb: 'inner',
+  footer: true,
+  header: true,
+};
+
+function readSettings(cwd: string): Record<string, unknown> {
+  const settingsPath = join(cwd, '.pi', 'settings.json');
+  if (!existsSync(settingsPath)) return {};
+  try {
+    return JSON.parse(readFileSync(settingsPath, 'utf-8'));
+  } catch {
+    return {};
+  }
+}
+
+function writeSettings(cwd: string, settings: Record<string, unknown>): void {
+  const settingsDir = join(cwd, '.pi');
+  if (!existsSync(settingsDir)) mkdirSync(settingsDir, { recursive: true });
+  writeFileSync(join(settingsDir, 'settings.json'), JSON.stringify(settings, null, 2) + '\n');
+}
+
+/** Read powerline settings, validating and applying defaults. */
+export function readPowerlineSettings(cwd: string): PowerlineSettings {
+  const s = readSettings(cwd);
+  return {
+    breadcrumb: (['hide', 'top', 'inner'].includes(s.breadcrumb as string)
+      ? s.breadcrumb
+      : DEFAULTS.breadcrumb) as BreadcrumbMode,
+    footer: typeof s.footer === 'boolean' ? s.footer : DEFAULTS.footer,
+    header: typeof s.header === 'boolean' ? s.header : DEFAULTS.header,
+  };
+}
+
+/** Write a single powerline setting key, preserving other settings.json keys. */
+export function writePowerlineSetting(
+  cwd: string,
+  key: keyof PowerlineSettings,
+  value: string | boolean,
+): void {
+  const s = readSettings(cwd);
+  s[key] = value;
+  writeSettings(cwd, s);
+}

package/widget.ts

@@ -0,0 +1,99 @@
+/**
+ * Custom Widget Extension
+ *
+ * Powerline-style status widget displayed above the input editor.
+ * Shows:  model → current folder.
+ * Only active when breadcrumb mode is "top" in .pi/settings.json.
+ */
+import type { ExtensionAPI, ExtensionContext, Theme } from '@mariozechner/pi-coding-agent';
+import { truncateToWidth, visibleWidth } from '@mariozechner/pi-tui';
+import { getBreadcrumbData, renderBreadcrumbInfo } from './breadcrumb.ts';
+import { readPowerlineSettings } from './settings.ts';
+
+// ═══════════════════════════════════════════════════════════════════════════
+// live state
+// ═══════════════════════════════════════════════════════════════════════════
+
+let liveCtx: ExtensionContext | null = null;
+let liveTui: any = null;
+let widgetEnabled = false;
+
+// ═══════════════════════════════════════════════════════════════════════════
+// widget renderer
+// ═══════════════════════════════════════════════════════════════════════════
+
+function createWidgetRenderer() {
+  return (_tui: any, theme: Theme) => {
+    liveTui = _tui;
+    return {
+      dispose() {
+        liveTui = null;
+      },
+      invalidate() {},
+      render(width: number): string[] {
+        const ctx = liveCtx;
+        const data = getBreadcrumbData(ctx);
+        const line = renderBreadcrumbInfo(data, theme, true);
+
+        const visLen = visibleWidth(line);
+        if (visLen > width) {
+          return [truncateToWidth(line, width, '...')];
+        }
+        return [line + ' '.repeat(width - visLen)];
+      },
+    };
+  };
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// module registration
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function registerWidget(pi: ExtensionAPI) {
+  function enable(ctx: ExtensionContext) {
+    widgetEnabled = true;
+    liveCtx = ctx;
+    ctx.ui.setWidget('powerline-status', createWidgetRenderer(), {
+      placement: 'aboveEditor',
+    });
+  }
+
+  function disable(ctx: ExtensionContext) {
+    widgetEnabled = false;
+    liveCtx = null;
+    ctx.ui.setWidget('powerline-status', undefined);
+  }
+
+  // enable only when breadcrumb mode is "top"
+  pi.on('session_start', (_event, ctx) => {
+    if (!ctx.hasUI) return;
+    const { breadcrumb } = readPowerlineSettings(ctx.cwd);
+    if (breadcrumb === 'top') {
+      enable(ctx);
+    }
+  });
+
+  // re-evaluate on model switch (breadcrumb setting may have changed)
+  pi.on('model_select', (_event, ctx) => {
+    const { breadcrumb } = readPowerlineSettings(ctx.cwd);
+    if (breadcrumb === 'top' && !widgetEnabled) {
+      enable(ctx);
+    } else if (breadcrumb !== 'top' && widgetEnabled) {
+      disable(ctx);
+    } else if (widgetEnabled) {
+      liveCtx = ctx;
+      liveTui?.requestRender();
+    }
+  });
+
+  // re-evaluate on /powerline command (settings changed)
+  pi.events.on('powerline_settings_changed', (ctx) => {
+    const c = ctx as ExtensionContext;
+    const { breadcrumb } = readPowerlineSettings(c.cwd);
+    if (breadcrumb === 'top' && !widgetEnabled) {
+      enable(c);
+    } else if (breadcrumb !== 'top' && widgetEnabled) {
+      disable(c);
+    }
+  });
+}