pi-inspect 0.3.0 → 0.4.0

package/extensions/inspect.ts

@@ -1,10 +1,31 @@
 import { spawn, spawnSync, type ChildProcess } from "node:child_process";
-import { mkdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import {
+	mkdirSync,
+	readdirSync,
+	readFileSync,
+	renameSync,
+	statSync,
+	unlinkSync,
+	watch as fsWatch,
+	writeFileSync,
+	type FSWatcher,
+} from "node:fs";
 import { createConnection } from "node:net";
 import { homedir } from "node:os";
-import { join as joinPath, resolve as resolvePath } from "node:path";
+import {
+	dirname,
+	join as joinPath,
+	relative as relativePath,
+	resolve as resolvePath,
+} from "node:path";
 import { fileURLToPath } from "node:url";
-import { type ExtensionAPI, parseFrontmatter } from "@earendil-works/pi-coding-agent";
+import {
+	DefaultPackageManager,
+	type ExtensionAPI,
+	parseFrontmatter,
+	type ResolvedResource,
+	SettingsManager,
+} from "@earendil-works/pi-coding-agent";
 
 const extDir = fileURLToPath(new URL(".", import.meta.url));
 const port = 5462;
@@ -13,6 +34,8 @@ const url = `http://localhost:${port}`;
 const INSPECT_DIR = joinPath(homedir(), ".pi", "agent", "inspect");
 const SNAP_DIR = joinPath(INSPECT_DIR, "snapshots");
 const INDEX_PATH = joinPath(SNAP_DIR, "index.json");
+const REQ_DIR = joinPath(INSPECT_DIR, "requests");
+const REQ_STALE_MS = 60 * 60 * 1000; // 1 hour
 
 let child: ChildProcess | null = null;
 let lastStderr = "";
@@ -100,7 +123,7 @@ function writeSnapshot(id: string, snapshot: unknown): void {
 	writeFileSync(joinPath(SNAP_DIR, `${sanitize(id)}.json`), JSON.stringify(snapshot, null, 2), "utf8");
 }
 
-type DisabledKind = "command" | "skill" | "extension" | "theme";
+type DisabledKind = "command" | "prompt" | "skill" | "extension" | "theme";
 type DisabledScope = "user" | "project";
 type DisabledItem = {
 	kind: DisabledKind;
@@ -112,29 +135,23 @@ type DisabledItem = {
 	settingsPath: string;
 	path: string;
 	reason: string;
+	resourceKind: ResourceKind;
+	baseDir: string;
 };
 
 const AGENT_DIR = joinPath(homedir(), ".pi", "agent");
 const SETTINGS_PATH = joinPath(AGENT_DIR, "settings.json");
-const NPM_ROOT = joinPath(AGENT_DIR, "npm", "node_modules");
 
-type FilterKind = "prompts" | "skills" | "extensions" | "themes";
-const FILTER_KINDS: readonly FilterKind[] = ["prompts", "skills", "extensions", "themes"];
+type ResourceKind = "skills" | "prompts" | "extensions" | "themes";
+const RESOURCE_KINDS: readonly ResourceKind[] = ["skills", "prompts", "extensions", "themes"];
 
-const KIND_CFG: Record<FilterKind, { kind: DisabledKind; stripExt: RegExp; display: (n: string) => string }> = {
-	prompts:    { kind: "command",   stripExt: /\.md$/i,                  display: (n) => `/${n}` },
-	skills:     { kind: "skill",     stripExt: /\.md$/i,                  display: (n) => `/skill:${n}` },
-	extensions: { kind: "extension", stripExt: /\.(ts|js|mjs|cjs)$/i,     display: (n) => n },
-	themes:     { kind: "theme",     stripExt: /\.(json|toml|ya?ml)$/i,   display: (n) => n },
+const KIND_MAP: Record<ResourceKind, { kind: DisabledKind; display: (n: string) => string }> = {
+	prompts:    { kind: "prompt",    display: (n) => `/${n}` },
+	skills:     { kind: "skill",     display: (n) => `/skill:${n}` },
+	extensions: { kind: "extension", display: (n) => n },
+	themes:     { kind: "theme",     display: (n) => n },
 };
 
-function resolvePackageRoot(source: string): string | null {
-	if (source.startsWith("npm:")) return joinPath(NPM_ROOT, source.slice(4));
-	let s = source.replace(/\\/g, "/");
-	if (s.startsWith("~/")) s = joinPath(homedir(), s.slice(2));
-	try { return statSync(s).isDirectory() ? s : null; } catch { return null; }
-}
-
 function sourceLabel(source: string): string {
 	if (source.startsWith("npm:")) return source.slice(4);
 	const norm = source.replace(/\\/g, "/").replace(/\/$/, "");
@@ -143,8 +160,7 @@ function sourceLabel(source: string): string {
 
 const describeCache = new Map<string, { mtimeMs: number; desc: string }>();
 
-function describeFrom(filePath: string, isDir: boolean): string {
-	const path = isDir ? joinPath(filePath, "SKILL.md") : filePath;
+function describeFromPath(path: string): string {
 	let mtimeMs: number;
 	try { mtimeMs = statSync(path).mtimeMs; } catch { return ""; }
 	const cached = describeCache.get(path);
@@ -160,102 +176,235 @@ function describeFrom(filePath: string, isDir: boolean): string {
 	return desc;
 }
 
-function nameFromRel(filterKind: FilterKind, rel: string): string {
-	const base = rel.split("/").pop() ?? rel;
-	if (filterKind === "skills" && /SKILL\.md$/i.test(base)) {
-		const parent = rel.replace(/\/SKILL\.md$/i, "").split("/").pop();
-		return parent ?? base;
+function nameFromPath(kind: ResourceKind, path: string): string {
+	const norm = path.replace(/\\/g, "/");
+	const base = norm.split("/").pop() ?? norm;
+	if (kind === "skills" && /^SKILL\.md$/i.test(base)) {
+		const parts = norm.split("/");
+		return parts[parts.length - 2] ?? base;
 	}
-	return base.replace(KIND_CFG[filterKind].stripExt, "");
+	return base.replace(/\.(md|ts|js|mjs|cjs|json|toml|ya?ml)$/i, "");
 }
 
-type GroupCtx = {
-	root: string;
-	label: string;
-	scope: DisabledScope;
-	settingsPath: string;
-};
-
-function pushDisabled(
-	items: DisabledItem[],
-	filterKind: FilterKind,
-	raw: unknown,
-	ctx: GroupCtx,
-): void {
-	if (typeof raw !== "string" || !raw.startsWith("-")) return;
-	const rel = raw.slice(1).replace(/\\/g, "/");
-	const filePath = joinPath(ctx.root, rel);
-	let isDir = false;
-	try { isDir = statSync(filePath).isDirectory(); } catch { return; }
-	const cfg = KIND_CFG[filterKind];
-	const name = nameFromRel(filterKind, rel);
-	items.push({
+function buildItemFromResource(
+	kind: ResourceKind,
+	r: ResolvedResource,
+	sessionCwd: string,
+): DisabledItem {
+	const md = r.metadata;
+	const scope: DisabledScope = md.scope === "project" ? "project" : "user";
+	const label = md.origin === "package" ? sourceLabel(md.source) : scope;
+	const name = nameFromPath(kind, r.path);
+	const cfg = KIND_MAP[kind];
+	return {
 		kind: cfg.kind,
 		name,
 		displayName: cfg.display(name),
-		description: describeFrom(filePath, isDir),
-		source: ctx.label,
-		scope: ctx.scope,
-		settingsPath: ctx.settingsPath,
-		path: filePath,
-		reason: raw,
-	});
+		description: describeFromPath(r.path),
+		source: label,
+		scope,
+		settingsPath: scope === "project" ? joinPath(sessionCwd, ".pi", "settings.json") : SETTINGS_PATH,
+		path: r.path,
+		reason: md.source,
+		resourceKind: kind,
+		baseDir: md.baseDir ?? AGENT_DIR,
+	};
 }
 
-function collectGroup(items: DisabledItem[], group: any, ctx: GroupCtx): void {
-	for (const filterKind of FILTER_KINDS) {
-		const arr = group?.[filterKind];
-		if (!Array.isArray(arr)) continue;
-		for (const raw of arr) pushDisabled(items, filterKind, raw, ctx);
+type ResourceListing = { disabled: DisabledItem[]; pending: DisabledItem[] };
+
+async function discoverFromPackages(
+	cwd: string | null,
+	activePaths: Set<string>,
+): Promise<ResourceListing> {
+	const sessionCwd = cwd ?? process.cwd();
+	const sm = SettingsManager.create(sessionCwd, AGENT_DIR);
+	const pm = new DefaultPackageManager({ cwd: sessionCwd, agentDir: AGENT_DIR, settingsManager: sm });
+	let resolved;
+	try {
+		resolved = await pm.resolve(async () => "skip");
+	} catch (e: any) {
+		console.warn(`pi-inspect: package resolve failed: ${e?.message ?? e}`);
+		return { disabled: [], pending: [] };
+	}
+
+	const disabledByPath = new Map<string, DisabledItem>();
+	const pendingByPath = new Map<string, DisabledItem>();
+	// Pending detection only makes sense for resources with a 1:1 path→command mapping.
+	// Extensions register tools at different paths, themes don't appear as commands at all.
+	const PENDABLE: ReadonlySet<ResourceKind> = new Set(["skills", "prompts"]);
+	for (const kind of RESOURCE_KINDS) {
+		const list = resolved[kind] as ResolvedResource[];
+		for (const r of list) {
+			const item = buildItemFromResource(kind, r, sessionCwd);
+			if (!r.enabled) {
+				disabledByPath.set(r.path, item);
+			} else if (
+				PENDABLE.has(kind) &&
+				!activePaths.has(r.path.replace(/\\/g, "/").toLowerCase())
+			) {
+				// Resolved-enabled but pi's boot-frozen command map doesn't have it yet.
+				pendingByPath.set(r.path, item);
+			}
+		}
 	}
+	return { disabled: [...disabledByPath.values()], pending: [...pendingByPath.values()] };
 }
 
-const settingsCache = new Map<string, { mtimeMs: number; items: DisabledItem[] }>();
+type ToggleRequest = {
+	id: string;
+	ts: number;
+	action: "enable" | "disable";
+	resourceKind: ResourceKind;
+	path: string;
+	scope: DisabledScope;
+};
 
-function readDisabledFrom(
-	settingsPath: string,
-	baseDir: string,
-	scope: DisabledScope,
-): DisabledItem[] {
-	let mtimeMs: number;
-	try { mtimeMs = statSync(settingsPath).mtimeMs; } catch { return []; }
-	const cached = settingsCache.get(settingsPath);
-	if (cached && cached.mtimeMs === mtimeMs) return cached.items;
-
-	let settings: any;
-	try { settings = JSON.parse(readFileSync(settingsPath, "utf8")); } catch { return []; }
-	const items: DisabledItem[] = [];
-
-	collectGroup(items, settings, { root: baseDir, label: scope, scope, settingsPath });
-
-	const packages = Array.isArray(settings?.packages) ? settings.packages : [];
-	for (const entry of packages) {
-		if (!entry || typeof entry !== "object" || Array.isArray(entry)) continue;
-		const source = String(entry.source ?? "");
-		if (!source) continue;
-		const root = resolvePackageRoot(source);
-		if (!root) continue;
-		collectGroup(items, entry, { root, label: sourceLabel(source), scope, settingsPath });
+function normPath(p: string): string {
+	return resolvePath(p).replace(/\\/g, "/").toLowerCase();
+}
+
+function ensureReqDir(): void {
+	mkdirSync(REQ_DIR, { recursive: true });
+}
+
+function sweepStaleRequests(): void {
+	let entries: string[];
+	try { entries = readdirSync(REQ_DIR); } catch { return; }
+	const now = Date.now();
+	for (const f of entries) {
+		const full = joinPath(REQ_DIR, f);
+		try {
+			const st = statSync(full);
+			if (now - st.mtimeMs > REQ_STALE_MS) unlinkSync(full);
+		} catch {}
 	}
-	settingsCache.set(settingsPath, { mtimeMs, items });
-	return items;
 }
 
-function discoverDisabledFromPackages(cwd: string | null): DisabledItem[] {
-	const scopes: { settings: string; base: string; scope: DisabledScope }[] = [
-		{ settings: SETTINGS_PATH, base: AGENT_DIR, scope: "user" },
-	];
-	if (cwd) scopes.push({ settings: joinPath(cwd, ".pi", "settings.json"), base: joinPath(cwd, ".pi"), scope: "project" });
+// Mirrors the toggle logic in pi-coding-agent's ConfigSelectorComponent
+// (modes/interactive/components/config-selector.js). Strips any existing
+// `+`/`-`/`!` entries for the pattern, then appends the new one.
+function applyPattern(arr: string[], pattern: string, enabled: boolean): string[] {
+	const filtered = arr.filter((p) => {
+		const stripped = p.startsWith("!") || p.startsWith("+") || p.startsWith("-") ? p.slice(1) : p;
+		return stripped !== pattern;
+	});
+	filtered.push(enabled ? `+${pattern}` : `-${pattern}`);
+	return filtered;
+}
+
+async function processToggleRequest(req: ToggleRequest, sessionCwd: string): Promise<void> {
+	const sm = SettingsManager.create(sessionCwd, AGENT_DIR);
+	const pm = new DefaultPackageManager({ cwd: sessionCwd, agentDir: AGENT_DIR, settingsManager: sm });
+	const resolved = await pm.resolve(async () => "skip");
+	const list = resolved[req.resourceKind] as ResolvedResource[];
+	const target = list.find((r) => normPath(r.path) === normPath(req.path));
+	if (!target) throw new Error(`resource not in resolution: ${req.path}`);
+	const md = target.metadata;
+	const enabled = req.action === "enable";
+	const scope: DisabledScope = md.scope === "project" ? "project" : "user";
+
+	if (md.origin === "package") {
+		const baseDir = md.baseDir ?? dirname(target.path);
+		const pattern = relativePath(baseDir, target.path);
+		const settings = scope === "project" ? sm.getProjectSettings() : sm.getGlobalSettings();
+		const packages = [...(settings.packages ?? [])];
+		const idx = packages.findIndex((p) => (typeof p === "string" ? p : p.source) === md.source);
+		if (idx < 0) throw new Error(`package not found in settings: ${md.source}`);
+		let pkg = packages[idx];
+		if (typeof pkg === "string") {
+			pkg = { source: pkg };
+			packages[idx] = pkg;
+		}
+		const arrayKey = req.resourceKind as keyof typeof pkg & ("extensions" | "skills" | "prompts" | "themes");
+		const current = ((pkg as any)[arrayKey] as string[] | undefined) ?? [];
+		const updated = applyPattern(current, pattern, enabled);
+		(pkg as any)[arrayKey] = updated.length > 0 ? updated : undefined;
+		const hasFilters = (["extensions", "skills", "prompts", "themes"] as const).some(
+			(k) => (pkg as any)[k] !== undefined,
+		);
+		if (!hasFilters) packages[idx] = (pkg as any).source;
+		if (scope === "project") sm.setProjectPackages(packages);
+		else sm.setPackages(packages);
+		await sm.flush();
+		return;
+	}
+
+	// top-level
+	const baseDir = scope === "project" ? joinPath(sessionCwd, ".pi") : AGENT_DIR;
+	const pattern = relativePath(baseDir, target.path);
+	const settings = scope === "project" ? sm.getProjectSettings() : sm.getGlobalSettings();
+	const current = ((settings as any)[req.resourceKind] as string[] | undefined) ?? [];
+	const updated = applyPattern(current, pattern, enabled);
+	const setters: Record<ResourceKind, { user: string; project: string }> = {
+		skills:     { user: "setSkillPaths",          project: "setProjectSkillPaths" },
+		prompts:    { user: "setPromptTemplatePaths", project: "setProjectPromptTemplatePaths" },
+		extensions: { user: "setExtensionPaths",      project: "setProjectExtensionPaths" },
+		themes:     { user: "setThemePaths",          project: "setProjectThemePaths" },
+	};
+	(sm as any)[setters[req.resourceKind][scope]](updated);
+	await sm.flush();
+}
+
+let lastCtx: any = null;
+let reqWatcher: FSWatcher | null = null;
+const recentlyHandled = new Set<string>();
+
+async function handleRequestFile(full: string): Promise<void> {
+	if (recentlyHandled.has(full)) return;
+	recentlyHandled.add(full);
+	setTimeout(() => recentlyHandled.delete(full), 5000);
+
+	let raw: string;
+	try { raw = readFileSync(full, "utf8"); } catch { return; }
+	if (!raw.trim()) return;
+	let req: ToggleRequest;
+	try { req = JSON.parse(raw) as ToggleRequest; } catch (e: any) {
+		console.warn(`pi-inspect: bad request file ${full}: ${e?.message ?? e}`);
+		try { renameSync(full, `${full}.err.json`); } catch {}
+		return;
+	}
+
+	const cwd = lastCtx?.sessionManager?.getCwd?.() ?? process.cwd();
+	try {
+		await processToggleRequest(req, cwd);
+		try { unlinkSync(full); } catch {}
+		if (lastCtx) await captureSnapshot(lastCtx);
+	} catch (e: any) {
+		console.warn(`pi-inspect: toggle failed: ${e?.message ?? e}`);
+		try {
+			writeFileSync(`${full}.err.json`, JSON.stringify({ error: e?.message ?? String(e), req }, null, 2));
+			unlinkSync(full);
+		} catch {}
+	}
+}
 
-	// Project overrides user when both disable the same path.
-	const byPath = new Map<string, DisabledItem>();
-	for (const { settings, base, scope } of scopes) {
-		for (const it of readDisabledFrom(settings, base, scope)) byPath.set(it.path, it);
+function setupRequestWatcher(): void {
+	ensureReqDir();
+	sweepStaleRequests();
+	// Drain orphans at startup
+	try {
+		for (const f of readdirSync(REQ_DIR)) {
+			if (f.endsWith(".err.json") || !f.endsWith(".json")) continue;
+			void handleRequestFile(joinPath(REQ_DIR, f));
+		}
+	} catch {}
+	if (reqWatcher) return;
+	try {
+		reqWatcher = fsWatch(REQ_DIR, (_event, filename) => {
+			if (!filename) return;
+			const name = String(filename);
+			if (!name.endsWith(".json") || name.endsWith(".err.json")) return;
+			const full = joinPath(REQ_DIR, name);
+			try { statSync(full); } catch { return; }
+			void handleRequestFile(full);
+		});
+	} catch (e: any) {
+		console.warn(`pi-inspect: request watcher failed: ${e?.message ?? e}`);
 	}
-	return [...byPath.values()];
 }
 
-function captureSnapshot(ctx: any): { id: string; entry: IndexEntry } | null {
+async function captureSnapshot(ctx: any): Promise<{ id: string; entry: IndexEntry } | null> {
 	const sm = ctx.sessionManager;
 	const id = sm?.getSessionId?.();
 	if (!id) return null;
@@ -267,9 +416,18 @@ function captureSnapshot(ctx: any): { id: string; entry: IndexEntry } | null {
 	const commands = typeof pi?.getCommands === "function" ? pi.getCommands() : [];
 	const tools = typeof pi?.getAllTools === "function" ? pi.getAllTools() : [];
 	const activeTools = typeof pi?.getActiveTools === "function" ? pi.getActiveTools() : [];
-	const disabledItems = discoverDisabledFromPackages(cwd);
+	const activePaths = new Set<string>();
+	for (const c of commands) {
+		const p = c?.sourceInfo?.path;
+		if (typeof p === "string") activePaths.add(p.replace(/\\/g, "/").toLowerCase());
+	}
+	for (const t of tools) {
+		const p = t?.sourceInfo?.path;
+		if (typeof p === "string") activePaths.add(p.replace(/\\/g, "/").toLowerCase());
+	}
+	const { disabled: disabledItems, pending: pendingItems } = await discoverFromPackages(cwd, activePaths);
 	const capturedAt = Date.now();
-	const snap = { sessionId: id, sessionName: name, cwd, model, systemPrompt, commands, tools, activeTools, disabledItems, capturedAt };
+	const snap = { sessionId: id, sessionName: name, cwd, model, systemPrompt, commands, tools, activeTools, disabledItems, pendingItems, capturedAt };
 	try {
 		writeSnapshot(id, snap);
 		upsertIndex({ id, cwd, name, model, capturedAt });
@@ -339,13 +497,16 @@ function showHelp(notify: (m: string, l?: "info" | "error") => void) {
 
 export default function inspectExtension(pi: ExtensionAPI) {
 	piRef = pi;
+	setupRequestWatcher();
 	pi.on("session_start", async (_event, ctx) => {
-		captureSnapshot(ctx);
+		lastCtx = ctx;
+		await captureSnapshot(ctx);
 	});
 	// session_start fires before all extensions register their tools/commands.
 	// before_agent_start fires after the user's first prompt with the fully assembled state — re-capture then.
 	pi.on("before_agent_start", async (_event, ctx) => {
-		captureSnapshot(ctx);
+		lastCtx = ctx;
+		await captureSnapshot(ctx);
 	});
 
 	pi.registerCommand("inspect", {
@@ -363,6 +524,7 @@ export default function inspectExtension(pi: ExtensionAPI) {
 			return SUBCOMMANDS.filter((s) => s.startsWith(prefix)).map((s) => ({ value: s, label: s }));
 		},
 		handler: async (args, ctx) => {
+			lastCtx = ctx;
 			const notify = (m: string, l: "info" | "error" = "info") => ctx.ui.notify(m, l);
 			const tokens = args.trim().split(/\s+/).filter(Boolean);
 			const first = tokens[0] as Sub | string | undefined;
@@ -382,7 +544,7 @@ export default function inspectExtension(pi: ExtensionAPI) {
 
 			if (first === "start") {
 				if (!(await startServer(notify))) return;
-				captureSnapshot(ctx);
+				await captureSnapshot(ctx);
 				notify(`pi-inspect started → ${url}`);
 				return;
 			}
@@ -407,7 +569,7 @@ export default function inspectExtension(pi: ExtensionAPI) {
 			}
 
 			if (first === "snapshot") {
-				const r = captureSnapshot(ctx);
+				const r = await captureSnapshot(ctx);
 				notify(r ? `snapshot captured: ${r.id}` : "no active session to snapshot", r ? "info" : "error");
 				return;
 			}
@@ -417,7 +579,7 @@ export default function inspectExtension(pi: ExtensionAPI) {
 			const openTarget = (isExplicitOpen ? (tokens[1] ?? "web") : "web") as "web" | "app";
 
 			if (!(await startServer(notify))) return;
-			captureSnapshot(ctx);
+			await captureSnapshot(ctx);
 
 			let openId: string | null = null;
 			if (!isExplicitOpen && first && !(SUBCOMMANDS as readonly string[]).includes(first)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-inspect",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Introspection dashboard for the pi coding agent — tools, slash commands, skills, and the system prompt injected on init.",
   "keywords": [
     "pi-package",

package/public/app.js

@@ -122,12 +122,23 @@ function inferSource(x) {
 }
 
 //#region MODEL
+function normPath(p) {
+  if (!p || typeof p !== 'string') return null;
+  return p.replace(/\\/g, '/').toLowerCase();
+}
+
 function buildItems() {
   const s = state.snapshot;
   if (!s) return [];
   const items = [];
   const activeSet = new Set(s.activeTools ?? []);
   const activeIds = new Set();
+  // pi.getCommands() is frozen at session boot. After a toggle, the SDK-resolved
+  // disabledItems is the source of truth — drop any active command whose path
+  // matches a disabled resource so the UI reflects the post-toggle state.
+  const disabledPaths = new Set(
+    (s.disabledItems ?? []).map((d) => normPath(d.path)).filter(Boolean),
+  );
   for (const t of s.tools ?? []) {
     const description = (t.description ?? '').replace(/\s+/g, ' ').trim();
     const id = `tool:${t.name}`;
@@ -145,13 +156,16 @@ function buildItems() {
     });
   }
   for (const c of s.commands ?? []) {
+    const cp = normPath(c?.sourceInfo?.path);
+    if (cp && disabledPaths.has(cp)) continue;
     const name = c.name ?? c.command ?? '';
     const isSkill = name.startsWith('skill:');
     const src = inferSource(c);
     const isPrompt = !isSkill && c.source === 'prompt';
     const kind = isSkill ? 'skill' : isPrompt ? 'prompt' : 'command';
     const description = (c.description ?? '').replace(/\s+/g, ' ').trim();
-    const id = `${kind}:${name}`;
+    const idName = isSkill ? name.slice('skill:'.length) : name;
+    const id = `${kind}:${idName}`;
     activeIds.add(id);
     items.push({
       kind,
@@ -180,6 +194,22 @@ function buildItems() {
       raw: d,
     });
   }
+  for (const d of s.pendingItems ?? []) {
+    const id = `${d.kind}:${d.name}`;
+    if (activeIds.has(id)) continue;
+    const description = (d.description ?? '').replace(/\s+/g, ' ').trim();
+    items.push({
+      kind: d.kind,
+      id,
+      name: d.displayName ?? d.name,
+      source: d.source ?? '(package)',
+      description,
+      chars: (d.description ?? '').length,
+      pending: true,
+      path: d.path ?? null,
+      raw: d,
+    });
+  }
   if (s.systemPrompt) {
     for (const part of splitSystemPrompt(s.systemPrompt, s.cwd)) {
       items.push({
@@ -338,7 +368,10 @@ function renderTree() {
 
   const groups = new Map();
   for (const k of KIND_ORDER) groups.set(k, []);
-  for (const it of items) groups.get(it.kind).push(it);
+  for (const it of items) {
+    const g = groups.get(it.kind);
+    if (g) g.push(it);
+  }
 
   const html = [];
   const rows = [];
@@ -398,11 +431,12 @@ function renderTree() {
             const descHtml = it.description
               ? `<span class="tree-desc">${esc(it.description)}</span><div class="spacer"></div>`
               : '<div class="spacer"></div>';
-            const disabledCls = it.disabled ? ' disabled' : '';
+            const stateCls = it.disabled ? ' disabled' : (it.pending ? ' pending' : '');
+            const stateBadge = it.pending ? `<span class="tree-badge pending" title="Enabled in settings but not yet active — restart pi">restart pi</span>` : '';
             html.push(`
-              <div class="tree-row ${selected}${disabledCls}" data-item="${esc(it.id)}" style="padding-left:${pad}px">
+              <div class="tree-row ${selected}${stateCls}" data-item="${esc(it.id)}" style="padding-left:${pad}px">
                 <div class="tree-icon">${iconFor(it.kind)}</div>
-                <div class="tree-label">${esc(it.name)}</div>
+                <div class="tree-label">${esc(it.name)}${stateBadge}</div>
                 ${descHtml}
                 <div class="tree-meta">${esc(it.source)}</div>
               </div>
@@ -507,10 +541,12 @@ function renderDetail() {
   }
 
   const ghUrl = githubUrlFor(it);
+  const toggleInfo = toggleInfoFor(it);
   panel.innerHTML = `
     <div class="detail-header">
       <h3>${iconFor(it.kind)} ${esc(it.name)} <span class="version">${esc(it.kind)}</span></h3>
       <div class="detail-header-actions">
+        ${toggleInfo ? `<button class="detail-action" id="toggleBtn" title="${toggleInfo.enable ? 'Enable' : 'Disable'} (${toggleInfo.scope})">${toggleInfo.enable ? 'Enable' : 'Disable'}</button>` : ''}
         ${it.path ? `<button class="detail-action" id="openEditorBtn" title="Open in $EDITOR"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></button>` : ''}
         ${it.path ? `<button class="detail-action" id="copyPathBtn" title="Copy path"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button>` : ''}
         ${ghUrl ? `<button class="detail-action" id="openGithubBtn" title="Open on GitHub"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.68-1.27-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.76 2.7 1.25 3.36.96.1-.75.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.05 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.18-1.49 3.14-1.18 3.14-1.18.63 1.59.23 2.76.11 3.05.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.68.8.56C20.21 21.38 23.5 17.07 23.5 12 23.5 5.65 18.35.5 12 .5z"/></svg></button>` : ''}
@@ -550,6 +586,41 @@ function renderDetail() {
   if (ghBtn && ghUrl) ghBtn.addEventListener('click', () => {
     window.open(ghUrl, '_blank', 'noopener');
   });
+  const toggleBtn = $('toggleBtn');
+  if (toggleBtn && toggleInfo) toggleBtn.addEventListener('click', async () => {
+    toggleBtn.disabled = true;
+    try {
+      const r = await fetch('/api/toggle', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          action: toggleInfo.enable ? 'enable' : 'disable',
+          resourceKind: toggleInfo.resourceKind,
+          path: toggleInfo.path,
+          scope: toggleInfo.scope,
+        }),
+      });
+      const j = await r.json();
+      if (!r.ok || j.ok === false) throw new Error(j.error || `HTTP ${r.status}`);
+      toast(`${toggleInfo.enable ? 'Enabled' : 'Disabled'} ${it.name} — restart pi to apply fully`);
+    } catch (e) {
+      toast(`Toggle failed: ${e.message}`);
+      toggleBtn.disabled = false;
+    }
+  });
+}
+
+function toggleInfoFor(it) {
+  if (it.kind !== 'skill' && it.kind !== 'prompt') return null;
+  if (!it.path) return null;
+  const resourceKind = it.kind === 'skill' ? 'skills' : 'prompts';
+  if (it.disabled) {
+    const scope = it.raw?.scope === 'project' ? 'project' : 'user';
+    return { enable: true, resourceKind, path: it.path, scope };
+  }
+  const si = it.raw?.sourceInfo;
+  const scope = si?.scope === 'project' ? 'project' : 'user';
+  return { enable: false, resourceKind, path: it.path, scope };
 }
 //#endregion
 

package/public/style.css

@@ -383,6 +383,23 @@ body {
   font-style: italic;
   opacity: 0.8;
 }
+.tree-badge.pending {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  background: rgba(255, 170, 60, 0.18);
+  color: #c97a00;
+  border: 1px solid rgba(201, 122, 0, 0.35);
+  vertical-align: middle;
+}
+.tree-row.pending .tree-icon {
+  opacity: 0.7;
+}
 
 .tree-indent {
   flex-shrink: 0;

package/server.js

@@ -135,6 +135,28 @@ app.post('/api/open', (req, res) => {
   }
 });
 
+const REQ_DIR = path.join(os.homedir(), '.pi', 'agent', 'inspect', 'requests');
+
+app.post('/api/toggle', async (req, res) => {
+  try {
+    const { action, resourceKind, path: target, scope } = req.body || {};
+    if (action !== 'enable' && action !== 'disable') return res.status(400).json({ ok: false, error: 'action must be enable|disable' });
+    if (!['skills', 'prompts', 'extensions', 'themes'].includes(resourceKind)) return res.status(400).json({ ok: false, error: 'invalid resourceKind' });
+    if (!target || typeof target !== 'string') return res.status(400).json({ ok: false, error: 'missing path' });
+    const useScope = scope === 'project' ? 'project' : 'user';
+    await fsp.mkdir(REQ_DIR, { recursive: true });
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+    const file = path.join(REQ_DIR, `${id}.json`);
+    const tmp = `${file}.tmp`;
+    const body = JSON.stringify({ id, ts: Date.now(), action, resourceKind, path: target, scope: useScope });
+    await fsp.writeFile(tmp, body, 'utf8');
+    await fsp.rename(tmp, file);
+    res.json({ ok: true, id });
+  } catch (e) {
+    res.status(500).json({ ok: false, error: e.message });
+  }
+});
+
 app.post('/api/focus', (req, res) => {
   const sid = (req.body && req.body.session) || req.query.session || null;
   const count = sseClients.size;