npm - @bitpub/cli - Versions diffs - 2.0.0 - Mend

@bitpub/cli 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/static/console.html ADDED Viewed

@@ -0,0 +1,2263 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>BitPub Context Explorer</title>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  /* Canvas — warm neutral */
+  --bg-page: #FAF7F3;
+  --bg-card: #FFFFFF;
+  --bg-hover: #F3EDE5;
+  --bg-inset: #F1ECE4;
+  --bg-canvas: #F6F1E9;
+  /* Borders */
+  --border: #E6DCCC;
+  --border-soft: #EFE8DC;
+  --border-strong: #D6C9B4;
+  /* Text */
+  --text: #1E1A16;
+  --text-muted: #6F6762;
+  --text-subtle: #A39A92;
+  /* Accent — BitPub orange */
+  --accent: #E55733;
+  --accent-hover: #C8431D;
+  --accent-bg: #FCE8DE;
+  --accent-soft: rgba(229, 87, 51, .08);
+  /* Scope colors */
+  --scope-group: #E55733;
+  --scope-private: #7C3AED;
+  --scope-public: #0D9488;
+  /* Freshness tints */
+  --fresh-1h: #E55733;
+  --fresh-24h: #F0A47E;
+  --fresh-7d: #9C948D;
+  --fresh-older: #C4BBB1;
+  --radius: 6px;
+  --radius-sm: 4px;
+  --radius-lg: 10px;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --shadow-sm: 0 1px 0 rgba(30, 26, 22, .03);
+  --shadow-md: 0 4px 14px rgba(30, 26, 22, .06);
+}
+html, body { height: 100%; background: var(--bg-page); color: var(--text); font-family: var(--font); font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+svg { flex-shrink: 0; }
+/* ── Layout shell ───────────────────────────────────── */
+#app { display: flex; flex-direction: column; height: 100vh; }
+/* ── Address bar (top) ──────────────────────────────── */
+.addressbar {
+  height: 48px; flex-shrink: 0;
+  display: flex; align-items: center; gap: 12px;
+  padding: 0 14px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+}
+.wordmark { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; cursor: pointer; }
+.wordmark .mark { width: 18px; height: 18px; background: var(--accent); border-radius: 4px; position: relative; }
+.wordmark .mark::after { content: ""; position: absolute; inset: 4px; border-radius: 1px; background: var(--bg-card); }
+.wordmark .name { letter-spacing: -.01em; }
+.wordmark .soft { color: var(--text-subtle); font-weight: 500; }
+.mode-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); white-space: nowrap; }
+.mode-badge.local { background: var(--accent-bg); border-color: rgba(229,87,51,.3); color: var(--accent-hover); }
+.mode-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle); }
+.mode-badge.local .dot { background: var(--accent); }
+.address { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); overflow: hidden; }
+.address .seg { padding: 3px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--accent); white-space: nowrap; transition: background .1s, color .1s; }
+.address .seg:hover { background: var(--accent-soft); }
+.address .seg.scheme { color: var(--text-subtle); cursor: default; font-weight: 500; }
+.address .seg.scheme:hover { background: transparent; }
+.address .seg.current { color: var(--text); font-weight: 600; cursor: default; }
+.address .seg.current:hover { background: transparent; }
+.address .sep { color: var(--text-subtle); padding: 0 1px; user-select: none; }
+.address .glob { color: var(--text-subtle); font-weight: 500; padding-left: 4px; }
+.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; padding: 3px 8px; border-radius: 100px; }
+.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fresh-7d); position: relative; }
+.live.pulse .dot { background: var(--accent); }
+.live.pulse .dot::after {
+  content: ""; position: absolute; inset: -4px; border-radius: 50%;
+  background: var(--accent); opacity: .25;
+  animation: pulse 1.4s ease-out infinite;
+}
+@keyframes pulse {
+  0% { transform: scale(.6); opacity: .35; }
+  100% { transform: scale(2.2); opacity: 0; }
+}
+.search-box { position: relative; width: 240px; }
+.search-box input { width: 100%; background: var(--bg-inset); border: 1px solid transparent; border-radius: var(--radius); padding: 5px 12px 5px 30px; color: var(--text); font-size: 12.5px; font-family: var(--font); outline: none; transition: background .15s, border-color .15s; }
+.search-box input::placeholder { color: var(--text-subtle); }
+.search-box input:focus { background: var(--bg-card); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.search-box svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); }
+.search-box .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 10px; color: var(--text-subtle); border: 1px solid var(--border); background: var(--bg-card); border-radius: 3px; padding: 0 4px; pointer-events: none; line-height: 14px; }
+.search-box input:focus ~ .kbd { display: none; }
+/* ── Filter strip ───────────────────────────────────── */
+.filter-strip {
+  height: 38px; flex-shrink: 0;
+  display: flex; align-items: center; gap: 14px;
+  padding: 0 14px;
+  background: var(--bg-canvas);
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;
+}
+.filter-strip::-webkit-scrollbar { display: none; }
+.filter-label { font-size: 11px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; white-space: nowrap; }
+.pill-group { display: inline-flex; gap: 4px; }
+.pill {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 3px 9px; font-size: 11.5px; font-weight: 500;
+  border-radius: 100px; border: 1px solid var(--border);
+  background: var(--bg-card); color: var(--text-muted); cursor: pointer;
+  transition: background .1s, color .1s, border-color .1s;
+  white-space: nowrap;
+}
+.pill:hover { background: var(--bg-hover); color: var(--text); }
+.pill.active { background: var(--text); color: var(--bg-card); border-color: var(--text); }
+.pill.scope .dot { width: 7px; height: 7px; border-radius: 50%; }
+.pill.scope[data-scope="group"] .dot { background: var(--scope-group); }
+.pill.scope[data-scope="private"] .dot { background: var(--scope-private); }
+.pill.scope[data-scope="public"] .dot { background: var(--scope-public); }
+.pill.tag { background: var(--accent-bg); color: var(--accent-hover); border-color: rgba(229,87,51,.2); }
+.pill.tag .x { color: var(--text-subtle); margin-left: 2px; font-weight: 700; }
+.pill.tag:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+.pill.tag:hover .x { color: #fff; }
+.filter-divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }
+.filter-count { margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.filter-count .n { color: var(--text); font-weight: 600; }
+/* ── Body layout ────────────────────────────────────── */
+.layout { display: flex; flex: 1; min-height: 0; }
+#sidebar { width: 264px; min-width: 264px; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
+#main { flex: 1; overflow-y: auto; background: var(--bg-page); }
+#main::-webkit-scrollbar { width: 10px; }
+#main::-webkit-scrollbar-thumb { background: transparent; border-radius: 5px; border: 3px solid transparent; background-clip: content-box; }
+#main:hover::-webkit-scrollbar-thumb { background: var(--border); background-clip: content-box; }
+/* ── Sidebar / Tree ─────────────────────────────────── */
+.sidebar-header { padding: 12px 14px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); display: flex; align-items: center; justify-content: space-between; }
+.sidebar-header .clear-btn { font-size: 10.5px; color: var(--text-subtle); cursor: pointer; font-weight: 500; letter-spacing: 0; text-transform: none; }
+.sidebar-header .clear-btn:hover { color: var(--accent); }
+.tree-wrap { flex: 1; overflow-y: auto; padding: 0 6px 12px; }
+.tree-wrap::-webkit-scrollbar { width: 8px; }
+.tree-wrap::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
+.tree-wrap:hover::-webkit-scrollbar-thumb { background: var(--border); }
+.tree-node { user-select: none; }
+.tree-header, .tree-leaf { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px; color: var(--text); transition: background .05s; }
+.tree-header:hover, .tree-leaf:hover { background: var(--bg-hover); }
+.tree-header.active, .tree-leaf.active { background: var(--accent-bg); color: var(--accent-hover); }
+.chevron { width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-subtle); transition: transform .1s; }
+.tree-node.expanded > .tree-header > .chevron { transform: rotate(90deg); }
+.tree-node:not(.expanded) > .tree-children { display: none; }
+.tree-children { padding-left: 10px; border-left: 1px solid var(--border-soft); margin-left: 13px; }
+.tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tree-label.mono { font-family: var(--mono); font-size: 12px; }
+.tree-badge { font-size: 10.5px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
+.tree-lock { color: var(--scope-private); }
+.scope-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.scope-dot.group { background: var(--scope-group); }
+.scope-dot.private { background: var(--scope-private); }
+.scope-dot.public { background: var(--scope-public); }
+.fresh-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.fresh-dot.fresh { background: var(--fresh-1h); }
+.fresh-dot.h24 { background: var(--fresh-24h); }
+.fresh-dot.d7 { background: var(--fresh-7d); }
+.fresh-dot.older { background: var(--fresh-older); }
+/* Aggregated "N context slices" pseudo-leaf in the tree */
+.tree-leaf.tree-summary .tree-label { color: var(--text-muted); font-style: italic; }
+.tree-leaf.tree-summary:hover .tree-label { color: var(--text); }
+.tree-leaf.tree-summary.active .tree-label { color: var(--accent-hover); }
+.tree-leaf.tree-summary .tree-badge { font-family: var(--mono); }
+/* ── Right pane / panels ───────────────────────────── */
+.panel { padding: 20px 24px; max-width: 1180px; margin: 0 auto; }
+/* Section headings */
+.section-h { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 24px 0 10px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .05em; }
+.section-h:first-child { margin-top: 0; }
+.section-h .count { font-size: 11px; font-weight: 500; background: var(--bg-inset); color: var(--text-muted); padding: 1px 7px; border-radius: 100px; letter-spacing: 0; text-transform: none; }
+.section-h .live-hint { margin-left: auto; font-size: 10.5px; color: var(--text-subtle); letter-spacing: 0; text-transform: none; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
+.section-h .live-hint .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fresh-1h); }
+/* ── Stream card (overview) ─────────────────────────── */
+.stream { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.stream-row {
+  display: grid;
+  grid-template-columns: 12px auto auto minmax(0, 1fr) auto auto;
+  gap: 10px; align-items: center;
+  padding: 8px 14px;
+  border-top: 1px solid var(--border-soft);
+  cursor: pointer;
+  transition: background .05s;
+}
+.stream-row:first-child { border-top: none; }
+.stream-row:hover { background: var(--bg-hover); }
+.stream-row.new { animation: rowHighlight 2s ease-out; }
+@keyframes rowHighlight {
+  0% { background: var(--accent-soft); }
+  100% { background: transparent; }
+}
+.stream-row .hcu-tail { font-family: var(--mono); font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.stream-row .hcu-tail .scope-prefix { color: var(--text-subtle); }
+.stream-row .when { font-size: 11px; color: var(--text-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
+/* ── Agent chip (bot style) ─────────────────────────── */
+.agent-chip {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-family: var(--mono); font-size: 11px;
+  background: var(--bg-inset); border: 1px solid var(--border-soft);
+  border-radius: 3px; padding: 1px 6px; color: var(--text-muted);
+  white-space: nowrap;
+}
+.agent-chip .hex { width: 8px; height: 8px; color: var(--text-subtle); }
+.agent-chip:hover { border-color: var(--border); color: var(--text); }
+/* ── Scope pill (compact) ───────────────────────────── */
+.scope-pill {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 10.5px; font-weight: 500;
+  padding: 1px 7px; border-radius: 100px;
+  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted);
+  white-space: nowrap;
+}
+.scope-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
+.scope-pill.group .dot { background: var(--scope-group); }
+.scope-pill.private .dot { background: var(--scope-private); }
+.scope-pill.public .dot { background: var(--scope-public); }
+.scope-pill.private { border-color: rgba(124, 58, 237, .25); }
+.scope-pill .lock { color: var(--scope-private); }
+/* ── Version chip ───────────────────────────────────── */
+.ver-chip {
+  font-family: var(--mono); font-size: 10.5px;
+  padding: 1px 6px; border-radius: 3px;
+  background: var(--bg-inset); color: var(--text-muted);
+  white-space: nowrap;
+}
+/* ── Activity heatmap ───────────────────────────────── */
+.heatmap-card {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 16px 18px 14px;
+  margin-bottom: 20px;
+}
+.heatmap-head {
+  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+.heatmap-head h4 {
+  font-size: 10.5px; font-weight: 700; color: var(--text-subtle);
+  letter-spacing: .08em; text-transform: uppercase;
+}
+.heatmap-head .stats {
+  display: flex; gap: 14px; font-size: 11.5px; color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.heatmap-head .stats .k { color: var(--text); font-weight: 600; }
+.heatmap-head .sub {
+  margin-left: auto; font-size: 11px; color: var(--text-subtle);
+  font-style: italic;
+}
+.heatmap-grid {
+  display: flex; gap: 10px; align-items: flex-start;
+  justify-content: center;
+  overflow-x: auto; padding-bottom: 4px;
+}
+.heatmap-day-labels {
+  display: grid; gap: 3px;
+  padding-top: 16px;
+  font-size: 9.5px; color: var(--text-subtle);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  align-items: center;
+  justify-items: end;
+}
+.heatmap-day-labels span { visibility: hidden; }
+.heatmap-day-labels span:nth-child(2),
+.heatmap-day-labels span:nth-child(4),
+.heatmap-day-labels span:nth-child(6) { visibility: visible; }
+.heatmap-cols {
+  display: flex; flex-direction: column; gap: 2px;
+}
+.heatmap-months {
+  display: grid; grid-auto-flow: column; gap: 3px; height: 12px;
+  font-size: 9.5px; color: var(--text-subtle);
+  font-variant-numeric: tabular-nums; letter-spacing: .03em;
+  position: relative;
+}
+.heatmap-months .m {
+  position: absolute; top: 0; white-space: nowrap;
+}
+.heatmap-weeks {
+  display: grid; grid-auto-flow: column;
+}
+.heatmap-week {
+  display: grid;
+}
+.heatmap-cell {
+  border-radius: 3px;
+  background: var(--bg-inset);
+  border: 1px solid rgba(255,255,255,0.02);
+  transition: transform .08s, outline-color .1s;
+  cursor: default;
+}
+.heatmap-cell.l1 { background: rgba(255,107,53,0.22); }
+.heatmap-cell.l2 { background: rgba(255,107,53,0.45); }
+.heatmap-cell.l3 { background: rgba(255,107,53,0.72); }
+.heatmap-cell.l4 { background: var(--accent); outline: 1px solid rgba(255,107,53,0.45); outline-offset: 1px; }
+.heatmap-cell.placeholder { background: transparent; border-color: transparent; }
+.heatmap-cell:hover { transform: scale(1.25); z-index: 2; }
+.heatmap-legend {
+  display: flex; align-items: center; gap: 6px;
+  margin-top: 10px; font-size: 10.5px; color: var(--text-subtle);
+  font-variant-numeric: tabular-nums;
+}
+.heatmap-legend .cells { display: flex; gap: 3px; }
+.heatmap-legend .cells .c {
+  width: 11px; height: 11px; border-radius: 3px; background: var(--bg-inset);
+  border: 1px solid rgba(255,255,255,0.02);
+}
+.heatmap-legend .cells .c.l1 { background: rgba(255,107,53,0.22); }
+.heatmap-legend .cells .c.l2 { background: rgba(255,107,53,0.45); }
+.heatmap-legend .cells .c.l3 { background: rgba(255,107,53,0.72); }
+.heatmap-legend .cells .c.l4 { background: var(--accent); }
+/* ── Group README ───────────────────────────────────── */
+.readme-card {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 16px 22px 20px;
+  margin-bottom: 14px;
+}
+.readme-card + .readme-card { margin-top: 12px; }
+.readme-head {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  padding-bottom: 12px; margin-bottom: 14px;
+  border-bottom: 1px solid var(--border-soft);
+}
+.readme-head .label {
+  font-size: 10.5px; font-weight: 700; color: var(--text-subtle);
+  letter-spacing: .08em; text-transform: uppercase;
+}
+.readme-head .hcu {
+  font-family: var(--mono); font-size: 11.5px; color: var(--text-muted);
+  cursor: pointer;
+}
+.readme-head .hcu:hover { color: var(--accent-hover); }
+.readme-head .meta {
+  margin-left: auto; font-size: 11px; color: var(--text-subtle);
+  display: flex; align-items: center; gap: 8px;
+}
+.readme-body { font-size: 13.5px; line-height: 1.6; }
+.readme-body h1, .readme-body h2, .readme-body h3 { margin: 18px 0 8px; }
+.readme-body h1:first-child, .readme-body h2:first-child { margin-top: 0; }
+.readme-body p { margin: 8px 0; }
+.readme-body code { font-family: var(--mono); font-size: 12.5px; }
+.readme-empty-hint {
+  font-size: 11.5px; color: var(--text-subtle); margin-top: 10px;
+}
+.readme-empty-hint code {
+  font-family: var(--mono); font-size: 11.5px;
+  background: var(--bg-inset); padding: 2px 6px; border-radius: 4px;
+  color: var(--text-muted);
+}
+/* ── Namespace panel ────────────────────────────────── */
+.hcu-hero {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: var(--mono); font-size: 12.5px;
+  margin-bottom: 12px;
+}
+.hcu-hero .lock { color: var(--scope-private); }
+.hcu-hero .uri { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.hcu-hero .uri .scheme { color: var(--text-subtle); }
+.hcu-hero .uri .glob { color: var(--text-subtle); padding-left: 2px; }
+.hcu-hero .copy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-family: var(--font); transition: background .1s, color .1s; }
+.hcu-hero .copy-btn:hover { background: var(--bg-hover); color: var(--text); }
+.stats-strip { display: flex; align-items: center; gap: 16px; padding: 0 2px 12px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
+.stats-strip .s-item { display: inline-flex; align-items: center; gap: 5px; }
+.stats-strip .s-item .n { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
+.file-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.file-row {
+  display: grid;
+  grid-template-columns: 14px minmax(0, 1.4fr) minmax(0, 1.8fr) auto auto auto auto;
+  gap: 12px; align-items: center;
+  padding: 7px 14px;
+  border-top: 1px solid var(--border-soft);
+  cursor: pointer;
+  transition: background .05s;
+  font-size: 13px;
+}
+.file-row:first-child { border-top: none; }
+.file-row:hover { background: var(--bg-hover); }
+.file-row .f-icon { color: var(--text-subtle); display: inline-flex; }
+.file-row .f-icon.folder { color: var(--accent); }
+.file-row .f-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }
+.file-row .f-name.mono { font-family: var(--mono); font-size: 12.5px; font-weight: 400; }
+.file-row .f-preview { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-row .f-when { font-size: 11px; color: var(--text-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
+/* ── Slice panel (blob) ─────────────────────────────── */
+.blob-wrap { }
+.blob-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 2px 12px; font-size: 12px; color: var(--text-muted); }
+.blob-meta .sep { color: var(--border-strong); }
+.encrypted-note {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px;
+  background: rgba(124, 58, 237, .06);
+  border: 1px solid rgba(124, 58, 237, .2);
+  border-radius: var(--radius);
+  font-size: 12.5px;
+  color: var(--text);
+  margin-bottom: 12px;
+}
+.encrypted-note svg { color: var(--scope-private); }
+.encrypted-note code { font-family: var(--mono); font-size: 12px; background: var(--bg-card); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); }
+.blob-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.blob-toolbar { padding: 8px 12px; background: var(--bg-canvas); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.blob-toolbar .info { font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
+.blob-toolbar .spacer { flex: 1; }
+.btn-group { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-card); }
+.btn-group .btn { border: none; border-right: 1px solid var(--border); border-radius: 0; padding: 3px 10px; font-size: 11.5px; font-weight: 500; background: var(--bg-card); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background .1s, color .1s; font-family: var(--font); }
+.btn-group .btn:last-child { border-right: none; }
+.btn-group .btn:hover { background: var(--bg-hover); color: var(--text); }
+.btn-group .btn.active { background: var(--text); color: var(--bg-card); }
+.btn { padding: 4px 10px; font-size: 11.5px; font-weight: 500; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font); transition: background .1s, color .1s, border-color .1s; }
+.btn:hover { background: var(--bg-hover); color: var(--text); }
+/* Rendered markdown */
+.content-body { padding: 22px 26px; font-size: 14px; line-height: 1.65; color: var(--text); max-width: 860px; }
+.content-body h1 { font-size: 1.8em; font-weight: 700; margin: 20px 0 12px; letter-spacing: -.01em; }
+.content-body h2 { font-size: 1.4em; font-weight: 700; margin: 22px 0 10px; letter-spacing: -.005em; }
+.content-body h3 { font-size: 1.15em; font-weight: 600; margin: 18px 0 8px; }
+.content-body h4, .content-body h5, .content-body h6 { font-size: 1em; font-weight: 600; margin: 16px 0 6px; }
+.content-body p { margin: 0 0 12px; }
+.content-body strong { font-weight: 600; }
+.content-body em { font-style: italic; }
+.content-body ul, .content-body ol { padding-left: 1.6em; margin: 0 0 12px; }
+.content-body li { margin: .2em 0; }
+.content-body code { font-family: var(--mono); background: var(--bg-inset); padding: .1em .4em; border-radius: 3px; font-size: 88%; }
+.content-body pre { background: var(--bg-canvas); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; overflow-x: auto; font-size: 85%; line-height: 1.5; }
+.content-body pre code { background: none; padding: 0; font-size: 100%; }
+.content-body hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
+.content-body a { color: var(--accent); }
+.content-body blockquote { border-left: 3px solid var(--accent); padding: 0 0 0 12px; color: var(--text-muted); margin: 0 0 12px; }
+/* Raw */
+.content-raw { font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--text); background: var(--bg-card); padding: 14px 18px; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
+/* Tiny file info below blob */
+.blob-footer { padding: 6px 14px; font-size: 10.5px; color: var(--text-subtle); background: var(--bg-canvas); border-top: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
+/* ── Search Results ─────────────────────────────────── */
+.search-results { padding: 20px 24px; max-width: 920px; margin: 0 auto; }
+.search-results .count-line { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
+.result-item { padding: 12px 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .05s; padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; border-radius: var(--radius-sm); }
+.result-item:hover { background: var(--bg-hover); }
+.result-hcu { font-family: var(--mono); font-size: 12.5px; color: var(--accent); margin-bottom: 5px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.result-preview { font-size: 12.5px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
+.result-preview mark { background: var(--accent-bg); color: var(--accent-hover); border-radius: 2px; padding: 0 2px; font-weight: 600; }
+.result-hcu mark { background: var(--accent-bg); color: var(--accent-hover); padding: 0 2px; border-radius: 2px; }
+/* ── Auth Overlay ───────────────────────────────────── */
+.auth-overlay { position: fixed; inset: 0; background: rgba(250, 247, 243, .94); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
+.auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 30px; max-width: 380px; width: 100%; box-shadow: var(--shadow-md); }
+.auth-card .auth-mark { display: flex; justify-content: center; margin-bottom: 14px; }
+.auth-card .auth-mark .m { width: 36px; height: 36px; background: var(--accent); border-radius: 8px; position: relative; }
+.auth-card .auth-mark .m::after { content: ""; position: absolute; inset: 8px; border-radius: 2px; background: var(--bg-card); }
+.auth-card h2 { font-size: 18px; margin-bottom: 4px; font-weight: 600; text-align: center; }
+.auth-card p { font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; text-align: center; }
+.auth-card label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
+.auth-card input { width: 100%; padding: 7px 11px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--mono); font-size: 12.5px; outline: none; margin-bottom: 14px; transition: border-color .15s, box-shadow .15s; }
+.auth-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.auth-card button { width: 100%; padding: 8px 14px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); transition: background .15s; }
+.auth-card button:hover { background: var(--accent-hover); }
+.auth-error { color: var(--accent-hover); font-size: 12px; margin-bottom: 10px; background: var(--accent-bg); border: 1px solid rgba(229,87,51,.25); border-radius: var(--radius-sm); padding: 6px 10px; }
+/* ── Welcome Panel (embedded in overview) ──────────────
+   Shown above "Recent writes" on the home view when (a) the only memory
+   in the cache is the user's auto-saved Welcome slice, or (b) the URL
+   carries ?welcome=1 (the install.sh entry point). Not a popup — sits
+   inline so the user can look around the explorer without dismissing.
+   Auto-disappears once the user has saved any non-welcome memory.
+*/
+.welcome-card {
+  position: relative;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 32px 36px 24px;
+  margin-bottom: 28px;
+  animation: welcomeFade .25s ease-out;
+}
+@media (max-width: 720px) {
+  .welcome-card { padding: 24px 20px 18px; }
+}
+@keyframes welcomeFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+.welcome-hero { text-align: center; margin-bottom: 22px; }
+.welcome-hero .welcome-mark {
+  width: 44px; height: 44px;
+  background: var(--accent); border-radius: 10px;
+  margin: 0 auto 14px; position: relative;
+}
+.welcome-hero .welcome-mark::after {
+  content: ""; position: absolute; inset: 10px; border-radius: 2px; background: var(--bg-card);
+}
+.welcome-hero h1 {
+  font-size: 22px; font-weight: 600; letter-spacing: -.01em;
+  margin-bottom: 6px;
+}
+.welcome-hero p {
+  font-size: 13.5px; color: var(--text-muted);
+  max-width: 560px; margin: 0 auto; line-height: 1.55;
+}
+.welcome-hero p strong { color: var(--text); font-weight: 600; }
+.welcome-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  margin-bottom: 24px;
+}
+@media (max-width: 720px) {
+  .welcome-grid { grid-template-columns: 1fr; }
+}
+.welcome-cta {
+  text-align: left;
+  background: var(--bg-page);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 18px 18px 16px;
+  cursor: pointer;
+  font-family: var(--font); color: var(--text);
+  text-decoration: none;
+  transition: transform .12s, border-color .12s, box-shadow .12s, background .12s;
+  display: flex; flex-direction: column;
+  position: relative;
+}
+.welcome-cta:hover {
+  transform: translateY(-1px);
+  border-color: var(--border-strong);
+  background: var(--bg-card);
+  box-shadow: var(--shadow-md);
+  text-decoration: none;
+}
+.welcome-cta-num {
+  width: 22px; height: 22px;
+  background: var(--accent-bg);
+  color: var(--accent-hover);
+  border-radius: 50%;
+  font-size: 11px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+  margin-bottom: 12px;
+}
+.welcome-cta h3 {
+  font-size: 14.5px; font-weight: 600;
+  margin-bottom: 6px; letter-spacing: -.005em;
+}
+.welcome-cta p {
+  font-size: 12.5px; color: var(--text-muted);
+  line-height: 1.5; flex: 1;
+}
+.welcome-cta-tag {
+  display: inline-block; align-self: flex-start;
+  margin-top: 12px;
+  font-size: 10.5px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: .06em;
+  color: var(--text-subtle);
+  padding: 3px 7px;
+  background: var(--bg-inset);
+  border-radius: 100px;
+}
+.welcome-cta-tag.live {
+  color: var(--accent-hover);
+  background: var(--accent-bg);
+}
+.welcome-footer {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 12px;
+  padding-top: 18px;
+  border-top: 1px solid var(--border-soft);
+}
+@media (max-width: 720px) {
+  .welcome-footer { flex-direction: column-reverse; }
+}
+.welcome-link {
+  background: transparent; border: 0;
+  color: var(--accent); font-size: 13px; font-weight: 600;
+  cursor: pointer; padding: 6px 0;
+  font-family: var(--font);
+}
+.welcome-link:hover { text-decoration: underline; }
+.welcome-link.muted { color: var(--text-subtle); font-weight: 500; }
+.welcome-skip {
+  background: transparent; border: 1px solid var(--border);
+  color: var(--text-muted); font-size: 12.5px; font-weight: 500;
+  padding: 6px 14px; border-radius: var(--radius-sm);
+  cursor: pointer; font-family: var(--font);
+  transition: background .12s, border-color .12s;
+}
+.welcome-skip:hover { background: var(--bg-hover); border-color: var(--border-strong); }
+.welcome-toast {
+  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
+  background: var(--text); color: var(--bg-card);
+  font-size: 12.5px; padding: 9px 16px;
+  border-radius: 100px;
+  box-shadow: 0 6px 20px rgba(30, 26, 22, .18);
+  z-index: 110;
+  animation: welcomeToast 2.4s ease-out forwards;
+}
+@keyframes welcomeToast {
+  0% { opacity: 0; transform: translate(-50%, 8px); }
+  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
+  100% { opacity: 0; transform: translate(-50%, -4px); }
+}
+/* ── Empty State ────────────────────────────────────── */
+.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 32px; text-align: center; color: var(--text-muted); }
+.empty svg { color: var(--text-subtle); margin-bottom: 14px; opacity: .6; }
+.empty h2 { font-size: 17px; color: var(--text); margin-bottom: 8px; font-weight: 600; }
+.empty p { max-width: 420px; font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
+.empty code { background: var(--bg-card); border: 1px solid var(--border); padding: 2px 6px; border-radius: 3px; font-size: 12px; color: var(--text); font-family: var(--mono); }
+/* ── Tooltip ────────────────────────────────────────── */
+.tooltip { position: fixed; background: var(--text); border-radius: 4px; padding: 4px 8px; font-size: 11px; font-family: var(--mono); color: var(--bg-page); pointer-events: none; z-index: 50; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
+/* ── Cell state (volatility) ────────────────────────── */
+.cell-state {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 10.5px; font-weight: 500;
+  padding: 1px 8px; border-radius: 100px;
+  border: 1px solid var(--border); background: var(--bg-card);
+  white-space: nowrap; font-variant-numeric: tabular-nums;
+  cursor: help;
+}
+.cell-state .pip { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; position: relative; }
+.cell-state.hot    { color: var(--accent-hover); border-color: rgba(229,87,51,.3); background: var(--accent-bg); }
+.cell-state.hot .pip    { background: var(--accent); }
+.cell-state.hot .pip::after {
+  content: ""; position: absolute; inset: -3px; border-radius: 50%;
+  background: var(--accent); opacity: .3;
+  animation: pulse 1.4s ease-out infinite;
+}
+.cell-state.active { color: var(--text); border-color: var(--border-strong); }
+.cell-state.active .pip { background: var(--fresh-24h); }
+.cell-state.new    { color: #047857; border-color: rgba(13,148,136,.3); background: rgba(13,148,136,.08); }
+.cell-state.new .pip    { background: var(--scope-public); }
+.cell-state.stable { color: var(--text-muted); }
+.cell-state.stable .pip { background: var(--fresh-7d); }
+.cell-state.dormant { color: var(--text-subtle); }
+.cell-state.dormant .pip { background: var(--fresh-older); }
+/* Tombstone state: visually distinct from the active ladder. Strikethrough
+   on the pill text to reinforce that this slice is in deleted state. */
+.cell-state.deleted {
+  color: #b91c1c;
+  border-color: rgba(185,28,28,.3);
+  background: rgba(185,28,28,.06);
+  text-decoration: line-through;
+  text-decoration-color: rgba(185,28,28,.55);
+}
+.cell-state.deleted .pip { background: #b91c1c; text-decoration: none; }
+/* ── Snapshot banner (slice view) ───────────────────── */
+.snapshot-banner {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 14px;
+  background: var(--bg-canvas);
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-radius: var(--radius) var(--radius) 0 0;
+  font-size: 12px; color: var(--text-muted);
+  flex-wrap: wrap;
+}
+.snapshot-banner .title { color: var(--text); font-weight: 600; letter-spacing: -.005em; }
+.snapshot-banner .ver { font-family: var(--mono); color: var(--text-muted); }
+.snapshot-banner .caveat { margin-left: auto; font-size: 11px; color: var(--text-subtle); display: inline-flex; align-items: center; gap: 5px; }
+.snapshot-banner .caveat svg { color: var(--text-subtle); }
+.blob-container.has-banner { border-top-left-radius: 0; border-top-right-radius: 0; }
+/* ── Write guide (slice view) ───────────────────────── */
+.write-guide {
+  margin-top: 14px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius); overflow: hidden;
+}
+.write-guide summary {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px; cursor: pointer;
+  font-size: 12px; font-weight: 600; color: var(--text-muted);
+  list-style: none;
+  transition: background .1s, color .1s;
+}
+.write-guide summary::-webkit-details-marker { display: none; }
+.write-guide summary::before {
+  content: ""; width: 6px; height: 6px;
+  border-right: 1.5px solid var(--text-subtle);
+  border-bottom: 1.5px solid var(--text-subtle);
+  transform: rotate(-45deg); transition: transform .15s;
+  flex-shrink: 0;
+}
+.write-guide[open] summary::before { transform: rotate(45deg); }
+.write-guide summary:hover { color: var(--text); background: var(--bg-hover); }
+.write-guide summary .hint { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-subtle); }
+.write-guide .body { padding: 4px 16px 16px; border-top: 1px solid var(--border-soft); }
+.write-guide .mode { margin-top: 14px; }
+.write-guide .mode h5 { font-size: 11.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
+.write-guide .mode p { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
+.write-guide .mode pre {
+  background: var(--bg-canvas); border: 1px solid var(--border-soft);
+  border-radius: var(--radius-sm); padding: 8px 12px;
+  font-family: var(--mono); font-size: 11.5px; color: var(--text);
+  overflow-x: auto; white-space: pre; line-height: 1.55;
+}
+/* ── Siblings panel (slice view) ────────────────────── */
+.siblings-panel { margin-top: 16px; }
+.siblings-panel .heading {
+  font-size: 11px; font-weight: 700; color: var(--text-subtle);
+  text-transform: uppercase; letter-spacing: .06em;
+  margin-bottom: 8px; padding: 0 2px;
+  display: flex; align-items: center; gap: 8px;
+}
+.siblings-panel .heading .note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-subtle); }
+.siblings-panel .list { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.siblings-panel .row {
+  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto;
+  gap: 10px; align-items: center;
+  padding: 5px 14px; cursor: pointer;
+  border-top: 1px solid var(--border-soft);
+  font-size: 12px; transition: background .05s;
+}
+.siblings-panel .more {
+  padding: 6px 14px; font-size: 11.5px; color: var(--text-subtle);
+  border-top: 1px solid var(--border-soft);
+  background: var(--bg-canvas);
+  font-variant-numeric: tabular-nums;
+}
+.siblings-panel .row:first-child { border-top: none; }
+.siblings-panel .row:hover { background: var(--bg-hover); }
+.siblings-panel .row.self { background: var(--accent-soft); cursor: default; }
+.siblings-panel .row .name { font-family: var(--mono); font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.siblings-panel .row.self .name { color: var(--accent-hover); font-weight: 600; }
+.siblings-panel .row .when { font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.siblings-panel .row .self-label { font-size: 10.5px; color: var(--accent-hover); font-weight: 600; }
+/* Subtle stream subtitle */
+.stream-sub { font-size: 11.5px; color: var(--text-subtle); margin: -6px 0 10px 2px; font-weight: 400; letter-spacing: 0; text-transform: none; }
+.hidden { display: none !important; }
+</style>
+</head>
+<body>
+<div id="app">
+  <!-- Auth overlay -->
+  <div id="auth-overlay" class="auth-overlay hidden">
+    <div class="auth-card">
+      <div class="auth-mark"><div class="m"></div></div>
+      <h2>Context Explorer</h2>
+      <p>Sign in with your BitPub API key to browse your organization's agent memory.</p>
+      <div id="auth-error" class="auth-error hidden"></div>
+      <label for="auth-key">API key</label>
+      <input id="auth-key" type="password" placeholder="tb_..." autocomplete="off">
+      <button onclick="submitAuth()">Sign in</button>
+    </div>
+  </div>
+  <!-- Address bar -->
+  <header class="addressbar">
+    <div class="wordmark" onclick="goRoot()">
+      <span class="mark"></span>
+      <span class="name">bitpub</span>
+    </div>
+    <div id="mode-badge" class="mode-badge"><span class="dot"></span><span class="label">—</span></div>
+    <div id="address" class="address"></div>
+    <div id="live" class="live"><span class="dot"></span><span class="label">—</span></div>
+    <div class="search-box">
+      <input id="search" type="text" placeholder="Search slices..." oninput="handleSearch(this.value)">
+      <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M10.68 11.74a6 6 0 01-7.922-8.982 6 6 0 018.982 7.922l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04zM11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7z"/></svg>
+      <span class="kbd">/</span>
+    </div>
+  </header>
+  <!-- Filter strip -->
+  <div id="filter-strip" class="filter-strip"></div>
+  <!-- Body -->
+  <div class="layout">
+    <aside id="sidebar">
+      <div class="sidebar-header">
+        <span>Namespaces</span>
+        <span id="clear-filter-btn" class="clear-btn hidden" onclick="clearFilter()">Clear</span>
+      </div>
+      <div id="tree" class="tree-wrap"></div>
+    </aside>
+    <main id="main"></main>
+  </div>
+</div>
+<div id="tooltip" class="tooltip hidden"></div>
+<script>
+/* ══════════════════════════════════════════════════════
+   State
+   ══════════════════════════════════════════════════════ */
+const S = {
+  slices: [],
+  tree: {},
+  stats: {},
+  mode: 'remote',
+  domain: '',
+  apiKey: sessionStorage.getItem('bitpub_key'),
+  raw: false,
+  searchQuery: '',
+  // Navigation
+  view: 'overview',   // 'overview' | 'namespace' | 'slice' | 'search'
+  currentScope: null, // scope string when namespace/slice
+  currentPath: [],    // array of path segments
+  selectedHcu: null,
+  // Filter state
+  filter: {
+    scopes: new Set(),      // Set<'group'|'private'|'public'>
+    freshness: 'all',       // 'all'|'1h'|'24h'|'7d'
+    tags: new Set(),
+  },
+  // Live
+  lastUpdated: null,
+  newArrivals: new Set(),   // hcus just arrived
+};
+const $ = id => document.getElementById(id);
+/* ══════════════════════════════════════════════════════
+   Icons
+   ══════════════════════════════════════════════════════ */
+const ICON = {
+  folder:  '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3H7.5a.25.25 0 01-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z"/></svg>',
+  file:    '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113.25 16h-9.5A1.75 1.75 0 012 14.25V1.75zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 00.25-.25V6h-2.75A1.75 1.75 0 019 4.25V1.5H3.75z"/></svg>',
+  chev:    '<svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor"><path d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"/></svg>',
+  lock:    '<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4 4v2h-.25A1.75 1.75 0 002 7.75v5.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-5.5A1.75 1.75 0 0012.25 6H12V4a4 4 0 00-8 0zm6.5 2V4a2.5 2.5 0 00-5 0v2h5z"/></svg>',
+  copy:    '<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/></svg>',
+  hex:     '<svg class="hex" viewBox="0 0 12 12" fill="currentColor"><path d="M6 0L11.196 3V9L6 12L0.804 9V3L6 0Z"/></svg>',
+  search:  '<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M10.68 11.74a6 6 0 01-7.922-8.982 6 6 0 018.982 7.922l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"/></svg>',
+  info:    '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM6.5 7.75A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"/></svg>',
+  warn:    '<svg width="40" height="40" viewBox="0 0 16 16" fill="currentColor"><path d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zM6.462 1.11a1.75 1.75 0 013.076 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.538-2.512L6.462 1.11zM8 5a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0v-2.5A.75.75 0 018 5zm1 6a1 1 0 11-2 0 1 1 0 012 0z"/></svg>',
+  empty:   '<svg width="40" height="40" viewBox="0 0 16 16" fill="currentColor"><path d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75z"/></svg>',
+};
+/* ══════════════════════════════════════════════════════
+   Boot & data
+   ══════════════════════════════════════════════════════ */
+async function boot() {
+  const data = await fetchData();
+  if (!data) return;
+  ingestData(data);
+  renderAll();
+  setInterval(pollData, 30000);
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') pollData();
+  });
+  // Refit layout (notably the activity heatmap week-count) on resize.
+  let resizeTimer;
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(renderAll, 120);
+  });
+}
+/* ══════════════════════════════════════════════════════
+   Welcome panel (embedded in overview, not a popup)
+   Trigger: ?welcome=1 in URL OR the only memory in cache is the
+   user's auto-saved Welcome slice. Auto-disappears after the user
+   has saved any non-welcome memory.
+   ══════════════════════════════════════════════════════ */
+const WELCOME_RE = /^bitpub:\/\/private:[^/]+\/Welcome$/;
+function findWelcomeSlice(slices) {
+  return (slices || S.slices).find(s => WELCOME_RE.test(s.hcu));
+}
+function shouldShowWelcomePanel(slices) {
+  // Forced via URL — useful for re-opening the panel after dismissal,
+  // or for install.sh which always opens with ?welcome=1 set.
+  const params = new URLSearchParams(location.search);
+  if (params.get('welcome') === '1') return true;
+  // Auto: the user has only the auto-saved Welcome slice (fresh install).
+  // We compare against S.slices (total), not the filtered list, so a
+  // search/filter doesn't accidentally trigger the welcome state.
+  const total = S.slices;
+  if (total.length === 1 && WELCOME_RE.test(total[0].hcu)) return true;
+  return false;
+}
+function renderWelcomePanel() {
+  return `
+    <div class="welcome-card">
+      <div class="welcome-hero">
+        <div class="welcome-mark"></div>
+        <h1>Welcome to BitPub.</h1>
+        <p>Your install worked. <strong>Your first memory is saved</strong> in your private, end-to-end-encrypted namespace. Here's what to try next.</p>
+      </div>
+      <div class="welcome-grid">
+        <button class="welcome-cta" type="button" onclick="welcomeAction('skill')">
+          <div class="welcome-cta-num">1</div>
+          <h3>Install a skill</h3>
+          <p>Add a curated skill from the public catalog. One click — your agent picks it up automatically. No clone, no PATH, no folder structure to figure out.</p>
+          <span class="welcome-cta-tag">coming soon</span>
+        </button>
+        <button class="welcome-cta" type="button" onclick="welcomeAction('share')">
+          <div class="welcome-cta-num">2</div>
+          <h3>Share with your team</h3>
+          <p>Generate a link teammates click to read your shared context. No GitHub invites, no repo access, no PRs.</p>
+          <span class="welcome-cta-tag">coming soon</span>
+        </button>
+        <a class="welcome-cta" href="https://github.com/tollbit/shared-memory-protocol/blob/main/COOKBOOK.md" target="_blank" rel="noopener">
+          <div class="welcome-cta-num">3</div>
+          <h3>See what you can build</h3>
+          <p>Real patterns teams have built on top of BitPub — async job queues, self-distributing tools, multi-agent pipelines.</p>
+          <span class="welcome-cta-tag live">cookbook &rarr;</span>
+        </a>
+      </div>
+      <div class="welcome-footer">
+        <button class="welcome-link" type="button" onclick="viewWelcomeSlice()">View your first saved memory &rarr;</button>
+      </div>
+    </div>
+  `;
+}
+function welcomeAction(kind) {
+  // Skill catalog and team-sharing flows are not built yet. Surface a
+  // friendly toast so the click feels acknowledged rather than dead.
+  const msg = kind === 'skill'
+    ? 'Skill catalog is coming soon. For now, the README has the manual flow.'
+    : 'One-click team sharing is coming soon. Today, run: bitpub auth login --domain yourcompany.com';
+  showWelcomeToast(msg);
+}
+function viewWelcomeSlice() {
+  const wel = findWelcomeSlice();
+  if (wel) {
+    selectSlice(wel.hcu);
+  } else {
+    // Race: install.sh's push hasn't landed in the local cache yet.
+    // Stay on overview — the slice will appear within seconds.
+    showWelcomeToast('Your welcome memory will appear in the explorer shortly.');
+  }
+}
+function showWelcomeToast(msg) {
+  const existing = document.querySelector('.welcome-toast');
+  if (existing) existing.remove();
+  const t = document.createElement('div');
+  t.className = 'welcome-toast';
+  t.textContent = msg;
+  document.body.appendChild(t);
+  setTimeout(() => t.remove(), 2600);
+}
+function ingestData(data) {
+  S.slices = data.slices.map(parseSlice);
+  S.mode = data.mode || 'remote';
+  S.domain = data.domain || '';
+  S.tree = buildTree(S.slices);
+  S.stats = computeStats(S.slices);
+  S.lastUpdated = maxTs(S.slices);
+}
+async function fetchData(opts = {}) {
+  try {
+    const headers = {};
+    if (S.apiKey) headers['x-api-key'] = S.apiKey;
+    const base = location.pathname.endsWith('/') ? location.pathname : location.pathname + '/';
+    const r = await fetch(base + 'api/data', { headers });
+    if (r.status === 401 || r.status === 403) { if (!opts.silent) showAuth(); return null; }
+    if (!r.ok) throw new Error(r.status);
+    return r.json();
+  } catch (e) {
+    if (!opts.silent) {
+      $('main').innerHTML = `<div class="empty">${ICON.warn}
+        <h2>Connection failed</h2>
+        <p>Could not reach the API. Make sure the server is running.</p></div>`;
+    }
+    return null;
+  }
+}
+async function pollData() {
+  if (document.visibilityState !== 'visible') return;
+  const data = await fetchData({ silent: true });
+  if (!data) return;
+  const oldKey = new Set(S.slices.map(s => s.hcu + '|' + (s.last_synced || '')));
+  const nextSlices = data.slices.map(parseSlice);
+  const arrivals = new Set();
+  for (const s of nextSlices) {
+    const k = s.hcu + '|' + (s.last_synced || '');
+    if (!oldKey.has(k)) arrivals.add(s.hcu);
+  }
+  S.slices = nextSlices;
+  S.mode = data.mode || S.mode;
+  S.tree = buildTree(S.slices);
+  S.stats = computeStats(S.slices);
+  S.lastUpdated = maxTs(S.slices);
+  if (arrivals.size) {
+    S.newArrivals = arrivals;
+    triggerLivePulse();
+    setTimeout(() => { S.newArrivals = new Set(); }, 2500);
+  }
+  renderAll();
+}
+function triggerLivePulse() {
+  $('live').classList.add('pulse');
+  clearTimeout(triggerLivePulse._t);
+  triggerLivePulse._t = setTimeout(() => $('live').classList.remove('pulse'), 4000);
+}
+function showAuth() {
+  $('auth-overlay').classList.remove('hidden');
+  setTimeout(() => $('auth-key').focus(), 100);
+}
+async function submitAuth() {
+  const key = $('auth-key').value.trim();
+  if (!key) return;
+  S.apiKey = key;
+  sessionStorage.setItem('bitpub_key', key);
+  $('auth-error').classList.add('hidden');
+  const data = await fetchData();
+  if (data) { $('auth-overlay').classList.add('hidden'); ingestData(data); renderAll(); }
+  else { $('auth-error').textContent = 'Invalid API key'; $('auth-error').classList.remove('hidden'); S.apiKey = null; sessionStorage.removeItem('bitpub_key'); }
+}
+/* ══════════════════════════════════════════════════════
+   Parsing & helpers
+   ══════════════════════════════════════════════════════ */
+function parseSlice(s) {
+  const meta = typeof s.metadata === 'string' ? JSON.parse(s.metadata) : (s.metadata || {});
+  const payload = typeof s.payload === 'string' ? JSON.parse(s.payload) : (s.payload || {});
+  // The canonical "when was this last written" timestamp. The internal field
+  // name `last_synced` is a misnomer kept for back-compat with downstream
+  // renderers; the *value* is now write time, not cache freshness. Order:
+  //   1. metadata.timestamp — author-declared write time, the truth-iest
+  //   2. updated_at         — server-side row-update time, almost always equal
+  //   3. last_synced        — local cache fetch time, last-resort fallback
+  // Reversing the prior order matters: an explicit `bitpub fetch` or
+  // `recent --sync` must NOT make every slice look freshly written.
+  const updated = meta.timestamp || s.updated_at || s.last_synced || null;
+  return {
+    hcu: s.hcu,
+    metadata: meta,
+    payload,
+    last_synced: updated,                  // write time (legacy field name)
+    cached_at: s.last_synced || null,      // genuine cache freshness, local-only
+    deleted_at: s.deleted_at || null,
+    deleted_by: s.deleted_by || null,
+    written_by: s.written_by || null,
+  };
+}
+function scopeOf(hcu) {
+  const m = hcu.match(/^bitpub:\/\/([^/]+)/);
+  if (!m) return { scope: '', type: 'group' };
+  const scope = m[1];
+  const type = scope.startsWith('private:') ? 'private' : scope.startsWith('group:') ? 'group' : 'public';
+  return { scope, type };
+}
+function pathOf(hcu) {
+  const m = hcu.match(/^bitpub:\/\/[^/]+(\/.*)?$/);
+  return (m && m[1]) ? m[1].replace(/^\//, '').split('/') : [];
+}
+function buildTree(slices) {
+  const tree = {};
+  for (const s of slices) {
+    const { scope, type } = scopeOf(s.hcu);
+    const segs = pathOf(s.hcu);
+    if (!tree[scope]) tree[scope] = { type, children: {}, count: 0 };
+    let node = tree[scope]; node.count++;
+    for (let i = 0; i < segs.length; i++) {
+      if (!node.children[segs[i]]) node.children[segs[i]] = { children: {}, count: 0 };
+      node = node.children[segs[i]]; node.count++;
+      if (i === segs.length - 1) node.slice = s;
+    }
+  }
+  return tree;
+}
+function computeStats(slices) {
+  const byScope = { group: 0, private: 0, public: 0 };
+  const byFresh = { fresh: 0, h24: 0, d7: 0, older: 0 };
+  const tags = {};
+  const authors = {};
+  let latest = null;
+  const nsCounts = {};
+  for (const s of slices) {
+    byScope[scopeOf(s.hcu).type]++;
+    byFresh[freshnessOf(s.last_synced)]++;
+    (s.metadata.tags || []).forEach(t => { tags[t] = (tags[t] || 0) + 1; });
+    const author = s.metadata.author_id || s.written_by || 'unknown';
+    authors[author] = (authors[author] || 0) + 1;
+    const ts = s.last_synced || s.metadata.timestamp;
+    if (ts && (!latest || ts > latest)) latest = ts;
+    const top = pathOf(s.hcu)[0];
+    if (top) nsCounts[top] = (nsCounts[top] || 0) + 1;
+  }
+  return { total: slices.length, byScope, byFresh, tags, tagCount: Object.keys(tags).length, authors, authorCount: Object.keys(authors).length, latest, nsCounts };
+}
+function maxTs(slices) {
+  let m = null;
+  for (const s of slices) {
+    const ts = s.last_synced || s.metadata.timestamp;
+    if (ts && (!m || ts > m)) m = ts;
+  }
+  return m;
+}
+function freshnessOf(ts) {
+  if (!ts) return 'older';
+  const ms = Date.now() - new Date(ts).getTime();
+  if (ms < 0) return 'fresh';
+  if (ms < 3600e3) return 'fresh';         // <1h
+  if (ms < 86400e3) return 'h24';          // <24h
+  if (ms < 7 * 86400e3) return 'd7';       // <7d
+  return 'older';
+}
+// Volatility signal: how "alive" is this cell?
+// Only the latest value is retained, so version count is our proxy for
+// how often this path has been rewritten.
+function cellStateOf(slice) {
+  // Tombstones short-circuit the freshness ladder: a deleted slice is a
+  // single state regardless of how recently it was written. Restoring it
+  // (via `bitpub restore`) clears `deleted_at` and the slice falls back
+  // through the normal hot/active/stable/dormant ladder.
+  if (slice.deleted_at) {
+    const when = timeAgo(slice.deleted_at);
+    const ver = slice.metadata?.version || 1;
+    return { key: 'deleted', label: `deleted · v${ver}`, hint: `tombstoned ${when}. Recover with \`bitpub restore --address ${slice.hcu}\`.` };
+  }
+  const ver = slice.metadata?.version || 1;
+  const fresh = freshnessOf(slice.last_synced);
+  const recent = fresh === 'fresh' || fresh === 'h24';
+  const ago = slice.last_synced ? timeAgo(slice.last_synced) : 'unknown';
+  if (recent && ver >= 5)      return { key: 'hot',     label: `hot · v${ver}`, hint: `rewritten ${ver}× · last change ${ago}. Expect further writes.` };
+  if (recent && ver === 1)     return { key: 'new',     label: 'new',           hint: `first write — never overwritten (${ago})` };
+  if (recent)                  return { key: 'active',  label: 'active',        hint: `changed ${ago} · now on v${ver}` };
+  if (ver === 1)               return { key: 'stable',  label: 'untouched',     hint: `first write · never overwritten (${ago})` };
+  if (fresh === 'd7')          return { key: 'stable',  label: 'stable',        hint: `unchanged for ${ago} · v${ver}` };
+  return                              { key: 'dormant', label: 'dormant',       hint: `unchanged for ${ago} · v${ver}` };
+}
+function renderCellState(slice) {
+  const st = cellStateOf(slice);
+  return `<span class="cell-state ${st.key}" title="${esc(st.hint)}"><span class="pip"></span>${esc(st.label)}</span>`;
+}
+// Siblings = slices sharing the same parent path (same scope + same path prefix, one segment shorter)
+function siblingsOf(slice) {
+  const { scope } = scopeOf(slice.hcu);
+  const segs = pathOf(slice.hcu);
+  if (!segs.length) return [];
+  const parent = segs.slice(0, -1).join('/');
+  const prefix = `bitpub://${scope}/${parent}${parent ? '/' : ''}`;
+  const out = [];
+  for (const s of S.slices) {
+    if (!s.hcu.startsWith(prefix)) continue;
+    const rest = s.hcu.slice(prefix.length);
+    if (!rest || rest.includes('/')) continue; // must be at same depth
+    out.push(s);
+  }
+  out.sort((a, b) => (b.last_synced || '').localeCompare(a.last_synced || ''));
+  return out;
+}
+/* Filter application */
+function passesFilter(s) {
+  const { type } = scopeOf(s.hcu);
+  if (S.filter.scopes.size && !S.filter.scopes.has(type)) return false;
+  if (S.filter.freshness !== 'all') {
+    const b = freshnessOf(s.last_synced);
+    const order = { 'fresh': 0, 'h24': 1, 'd7': 2, 'older': 3 };
+    const targets = { '1h': 0, '24h': 1, '7d': 2 };
+    if (order[b] > targets[S.filter.freshness]) return false;
+  }
+  if (S.filter.tags.size) {
+    const tags = s.metadata.tags || [];
+    for (const t of S.filter.tags) if (!tags.includes(t)) return false;
+  }
+  return true;
+}
+function filteredSlices() {
+  return S.slices.filter(passesFilter);
+}
+function filterActive() {
+  return S.filter.scopes.size > 0 || S.filter.freshness !== 'all' || S.filter.tags.size > 0;
+}
+function clearFilter() {
+  S.filter.scopes = new Set();
+  S.filter.freshness = 'all';
+  S.filter.tags = new Set();
+  renderAll();
+}
+/* ══════════════════════════════════════════════════════
+   Top-level render
+   ══════════════════════════════════════════════════════ */
+function renderAll() {
+  renderModeBadge();
+  renderAddress();
+  renderLive();
+  renderFilterStrip();
+  renderTree();
+  renderPanel();
+  $('clear-filter-btn').classList.toggle('hidden', !filterActive());
+}
+function renderModeBadge() {
+  const el = $('mode-badge');
+  if (S.mode === 'local') {
+    el.className = 'mode-badge local';
+    el.querySelector('.label').textContent = 'Local · decrypted';
+  } else {
+    el.className = 'mode-badge';
+    el.querySelector('.label').textContent = 'Remote';
+  }
+}
+function renderAddress() {
+  const el = $('address');
+  let html = '<span class="seg scheme">bitpub://</span>';
+  if (S.view === 'overview') {
+    html += '<span class="glob">**</span>';
+  } else if (S.currentScope) {
+    html += `<span class="sep">/</span><span class="seg" onclick="navigateTo('${escAttr(S.currentScope)}', [])">${esc(S.currentScope)}</span>`;
+    const isSlice = S.view === 'slice';
+    S.currentPath.forEach((seg, i) => {
+      const last = i === S.currentPath.length - 1;
+      const isCurrent = isSlice ? last : false;
+      const className = isCurrent ? 'seg current' : 'seg';
+      const subPath = S.currentPath.slice(0, i + 1);
+      html += `<span class="sep">/</span>`;
+      if (isCurrent) {
+        html += `<span class="${className}">${esc(seg)}</span>`;
+      } else {
+        html += `<span class="${className}" onclick="navigateTo('${escAttr(S.currentScope)}', ${JSON.stringify(subPath).replace(/"/g, '&quot;')})">${esc(seg)}</span>`;
+      }
+    });
+    if (!isSlice) html += '<span class="glob">/**</span>';
+  }
+  el.innerHTML = html;
+}
+function renderLive() {
+  const el = $('live');
+  const label = S.lastUpdated ? `updated ${timeAgo(S.lastUpdated)}` : 'no activity';
+  el.querySelector('.label').textContent = label;
+}
+function renderFilterStrip() {
+  const strip = $('filter-strip');
+  const counts = S.stats.byScope || {};
+  let html = '';
+  html += '<span class="filter-label">Scope</span>';
+  html += '<span class="pill-group">';
+  for (const t of ['group', 'private', 'public']) {
+    const active = S.filter.scopes.has(t);
+    html += `<span class="pill scope ${active ? 'active' : ''}" data-scope="${t}" onclick="toggleScope('${t}')"><span class="dot"></span>${t}<span style="opacity:.55;margin-left:4px">${counts[t] || 0}</span></span>`;
+  }
+  html += '</span>';
+  html += '<span class="filter-divider"></span>';
+  html += '<span class="filter-label">Fresh</span>';
+  html += '<span class="pill-group">';
+  for (const [k, lbl] of [['all', 'all'], ['1h', '< 1h'], ['24h', '< 24h'], ['7d', '< 7d']]) {
+    const active = S.filter.freshness === k;
+    html += `<span class="pill ${active ? 'active' : ''}" onclick="setFreshness('${k}')">${lbl}</span>`;
+  }
+  html += '</span>';
+  if (S.filter.tags.size) {
+    html += '<span class="filter-divider"></span>';
+    html += '<span class="filter-label">Tags</span>';
+    html += '<span class="pill-group">';
+    for (const t of S.filter.tags) {
+      html += `<span class="pill tag" onclick="toggleTag('${escAttr(t)}')">${esc(t)}<span class="x">×</span></span>`;
+    }
+    html += '</span>';
+  }
+  const filtered = filteredSlices();
+  html += `<span class="filter-count"><span class="n">${filtered.length}</span> / ${S.stats.total || 0} slices</span>`;
+  strip.innerHTML = html;
+}
+function toggleScope(t) {
+  if (S.filter.scopes.has(t)) S.filter.scopes.delete(t); else S.filter.scopes.add(t);
+  renderAll();
+}
+function setFreshness(k) { S.filter.freshness = k; renderAll(); }
+function toggleTag(t) {
+  if (S.filter.tags.has(t)) S.filter.tags.delete(t); else S.filter.tags.add(t);
+  renderAll();
+}
+/* ══════════════════════════════════════════════════════
+   Tree
+   ══════════════════════════════════════════════════════ */
+function renderTree() {
+  const scopes = Object.entries(S.tree).sort((a, b) => a[0].localeCompare(b[0]));
+  let html = '';
+  for (const [scope, node] of scopes) {
+    // Filter scope by current filter
+    const counts = countsForScopeNode(scope, node);
+    const expanded = S.currentScope === scope || !S.currentScope;
+    const active = S.view === 'namespace' && S.currentScope === scope && !S.currentPath.length;
+    const isPriv = node.type === 'private';
+    html += `<div class="tree-node${expanded ? ' expanded' : ''}" data-scope="${escAttr(scope)}">
+      <div class="tree-header${active ? ' active' : ''}" onclick="onTreeScopeClick(event, '${escAttr(scope)}')">
+        <span class="chevron" onclick="toggleNodeEvent(event)">${ICON.chev}</span>
+        <span class="scope-dot ${node.type}"></span>
+        ${isPriv ? `<span class="tree-lock">${ICON.lock}</span>` : ''}
+        <span class="tree-label mono">${esc(scope)}</span>
+        <span class="tree-badge">${counts}</span>
+      </div>
+      <div class="tree-children">${renderBranch(scope, node.children, [])}</div>
+    </div>`;
+  }
+  if (!html) html = '<div class="empty" style="padding:32px 12px"><p>No namespaces yet</p></div>';
+  $('tree').innerHTML = html;
+}
+function countsForScopeNode(scope, node) {
+  // Count filtered leaves under this scope
+  let n = 0;
+  const walk = (nd) => {
+    if (nd.slice && passesFilter(nd.slice)) n++;
+    for (const c of Object.values(nd.children || {})) walk(c);
+  };
+  walk(node);
+  return n;
+}
+function renderBranch(scope, children, path) {
+  // Classify: direct leaves (aggregated) vs. subfolders (recursed into).
+  // This keeps the tree bounded in vertical size even at high slice volume;
+  // the aggregated "N context slices" entry navigates to the namespace view
+  // where slices are listed reverse-chronologically.
+  const directLeaves = [];
+  const subfolders = [];
+  for (const [name, node] of Object.entries(children)) {
+    const hasSubfolders = Object.keys(node.children).length > 0;
+    if (!hasSubfolders && node.slice) {
+      if (passesFilter(node.slice)) directLeaves.push({ name, slice: node.slice });
+    } else if (hasSubfolders) {
+      subfolders.push({ name, node });
+    }
+  }
+  subfolders.sort((a, b) => a.name.localeCompare(b.name));
+  let html = '';
+  // Aggregated direct-leaf entry for this level
+  if (directLeaves.length > 0) {
+    const mostRecent = directLeaves.reduce(
+      (a, b) => ((a.slice.last_synced || '') > (b.slice.last_synced || '') ? a : b)
+    );
+    const fresh = freshnessOf(mostRecent.slice.last_synced);
+    const freshClass = fresh === 'fresh' ? 'fresh' : fresh === 'h24' ? 'h24' : fresh === 'd7' ? 'd7' : 'older';
+    const pathArg = JSON.stringify(path).replace(/"/g, '&quot;');
+    const isActiveSummary = S.view === 'namespace' && S.currentScope === scope && arrayEq(S.currentPath, path);
+    const when = mostRecent.slice.last_synced ? timeAgo(mostRecent.slice.last_synced) : '';
+    html += `<div class="tree-leaf tree-summary${isActiveSummary ? ' active' : ''}" onclick="navigateTo('${escAttr(scope)}', ${pathArg})" title="View ${directLeaves.length} slice${directLeaves.length !== 1 ? 's' : ''} at this level">
+      <span class="fresh-dot ${freshClass}"></span>
+      <span class="tree-label">${directLeaves.length} context slice${directLeaves.length !== 1 ? 's' : ''}</span>
+      <span class="tree-badge">${esc(when)}</span>
+    </div>`;
+  }
+  // Subfolders (recursed)
+  for (const { name, node } of subfolders) {
+    const subPath = [...path, name];
+    const count = countsForScopeNode(scope, node);
+    if (filterActive() && count === 0) continue;
+    const isActive = S.view === 'namespace' && S.currentScope === scope && arrayEq(S.currentPath, subPath);
+    const expanded = isPathAncestor(subPath);
+    const pathArg = JSON.stringify(subPath).replace(/"/g, '&quot;');
+    const indexHTML = node.slice && passesFilter(node.slice) ? renderLeaf(node.slice, '(index)') : '';
+    html += `<div class="tree-node${expanded ? ' expanded' : ''}">
+      <div class="tree-header${isActive ? ' active' : ''}" onclick="onTreeFolderClick(event, '${escAttr(scope)}', ${pathArg})">
+        <span class="chevron" onclick="toggleNodeEvent(event)">${ICON.chev}</span>
+        <span class="tree-label">${esc(name.replace(/_/g, ' '))}</span>
+        <span class="tree-badge">${count}</span>
+      </div>
+      <div class="tree-children">
+        ${indexHTML}
+        ${renderBranch(scope, node.children, subPath)}
+      </div>
+    </div>`;
+  }
+  return html;
+}
+function renderLeaf(slice, label) {
+  const active = S.selectedHcu === slice.hcu;
+  const fresh = freshnessOf(slice.last_synced);
+  return `<div class="tree-leaf${active ? ' active' : ''}" onclick="selectSlice('${escAttr(slice.hcu)}')">
+    <span class="fresh-dot ${fresh === 'fresh' ? 'fresh' : fresh === 'h24' ? 'h24' : fresh === 'd7' ? 'd7' : 'older'}"></span>
+    <span class="tree-label">${esc(label)}</span>
+  </div>`;
+}
+function arrayEq(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+function isPathAncestor(path) {
+  if (S.view !== 'namespace' && S.view !== 'slice') return false;
+  if (S.currentPath.length < path.length) return false;
+  for (let i = 0; i < path.length; i++) if (S.currentPath[i] !== path[i]) return false;
+  return true;
+}
+function toggleNodeEvent(ev) {
+  ev.stopPropagation();
+  const nd = ev.currentTarget.closest('.tree-node');
+  if (nd) nd.classList.toggle('expanded');
+}
+function onTreeScopeClick(ev, scope) {
+  if (ev.target.closest('.chevron')) return;
+  navigateTo(scope, []);
+}
+function onTreeFolderClick(ev, scope, path) {
+  if (ev.target.closest('.chevron')) return;
+  navigateTo(scope, path);
+}
+/* ══════════════════════════════════════════════════════
+   Navigation
+   ══════════════════════════════════════════════════════ */
+function goRoot() {
+  S.view = 'overview';
+  S.currentScope = null;
+  S.currentPath = [];
+  S.selectedHcu = null;
+  S.searchQuery = '';
+  $('search').value = '';
+  renderAll();
+}
+function navigateTo(scope, path) {
+  S.view = 'namespace';
+  S.currentScope = scope;
+  S.currentPath = Array.isArray(path) ? path : [];
+  S.selectedHcu = null;
+  renderAll();
+}
+function selectSlice(hcu) {
+  const sl = S.slices.find(s => s.hcu === hcu);
+  if (!sl) return;
+  const { scope } = scopeOf(hcu);
+  S.view = 'slice';
+  S.currentScope = scope;
+  S.currentPath = pathOf(hcu);
+  S.selectedHcu = hcu;
+  S.raw = false;
+  renderAll();
+}
+/* ══════════════════════════════════════════════════════
+   Panel dispatch
+   ══════════════════════════════════════════════════════ */
+function renderPanel() {
+  if (S.searchQuery && S.searchQuery.length >= 2) { renderSearch(); return; }
+  if (S.view === 'overview') { renderOverview(); return; }
+  if (S.view === 'namespace') { renderNamespace(); return; }
+  if (S.view === 'slice') {
+    const sl = S.slices.find(s => s.hcu === S.selectedHcu);
+    if (sl) renderSlice(sl); else renderOverview();
+    return;
+  }
+}
+/* ══════════════════════════════════════════════════════
+   Overview: stream + telemetry
+   ══════════════════════════════════════════════════════ */
+function renderOverview() {
+  const slices = filteredSlices();
+  if (!slices.length && !S.slices.length) {
+    // Truly fresh install — the welcome slice hasn't synced to the local
+    // cache yet (or this is a --local-only install with no welcome push).
+    // Show the welcome panel anyway if the URL flag is set, so install.sh's
+    // ?welcome=1 entry point still lands somewhere meaningful.
+    const welcomeIfFlagged = shouldShowWelcomePanel(slices) ? renderWelcomePanel() : '';
+    $('main').innerHTML = `<div class="panel">${welcomeIfFlagged}<div class="empty">${ICON.empty}
+      <h2>Your shared memory is empty</h2>
+      <p>This is a live view of your org's agent memory — each slice is the <em>latest value</em> at its address, written by humans or agents. Pull your team's context to populate it:</p>
+      <p><code>bitpub fetch --address "bitpub://group:yourdomain.com/**"</code></p></div></div>`;
+    return;
+  }
+  const recent = [...slices].sort((a, b) => (b.last_synced || '').localeCompare(a.last_synced || '')).slice(0, 15);
+  let html = '<div class="panel">';
+  if (shouldShowWelcomePanel(slices)) {
+    html += renderWelcomePanel();
+  }
+  html += `<div class="section-h">Recent writes <span class="count">${recent.length}</span>${S.lastUpdated ? `<span class="live-hint"><span class="dot"></span>updated ${timeAgo(S.lastUpdated)}</span>` : ''}</div>`;
+  html += `<div class="stream-sub">The latest value at each address — slices can be overwritten in place, appended to, or joined by new slices under the same namespace.</div>`;
+  html += '<div class="stream">';
+  for (const sl of recent) {
+    html += renderStreamRow(sl);
+  }
+  if (!recent.length) {
+    html += '<div class="empty" style="padding:40px 20px">No slices match the current filter.</div>';
+  }
+  html += '</div>';
+  // Activity heatmap — one square per day, colored by last-write volume
+  html += '<div class="section-h" style="margin-top:28px">Context activity</div>';
+  html += renderActivityHeatmap(slices);
+  // Group READMEs — any slice at `bitpub://<scope>/README`
+  const readmes = findReadmes(slices);
+  if (readmes.length) {
+    html += '<div class="section-h" style="margin-top:24px">Group README</div>';
+    for (const sl of readmes) html += renderReadmeCard(sl);
+  } else {
+    html += renderReadmeHint();
+  }
+  html += '</div>';
+  $('main').innerHTML = html;
+}
+/* ── Activity heatmap ────────────────────────────────
+ * One square per day for the current calendar year (Jan 1 → Dec 31).
+ * Intensity = # of slices whose *latest* write landed that day.
+ * Caveat: the protocol only retains the latest version per address, so
+ * this is not a true commit log — it's a "last-touched" calendar.
+ * That's still a useful signal for heavy-context days.
+ *
+ * Layout: week-columns run Sun→Sat; cell pixel size is computed at
+ * render time so the grid always fills the card width.
+ */
+function renderActivityHeatmap(slices) {
+  const today = new Date(); today.setHours(0, 0, 0, 0);
+  const year = today.getFullYear();
+  const yearStart = new Date(year, 0, 1); yearStart.setHours(0, 0, 0, 0);
+  const yearEnd = new Date(year, 11, 31); yearEnd.setHours(0, 0, 0, 0);
+  // Grid spans from the Sunday on or before Jan 1 through the Saturday
+  // on or after Dec 31. That's exactly 53 weeks in the worst case.
+  const gridStart = new Date(yearStart);
+  while (gridStart.getDay() !== 0) gridStart.setDate(gridStart.getDate() - 1);
+  const gridEnd = new Date(yearEnd);
+  while (gridEnd.getDay() !== 6) gridEnd.setDate(gridEnd.getDate() + 1);
+  // Bucket slices by local-date key (only counting writes inside this year)
+  const counts = {};
+  for (const sl of slices) {
+    if (!sl.last_synced) continue;
+    const d = new Date(sl.last_synced); d.setHours(0, 0, 0, 0);
+    if (d < yearStart || d > yearEnd) continue;
+    const key = dayKey(d);
+    counts[key] = (counts[key] || 0) + 1;
+  }
+  const maxN = Math.max(1, ...Object.values(counts));
+  const level = n => {
+    if (!n) return 0;
+    const r = n / maxN;
+    if (r <= 0.25) return 1;
+    if (r <= 0.5) return 2;
+    if (r <= 0.75) return 3;
+    return 4;
+  };
+  // Build week-columns across the full year window
+  const weeks = [];
+  const cur = new Date(gridStart);
+  while (cur <= gridEnd) {
+    const col = [];
+    for (let dow = 0; dow < 7; dow++) {
+      const inYear = cur >= yearStart && cur <= yearEnd;
+      if (!inYear) {
+        col.push({ placeholder: true, date: new Date(cur) });
+      } else {
+        const key = dayKey(cur);
+        const n = counts[key] || 0;
+        col.push({ date: new Date(cur), count: n, lvl: level(n) });
+      }
+      cur.setDate(cur.getDate() + 1);
+    }
+    weeks.push(col);
+  }
+  const WEEKS = weeks.length; // 52 or 53
+  // Cell size: fill the container width up to a hard cap. Reserve space
+  // for the day-label gutter (~16px + 10px gap) and card padding (~36px).
+  // Cap cells at 15px so the grid doesn't look chunky on very wide
+  // viewports; when cells hit the cap, the grid center-aligns.
+  const GAP = 3, CELL_MAX = 15, CELL_MIN = 10;
+  const mainW = ($('main') && $('main').clientWidth) || 800;
+  const avail = Math.max(0, mainW - 16 - 10 - 36);
+  const ideal = Math.floor((avail - (WEEKS - 1) * GAP) / WEEKS);
+  const cell = Math.max(CELL_MIN, Math.min(CELL_MAX, ideal));
+  // Month labels — first Sunday-column whose first in-year cell lands in that month
+  const monthSpans = [];
+  let lastMonth = -1;
+  weeks.forEach((col, i) => {
+    const firstIn = col.find(c => !c.placeholder);
+    if (!firstIn) return;
+    const m = firstIn.date.getMonth();
+    if (m !== lastMonth) {
+      monthSpans.push({ i, label: firstIn.date.toLocaleDateString(undefined, { month: 'short' }) });
+      lastMonth = m;
+    }
+  });
+  // Summary stats
+  const totalWrites = Object.values(counts).reduce((a, b) => a + b, 0);
+  const activeDays = Object.values(counts).filter(n => n > 0).length;
+  let peakDay = null, peakN = 0;
+  for (const [k, n] of Object.entries(counts)) if (n > peakN) { peakN = n; peakDay = k; }
+  let html = '<div class="heatmap-card">';
+  html += '<div class="heatmap-head">';
+  html += `<h4>${year}</h4>`;
+  html += '<div class="stats">';
+  html += `<span><span class="k">${totalWrites}</span> slice${totalWrites !== 1 ? 's' : ''} touched this year</span>`;
+  html += `<span><span class="k">${activeDays}</span> active day${activeDays !== 1 ? 's' : ''}</span>`;
+  if (peakDay) {
+    const pd = new Date(peakDay + 'T00:00:00');
+    html += `<span>peak <span class="k">${peakN}</span> on <span class="k">${pd.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span></span>`;
+  }
+  html += '</div>';
+  html += '<span class="sub">each square = one day, colored by slices last touched</span>';
+  html += '</div>';
+  html += '<div class="heatmap-grid">';
+  html += `<div class="heatmap-day-labels" style="grid-template-rows: repeat(7, ${cell}px);"><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span></div>`;
+  html += '<div class="heatmap-cols">';
+  // Month label row — positions tied to the computed cell width
+  const weekStride = cell + GAP;
+  html += `<div class="heatmap-months" style="grid-template-columns: repeat(${WEEKS}, ${cell}px);">`;
+  for (const m of monthSpans) {
+    const left = m.i * weekStride;
+    html += `<span class="m" style="left:${left}px">${esc(m.label)}</span>`;
+  }
+  html += '</div>';
+  // Weeks
+  html += `<div class="heatmap-weeks" style="grid-auto-columns: ${cell}px; gap: ${GAP}px;">`;
+  for (const col of weeks) {
+    html += `<div class="heatmap-week" style="grid-template-rows: repeat(7, ${cell}px); gap: ${GAP}px;">`;
+    for (const c of col) {
+      if (c.placeholder) {
+        html += '<div class="heatmap-cell placeholder"></div>';
+        continue;
+      }
+      const dateStr = c.date.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
+      const tip = c.count ? `${c.count} slice${c.count !== 1 ? 's' : ''} touched · ${dateStr}` : `no writes · ${dateStr}`;
+      html += `<div class="heatmap-cell l${c.lvl}" title="${escAttr(tip)}"></div>`;
+    }
+    html += '</div>';
+  }
+  html += '</div>'; // weeks
+  html += '</div>'; // cols
+  html += '</div>'; // grid
+  html += '<div class="heatmap-legend">';
+  html += '<span>less</span>';
+  html += '<div class="cells"><div class="c"></div><div class="c l1"></div><div class="c l2"></div><div class="c l3"></div><div class="c l4"></div></div>';
+  html += '<span>more</span>';
+  html += '</div>';
+  html += '</div>'; // card
+  return html;
+}
+function dayKey(d) {
+  // local-date YYYY-MM-DD
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+/* ── Group README ───────────────────────────────────
+ * Convention: a slice at `bitpub://<scope>/README` (exact tail) is
+ * treated as the landing page for that group/scope and rendered here.
+ */
+function findReadmes(slices) {
+  const out = [];
+  for (const sl of slices) {
+    const tail = sl.hcu.replace(/^bitpub:\/\/[^/]+\//, '');
+    if (/^readme(\.md)?$/i.test(tail)) out.push(sl);
+  }
+  // One README per scope — if multiple, pick the most recently written
+  const byScope = new Map();
+  for (const sl of out) {
+    const { scope } = scopeOf(sl.hcu);
+    const prev = byScope.get(scope);
+    if (!prev || (sl.last_synced || '') > (prev.last_synced || '')) byScope.set(scope, sl);
+  }
+  return [...byScope.values()].sort((a, b) => {
+    const ta = scopeOf(a.hcu).type, tb = scopeOf(b.hcu).type;
+    const rank = t => t === 'group' ? 0 : t === 'public' ? 1 : 2;
+    if (rank(ta) !== rank(tb)) return rank(ta) - rank(tb);
+    return scopeOf(a.hcu).scope.localeCompare(scopeOf(b.hcu).scope);
+  });
+}
+function renderReadmeCard(sl) {
+  const { type, scope } = scopeOf(sl.hcu);
+  const author = sl.metadata.author_id || sl.written_by || 'unknown';
+  const content = sl.payload.content || '';
+  let html = '<div class="readme-card">';
+  html += '<div class="readme-head">';
+  html += `<span class="label">${esc(scope)} · README</span>`;
+  html += `<span class="hcu" onclick="selectSlice('${escAttr(sl.hcu)}')" title="Open slice">${esc(sl.hcu)}</span>`;
+  html += '<span class="meta">';
+  html += renderScopePill(type, scope);
+  html += `<span>by</span>${renderAgentChip(author)}`;
+  html += `<span>· updated ${sl.last_synced ? timeAgo(sl.last_synced) : '—'}</span>`;
+  html += '</span>';
+  html += '</div>';
+  html += `<div class="readme-body content-body">${md(content)}</div>`;
+  html += '</div>';
+  return html;
+}
+function renderReadmeHint() {
+  // Only show the hint if there's at least one scope visible.
+  const scopes = Object.keys(S.tree || {});
+  if (!scopes.length) return '';
+  const example = scopes.find(s => s.startsWith('group:')) || scopes[0];
+  return `<div class="readme-empty-hint">Tip: write a slice at <code>bitpub://${esc(example)}/README</code> to give this scope a landing page.</div>`;
+}
+function renderStreamRow(sl) {
+  const { type, scope } = scopeOf(sl.hcu);
+  const fresh = freshnessOf(sl.last_synced);
+  const author = sl.metadata.author_id || sl.written_by || 'unknown';
+  const tail = sl.hcu.replace(/^bitpub:\/\/[^/]+\//, '');
+  const isNew = S.newArrivals.has(sl.hcu);
+  const freshClass = fresh === 'fresh' ? 'fresh' : fresh === 'h24' ? 'h24' : fresh === 'd7' ? 'd7' : 'older';
+  return `<div class="stream-row${isNew ? ' new' : ''}" onclick="selectSlice('${escAttr(sl.hcu)}')">
+    <span class="fresh-dot ${freshClass}" title="${fresh}"></span>
+    ${renderAgentChip(author)}
+    ${renderScopePill(type, scope)}
+    <span class="hcu-tail"><span class="scope-prefix">${esc(scope)}/</span>${esc(tail)}</span>
+    ${renderCellState(sl)}
+    <span class="when">${sl.last_synced ? timeAgo(sl.last_synced) : ''}</span>
+  </div>`;
+}
+function renderAgentChip(author) {
+  return `<span class="agent-chip" title="written by ${esc(author)}">${ICON.hex}${esc(author)}</span>`;
+}
+function renderScopePill(type, scope) {
+  const isPriv = type === 'private';
+  return `<span class="scope-pill ${type}" title="${esc(scope)}"><span class="dot"></span>${type}${isPriv ? `<span class="lock">${ICON.lock}</span>` : ''}</span>`;
+}
+/* ══════════════════════════════════════════════════════
+   Namespace view
+   ══════════════════════════════════════════════════════ */
+function renderNamespace() {
+  const scope = S.currentScope;
+  const scopeNode = S.tree[scope];
+  if (!scopeNode) { renderOverview(); return; }
+  let node = scopeNode;
+  for (const seg of S.currentPath) {
+    if (!node.children[seg]) { renderOverview(); return; }
+    node = node.children[seg];
+  }
+  const pathStr = S.currentPath.length ? '/' + S.currentPath.join('/') : '';
+  const fullUri = `bitpub://${scope}${pathStr}/**`;
+  const { type } = scopeOf(`bitpub://${scope}`);
+  const isPriv = type === 'private';
+  // Collect slices within this subtree
+  const subSlices = [];
+  const walk = (n) => { if (n.slice) subSlices.push(n.slice); for (const c of Object.values(n.children || {})) walk(c); };
+  walk(node);
+  const visible = subSlices.filter(passesFilter);
+  const lastWrite = maxTs(visible);
+  let html = '<div class="panel">';
+  // Address hero
+  html += `<div class="hcu-hero">
+    <span class="scope-dot ${type}"></span>
+    ${isPriv ? `<span class="lock">${ICON.lock}</span>` : ''}
+    <span class="uri"><span class="scheme">bitpub://</span>${esc(scope)}${esc(pathStr)}<span class="glob">/**</span></span>
+    <button class="copy-btn" onclick="copyText('${escAttr(fullUri)}', this)">${ICON.copy}<span>Copy</span></button>
+  </div>`;
+  // Stats strip
+  const tagsInSubtree = new Set();
+  for (const s of visible) (s.metadata.tags || []).forEach(t => tagsInSubtree.add(t));
+  html += `<div class="stats-strip">
+    <span class="s-item"><span class="n">${visible.length}</span> slice${visible.length !== 1 ? 's' : ''}</span>
+    <span class="s-item"><span class="n">${tagsInSubtree.size}</span> tag${tagsInSubtree.size !== 1 ? 's' : ''}</span>
+    ${lastWrite ? `<span class="s-item">last write <span class="n">${timeAgo(lastWrite)}</span></span>` : ''}
+  </div>`;
+  // Split direct children into subfolders and direct-leaf slices
+  const folderRows = [];
+  const sliceRows = [];
+  for (const [name, child] of Object.entries(node.children)) {
+    const hasChildren = Object.keys(child.children).length > 0;
+    if (hasChildren) {
+      const childSub = [];
+      const walk2 = (n) => { if (n.slice) childSub.push(n.slice); for (const c of Object.values(n.children || {})) walk2(c); };
+      walk2(child);
+      const visChildren = childSub.filter(passesFilter);
+      if (!visChildren.length && filterActive()) continue;
+      const latest = maxTs(visChildren);
+      folderRows.push({ name, count: visChildren.length, latest });
+    } else if (child.slice && passesFilter(child.slice)) {
+      sliceRows.push({ name, slice: child.slice });
+    }
+  }
+  // Folders: alphabetical. Slices: reverse-chronological (newest first).
+  folderRows.sort((a, b) => a.name.localeCompare(b.name));
+  sliceRows.sort((a, b) => (b.slice.last_synced || '').localeCompare(a.slice.last_synced || ''));
+  // Subfolders section
+  if (folderRows.length) {
+    html += `<div class="section-h" style="margin-top:18px">Subfolders <span class="count">${folderRows.length}</span></div>`;
+    html += '<div class="file-box">';
+    for (const r of folderRows) {
+      const subPath = [...S.currentPath, r.name];
+      const pathArg = JSON.stringify(subPath).replace(/"/g, '&quot;');
+      html += `<div class="file-row" onclick="navigateTo('${escAttr(scope)}', ${pathArg})">
+        <span class="f-icon folder">${ICON.folder}</span>
+        <span class="f-name">${esc(r.name.replace(/_/g, ' '))}</span>
+        <span class="f-preview">${r.count} slice${r.count !== 1 ? 's' : ''}</span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span class="f-when">${r.latest ? timeAgo(r.latest) : ''}</span>
+      </div>`;
+    }
+    html += '</div>';
+  }
+  // Context slices section — newest first, polled live
+  if (sliceRows.length) {
+    const newestWrite = sliceRows[0].slice.last_synced;
+    html += `<div class="section-h" style="margin-top:18px">Context slices <span class="count">${sliceRows.length}</span>${newestWrite ? `<span class="live-hint"><span class="dot"></span>newest first · latest ${timeAgo(newestWrite)}</span>` : ''}</div>`;
+    html += '<div class="file-box">';
+    for (const r of sliceRows) {
+      const sl = r.slice;
+      const fresh = freshnessOf(sl.last_synced);
+      const freshClass = fresh === 'fresh' ? 'fresh' : fresh === 'h24' ? 'h24' : fresh === 'd7' ? 'd7' : 'older';
+      const author = sl.metadata.author_id || sl.written_by || 'unknown';
+      const preview = (sl.payload.content || '').slice(0, 100).replace(/\s+/g, ' ').trim();
+      const isNew = S.newArrivals.has(sl.hcu);
+      html += `<div class="file-row${isNew ? ' new' : ''}" onclick="selectSlice('${escAttr(sl.hcu)}')">
+        <span class="f-icon">${ICON.file}</span>
+        <span class="f-name mono">${esc(r.name.replace(/_/g, ' '))}</span>
+        <span class="f-preview">${esc(preview)}</span>
+        <span class="fresh-dot ${freshClass}" title="${fresh}"></span>
+        ${renderCellState(sl)}
+        ${renderAgentChip(author)}
+        <span class="f-when">${sl.last_synced ? timeAgo(sl.last_synced) : ''}</span>
+      </div>`;
+    }
+    html += '</div>';
+  }
+  if (!folderRows.length && !sliceRows.length) {
+    html += '<div class="file-box"><div class="empty" style="padding:40px 20px"><p>Nothing here under the current filter.</p></div></div>';
+  }
+  html += '</div>';
+  $('main').innerHTML = html;
+}
+/* ══════════════════════════════════════════════════════
+   Slice view
+   ══════════════════════════════════════════════════════ */
+function renderSlice(sl) {
+  const { scope, type } = scopeOf(sl.hcu);
+  const isPriv = type === 'private';
+  const tags = sl.metadata.tags || [];
+  const content = sl.payload.content || '';
+  const author = sl.metadata.author_id || sl.written_by || 'unknown';
+  const ver = sl.metadata.version || 1;
+  const fresh = freshnessOf(sl.last_synced);
+  const freshClass = fresh === 'fresh' ? 'fresh' : fresh === 'h24' ? 'h24' : fresh === 'd7' ? 'd7' : 'older';
+  const sizeBytes = new Blob([content]).size;
+  const lines = content ? content.split('\n').length : 0;
+  const format = sl.payload.format || (content.match(/^#/m) ? 'markdown' : 'text');
+  const isEncryptedRemote = S.mode === 'remote' && isPriv;
+  const leafName = (pathOf(sl.hcu).pop() || sl.hcu).replace(/_/g, ' ');
+  let html = '<div class="panel blob-wrap">';
+  // Address hero chip
+  html += `<div class="hcu-hero">
+    <span class="scope-dot ${type}"></span>
+    ${isPriv ? `<span class="lock">${ICON.lock}</span>` : ''}
+    <span class="uri"><span class="scheme">bitpub://</span>${esc(sl.hcu.replace(/^bitpub:\/\//, ''))}</span>
+    <button class="copy-btn" onclick="copyText('${escAttr(sl.hcu)}', this)">${ICON.copy}<span>Copy URI</span></button>
+  </div>`;
+  // Meta strip — identity + mutability signal
+  html += '<div class="blob-meta">';
+  html += renderScopePill(type, scope);
+  html += renderCellState(sl);
+  html += `<span class="fresh-dot ${freshClass}" title="${fresh}" style="width:7px;height:7px"></span><span>last write ${sl.last_synced ? timeAgo(sl.last_synced) : '—'}</span>`;
+  html += `<span class="sep">·</span>`;
+  html += `<span>by</span> ${renderAgentChip(author)}`;
+  if (tags.length) {
+    html += `<span class="sep">·</span>`;
+    for (const t of tags) {
+      const active = S.filter.tags.has(t);
+      html += `<span class="pill tag${active ? ' active' : ''}" onclick="toggleTag('${escAttr(t)}')">${esc(t)}${active ? '<span class="x">×</span>' : ''}</span>`;
+    }
+  }
+  html += '</div>';
+  // Write-guide + neighbors surfaced above the content so they're visible
+  // without scrolling — long slices can push them far offscreen otherwise.
+  html += renderWriteGuide(sl);
+  html += renderSiblingsPanel(sl);
+  // Encrypted note when remote + private
+  if (isEncryptedRemote) {
+    html += `<div class="encrypted-note" style="margin-top:14px">${ICON.lock}
+      <div>This slice is <strong>private</strong> and encrypted at rest. The server cannot decrypt it. View plaintext locally with <code>bitpub console</code>.</div>
+    </div>`;
+  }
+  // Snapshot banner — reminds this is the current value, not a finished doc
+  html += `<div class="snapshot-banner" style="margin-top:${isEncryptedRemote ? '0' : '16px'}">
+    <span class="title">Latest value</span>
+    <span class="ver">v${ver}</span>
+    <span class="caveat">${ICON.info}<span>Next push to this address replaces this slice in place.</span></span>
+  </div>`;
+  // Blob container
+  html += '<div class="blob-container has-banner">';
+  html += '<div class="blob-toolbar">';
+  html += '<div class="btn-group">';
+  html += `<button class="btn ${!S.raw ? 'active' : ''}" onclick="toggleRaw(false)">Preview</button>`;
+  html += `<button class="btn ${S.raw ? 'active' : ''}" onclick="toggleRaw(true)">Raw</button>`;
+  html += '</div>';
+  html += '<div class="spacer"></div>';
+  html += `<button class="btn" onclick="copyContent(this)">${ICON.copy}<span>Copy content</span></button>`;
+  html += '</div>';
+  if (S.raw) {
+    html += `<pre class="content-raw">${esc(content)}</pre>`;
+  } else {
+    html += `<div class="content-body">${md(content)}</div>`;
+  }
+  html += `<div class="blob-footer">${lines} line${lines !== 1 ? 's' : ''} · ${formatBytes(sizeBytes)} · ${esc(format)} · only the latest version is retained</div>`;
+  html += '</div>';
+  html += '</div>';
+  $('main').innerHTML = html;
+}
+function renderWriteGuide(sl) {
+  const addr = sl.hcu;
+  const ver = sl.metadata.version || 1;
+  return `<details class="write-guide">
+    <summary>
+      <span>Write to this slice</span>
+      <span class="hint">overwrite · append · safe · new slice</span>
+    </summary>
+    <div class="body">
+      <div class="mode">
+        <h5>Overwrite (default)</h5>
+        <p>Replaces the entire value at this address. Previous content is not retained.</p>
+<pre>bitpub push \\
+  --address "${esc(addr)}" \\
+  --content "…"</pre>
+      </div>
+      <div class="mode">
+        <h5>Append</h5>
+        <p>Concatenates new content to the existing value. Good for changelogs and collaborative prose; not safe for structured formats (JSON, YAML, code).</p>
+<pre>bitpub push \\
+  --address "${esc(addr)}" \\
+  --content "…" \\
+  --append</pre>
+      </div>
+      <div class="mode">
+        <h5>Safe write (optimistic concurrency)</h5>
+        <p>Rejects the push if someone else has written since you read. Current version is <strong>${ver}</strong>.</p>
+<pre>bitpub push \\
+  --address "${esc(addr)}" \\
+  --file ./value.md \\
+  --expect-version ${ver}</pre>
+      </div>
+      <div class="mode">
+        <h5>Push to a new slice instead</h5>
+        <p>Don't want to touch this one? Push to a new address under the same parent namespace.</p>
+<pre>bitpub push \\
+  --address "${esc(addr)}_v2" \\
+  --file ./value.md</pre>
+      </div>
+    </div>
+  </details>`;
+}
+function renderSiblingsPanel(sl) {
+  const sibs = siblingsOf(sl);
+  if (sibs.length <= 1) return '';
+  const { scope } = scopeOf(sl.hcu);
+  const segs = pathOf(sl.hcu);
+  const parent = segs.slice(0, -1).join('/');
+  const parentLabel = parent ? `${scope}/${parent}` : scope;
+  const MAX = 6;
+  const shown = sibs.slice(0, MAX);
+  const hidden = Math.max(0, sibs.length - MAX);
+  const parentPath = segs.slice(0, -1);
+  let html = `<div class="siblings-panel">
+    <div class="heading">
+      <span>Other slices in this namespace</span>
+      <span class="note">under <span style="font-family:var(--mono);color:var(--text-muted)">${esc(parentLabel)}</span></span>
+    </div>
+    <div class="list">`;
+  for (const s of shown) {
+    const name = (pathOf(s.hcu).pop() || s.hcu).replace(/_/g, ' ');
+    const isSelf = s.hcu === sl.hcu;
+    const fresh = freshnessOf(s.last_synced);
+    const freshClass = fresh === 'fresh' ? 'fresh' : fresh === 'h24' ? 'h24' : fresh === 'd7' ? 'd7' : 'older';
+    if (isSelf) {
+      html += `<div class="row self">
+        <span class="fresh-dot ${freshClass}"></span>
+        <span class="name">${esc(name)}</span>
+        <span class="self-label">current</span>
+        <span class="when">${s.last_synced ? timeAgo(s.last_synced) : ''}</span>
+      </div>`;
+    } else {
+      html += `<div class="row" onclick="selectSlice('${escAttr(s.hcu)}')">
+        <span class="fresh-dot ${freshClass}"></span>
+        <span class="name">${esc(name)}</span>
+        ${renderCellState(s)}
+        <span class="when">${s.last_synced ? timeAgo(s.last_synced) : ''}</span>
+      </div>`;
+    }
+  }
+  if (hidden > 0) {
+    const parentArg = JSON.stringify(parentPath).replace(/"/g, '&quot;');
+    html += `<div class="more"><a href="#" onclick="event.preventDefault(); navigateTo('${escAttr(scope)}', ${parentArg})">+ ${hidden} more — see all in this namespace →</a></div>`;
+  }
+  html += '</div></div>';
+  return html;
+}
+function toggleRaw(raw) {
+  S.raw = raw;
+  const sl = S.slices.find(s => s.hcu === S.selectedHcu);
+  if (sl) renderSlice(sl);
+}
+function copyText(text, btn) {
+  navigator.clipboard.writeText(text).then(() => {
+    if (!btn) return;
+    const orig = btn.innerHTML;
+    btn.innerHTML = `${ICON.copy}<span>Copied!</span>`;
+    setTimeout(() => btn.innerHTML = orig, 1500);
+  });
+}
+function copyContent(btn) {
+  const sl = S.slices.find(s => s.hcu === S.selectedHcu);
+  if (!sl) return;
+  copyText(sl.payload.content || '', btn);
+}
+/* ══════════════════════════════════════════════════════
+   Search
+   ══════════════════════════════════════════════════════ */
+function handleSearch(query) {
+  S.searchQuery = query;
+  if (!query || query.length < 2) {
+    if (S.view === 'overview') renderOverview();
+    else if (S.view === 'namespace') renderNamespace();
+    else if (S.view === 'slice') {
+      const sl = S.slices.find(s => s.hcu === S.selectedHcu);
+      if (sl) renderSlice(sl);
+    }
+    return;
+  }
+  renderSearch();
+}
+function renderSearch() {
+  const q = S.searchQuery.toLowerCase();
+  const source = filteredSlices();
+  const results = source.filter(s =>
+    s.hcu.toLowerCase().includes(q) ||
+    (s.payload.content || '').toLowerCase().includes(q) ||
+    (s.metadata.tags || []).some(t => t.toLowerCase().includes(q)) ||
+    (s.metadata.author_id || '').toLowerCase().includes(q)
+  );
+  let html = `<div class="search-results">
+    <div class="count-line"><strong>${results.length}</strong> match${results.length !== 1 ? 'es' : ''} for <strong>"${esc(S.searchQuery)}"</strong>${filterActive() ? ' within the current filter' : ''}</div>`;
+  for (const s of results) {
+    const { type, scope } = scopeOf(s.hcu);
+    const short = s.hcu.replace(/^bitpub:\/\/[^/]+\//, '');
+    const preview = (s.payload.content || '').slice(0, 220);
+    const author = s.metadata.author_id || s.written_by || 'unknown';
+    html += `<div class="result-item" onclick="selectSlice('${escAttr(s.hcu)}')">
+      <div class="result-hcu"><span style="color:var(--text-subtle)">${esc(scope)}/</span>${highlightMatch(esc(short), S.searchQuery)} ${renderScopePill(type, scope)} ${renderAgentChip(author)}</div>
+      <div class="result-preview">${highlightMatch(esc(preview), S.searchQuery)}</div>
+    </div>`;
+  }
+  if (!results.length) html += '<div class="empty" style="padding:32px 8px"><p>No matches.</p></div>';
+  html += '</div>';
+  $('main').innerHTML = html;
+}
+function highlightMatch(text, query) {
+  if (!query) return text;
+  const re = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+  return text.replace(re, '<mark>$1</mark>');
+}
+/* ══════════════════════════════════════════════════════
+   Markdown
+   ══════════════════════════════════════════════════════ */
+function md(src) {
+  if (!src) return '';
+  let h = src
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/^```(\w*)\n([\s\S]*?)^```/gm, (_, lang, code) => `<pre><code>${code}</code></pre>`)
+    .replace(/^######\s+(.+)$/gm, '<h6>$1</h6>')
+    .replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>')
+    .replace(/^####\s+(.+)$/gm, '<h4>$1</h4>')
+    .replace(/^###\s+(.+)$/gm, '<h3>$1</h3>')
+    .replace(/^##\s+(.+)$/gm, '<h2>$1</h2>')
+    .replace(/^#\s+(.+)$/gm, '<h1>$1</h1>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/`([^`\n]+)`/g, '<code>$1</code>')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>')
+    .replace(/^&gt;\s?(.+)$/gm, '<blockquote>$1</blockquote>')
+    .replace(/^---$/gm, '<hr>')
+    .replace(/^\d+\.\s+(.+)$/gm, '<li>$1</li>')
+    .replace(/^[-*]\s+(.+)$/gm, '<li>$1</li>');
+  h = h.replace(/((?:^<li>.*<\/li>\n?)+)/gm, m => {
+    const ordered = /<li>/.test(m) && /^\d/.test(src.split('\n').find(l => l.trim().startsWith('<li>')) || '');
+    return ordered ? `<ol>${m}</ol>` : `<ul>${m}</ul>`;
+  });
+  h = h.split('\n').map(line => {
+    if (!line.trim() || /^<[hupob]|^<li|^<hr|^<\//.test(line)) return line;
+    return `<p>${line}</p>`;
+  }).join('\n');
+  h = h.replace(/<\/blockquote>\n<blockquote>/g, '\n');
+  return h;
+}
+/* ══════════════════════════════════════════════════════
+   Utilities
+   ══════════════════════════════════════════════════════ */
+function esc(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); }
+function escAttr(s) { return String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/"/g, '&quot;'); }
+function escBacktick(s) { return String(s).replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$'); }
+function formatBytes(n) {
+  if (n < 1024) return n + ' B';
+  if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
+  return (n / 1024 / 1024).toFixed(1) + ' MB';
+}
+function timeAgo(ts) {
+  const ms = Date.now() - new Date(ts).getTime();
+  if (ms < 0) return 'just now';
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s ago`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  if (d < 30) return `${d}d ago`;
+  return new Date(ts).toLocaleDateString();
+}
+/* ══════════════════════════════════════════════════════
+   Keyboard
+   ══════════════════════════════════════════════════════ */
+document.addEventListener('keydown', e => {
+  if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
+    e.preventDefault(); $('search').focus();
+  }
+  if (e.key === 'Escape') {
+    if (S.searchQuery) { $('search').value = ''; S.searchQuery = ''; renderPanel(); }
+    else if (filterActive()) { clearFilter(); }
+    else if (S.view === 'slice' || S.view === 'namespace') { goRoot(); }
+  }
+});
+/* ══════════════════════════════════════════════════════
+   Boot
+   ══════════════════════════════════════════════════════ */
+$('auth-key').addEventListener('keydown', e => { if (e.key === 'Enter') submitAuth(); });
+boot();
+</script>
+</body>
+</html>