@oh-my-pi/pi-coding-agent 8.0.20 → 8.2.0

package/src/migrations.ts

@@ -1,32 +1,31 @@
 /**
  * One-time migrations that run on startup.
  */
-
-import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
-import { AgentStorage } from "@oh-my-pi/pi-coding-agent/session/agent-storage";
-import type { AuthCredential } from "@oh-my-pi/pi-coding-agent/session/auth-storage";
-import { logger } from "@oh-my-pi/pi-utils";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { isEnoent, logger } from "@oh-my-pi/pi-utils";
 import chalk from "chalk";
 import { getAgentDbPath, getAgentDir, getBinDir } from "./config";
+import { AgentStorage } from "./session/agent-storage";
+import type { AuthCredential } from "./session/auth-storage";
 
 /**
  * Migrate legacy oauth.json and settings.json apiKeys to agent.db.
  *
  * @returns Array of provider names that were migrated
  */
-export function migrateAuthToAgentDb(): string[] {
+export async function migrateAuthToAgentDb(): Promise<string[]> {
 	const agentDir = getAgentDir();
-	const oauthPath = join(agentDir, "oauth.json");
-	const settingsPath = join(agentDir, "settings.json");
-	const storage = AgentStorage.open(getAgentDbPath(agentDir));
+	const oauthPath = path.join(agentDir, "oauth.json");
+	const settingsPath = path.join(agentDir, "settings.json");
+	const storage = await AgentStorage.open(getAgentDbPath(agentDir));
 
 	const migrated: Record<string, AuthCredential[]> = {};
 	const providers: string[] = [];
 
-	if (existsSync(oauthPath)) {
+	try {
+		const oauth = await Bun.file(oauthPath).json();
 		try {
-			const oauth = JSON.parse(readFileSync(oauthPath, "utf-8"));
 			for (const [provider, cred] of Object.entries(oauth)) {
 				if (storage.listAuthCredentials(provider).length > 0) {
 					continue;
@@ -34,16 +33,19 @@ export function migrateAuthToAgentDb(): string[] {
 				migrated[provider] = [{ type: "oauth", ...(cred as object) } as AuthCredential];
 				providers.push(provider);
 			}
-			renameSync(oauthPath, `${oauthPath}.migrated`);
+			await fs.promises.rename(oauthPath, `${oauthPath}.migrated`);
 		} catch (error) {
 			logger.warn("Failed to migrate oauth.json", { path: oauthPath, error: String(error) });
 		}
+	} catch (err) {
+		if (!isEnoent(err)) {
+			logger.warn("Failed to read oauth.json", { path: oauthPath, error: String(err) });
+		}
 	}
 
-	if (existsSync(settingsPath)) {
+	try {
+		const settings = await Bun.file(settingsPath).json();
 		try {
-			const content = readFileSync(settingsPath, "utf-8");
-			const settings = JSON.parse(content);
 			if (settings.apiKeys && typeof settings.apiKeys === "object") {
 				for (const [provider, key] of Object.entries(settings.apiKeys)) {
 					if (typeof key !== "string") continue;
@@ -53,11 +55,15 @@ export function migrateAuthToAgentDb(): string[] {
 					providers.push(provider);
 				}
 				delete settings.apiKeys;
-				writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
+				await Bun.write(settingsPath, JSON.stringify(settings, null, 2));
 			}
 		} catch (error) {
 			logger.warn("Failed to migrate settings.json apiKeys", { path: settingsPath, error: String(error) });
 		}
+	} catch (err) {
+		if (!isEnoent(err)) {
+			logger.warn("Failed to read settings.json", { path: settingsPath, error: String(err) });
+		}
 	}
 
 	for (const [provider, credentials] of Object.entries(migrated)) {
@@ -76,15 +82,14 @@ export function migrateAuthToAgentDb(): string[] {
  *
  * See: https://github.com/badlogic/pi-mono/issues/320
  */
-export function migrateSessionsFromAgentRoot(): void {
+export async function migrateSessionsFromAgentRoot(): Promise<void> {
 	const agentDir = getAgentDir();
 
 	// Find all .jsonl files directly in agentDir (not in subdirectories)
 	let files: string[];
 	try {
-		files = readdirSync(agentDir)
-			.filter((f) => f.endsWith(".jsonl"))
-			.map((f) => join(agentDir, f));
+		const entries = await fs.promises.readdir(agentDir);
+		files = entries.filter(f => f.endsWith(".jsonl")).map(f => path.join(agentDir, f));
 	} catch (error) {
 		logger.warn("Failed to read agent directory for session migration", { path: agentDir, error: String(error) });
 		return;
@@ -95,7 +100,13 @@ export function migrateSessionsFromAgentRoot(): void {
 	for (const file of files) {
 		try {
 			// Read first line to get session header
-			const content = readFileSync(file, "utf8");
+			let content: string;
+			try {
+				content = await Bun.file(file).text();
+			} catch (err) {
+				if (isEnoent(err)) continue;
+				throw err;
+			}
 			const firstLine = content.split("\n")[0];
 			if (!firstLine?.trim()) continue;
 
@@ -106,18 +117,18 @@ export function migrateSessionsFromAgentRoot(): void {
 
 			// Compute the correct session directory (same encoding as session-manager.ts)
 			const safePath = `--${cwd.replace(/^[/\\]/, "").replace(/[/\\:]/g, "-")}--`;
-			const correctDir = join(agentDir, "sessions", safePath);
+			const correctDir = path.join(agentDir, "sessions", safePath);
 
 			// Create directory if needed
-			mkdirSync(correctDir, { recursive: true });
+			await fs.promises.mkdir(correctDir, { recursive: true });
 
 			// Move the file
 			const fileName = file.split("/").pop() || file.split("\\").pop();
-			const newPath = join(correctDir, fileName!);
+			const newPath = path.join(correctDir, fileName!);
 
-			if (existsSync(newPath)) continue; // Skip if target exists
+			if (fs.existsSync(newPath)) continue; // Skip if target exists
 
-			renameSync(file, newPath);
+			await fs.promises.rename(file, newPath);
 		} catch (error) {
 			logger.warn("Failed to migrate session file", { path: file, error: String(error) });
 		}
@@ -127,38 +138,38 @@ export function migrateSessionsFromAgentRoot(): void {
 /**
  * Move fd/rg binaries from tools/ to bin/ if they exist.
  */
-function migrateToolsToBin(): void {
+async function migrateToolsToBin(): Promise<void> {
 	const agentDir = getAgentDir();
-	const toolsDir = join(agentDir, "tools");
+	const toolsDir = path.join(agentDir, "tools");
 	const binDir = getBinDir();
 
-	if (!existsSync(toolsDir)) return;
+	if (!fs.existsSync(toolsDir)) return;
 
 	const binaries = ["fd", "rg", "fd.exe", "rg.exe"];
 	let movedAny = false;
 
 	for (const bin of binaries) {
-		const oldPath = join(toolsDir, bin);
-		const newPath = join(binDir, bin);
+		const oldPath = path.join(toolsDir, bin);
+		const newPath = path.join(binDir, bin);
+		if (!fs.existsSync(oldPath)) continue;
+
+		if (!fs.existsSync(binDir)) {
+			await fs.promises.mkdir(binDir, { recursive: true });
+		}
 
-		if (existsSync(oldPath)) {
-			if (!existsSync(binDir)) {
-				mkdirSync(binDir, { recursive: true });
+		if (!fs.existsSync(newPath)) {
+			try {
+				await fs.promises.rename(oldPath, newPath);
+				movedAny = true;
+			} catch (error) {
+				logger.warn("Failed to migrate binary", { from: oldPath, to: newPath, error: String(error) });
 			}
-			if (!existsSync(newPath)) {
-				try {
-					renameSync(oldPath, newPath);
-					movedAny = true;
-				} catch (error) {
-					logger.warn("Failed to migrate binary", { from: oldPath, to: newPath, error: String(error) });
-				}
-			} else {
-				// Target exists, just delete the old one
-				try {
-					rmSync(oldPath, { force: true });
-				} catch {
-					// Ignore
-				}
+		} else {
+			// Target exists, just delete the old one
+			try {
+				await fs.promises.rm(oldPath, { force: true });
+			} catch {
+				// Ignore
 			}
 		}
 	}
@@ -179,9 +190,9 @@ export async function runMigrations(_cwd: string): Promise<{
 	deprecationWarnings: string[];
 }> {
 	// Then: run data migrations
-	const migratedAuthProviders = migrateAuthToAgentDb();
-	migrateSessionsFromAgentRoot();
-	migrateToolsToBin();
+	const migratedAuthProviders = await migrateAuthToAgentDb();
+	await migrateSessionsFromAgentRoot();
+	await migrateToolsToBin();
 
 	return { migratedAuthProviders, deprecationWarnings: [] };
 }

package/src/modes/components/armin.ts

@@ -1,9 +1,8 @@
 /**
  * Armin says hi! A fun easter egg with animated XBM art.
  */
-
-import { theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import type { Component, TUI } from "@oh-my-pi/pi-tui";
+import { theme } from "../../modes/theme/theme";
 
 // XBM image: 31x36 pixels, LSB first, 1=background, 0=foreground
 const WIDTH = 31;
@@ -91,7 +90,7 @@ export class ArminComponent implements Component {
 		const padding = 1;
 		const availableWidth = width - padding;
 
-		this.cachedLines = this.currentGrid.map((row) => {
+		this.cachedLines = this.currentGrid.map(row => {
 			// Clip row to available width before applying color
 			const clipped = row.slice(0, availableWidth).join("");
 			const padRight = Math.max(0, width - padding - clipped.length);
@@ -332,7 +331,7 @@ export class ArminComponent implements Component {
 
 		if (state.phase < state.glitchFrames) {
 			// Glitch phase: show corrupted version
-			this.currentGrid = this.finalGrid.map((row) => {
+			this.currentGrid = this.finalGrid.map(row => {
 				const offset = Math.floor(Math.random() * 7) - 3;
 				const glitchRow = [...row];
 
@@ -355,7 +354,7 @@ export class ArminComponent implements Component {
 		}
 
 		// Final frame: show clean image
-		this.currentGrid = this.finalGrid.map((row) => [...row]);
+		this.currentGrid = this.finalGrid.map(row => [...row]);
 		return true;
 	}
 

package/src/modes/components/assistant-message.ts

@@ -1,6 +1,7 @@
 import type { AssistantMessage } from "@oh-my-pi/pi-ai";
-import { getMarkdownTheme, theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
-import { Container, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { Container, getCapabilities, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { hasPendingMermaid, prerenderMermaid } from "../../modes/theme/mermaid-cache";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
 
 /**
  * Component that renders a complete assistant message
@@ -9,6 +10,7 @@ export class AssistantMessageComponent extends Container {
 	private contentContainer: Container;
 	private hideThinkingBlock: boolean;
 	private lastMessage?: AssistantMessage;
+	private prerenderInFlight = false;
 
 	constructor(message?: AssistantMessage, hideThinkingBlock = false) {
 		super();
@@ -35,14 +37,40 @@ export class AssistantMessageComponent extends Container {
 		this.hideThinkingBlock = hide;
 	}
 
+	private triggerMermaidPrerender(message: AssistantMessage): void {
+		const caps = getCapabilities();
+		if (!caps.images || this.prerenderInFlight) return;
+
+		// Check if any text content has pending mermaid blocks
+		const hasPending = message.content.some(c => c.type === "text" && c.text.trim() && hasPendingMermaid(c.text));
+		if (!hasPending) return;
+
+		this.prerenderInFlight = true;
+
+		// Fire off background prerender
+		(async () => {
+			for (const content of message.content) {
+				if (content.type === "text" && content.text.trim() && hasPendingMermaid(content.text)) {
+					await prerenderMermaid(content.text);
+				}
+			}
+			this.prerenderInFlight = false;
+			// Invalidate to re-render with cached images
+			this.invalidate();
+		})();
+	}
+
 	updateContent(message: AssistantMessage): void {
 		this.lastMessage = message;
 
 		// Clear content container
 		this.contentContainer.clear();
 
+		// Trigger background mermaid pre-rendering if needed
+		this.triggerMermaidPrerender(message);
+
 		const hasVisibleContent = message.content.some(
-			(c) => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()),
+			c => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()),
 		);
 
 		if (hasVisibleContent) {
@@ -58,7 +86,7 @@ export class AssistantMessageComponent extends Container {
 				this.contentContainer.addChild(new Markdown(content.text.trim(), 1, 0, getMarkdownTheme()));
 			} else if (content.type === "thinking" && content.thinking.trim()) {
 				// Check if there's text content after this thinking block
-				const hasTextAfter = message.content.slice(i + 1).some((c) => c.type === "text" && c.text.trim());
+				const hasTextAfter = message.content.slice(i + 1).some(c => c.type === "text" && c.text.trim());
 
 				if (this.hideThinkingBlock) {
 					// Show static "Thinking..." label when hidden
@@ -81,7 +109,7 @@ export class AssistantMessageComponent extends Container {
 
 		// Check if aborted - show after partial content
 		// But only if there are no tool calls (tool execution components will show the error)
-		const hasToolCalls = message.content.some((c) => c.type === "toolCall");
+		const hasToolCalls = message.content.some(c => c.type === "toolCall");
 		if (!hasToolCalls) {
 			if (message.stopReason === "aborted") {
 				const abortMessage =

package/src/modes/components/bash-execution.ts

@@ -1,12 +1,11 @@
 /**
  * Component for displaying bash command execution with streaming output.
  */
-
-import { getSymbolTheme, theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
-import type { TruncationMeta } from "@oh-my-pi/pi-coding-agent/tools/output-meta";
-import { formatSize } from "@oh-my-pi/pi-coding-agent/tools/truncate";
 import { Container, Loader, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
 import stripAnsi from "strip-ansi";
+import { getSymbolTheme, theme } from "../../modes/theme/theme";
+import type { TruncationMeta } from "../../tools/output-meta";
+import { formatSize } from "../../tools/truncate";
 import { DynamicBorder } from "./dynamic-border";
 import { truncateToVisualLines } from "./visual-truncate";
 
@@ -48,8 +47,8 @@ export class BashExecutionComponent extends Container {
 		// Loader
 		this.loader = new Loader(
 			ui,
-			(spinner) => theme.fg(colorKey, spinner),
-			(text) => theme.fg("muted", text),
+			spinner => theme.fg(colorKey, spinner),
+			text => theme.fg("muted", text),
 			`Running${theme.format.ellipsis} (esc to cancel)`,
 			getSymbolTheme().spinnerFrames,
 		);
@@ -128,11 +127,11 @@ export class BashExecutionComponent extends Container {
 		if (availableLines.length > 0) {
 			if (this.expanded) {
 				// Show all lines
-				const displayText = availableLines.map((line) => theme.fg("muted", line)).join("\n");
+				const displayText = availableLines.map(line => theme.fg("muted", line)).join("\n");
 				this.contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
 			} else {
 				// Use shared visual truncation utility, recomputed per render width
-				const styledOutput = previewLogicalLines.map((line) => theme.fg("muted", line)).join("\n");
+				const styledOutput = previewLogicalLines.map(line => theme.fg("muted", line)).join("\n");
 				const previewText = `\n${styledOutput}`;
 				this.contentContainer.addChild({
 					render: (width: number) => {

package/src/modes/components/bordered-loader.ts

@@ -1,5 +1,5 @@
-import type { Theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import { CancellableLoader, Container, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import type { Theme } from "../../modes/theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 /** Loader wrapped with borders for hook UI */
@@ -12,8 +12,8 @@ export class BorderedLoader extends Container {
 		this.addChild(new DynamicBorder(borderColor));
 		this.loader = new CancellableLoader(
 			tui,
-			(s) => theme.fg("accent", s),
-			(s) => theme.fg("muted", s),
+			s => theme.fg("accent", s),
+			s => theme.fg("muted", s),
 			message,
 		);
 		this.addChild(this.loader);

package/src/modes/components/branch-summary-message.ts

@@ -1,6 +1,6 @@
-import { getMarkdownTheme, theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
-import type { BranchSummaryMessage } from "@oh-my-pi/pi-coding-agent/session/messages";
 import { Box, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { BranchSummaryMessage } from "../../session/messages";
 
 /**
  * Component that renders a branch summary message with collapsed/expanded state.
@@ -11,7 +11,7 @@ export class BranchSummaryMessageComponent extends Box {
 	private message: BranchSummaryMessage;
 
 	constructor(message: BranchSummaryMessage) {
-		super(1, 1, (t) => theme.bg("customMessageBg", t));
+		super(1, 1, t => theme.bg("customMessageBg", t));
 		this.message = message;
 		this.updateDisplay();
 	}

package/src/modes/components/compaction-summary-message.ts

@@ -1,6 +1,6 @@
-import { getMarkdownTheme, theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
-import type { CompactionSummaryMessage } from "@oh-my-pi/pi-coding-agent/session/messages";
 import { Box, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { CompactionSummaryMessage } from "../../session/messages";
 
 /**
  * Component that renders a compaction message with collapsed/expanded state.
@@ -11,7 +11,7 @@ export class CompactionSummaryMessageComponent extends Box {
 	private message: CompactionSummaryMessage;
 
 	constructor(message: CompactionSummaryMessage) {
-		super(1, 1, (t) => theme.bg("customMessageBg", t));
+		super(1, 1, t => theme.bg("customMessageBg", t));
 		this.message = message;
 		this.updateDisplay();
 	}

package/src/modes/components/countdown-timer.ts

@@ -1,7 +1,6 @@
 /**
  * Reusable countdown timer for dialog components.
  */
-
 import type { TUI } from "@oh-my-pi/pi-tui";
 
 export class CountdownTimer {

package/src/modes/components/custom-message.ts

@@ -1,9 +1,9 @@
 import type { TextContent } from "@oh-my-pi/pi-ai";
-import type { MessageRenderer } from "@oh-my-pi/pi-coding-agent/extensibility/extensions/types";
-import { getMarkdownTheme, theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
-import type { CustomMessage } from "@oh-my-pi/pi-coding-agent/session/messages";
 import type { Component } from "@oh-my-pi/pi-tui";
 import { Box, Container, Markdown, Spacer, Text } from "@oh-my-pi/pi-tui";
+import type { MessageRenderer } from "../../extensibility/extensions/types";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { CustomMessage } from "../../session/messages";
 
 /**
  * Component that renders a custom message entry from extensions.
@@ -24,7 +24,7 @@ export class CustomMessageComponent extends Container {
 		this.addChild(new Spacer(1));
 
 		// Create box with custom background (used for default rendering)
-		this.box = new Box(1, 1, (t) => theme.bg("customMessageBg", t));
+		this.box = new Box(1, 1, t => theme.bg("customMessageBg", t));
 
 		this.rebuild();
 	}
@@ -79,7 +79,7 @@ export class CustomMessageComponent extends Container {
 		} else {
 			text = this.message.content
 				.filter((c): c is TextContent => c.type === "text")
-				.map((c) => c.text)
+				.map(c => c.text)
 				.join("\n");
 		}
 

package/src/modes/components/diff.ts

@@ -1,5 +1,5 @@
-import { theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import * as Diff from "diff";
+import { theme } from "../../modes/theme/theme";
 
 /**
  * Parse diff line to extract prefix, line number, and content.

package/src/modes/components/dynamic-border.ts

@@ -1,5 +1,5 @@
-import { theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import type { Component } from "@oh-my-pi/pi-tui";
+import { theme } from "../../modes/theme/theme";
 
 /**
  * Dynamic border component that adjusts to viewport width.
@@ -11,7 +11,7 @@ import type { Component } from "@oh-my-pi/pi-tui";
 export class DynamicBorder implements Component {
 	private color: (str: string) => string;
 
-	constructor(color: (str: string) => string = (str) => theme.fg("border", str)) {
+	constructor(color: (str: string) => string = str => theme.fg("border", str)) {
 		this.color = color;
 	}
 

package/src/modes/components/extensions/extension-dashboard.ts

@@ -11,11 +11,10 @@
  * - Space: Toggle selected item (or master switch)
  * - Esc: Close dashboard (clears search first if active)
  */
-
-import type { SettingsManager } from "@oh-my-pi/pi-coding-agent/config/settings-manager";
-import { DynamicBorder } from "@oh-my-pi/pi-coding-agent/modes/components/dynamic-border";
-import { theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import { type Component, Container, matchesKey, Spacer, Text, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import type { SettingsManager } from "../../../config/settings-manager";
+import { DynamicBorder } from "../../../modes/components/dynamic-border";
+import { theme } from "../../../modes/theme/theme";
 import { ExtensionList } from "./extension-list";
 import { InspectorPanel } from "./inspector-panel";
 import { applyFilter, createInitialState, filterByProvider, refreshState, toggleProvider } from "./state-manager";
@@ -60,14 +59,14 @@ export class ExtensionDashboard extends Container {
 		this.mainList = new ExtensionList(
 			this.state.searchFiltered,
 			{
-				onSelectionChange: (ext) => {
+				onSelectionChange: ext => {
 					this.state.selected = ext;
 					this.inspector.setExtension(ext);
 				},
 				onToggle: (extensionId, enabled) => {
 					this.handleExtensionToggle(extensionId, enabled);
 				},
-				onMasterToggle: (providerId) => {
+				onMasterToggle: providerId => {
 					this.handleProviderToggle(providerId);
 				},
 				masterSwitchProvider: this.getActiveProviderId(),
@@ -176,7 +175,7 @@ export class ExtensionDashboard extends Container {
 
 		// Find the same tab in the new (re-sorted) list
 		if (currentTabId) {
-			const newIndex = this.state.tabs.findIndex((t) => t.id === currentTabId);
+			const newIndex = this.state.tabs.findIndex(t => t.id === currentTabId);
 			if (newIndex >= 0) {
 				this.state.activeTabIndex = newIndex;
 			}

package/src/modes/components/extensions/extension-list.ts

@@ -5,10 +5,9 @@
  * that toggles the entire provider. All items below are dimmed when the
  * master switch is off.
  */
-
-import { isProviderEnabled } from "@oh-my-pi/pi-coding-agent/discovery";
-import { theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
 import { type Component, matchesKey, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import { isProviderEnabled } from "../../../discovery";
+import { theme } from "../../../modes/theme/theme";
 import { applyFilter } from "./state-manager";
 import type { Extension, ExtensionKind, ExtensionState } from "./types";
 

package/src/modes/components/extensions/inspector-panel.ts

@@ -3,10 +3,9 @@
  *
  * Shows name, description, origin, status, and kind-specific preview.
  */
-
-import { homedir } from "node:os";
-import { theme } from "@oh-my-pi/pi-coding-agent/modes/theme/theme";
+import * as os from "node:os";
 import { type Component, truncateToWidth, wrapTextWithAnsi } from "@oh-my-pi/pi-tui";
+import { theme } from "../../../modes/theme/theme";
 import type { Extension, ExtensionState } from "./types";
 
 export class InspectorPanel implements Component {
@@ -304,7 +303,7 @@ export class InspectorPanel implements Component {
 	}
 
 	private shortenPath(path: string): string {
-		const home = homedir();
+		const home = os.homedir();
 		if (home && path.startsWith(home)) {
 			return `~${path.slice(home.length)}`;
 		}