pi-context-map 0.7.0 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.7.2] - 2026-06-15
+### Bug Fixes
+- **Fixed insights context window**: Now uses the actual context window from Pi (e.g., 200k) instead of hardcoded 128k. Critical insight no longer shows wrong percentages.
+- **Fixed file filter**: Changed from direct `addEventListener` to event delegation (`document.addEventListener('change', ...)`). Filter now works after SSE body replacement.
+- **Fixed file search**: Changed to event delegation (`document.addEventListener('input', ...)`). Search now works in real-time and survives SSE body replacement.
+- **Added search icon**: SVG magnifying glass icon inside the search input for better UX.
+
+## [0.7.1] - 2026-06-15
+### Bug Fixes
+- **Fixed insights dropdown**: Changed from direct `addEventListener` to event delegation (`document.addEventListener('click', ...)` with `e.target.closest('.insight-header')`). The dropdown now works after SSE body replacement.
+- **Fixed auto-open browser**: Added `cmd /c start` with `explorer` fallback for Windows. Browser now opens reliably on first `/context-map` invocation.
+- **Removed unused variable**: Cleaned up `reportPath` destructuring warning in command handler.
+
 ## [0.7.0] - 2026-06-15
 ### Bug Fixes
 - **Fixed token accuracy**: Now uses Pi's actual token count from `ctx.getContextUsage()` instead of heuristic estimation. The usage percentage now matches Pi's terminal display.

package/README.md

@@ -8,11 +8,15 @@ A visual context window mapping extension for [Pi](https://pi.dev/) that transfo
 
 ## Features
 
-- **Visual Context Budget**: Real-time breakdown of tokens used by System, History, Files, and Tool Results.
-- **Working Set Analysis**: Categorizes files as `Active`, `Stale`, or `Legacy` based on access recency.
+- **Visual Context Budget**: Real-time breakdown of tokens used by System, Tools, History, Files, and Summaries.
+- **Accurate Token Count**: Uses Pi's actual token count from `ctx.getContextUsage()`, not heuristic estimation — matches the terminal display.
+- **Working Set Analysis**: Categorizes files as `Active`, `Stale`, or `Legacy` based on position in the conversation.
 - **Token Weighting**: Identifies "token hogs" by calculating the approximate size of each file in the window.
-- **Operation Tracking**: Marks files with their last operation (Read 👁️, Write 📝, Edit ✍️).
-- **Temporal Mapping**: Visually maps when files entered the context to identify compaction candidates.
+- **Operation Tracking**: Marks files with their last operation (Read, Write, Edit).
+- **Compaction Detection**: Tracks compaction summaries and branch summaries as a separate slice.
+- **Auto-Open Browser**: Report automatically opens in your default browser on first invocation.
+- **Dark Mode**: Toggle between light and dark themes. Preference persists across sessions via localStorage.
+- **Live Server**: SSE-powered localhost server with auto-refresh after each assistant message.
 
 ## Installation
 
@@ -33,20 +37,21 @@ The extension will analyze the session and create an interactive HTML report at:
 
 ## Context Statuses
 
-The extension categorizes files to help you manage context bloat:
+Files are categorized by their position in the conversation (more reliable than turn-based calculation):
 
-| Status | Criteria | Action |
-|--------|----------|--------|
-| **Active** | Accessed in last 3 turns | Keep in context |
-| **Stale** | Accessed 4-10 turns ago | Monitor for removal |
-| **Legacy** | Accessed > 10 turns ago | Prime candidate for compaction |
+| Status | Position in Messages | Action |
+|--------|---------------------|--------|
+| **Active** | Last 30% of messages | Keep in context |
+| **Stale** | Middle 40% of messages | Monitor for removal |
+| **Legacy** | First 30% of messages | Prime candidate for compaction |
 
 ## How It Works
 
-1. **Scanning**: The analyzer iterates through the session history, identifying all `tool_use` calls involving file operations.
-2. **Weighting**: It extracts the content length of tool results and applies a token heuristic (approx. 4 chars/token).
-3. **Categorization**: It calculates the temporal distance between the current turn and the last file access.
-4. **Visualization**: It generates a standalone HTML dashboard featuring a stacked composition bar, a file-weight grid with search/filter, and an interactive insights section.
+1. **Scanning**: The analyzer iterates through session messages, detecting `toolCall` blocks, `toolResult` messages, `compactionSummary` entries, and image attachments.
+2. **Weighting**: It calculates token counts for each message type using a code-aware heuristic (multipliers for code blocks, strings, etc.).
+3. **Accuracy**: When available, Pi's actual token count from `ctx.getContextUsage()` overrides the heuristic for the usage percentage.
+4. **Categorization**: Files are classified by their position in the message array (last 30% = active, middle 40% = stale, first 30% = legacy).
+5. **Visualization**: Generates a self-contained HTML dashboard with stacked composition bar, file cards with search/filter, dark mode toggle, and interactive insights.
 
 ## Live Localhost Server
 

package/extensions/analyzer.ts

@@ -148,10 +148,7 @@ export class ContextAnalyzer {
 									turn,
 									timestamp: msg.timestamp || Date.now(),
 								},
-								status: this.calculateStatus(
-									index,
-									totalMessages,
-								),
+								status: this.calculateStatus(index, totalMessages),
 							});
 						}
 					}
