@agnishc/edb-context-viewer 0.4.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+## [Unreleased]
+
+## [0.4.0] - 2026-04-30
+
+### Added
+- `/system-prompt-data` command — scrollable overlay showing the full system prompt with line numbers, search, and clipboard copy
+- `/total-context-data` command — scrollable overlay showing the complete LLM context (system prompt + all messages) with search and clipboard copy

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Agnish Chakraborty
+
+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,41 @@
+# @agnishc/edb-context-viewer
+
+Pi CLI extension for inspecting the LLM context. Two commands let you see exactly what the model sees:
+
+- **`/system-prompt-data`** — full system prompt with line numbers
+- **`/total-context-data`** — complete LLM context (system prompt + all messages + usage stats)
+
+Both open as scrollable overlay popups with search and clipboard copy.
+
+## Commands
+
+| Command | What it shows |
+|---------|--------------|
+| `/system-prompt-data` | The full system prompt (includes tools, skills, guidelines, AGENTS.md, etc.) |
+| `/total-context-data` | System prompt + all messages (user, assistant, tool calls/results) + context usage stats |
+
+## Controls
+
+| Key | Action |
+|-----|--------|
+| `↑` / `k` | Scroll up |
+| `↓` / `j` | Scroll down |
+| `Page Up` / `Ctrl+B` | Scroll up one page |
+| `Page Down` / `Ctrl+F` | Scroll down one page |
+| `Ctrl+U` / `Ctrl+D` | Scroll half page |
+| `Home` / `g` | Jump to top |
+| `End` / `G` | Jump to bottom |
+| `/` | Search (live matching as you type) |
+| `n` / `N` | Next / previous match |
+| `y` | Copy full content to clipboard |
+| `Escape` / `q` | Close popup |
+
+## Install
+
+```bash
+pi install npm:@agnishc/edb-context-viewer
+```
+
+## License
+
+[MIT](LICENSE) © Agnish Chakraborty

package/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@agnishc/edb-context-viewer",
+	"version": "0.4.0",
+	"description": "Pi extension: inspect the system prompt and full LLM context in scrollable overlay popups",
+	"keywords": [
+		"pi-package",
+		"pi-extension",
+		"edb"
+	],
+	"type": "module",
+	"license": "MIT",
+	"author": "Agnish Chakraborty",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/agnishcc/pi-extention-monorepo.git",
+		"directory": "packages/edb-context-viewer"
+	},
+	"homepage": "https://github.com/agnishcc/pi-extention-monorepo/tree/main/packages/edb-context-viewer#readme",
+	"bugs": {
+		"url": "https://github.com/agnishcc/pi-extention-monorepo/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"test": "vitest run"
+	},
+	"files": [
+		"src",
+		"!src/**/*.test.ts",
+		"README.md",
+		"LICENSE",
+		"CHANGELOG.md"
+	],
+	"pi": {
+		"extensions": [
+			"./src/index.ts"
+		]
+	},
+	"peerDependencies": {
+		"@mariozechner/pi-coding-agent": "*",
+		"@mariozechner/pi-tui": "*"
+	}
+}

package/src/index.ts

