@mightguy/pi-ui

📋 Features

• 🎛️ Editor user zone — the prompt area becomes a styled zone with 4 presets (droid, gemini, cli-dock, nvim): model, thinking level, context meter, git branch with +/- LOC, response speed, and token usage rendered right around your input — ported from pi-droid-styling
• 🧰 Tool badges — boxed badges for bash, read, write, edit, grep, find, and ls that collapse to a single row when the call finishes (click a row or press Ctrl+O to open it), with elapsed time, output size, a side-by-side split diff for edits, and a reasonix compact-row mode optional
• 💬 Message styling — • assistant prefix, muted thinking with a live collapsed-tail view, boxed compaction/skill/branch blocks, and full-width bands for code blocks and quotes (no rail characters, so selections copy the text alone); user messages stay plain (optional ❯ prefix and turn dividers in config)
• 🧭 Table of contents — /toc lists your prompts (with a filter) and jumps the transcript to the one you pick; needs fullscreen TUI mode
• 🎯 Focus mode — /final (or alt+g) collapses the transcript to just the final response and restores on a second trigger; needs fullscreen TUI mode
• 🌈 Gradient startup — 9-row gradient "pi" logo derived from your theme accent, key hints, ready indicator, and OSC 11 terminal background sync so the whole window matches the theme
• 🖥️ Custom Status Bar — real-time footer showing model, thinking level, cwd, git branch, context usage (%), and API cost (used when the custom editor is off)
• 🎨 Catppuccin Dark Theme — Dark theme based on Catppuccin Mocha with 64+ color mappings
• ⏳ State-aware Working Loader — braille spinner with labels that follow the work (Working / Thinking / Answering / Running), elapsed time, and adaptive green→yellow→red tone when the stream stalls
• 🌟 Compact Startup — Gradient pi logo with key hints and a one-line ◆ Resources … summary (expandable into System & Context / Available Tools tables) instead of pi's full resource listing
• ⚙️ Zero-config — sensible defaults, optional config at ~/.pi/agent/pi-ui.json
• 🔌 Zero Dependencies — Pure peer-dependency package; no additional npm packages required
• ⚡ TypeScript Native — Loaded directly via jiti — no build step needed

📦 Installation

pi install npm:@mightguy/pi-ui

Or from GitHub:

pi install git:github.com/might-guy106/pi-ui

🚀 Usage

Once installed, pi-ui works automatically — no configuration required. On session start the editor zone, footer, spinner, welcome screen, and message renderer are all registered.

Pick an editor style in ~/.pi/agent/pi-ui.json:

{ "userZoneStyle": "gemini" }

Editor styles

See docs/editor-styles.md for previews and docs/configuration.md for every option.

Working Loader

Braille spinner (⣷⣯⣟⡿⢿⣻⣽⣾) with a state label and elapsed time:

Answering... 󰅐 12.4s

Table of contents

/toc

Filter your prompts and jump the transcript to one of them. See docs/table-of-contents.md.

Focus mode

/final   (or alt+g)

Collapse everything except the final response; trigger again to restore. See docs/final-response.md.

🎨 Themes

/theme catppuccin-dark

🏗️ Project Structure

pi-ui/
├── src/
│   ├── index.ts     # Extension entry
│   ├── ui.ts        # Session setup — header, editor, footer, loader, events
│   ├── config.ts    # ~/.pi/agent/pi-ui.json config
│   ├── loader.ts    # Working loader (spinner + state labels + tone)
│   ├── footer.ts    # Legacy standalone footer (fallback)
│   ├── footer-patch.ts # Footer data capture for the editor zone
│   ├── startup.ts   # Gradient logo header + compact resource summary
│   ├── editor/      # BoxEditor + style presets + cluster helper
│   ├── tools/       # Tool badges, collapse decisions, split diff, presentation styles
│   ├── navigation/  # `/toc` transcript table of contents, `/final` focus mode
│   ├── messages/    # Prefixes, boxed blocks, code/quote bands, streaming seam
│   ├── startup.ts   # Gradient pi logo header + clean startup
│   ├── core/        # git status, response speed
│   ├── theme/       # ANSI toolkit, theme extras, OSC 11 background sync
│   └── perf/        # Profiler (PI_UI_PROFILE=1)
├── themes/
│   └── catppuccin-dark.json
├── scripts/         # Smoke tests (npm test)
├── docs/            # Docs — start at docs/index.md
└── .github/
    └── workflows/
        └── release.yml

🛠️ Development

See docs/index.md for the documentation map, docs/development.md for the dev and publishing workflow.

Credits

This project is a fork of DragonYH/pi-ui, originally published as @rokiy/pi-ui.

The welcome screen is ported from pi-kaush/pi-welcome-screen by the same author.

The editor user zone, working loader, and theme tooling are ported from sting8k/pi-droid-styling — see docs/porting-notes.md.

📄 License

MIT