pi-inspect 0.1.0 → 0.3.0

package/README.md

@@ -5,7 +5,10 @@
 
 Introspection dashboard for the [pi coding agent](https://pi.dev) — see what's actually loaded into a session: tools, slash commands, skills, and the system prompt injected on init.
 
-![pi-inspect demo](https://raw.githubusercontent.com/NikiforovAll/pi-inspect/main/assets/demo.png)
+<p align="center">
+  <img src="https://raw.githubusercontent.com/NikiforovAll/pi-inspect/main/assets/demo.png" alt="pi-inspect demo" width="49%">
+  <img src="https://raw.githubusercontent.com/NikiforovAll/pi-inspect/main/assets/demo-light.png" alt="pi-inspect demo light" width="49%">
+</p>
 
 ## Installation
 

package/extensions/inspect.ts

@@ -1,10 +1,10 @@
 import { spawn, spawnSync, type ChildProcess } from "node:child_process";
-import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { mkdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
 import { createConnection } from "node:net";
 import { homedir } from "node:os";
 import { join as joinPath, resolve as resolvePath } from "node:path";
 import { fileURLToPath } from "node:url";
-import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { type ExtensionAPI, parseFrontmatter } from "@earendil-works/pi-coding-agent";
 
 const extDir = fileURLToPath(new URL(".", import.meta.url));
 const port = 5462;
@@ -100,6 +100,161 @@ 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 DisabledScope = "user" | "project";
+type DisabledItem = {
+	kind: DisabledKind;
+	name: string;
+	displayName: string;
+	description: string;
+	source: string;
+	scope: DisabledScope;
+	settingsPath: string;
+	path: string;
+	reason: 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"];
+
+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 },
+};
+
+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(/\/$/, "");
+	return norm.split("/").pop() ?? norm;
+}
+
+const describeCache = new Map<string, { mtimeMs: number; desc: string }>();
+
+function describeFrom(filePath: string, isDir: boolean): string {
+	const path = isDir ? joinPath(filePath, "SKILL.md") : filePath;
+	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 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;
+	}
+	return base.replace(KIND_CFG[filterKind].stripExt, "");
+}
+
+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({
+		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,
+	});
+}
+
+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);
+	}
+}
+
+const settingsCache = new Map<string, { mtimeMs: number; items: DisabledItem[] }>();
+
+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 });
+	}
+	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" });
+
+	// 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);
+	}
+	return [...byPath.values()];
+}
+
 function captureSnapshot(ctx: any): { id: string; entry: IndexEntry } | null {
 	const sm = ctx.sessionManager;
 	const id = sm?.getSessionId?.();
@@ -112,8 +267,9 @@ 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 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, capturedAt };
 	try {
 		writeSnapshot(id, snap);
 		upsertIndex({ id, cwd, name, model, capturedAt });

package/lib/github-source.js

@@ -0,0 +1,105 @@
+'use strict';
+const path = require('node:path');
+const fsp = require('node:fs/promises');
+
+const MAX_WALK = 8;
+const cache = new Map(); // root -> { url, source } | null
+
+function normalizeRepo(raw) {
+  if (!raw || typeof raw !== 'string') return null;
+  let s = raw.trim();
+  if (!s) return null;
+  s = s.replace(/^git\+/, '').replace(/\.git(\/|$)/, '$1').replace(/\/+$/, '');
+  // shorthand: github:owner/repo or owner/repo
+  let m = s.match(/^(?:github:)?([\w.-]+)\/([\w.-]+)$/i);
+  if (m) return `https://github.com/${m[1]}/${m[2]}`;
+  // ssh: git@github.com:owner/repo
+  m = s.match(/^git@github\.com:([\w.-]+)\/([\w.-]+)$/i);
+  if (m) return `https://github.com/${m[1]}/${m[2]}`;
+  // ssh url: ssh://git@github.com/owner/repo
+  m = s.match(/^ssh:\/\/git@github\.com\/([\w.-]+)\/([\w.-]+)$/i);
+  if (m) return `https://github.com/${m[1]}/${m[2]}`;
+  // https / git protocols
+  m = s.match(/^(?:https?|git):\/\/(?:[^@/]+@)?github\.com\/([\w.-]+)\/([\w.-]+)$/i);
+  if (m) return `https://github.com/${m[1]}/${m[2]}`;
+  return null;
+}
+
+async function tryPackageJson(dir) {
+  try {
+    const raw = await fsp.readFile(path.join(dir, 'package.json'), 'utf8');
+    const pkg = JSON.parse(raw);
+    const repo = pkg.repository;
+    let urlStr = null;
+    let subdir = null;
+    if (typeof repo === 'string') urlStr = repo;
+    else if (repo && typeof repo === 'object') {
+      urlStr = repo.url;
+      if (typeof repo.directory === 'string') subdir = repo.directory.replace(/^\/+|\/+$/g, '');
+    }
+    const base = normalizeRepo(urlStr);
+    if (!base) return null;
+    return { url: subdir ? `${base}/tree/HEAD/${subdir}` : base, source: 'package.json' };
+  } catch {
+    return null;
+  }
+}
+
+async function tryGitConfig(dir) {
+  try {
+    const raw = await fsp.readFile(path.join(dir, '.git', 'config'), 'utf8');
+    // Find [remote "origin"] section then its url
+    const re = /\[remote\s+"origin"\]([\s\S]*?)(?=\n\[|\s*$)/;
+    const m = re.exec(raw);
+    if (!m) return null;
+    const urlM = /\burl\s*=\s*(.+)/.exec(m[1]);
+    if (!urlM) return null;
+    const url = normalizeRepo(urlM[1].trim());
+    if (!url) return null;
+    return { url, source: 'git' };
+  } catch {
+    return null;
+  }
+}
+
+async function resolveGithubUrl(root) {
+  if (!root || typeof root !== 'string') return null;
+  if (cache.has(root)) return cache.get(root);
+  const visited = [];
+  let dir = path.resolve(root);
+  let last = null;
+  for (let i = 0; i < MAX_WALK; i++) {
+    if (dir === last) break;
+    if (cache.has(dir)) {
+      const cached = cache.get(dir);
+      for (const v of visited) cache.set(v, cached);
+      cache.set(root, cached);
+      return cached;
+    }
+    visited.push(dir);
+    const [pj, gc] = await Promise.all([tryPackageJson(dir), tryGitConfig(dir)]);
+    const hit = pj || gc;
+    if (hit) {
+      for (const v of visited) cache.set(v, hit);
+      cache.set(root, hit);
+      return hit;
+    }
+    last = dir;
+    dir = path.dirname(dir);
+  }
+  for (const v of visited) cache.set(v, null);
+  cache.set(root, null);
+  return null;
+}
+
+async function resolveMany(roots) {
+  const unique = [...new Set(roots.filter((r) => typeof r === 'string' && r))];
+  const out = {};
+  await Promise.all(unique.map(async (r) => {
+    const hit = await resolveGithubUrl(r);
+    if (hit) out[r] = hit;
+  }));
+  return out;
+}
+
+module.exports = { resolveGithubUrl, resolveMany, normalizeRepo };

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.1.0",
+  "version": "0.3.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,11 +5,18 @@ 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,
+  visibleRows: [],
 };
 const els = {};
+
+function matchKey(e, ...keys) {
+  if (e.ctrlKey || e.altKey || e.metaKey) return false;
+  return keys.some((k) => e.key === k || e.code === k);
+}
 //#endregion
 
 //#region UTIL
@@ -92,11 +99,22 @@ function inferPath(x) {
   return p;
 }
 
+function githubUrlFor(it) {
+  const map = state.snapshot?.githubSources;
+  const root = it.raw?.sourceInfo?.baseDir;
+  if (!map || !root) return null;
+  return map[root]?.url || null;
+}
+
 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;
   }
