@xynogen/pix-pretty 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 xynogen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# 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
+- **Collapsible display** - Renders leaked `<think>`/`<thinking>` tags as collapsible HTML details blocks
+- **Visual distinction** - Uses ⚙ icon to clearly mark reasoning content
+- **Non-intrusive** - Only processes finalized messages, no live mutation
+- **Context-efficient** - Collapsible format minimizes visual clutter (toggle with ctrl+o in Pi agent)
+
+## Installation
+
+```bash
+pi install git:github.com/xynogen/pix-pretty
+```
+
+## Configuration
+
+### Environment Variables
+
+**Tool rendering:**
+- `PRETTY_THEME` - Color theme for syntax highlighting
+- `PRETTY_MAX_HL_CHARS` - Max characters to highlight (default: 50000)
+- `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. **Tool output rendering** (`src/index.ts`) - Intercepts read/bash/ls/find/grep/multi_grep tools
+2. **Paste chip formatting** (`src/paste-chips.ts`) - Custom editor component for paste markers
+
+Both work independently but complement each other for a cohesive visual experience.
+
+## Origin
+
+Tool rendering is a vendored fork of [`@heyhuynhgiabuu/pi-pretty`](https://github.com/buddingnewinsights/pi-pretty) with two key changes:
+
+1. **Highlight engine: shiki → cli-highlight** - Simpler, synchronous, no WASM
+2. **FFF state dir: `~/.pi/agent/pi-pretty/fff` → `~/.cache/pi/fff`** - Standard XDG cache location
+
+Paste chip formatting is custom logic for Pi's paste marker system.
+
+## License
+
+MIT - See LICENSE file

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@xynogen/pix-pretty",
+  "version": "1.0.0",
+  "description": "Enhanced tool output rendering with syntax highlighting, file icons, tree views, FFF search, and paste chip formatting",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "bun test"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "pi": {
+    "extensions": [
+      "./src/index.ts",
+      "./src/paste-chips.ts",
+      "./src/thinking.ts"
+    ]
+  },
+  "keywords": [
+    "pi",
+    "pi-package",
+    "pi-extension",
+    "syntax-highlighting",
+    "fff",
+    "paste-chips",
+    "tool-rendering"
+  ],
+  "author": "xynogen",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xynogen/pix-mono.git",
+    "directory": "packages/pix-pretty"
+  },
+  "homepage": "https://github.com/xynogen/pix-mono/tree/main/packages/pix-pretty#readme",
+  "bugs": {
+    "url": "https://github.com/xynogen/pix-mono/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "cli-highlight": "^2.1.11",
+    "@ff-labs/fff-node": "^0.5.2",
+    "diff": "^7.0.0"
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*"
+  }
+}

package/src/README.md

@@ -0,0 +1,66 @@
+# pretty (vendored)
+
+Local fork of [`@heyhuynhgiabuu/pi-pretty`](https://github.com/buddingnewinsights/pi-pretty)
+(v0.5.1). Enhances built-in `read` / `bash` / `ls` / `find` / `grep` /
+`multi_grep` tool output with syntax highlighting, file icons, tree views, and
+FFF-backed search.
+
+## Why vendored
+
+We need two behavioral changes the upstream package does not expose as config,
+so the source is copied here 1:1 and patched:
+
+1. **Highlight engine: shiki → cli-highlight.**
+   Upstream uses `@shikijs/cli` (`codeToANSI`, TextMate grammars + WASM).
+   This fork uses [`cli-highlight`](https://www.npmjs.com/package/cli-highlight)
+   (highlight.js-backed, synchronous). The `hlBlock` interface, language table,
+   line-number layout, and low-contrast normalization are unchanged.
+
+2. **FFF state dir: `~/.pi/agent/pi-pretty/fff` → `~/.cache/pi/fff`.**
+   `getPiPrettyFffDir()` now resolves to `$XDG_CACHE_HOME/pi/fff`
+   (default `~/.cache/pi/fff`), overridable with `PRETTY_FFF_DIR`.
+
+Everything else (bash exit summary, ls tree, find grouping, grep highlighting,
+image metadata, tmux passthrough, `/fff-health`, `/fff-rescan`, multi_grep
+ripgrep fallback) is byte-for-byte upstream.
+
+## Diff vs upstream
+
+- `index.ts`
+  - imports: `@shikijs/cli` + `shiki` types → `cli-highlight` (lazy `require`)
+    with local `BundledLanguage`/`BundledTheme = string` aliases.
+  - `FORCE_COLOR=3` default before chalk init (shiki always emitted truecolor;
+    chalk decides level once at load). Respects an explicit `FORCE_COLOR` /
+    `NO_COLOR`.
+  - `HLJS_LANG_ALIAS` maps shiki-style ids (`tsx`, `jsx`, `jsonc`, `mdx`,
+    `make`, `svelte`, `vue`) onto highlight.js-supported ids.
+  - `hlBlock()` calls `highlight(code, { language, ignoreIllegals: true })`
+    instead of `await codeToANSI(...)`. Still async-typed so call sites match.
+  - `getPiPrettyFffDir()` → `~/.cache/pi/fff`.
+- `fff-helpers.ts`, `multi-grep-fallback.ts` — unchanged.
+
+## Runtime deps & module resolution
+
+`cli-highlight` and `@ff-labs/fff-node` are installed into pi's npm root
+(`~/.pi/agent/npm/node_modules`) by `setup.sh`. Because the extensions dir is a
+symlink into dotfiles and Node dereferences symlinks before resolving bare
+imports, `setup.sh` also creates a git-ignored
+`extensions/node_modules` → `~/.pi/agent/npm/node_modules` bridge next to the
+real source so `require("cli-highlight")` / `import("@ff-labs/fff-node")`
+resolve.
+
+The upstream `npm:@heyhuynhgiabuu/pi-pretty` package is uninstalled by
+`setup.sh` — both register the same tool names and pi does not share tool-name
+ownership across extensions.
+
+## Env vars
+
+Same as upstream (`PRETTY_THEME`, `PRETTY_MAX_HL_CHARS`,
+`PRETTY_MAX_PREVIEW_LINES`, `PRETTY_CACHE_LIMIT`, `PRETTY_ICONS`,
+`PRETTY_DISABLE_TOOLS`, `PRETTY_IMAGE_PROTOCOL`) plus:
+
+- `PRETTY_FFF_DIR` — override the FFF state dir (default `~/.cache/pi/fff`).
+
+## License
+
+MIT — upstream by huynhgiabuu. See upstream repo.

package/src/ansi.ts

@@ -0,0 +1,89 @@
+import type { BgTheme } from "./types.js";
+
+export let RST = "\x1b[0m";
+
+export const BOLD = "\x1b[1m";
+
+export const FG_LNUM = "\x1b[38;2;100;100;100m";
+
+export const FG_DIM = "\x1b[38;2;80;80;80m";
+
+export const FG_RULE = "\x1b[38;2;50;50;50m";
+
+export const FG_GREEN = "\x1b[38;2;100;180;120m";
+
+export const FG_RED = "\x1b[38;2;200;100;100m";
+
+export const FG_YELLOW = "\x1b[38;2;220;180;80m";
+
+export const FG_BLUE = "\x1b[38;2;100;140;220m";
+
+const FG_MUTED = "\x1b[38;2;139;148;158m";
+
+const BG_DEFAULT = "\x1b[49m";
+
+export let BG_BASE = BG_DEFAULT; // tool box success/base bg — updated from theme's toolSuccessBg
+
+export let BG_ERROR = BG_DEFAULT; // tool box error bg — updated from theme's toolErrorBg
+
+/** Parse an ANSI 24-bit color escape into { r, g, b }. Handles both fg (38;2) and bg (48;2). */
+function parseAnsiRgb(
+	ansi: string,
+): { r: number; g: number; b: number } | null {
+	const m = ansi.match(
+		new RegExp(`${ESC_RE}\\[(?:38|48);2;(\\d+);(\\d+);(\\d+)m`),
+	);
+	return m ? { r: +m[1], g: +m[2], b: +m[3] } : null;
+}
+
+function getThemeBgAnsi(theme: BgTheme, key: string): string | null {
+	try {
+		const bgAnsi = theme.getBgAnsi?.(key);
+		return bgAnsi && parseAnsiRgb(bgAnsi) ? bgAnsi : null;
+	} catch {
+		return null;
+	}
+}
+
+/** Read themed tool backgrounds and update BG_BASE / BG_ERROR + RST.
+ *  Recompute on each render so runtime theme changes are respected. */
+export function resolveBaseBackground(theme: BgTheme | null | undefined): void {
+	if (!theme?.getBgAnsi) return;
+
+	BG_BASE =
+		getThemeBgAnsi(theme, "toolBg") ??
+		getThemeBgAnsi(theme, "background") ??
+		BG_DEFAULT;
+	BG_ERROR = getThemeBgAnsi(theme, "toolErrorBg") ?? BG_BASE;
+	RST = `\x1b[0m${BG_BASE}`;
+}
+
+const ESC_RE = "\u001b";
+
+export const ANSI_CAPTURE_RE = new RegExp(`${ESC_RE}\\[([0-9;]*)m`, "g");
+
+// ---------------------------------------------------------------------------
+// Low-contrast fix (same as pi-diff)
+// ---------------------------------------------------------------------------
+
+function isLowContrastShikiFg(params: string): boolean {
+	if (params === "30" || params === "90") return true;
+	if (params === "38;5;0" || params === "38;5;8") return true;
+	if (!params.startsWith("38;2;")) return false;
+	const parts = params.split(";").map(Number);
+	if (parts.length !== 5 || parts.some((n) => !Number.isFinite(n)))
+		return false;
+	const [, , r, g, b] = parts;
+	const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+	return luminance < 72;
+}
+
+export function normalizeShikiContrast(ansi: string): string {
+	return ansi.replace(ANSI_CAPTURE_RE, (seq, params: string) =>
+		isLowContrastShikiFg(params) ? FG_MUTED : seq,
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------

package/src/config.ts

@@ -0,0 +1,66 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+import type { BundledTheme } from "./types.js";
+
+const DEFAULT_THEME: BundledTheme = "github-dark";
+
+export function getDefaultAgentDir(): string | undefined {
+	const home = process.env.HOME ?? "";
+	return home ? join(home, ".pi/agent") : undefined;
+}
+
+function readThemeFromSettings(agentDir?: string): BundledTheme | undefined {
+	const resolvedAgentDir = agentDir ?? getDefaultAgentDir();
+	if (!resolvedAgentDir) return undefined;
+
+	try {
+		const settings = JSON.parse(
+			readFileSync(join(resolvedAgentDir, "settings.json"), "utf8"),
+		) as {
+			theme?: unknown;
+		};
+		return typeof settings.theme === "string"
+			? (settings.theme as BundledTheme)
+			: undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+function resolvePrettyTheme(agentDir?: string): BundledTheme {
+	return (
+		(process.env.PRETTY_THEME as BundledTheme | undefined) ??
+		readThemeFromSettings(agentDir) ??
+		DEFAULT_THEME
+	);
+}
+
+export let THEME: BundledTheme = resolvePrettyTheme();
+
+export function setPrettyTheme(agentDir?: string): void {
+	const resolvedTheme = resolvePrettyTheme(agentDir);
+	if (resolvedTheme === THEME) return;
+	THEME = resolvedTheme;
+}
+
+export function envInt(name: string, fallback: number): number {
+	const v = Number.parseInt(process.env[name] ?? "", 10);
+	return Number.isFinite(v) && v > 0 ? v : fallback;
+}
+
+export const MAX_HL_CHARS = envInt("PRETTY_MAX_HL_CHARS", 80_000);
+
+export const MAX_PREVIEW_LINES = envInt("PRETTY_MAX_PREVIEW_LINES", 80);
+
+export const CACHE_LIMIT = envInt("PRETTY_CACHE_LIMIT", 128);
+
+// --- Diff rendering limits (edit/write tools) ---
+export const MAX_RENDER_LINES = envInt("PRETTY_MAX_RENDER_LINES", 150);
+
+// Word-level emphasis only when paired del/add lines are at least this similar.
+export const WORD_DIFF_MIN_SIM = 0.15;
+
+// ---------------------------------------------------------------------------
+// ANSI
+// ---------------------------------------------------------------------------