pi-context-map 0.4.4 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [0.6.0] - 2026-06-15
+### Bug Fixes
+- **Fixed composition analysis**: Changed `role === "tool"` to `role === "toolResult"` to match Pi's actual message format. Tools and files now show correct percentages instead of 0%.
+- **File attachment detection**: Now detects images (type: "image") and file paths in user messages, not just assistant tool_use blocks.
+- **Compaction summary detection**: Improved detection of Pi compaction entries via `customType` field.
+
+### Features
+- **Session-unique reports**: Each report is saved with date, time, and session name (e.g., `2026-06-15_14-30-00_my-session.html`). Old reports are preserved for history.
+- **Auto-report path on session start**: New session gets a fresh report path automatically.
+
+## [0.5.1] - 2026-06-15
+### Bug Fixes
+- **Fixed toggle symbol**: Dark mode now correctly shows sun icon + "Light" label. Light mode shows moon icon + "Dark" label. Uses fresh DOM queries to survive SSE body replacement.
+- **Toggle moved to corner**: Button is now fixed in the top-right corner of the page, not inline with the live badge.
+- **Event delegation**: Theme toggle click handler uses event delegation so it survives SSE body replacement without re-binding.
+
+## [0.5.0] - 2026-06-15
+### Features
+- **Dark mode toggle**: Light/dark theme switcher in the report header. Preference saved to localStorage and restored on next load. Theme persists across SSE live updates.
+- **Dynamic context window**: Replaced hardcoded 128k with actual context window size from Pi system via `ctx.getContextUsage()`. Now accurately reflects your model's real context limit (200k, 128k, etc.).
+
 ## [0.4.4] - 2026-06-15
 ### Bug Fixes
 - **Fixed SSE rendering**: Changed `document.replaceChild(document.documentElement)` to `document.body.innerHTML` replacement. CSS and JavaScript no longer render as visible text on the page.

package/extensions/analyzer.ts

@@ -1,7 +1,7 @@
 /**
  * ContextAnalyzer
- * Responsible for parsing Pi session messages to identify the active working set of files,
- * their token weights, and their temporal status. Uses the code-aware TokenCounter.
+ * Parses Pi session messages to identify the active working set of files,
+ * their token weights, and their temporal status.
  */
 import { TokenCounter } from "./token-counter";
 
