pi-inspect 0.1.0 → 0.2.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/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/package.json

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

@@ -8,8 +8,15 @@ const state = {
   expanded: { context: true, tool: true, command: 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,6 +99,13 @@ 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) {
@@ -109,12 +123,14 @@ function buildItems() {
   if (!s) return [];
   const items = [];
   for (const t of s.tools ?? []) {
+    const description = (t.description ?? '').replace(/\s+/g, ' ').trim();
     items.push({
       kind: 'tool',
       id: `tool:${t.name}`,
       name: t.name ?? '(tool)',
       source: inferSource(t),
-      description: t.description ?? '',
+      description,
+      chars: (t.description ?? '').length,
       active: (s.activeTools ?? []).includes(t.name),
       path: inferPath(t),
       raw: t,
@@ -123,12 +139,14 @@ function buildItems() {
   for (const c of s.commands ?? []) {
     const name = c.name ?? c.command ?? '';
     const isSkill = name.startsWith('skill:');
+    const description = (c.description ?? '').replace(/\s+/g, ' ').trim();
     items.push({
       kind: isSkill ? 'skill' : 'command',
       id: `${isSkill ? 'skill' : 'command'}:${name}`,
       name: `/${name}`,
       source: inferSource(c),
-      description: c.description ?? '',
+      description,
+      chars: (c.description ?? '').length,
       path: inferPath(c),
       raw: c,
     });
@@ -141,6 +159,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 +168,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,7 +184,7 @@ function filterItems(items) {
     if (!q) return true;
     return (
       it.name.toLowerCase().includes(q) ||
-      (it.description ?? '').toLowerCase().includes(q)
+      (it.source ?? '').toLowerCase().includes(q)
     );
   });
 }
@@ -280,17 +308,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 +334,11 @@ 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 rank = (s) => {
+              const i = ['auto', 'builtin'].indexOf(s);
+              return i === -1 ? Infinity : i;
+            };
+            return (rank(a) - rank(b)) || a.localeCompare(b);
           })
         : ['__all__'];
       if (!useSubgroups) bySource.set('__all__', list);
@@ -314,13 +347,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 +363,15 @@ 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>';
             html.push(`
               <div class="tree-row ${selected}" 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 +381,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 +405,7 @@ function renderTree() {
   root.querySelectorAll('.tree-row[data-item]').forEach((el) => {
     el.addEventListener('click', () => {
       state.selected = el.dataset.item;
+      state.highlight = -1;
       renderTree();
       renderDetail();
     });
@@ -424,12 +470,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 +510,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
 
@@ -540,6 +592,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 +609,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

@@ -45,6 +45,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 +72,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

@@ -438,6 +438,17 @@ body {
   flex-shrink: 0;
   white-space: nowrap;
 }
+.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,31 @@ app.get('/api/sessions', async (_req, res) => {
   }
 });
 
+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 });
   }