@@ -178,10 +175,7 @@ export class ContextAnalyzer {
 										turn,
 										timestamp: msg.timestamp || Date.now(),
 									},
-									status: this.calculateStatus(
-										index,
-										totalMessages,
-									),
+									status: this.calculateStatus(index, totalMessages),
 								});
 							}
 						}
@@ -200,10 +194,7 @@ export class ContextAnalyzer {
 												turn,
 												timestamp: msg.timestamp || Date.now(),
 											},
-											status: this.calculateStatus(
-												index,
-												totalMessages,
-											),
+											status: this.calculateStatus(index, totalMessages),
 										});
 									}
 								}
@@ -224,15 +215,9 @@ export class ContextAnalyzer {
 							const p = this.extractPath(block.name, block.arguments);
 							if (p) {
 								const opType = this.getOpType(block.name);
-								const result = this.findToolResult(
-									messages,
-									index,
-									block.id,
-								);
+								const result = this.findToolResult(messages, index, block.id);
 								const content = result?.content || "";
-								const w = TokenCounter.count(
-									String(JSON.stringify(content)),
-								);
+								const w = TokenCounter.count(String(JSON.stringify(content)));
 								fileTokens += w;
 								fileRegistry.set(p, {
 									path: p,
@@ -242,10 +227,7 @@ export class ContextAnalyzer {
 										turn,
 										timestamp: msg.timestamp || Date.now(),
 									},
-									status: this.calculateStatus(
-										index,
-										totalMessages,
-									),
+									status: this.calculateStatus(index, totalMessages),
 								});
 							}
 						}