@@ -108,14 +126,20 @@ function buildItems() {
   const s = state.snapshot;
   if (!s) return [];
   const items = [];
+  const activeSet = new Set(s.activeTools ?? []);
+  const activeIds = new Set();
   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: t.description ?? '',
-      active: (s.activeTools ?? []).includes(t.name),
+      description,
+      chars: (t.description ?? '').length,
+      active: activeSet.has(t.name),
       path: inferPath(t),
       raw: t,
     });
@@ -123,16 +147,39 @@ function buildItems() {
   for (const c of s.commands ?? []) {
     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}`;
+    activeIds.add(id);
     items.push({
-      kind: isSkill ? 'skill' : 'command',
-      id: `${isSkill ? 'skill' : 'command'}:${name}`,
+      kind,
+      id,
       name: `/${name}`,
-      source: inferSource(c),
-      description: c.description ?? '',
+      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,
+    });
+  }
   if (s.systemPrompt) {
     for (const part of splitSystemPrompt(s.systemPrompt, s.cwd)) {
       items.push({
@@ -141,6 +188,7 @@ function buildItems() {
         name: part.name,
         source: `${part.text.length} chars`,
         description: part.text.slice(0, 240).replace(/\s+/g, ' '),
+        chars: part.text.length,
         path: part.path ?? null,
         raw: { systemPrompt: part.text, path: part.path ?? null },
       });
@@ -149,6 +197,15 @@ function buildItems() {
   return items;
 }
 
+function fmtChars(n) {
+  if (n == null) return '';
+  if (n < 1000) return `${n} chars`;
+  return `${(n / 1000).toFixed(n < 10000 ? 1 : 0)}k chars`;
+}
+function sumChars(list) {
+  return list.reduce((a, b) => a + (b.chars || 0), 0);
+}
+
 function filterItems(items) {
   const q = state.search.trim().toLowerCase();
   return items.filter((it) => {
@@ -156,13 +213,14 @@ function filterItems(items) {
     if (!q) return true;
     return (
       it.name.toLowerCase().includes(q) ||
-      (it.description ?? '').toLowerCase().includes(q)
+      (it.source ?? '').toLowerCase().includes(q)
     );
   });
 }
 
-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
@@ -173,6 +231,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>`;
   }
