pi-inspect 0.2.0 → 0.4.0

package/extensions/inspect.ts

@@ -1,10 +1,31 @@
 import { spawn, spawnSync, type ChildProcess } from "node:child_process";
-import { mkdirSync, readFileSync, 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 } 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,288 @@ function writeSnapshot(id: string, snapshot: unknown): void {
 	writeFileSync(joinPath(SNAP_DIR, `${sanitize(id)}.json`), JSON.stringify(snapshot, null, 2), "utf8");
 }
 
-function captureSnapshot(ctx: any): { id: string; entry: IndexEntry } | null {
+type DisabledKind = "command" | "prompt" | "skill" | "extension" | "theme";
+type DisabledScope = "user" | "project";
+type DisabledItem = {
+	kind: DisabledKind;
+	name: string;
+	displayName: string;
+	description: string;
+	source: string;
+	scope: DisabledScope;
+	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");
+
+type ResourceKind = "skills" | "prompts" | "extensions" | "themes";
+const RESOURCE_KINDS: readonly ResourceKind[] = ["skills", "prompts", "extensions", "themes"];
+
+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 sourceLabel(source: string): string {
+	if (source.startsWith("npm:")) return source.slice(4);
+	const norm = source.replace(/\\/g, "/").replace(/\/$/, "");
+	return norm.split("/").pop() ?? norm;
+}
+
+const describeCache = new Map<string, { mtimeMs: number; desc: string }>();
+
+function describeFromPath(path: string): string {
+	let mtimeMs: number;
+	try { mtimeMs = statSync(path).mtimeMs; } catch { return ""; }
+	const cached = describeCache.get(path);
+	if (cached && cached.mtimeMs === mtimeMs) return cached.desc;
+	let desc = "";
+	try {
+		const { frontmatter, body } = parseFrontmatter<{ description?: string }>(readFileSync(path, "utf8"));
+		desc = typeof frontmatter.description === "string" && frontmatter.description
+			? frontmatter.description
+			: body.split(/\r?\n/).find((l) => l.trim() && !l.trim().startsWith("#"))?.trim().slice(0, 240) ?? "";
+	} catch {}
+	describeCache.set(path, { mtimeMs, desc });
+	return desc;
+}
+
+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(/\.(md|ts|js|mjs|cjs|json|toml|ya?ml)$/i, "");
+}
+
+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: 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,
+	};
+}
+
+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()] };
+}
+
+type ToggleRequest = {
+	id: string;
+	ts: number;
+	action: "enable" | "disable";
+	resourceKind: ResourceKind;
+	path: string;
+	scope: DisabledScope;
+};
+
+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 {}
+	}
+}
+
+// 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 {}
+	}
+}
+
+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}`);
+	}
+}
+
+async function captureSnapshot(ctx: any): Promise<{ id: string; entry: IndexEntry } | null> {
 	const sm = ctx.sessionManager;
 	const id = sm?.getSessionId?.();
 	if (!id) return null;
@@ -112,8 +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 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, 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 });
@@ -183,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", {
@@ -207,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;
@@ -226,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;
 			}
@@ -251,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;
 			}
@@ -261,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/lib/snapshot.js

@@ -40,6 +40,49 @@ async function readSnapshot(sessionId) {
   }
 }
 
+async function writeIndex(sessions) {
+  await fsp.mkdir(SNAPSHOT_DIR, { recursive: true });
+  await fsp.writeFile(INDEX_PATH, JSON.stringify({ sessions }, null, 2), 'utf8');
+}
+
+async function cleanupIndex() {
+  const sessions = await readIndex();
+  const kept = [];
+  const removed = [];
+  for (const s of sessions) {
+    try {
+      await fsp.access(snapshotPath(s.id));
+      kept.push(s);
+    } catch {
+      removed.push(s.id);
+    }
+  }
+  if (removed.length) await writeIndex(kept);
+  return { kept: kept.length, removed };
+}
+
+async function keepOnly(sessionId) {
+  if (!sessionId) throw new Error('sessionId required');
+  const sessions = await readIndex();
+  const kept = sessions.filter((s) => s.id === sessionId);
+  const removed = [];
+  let files;
+  try { files = await fsp.readdir(SNAPSHOT_DIR); }
+  catch { files = []; }
+  const keepPath = path.basename(snapshotPath(sessionId));
+  for (const f of files) {
+    if (!f.endsWith('.json') || f === 'index.json' || f === keepPath) continue;
+    try {
+      await fsp.unlink(path.join(SNAPSHOT_DIR, f));
+      removed.push(f.replace(/\.json$/, ''));
+    } catch (e) {
+      console.warn(`pi-inspect: unlink ${f}: ${e.message}`);
+    }
+  }
+  await writeIndex(kept);
+  return { kept: kept.length, removed };
+}
+
 async function readLatestSnapshot() {
   const sessions = await readIndex();
   if (!sessions.length) return null;
@@ -51,6 +94,9 @@ module.exports = {
   snapshotDir,
   snapshotPath,
   readIndex,
+  writeIndex,
+  cleanupIndex,
+  keepOnly,
   readSnapshot,
   readLatestSnapshot,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-inspect",
-  "version": "0.2.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

@@ -5,7 +5,7 @@ const state = {
   snapshot: null,
   search: '',
   kind: 'all',
-  expanded: { context: true, tool: true, command: true, skill: true },
+  expanded: { context: true, tool: true, command: true, prompt: true, skill: true },
   selected: null,
   expandAll: true,
   highlight: -1,
@@ -110,7 +110,11 @@ function inferSource(x) {
   const si = x?.sourceInfo;
   if (si) {
     if (si.label) return si.label;
-    if (si.source) return si.source.startsWith('npm:') ? si.source.slice(4) : si.source;
+    if (si.source) {
+      const src = si.source.startsWith('npm:') ? si.source.slice(4) : si.source;
+      if (src === 'auto' && si.scope) return si.scope;
+      return src;
+    }
     if (si.origin) return si.origin;
     if (si.kind) return si.kind;
   }
@@ -118,39 +122,94 @@ 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}`;
+    activeIds.add(id);
     items.push({
       kind: 'tool',
-      id: `tool:${t.name}`,
+      id,
       name: t.name ?? '(tool)',
       source: inferSource(t),
       description,
       chars: (t.description ?? '').length,
-      active: (s.activeTools ?? []).includes(t.name),
+      active: activeSet.has(t.name),
       path: inferPath(t),
       raw: t,
     });
   }
   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 idName = isSkill ? name.slice('skill:'.length) : name;
