@rezamonangg/pi-code-preview

Pi extension that renders the last assistant response as a compact, theme-aware markdown and code preview widget above the editor.

Pi is a terminal UI (TUI) coding agent. When you install this extension, every assistant turn is followed by a clean, syntax-highlighted preview panel so you can read code and formatted output without wading through raw markdown fences.

Install

From the repository root:

pi install .

For worktree testing (install the package directory, not the repository root):

pi install ~/Projects/Code/Personal/monang/pi-code-preview/.worktree/fix/border-alignment-and-readme

Then reload Pi:

/reload

What it does

• Shows a preview widget above the editor after each assistant turn.
• Hides raw markdown code fences in the preview widget.
• Renders fenced code blocks with Pi's native highlightCode() using your active theme colors.
• Styles headings, lists, blockquotes, horizontal rules, links, inline code, and bold text.
• Avoids external ANSI renderers (e.g. glow) so tmux/widget rendering stays reliable.
• Clears the preview at the start of the next turn.

Usage

No command required. Once installed and reloaded, send any prompt that returns markdown or a fenced code block. The transcript stays unchanged, while the preview widget renders a cleaner version above the editor.

Example response content:

## Example

```ts
function greet(name: string): string {
  return `Hello, ${name}`;
}
```

Known limits

• Original assistant message remains in the transcript; Pi core does not let an extension hide already-streamed markdown fences there.
• Preview is line-limited to keep the editor usable.
• Tables are shown as wrapped text, not full table layout.
• Very long code lines are truncated to fit the widget width.