@@ -13,7 +13,7 @@ export interface FileOp {
 
 export interface FileContext {
 	path: string;
-	weight: number; // Estimated tokens
+	weight: number;
 	lastOp: FileOp;
 	status: "active" | "stale" | "legacy";
 }
@@ -34,11 +34,6 @@ export interface ContextComposition {
 }
 
 export class ContextAnalyzer {
-	/**
-	 * Analyze session messages to produce a structured ContextComposition.
-	 * @param messages The full session conversation history.
-	 * @param currentTurn The current turn number.
-	 */
 	public analyzeByType(
 		messages: any[],
 		currentTurn: number,
@@ -51,73 +46,130 @@ export class ContextAnalyzer {
 		let fileTokens = 0;
 		let summaryTokens = 0;
 
-		messages.forEach((msg, index) => {
+		for (let index = 0; index < messages.length; index++) {
+			const msg = messages[index];
 			const turn = index + 1;
+			const role = msg.role || "";
+			const msgType = msg.type || "";
 
-			// 1. Categorize and count
-			if (msg.role === "system") {
-				systemTokens += TokenCounter.countMessage(msg);
-				return;
-			}
-
-			if (msg.role === "tool") {
-				toolTokens += TokenCounter.countMessage(msg);
-				return;
-			}
-
-			// Detect compaction summaries (Pi uses customType or specific role)
+			// 1. Compaction summaries
 			if (
-				msg.role === "compaction" ||
-				msg.type === "compaction" ||
+				role === "compaction" ||
+				msgType === "compaction" ||
+				msg.customType === "compaction" ||
 				msg.compactionEntry
 			) {
 				summaryTokens += TokenCounter.countMessage(msg);
-				return;
+				continue;
 			}
 
-			if (msg.role === "user" || msg.role === "assistant") {
-				historyTokens += TokenCounter.countMessage(msg);
-			} else {
-				// Default to history
+			// 2. System messages
+			if (role === "system" || msgType === "system") {
+				systemTokens += TokenCounter.countMessage(msg);
+				continue;
+			}
+
+			// 3. Tool results (Pi uses "toolResult")
+			if (role === "toolResult" || role === "tool") {
+				toolTokens += TokenCounter.countMessage(msg);
+				continue;
+			}
+
+			// 4. User messages — track file attachments
+			if (role === "user") {
 				historyTokens += TokenCounter.countMessage(msg);
+				if (Array.isArray(msg.content)) {
+					for (const block of msg.content) {
+						if (block.type === "image" || block.type === "image_url") {
+							const p =
+								block.source?.url || block.image_url?.url || "[image]";
+							const w = TokenCounter.count(JSON.stringify(block));
+							fileTokens += w;
+							if (!fileRegistry.has(p)) {
+								fileRegistry.set(p, {
+									path: p,
+									weight: w,
+									lastOp: {
+										type: "read",
+										turn,
+										timestamp: msg.timestamp || Date.now(),
+									},
+									status: this.calculateStatus(turn, currentTurn),
+								});
+							}
+						}
+						if (block.type === "text" && typeof block.text === "string") {
+							const matches = block.text.match(
+								/(?:\/|[A-Z]:\\)[\w./\\-]+\.\w+/g,
+							);
+							if (matches) {
+								for (const m of matches) {
+									if (!fileRegistry.has(m)) {
+										fileRegistry.set(m, {
+											path: m,
+											weight: TokenCounter.count(m),
+											lastOp: {
+												type: "read",
+												turn,
+												timestamp: msg.timestamp || Date.now(),
+											},
+											status: this.calculateStatus(turn, currentTurn),
+										});
+									}
+								}
+							}
+						}
+					}
+				}
+				continue;
 			}
 
-			// 2. File tracking (only on assistant tool_use blocks)
-			if (msg.role === "assistant" && Array.isArray(msg.content)) {
-				for (const block of msg.content) {
-					if (block.type === "tool_use") {
-						const input = block.input as Record<string, any>;
-						const path = this.extractPath(block.name, input);
-
-						if (path) {
-							const opType = this.getOpType(block.name);
-							const result = this.findToolResult(messages, index, block.id);
-							const content = result?.content || "";
-							const weight = TokenCounter.count(String(content));
-							fileTokens += weight;
-
-							fileRegistry.set(path, {
-								path,
-								weight,
-								lastOp: {
-									type: opType,
-									turn,
-									timestamp: msg.timestamp || Date.now(),
-								},
-								status: this.calculateStatus(turn, currentTurn),
-							});
+			// 5. Assistant messages — track tool_use blocks
+			if (role === "assistant") {
+				historyTokens += TokenCounter.countMessage(msg);
+				if (Array.isArray(msg.content)) {
+					for (const block of msg.content) {
+						if (block.type === "tool_use") {
+							const input = block.input as Record<string, any>;
+							const p = this.extractPath(block.name, input);
+							if (p) {
+								const opType = this.getOpType(block.name);
+								const result = this.findToolResult(
+									messages,
+									index,
+									block.id,
+								);
+								const content = result?.content || "";
+								const w = TokenCounter.count(String(content));
+								fileTokens += w;
+								fileRegistry.set(p, {
+									path: p,
+									weight: w,
+									lastOp: {
+										type: opType,
+										turn,
+										timestamp: msg.timestamp || Date.now(),
+									},
+									status: this.calculateStatus(turn, currentTurn),
+								});
+							}
 						}
 					}
 				}
+				continue;
 			}
-		});
+
+			// 6. Everything else
+			historyTokens += TokenCounter.countMessage(msg);
+		}
 
 		const totalTokens =
 			systemTokens + toolTokens + historyTokens + fileTokens + summaryTokens;
 
 		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())
@@ -182,7 +234,10 @@ export class ContextAnalyzer {
 		toolId: string,
 	): any {
 		for (let i = toolTurnIndex + 1; i < messages.length; i++) {
-			if (messages[i].role === "tool" && messages[i].tool_call_id === toolId) {
+			if (
+				messages[i].role === "toolResult" &&
+				messages[i].tool_call_id === toolId
+			) {
 				return messages[i];
 			}
 			if (messages[i].role === "assistant") break;

package/extensions/generator.ts

@@ -14,9 +14,11 @@ export class ReportGenerator {
 	public static generateHTML(
 		composition: ContextComposition,
 		insights: Insight[],
+		contextWindow: number = 128_000,
 	): string {
 		const total = composition.total.tokens;
-		const usagePercent = total > 0 ? Math.round((total / 128_000) * 100) : 0;
+		const usagePercent =
+			total > 0 ? Math.round((total / contextWindow) * 100) : 0;
 
 		const fileCards = composition.files_detail
 			.map(
@@ -90,6 +92,26 @@ export class ReportGenerator {
 	--seg-files: #007aff;
 	--seg-summaries: #34c759;
 }
+[data-theme="dark"] {
+	--canvas: #0a0a0b;
+	--canvas-alt: #141415;
+	--surface: #1a1a1c;
+	--hairline: #2c2c2e;
+	--hairline-soft: rgba(255,255,255,0.06);
+	--ink: #f5f5f7;
+	--ink-secondary: #a1a1a6;
+	--ink-tertiary: #6e6e73;
+	--ink-quaternary: #48484a;
+	--accent: #2997ff;
+	--accent-hover: #40a9ff;
+	--accent-soft: rgba(41,151,255,0.12);
+	--success: #30d158;
+	--success-soft: rgba(48,209,88,0.12);
+	--warning: #ff9f0a;
+	--warning-soft: rgba(255,159,10,0.12);
+	--danger: #ff453a;
+	--danger-soft: rgba(255,69,58,0.12);
+}
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 body {
 	background: var(--canvas);
@@ -482,8 +504,13 @@ h2:first-of-type { margin-top: 48px; }
 <div class="container">
 
 <header>
-	<div class="live-badge"><span class="dot"></span>Live</div>
-	<h1>Context Profiler</h1>
+			<button id="themeToggle" style="position:fixed;top:24px;right:24px;z-index:100;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--hairline);border-radius:20px;background:var(--surface);color:var(--ink-secondary);font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.08);" aria-label="Toggle theme">
+				<svg id="themeIconSun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+				<svg id="themeIconMoon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+				<span id="themeLabel">Dark</span>
+			</button>
+			<div class="live-badge"><span class="dot"></span>Live</div>
+			<h1>Context Profiler</h1>
 	<p class="subtitle">Session context window breakdown with actionable recommendations</p>
 
 	<div class="stats">
@@ -500,8 +527,8 @@ h2:first-of-type { margin-top: 48px; }
 			<span class="stat-label">Alerts</span>
 		</div>
 		<div class="stat">
-			<span class="stat-value">${usagePercent}<span style="font-size:14px;color:var(--ink-tertiary)">%</span></span>
-			<span class="stat-label">of 128k Window</span>
+			<span class="stat-value">${(contextWindow / 1000).toFixed(0)}k</span>
+			<span class="stat-label">Context Window</span>
 		</div>
 	</div>
 
@@ -515,7 +542,7 @@ h2:first-of-type { margin-top: 48px; }
 			</svg>
 		</div>
 		<div class="usage-label">
-			${usagePercent}% of 128k window
+			${usagePercent}% of ${(contextWindow / 1000).toFixed(0)}k window
 			<small>${usagePercent > 80 ? "Compaction recommended" : usagePercent > 60 ? "Monitor usage" : "Healthy"}</small>
 		</div>
 	</div>
@@ -594,6 +621,28 @@ h2:first-of-type { margin-top: 48px; }
 	if (filter) filter.addEventListener('change', update);
 	update();
 
+	// Theme toggle
+	function applyTheme(t) {
+		document.documentElement.setAttribute('data-theme', t);
+		localStorage.setItem('context-map-theme', t);
+		// Query fresh each time (DOM may have been replaced by SSE)
+		var lbl = document.getElementById('themeLabel');
+		var sun = document.getElementById('themeIconSun');
+		var moon = document.getElementById('themeIconMoon');
+		if (lbl) lbl.textContent = t === 'dark' ? 'Light' : 'Dark';
+		if (sun) sun.style.display = t === 'dark' ? '' : 'none';
+		if (moon) moon.style.display = t === 'dark' ? 'none' : '';
+	}
+	var saved = localStorage.getItem('context-map-theme');
+	applyTheme(saved || 'light');
+	// Use event delegation on document so clicks survive body replacement
+	document.addEventListener('click', function(e) {
+		var btn = e.target.closest('#themeToggle');
+		if (!btn) return;
+		var cur = document.documentElement.getAttribute('data-theme');
+		applyTheme(cur === 'dark' ? 'light' : 'dark');
+	});
+
 	// Insight toggles
 	var btns = document.querySelectorAll('.insight-header');
 	for (var j = 0; j < btns.length; j++) {
@@ -612,6 +661,8 @@ h2:first-of-type { margin-top: 48px; }
 			try {
 				var p = JSON.parse(e.data);
 				if (p.html) {
+					// Preserve current theme before replacing body
+					var currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
 					// Only replace the body content to preserve <style> and <script>
 					var d = new DOMParser().parseFromString(p.html, 'text/html');
 					var newBody = d.querySelector('body');
@@ -622,6 +673,17 @@ h2:first-of-type { margin-top: 48px; }
 					if (newTitle) {
 						document.title = newTitle.textContent || document.title;
 					}
+					// 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;
+					update();
 				}
 			} catch(_) {}
 		};

package/extensions/index.ts

@@ -1,7 +1,7 @@
 /**
  * pi-context-map
  * Professional Context Profiler for Pi.
- * v0.4.1 — Fixes session.messages crash, tool registration signature, adds tests.
+ * v0.5.1 — Dynamic context window, dark mode, session-unique reports.
  */
 
 import type {
@@ -14,36 +14,57 @@ import { ReportGenerator } from "./generator";
 import { InsightEngine } from "./insights";
 import { LiveReportServer } from "./live-server";
 import * as path from "node:path";
+import * as fs from "node:fs";
 import * as os from "node:os";
 
-const REPORT_PATH = path.join(
-	os.homedir(),
-	".pi",
-	"context-map",
-	"report.html",
-);
+function makeReportPath(sessionName?: string): string {
+	const dir = path.join(os.homedir(), ".pi", "context-map");
+	if (!fs.existsSync(dir)) {
+		fs.mkdirSync(dir, { recursive: true });
+	}
+	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 filename = `${date}_${time}_${safe}.html`;
+	return path.join(dir, filename);
+}
 
 export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 	const analyzer = new ContextAnalyzer();
 	const liveServer = new LiveReportServer();
 
-	// Accumulate messages from events — this is the correct way to access
-	// session messages in Pi. (pi as any).session?.messages does NOT exist.
 	let sessionMessages: AgentMessage[] = [];
 	let currentTurn = 0;
+	let contextWindow = 128_000;
+	let currentReportPath = makeReportPath();
 
-	// Capture messages before each LLM call
-	pi.on("context", (event: any) => {
+	// Capture messages and context window from Pi system
+	pi.on("context", (event: any, ctx: any) => {
 		if (event?.messages && Array.isArray(event.messages)) {
 			sessionMessages = event.messages;
 		}
+		try {
+			const usage = ctx?.getContextUsage?.();
+			if (usage?.contextWindow && usage.contextWindow > 0) {
+				contextWindow = usage.contextWindow;
+			}
+		} catch {
+			// Keep fallback
+		}
 	});
 
-	// Track turns
 	pi.on("turn_start", () => {
 		currentTurn++;
 	});
 
+	// Update report path when session changes
+	pi.on("session_start", () => {
+		currentReportPath = makeReportPath();
+	});
+
 	async function runAnalysis(): Promise<{
 		composition: ReturnType<typeof analyzer.analyzeByType>;
 		insights: ReturnType<typeof InsightEngine.generate>;
@@ -52,32 +73,31 @@ export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 		const messages = sessionMessages.length > 0 ? sessionMessages : [];
 		const composition = analyzer.analyzeByType(messages, currentTurn);
 		const insights = InsightEngine.generate(composition);
-		const html = ReportGenerator.generateHTML(composition, insights);
+		const html = ReportGenerator.generateHTML(
+			composition,
+			insights,
+			contextWindow,
+		);
 
-		// Write to disk
 		try {
-			const fs = await import("node:fs");
-			const dir = path.dirname(REPORT_PATH);
+			const dir = path.dirname(currentReportPath);
 			if (!fs.existsSync(dir)) {
 				fs.mkdirSync(dir, { recursive: true });
 			}
-			fs.writeFileSync(REPORT_PATH, html, "utf8");
+			fs.writeFileSync(currentReportPath, html, "utf8");
 		} catch (err: any) {
 			console.error(`[pi-context-map] Failed to write report: ${err.message}`);
 		}
 
-		// Push to live server if running
 		if (liveServer.isRunning) {
-			liveServer.update(html, REPORT_PATH);
+			liveServer.update(html, currentReportPath);
 		}
 
-		return { composition, insights, reportPath: REPORT_PATH };
+		return { composition, insights, reportPath: currentReportPath };
 	}
 
-	// Start live server
 	const serverUrl = await liveServer.start();
 
-	// Register /context-map command
 	pi.registerCommand("context-map", {
 		description:
 			"Generate a visual context map with actionable insights. Use 'stop' to terminate the live server.",
@@ -115,7 +135,6 @@ export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 		},
 	});
 
-	// Register the tool for agent use
 	pi.registerTool({
 		name: "context-map",
 		label: "Context Map",
@@ -132,17 +151,17 @@ export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 			_ctx: any,
 		) {
 			try {
-				const { composition, insights } = await runAnalysis();
+				const { composition, insights, reportPath } = await runAnalysis();
 				const usagePercent =
 					composition.total.tokens > 0
-						? Math.round((composition.total.tokens / 128_000) * 100)
+						? Math.round((composition.total.tokens / contextWindow) * 100)
 						: 0;
 				const summary =
 					`Context: ${composition.total.tokens.toLocaleString()} tokens total. ` +
 					`System ${composition.system.percent}%, Tools ${composition.tools.percent}%, ` +
 					`History ${composition.history.percent}%, Files ${composition.files.percent}%, ` +
 					`Summaries ${composition.summaries.percent}%. ` +
-					`Usage: ${usagePercent}% of typical 128k window. ` +
+					`Usage: ${usagePercent}% of ${(contextWindow / 1000).toFixed(0)}k window. ` +
 					`${insights.length} insight(s) generated.`;
 				return {
 					type: "text" as const,
@@ -152,7 +171,8 @@ export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 						...insights.map(
 							(i) => `[${i.severity.toUpperCase()}] ${i.title}: ${i.message}`,
 						),
-						serverUrl ? `Live report: ${serverUrl}` : "",
+						`Report: ${reportPath}`,
+						serverUrl ? `Live: ${serverUrl}` : "",
 					]
 						.filter(Boolean)
 						.join("\n"),
@@ -167,34 +187,30 @@ export default async function piContextMap(pi: ExtensionAPI): Promise<void> {
 		},
 	});
 
-	// Auto-warning on high context before compaction
 	pi.on("session_before_compact", (_event: any, ctx: any) => {
 		const tokens = _event?.preparation?.tokensBefore;
 		if (tokens && tokens > 100_000) {
 			ctx.ui.notify(
-				`High context load detected (${(tokens / 1000).toFixed(1)}k tokens). Try /context-map to see what's consuming space.`,
+				`High context load (${(tokens / 1000).toFixed(1)}k tokens). Try /context-map to see what's consuming space.`,
 				"info",
 			);
 		}
 	});
 
-	// Auto-refresh after each assistant message if server is running
 	pi.on("message_end", async (_event: any) => {
 		if (_event?.message?.role === "assistant" && liveServer.isRunning) {
 			try {
 				await runAnalysis();
 			} catch {
-				// Silently ignore auto-refresh failures
+				// Ignore auto-refresh failures
 			}
 		}
 	});
 
-	// Graceful shutdown
 	pi.on("session_shutdown", () => {
 		liveServer.stop();
 	});
 
-	// Kill server when process exits
 	process.on("exit", () => liveServer.stop());
 	process.on("SIGINT", () => {
 		liveServer.stop();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-context-map",
-  "version": "0.4.4",
+  "version": "0.6.0",
   "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",