@@ -0,0 +1,225 @@
+/**
+ * pi-context-viewer
+ *
+ * Two commands for inspecting what the LLM sees:
+ *
+ *   /system-prompt-data  — shows the full system prompt in a scrollable overlay
+ *   /total-context-data  — shows the complete LLM context (system prompt + all messages)
+ *
+ * Both overlays support: line numbers, scroll, live search (/), clipboard copy (y).
+ */
+
+import {
+	buildSessionContext,
+	type ContextUsage,
+	type ExtensionAPI,
+	type ExtensionCommandContext,
+	type SessionContext,
+	type Theme,
+} from "@mariozechner/pi-coding-agent";
+import { ScrollableOverlay } from "./scrollable-overlay";
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+/** Build display lines with line numbers from raw text. */
+export function buildNumberedLines(text: string, theme: Theme): string[] {
+	const rawLines = text.split("\n");
+	const numWidth = String(rawLines.length).length;
+	return rawLines.map((line, i) => {
+		const num = String(i + 1).padStart(numWidth, " ");
+		return `${theme.fg("dim", num)} ${theme.fg("dim", "│")} ${line}`;
+	});
+}
+
+function formatImageBlock(block: any): string {
+	const label = block.mimeType ?? block.source?.type ?? "unknown";
+	return `[Image: ${label}]`;
+}
+
+function formatContent(content: unknown): string[] {
+	if (typeof content === "string") return [content];
+	if (!Array.isArray(content)) return [];
+
+	const lines: string[] = [];
+	for (const block of content) {
+		if (!block || typeof block !== "object") {
+			lines.push(String(block));
+			continue;
+		}
+
+		switch ((block as any).type) {
+			case "text":
+				lines.push((block as any).text ?? "");
+				break;
+			case "thinking":
+				lines.push(`[Thinking: ${(block as any).thinking ?? ""}]`);
+				break;
+			case "toolCall":
+				lines.push(`[Tool Call: ${(block as any).name}(${JSON.stringify((block as any).arguments ?? {})})]`);
+				break;
+			case "image":
+				lines.push(formatImageBlock(block));
+				break;
+			default:
+				lines.push(`[${(block as any).type ?? "unknown"}]`);
+		}
+	}
+	return lines;
+}
+
+function formatUsage(usage: any): string | undefined {
+	if (!usage) return undefined;
+
+	const parts: string[] = [];
+	if (usage.input != null) parts.push(`input: ${usage.input}`);
+	if (usage.output != null) parts.push(`output: ${usage.output}`);
+	if (usage.cacheRead != null) parts.push(`cache-read: ${usage.cacheRead}`);
+	if (usage.cacheWrite != null) parts.push(`cache-write: ${usage.cacheWrite}`);
+	if (usage.totalTokens != null) parts.push(`total: ${usage.totalTokens}`);
+	return parts.length > 0 ? `Tokens: ${parts.join(", ")}` : undefined;
+}
+
+export function formatMessageForDisplay(message: SessionContext["messages"][number], index: number): string[] {
+	const msg = message as any;
+	const lines: string[] = ["", `──── Message ${index + 1} ────`, `Role: ${msg.role ?? "unknown"}`];
+
+	if (msg.role === "assistant") {
+		if (msg.provider || msg.model) lines.push(`Model: ${[msg.provider, msg.model].filter(Boolean).join("/")}`);
+		const usage = formatUsage(msg.usage);
+		if (usage) lines.push(usage);
+		if (msg.stopReason) lines.push(`Stop: ${msg.stopReason}`);
+		if (msg.errorMessage) lines.push(`Error: ${msg.errorMessage}`);
+	}
+
+	if (msg.role === "toolResult") {
+		lines.push(`Tool: ${msg.toolName ?? "unknown"}`);
+		lines.push(`Tool Call ID: ${msg.toolCallId ?? "unknown"}`);
+		lines.push(`Error: ${msg.isError ? "yes" : "no"}`);
+	}
+
+	lines.push(...formatContent(msg.content));
+	return lines;
+}
+
+interface ContextViewerModelInfo {
+	provider: string;
+	id: string;
+	contextWindow?: number;
+}
+
+export function buildTotalContextText(
+	systemPrompt: string,
+	context: SessionContext,
+	usage: ContextUsage | undefined,
+	model: ContextViewerModelInfo | undefined,
+): string {
+	const sections: string[] = [];
+
+	sections.push("═══════════════════════════════════════════════════════");
+	sections.push("SYSTEM PROMPT");
+	sections.push("═══════════════════════════════════════════════════════");
+	sections.push(systemPrompt);
+	sections.push("");
+
+	sections.push("═══════════════════════════════════════════════════════");
+	sections.push("MESSAGES");
+	sections.push("═══════════════════════════════════════════════════════");
+
+	if (context.messages.length > 0) {
+		for (let i = 0; i < context.messages.length; i++) {
+			sections.push(...formatMessageForDisplay(context.messages[i]!, i));
+		}
+	} else {
+		sections.push("(no messages yet)");
+	}
+
+	sections.push("");
+	sections.push("═══════════════════════════════════════════════════════");
+	sections.push("CONTEXT USAGE");
+	sections.push("═══════════════════════════════════════════════════════");
+	if (usage) {
+		sections.push(`Tokens: ${usage.tokens?.toLocaleString() ?? "unknown"}`);
+		if (model) {
+			sections.push(`Model: ${model.provider}/${model.id}`);
+			const contextWindow = model.contextWindow ?? usage.contextWindow;
+			if (contextWindow) {
+				const pct = usage.percent ?? (usage.tokens == null ? null : (usage.tokens / contextWindow) * 100);
+				sections.push(
+					`Context Window: ${usage.tokens?.toLocaleString() ?? "unknown"} / ${contextWindow.toLocaleString()} (${pct == null ? "unknown" : `${pct.toFixed(1)}%`})`,
+				);
+			}
+		}
+	} else {
+		sections.push("(no usage data available)");
+	}
+
+	return sections.join("\n");
+}
+
+/** Overlay options shared by both commands. */
+const OVERLAY_OPTIONS = {
+	overlay: true,
+	overlayOptions: {
+		anchor: "center" as const,
+		width: "90%" as const,
+		minWidth: 60,
+		maxHeight: "80%" as const,
+	},
+};
+
+// ── Extension ──────────────────────────────────────────────────────────────────
+
+export default function contextViewerExtension(pi: ExtensionAPI): void {
+	// ── /system-prompt-data ──
+	pi.registerCommand("system-prompt-data", {
+		description: "Show the full system prompt in a scrollable popup",
+		handler: async (_args: string, ctx: ExtensionCommandContext) => {
+			if (!ctx.hasUI) return;
+
+			const systemPrompt = ctx.getSystemPrompt();
+			if (!systemPrompt) {
+				ctx.ui.notify("No system prompt available yet. Send a message first.", "warning");
+				return;
+			}
+
+			const lineCount = systemPrompt.split("\n").length;
+			const charCount = systemPrompt.length;
+
+			await ctx.ui.custom<void>((_tui, theme, _keybindings, done) => {
+				const displayLines = buildNumberedLines(systemPrompt, theme);
+				return new ScrollableOverlay({
+					title: "System Prompt",
+					subtitle: `${charCount.toLocaleString()} chars · ${lineCount} lines`,
+					rawText: systemPrompt,
+					displayLines,
+					theme,
+					done,
+				});
+			}, OVERLAY_OPTIONS);
+		},
+	});
+
+	// ── /total-context-data ──
+	pi.registerCommand("total-context-data", {
+		description: "Show the complete LLM context (system prompt + all messages)",
+		handler: async (_args: string, ctx: ExtensionCommandContext) => {
+			if (!ctx.hasUI) return;
+
+			const systemPrompt = ctx.getSystemPrompt() ?? "";
+			const context = buildSessionContext(ctx.sessionManager.getEntries(), ctx.sessionManager.getLeafId());
+			const fullText = buildTotalContextText(systemPrompt, context, ctx.getContextUsage(), ctx.model);
+
+			await ctx.ui.custom<void>((_tui, theme, _keybindings, done) => {
+				const displayLines = buildNumberedLines(fullText, theme);
+				return new ScrollableOverlay({
+					title: "Total Context Data",
+					subtitle: `${fullText.length.toLocaleString()} chars · ${displayLines.length} lines`,
+					rawText: fullText,
+					displayLines,
+					theme,
+					done,
+				});
+			}, OVERLAY_OPTIONS);
+		},
+	});
+}

