@dtudury/streamo 4.0.1 → 4.0.4

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/dtudury/streamo/main/public/streamo.svg" alt="streamo" width="140">
+</p>
+
 # streamo
 
 > every device is an equal author
@@ -126,6 +130,29 @@ const registry = new RepoRegistry(async key => {
 const repo = await registry.open(publicKeyHex)
 ```
 
+### bridgeRegistry — connect a multi-repo registry to your app's Recaller
+
+Each `Repo` owns its own `Recaller` (so it can do fine-grained tracking on its
+own internal keys), and your app uses a separate `Recaller` for its `mount()`
+slots. Reading `repo.byteLength` inside a slot registers a dep on the *repo's*
+recaller, not the app's, so without an explicit bridge the slot would never
+re-run when chunks arrive. `bridgeRegistry` is that bridge:
+
+```js
+import { Recaller, bridgeRegistry, h, mount } from '@dtudury/streamo'
+
+const recaller = new Recaller('app')
+const { dep, fire } = bridgeRegistry(registry, recaller)
+
+mount(h`${() => {
+  dep()
+  for (const [k, r] of registry) ...   // freely read any repo's state
+}}`, appEl, recaller)
+
+// Non-repo state changes (route, async results) — call fire() to force a re-render.
+window.addEventListener('hashchange', fire)
+```
+
 ### registrySync — peer sync over WebSocket
 
 ```js
@@ -163,7 +190,7 @@ mount(h`
 `, document.body, recaller)
 ```
 
-Functions interpolated as `${() => ...}` are reactive cells — they re-run automatically whenever the data they read changes. No virtual DOM diffing; only the exact DOM nodes bound to changed data update. Elements are recycled across re-renders by `data-key` (or tag as a fallback), so user input and focus survive list reorders. SVG namespaces propagate automatically — `` h`<svg><path d="..."/></svg>` `` works without any extra wiring. `class` accepts an array (`['btn', isActive && 'active']`) or an object (`{btn: true, active: false}`); falsy entries are filtered out.
+Functions interpolated as `${() => ...}` are reactive cells — they re-run automatically whenever the data they read changes. Only the exact DOM nodes bound to changed data update. Elements with stable `data-key` are recycled across re-renders so the outer element's identity and document position survive (helpful for animations or external DOM references). The recycled element's inner content is rebuilt from the new vnode on each re-render, so static interpolations (`${value}`) reflect current state. SVG namespaces propagate automatically — `` h`<svg><path d="..."/></svg>` `` works without any extra wiring. `class` accepts an array (`['btn', isActive && 'active']`) or an object (`{btn: true, active: false}`); falsy entries are filtered out.
 
 > **For lists that can reorder**, always set `data-key` on each item — the unkeyed positional fallback will recycle elements by tag in document order, which can attach the wrong DOM node (and any user focus/input on it) to the wrong vnode after a reorder.
 

package/index.js

@@ -17,6 +17,7 @@ export { Repo } from './public/streamo/Repo.js'
 export { Signer, verifySignature } from './public/streamo/Signer.js'
 export { Signature } from './public/streamo/Signature.js'
 export { RepoRegistry } from './public/streamo/RepoRegistry.js'
+export { bridgeRegistry } from './public/streamo/bridgeRegistry.js'
 export { registrySync, handleRegistryPeer } from './public/streamo/registrySync.js'
 export { archiveSync } from './public/streamo/archiveSync.js'
 export { fileSync } from './public/streamo/fileSync.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtudury/streamo",
-  "version": "4.0.1",
+  "version": "4.0.4",
   "description": "peer-to-peer sync where your data and identity belong to you, not the server",
   "keywords": ["p2p", "peer-to-peer", "sync", "reactive", "content-addressed", "websocket", "signed", "append-only", "offline-first", "cryptographic", "identity"],
   "repository": "git@github.com:dtudury/streamo.git",

package/public/apps/chat/index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>streamo chat</title>
+  <link rel="icon" type="image/svg+xml" href="/streamo.svg">
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
     :root { font-family: system-ui, sans-serif; font-size: 15px; --bg: #f5f5f5; --surface: #fff; --accent: #0070f3; --border: #ddd }
@@ -11,7 +12,9 @@
 
     /* Login */
     #login { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; width: min(360px, 90vw); display: flex; flex-direction: column; gap: .75rem }
-    #login h1 { font-size: 1.2rem; font-weight: 600 }
+    #login h1 { font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: .5rem }
+    #login h1 img { width: 1.4rem; height: 1.4rem }
+    #chat-header img { width: 1.1rem; height: 1.1rem }
     #login input { border: 1px solid var(--border); border-radius: 6px; padding: .5rem .75rem; font-size: 1rem; width: 100% }
     #login button { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: .6rem; font-size: 1rem; cursor: pointer }
     #login button:hover { opacity: .85 }
@@ -38,7 +41,7 @@
 <body>
 
 <div id="login">
-  <h1>streamo chat</h1>
+  <h1><img src="/streamo.svg" alt="">streamo chat</h1>
   <input id="username" placeholder="username" autocomplete="username">
   <input id="password" type="password" placeholder="password" autocomplete="current-password">
   <button id="join-btn">join</button>
@@ -47,7 +50,7 @@
 
 <div id="chat">
   <div id="chat-header">
-    streamo chat <span id="my-name"></span>
+    <img src="/streamo.svg" alt="">streamo chat <span id="my-name"></span>
   </div>
   <div id="messages"></div>
   <div id="input-row">

package/public/apps/chat/main.js

@@ -4,6 +4,7 @@ import { Recaller } from '../../streamo/utils/Recaller.js'
 import { Signer } from '../../streamo/Signer.js'
 import { RepoRegistry } from '../../streamo/RepoRegistry.js'
 import { registrySync } from '../../streamo/registrySync.js'
+import { bridgeRegistry } from '../../streamo/bridgeRegistry.js'
 import { bytesToHex } from '../../streamo/utils.js'
 
 const { primaryKeyHex: rootKey } = await fetch('/api/info').then(r => r.json())
@@ -81,30 +82,25 @@ joinBtn.onclick = async () => {
     // ── Reactive message list ──────────────────────────────────────────────
     //
     // Each repo has its own internal Recaller, so repo.get() inside a mount
-    // slot won't automatically re-trigger mount's recaller. Bridge via
-    // reportKey*: repo.watch() calls reportKeyMutation when data changes;
-    // the slot calls reportKeyAccess to register the dependency.
+    // slot doesn't automatically re-trigger mount's recaller. bridgeRegistry
+    // wires every repo (existing and future) into a single signal on the
+    // chat recaller; dep() inside the slot subscribes to it. See design.md
+    // §6 for the cross-recaller pattern.
 
     const recaller = new Recaller('chat')
-    const signal   = {}
-
-    function triggerRender () {
-      recaller.reportKeyMutation(signal, 'data')
+    const { dep } = bridgeRegistry(registry, recaller, 'chat')
+
+    // Auto-scroll to the bottom whenever any chunk arrives. Subscribing
+    // via the same `dep` keeps it in lockstep with the mount slot — both
+    // re-run when the bridge fires, the slot updates the DOM, and this
+    // watcher schedules a post-layout scroll.
+    recaller.watch('chat-scroll', () => {
+      dep()
       requestAnimationFrame(() => { msgsEl.scrollTop = msgsEl.scrollHeight })
-    }
-
-    function watchRepo (keyHex, repo) {
-      repo.watch(`chat:${keyHex}`, () => {
-        repo.byteLength  // register 'length' dep → re-fires on every commit and incoming sync chunk
-        triggerRender()
-      })
-    }
-
-    for (const [k, r] of registry) watchRepo(k, r)
-    registry.onOpen((keyHex, repo) => { watchRepo(keyHex, repo); triggerRender() })
+    })
 
     mount(h`${function messages () {
-      recaller.reportKeyAccess(signal, 'data')
+      dep()
       const all = []
       for (const [keyHex, repo] of registry) {
         if (keyHex === rootKey) continue

package/public/apps/explorer/index.html

@@ -4,12 +4,20 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>streamo explorer</title>
+  <link rel="icon" type="image/svg+xml" href="/streamo.svg">
   <link rel="stylesheet" href="/apps/styles/proto.css">
   <style>
     body { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem; }
 
     .header  { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.25rem; }
-    .wordmark { font-size: 1.6rem; letter-spacing: -0.02em; }
+    .wordmark {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 1.6rem;
+      letter-spacing: -0.02em;
+    }
+    .wordmark img { width: 1.8rem; height: 1.8rem; }
     .crumbs  { font-size: 0.85rem; color: var(--ink-dim); }
     .back    { cursor: pointer; color: var(--ink-dim); font-size: 0.85rem; display: inline-block; margin-bottom: 1rem; }
     .back:hover { color: var(--ink); }
@@ -220,6 +228,19 @@
     }
     .repo-link:hover { background: var(--flash); text-decoration-style: solid; }
 
+    /* Sticky at-view header: selector + strip + tabs travel with you as
+       you scroll long value trees or storage detail. Background-cover so
+       content scrolling underneath doesn't bleed through. */
+    .atview-header {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      background: var(--bg, #fefdf8);
+      padding-top: 0.25rem;
+      border-bottom: 1px solid var(--rule);
+      margin-bottom: 0.75rem;
+    }
+
     /* Byte stream — zoomed strip in a horizontally-scrollable container,
        click-drag-to-pan inside for "look around" navigation. */
     .byte-strip-container {
@@ -235,6 +256,45 @@
     .byte-strip-container.dragging .chunk { cursor: grabbing; }
     .byte-strip { display: block; }
 
+    /* Sig-coverage overlay: when hovering a sig anywhere on the page,
+       this rect is positioned over its [signedFrom, signedTo] byte range
+       on the strip. Subtle dashed band — doesn't fight the chunk colors. */
+    .byte-strip .sig-coverage {
+      fill: rgba(239, 68, 68, 0.12);
+      stroke: rgba(239, 68, 68, 0.6);
+      stroke-width: 1.5;
+      stroke-dasharray: 4 3;
+      opacity: 0;
+      transition: opacity 0.08s;
+    }
+    .byte-strip .sig-coverage.active { opacity: 1; }
+
+    /* "← older   newer →" labels under the strip — no UI action, just
+       Tour-Guide orientation so the append direction is obvious. */
+    .strip-direction {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.7rem;
+      color: var(--ink-dim);
+      padding: 0 0.25rem;
+      margin-top: 0.15rem;
+    }
+
+    /* Live readout of the hovered chunk — codec, address, length. Quiet
+       by default; lights up when something's hovered. */
+    .chunk-inspector {
+      font-family: monospace;
+      font-size: 0.8rem;
+      padding: 0.25rem 0.5rem;
+      margin: 0.25rem 0 0.75rem;
+      border-radius: var(--radius);
+      transition: color 0.08s, background 0.08s;
+    }
+    .chunk-inspector.active {
+      color: var(--ink);
+      background: var(--flash);
+    }
+
     .byte-map {
       display: block;
     }
@@ -248,6 +308,65 @@
     .byte-map .chunk.current { stroke: var(--ink); stroke-width: 2; }
     .byte-map .chunk.hovered { fill-opacity: 0.55; }
 
+    /* Streamo-typed value pills — every value gets a type-specific visual
+       identity instead of flattening through JSON.stringify. Colors echo
+       the byte-strip codec palette below so the visual language carries
+       across the page. */
+    .tv {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.05rem 0.4rem;
+      border-radius: var(--radius);
+      font-size: 0.85rem;
+      max-width: 100%;
+      vertical-align: baseline;
+    }
+    .tv-string { color: #047857; background: rgba(16, 185, 129, 0.10); font-family: monospace; }
+    .tv-string .tv-quote { color: #10b981; opacity: 0.7; font-weight: 600; }
+    .tv-num    { color: #475569; background: rgba(100, 116, 139, 0.10); font-family: monospace; }
+    .tv-date   { color: #475569; background: rgba(100, 116, 139, 0.10); }
+    .tv-date .tv-glyph { font-size: 0.75rem; }
+    .tv-date time { font-variant-numeric: tabular-nums; }
+    .tv-bool.tv-true   { color: #15803d; background: rgba(22, 163, 74, 0.10); font-family: monospace; }
+    .tv-bool.tv-false  { color: #b91c1c; background: rgba(220, 38, 38, 0.10); font-family: monospace; }
+    .tv-null, .tv-undefined { color: var(--ink-dim); background: transparent; font-style: italic; font-family: monospace; }
+    .tv-bytes  { color: #4d7c0f; background: rgba(132, 204, 22, 0.10); font-family: monospace; }
+    .tv-array, .tv-object { color: #1e40af; background: rgba(59, 130, 246, 0.10); }
+    .tv-duple  { color: #6b21a8; background: rgba(168, 85, 247, 0.10); }
+
+    /* Recursive typed-value tree — used for rehydrated views. Outer levels
+       expand inline; un-expanded composites become drillable chips. */
+    .tv-tree {
+      font-size: 0.85rem;
+      line-height: 1.7;
+      font-family: monospace;
+      margin: 0.4rem 0;
+    }
+    .tv-tree-row {
+      padding-left: 1.5rem;
+    }
+    .tv-tree .tv-bracket {
+      color: var(--ink-dim);
+      font-weight: 600;
+    }
+    .tv-tree .tv-bracket.clickable {
+      cursor: pointer;
+    }
+    .tv-tree .tv-bracket.clickable:hover {
+      background: var(--flash);
+      color: var(--ink);
+    }
+    .tv-tree .tv-key {
+      color: var(--ink-dim);
+      margin-right: 0.4rem;
+    }
+    .tv-drill {
+      cursor: pointer;
+      text-decoration: underline dotted var(--ink-dim);
+    }
+    .tv-drill:hover { background: var(--flash); text-decoration-style: solid; }
+
     /* codec category palette — used in both the legend and the SVG fills */
     .cat-commit    { fill: #f59e0b; background: #f59e0b; }
     .cat-sig       { fill: #ef4444; background: #ef4444; }
@@ -316,7 +435,7 @@
 </head>
 <body>
   <div class="header">
-    <div class="wordmark">streamo</div>
+    <div class="wordmark"><img src="/streamo.svg" alt="streamo">streamo</div>
     <div class="crumbs">explorer</div>
   </div>
   <div id="conn" class="conn">connecting…</div>

package/public/apps/explorer/main.js

@@ -13,15 +13,16 @@
 // storage chunks tucked into a <details>). Otherwise it's storage
 // drilling — value/storage tabs for that chunk, no selector.
 //
-// State lives in plain JS variables; reactivity is bridged from each Repo's
-// internal Recaller into the app-level Recaller via the `signal` pattern
-// (see chat/main.js for the same approach).
+// Reactivity is bridged from each Repo's internal Recaller into the
+// app-level Recaller via bridgeRegistry — see design.md §6 for why
+// each Repo has its own Recaller and how the bridge connects them.
 
 import { h } from '../../streamo/h.js'
 import { mount } from '../../streamo/mount.js'
 import { Recaller } from '../../streamo/utils/Recaller.js'
 import { RepoRegistry } from '../../streamo/RepoRegistry.js'
 import { registrySync } from '../../streamo/registrySync.js'
+import { bridgeRegistry } from '../../streamo/bridgeRegistry.js'
 import { changedPaths } from '../../streamo/Streamo.js'
 import { hexToBytes } from '../../streamo/utils.js'
 
@@ -44,36 +45,18 @@ try {
 // ── App-level reactivity ──────────────────────────────────────────────────
 
 const recaller = new Recaller('explorer')
-const signal = {}
-const dep = () => recaller.reportKeyAccess(signal, 'data')
+const { dep, fire: bridgeFire } = bridgeRegistry(registry, recaller, 'explorer')
 
-const schedule = typeof requestAnimationFrame !== 'undefined'
-  ? fn => requestAnimationFrame(fn)
-  : fn => queueMicrotask(fn)
-let scheduled = false
+// Wrap bridgeFire to also schedule the byte-strip pin-to-HEAD side effect
+// after the next render. Reactive mutation is synchronous (so the slot
+// re-runs at next tick); only the post-render DOM peek goes through rAF.
+let stripSyncScheduled = false
 function fire () {
-  if (scheduled) return
-  scheduled = true
-  schedule(() => {
-    scheduled = false
-    recaller.reportKeyMutation(signal, 'data')
-    // After mount has updated the DOM, sync byte-strip viewport indicators
-    // and (if appropriate) keep them pinned to HEAD on live updates.
-    syncByteStrips()
-  })
-}
-
-const watched = new Set()
-function watchRepo (key, repo) {
-  if (watched.has(key)) return
-  watched.add(key)
-  repo.watch(`explorer:${key}`, () => {
-    repo.byteLength
-    fire()
-  })
+  bridgeFire()
+  if (stripSyncScheduled) return
+  stripSyncScheduled = true
+  requestAnimationFrame(() => { stripSyncScheduled = false; syncByteStrips() })
 }
-for (const [k, r] of registry) watchRepo(k, r)
-registry.onOpen((k, r) => { watchRepo(k, r); fire() })
 
 // ── Hash routing ──────────────────────────────────────────────────────────
 
@@ -298,11 +281,18 @@ function RegistryView () {
       dep()
       const rows = []
       for (const [keyHex, repo] of registry) {
+        // No claims about state we can't verify — show the date when we
+        // resolve a commit, otherwise show the byte count. byteLength
+        // is honest: it's what we actually have on hand. The watcher
+        // fires as more chunks land and the row settles to a date once
+        // the commit chunk resolves at the end of the stream.
         const last = repo.lastCommit
+        const len = repo.byteLength
+        const when = last ? fmtDate(last.date) : `${len} b`
         rows.push(h`
           <div class="row" data-key=${keyHex} data-action="open-repo">
             <span class="mono">${truncKey(keyHex)}</span>
-            <span class="when">${last ? fmtDate(last.date) : '(no commits)'}</span>
+            <span class=${['when', last ? null : 'dim']}>${when}</span>
             <span class="msg dim">${last?.message || ''}</span>
           </div>
         `)
@@ -407,7 +397,7 @@ function repoExtras (repo, keyHex) {
             <tr data-key=${`o${e.address}`} data-action="open-at"
                 data-keyhex=${keyHex} data-addr=${e.address}>
               <td class="mono dim">${e.codecType}</td>
-              <td>${(() => { try { return previewValue(repo.decode(e.address)) } catch { return '' } })()}</td>
+              <td>${(() => { try { return typedValue(repo.decode(e.address)) } catch { return '' } })()}</td>
               <td class="mono dim">@${e.address}</td>
             </tr>
           `)}
@@ -453,11 +443,13 @@ function AtView ({ keyHex, address }) {
       const isCommit = isCommitShape(decoded)
       const isSig = codecType === 'SIGNATURE'
 
-      // Tabs are part of the page content (not the static header) so the
-      // commit selector renders ABOVE the tabs. The selector is always
-      // present (when the repo has any commits) so the UI doesn't shift
-      // as you click between commit pages and storage drilling — when
-      // the current address isn't a commit, the summary shows "detached".
+      // Common header shown on every at-view: commit selector dropdown,
+      // byte-strip with the current chunk highlighted, then the value/
+      // storage tab nav. The byte-strip used to live only in the storage
+      // tab; promoting it lets you keep spatial context across tab and
+      // commit switches, and any data-addr hover (typed-tree chips,
+      // refs/referrers tables, kv addr links) cross-highlights and
+      // smooth-scrolls into view in the strip.
       const tabs = h`
         <nav class="tabs">
           <a class=${() => { dep(); return ['tab', atTab === 'value' ? 'active' : null] }}
@@ -467,24 +459,25 @@ function AtView ({ keyHex, address }) {
         </nav>
       `
       const selector = commitSelectorSection(repo, keyHex, resolvedAddr)
+      const bytes = byteStreamSection(repo, keyHex, resolvedAddr)
+      // Wrap in a sticky container so the selector + strip + tabs stay
+      // anchored as you scroll long value trees or storage detail.
+      const header = h`<div class="atview-header">${selector}${bytes}${tabs}</div>`
 
-      // Storage tab: spatial view of where this chunk lives in the byte
-      // stream + outgoing references + this chunk's bytes + incoming
-      // referrers. The chunk graph from this chunk's perspective.
+      // Storage tab: this chunk's outgoing refs, raw bytes, and
+      // referrers. (byteStreamSection moved up into the header.)
       if (atTab === 'storage') {
         return h`
-          ${selector}
-          ${tabs}
-          ${byteStreamSection(repo, keyHex, resolvedAddr)}
+          ${header}
           ${outgoingReferencesSection(repo, keyHex, resolvedAddr)}
           ${rawChunkSection(repo, resolvedAddr)}
           ${referrersSection(repo, keyHex, resolvedAddr)}
         `
       }
 
-      // Every value-tab branch below prepends ${selector}${tabs} so the
-      // UI is stable across navigation: the selector is always at the
-      // top of the page when the repo has any sigs.
+      // Every value-tab branch below prepends ${header} so the UI is
+      // stable across navigation: selector + byte-strip + tabs are
+      // always at the top of the page when the repo has any commits.
 
       // Value tab — branches by codec.
       // Helper: render the kv-table of decoded fields for any Object/Array
@@ -507,13 +500,13 @@ function AtView ({ keyHex, address }) {
                   return h`
                     <tr>
                       <td class="mono">${k}</td>
-                      <td>${previewValue(inlineValue)}</td>
+                      <td>${typedValue(inlineValue)}</td>
                       <td class="dim">(inline)</td>
                     </tr>
                   `
                 }
                 let preview = ''
-                try { preview = previewValue(repo.decode(childAddr)) }
+                try { preview = typedValue(repo.decode(childAddr)) }
                 catch { preview = '(error)' }
                 return h`
                   <tr data-key=${k} data-action="open-at"
@@ -553,13 +546,30 @@ function AtView ({ keyHex, address }) {
             : h`<span class="verify-badge pending">…</span><span class="dim">not yet signed — sign in flight or pending</span>`,
           covering ? 'verified' : 'unsigned'
         )
+        // Commit fields render with two semantic specials: dataAddress and
+        // parent are *byte-address pointers* (their numeric value IS a
+        // navigation target), so they're clickable address pills directly
+        // — the chunk holding the FLOAT64 value is incidental and we
+        // skip the chunk-address column for those rows.
+        const addrLink = (addr) => addr === undefined
+          ? h`<span class="dim">(none — first commit)</span>`
+          : h`<a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${addr}>@${addr}</a>`
+        const commitFieldsTable = h`
+          <table class="kv">
+            <tbody>
+              <tr><td class="mono">message</td><td>${typedValue(decoded.message)}</td></tr>
+              <tr><td class="mono">date</td><td>${typedValue(decoded.date)}</td></tr>
+              <tr><td class="mono">dataAddress</td><td>${addrLink(decoded.dataAddress)}</td></tr>
+              <tr><td class="mono">parent</td><td>${addrLink(decoded.parent)}</td></tr>
+            </tbody>
+          </table>
+        `
         return h`
-          ${selector}
-          ${tabs}
+          ${header}
           ${banner}
-          ${refsTable()}
-          <h3>rehydrated</h3>
-          <pre class="value">${safeJSON(decoded)}</pre>
+          ${commitFieldsTable}
+          <h3>value <span class="dim">at <a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${decoded.dataAddress}>@${decoded.dataAddress}</a></span></h3>
+          ${valueTree(repo, keyHex, decoded.dataAddress)}
           ${changes
             ? h`
               <h3>changed paths <span class="dim">(${changes.length})</span></h3>
@@ -591,8 +601,7 @@ function AtView ({ keyHex, address }) {
       // Duple: explain what this tree-node IS, then show its two children.
       if (codecType === 'DUPLE') {
         return h`
-          ${selector}
-          ${tabs}
+          ${header}
           ${kindBanner('duple', h`<span class="dim">2-tuple, tree scaffolding</span>`)}
           <p class="explainer">
             A <strong>Duple</strong> is a 2-tuple — the building block streamo uses
@@ -605,8 +614,8 @@ function AtView ({ keyHex, address }) {
           </p>
           <table class="kv">
             <tbody>
-              <tr><td class="mono">v[0]</td><td>${previewValue(decoded.v[0])}</td></tr>
-              <tr><td class="mono">v[1]</td><td>${previewValue(decoded.v[1])}</td></tr>
+              <tr><td class="mono">v[0]</td><td>${typedValue(decoded.v[0])}</td></tr>
+              <tr><td class="mono">v[1]</td><td>${typedValue(decoded.v[1])}</td></tr>
             </tbody>
           </table>
         `
@@ -626,8 +635,7 @@ function AtView ({ keyHex, address }) {
           'verified'
         )
         return h`
-          ${selector}
-          ${tabs}
+          ${header}
           ${banner}
           ${sigDetailBody(repo, keyHex, resolvedAddr, decoded)}
           <div class="dim" style="margin-top: 0.5rem;">switch to the <strong>storage</strong> tab above to see the raw chunk bytes, outgoing references, and what else points at this address.</div>
@@ -645,8 +653,7 @@ function AtView ({ keyHex, address }) {
           ? (isArray ? 'empty array' : 'empty object')
           : (isArray ? 'array' : 'object')
         return h`
-          ${selector}
-          ${tabs}
+          ${header}
           ${kindBanner(label, dim)}
           ${refsTable()}
           ${fieldCount > 0 ? h`
@@ -658,8 +665,7 @@ function AtView ({ keyHex, address }) {
 
       // Primitive: just show it.
       return h`
-        ${selector}
-        ${tabs}
+        ${header}
         ${kindBanner(codecType.toLowerCase())}
         <pre class="value">${safeJSON(decoded)}</pre>
       `
@@ -713,12 +719,22 @@ function byteStreamSection (repo, keyHex, currentAddress) {
     const code = repo.resolve(addr)
     if (!code || !code.length) break
     const codec = repo.footerToCodec[code.at(-1)]
-    chunks.unshift({
+    const chunk = {
       address: addr,
       start: addr - code.length + 1,
       length: code.length,
       codecType: codec?.type || '?'
-    })
+    }
+    // For sigs: precompute the byte range covered, so hover anywhere on
+    // the page can light up that range as an overlay band on the strip.
+    if (chunk.codecType === 'SIGNATURE') {
+      try {
+        const sig = repo.decode(addr)
+        chunk.signedFrom = sig.address
+        chunk.signedTo = addr - code.length
+      } catch {}
+    }
+    chunks.unshift(chunk)
     addr -= code.length
   }
   if (!chunks.length) return null
@@ -754,6 +770,20 @@ function byteStreamSection (repo, keyHex, currentAddress) {
     return item
   })
   const stripW = cursorX
+  // Map byte address → strip x. Used by the sig-coverage overlay so hover
+  // anywhere on the page can light up "what bytes does this sig sign".
+  // Stored as data attrs on the strip container so the hover handler
+  // can read without recomputing.
+  const xForByte = (byteAddr) => {
+    // Find the chunk containing this byte and interpolate within it.
+    for (const c of layout) {
+      if (byteAddr >= c.start && byteAddr <= c.address) {
+        const frac = c.length === 1 ? 0 : (byteAddr - c.start) / (c.length - 1)
+        return c.x + frac * c.w
+      }
+    }
+    return 0
+  }
   return h`
     <h3>byte stream <span class="dim">(${total} bytes · ${chunks.length} chunks)</span></h3>
     <div class="byte-map-legend">
@@ -766,21 +796,33 @@ function byteStreamSection (repo, keyHex, currentAddress) {
       <span class="cat-num">num</span>
       <span class="cat-var">var</span>
     </div>
-    <div class="byte-strip-container" data-key=${`strip-${keyHex}`}>
+    <div class="byte-strip-container" data-key=${`strip-${keyHex}`} data-strip-w=${stripW}>
       <svg class="byte-map byte-strip" width=${stripW} height=${H} viewBox=${`0 0 ${stripW} ${H}`}>
         ${layout.map(c => {
           const cat = commitAddrs.has(c.address) ? 'commit' : codecCategory(c.codecType)
           const cls = ['chunk', `cat-${cat}`, c.address === currentAddress ? 'current' : null]
+          // Sigs carry their coverage range in data-attrs so hover handlers
+          // (anywhere on the page) can position the coverage overlay.
+          // Non-sigs get null which removes the attrs.
+          const sigFromX = c.signedFrom != null ? xForByte(c.signedFrom) : null
+          const sigToX   = c.signedTo   != null ? xForByte(c.signedTo)   : null
           return h`<rect
             class=${cls}
             x=${c.x} y="0" width=${c.w} height=${H}
             data-action="open-at"
             data-keyhex=${keyHex}
             data-addr=${c.address}
+            data-codec=${c.codecType}
+            data-len=${c.length}
+            data-sig-from-x=${sigFromX}
+            data-sig-to-x=${sigToX}
           ><title>${c.codecType} @${c.address} (${c.length} bytes)</title></rect>`
         })}
+        <rect class="sig-coverage" x="0" y="0" width="0" height=${H} pointer-events="none"/>
       </svg>
+      <div class="strip-direction"><span>← older</span><span>newer →</span></div>
     </div>
+    <div class="chunk-inspector dim" data-key=${`inspector-${keyHex}`}>hover the strip to inspect a chunk</div>
   `
 }
 
@@ -802,7 +844,7 @@ function outgoingReferencesSection (repo, keyHex, address) {
           try {
             const childCode = repo.resolve(childAddr)
             codecType = repo.footerToCodec[childCode.at(-1)]?.type || '?'
-            preview = previewValue(repo.decode(childAddr))
+            preview = typedValue(repo.decode(childAddr))
           } catch { preview = '(error)' }
           return h`
             <tr data-key=${`out${i}@${childAddr}`} data-action="open-at"
@@ -840,7 +882,7 @@ function referrersSection (repo, keyHex, address) {
       <tbody>
         ${refs.map(r => {
           let preview = ''
-          try { preview = previewValue(repo.decode(r.address)) }
+          try { preview = typedValue(repo.decode(r.address)) }
           catch { preview = '(error)' }
           return h`
             <tr data-key=${`r${r.address}`} data-action="open-at"
@@ -863,19 +905,108 @@ function isDuple (v) {
   return v && typeof v === 'object' && Array.isArray(v.v) && v.v.length === 2 && Object.keys(v).length === 1
 }
 
-function previewValue (v, depth = 0) {
-  if (v == null) return String(v)
-  if (typeof v === 'string') return v.length > 60 ? JSON.stringify(v.slice(0, 60)) + '…' : JSON.stringify(v)
-  if (typeof v === 'number' || typeof v === 'boolean') return String(v)
-  if (v instanceof Date) return v.toISOString()
-  if (v instanceof Uint8Array) return `Uint8Array(${v.length})`
+// Streamo-typed value renderer — every value gets a visual identity
+// matching its underlying codec, instead of being flattened through
+// JSON.stringify. Primitives render with type-specific styling
+// (string → quoted mono in green frame, date → <time> with calendar
+// chip, number → number chip, etc.); composites currently render as
+// count chips ({ N fields } / [ N elements ]) — depth-controlled
+// expansion is the next step in this thread (see THREADS.md).
+function typedValue (v, depth = 0) {
+  if (v === null) return h`<span class="tv tv-null" title="NULL">null</span>`
+  if (v === undefined) return h`<span class="tv tv-undefined" title="UNDEFINED">undefined</span>`
+  if (typeof v === 'boolean') {
+    return h`<span class=${['tv', 'tv-bool', v ? 'tv-true' : 'tv-false']} title=${v ? 'TRUE' : 'FALSE'}>${v ? '✓' : '✗'} ${String(v)}</span>`
+  }
+  if (typeof v === 'string') {
+    const display = v.length > 60 ? v.slice(0, 60) + '…' : v
+    return h`<span class="tv tv-string" title=${v.length === 0 ? 'EMPTY_STRING' : 'STRING'}><span class="tv-quote">“</span>${display}<span class="tv-quote">”</span></span>`
+  }
+  if (typeof v === 'number') {
+    // UINT7 is the codec for non-negative integers < 128; everything else
+    // routes through FLOAT64. Surfacing this distinction makes "why is
+    // this 1 byte vs 9" tactile when you hover.
+    const codec = (Number.isInteger(v) && v >= 0 && v < 128) ? 'UINT7' : 'FLOAT64'
+    return h`<span class="tv tv-num" title=${codec}>${String(v)}</span>`
+  }
+  if (v instanceof Date) {
+    return h`<span class="tv tv-date" title="DATE"><span class="tv-glyph">📅</span><time datetime=${v.toISOString()}>${v.toLocaleString()}</time></span>`
+  }
+  if (v instanceof Uint8Array) {
+    return h`<span class="tv tv-bytes" title=${v.length === 0 ? 'EMPTY_UINT8ARRAY' : (v.length <= 4 ? 'WORD or UINT8ARRAY' : 'UINT8ARRAY')}>Uint8Array(${v.length})</span>`
+  }
   if (isDuple(v)) {
-    if (depth > 2) return 'Duple(…)'
-    return `Duple(${previewValue(v.v[0], depth + 1)}, ${previewValue(v.v[1], depth + 1)})`
+    if (depth > 1) return h`<span class="tv tv-duple" title="DUPLE">Duple(…)</span>`
+    return h`<span class="tv tv-duple" title="DUPLE">Duple(${typedValue(v.v[0], depth + 1)}, ${typedValue(v.v[1], depth + 1)})</span>`
   }
-  if (Array.isArray(v)) return `[…] (${v.length})`
-  if (typeof v === 'object') return `{…} (${Object.keys(v).length})`
-  return String(v)
+  if (Array.isArray(v)) {
+    return h`<span class="tv tv-array" title=${v.length === 0 ? 'EMPTY_ARRAY' : 'ARRAY'}>[ ${v.length} ${v.length === 1 ? 'element' : 'elements'} ]</span>`
+  }
+  if (typeof v === 'object') {
+    const n = Object.keys(v).length
+    return h`<span class="tv tv-object" title=${n === 0 ? 'EMPTY_OBJECT' : 'OBJECT'}>{ ${n} ${n === 1 ? 'field' : 'fields'} }</span>`
+  }
+  return h`<span class="tv">${String(v)}</span>`
+}
+
+// Recursive typed-value tree — like typedValue, but expands composites
+// inline up to `depth` levels deep. Beyond depth, composites render as
+// un-expanded chips. Click a chip to expand IN PLACE (forceExpanded);
+// click an expanded composite's opening bracket to collapse it back to
+// a chip (forceCollapsed). Force-expand and force-collapse override
+// the default depth-based decision.
+//
+// Default depth=3 covers `{ name, messages: [{text, at}, ...] }` —
+// outer object expanded, messages array expanded, message objects
+// expanded, and primitives like text/at render inline.
+const forceExpanded  = new Set()  // `${keyHex}:${address}` → user clicked chip
+const forceCollapsed = new Set()  // `${keyHex}:${address}` → user clicked bracket
+
+function valueTree (repo, keyHex, address, depth = 3) {
+  let value, refs
+  try {
+    value = repo.decode(address)
+    refs = repo.asRefs(address)
+  } catch {
+    return h`<span class="dim">(decode error @${address})</span>`
+  }
+  if (typeof value !== 'object' || value === null || value instanceof Date || value instanceof Uint8Array) {
+    return typedValue(value)
+  }
+  const k = `${keyHex}:${address}`
+  const userExpanded  = forceExpanded.has(k)
+  const userCollapsed = forceCollapsed.has(k)
+  const expand = userExpanded || (!userCollapsed && depth > 0)
+  if (!expand) {
+    return h`<a class="tv-drill" data-action="expand-tree"
+                 data-keyhex=${keyHex} data-addr=${address}
+                 title="click to expand · drill via storage tab if you need a full at-view"
+              >${typedValue(value)}</a>`
+  }
+  const isArray = Array.isArray(value)
+  const entries = isArray
+    ? value.map((v, i) => [String(i), v, refs?.[i]])
+    : Object.entries(value).map(([k, v]) => [k, v, refs?.[k]])
+  if (entries.length === 0) {
+    return h`<span class="tv ${isArray ? 'tv-array' : 'tv-object'}">${isArray ? '[ ]' : '{ }'}</span>`
+  }
+  return h`
+    <div class="tv-tree ${isArray ? 'tv-tree-array' : 'tv-tree-object'}">
+      <span class="tv-bracket clickable" data-action="collapse-tree"
+            data-keyhex=${keyHex} data-addr=${address}
+            title="click to collapse"
+        >${isArray ? '[' : '{'}</span>
+      ${entries.map(([k, v, addr]) => h`
+        <div class="tv-tree-row">
+          <span class="tv-key">${k}:</span>
+          ${addr !== undefined
+            ? valueTree(repo, keyHex, addr, depth - 1)
+            : typedValue(v)}
+        </div>
+      `)}
+      <span class="tv-bracket">${isArray ? ']' : '}'}</span>
+    </div>
+  `
 }
 
 function safeGet (f) { try { return f() } catch { return undefined } }
@@ -1050,6 +1181,18 @@ appEl.addEventListener('click', e => {
       el.closest('details.commit-selector')?.removeAttribute('open')
       return go({ kind: 'at', keyHex: el.dataset.keyhex, address: +el.dataset.addr })
     }
+    case 'expand-tree': {
+      const k = `${el.dataset.keyhex}:${el.dataset.addr}`
+      forceExpanded.add(k)
+      forceCollapsed.delete(k)
+      return fire()
+    }
+    case 'collapse-tree': {
+      const k = `${el.dataset.keyhex}:${el.dataset.addr}`
+      forceCollapsed.add(k)
+      forceExpanded.delete(k)
+      return fire()
+    }
   }
 })
 
@@ -1111,11 +1254,11 @@ appEl.addEventListener('pointerup', endDrag)
 appEl.addEventListener('pointercancel', endDrag)
 
 // Cross-highlight: hovering any element with data-addr highlights the
-// matching chunk in the byte-map. References and referrers light up the
-// chunk's position in the stream so you can SEE where it lives. If the
-// hover came from somewhere other than the strip itself, smooth-scroll
-// the matching chunk into view inside any byte-strip-container —
-// otherwise hover-elsewhere can highlight chunks that are off-screen.
+// matching chunk in the byte-map, populates the chunk inspector below
+// the strip with codec/addr/length, and (if the hovered chunk is a
+// signature) lights up its covered byte range as an overlay band on
+// the strip. If the hover came from somewhere other than the strip
+// itself, smooth-scroll the matching chunk into view in the strip.
 appEl.addEventListener('mouseover', e => {
   const el = e.target.closest('[data-addr]')
   if (!el) return
@@ -1129,10 +1272,37 @@ appEl.addEventListener('mouseover', e => {
       }
     })
   }
+  // Look up the chunk's data on the strip rect for inspector + sig coverage.
+  const stripRect = matches[0]?.closest('.byte-strip-container') ? matches[0]
+    : appEl.querySelector(`.byte-strip .chunk[data-addr="${addr}"]`)
+  if (stripRect) {
+    const codec = stripRect.dataset.codec
+    const len = stripRect.dataset.len
+    for (const ins of appEl.querySelectorAll('.chunk-inspector')) {
+      ins.textContent = codec ? `${codec} · @${addr} · ${len} bytes` : `chunk @${addr}`
+      ins.classList.remove('dim')
+      ins.classList.add('active')
+    }
+    const fromX = stripRect.getAttribute('data-sig-from-x')
+    const toX   = stripRect.getAttribute('data-sig-to-x')
+    if (fromX != null && toX != null) {
+      const overlay = stripRect.closest('.byte-strip').querySelector('.sig-coverage')
+      if (overlay) {
+        overlay.setAttribute('x', fromX)
+        overlay.setAttribute('width', String(parseFloat(toX) - parseFloat(fromX)))
+        overlay.classList.add('active')
+      }
+    }
+  }
 })
 appEl.addEventListener('mouseout', e => {
   const el = e.target.closest('[data-addr]')
   if (!el) return
-  appEl.querySelectorAll('.byte-map .chunk.hovered')
-    .forEach(c => c.classList.remove('hovered'))
+  appEl.querySelectorAll('.byte-map .chunk.hovered').forEach(c => c.classList.remove('hovered'))
+  appEl.querySelectorAll('.sig-coverage.active').forEach(o => o.classList.remove('active'))
+  for (const ins of appEl.querySelectorAll('.chunk-inspector')) {
+    ins.textContent = 'hover the strip to inspect a chunk'
+    ins.classList.remove('active')
+    ins.classList.add('dim')
+  }
 })

package/public/index.html

@@ -4,18 +4,56 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>streamo</title>
+  <link rel="icon" type="image/svg+xml" href="/streamo.svg">
   <link rel="stylesheet" href="/apps/styles/proto.css">
   <style>
     body { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem; }
 
-    .wordmark { font-size: 2.4rem; letter-spacing: -0.02em; margin-bottom: 0.15rem; }
-    .tagline  { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 2rem; }
+    .wordmark {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      font-size: 2.4rem;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.15rem;
+    }
+    .wordmark img { width: 2.6rem; height: 2.6rem; }
+    .tagline  { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 0.4rem; }
+
+    /* "what's running here" line — small, clickable, places the abstract
+       claims in the next paragraph onto a real running server. */
+    .here {
+      font-size: 0.78rem;
+      color: var(--ink-dim);
+      margin-bottom: 2rem;
+      font-family: monospace;
+    }
+    .here a {
+      color: var(--ink-dim);
+      text-decoration: underline dotted;
+    }
+    .here a:hover { color: var(--ink); text-decoration-style: solid; }
+    .here .pulse {
+      display: inline-block;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background: #16a34a;
+      margin-right: 0.4rem;
+      vertical-align: 0.05em;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    .here .pulse.err { background: #dc2626; animation: none; }
+    @keyframes pulse {
+      0%, 100% { opacity: 0.4; }
+      50%      { opacity: 1; }
+    }
 
     .ideas {
       display: flex;
       flex-direction: column;
       gap: 0.6rem;
-      margin-bottom: 2.5rem;
+      margin-bottom: 1.5rem;
     }
     .idea {
       display: flex;
@@ -27,6 +65,72 @@
     .idea-text  { color: var(--ink-dim); }
     .idea-text strong { color: var(--ink); }
 
+    /* "try it" card — folds shut by default. When opened, derives a real
+       secp256k1 keypair from credentials in the browser. Concrete proof
+       of "your identity travels with you" instead of just claiming it. */
+    details.try-it {
+      border: 1.5px dashed var(--rule);
+      border-radius: var(--radius);
+      padding: 0.6rem 0.85rem;
+      margin-bottom: 2rem;
+    }
+    details.try-it[open] { border-color: var(--ink); border-style: solid; }
+    details.try-it > summary {
+      cursor: pointer;
+      font-size: 0.85rem;
+      color: var(--ink-dim);
+    }
+    details.try-it[open] > summary { color: var(--ink); margin-bottom: 0.65rem; }
+    details.try-it > summary::before {
+      content: '↳ ';
+      color: var(--ink-dim);
+    }
+    .try-it-note {
+      font-size: 0.78rem;
+      color: var(--ink-dim);
+      line-height: 1.5;
+      margin: 0 0 0.65rem;
+    }
+    .try-it-note strong { color: var(--ink); }
+    .try-it-form {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-bottom: 0.65rem;
+    }
+    .try-it-form input {
+      flex: 1 1 8rem;
+      font-family: monospace;
+      font-size: 0.85rem;
+      padding: 0.35rem 0.55rem;
+      border: 1px solid var(--rule);
+      border-radius: var(--radius);
+      background: transparent;
+      color: var(--ink);
+    }
+    .try-it-form input:focus {
+      outline: none;
+      border-color: var(--ink);
+    }
+    .derived-key {
+      font-size: 0.78rem;
+      color: var(--ink-dim);
+      padding: 0.35rem 0.55rem;
+      border-radius: var(--radius);
+      background: rgba(0, 0, 0, 0.03);
+      word-break: break-all;
+    }
+    .derived-key .key-label {
+      display: block;
+      margin-bottom: 0.2rem;
+      font-family: monospace;
+    }
+    .derived-key .key-value {
+      font-family: monospace;
+      color: var(--ink);
+    }
+    .derived-key.computing .key-value { color: var(--ink-dim); font-style: italic; }
+
     hr { margin: 2rem 0; }
 
     .apps-heading {
@@ -44,7 +148,9 @@
     }
 
     .app-card {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
       text-decoration: none;
       color: var(--ink);
       border: 1.5px solid var(--ink);
@@ -56,22 +162,41 @@
     .app-card:hover  { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); }
     .app-card:active { transform: translate(1px, 2px); box-shadow: none; }
 
-    .app-name { font-size: 1rem; margin-bottom: 0.2rem; }
+    .app-name-row {
+      display: flex;
+      align-items: baseline;
+      gap: 0.45rem;
+    }
+    .app-glyph { font-size: 1.1rem; }
+    .app-name { font-size: 1rem; }
     .app-desc { font-size: 0.78rem; color: var(--ink-dim); line-height: 1.4; }
 
     .footer {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
       margin-top: 3rem;
-      font-size: 0.75rem;
+    }
+    .footer-chip {
+      font-size: 0.78rem;
       color: var(--ink-dim);
+      text-decoration: none;
+      padding: 0.25rem 0.6rem;
+      border: 1px solid var(--rule);
+      border-radius: var(--radius);
     }
-    .footer a { color: var(--ink-dim); }
+    .footer-chip:hover { color: var(--ink); border-color: var(--ink); }
   </style>
 </head>
 <body>
 
-  <div class="wordmark">streamo</div>
+  <div class="wordmark"><img src="/streamo.svg" alt="streamo">streamo</div>
   <p class="tagline">every device is an equal author</p>
 
+  <p class="here" id="here">
+    <span class="pulse" id="pulse"></span><span id="here-text">connecting…</span>
+  </p>
+
   <div class="ideas">
     <div class="idea">
       <span class="idea-glyph">↔</span>
@@ -91,26 +216,106 @@
     </div>
   </div>
 
+  <details class="try-it">
+    <summary>try it — derive a streamo identity right here</summary>
+    <p class="try-it-note">
+      type any username and password. the keypair is computed in your browser via PBKDF2-SHA256 and is <strong>never sent</strong> anywhere. same inputs always produce the same key — that's how streamo identities travel without key files. <strong>don't use a real password</strong>; this is just a demo.
+    </p>
+    <div class="try-it-form">
+      <input type="text" placeholder="username" id="demo-username" autocomplete="off">
+      <input type="password" placeholder="password" id="demo-password" autocomplete="new-password">
+    </div>
+    <div class="derived-key" id="demo-key-row">
+      <span class="key-label">public key (secp256k1):</span>
+      <code class="key-value" id="demo-key">— enter credentials above —</code>
+    </div>
+  </details>
+
   <hr>
 
   <p class="apps-heading">apps</p>
   <div class="app-grid">
     <a class="app-card" href="/apps/chat/">
-      <div class="app-name">chat</div>
-      <div class="app-desc">p2p messaging — the server is a relay, not a gatekeeper</div>
+      <div class="app-name-row">
+        <span class="app-glyph">💬</span>
+        <span class="app-name">chat</span>
+      </div>
+      <div class="app-desc">p2p messaging — each participant owns their own signed message stream</div>
     </a>
     <a class="app-card" href="/apps/explorer/">
-      <div class="app-name">explorer</div>
-      <div class="app-desc">browse repos, commit history, and value at any commit</div>
+      <div class="app-name-row">
+        <span class="app-glyph">🔍</span>
+        <span class="app-name">explorer</span>
+      </div>
+      <div class="app-desc">browse repos, commit history, and the bytes underneath</div>
     </a>
   </div>
   <p class="dim" style="margin-top: 1rem; font-size: 0.78rem;">
     open both side by side — watch commits roll in as you chat
   </p>
 
-  <p class="footer">
-    <a href="https://github.com/dtudury/streamo">github</a>
-  </p>
+  <div class="footer">
+    <a class="footer-chip" href="https://github.com/dtudury/streamo">github</a>
+    <a class="footer-chip" href="https://github.com/dtudury/streamo/blob/main/design.md">design.md</a>
+    <a class="footer-chip" href="https://github.com/dtudury/streamo/blob/main/ROADMAP.md">roadmap</a>
+    <a class="footer-chip" href="https://www.npmjs.com/package/@dtudury/streamo">npm</a>
+  </div>
+
+  <script type="module">
+    import { Signer } from '/streamo/Signer.js'
+    import { bytesToHex } from '/streamo/utils.js'
+
+    // Surface "what's running here" — server's primary key as a clickable
+    // link to the explorer. Replaces the abstract "no server holds
+    // authority" claim above with a concrete, navigable instance of it.
+    const pulseEl = document.getElementById('pulse')
+    const hereEl  = document.getElementById('here-text')
+    try {
+      const info = await fetch('/api/info').then(r => r.json())
+      const truncKey = info.primaryKeyHex.slice(0, 12) + '…'
+      hereEl.innerHTML = `relaying <a href="/apps/explorer/#/repo/${info.primaryKeyHex}">${truncKey}</a> as "${info.name || 'this server'}"`
+    } catch (e) {
+      pulseEl.classList.add('err')
+      hereEl.textContent = 'not connected to a streamo server'
+    }
+
+    // Derive-on-type for the try-it widget. Debounced because PBKDF2 is
+    // intentionally slow; we don't want to hammer the browser per keystroke.
+    const u = document.getElementById('demo-username')
+    const p = document.getElementById('demo-password')
+    const out = document.getElementById('demo-key')
+    const row = document.getElementById('demo-key-row')
+    let timer = null
+    let inFlight = 0
+    function update () {
+      clearTimeout(timer)
+      const username = u.value.trim()
+      const password = p.value
+      if (!username || !password) {
+        row.classList.remove('computing')
+        out.textContent = '— enter credentials above —'
+        return
+      }
+      row.classList.add('computing')
+      out.textContent = 'computing PBKDF2…'
+      const me = ++inFlight
+      timer = setTimeout(async () => {
+        try {
+          const signer = new Signer(username, password, 1)
+          const { publicKey } = await signer.keysFor('chat')
+          if (me !== inFlight) return  // user kept typing; stale
+          row.classList.remove('computing')
+          out.textContent = '0x' + bytesToHex(publicKey)
+        } catch (e) {
+          if (me !== inFlight) return
+          row.classList.remove('computing')
+          out.textContent = `error: ${e.message}`
+        }
+      }, 300)
+    }
+    u.addEventListener('input', update)
+    p.addEventListener('input', update)
+  </script>
 
 </body>
 </html>

package/public/streamo/bridgeRegistry.js

@@ -0,0 +1,64 @@
+/**
+ * @file bridgeRegistry — connect a multi-repo registry to an app Recaller.
+ *
+ * Each Repo has its own Recaller so it can track fine-grained dependencies
+ * on its own internal keys. An app that uses many Repos has its own
+ * different Recaller for its mount() slots. Reading repo.byteLength inside
+ * a slot registers a dep on the *repo's* recaller, not the app's, so
+ * without an explicit bridge the slot would never re-run when chunks
+ * arrive at the repo.
+ *
+ * bridgeRegistry sets up that bridge once: it watches every repo in the
+ * registry (existing and future) for chunk arrivals and forwards them as
+ * a single signal on the app recaller. The returned `dep` function is
+ * what slots call to register on that signal — call it inside any
+ * reactive cell that should re-run on any-repo-changed.
+ *
+ *   const recaller = new Recaller('app')
+ *   const { dep, fire } = bridgeRegistry(registry, recaller)
+ *
+ *   mount(h`${() => {
+ *     dep()
+ *     for (const [k, r] of registry) ...   // freely read any repo's state
+ *   }}`, appEl, recaller)
+ *
+ *   // Non-repo state changes (route, async results, etc.) — call fire()
+ *   // to force a re-render; the slot re-runs at next tick.
+ *   window.addEventListener('hashchange', fire)
+ *
+ * Mutation is synchronous so multiple mutations in a tick coalesce via the
+ * Recaller's own nextTick flush — one slot re-run per tick regardless of
+ * how many chunks arrive. Don't wrap fire() in requestAnimationFrame:
+ * when the tab loses focus, queued rAFs throttle and the display freezes
+ * (we learned this the hard way; see the design.md cross-recaller note).
+ *
+ * @param {import('./RepoRegistry.js').RepoRegistry} registry
+ * @param {import('./utils/Recaller.js').Recaller} recaller
+ * @param {string} [name='bridge']  used in watch names for debugging
+ * @returns {{dep: () => void, fire: () => void}}
+ *   `dep()` registers the calling reactive cell as depending on bridge state.
+ *   `fire()` forces the slot to re-run at next tick — useful for app-level
+ *   state changes (route, async results, tab switches) that aren't repo
+ *   mutations the bridge already forwards.
+ */
+export function bridgeRegistry (registry, recaller, name = 'bridge') {
+  const signal = {}
+  const watched = new Set()
+
+  const fire = () => recaller.reportKeyMutation(signal, 'data')
+  const dep  = () => recaller.reportKeyAccess(signal, 'data')
+
+  function watchRepo (keyHex, repo) {
+    if (watched.has(keyHex)) return
+    watched.add(keyHex)
+    repo.watch(`${name}:${keyHex}`, () => {
+      repo.byteLength  // register 'length' dep — fires on every chunk
+      fire()
+    })
+  }
+
+  for (const [k, r] of registry) watchRepo(k, r)
+  registry.onOpen((k, r) => { watchRepo(k, r); fire() })
+
+  return { dep, fire }
+}

package/public/streamo/mount.js

@@ -192,11 +192,30 @@ function reconcileSlot (start, end, newVNodes, recaller, ns = HTML_NS) {
     old.remove()
   }
 
-  // Reinsert recycled elements (static attrs patched) and mount fresh ones, in order
+  // Reinsert recycled elements and mount fresh ones, in order. For
+  // recycled elements we re-mount: clean up the existing subtree's
+  // watchers, clear inner DOM and any attributes set on the outer
+  // element, then apply fresh attrs and mount fresh children. The
+  // OUTER node identity is preserved (so document position and DOM
+  // references survive), but inner state (focus, scroll, slot
+  // anchors) is rebuilt — a static `${value}` child captured at
+  // first mount would otherwise be stale on every re-render.
+  // Inputs that need focus preservation across re-renders should
+  // be kept in their own data-keyed slot so reconcileSlot's matcher
+  // recycles them in place separately from this outer rebuild.
   for (const vnode of newVNodes) {
     const recycled = vnodeToEl.get(vnode)
     if (recycled) {
-      patchElement(recycled, vnode)
+      cleanupNode(recycled, recaller)
+      while (recycled.firstChild) recycled.firstChild.remove()
+      // Clear all attributes (snapshot the names — removeAttribute mutates the live list)
+      const oldAttrNames = Array.from(recycled.attributes, a => a.name)
+      for (const name of oldAttrNames) recycled.removeAttribute(name)
+      for (const attr of vnode.attrs) {
+        if (attr == null) continue
+        applyAttr(recycled, attr, recaller)
+      }
+      mount(vnode.children, recycled, recaller, ns)
       end.before(recycled)
     } else {
       const frag = document.createDocumentFragment()
@@ -206,18 +225,6 @@ function reconcileSlot (start, end, newVNodes, recaller, ns = HTML_NS) {
   }
 }
 
-// Update static attributes on a recycled element.
-// Reactive (function/array) attrs are already self-updating via their existing watchers.
-function patchElement (el, vnode) {
-  for (const attr of vnode.attrs) {
-    if (attr == null) continue
-    if (typeof attr === 'object' && !attr.name) continue // spread — skip
-    if (typeof attr.value === 'function' || Array.isArray(attr.value)) continue // reactive — skip
-    if (attr.value !== undefined) setAttr(el, attr.name, attr.value)
-    else el.toggleAttribute(attr.name, true)
-  }
-}
-
 // ── Function components ───────────────────────────────────────────────────
 //
 // When an HElement's tag is a function, call it with a props object instead

package/public/streamo.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 680 680" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <!-- streamo mark — yin-yang seam meets basketball seam, asymmetric so the
+       S flows in one direction (append-only). 7 named circles intersect to
+       define every curve in the mark; nothing is freehand, every point is
+       provably-related to every other point. -->
+  <!-- 7 circles: Ball(340,340,r280), Yang(340,200,r140), Yin(340,480,r140), -->
+  <!-- Happy(397.7,240.2,r302.4), Sad(370.9,370.9,r271.6), -->
+  <!-- Little(394,543,r70), Big(424,292,r183.2) -->
+
+  <!-- ABJ: Ball A→B, Sad B→J, Yang J→A -->
+  <path d="M 340,60 A 280,280 0 0,1 582,200 A 271.6,271.6 0 0,0 447,110 A 140,140 0 0,0 340,60 Z"/>
+
+  <!-- JDKL: Yang J→D, Yin D→K, Happy K→L, Sad L→J -->
+  <path d="M 447,110 A 140,140 0 0,1 340,340 A 140,140 0 0,0 200,465 A 302.4,302.4 0 0,1 105,319 A 271.6,271.6 0 0,1 447,110 Z"/>
+
+  <!-- BFME: Ball B→F, Happy F→M, Little M→E, Big E→B -->
+  <path d="M 582,200 A 280,280 0 0,1 582,480 A 302.4,302.4 0 0,1 327,535 A 70,70 0 0,1 402,474 A 183.2,183.2 0 0,0 582,200 Z"/>
+
+  <!-- GCL: Ball G→C, Happy C→L, Sad L→G -->
+  <path d="M 200,582 A 280,280 0 0,1 98,200 A 302.4,302.4 0 0,0 105,319 A 271.6,271.6 0 0,0 200,582 Z"/>
+
+  <!-- HIKM: Ball H→I, Yin I→K, Happy K→M, Little M→H -->
+  <path d="M 412,611 A 280,280 0 0,1 340,620 A 140,140 0 0,1 200,465 A 302.4,302.4 0 0,0 327,535 A 70,70 0 0,0 412,611 Z"/>
+</svg>