pix-pretty

Complete rendering and formatting solution for Pi Coding Agent with syntax highlighting, file icons, tree views, FFF search, paste chip formatting, and reasoning tag cleanup.

Features

Tool Output Rendering

• Syntax highlighting - Uses cli-highlight (highlight.js-backed) for code blocks
• File icons - Visual file type indicators in ls/find output
• Tree views - Hierarchical directory display
• FFF search - Fast full-text search integration with @ff-labs/fff-node
• Diff rendering - Enhanced git diff and edit/write tool output
• Image metadata - Display image dimensions and format info
• Bash exit summary - Command status and timing info

Paste Chip Formatting

• Image path collapsing - Converts /tmp/pi-clipboard-abc.png → [paste image #1]
• Text paste markers - Long pasted text → [paste text +42 lines]
• Atomic deletion - Delete entire paste markers as single units
• Type-aware labels - Visual distinction between image and text pastes

Reasoning Tag Rendering

• Live streaming - Splits <think>/<thinking> regions into native Pi thinking content blocks token-by-token during streaming
• Finalized cleanup - On message_end, re-splits every affected text block for persistence (the finalized message bypasses the live rebuild)
• Partial-tag safety - Strips trailing half-streamed tags (e.g. <thin) so they never flash as literal text
• Visual distinction - Uses Pi's native thinking block rendering (dim + italic via thinkingText theme token) — no ANSI injection, no markdown blockquote shim

Installation

pi install npm:@xynogen/pix-pretty

Configuration

Environment Variables

Tool rendering:

• PRETTY_THEME - Color theme for syntax highlighting
• PRETTY_MAX_HL_CHARS - Max characters to highlight (default: 80000)
• PRETTY_MAX_PREVIEW_LINES - Max lines in preview output
• PRETTY_CACHE_LIMIT - FFF cache size limit
• PRETTY_ICONS - Enable/disable file icons
• PRETTY_DISABLE_TOOLS - Comma-separated list of tools to skip rendering
• PRETTY_IMAGE_PROTOCOL - Protocol for image display (tmux passthrough)
• PRETTY_FFF_DIR - Override FFF state dir (default: ~/.cache/pi/fff)

Architecture

This package combines two rendering systems:

1. Theme + FFF commands (src/index.ts) - Initialises syntax-highlight theme from Pi settings, clears highlight cache, and registers FFF slash commands. Tool renderers live in the standalone pix-{read,bash,ls,find,grep,edit,write} packages — each self-registers via its own Pi extension entry point.
2. Paste chip formatting (src/paste-chips.ts) - Custom editor component for paste markers.
3. Reasoning tag rendering (src/thinking.ts) - Converts leaked <think>/<thinking> tags into native Pi thinking content blocks (dim + italic via thinkingText theme token).

Both work independently but complement each other for a cohesive visual experience.

Origin

Tool rendering replaced npm:@heyhuynhgiabuu/pi-pretty (which was previously replaced by npm:@heyhuynhgiabuu/pi-diff). This package is a clean reimplementation — no code was copied directly. Developed independently; changes are not submitted back and upstream changes are not pulled in.

Key divergences from upstream:

1. Highlight engine: shiki → cli-highlight - Simpler, no WASM, synchronous
2. FFF state dir - ~/.pi/agent/pi-pretty/fff → ~/.cache/pi/fff (XDG cache)
3. Split diff view for edit/write tools - Full side-by-side diff with gutter, line numbers, syntax highlighting
4. Paste chip formatting - Custom editor component for Pi's paste marker system (not in upstream)
5. Reasoning tag rendering - Converts leaked <think>/<thinking> tags into native Pi thinking content blocks (not in upstream)

Paste chip formatting and reasoning tag rendering are original additions with no upstream equivalent.

Full distro

To install the complete pix suite (all packages + Pi itself):

curl -fsSL https://raw.githubusercontent.com/xynogen/pix-mono/main/scripts/install.sh | sh

License

MIT