package/src/scrollable-overlay.ts

@@ -0,0 +1,273 @@
+/**
+ * ScrollableOverlay — reusable scrollable text viewer rendered as a bordered overlay.
+ *
+ * Features:
+ *   - Line numbers
+ *   - Arrow / Page / Home / End / j-k scrolling
+ *   - `/` search with live matching, `n`/`N` navigation
+ *   - `y` copies the raw content to clipboard
+ *   - `Escape` / `q` to close
+ */
+
+import { copyToClipboard as copyTextToClipboard, type Theme } from "@mariozechner/pi-coding-agent";
+import { Key, matchesKey, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+
+const CONTENT_HEIGHT = 30;
+
+export interface ScrollableOverlayOptions {
+	/** Title shown in the top border */
+	title: string;
+	/** Subtitle / stats line (e.g. "1,234 chars · 56 lines") */
+	subtitle: string;
+	/** The raw text to display (used for search & clipboard) */
+	rawText: string;
+	/** The styled display lines (with ANSI formatting, line numbers, etc.) */
+	displayLines: string[];
+	/** Active theme */
+	theme: Theme;
+	/** Called when the user closes the overlay */
+	done: () => void;
+}
+
+export class ScrollableOverlay {
+	private scrollOffset = 0;
+
+	// Search state
+	private searchMode = false;
+	private searchQuery = "";
+	private searchMatches: number[] = [];
+	private currentMatchIndex = -1;
+	private copyFlash = false;
+
+	constructor(private opts: ScrollableOverlayOptions) {}
+
+	private get visibleLines(): number {
+		return CONTENT_HEIGHT;
+	}
+
+	handleInput(data: string): void {
+		if (this.searchMode) {
+			if (matchesKey(data, Key.escape)) {
+				this.searchMode = false;
+				this.searchQuery = "";
+				return;
+			}
+			if (matchesKey(data, Key.enter)) {
+				if (this.searchQuery.length > 0) {
+					this.findMatches();
+					if (this.searchMatches.length > 0) {
+						this.currentMatchIndex = 0;
+						this.scrollToMatch();
+					}
+				}
+				this.searchMode = false;
+				return;
+			}
+			if (matchesKey(data, Key.backspace)) {
+				this.searchQuery = this.searchQuery.slice(0, -1);
+				return;
+			}
+			if (data.length === 1 && data.charCodeAt(0) >= 32) {
+				this.searchQuery += data;
+				this.findMatches();
+				if (this.searchMatches.length > 0) {
+					this.currentMatchIndex = 0;
+					this.scrollToMatch();
+				}
+				return;
+			}
+			return;
+		}
+
+		if (matchesKey(data, Key.escape) || data === "q") {
+			this.opts.done();
+			return;
+		}
+
+		if (matchesKey(data, Key.down) || data === "j") {
+			this.scrollDown(1);
+		} else if (matchesKey(data, Key.up) || data === "k") {
+			this.scrollUp(1);
+		} else if (matchesKey(data, Key.home) || data === "g") {
+			this.scrollOffset = 0;
+		} else if (matchesKey(data, Key.end) || data === "G") {
+			this.scrollToBottom();
+		} else if (matchesKey(data, Key.pageDown) || matchesKey(data, Key.ctrl("f"))) {
+			this.scrollDown(this.visibleLines - 2);
+		} else if (matchesKey(data, Key.pageUp) || matchesKey(data, Key.ctrl("b"))) {
+			this.scrollUp(this.visibleLines - 2);
+		} else if (matchesKey(data, Key.ctrl("d"))) {
+			this.scrollDown(Math.floor(this.visibleLines / 2));
+		} else if (matchesKey(data, Key.ctrl("u"))) {
+			this.scrollUp(Math.floor(this.visibleLines / 2));
+		} else if (data === "/") {
+			this.searchMode = true;
+			this.searchQuery = "";
+			this.searchMatches = [];
+			this.currentMatchIndex = -1;
+		} else if (data === "n") {
+			this.nextMatch();
+		} else if (data === "N") {
+			this.prevMatch();
+		} else if (data === "y") {
+			void this.copyToClipboard();
+		}
+	}
+
+	private scrollDown(amount: number): void {
+		const maxOffset = Math.max(0, this.opts.displayLines.length - this.visibleLines);
+		this.scrollOffset = Math.min(this.scrollOffset + amount, maxOffset);
+	}
+
+	private scrollUp(amount: number): void {
+		this.scrollOffset = Math.max(0, this.scrollOffset - amount);
+	}
+
+	private scrollToBottom(): void {
+		this.scrollOffset = Math.max(0, this.opts.displayLines.length - this.visibleLines);
+	}
+
+	private findMatches(): void {
+		const query = this.searchQuery.toLowerCase();
+		const rawLines = this.opts.rawText.split("\n");
+		this.searchMatches = [];
+		if (query.length === 0) {
+			this.currentMatchIndex = -1;
+			return;
+		}
+		for (let i = 0; i < rawLines.length; i++) {
+			if (rawLines[i]!.toLowerCase().includes(query)) {
+				this.searchMatches.push(i);
+			}
+		}
+	}
+
+	private scrollToMatch(): void {
+		if (this.currentMatchIndex >= 0 && this.currentMatchIndex < this.searchMatches.length) {
+			const targetLine = this.searchMatches[this.currentMatchIndex]!;
+			if (targetLine < this.scrollOffset || targetLine >= this.scrollOffset + this.visibleLines) {
+				this.scrollOffset = Math.max(0, targetLine - Math.floor(this.visibleLines / 3));
+			}
+		}
+	}
+
+	private nextMatch(): void {
+		if (this.searchMatches.length === 0) return;
+		this.currentMatchIndex = (this.currentMatchIndex + 1) % this.searchMatches.length;
+		this.scrollToMatch();
+	}
+
+	private prevMatch(): void {
+		if (this.searchMatches.length === 0) return;
+		this.currentMatchIndex = (this.currentMatchIndex - 1 + this.searchMatches.length) % this.searchMatches.length;
+		this.scrollToMatch();
+	}
+
+	private async copyToClipboard(): Promise<void> {
+		this.copyFlash = true;
+		try {
+			await copyTextToClipboard(this.opts.rawText);
+		} catch {
+			// Silently fail if clipboard tools aren't available
+		}
+		setTimeout(() => {
+			this.copyFlash = false;
+		}, 1500);
+	}
+
+	render(width: number): string[] {
+		const th = this.opts.theme;
+		const innerW = width - 2;
+		const lines: string[] = [];
+
+		const pad = (s: string, len: number) => {
+			const vis = visibleWidth(s);
+			return s + " ".repeat(Math.max(0, len - vis));
+		};
+
+		const row = (content: string) => th.fg("border", "│") + pad(content, innerW) + th.fg("border", "│");
+		const borderTop = th.fg("border", `╭${"─".repeat(innerW)}╮`);
+		const borderSep = th.fg("border", `├${"─".repeat(innerW)}┤`);
+		const borderBottom = th.fg("border", `╰${"─".repeat(innerW)}╯`);
+
+		// ── Title bar ──
+		const title = ` ${th.fg("accent", th.bold(this.opts.title))}  ${th.fg("dim", `(${this.opts.subtitle})`)}`;
+		lines.push(borderTop);
+		lines.push(row(title));
+
+		// ── Search bar or separator ──
+		if (this.searchMode) {
+			const searchContent = ` ${th.fg("accent", "/")} ${this.searchQuery}${th.fg("dim", "▏")}`;
+			lines.push(row(searchContent));
+		} else if (this.searchMatches.length > 0) {
+			const matchInfo = ` ${th.fg("accent", "/")} ${th.fg("text", this.searchQuery)} ${th.fg("dim", "—")} ${th.fg("accent", `${this.currentMatchIndex + 1}/${this.searchMatches.length}`)}`;
+			lines.push(row(matchInfo));
+		} else {
+			lines.push(borderSep);
+		}
+
+		// ── Content lines ──
+		const maxScroll = Math.max(0, this.opts.displayLines.length - this.visibleLines);
+		this.scrollOffset = Math.min(this.scrollOffset, maxScroll);
+		this.scrollOffset = Math.max(0, this.scrollOffset);
+
+		for (let i = 0; i < this.visibleLines; i++) {
+			const lineIdx = this.scrollOffset + i;
+			if (lineIdx < this.opts.displayLines.length) {
+				let line = this.opts.displayLines[lineIdx]!;
+
+				const isCurrentMatch =
+					this.searchMatches.length > 0 &&
+					this.currentMatchIndex >= 0 &&
+					this.searchMatches[this.currentMatchIndex] === lineIdx;
+				const isOtherMatch =
+					this.searchMatches.length > 0 && this.searchMatches.includes(lineIdx) && !isCurrentMatch;
+
+				if (isCurrentMatch) {
+					line = th.bg("selectedBg", truncateToWidth(line, innerW));
+				} else if (isOtherMatch) {
+					line = th.fg("warning", truncateToWidth(line, innerW));
+				} else {
+					line = truncateToWidth(line, innerW);
+				}
+
+				lines.push(row(line));
+			} else {
+				lines.push(row(th.fg("dim", "~")));
+			}
+		}
+
+		// ── Footer ──
+		lines.push(borderSep);
+
+		const scrollPercent =
+			this.opts.displayLines.length <= this.visibleLines
+				? "All"
+				: this.scrollOffset === 0
+					? "Top"
+					: this.scrollOffset >= maxScroll
+						? "Bot"
+						: `${Math.round(((this.scrollOffset + this.visibleLines) / this.opts.displayLines.length) * 100)}%`;
+
+		let statusLeft = th.fg(
+			"dim",
+			` ${this.scrollOffset + 1}-${Math.min(this.scrollOffset + this.visibleLines, this.opts.displayLines.length)} of ${this.opts.displayLines.length} [${scrollPercent}] `,
+		);
+
+		if (this.copyFlash) {
+			statusLeft += th.fg("success", "✓ Copied! ");
+		}
+
+		const helpItems = ["↑↓ scroll", "/ search", "n/N next", "y copy", "q close"];
+		const helpText = th.fg("dim", helpItems.join(" · "));
+
+		lines.push(row(statusLeft + helpText));
+		lines.push(borderBottom);
+
+		return lines;
+	}
+
+	invalidate(): void {
+		// No cached state to clear — rebuilds from opts every render
+	}
+}