@@ -263,8 +245,7 @@ export class ContextAnalyzer {
 
 		const mk = (tokens: number): ContextSlice => ({
 			tokens: Math.ceil(tokens),
-			percent:
-				totalTokens > 0 ? Math.round((tokens / totalTokens) * 100) : 0,
+			percent: totalTokens > 0 ? Math.round((tokens / totalTokens) * 100) : 0,
 		});
 
 		const files_detail = Array.from(fileRegistry.values())
@@ -306,9 +287,7 @@ export class ContextAnalyzer {
 		if (Array.isArray(content)) {
 			for (const block of content) {
 				if (block.type === "text" && typeof block.text === "string") {
-					const match = block.text.match(
-						/(?:\/|[A-Z]:\\)[\w./\\-]+\.\w+/,
-					);
+					const match = block.text.match(/(?:\/|[A-Z]:\\)[\w./\\-]+\.\w+/);
 					if (match) return match[0];
 				}
 			}

package/extensions/generator.ts

@@ -18,9 +18,10 @@ export class ReportGenerator {
 		actualTokens?: number | null,
 	): string {
 		// Use Pi's actual token count when available
-		const total = actualTokens != null && actualTokens > 0
-			? actualTokens
-			: composition.total.tokens;
+		const total =
+			actualTokens != null && actualTokens > 0
+				? actualTokens
+				: composition.total.tokens;
 		const usagePercent =
 			total > 0 ? Math.round((total / contextWindow) * 100) : 0;
 
@@ -311,11 +312,23 @@ h2:first-of-type { margin-top: 48px; }
 	align-items: center;
 	flex-wrap: wrap;
 }
-.file-search {
+.file-search-wrap {
 	flex: 1;
 	min-width: 220px;
+	position: relative;
+}
+.file-search-icon {
+	position: absolute;
+	left: 16px;
+	top: 50%;
+	transform: translateY(-50%);
+	color: var(--ink-quaternary);
+	pointer-events: none;
+}
+.file-search {
+	width: 100%;
 	height: 44px;
-	padding: 0 20px;
+	padding: 0 20px 0 40px;
 	border: 1px solid rgba(0,0,0,0.08);
 	border-radius: 22px;
 	background: var(--surface);
@@ -578,7 +591,10 @@ h2:first-of-type { margin-top: 48px; }
 <section>
 	<h2>Files <span style="font-size:14px;font-weight:400;color:var(--ink-tertiary);letter-spacing:0;">(${composition.files_detail.length})</span></h2>
 	<div class="file-controls">
-		<input type="text" class="file-search" id="fileSearch" placeholder="Search files" aria-label="Search files">
+		<div class="file-search-wrap">
+		<svg class="file-search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+		<input type="text" class="file-search" id="fileSearch" placeholder="Search files..." aria-label="Search files">
+		</div>
 		<select class="file-filter" id="fileFilter" aria-label="Filter by status">
 			<option value="all">All</option>
 			<option value="active">Active</option>
@@ -597,17 +613,19 @@ h2:first-of-type { margin-top: 48px; }
 
 <script>
 (function() {
-	var search = document.getElementById('fileSearch');
-	var filter = document.getElementById('fileFilter');
-	var grid = document.getElementById('fileGrid');
-	var count = document.getElementById('fileCount');
-	var empty = document.getElementById('emptyState');
-	var cards = grid ? Array.from(grid.querySelectorAll('.file-card')) : [];
-	var total = cards.length;
+	function getCards() {
+		var grid = document.getElementById('fileGrid');
+		return grid ? Array.from(grid.querySelectorAll('.file-card')) : [];
+	}
 
 	function update() {
-		var q = (search.value || '').toLowerCase();
-		var s = filter.value;
+		var search = document.getElementById('fileSearch');
+		var filter = document.getElementById('fileFilter');
+		var count = document.getElementById('fileCount');
+		var empty = document.getElementById('emptyState');
+		var cards = getCards();
+		var q = (search ? search.value : '').toLowerCase();
+		var s = filter ? filter.value : 'all';
 		var v = 0;
 		for (var i = 0; i < cards.length; i++) {
 			var c = cards[i];
@@ -618,11 +636,17 @@ h2:first-of-type { margin-top: 48px; }
 			if (mq && ms) { c.classList.remove('hidden'); v++; }
 			else { c.classList.add('hidden'); }
 		}
-		count.textContent = v === total ? total + ' files' : v + ' of ' + total;
-		empty.style.display = v === 0 ? '' : 'none';
+		if (count) count.textContent = v + ' of ' + cards.length;
+		if (empty) empty.style.display = v === 0 ? '' : 'none';
 	}
-	if (search) search.addEventListener('input', update);
-	if (filter) filter.addEventListener('change', update);
+
+	// Event delegation — survives SSE body replacement
+	document.addEventListener('input', function(e) {
+		if (e.target.id === 'fileSearch') update();
+	});
+	document.addEventListener('change', function(e) {
+		if (e.target.id === 'fileFilter') update();
+	});
 	update();
 
 	// Theme toggle
@@ -647,15 +671,15 @@ h2:first-of-type { margin-top: 48px; }
 		applyTheme(cur === 'dark' ? 'light' : 'dark');
 	});
 
-	// Insight toggles
-	var btns = document.querySelectorAll('.insight-header');
-	for (var j = 0; j < btns.length; j++) {
-		btns[j].addEventListener('click', function() {
-			var card = this.closest('.insight-card');
-			var was = card.classList.toggle('collapsed');
-			this.setAttribute('aria-expanded', was ? 'false' : 'true');
-		});
-	}
+	// Insight toggles (event delegation — survives SSE body replacement)
+	document.addEventListener('click', function(e) {
+		var btn = e.target.closest('.insight-header');
+		if (!btn) return;
+		var card = btn.closest('.insight-card');
+		if (!card) return;
+		var was = card.classList.toggle('collapsed');
+		btn.setAttribute('aria-expanded', was ? 'false' : 'true');
+	});
 
 	// Live SSE
 	try {
@@ -679,14 +703,7 @@ h2:first-of-type { margin-top: 48px; }
 					}
 					// Restore theme after body replacement
 					applyTheme(currentTheme);
-					// Re-bind file search/filter (direct listeners, not delegated)
-					var ns = document.getElementById('fileSearch');
-					var nf = document.getElementById('fileFilter');
-					if (ns) ns.addEventListener('input', update);
-					if (nf) nf.addEventListener('change', update);
-					// Re-query cards after body replacement
-					cards = Array.from(document.getElementById('fileGrid').querySelectorAll('.file-card'));
-					total = cards.length;
+					// Search/filter use event delegation — no re-binding needed
 					update();
 				}
 			} catch(_) {}

package/extensions/index.ts

@@ -27,21 +27,29 @@ function makeReportPath(sessionName?: string): string {
 	const now = new Date();
 	const date = now.toISOString().split("T")[0];
 	const time = now.toTimeString().split(" ")[0].replace(/:/g, "-");
-	const safe = (sessionName || "session")
-		.replace(/[^\w.-]/g, "_")
-		.slice(0, 40);
+	const safe = (sessionName || "session").replace(/[^\w.-]/g, "_").slice(0, 40);
 	const filename = `${date}_${time}_${safe}.html`;
 	return path.join(dir, filename);
 }
 
 function openBrowser(url: string): void {
 	const platform = process.platform;
-	if (platform === "win32") {
-		exec(`start "" "${url}"`);
-	} else if (platform === "darwin") {
-		exec(`open "${url}"`);
-	} else {
-		exec(`xdg-open "${url}"`);
+	try {
+		if (platform === "win32") {
+			// Use cmd /c start with separate title arg to handle URLs with special chars
+			exec(`cmd /c start "" "${url}"`, (err) => {
+				if (err) {
+					// Fallback: try explorer directly
+					exec(`explorer "${url}"`);
+				}
+			});
+		} else if (platform === "darwin") {
+			exec(`open "${url}"`);
+		} else {
+			exec(`xdg-open "${url}"`);
+		}
+	} catch {
+		// Silent — browser open is best-effort
 	}
 }
 
@@ -155,7 +163,7 @@ export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 			}
 		}
 
-		const insights = InsightEngine.generate(composition);
+		const insights = InsightEngine.generate(composition, contextWindow);
 		const html = ReportGenerator.generateHTML(
 			composition,
 			insights,
@@ -194,7 +202,7 @@ export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 
 			ctx.ui.notify("Analyzing session context...", "info");
 			try {
-				const { composition, insights, reportPath } = await runAnalysis();
+				const { composition, insights } = await runAnalysis();
 				const criticalCount = insights.filter(
 					(i) => i.severity === "critical",
 				).length;
@@ -253,9 +261,7 @@ export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 					actualPercent != null
 						? actualPercent
 						: composition.total.tokens > 0
-							? Math.round(
-									(composition.total.tokens / contextWindow) * 100,
-								)
+							? Math.round((composition.total.tokens / contextWindow) * 100)
 							: 0;
 				const summary =
 					`Context: ${composition.total.tokens.toLocaleString()} tokens (${usagePercent.toFixed(1)}% of ${(contextWindow / 1000).toFixed(0)}k). ` +
@@ -270,8 +276,7 @@ export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 						summary,
 						"",
 						...insights.map(
-							(i) =>
-								`[${i.severity.toUpperCase()}] ${i.title}: ${i.message}`,
+							(i) => `[${i.severity.toUpperCase()}] ${i.title}: ${i.message}`,
 						),
 						`Report: ${reportPath}`,
 						serverUrl ? `Live: ${serverUrl}` : "",

package/extensions/insights.ts

@@ -14,15 +14,17 @@ export interface Insight {
 	command?: string; // Suggested slash command
 }
 
-const TYPICAL_WINDOW = 128_000; // Default context window size (Claude Sonnet/Opus)
-
 export class InsightEngine {
 	/**
 	 * Generate a list of insights based on the composition.
 	 */
-	public static generate(composition: ContextComposition): Insight[] {
+	public static generate(
+		composition: ContextComposition,
+		contextWindow?: number,
+	): Insight[] {
 		const insights: Insight[] = [];
-		const { system, tools, history, files, summaries, total } = composition;
+		const { system, tools, files, summaries, total } = composition;
+		const windowSize = contextWindow || 128_000;
 
 		// Rule 1: Tool bloat
 		if (tools.percent > 40) {
@@ -50,7 +52,7 @@ export class InsightEngine {
 		}
 
 		// Rule 3: High overall usage
-		const usagePercent = Math.round((total.tokens / TYPICAL_WINDOW) * 100);
+		const usagePercent = Math.round((total.tokens / windowSize) * 100);
 		if (usagePercent > 80) {
 			insights.push({
 				id: "high-usage",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-context-map",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Professional context profiler for Pi that visualizes the session context window, token distribution, and integrates with Nexus packages for actionable insights.",
   "keywords": [
     "pi-package",