pi-claude-style-tools

Claude Code-style tool rows for pi with Ctrl+O image previews and consistent built-in, MCP, and custom tool rendering

Packages

Package details

extension

Install pi-claude-style-tools from npm and Pi will load the resources declared by the package manifest.

$ pi install npm:pi-claude-style-tools
Package
pi-claude-style-tools
Version
1.0.25
Published
May 12, 2026
Downloads
2,807/mo · 347/wk
Author
leftwinglautus
License
MIT
Types
extension
Size
190.4 KB
Dependencies
2 dependencies · 3 peers
Pi manifest JSON
{
  "extensions": [
    "./extensions/index.ts",
    "./extensions/spinner.ts"
  ]
}

Security note

Pi packages can execute code and influence agent behavior. Review the source before installing third-party packages.

README

pi-claude-style-tools

Claude Code inspired tool rendering for Pi — Shiki-powered diffs, status dots, branch connectors, file icons, and configurable output modes.

Features

  • Compact built-in tool rendering for read, bash, grep, find, ls, edit, and write
  • Claude-style OpenAI tool rendering for apply_patch plus common Pi/OpenAI-style tools like webfetch, web_search, fetch_content, task tools, and context tools
  • apply_patch diff previews that render parsed file patches in the call phase, similar to edit/write
  • Adaptive edit/write diffs with split or unified layouts, syntax highlighting, and inline word-level emphasis
  • Diff stat bar with colored add/remove summary and hunk metadata
  • Progressive collapsed diff hints that shorten on narrow terminals
  • Thinking labels during streaming and final messages, with context sanitization
  • MCP-aware rendering with hidden, summary, and preview modes
  • Configurable output modes for read, search, bash, and MCP results
  • Transparent tool backgrounds in transparent or border mode
  • Theme-adaptive palette — borders, branch connectors, dim text, spinner accent, and diff backgrounds automatically follow the active pi theme (set themeAdaptive: false to keep the fixed Claude-style palette)
  • Transparent edit/write diffs with universal red/green diff colors
  • Global border patch for all tool rows, including unknown/custom tools

Configuration

Set in .pi/settings.json or ~/.pi/settings.json:

{
  "toolBackground": "border",
  "readOutputMode": "preview",
  "searchOutputMode": "preview",
  "mcpOutputMode": "preview",
  "previewLines": 8,
  "bashOutputMode": "opencode",
  "bashCollapsedLines": 10,
  "diffCollapsedLines": 24,
  "themeAdaptive": true,
  "diffTheme": "github-dark"
}

Theme integration

When themeAdaptive is true (default), the following colors are derived from the active pi theme on every render and re-derived whenever the theme changes:

Element Derived from
Tool outline borders (top/bottom rules) borderMuted
Branch connectors (├─, └─, ) dim (fallback: muted)
"✻ Worked for Ns" line muted
Thinking-block italic gray muted
Diff add/remove accents toolDiffAdded / toolDiffRemoved
Diff background tints mixed against toolSuccessBg base
Spinner verb text (Working…) borderAccent (fallback: accent)
Spinner status text muted

User-supplied diffTheme presets and diffColors overrides always win over theme-derived defaults. File-type icons (e.g. ts, py, rs) keep their language-identity colors and are not theme-derived.

Set themeAdaptive: false to keep the original fixed Claude-style palette regardless of the active pi theme.

Toggle at runtime with /cc-theme

/cc-theme           # show current setting + theme name
/cc-theme status    # show current setting + color preview (incl. spinner)
/cc-theme on        # follow pi theme
/cc-theme off       # keep fixed Claude palette
/cc-theme toggle    # flip the current value

The selection is persisted to ~/.pi/settings.json and applied to the next rendered tool row. No restart required.

Repaint the spinner with /cc-spinner

The spinner glyph itself is still colored by pi's loader using accent, while the verb text (e.g. Cooking…) follows borderAccent by default so it stays lively without being the exact same color as the glyph. The status suffix (e.g. (thinking · ↓ 10 tokens · 2s)) follows muted. Use /cc-spinner to bind either text element to any other theme color key:

/cc-spinner preview          # list every common theme key with a colored sample
/cc-spinner verb <key>       # change the verb color (e.g. thinkingHigh, mdHeading)
/cc-spinner status <key>     # change the status suffix color
/cc-spinner reset            # restore defaults (verb=borderAccent, status=muted)

The selection is persisted as spinnerVerbColor / spinnerStatusColor in ~/.pi/settings.json and applied on the next spinner tick.

Tool background modes

Value Behavior
default Standard Pi tool backgrounds
transparent Transparent tool backgrounds
border Transparent backgrounds with top/bottom border lines

Output modes

Setting Values Default
readOutputMode hidden, summary, preview preview
searchOutputMode hidden, count, preview preview
mcpOutputMode hidden, summary, preview preview
bashOutputMode opencode, summary, preview opencode

Numeric settings

Setting Default Description
previewLines 8 Lines shown in collapsed preview mode
expandedPreviewMaxLines 4000 Max lines when fully expanded
bashCollapsedLines 10 Lines for collapsed bash output
diffCollapsedLines 24 Diff lines before collapsing

Notes

This package targets recent Pi versions where tool renderers use:

  • renderCall(args, theme, context)
  • renderResult(result, { expanded, isPartial }, theme, context)

Unknown/custom tools do not have a public global renderer hook in Pi, so this package patches container rendering to add top/bottom borders for all tool executions in border mode.

Credits

This project builds upon and was inspired by the excellent work of: