pi-powerline 0.1.0 → 0.2.0

package/README.md

@@ -1,58 +1,19 @@
 # pi-powerline
 
-Powerline-style UI extensions for [pi](https://github.com/badlogic/pi-mono) coding agent: custom editor, breadcrumb widget, footer, and header.
+Powerline-style UI extensions for [pi](https://github.com/badlogic/pi-mono): custom editor, breadcrumb, footer, and header.
 
-![pi-powerline screenshot](https://github.com/user-attachments/assets/9ee65cd5-8501-4502-ba69-0209b19e0499)
+![screenshot](assets/pi-powerline.png)
 
-## 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)
+## Install
 
 ```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`:
+## Settings
 
 ```json
+// .pi/settings.json
 {
   "breadcrumb": "inner",
   "footer": true,
@@ -60,154 +21,22 @@ Configure in `.pi/settings.json`:
 }
 ```
 
-| 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
-```
+| Setting | Values | Default |
+|---------|--------|---------|
+| `powerline` | `true` / `false` | `true` |
+| `breadcrumb` | `"hide"` / `"top"` / `"inner"` | `"inner"` |
+| `footer` | `true` / `false` | `true` |
+| `header` | `true` / `false` | `true` |
 
-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
-```
+## Commands
 
-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
+| Command | Effect |
+|---------|--------|
+| `/powerline` | Toggle all extensions on/off |
+| `/powerline info` | Show current settings |
+| `/powerline breadcrumb:top\|inner\|hide` | Set breadcrumb mode |
+| `/powerline footer:on\|off` | Toggle footer |
+| `/powerline header:on\|off` | Toggle header |
 
 ## License
 

package/breadcrumb.ts

@@ -22,8 +22,8 @@ export function hasNerdFonts(): boolean {
 const NERD = hasNerdFonts();
 
 export const ICON_MODEL = NERD ? '\uF4BC' : '';
-export const ICON_FOLDER = NERD ? '\uF115' : 'dir';
-export const SEP = NERD ? '\uE0B1' : '|';
+export const ICON_FOLDER = NERD ? '\uF115' : '';
+export const SEP = NERD ? '\uf054' : '/';
 
 // ═══════════════════════════════════════════════════════════════════════════
 // helpers

package/editor.ts

@@ -147,8 +147,10 @@ export function updateTheme(theme: Theme): void {
   currentTheme = theme;
 }
 
-/** Register the custom editor extension. Editor is always enabled; breadcrumb mode controls info embedding. */
+/** Register the custom editor extension. Controlled by powerline master switch + breadcrumb mode. */
 export function registerEditor(pi: ExtensionAPI) {
+  let editorEnabled = false;
+
   function createEditorFactory() {
     return (tui: any, theme: EditorTheme, keybindings: any) => {
       liveEditorTui = tui;
@@ -157,15 +159,24 @@ export function registerEditor(pi: ExtensionAPI) {
   }
 
   function enable(ctx: ExtensionContext) {
+    editorEnabled = true;
     liveCtx = ctx;
     currentTheme = ctx.ui.theme;
     breadcrumbMode = readPowerlineSettings(ctx.cwd).breadcrumb;
     ctx.ui.setEditorComponent(createEditorFactory());
   }
 
-  // always enable on session start
+  function disable(ctx: ExtensionContext) {
+    editorEnabled = false;
+    liveEditorTui = null;
+    ctx.ui.setEditorComponent(undefined);
+  }
+
+  // enable on session start if powerline master switch is on
   pi.on('session_start', (_event, ctx) => {
-    enable(ctx);
+    if (readPowerlineSettings(ctx.cwd).powerline) {
+      enable(ctx);
+    }
   });
 
   // keep widget info in sync when model/cwd changes
@@ -175,11 +186,18 @@ export function registerEditor(pi: ExtensionAPI) {
     liveEditorTui?.requestRender();
   });
 
-  // re-render on /powerline command (settings changed)
+  // re-evaluate on /powerline command (settings changed)
   pi.events.on('powerline_settings_changed', (ctx) => {
     const c = ctx as ExtensionContext;
-    breadcrumbMode = readPowerlineSettings(c.cwd).breadcrumb;
+    const s = readPowerlineSettings(c.cwd);
+    breadcrumbMode = s.breadcrumb;
     liveCtx = c;
-    liveEditorTui?.requestRender();
+    if (s.powerline && !editorEnabled) {
+      enable(c);
+    } else if (!s.powerline && editorEnabled) {
+      disable(c);
+    } else if (editorEnabled) {
+      liveEditorTui?.requestRender();
+    }
   });
 }

package/footer.ts

@@ -338,10 +338,11 @@ export function registerFooter(pi: ExtensionAPI) {
     ctx.ui.setFooter(undefined);
   }
 
-  // enable on session start if footer setting is true
+  // enable on session start if powerline master switch + footer setting are both on
   pi.on('session_start', (_event, ctx) => {
     autoCompactEnabled = readAutoCompactEnabled(ctx.cwd);
-    if (readPowerlineSettings(ctx.cwd).footer) {
+    const s = readPowerlineSettings(ctx.cwd);
+    if (s.powerline && s.footer) {
       enable(ctx);
     }
   });
@@ -355,7 +356,8 @@ export function registerFooter(pi: ExtensionAPI) {
 
   // model switch may affect reasoning support / provider count
   pi.on('model_select', (_event, ctx) => {
-    const show = readPowerlineSettings(ctx.cwd).footer;
+    const s = readPowerlineSettings(ctx.cwd);
+    const show = s.powerline && s.footer;
     if (show && !enabled) {
       enable(ctx);
     } else if (!show && enabled) {
@@ -369,7 +371,8 @@ export function registerFooter(pi: ExtensionAPI) {
   // 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;
+    const s = readPowerlineSettings(c.cwd);
+    const show = s.powerline && s.footer;
     if (show && !enabled) {
       enable(c);
     } else if (!show && enabled) {

package/header.ts

@@ -77,17 +77,19 @@ export function registerHeader(pi: ExtensionAPI) {
     ctx.ui.setHeader(undefined);
   }
 
-  // auto-enable on session start if header setting is true
+  // auto-enable on session start if powerline master switch + header setting are both on
   pi.on('session_start', (_event, ctx) => {
     if (!ctx.hasUI) return;
-    if (readPowerlineSettings(ctx.cwd).header) {
+    const s = readPowerlineSettings(ctx.cwd);
+    if (s.powerline && s.header) {
       enable(ctx);
     }
   });
 
   // re-evaluate on model switch
   pi.on('model_select', (_event, ctx) => {
-    const show = readPowerlineSettings(ctx.cwd).header;
+    const s = readPowerlineSettings(ctx.cwd);
+    const show = s.powerline && s.header;
     if (show && !headerEnabled) {
       enable(ctx);
     } else if (!show && headerEnabled) {
@@ -98,7 +100,8 @@ export function registerHeader(pi: ExtensionAPI) {
   // 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;
+    const s = readPowerlineSettings(c.cwd);
+    const show = s.powerline && s.header;
     if (show && !headerEnabled) {
       enable(c);
     } else if (!show && headerEnabled) {

package/index.ts

@@ -8,6 +8,12 @@ import { readPowerlineSettings, writePowerlineSetting } from './settings.ts';
 
 export default function (pi: ExtensionAPI) {
   // flags
+  pi.registerFlag('powerline', {
+    description: 'Enable pi-powerline extensions',
+    type: 'boolean',
+    default: true,
+  });
+
   pi.registerFlag('breadcrumb', {
     description: 'Breadcrumb display mode: hide, top, inner',
     type: 'string',
@@ -37,6 +43,11 @@ export default function (pi: ExtensionAPI) {
     description: 'Configure powerline: breadcrumb, footer, header',
     getArgumentCompletions: (prefix: string): AutocompleteItem[] | null => {
       const items: AutocompleteItem[] = [
+        {
+          value: 'info',
+          label: 'info',
+          description: 'Show current powerline settings',
+        },
         {
           value: 'breadcrumb:hide',
           label: 'breadcrumb:hide',
@@ -79,10 +90,21 @@ export default function (pi: ExtensionAPI) {
     handler: async (args, ctx) => {
       const arg = args?.trim().toLowerCase();
 
-      // no args: show status
+      // no args: toggle master switch
       if (!arg) {
-        const { breadcrumb, footer, header } = readPowerlineSettings(ctx.cwd);
+        const { powerline } = readPowerlineSettings(ctx.cwd);
+        const next = !powerline;
+        writePowerlineSetting(ctx.cwd, 'powerline', next);
+        pi.events.emit('powerline_settings_changed', ctx);
+        ctx.ui.notify(`powerline → ${next ? 'on' : 'off'}`, 'info');
+        return;
+      }
+
+      // show status
+      if (arg === 'info') {
+        const { powerline, breadcrumb, footer, header } = readPowerlineSettings(ctx.cwd);
         const lines = [
+          `powerline: ${powerline ? 'on' : 'off'}`,
           `breadcrumb: ${breadcrumb}`,
           `footer: ${footer ? 'on' : 'off'}`,
           `header: ${header ? 'on' : 'off'}`,
@@ -95,7 +117,7 @@ export default function (pi: ExtensionAPI) {
       const colonIdx = arg.indexOf(':');
       if (colonIdx === -1) {
         ctx.ui.notify(
-          'Usage: /powerline <breadcrumb:hide|top|inner|footer:on|off|header:on|off>',
+          'Usage: /powerline <info|breadcrumb:hide|top|inner|footer:on|off|header:on|off>',
           'warning',
         );
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-powerline",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Powerline-style UI extensions for pi coding agent (custom editor, breadcrumb, footer, header)",
   "type": "module",
   "files": [
@@ -32,7 +32,7 @@
     "extensions": [
       "./index.ts"
     ],
-    "image": "https://github.com/user-attachments/assets/9ee65cd5-8501-4502-ba69-0209b19e0499"
+    "image": "./assets/pi-powerline.png"
   },
   "peerDependencies": {
     "@mariozechner/pi-coding-agent": "*",

package/settings.ts

@@ -5,12 +5,14 @@ import { join } from 'node:path';
 export type BreadcrumbMode = 'hide' | 'top' | 'inner';
 
 export interface PowerlineSettings {
+  powerline: boolean;
   breadcrumb: BreadcrumbMode;
   footer: boolean;
   header: boolean;
 }
 
 const DEFAULTS: PowerlineSettings = {
+  powerline: true,
   breadcrumb: 'inner',
   footer: true,
   header: true,
@@ -36,6 +38,7 @@ function writeSettings(cwd: string, settings: Record<string, unknown>): void {
 export function readPowerlineSettings(cwd: string): PowerlineSettings {
   const s = readSettings(cwd);
   return {
+    powerline: typeof s.powerline === 'boolean' ? s.powerline : DEFAULTS.powerline,
     breadcrumb: (['hide', 'top', 'inner'].includes(s.breadcrumb as string)
       ? s.breadcrumb
       : DEFAULTS.breadcrumb) as BreadcrumbMode,
@@ -54,3 +57,12 @@ export function writePowerlineSetting(
   s[key] = value;
   writeSettings(cwd, s);
 }
+
+/** Write multiple powerline settings at once, preserving other keys. */
+export function writePowerlineSettings(cwd: string, patch: Partial<PowerlineSettings>): void {
+  const s = readSettings(cwd);
+  for (const [k, v] of Object.entries(patch)) {
+    s[k] = v;
+  }
+  writeSettings(cwd, s);
+}

package/widget.ts

@@ -64,21 +64,22 @@ export function registerWidget(pi: ExtensionAPI) {
     ctx.ui.setWidget('powerline-status', undefined);
   }
 
-  // enable only when breadcrumb mode is "top"
+  // enable only when powerline master switch is on and breadcrumb mode is "top"
   pi.on('session_start', (_event, ctx) => {
     if (!ctx.hasUI) return;
-    const { breadcrumb } = readPowerlineSettings(ctx.cwd);
-    if (breadcrumb === 'top') {
+    const s = readPowerlineSettings(ctx.cwd);
+    if (s.powerline && s.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) {
+    const s = readPowerlineSettings(ctx.cwd);
+    const show = s.powerline && s.breadcrumb === 'top';
+    if (show && !widgetEnabled) {
       enable(ctx);
-    } else if (breadcrumb !== 'top' && widgetEnabled) {
+    } else if (!show && widgetEnabled) {
       disable(ctx);
     } else if (widgetEnabled) {
       liveCtx = ctx;
@@ -89,10 +90,11 @@ export function registerWidget(pi: ExtensionAPI) {
   // 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) {
+    const s = readPowerlineSettings(c.cwd);
+    const show = s.powerline && s.breadcrumb === 'top';
+    if (show && !widgetEnabled) {
       enable(c);
-    } else if (breadcrumb !== 'top' && widgetEnabled) {
+    } else if (!show && widgetEnabled) {
       disable(c);
     }
   });