pi-inspect 0.4.0 → 0.5.0

package/README.md

@@ -31,6 +31,14 @@ Then use `/inspect start | stop | restart | status | open | list | snapshot` fro
 
 State is driven entirely through the `?session=` URL param — share or refresh URLs to pin views. The in-page picker also writes to the URL.
 
+## Sharing a snapshot
+
+Click **Share** in the topbar to copy a self-contained link of the current snapshot. The snapshot is `deflate-raw` compressed and base64url-encoded into the URL hash (`#s=…`) — no server, no upload, no account.
+
+Recipients open the link on the hosted static dashboard at **https://nikiforovall.blog/pi-inspect/** and see the exact same tools / commands / skills / system prompt. The page makes no network requests; everything is in the URL.
+
+Heads up: the link includes the system prompt and `cwd`. Don't share secrets you wouldn't paste in chat.
+
 ## What it captures
 
 - **Tools** — name, description, parameter schema, source

package/package.json

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

@@ -10,6 +10,7 @@ const state = {
   expandAll: true,
   highlight: -1,
   visibleRows: [],
+  staticMode: false,
 };
 const els = {};
 
@@ -358,7 +359,9 @@ function renderTree() {
   const root = $('treeContainer');
   const items = filterItems(buildItems());
   if (!state.snapshot) {
-    root.innerHTML = `<div class="loading">No snapshot for this session. Run <code>/inspect snapshot</code> in a pi session.</div>`;
+    root.innerHTML = state.staticMode
+      ? `<div class="loading">No snapshot in this URL. Open a shared link, or run pi /inspect locally.</div>`
+      : `<div class="loading">No snapshot for this session. Run <code>/inspect snapshot</code> in a pi session.</div>`;
     return;
   }
   if (!items.length) {
@@ -542,12 +545,13 @@ function renderDetail() {
 
   const ghUrl = githubUrlFor(it);
   const toggleInfo = toggleInfoFor(it);
+  const allowEditor = !state.staticMode && it.path;
   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>` : ''}
+        ${allowEditor ? `<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>
@@ -588,6 +592,7 @@ function renderDetail() {
   });
   const toggleBtn = $('toggleBtn');
   if (toggleBtn && toggleInfo) toggleBtn.addEventListener('click', async () => {
+    if (state.staticMode) { toast('shared view is read-only — run pi-inspect locally to toggle'); return; }
     toggleBtn.disabled = true;
     try {
       const r = await fetch('/api/toggle', {
@@ -677,6 +682,24 @@ function bindEvents() {
     renderTree();
   });
 
+  $('shareBtn').addEventListener('click', async () => {
+    if (!state.snapshot) { toast('no snapshot to share'); return; }
+    if (!window.piShare) { toast('share module not loaded'); return; }
+    const btn = $('shareBtn');
+    btn.classList.add('loading');
+    try {
+      const encoded = await window.piShare.encodeSnapshot(state.snapshot);
+      const url = window.piShare.buildShareUrl(encoded);
+      await navigator.clipboard.writeText(url);
+      const kb = Math.max(1, Math.round(url.length / 1024));
+      toast(`Share link copied — ${kb} KB. Paths redacted to <home>.`);
+    } catch (e) {
+      toast(`Share failed: ${e.message}`);
+    } finally {
+      btn.classList.remove('loading');
+    }
+  });
+
   $('refreshBtn').addEventListener('click', async () => {
     const btn = $('refreshBtn');
     btn.classList.add('loading');
@@ -887,6 +910,34 @@ function bindSse() {
 //#endregion
 
 //#region INIT
+async function loadSharedSnapshot() {
+  const param = window.piShare?.getSharedSnapshotParam();
+  if (!param) return false;
+  try {
+    state.snapshot = await window.piShare.decodeSnapshot(param);
+    state.currentSessionId = state.snapshot?.sessionId ?? null;
+    state.sessions = state.currentSessionId
+      ? [{ id: state.currentSessionId, name: state.snapshot.sessionName, cwd: state.snapshot.cwd }]
+      : [];
+    state.staticMode = true;
+    return true;
+  } catch (e) {
+    console.warn('Failed to decode shared snapshot:', e);
+    toast(`shared link decode failed: ${e.message}`, 'error');
+    return false;
+  }
+}
+
+function applyStaticModeUi() {
+  document.body.classList.add('static-mode');
+  for (const id of ['sessionSelect', 'cleanupSessionsBtn', 'refreshBtn']) {
+    const el = $(id);
+    if (el) el.style.display = 'none';
+  }
+  const share = $('shareBtn');
+  if (share) share.title = 'Re-copy this shared snapshot link';
+}
+
 (async function init() {
   try {
     if (localStorage.getItem('inspect.theme') === 'light') document.body.classList.add('light');
@@ -895,10 +946,20 @@ function bindSse() {
   bindResize();
   bindEvents();
 
-  await loadSessions();
-  const requested = getUrlSession();
-  await loadSnapshot(requested);
-  if (state.currentSessionId && !requested) setUrlSession(state.currentSessionId, true);
+  const sharedLoaded = await loadSharedSnapshot();
+  if (!sharedLoaded) {
+    try {
+      await loadSessions();
+      const requested = getUrlSession();
+      await loadSnapshot(requested);
+      if (state.currentSessionId && !requested) setUrlSession(state.currentSessionId, true);
+    } catch {
+      state.staticMode = true;
+      state.snapshot = null;
+    }
+  }
+
+  if (state.staticMode) applyStaticModeUi();
 
   if (state.snapshot?.systemPrompt) {
     const firstCtx = buildItems().find((x) => x.kind === 'context');
@@ -908,6 +969,6 @@ function bindSse() {
   renderTopbar();
   renderTree();
   renderDetail();
-  bindSse();
+  if (!state.staticMode) bindSse();
 })();
 //#endregion

package/public/index.html

@@ -42,6 +42,10 @@
       <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>
     </div>
+    <button class="topbar-btn" id="shareBtn" title="Copy a shareable link for the current snapshot">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+      Share
+    </button>
     <button class="topbar-btn" id="refreshBtn" title="Refresh data">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
       Refresh
@@ -111,11 +115,12 @@
     </div>
   </div>
 
+  <script src="share.js"></script>
   <script src="app.js"></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {
-        navigator.serviceWorker.register('/sw.js').catch((e) => console.warn('sw register failed:', e));
+        navigator.serviceWorker.register('./sw.js').catch((e) => console.warn('sw register failed:', e));
       });
     }
   </script>

package/public/share.js

@@ -0,0 +1,119 @@
+// Shareable snapshot encoding: JSON → deflate-raw → base64url.
+// URL shape mirrors plannotator.ai: `#s=<base64url>`.
+
+const HASH_PREFIX = '#s=';
+
+function bytesToBase64Url(bytes) {
+  let bin = '';
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+  return btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+function base64UrlToBytes(str) {
+  const pad = str.length % 4 === 0 ? '' : '='.repeat(4 - (str.length % 4));
+  const b64 = str.replace(/-/g, '+').replace(/_/g, '/') + pad;
+  const bin = atob(b64);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+
+async function streamThrough(transformer, bytes) {
+  const stream = new Blob([bytes]).stream().pipeThrough(transformer);
+  const buf = await new Response(stream).arrayBuffer();
+  return new Uint8Array(buf);
+}
+
+// Path-redaction: strip the sender's HOME prefix from every string and key,
+// in both slash flavors. Preserves project basename + relative tail so the
+// shared view still has useful structure ("<home>/dev/pi-inspect").
+function escapeRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function deriveHome(cwd) {
+  if (!cwd || typeof cwd !== 'string') return null;
+  const patterns = [
+    /^([a-zA-Z]:[\\/]Users[\\/][^\\/]+)/,   // Windows: C:\Users\<user>
+    /^(\/Users\/[^/]+)/,                    // macOS:   /Users/<user>
+    /^(\/home\/[^/]+)/,                     // Linux:   /home/<user>
+    /^(\/[a-zA-Z]\/Users\/[^/]+)/,          // Git Bash: /c/Users/<user>
+  ];
+  for (const re of patterns) {
+    const m = cwd.match(re);
+    if (m) return m[1];
+  }
+  return null;
+}
+
+function buildHomeReplacers(cwd) {
+  const home = deriveHome(cwd);
+  if (!home) return [];
+  const alt = home.includes('\\') ? home.replace(/\\/g, '/') : home.replace(/\//g, '\\');
+  const variants = new Set([home, alt]);
+  return [...variants].map((v) => [new RegExp(escapeRegex(v), 'g'), '<home>']);
+}
+
+function redactString(s, reps) {
+  if (typeof s !== 'string') return s;
+  let out = s;
+  for (const [re, rep] of reps) out = out.replace(re, rep);
+  return out;
+}
+
+// Keys whose values are home-path-keyed maps — redact keys here too.
+const PATH_KEYED_MAPS = new Set(['githubSources']);
+
+function redactDeep(value, reps, redactKeys) {
+  if (value == null) return value;
+  if (typeof value === 'string') return redactString(value, reps);
+  if (Array.isArray(value)) return value.map((v) => redactDeep(v, reps, false));
+  if (typeof value === 'object') {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+      const newKey = redactKeys ? redactString(k, reps) : k;
+      out[newKey] = redactDeep(v, reps, PATH_KEYED_MAPS.has(k));
+    }
+    return out;
+  }
+  return value;
+}
+
+function redactSnapshot(snapshot) {
+  if (!snapshot) return snapshot;
+  const reps = buildHomeReplacers(snapshot.cwd || '');
+  if (!reps.length) return snapshot;
+  return redactDeep(snapshot, reps, false);
+}
+
+async function encodeSnapshot(snapshot) {
+  const json = JSON.stringify(redactSnapshot(snapshot));
+  const raw = new TextEncoder().encode(json);
+  const compressed = await streamThrough(new CompressionStream('deflate-raw'), raw);
+  return bytesToBase64Url(compressed);
+}
+
+async function decodeSnapshot(encoded) {
+  const compressed = base64UrlToBytes(encoded);
+  const raw = await streamThrough(new DecompressionStream('deflate-raw'), compressed);
+  return JSON.parse(new TextDecoder().decode(raw));
+}
+
+function getSharedSnapshotParam() {
+  const h = location.hash || '';
+  return h.startsWith(HASH_PREFIX) ? h.slice(HASH_PREFIX.length) : null;
+}
+
+const PUBLIC_BASE_URL = 'https://nikiforovall.blog/pi-inspect/';
+
+function buildShareUrl(encoded) {
+  // Local pi-inspect runs on localhost — recipients can't open that. Always
+  // anchor share links on the hosted static dashboard. When the current page
+  // is already a non-localhost origin (e.g. the hosted site itself), reuse it.
+  const host = location.hostname;
+  const isLocal = !host || host === 'localhost' || host === '127.0.0.1' || host === '::1';
+  const base = isLocal ? PUBLIC_BASE_URL : `${location.origin}${location.pathname}`;
+  return `${base}${HASH_PREFIX}${encoded}`;
+}
+
+window.piShare = { encodeSnapshot, decodeSnapshot, getSharedSnapshotParam, buildShareUrl, redactSnapshot };

package/public/sw.js

@@ -1,6 +1,8 @@
 // pi-inspect service worker — network-first for dynamic data, cache-first for static shell.
-const VERSION = 'pi-inspect-v1';
-const SHELL = ['/', '/index.html', '/style.css', '/app.js', '/manifest.webmanifest', '/icon.svg'];
+const VERSION = 'pi-inspect-v6';
+// Resolve relative to the SW scope so this works under any subpath (e.g. GitHub Pages).
+const BASE = new URL('./', self.registration?.scope || self.location.href).pathname;
+const SHELL = ['', 'index.html', 'style.css', 'app.js', 'share.js', 'manifest.webmanifest', 'icon.svg'].map((p) => BASE + p);
 
 self.addEventListener('install', (event) => {
   event.waitUntil(caches.open(VERSION).then((c) => c.addAll(SHELL)).catch(() => {}));