npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

pi-ui-hephaestus

v0.8.0

Published

Muted thinking blocks, framed editor, animated header, response time, rich footer, and clipboard image paste for pi

Readme

Hephaestus

Visual polish and useful context for the Pi coding agent TUI

npm version TypeScript License: MIT

Hephaestus transforms the Pi coding agent terminal into a polished, information-rich workspace. It adds visual polish, useful context, and safety features — making your daily interaction with the coding agent feel more like a professional IDE and less like a raw terminal.

Why Hephaestus?

The default Pi TUI is functional but minimal. Hephaestus fills in the gaps:

  • No more abrupt startup — an animated splash screen greets you
  • No more guessing — git status, token usage, and context window are always visible
  • No more blind edits — diffs are syntax-highlighted so you can see exactly what changed
  • No more accidental quits — a double-press guard protects your work

Features

🎬 Animated splash screen

A smooth reveal animation on startup: the Pi logo fades in diagonally, then version info and loaded context (models, prompts, skills, extensions, themes) appear with staggered fade-in. Gives the TUI a proper launch feel.

✏️ Framed editor pane

The input area gets a clean bordered frame with decorative / top/bottom edges, visually separating it from chat history. Includes a double-press quit guard — pressing the clear key once shows a "press again to quit" hint, preventing accidental exits mid-conversation.

🤫 Muted thinking blocks

Reasoning/thinking content renders in muted colors so it doesn't compete with actual responses. Code blocks inside thinking sections are automatically unindented for readability. The label text and color are fully customizable.

⏱️ Response times

Each user message shows a right-aligned timer (12.3s, 2m 14s) displaying how long the AI took to respond. Makes it easy to spot which prompts trigger long reasoning cycles.

📊 Rich single-line footer

A compact status bar at the bottom packs maximum information:

| Element | Description | |---------|-------------| | Directory | Current working directory name | | Git branch | With clean/dirty indicator ( staged, ~ unstaged, U untracked) | | Model | Active model name | | Thinking | Level indicator when agent is reasoning | | Worktree | Branch name if using git worktrees | | Tokens | ↑input ↓output R-read W-write + cost estimate | | Context bar | Progress bar with color warnings at 80% (yellow) and 95% (red) |

🔍 Syntax-highlighted diff rendering

When the agent writes or edits files, Hephaestus renders a Shiki-powered diff instead of plain text:

  • Split view — side-by-side old/new with diagonal stripes in empty slots
  • Unified view — stacked fallback when terminal is too narrow
  • Word-level emphasis — brighter backgrounds on changed characters
  • Auto-derived colors — diffs adapt to your Pi theme automatically
  • Graceful degradation — falls back to plain text if Shiki fails

🖼️ Image paste

Paste images from your clipboard directly into your messages:

  • Ctrl+V (Linux) / Alt+V (Windows) — paste image from clipboard
    • On Linux, Ctrl+V is used exclusively for image paste (pi uses Ctrl+Shift+V for text paste)
    • On Windows, Alt+V is used because the terminal reserves Ctrl+V for text paste
  • Images are attached as content blocks and sent to the agent
  • Inline preview renders after submit (controlled by terminal.showImages in settings)

Settings

Toggle image preview in /hephaestus settings or via ~/.pi/agent/settings.json:

{
  "terminal": {
    "showImages": true
  }
}

When showImages is false, images are still attached to messages but no inline preview is shown.

Quick Start

# Install globally
npm install -g pi-ui-hephaestus

# Restart Pi — Hephaestus loads automatically
pi

That's it. No configuration needed — everything works out of the box with sensible defaults.

Settings

Run the /hephaestus slash command to open the interactive settings panel. Navigate with arrow keys, press Enter to toggle or edit, Save to persist, ESC to cancel.

| Setting | Type | Default | Description | |---------|------|---------|-------------| | Muted Theme | Toggle | Off | Use subdued colors for thinking blocks | | Code Unindent | Toggle | On | Remove common indentation from code blocks inside thinking sections | | Label Text | Text | Thinking... | Custom prefix shown before thinking blocks | | Label Color | Text | 255,215,0 | RGB color for the thinking label (e.g. 255,215,0) | | Diff Theme | Text | github-dark | Shiki syntax-highlighting theme for diffs | | Split Min Width | Number | 150 | Minimum terminal columns to show split diff view (≥ 100) | | Split Min Code Width | Number | 60 | Minimum code columns per side in split view (≥ 30) |

Configuration file

Settings are persisted in ~/.pi/agent/settings.json under the "hephaestus" key:

{
  "hephaestus": {
    "mutedTheme": false,
    "codeUnindent": true,
    "labelText": "Thinking...",
    "labelColor": "255,215,0",
    "diffTheme": "github-dark",
    "diffSplitMinWidth": 150,
    "diffSplitMinCodeWidth": 60
  }
}

You can edit this file directly for fine-tuning. Changes take effect on the next session.

Architecture

Hephaestus is structured as a collection of focused modules:

src/
├── index.ts              ← Thin orchestrator — wires everything together
├── config.ts             ← Configuration loading/saving
├── settings.ts           ← Settings UI with factory-based submenus
├── chrome.ts             ← Editor chrome constants and palette resolution
│
├── utils/
│   ├── ansi.ts           ← Unified ANSI utilities (stripAnsi, stripSgr, etc.)
│   ├── text.ts           ← Text formatting (clampLine, isParentBorder)
│   └── color.ts          ← HSL/RGB color math utilities
│
├── editor/index.ts       ← Custom editor with quit guard
├── footer/               ← Status bar (git, tokens, context window)
├── message/index.ts      ← Response time patching
├── startup/              ← Animated splash screen (logo, sections, version)
├── thinking/             ← Muted thinking block rendering
├── diff-render/          ← Shiki-powered diff rendering
└── image-paste/          ← Clipboard image paste and drag-drop

Each module has a single responsibility and communicates through well-defined interfaces. The main entry point (index.ts) is a thin orchestrator that wires modules together.

Requirements

  • Pi TUI with extension support (@mariozechner/pi-coding-agent >= 0.1.0)
  • Node.js >= 24