@@ -280,17 +341,20 @@ function renderTree() {
   for (const it of items) groups.get(it.kind).push(it);
 
   const html = [];
+  const rows = [];
   for (const kind of KIND_ORDER) {
     const list = groups.get(kind);
     if (!list.length) continue;
     const expanded = state.expanded[kind];
+    rows.push({ type: 'group', key: kind });
+    const groupChars = sumChars(list);
     html.push(`
       <div class="tree-row marketplace-row" data-group="${kind}">
         <div class="tree-chevron ${expanded ? 'expanded' : ''}">${chevronSvg()}</div>
         <div class="tree-icon">${iconFor(kind)}</div>
         <div class="tree-label"><span class="mkt-name">${esc(KIND_LABEL[kind])}</span></div>
         <div class="spacer"></div>
-        <div class="tree-meta">${list.length}</div>
+        <div class="tree-meta">${list.length} · ${fmtChars(groupChars)}</div>
       </div>
     `);
     if (expanded) {
@@ -303,9 +367,9 @@ function renderTree() {
       const useSubgroups = bySource.size > 1 && kind !== 'context';
       const sources = useSubgroups
         ? [...bySource.keys()].sort((a, b) => {
-            if (a === 'builtin') return -1;
-            if (b === 'builtin') return 1;
-            return 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);
@@ -314,13 +378,15 @@ function renderTree() {
         const subKey = `${kind}::${src}`;
         const subExpanded = state.expanded[subKey] !== false;
         if (useSubgroups) {
+          rows.push({ type: 'subgroup', key: subKey });
+          const subChars = sumChars(sublist);
           html.push(`
             <div class="tree-row marketplace-row tree-subgroup" data-subgroup="${esc(subKey)}" style="padding-left:24px">
               <div class="tree-chevron ${subExpanded ? 'expanded' : ''}">${chevronSvg()}</div>
               <div class="tree-icon">${packageSvg()}</div>
               <div class="tree-label"><span class="mkt-name">${esc(src)}</span></div>
               <div class="spacer"></div>
-              <div class="tree-meta">${sublist.length}</div>
+              <div class="tree-meta">${sublist.length} · ${fmtChars(subChars)}</div>
             </div>
           `);
         }
@@ -328,11 +394,16 @@ function renderTree() {
           for (const it of sublist) {
             const selected = state.selected === it.id ? 'selected' : '';
             const pad = useSubgroups ? 48 : 32;
+            rows.push({ type: 'item', key: it.id });
+            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' : '';
             html.push(`
-              <div class="tree-row ${selected}" data-item="${esc(it.id)}" style="padding-left:${pad}px">
+              <div class="tree-row ${selected}${disabledCls}" 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="spacer"></div>
+                ${descHtml}
                 <div class="tree-meta">${esc(it.source)}</div>
               </div>
             `);
@@ -342,6 +413,12 @@ function renderTree() {
     }
   }
   root.innerHTML = html.join('');
+  state.visibleRows = rows;
+  if (state.highlight >= rows.length) state.highlight = rows.length - 1;
+  if (state.highlight >= 0) {
+    const el = root.children[state.highlight];
+    if (el) el.classList.add('focused');
+  }
 
   root.querySelectorAll('.tree-row[data-group]').forEach((el) => {
     el.addEventListener('click', () => {
@@ -360,6 +437,7 @@ function renderTree() {
   root.querySelectorAll('.tree-row[data-item]').forEach((el) => {
     el.addEventListener('click', () => {
       state.selected = el.dataset.item;
+      state.highlight = -1;
       renderTree();
       renderDetail();
     });
@@ -397,6 +475,8 @@ function renderDetail() {
     `);
   }
 
+  const scope = it.raw?.scope;
+  const settingsPath = it.raw?.settingsPath;
   bodySections.push(`
     <div class="detail-section">
       <h4>Metadata</h4>
@@ -404,6 +484,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>
   `);
@@ -424,12 +506,14 @@ function renderDetail() {
     `);
   }
 
+  const ghUrl = githubUrlFor(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">
         ${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>` : ''}
         <button class="detail-close" id="detailCloseBtn" title="Close">&#10005;</button>
       </div>
     </div>
@@ -462,6 +546,10 @@ function renderDetail() {
     try { await navigator.clipboard.writeText(it.path); toast('Path copied'); }
     catch { toast('Copy failed'); }
   });
+  const ghBtn = $('openGithubBtn');
+  if (ghBtn && ghUrl) ghBtn.addEventListener('click', () => {
+    window.open(ghUrl, '_blank', 'noopener');
+  });
 }
 //#endregion
 
@@ -530,6 +618,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 {
@@ -540,6 +655,12 @@ function bindEvents() {
   $('expandToggle').addEventListener('click', () => {
     state.expandAll = !state.expandAll;
     for (const k of KIND_ORDER) state.expanded[k] = state.expandAll;
+    const subKeys = new Set(Object.keys(state.expanded).filter((k) => k.includes('::')));
+    for (const it of buildItems()) subKeys.add(`${it.kind}::${it.source || '(unknown)'}`);
+    for (const key of subKeys) {
+      if (state.expandAll) delete state.expanded[key];
+      else state.expanded[key] = false;
+    }
     $('expandToggle').textContent = state.expandAll ? 'Collapse all' : 'Expand all';
     renderTree();
   });
@@ -551,15 +672,120 @@ function bindEvents() {
     renderDetail();
   });
 
-  window.addEventListener('keydown', (e) => {
-    if (e.target?.tagName === 'INPUT' || e.target?.tagName === 'SELECT') return;
-    if (e.key === '/') { e.preventDefault(); $('searchInput').focus(); }
-    else if (e.key === 'r' || e.key === 'R') $('refreshBtn').click();
-    else if (e.key === 't' || e.key === 'T') $('themeBtn').click();
-    else if (e.key === 'Escape') { state.selected = null; renderTree(); renderDetail(); }
+  window.addEventListener('keydown', handleKeydown);
+
+  document.addEventListener('selectionchange', () => {
+    const sel = document.getSelection();
+    if (!sel || sel.isCollapsed) return;
+    const node = sel.anchorNode;
+    const host = node?.nodeType === 1 ? node : node?.parentElement;
+    const row = host?.closest?.('.tree-row[data-item]');
+    if (!row) return;
+    const id = row.dataset.item;
+    const root = $('treeContainer');
+    const idx = Array.prototype.indexOf.call(root.children, row);
+    if (idx >= 0) state.highlight = idx;
+    if (state.selected !== id) {
+      state.selected = id;
+      renderTree();
+      renderDetail();
+    }
+    row.scrollIntoView({ block: 'nearest' });
+  });
+
+  $('shortcutsBtn').addEventListener('click', showHelpModal);
+  $('helpCloseBtn').addEventListener('click', hideHelpModal);
+  $('helpModal').addEventListener('click', (e) => {
+    if (e.target === $('helpModal')) hideHelpModal();
   });
 }
 
+function moveHighlight(delta) {
+  const rows = state.visibleRows;
+  if (!rows.length) return;
+  const prev = state.highlight;
+  let idx = prev;
+  if (idx < 0) {
+    const selIdx = state.selected ? rows.findIndex((r) => r.type === 'item' && r.key === state.selected) : -1;
+    if (selIdx >= 0) idx = Math.max(0, Math.min(rows.length - 1, selIdx + delta));
+    else idx = delta > 0 ? 0 : rows.length - 1;
+  } else idx = Math.max(0, Math.min(rows.length - 1, idx + delta));
+  if (idx === prev) return;
+  state.highlight = idx;
+  const root = $('treeContainer');
+  if (prev >= 0) root.children[prev]?.classList.remove('focused');
+  const el = root.children[idx];
+  if (el) {
+    el.classList.add('focused');
+    el.scrollIntoView({ block: 'nearest' });
+  }
+}
+
+function activateHighlight() {
+  const r = state.visibleRows[state.highlight];
+  if (!r) return;
+  const root = $('treeContainer');
+  const el = root.children[state.highlight];
+  if (el) el.click();
+}
+
+function expandAtHighlight(open) {
+  const r = state.visibleRows[state.highlight];
+  if (!r) return;
+  if (r.type === 'group') {
+    state.expanded[r.key] = open;
+    renderTree();
+  } else if (r.type === 'subgroup') {
+    if (open) delete state.expanded[r.key];
+    else state.expanded[r.key] = false;
+    renderTree();
+  } else if (r.type === 'item' && !open) {
+    for (let i = state.highlight - 1; i >= 0; i--) {
+      if (state.visibleRows[i].type === 'group' || state.visibleRows[i].type === 'subgroup') {
+        state.highlight = i;
+        renderTree();
+        break;
+      }
+    }
+  }
+}
+
+function showHelpModal() { $('helpModal').classList.add('open'); }
+function hideHelpModal() { $('helpModal').classList.remove('open'); }
+function isHelpOpen() { return $('helpModal')?.classList.contains('open'); }
+
+function handleKeydown(e) {
+  if (isHelpOpen()) {
+    if (e.key === 'Escape' || e.key === '?') {
+      e.preventDefault();
+      hideHelpModal();
+    }
+    return;
+  }
+  const tag = e.target?.tagName;
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+    if (e.key === 'Escape') {
+      e.target.blur();
+      e.preventDefault();
+    }
+    return;
+  }
+  if (e.key === '?') { e.preventDefault(); showHelpModal(); return; }
+  if (matchKey(e, '/')) { e.preventDefault(); $('searchInput').focus(); return; }
+  if (matchKey(e, 'f', 'F')) { e.preventDefault(); $('kindFilter').focus(); return; }
+  if (matchKey(e, 'r', 'R')) { e.preventDefault(); $('refreshBtn').click(); return; }
+  if (matchKey(e, 't', 'T')) { e.preventDefault(); $('themeBtn').click(); return; }
+  if (matchKey(e, 'e', 'E')) { e.preventDefault(); $('expandToggle').click(); return; }
+  if (matchKey(e, 'j', 'ArrowDown')) { e.preventDefault(); moveHighlight(1); return; }
+  if (matchKey(e, 'k', 'ArrowUp')) { e.preventDefault(); moveHighlight(-1); return; }
+  if (matchKey(e, 'l', 'ArrowRight')) { e.preventDefault(); expandAtHighlight(true); return; }
+  if (matchKey(e, 'h', 'ArrowLeft')) { e.preventDefault(); expandAtHighlight(false); return; }
+  if (matchKey(e, 'Enter', ' ', 'Space')) { e.preventDefault(); activateHighlight(); return; }
+  if (e.key === 'Escape') {
+    if (state.selected) { state.selected = null; renderTree(); renderDetail(); }
+  }
+}
+
 function bindSse() {
   const es = new EventSource('/api/events');
   es.addEventListener('snapshot', async () => {

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>
@@ -45,6 +49,13 @@
     <button class="topbar-btn" id="themeBtn" title="Toggle theme">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
     </button>
+    <button class="topbar-btn" id="shortcutsBtn" title="Keyboard shortcuts (?)">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg>
+      <kbd style="font-size:10px">?</kbd>
+    </button>
+    <a class="topbar-btn" href="https://github.com/NikiforovAll/pi-inspect" target="_blank" rel="noopener" title="GitHub">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+    </a>
   </div>
 
   <div class="main-layout">
@@ -65,6 +76,41 @@
 
   <div class="toast-container" id="toast"></div>
 
+  <div class="modal-overlay" id="helpModal" aria-hidden="true">
+    <div class="modal help-modal" role="dialog" aria-label="Keyboard shortcuts">
+      <div class="modal-header">
+        <h3>Keyboard Shortcuts</h3>
+        <button class="modal-close" id="helpCloseBtn" title="Close (Esc)">&#10005;</button>
+      </div>
+      <div class="modal-body">
+        <div class="help-sections">
+          <div class="help-section">
+            <h4>Global</h4>
+            <table>
+              <tr><td><kbd>?</kbd></td><td>Show this help</td></tr>
+              <tr><td><kbd>/</kbd></td><td>Focus search</td></tr>
+              <tr><td><kbd>f</kbd></td><td>Focus kind filter</td></tr>
+              <tr><td><kbd>r</kbd></td><td>Refresh</td></tr>
+              <tr><td><kbd>t</kbd></td><td>Toggle theme</td></tr>
+              <tr><td><kbd>e</kbd></td><td>Expand / collapse all</td></tr>
+              <tr><td><kbd>Esc</kbd></td><td>Close modal / clear selection / blur input</td></tr>
+            </table>
+          </div>
+          <div class="help-section">
+            <h4>Navigation</h4>
+            <table>
+              <tr><td><kbd>j</kbd> / <kbd>↓</kbd></td><td>Next row</td></tr>
+              <tr><td><kbd>k</kbd> / <kbd>↑</kbd></td><td>Previous row</td></tr>
+              <tr><td><kbd>l</kbd> / <kbd>→</kbd></td><td>Expand group</td></tr>
+              <tr><td><kbd>h</kbd> / <kbd>←</kbd></td><td>Collapse group / go to parent</td></tr>
+              <tr><td><kbd>Enter</kbd> / <kbd>Space</kbd></td><td>Select / toggle</td></tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="app.js"></script>
   <script>
     if ('serviceWorker' in navigator) {

package/public/style.css

@@ -359,15 +359,30 @@ 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-indent {
   flex-shrink: 0;
@@ -433,10 +448,22 @@ 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;
+  color: var(--text-muted);
+  margin-left: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 9 1 0;
+  min-width: 0;
+  opacity: 0.75;
 }
 
 /* === SCOPE TOGGLE BOXES === */

package/server.js

@@ -7,6 +7,7 @@ const os = require('node:os');
 const chokidar = require('chokidar');
 const open = require('open').default || require('open');
 const snapshots = require('./lib/snapshot');
+const githubSource = require('./lib/github-source');
 const pkg = require('./package.json');
 
 const PORT = Number(process.env.PORT) || 5462;
@@ -39,12 +40,43 @@ 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) {
+  const roots = new Set();
+  const add = (x) => {
+    const baseDir = x?.sourceInfo?.baseDir;
+    if (typeof baseDir === 'string' && baseDir) roots.add(baseDir);
+  };
+  for (const t of snap.tools ?? []) add(t);
+  for (const c of snap.commands ?? []) add(c);
+  return [...roots];
+}
+
 app.get('/api/introspect', async (req, res) => {
   try {
     const sid = req.query.session ? String(req.query.session) : null;
     const snap = sid ? await snapshots.readSnapshot(sid) : await snapshots.readLatestSnapshot();
     if (!snap) return res.status(404).json({ error: 'no snapshot found', sessionId: sid });
-    res.json(snap);
+    const memoKey = snap.sessionId;
+    let githubSources = memoKey ? githubMemo.get(memoKey) : null;
+    if (!githubSources) {
+      githubSources = await githubSource.resolveMany(collectSourceRoots(snap));
+      if (memoKey) githubMemo.set(memoKey, githubSources);
+    }
+    res.json({ ...snap, githubSources });
   } catch (e) {
     res.status(500).json({ error: e.message });
   }