+    const id = `${kind}:${idName}`;
+    activeIds.add(id);
     items.push({
-      kind: isSkill ? 'skill' : 'command',
-      id: `${isSkill ? 'skill' : 'command'}:${name}`,
+      kind,
+      id,
       name: `/${name}`,
-      source: inferSource(c),
+      source: src,
       description,
       chars: (c.description ?? '').length,
       path: inferPath(c),
       raw: c,
     });
   }
+  for (const d of s.disabledItems ?? []) {
+    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,
+      disabled: true,
+      path: d.path ?? null,
+      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({
@@ -189,8 +248,9 @@ function filterItems(items) {
   });
 }
 
-const KIND_ORDER = ['context', 'tool', 'command', 'skill'];
-const KIND_LABEL = { context: 'Context', tool: 'Tools', command: 'Commands', skill: 'Skills' };
+const KIND_ORDER = ['context', 'tool', 'command', 'prompt', 'skill'];
+const KIND_LABEL = { context: 'Context', tool: 'Tools', command: 'Commands', prompt: 'Prompts', skill: 'Skills' };
+const SOURCE_RANK = { user: 0, project: 1, auto: 2, builtin: 3 };
 //#endregion
 
 //#region ICONS
@@ -201,6 +261,9 @@ function iconFor(kind) {
   if (kind === 'command') {
     return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`;
   }
+  if (kind === 'prompt') {
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><line x1="7" y1="9" x2="17" y2="9"/><line x1="7" y1="13" x2="13" y2="13"/></svg>`;
+  }
   if (kind === 'skill') {
     return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`;
   }
@@ -305,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 = [];
@@ -334,11 +400,9 @@ function renderTree() {
       const useSubgroups = bySource.size > 1 && kind !== 'context';
       const sources = useSubgroups
         ? [...bySource.keys()].sort((a, b) => {
-            const rank = (s) => {
-              const i = ['auto', 'builtin'].indexOf(s);
-              return i === -1 ? Infinity : i;
-            };
-            return (rank(a) - rank(b)) || a.localeCompare(b);
+            const ra = SOURCE_RANK[a] ?? Infinity;
+            const rb = SOURCE_RANK[b] ?? Infinity;
+            return (ra - rb) || a.localeCompare(b);
           })
         : ['__all__'];
       if (!useSubgroups) bySource.set('__all__', list);
@@ -367,10 +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 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}" 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>
@@ -443,6 +509,8 @@ function renderDetail() {
     `);
   }
 
+  const scope = it.raw?.scope;
+  const settingsPath = it.raw?.settingsPath;
   bodySections.push(`
     <div class="detail-section">
       <h4>Metadata</h4>
@@ -450,6 +518,8 @@ function renderDetail() {
         <span class="detail-meta-item">Kind: ${esc(it.kind)}</span>
         <span class="detail-meta-item">Source: ${esc(it.source)}</span>
         ${it.active != null ? `<span class="detail-meta-item">Active: ${it.active ? 'yes' : 'no'}</span>` : ''}
+        ${it.disabled ? `<span class="detail-meta-item">Disabled${scope ? ` (${esc(scope)})` : ''}</span>` : ''}
+        ${settingsPath ? `<span class="detail-meta-item">Settings: ${esc(settingsPath)}</span>` : ''}
       </div>
     </div>
   `);
@@ -471,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>` : ''}
@@ -514,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
 
@@ -582,6 +689,33 @@ function bindEvents() {
     toast('refreshed');
   });
 
+  $('cleanupSessionsBtn').addEventListener('click', async () => {
+    const keep = state.currentSessionId;
+    if (!keep) { toast('select a session first'); return; }
+    const others = state.sessions.filter((s) => s.id !== keep).length;
+    if (!others) { toast('only one session — nothing to remove'); return; }
+    if (!confirm(`Delete ${others} other snapshot${others === 1 ? '' : 's'} and keep only the selected session?`)) return;
+    const btn = $('cleanupSessionsBtn');
+    btn.classList.add('loading');
+    try {
+      const r = await fetch('/api/sessions/cleanup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ keep }),
+      });
+      const data = await r.json();
+      if (!r.ok || data.ok === false) throw new Error(data.error || `HTTP ${r.status}`);
+      const n = data.removed?.length ?? 0;
+      await loadSessions();
+      renderTopbar();
+      toast(n ? `removed ${n} session${n === 1 ? '' : 's'}` : 'nothing to remove');
+    } catch (e) {
+      toast(`cleanup failed: ${e.message}`);
+    } finally {
+      btn.classList.remove('loading');
+    }
+  });
+
   $('themeBtn').addEventListener('click', () => {
     document.body.classList.toggle('light');
     try {

package/public/index.html

@@ -31,9 +31,13 @@
       <option value="context">Context</option>
       <option value="tool">Tools</option>
       <option value="command">Commands</option>
+      <option value="prompt">Prompts</option>
       <option value="skill">Skills</option>
     </select>
     <select class="topbar-select" id="sessionSelect" title="Switch session"></select>
+    <button class="topbar-btn" id="cleanupSessionsBtn" title="Delete all snapshots except the selected session">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 01-2 2H9a2 2 0 01-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a2 2 0 012-2h2a2 2 0 012 2v2"/></svg>
+    </button>
     <div class="topbar-project" id="projectBtn" title="Current cwd">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
       <span id="projectPath">—</span>

package/public/style.css

@@ -359,15 +359,47 @@ body {
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 3;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   padding: 8px 12px;
 }
+/* Stacks under the group row (top:0); 38px matches .tree-row min-height. */
+.tree-row.marketplace-row.tree-subgroup {
+  top: 38px;
+  z-index: 2;
+}
 .tree-row.marketplace-row.virtual .tree-icon {
   color: var(--plan);
 }
+.tree-row.disabled .tree-label,
+.tree-row.disabled .tree-desc,
+.tree-row.disabled .tree-icon {
+  opacity: 0.45;
+}
+.tree-row.disabled .tree-meta {
+  color: var(--text-muted, #888);
+  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;
@@ -433,10 +465,11 @@ body {
 .tree-subgroup .tree-icon { width: 14px; height: 14px; }
 .tree-subgroup .tree-icon svg { width: 14px; height: 14px; }
 .tree-meta {
-  font-size: 10px;
-  color: var(--text-muted);
+  font-size: 11px;
+  color: var(--text, inherit);
   flex-shrink: 0;
   white-space: nowrap;
+  opacity: 0.65;
 }
 .tree-desc {
   font-size: 11px;

package/server.js

@@ -40,6 +40,18 @@ app.get('/api/sessions', async (_req, res) => {
   }
 });
 
+app.post('/api/sessions/cleanup', async (req, res) => {
+  try {
+    const keep = (req.body && req.body.keep) || req.query.keep || null;
+    const result = keep
+      ? await snapshots.keepOnly(String(keep))
+      : await snapshots.cleanupIndex();
+    res.json({ ok: true, ...result });
+  } catch (e) {
+    res.status(500).json({ ok: false, error: e.message });
+  }
+});
+
 const githubMemo = new Map(); // sessionId -> Record<root, {url, source}>
 
 function collectSourceRoots(snap) {
@@ -123,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;