@dtudury/streamo 4.0.0 → 4.0.2

package/README.md

@@ -126,6 +126,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 +186,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.0",
+  "version": "4.0.2",
   "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/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())
@@ -13,8 +14,10 @@ function fmt (ts) {
 }
 
 function Msg ({ name, text, at, mine }) {
+  // +at coerces both Date and number to ms — stable key across old (number)
+  // and new (Date) message records as we transition.
   return h`
-    <div class=${['msg', mine ? 'mine' : 'theirs']} data-key=${at}>
+    <div class=${['msg', mine ? 'mine' : 'theirs']} data-key=${+at}>
       ${!mine ? h`<div class="sender">${name}</div>` : null}
       <div class="text">${text}</div>
       <div class="time">${fmt(at)}</div>
@@ -79,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
@@ -129,7 +127,7 @@ joinBtn.onclick = async () => {
       const messages = myRepo.get('messages') ?? []
       const preview = text.length > 50 ? text.slice(0, 50).trim() + '…' : text
       myRepo.defaultMessage = `"${preview}" (web)`
-      myRepo.set({ name: username, messages: [...messages, { text, at: Date.now() }] })
+      myRepo.set({ name: username, messages: [...messages, { text, at: new Date() }] })
     }
 
     sendBtn.onclick = sendMessage

package/public/apps/explorer/index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>streamo explorer</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22><text y=%2214%22 font-size=%2214%22>🌊</text></svg>">
   <link rel="stylesheet" href="/apps/styles/proto.css">
   <style>
     body { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem; }
@@ -51,10 +52,10 @@
       text-align: center;
       align-self: center;
     }
-    .row.commit .kind          { color: var(--accent); border-color: var(--accent); }
-    .row.signature .kind       { color: var(--warn);   border-color: var(--warn); }
-    .row.signed-commit .kind   { color: #16a34a;       border-color: #16a34a; }
-    .row.unsigned-commit .kind { color: var(--warn);   border-color: var(--warn); }
+    .row.commit .kind                 { color: var(--accent); border-color: var(--accent); }
+    .row.signature .kind              { color: var(--warn);   border-color: var(--warn); }
+    .row.signed-commit .kind          { color: #16a34a;       border-color: #16a34a; }
+    .row.signed-commit.unsigned .kind { color: var(--ink-dim); border-color: var(--ink-dim); }
 
     /* HEAD card — the most-recent signed commit, prominent and self-orienting. */
     .row.signed-commit.head-card {
@@ -64,6 +65,22 @@
     }
     .row.signed-commit.head-card .msg { font-size: 1rem; font-weight: 500; }
 
+    /* Detached card — same layout as the head-card but neutral styling.
+       Shown as the selector summary when the current address isn't a sig
+       (you've drilled into raw memory). The dropdown body is still the
+       way back — pick a real commit and you re-attach. */
+    .row.signed-commit.detached-card {
+      border: 1.5px dashed var(--rule);
+      background: transparent;
+      padding: 0.85rem;
+      cursor: pointer;
+    }
+    .row.signed-commit.detached-card .kind {
+      color: var(--ink-dim);
+      border-color: var(--ink-dim);
+    }
+    .row.signed-commit.detached-card .msg { font-size: 0.95rem; }
+
     /* Commit selector: a real dropdown widget. Summary = currently-selected
        commit (HEAD by default), styled as the green head-card. Body =
        full list of signed commits, with the selected one marked. */
@@ -113,17 +130,25 @@
     }
     details.other-storage[open] > summary { color: var(--ink); }
 
-    /* Polished signed-commit detail view (AtView SIGNATURE branch). */
-    .signed-commit-banner {
+    /* "What this is" banner — top of every value tab. Default neutral
+       border for storage codecs; green .verified for commits or sigs
+       backed by a valid signature; dim .unsigned for commits awaiting
+       a signature. */
+    .kind-banner {
       display: flex; align-items: center; gap: 0.5rem;
       padding: 0.65rem 0.85rem; margin: 0.5rem 0 1rem;
-      border: 1.5px solid #16a34a; border-radius: var(--radius);
+      border: 1.5px solid var(--rule); border-radius: var(--radius);
+    }
+    .kind-banner.verified {
+      border-color: #16a34a;
       background: rgba(22, 163, 74, 0.06);
     }
-    .signed-commit-banner .signed-label {
+    .kind-banner.unsigned { border-style: dashed; }
+    .kind-banner .kind-label {
       font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
-      font-weight: 600; color: #16a34a;
+      font-weight: 600; color: var(--ink-dim);
     }
+    .kind-banner.verified .kind-label { color: #16a34a; }
     .commit-card {
       padding: 0.6rem 0.85rem; margin: 0.4rem 0;
       border: 1px solid var(--rule); border-radius: var(--radius);
@@ -224,6 +249,33 @@
     .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); }
+
     /* codec category palette — used in both the legend and the SVG fills */
     .cat-commit    { fill: #f59e0b; background: #f59e0b; }
     .cat-sig       { fill: #ef4444; background: #ef4444; }

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,37 +45,19 @@ 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()
-  })
+  bridgeFire()
+  if (stripSyncScheduled) return
+  stripSyncScheduled = true
+  requestAnimationFrame(() => { stripSyncScheduled = false; syncByteStrips() })
 }
 
-const watched = new Set()
-function watchRepo (key, repo) {
-  if (watched.has(key)) return
-  watched.add(key)
-  repo.watch(`explorer:${key}`, () => {
-    repo.byteLength
-    fire()
-  })
-}
-for (const [k, r] of registry) watchRepo(k, r)
-registry.onOpen((k, r) => { watchRepo(k, r); fire() })
-
 // ── Hash routing ──────────────────────────────────────────────────────────
 
 function viewFromHash () {
@@ -134,58 +117,49 @@ function safeJSON (value) {
   }, 2)
 }
 
-// Walk every chunk newest-to-oldest, bundling each signature with the
-// commit(s) it covers into one "signed commit" entry. A signed commit is
-// the natural unit of authored history — the sig is what makes the bytes
-// provably yours, and the commit gives those bytes meaning, so they read
-// as one thing. Concurrent commits batched into one sign produce a single
-// entry whose .commits is multi-element.
-//
-// Commits more recent than the latest sig (sign in flight, or none yet)
-// surface as 'unsignedCommit'. Everything else — Duples, OBJECTs that
-// aren't commits, ARRAYs, STRINGs, etc. — is 'other' and lives in the
-// storage section.
-function * signedCommits (repo) {
+// Walk every chunk newest-first, yielding one entry per commit (with
+// its covering signature attached) and one 'other' entry per non-commit
+// non-sig chunk. A signature is part of *how* a commit is verified, not
+// a thing of its own — so the user-level unit is the commit. Walking
+// newest-first, we encounter each sig before the commits it covers
+// (sig has higher address than the bytes it signed); we track the
+// most-recently-seen sig and attach it to subsequent commits as their
+// 'covering'. Commits encountered before any sig are uncovered (sign
+// in flight or none yet) — those have covering: null.
+function * commitsNewestFirst (repo) {
   const len = repo.byteLength
   if (len <= 0) return
   let addr = len - 1
-  let pendingSig = null   // most-recent sig still gathering its commits
-  let pendingCommits = [] // commits since the last yielded sig (newest first)
-
-  const flush = () => {
-    if (pendingSig) return [{ kind: 'signedCommit', ...pendingSig, commits: pendingCommits }]
-    return pendingCommits.map(c => ({ kind: 'unsignedCommit', ...c }))
-  }
-
+  let covering = null  // most-recent sig encountered in this walk
   while (addr >= 0) {
     const code = repo.resolve(addr)
     if (!code || !code.length) break
     const type = repo.footerToCodec[code.at(-1)]?.type
-
     if (type === 'SIGNATURE') {
-      for (const e of flush()) yield e
       let sig
       try { sig = repo.decode(addr) } catch { sig = null }
-      pendingSig = sig
-        ? {
-            sigAddress: addr,
-            signedFrom: sig.address,
-            signedTo: addr - code.length,
-            sigHex: truncHex(sig.compactRawBytes, 12)
-          }
-        : null
-      pendingCommits = []
+      if (sig) {
+        covering = {
+          sigAddress: addr,
+          signedFrom: sig.address,
+          signedTo: addr - code.length,
+          sigHex: truncHex(sig.compactRawBytes, 12)
+        }
+      }
+      yield { kind: 'sig', address: addr, codecType: type }
     } else if (type === 'OBJECT') {
       let value
       try { value = repo.decode(addr) } catch { value = null }
       if (isCommitShape(value)) {
-        pendingCommits.push({
+        yield {
+          kind: 'commit',
           address: addr,
           message: value.message,
           date: value.date,
           dataAddress: value.dataAddress,
-          parent: value.parent
-        })
+          parent: value.parent,
+          covering
+        }
       } else {
         yield { kind: 'other', address: addr, codecType: type }
       }
@@ -194,67 +168,47 @@ function * signedCommits (repo) {
     }
     addr -= code.length
   }
-  for (const e of flush()) yield e
 }
 
-// The polished "signed commit" detail view — the verify banner, the
-// covered message(s), and the rehydrated value at HEAD. Shared between
-// the repo view (rendered for the currently-selected commit, below the
-// commit selector) and the at-view's SIGNATURE branch (when you've
-// drilled into a sig directly).
-function signedCommitDetail (repo, keyHex, sigAddress) {
-  let decoded
-  try { decoded = repo.decode(sigAddress) } catch { return h`<div class="empty">decode error</div>` }
+// Find the covering signature for a commit — the first signature chunk
+// newer than the commit whose [signedFrom, signedTo] range includes its
+// address. Returns { sigAddress, signedFrom, signedTo, decoded } or null
+// if the commit is uncovered (sign in flight or pending).
+function findCoveringSig (repo, commitAddr) {
+  let scan = repo.byteLength - 1
+  while (scan > commitAddr) {
+    const code = repo.resolve(scan)
+    if (!code || !code.length) break
+    if (repo.footerToCodec[code.at(-1)]?.type === 'SIGNATURE') {
+      let sig
+      try { sig = repo.decode(scan) } catch { sig = null }
+      if (sig && sig.address <= commitAddr && (scan - code.length) >= commitAddr) {
+        return { sigAddress: scan, signedFrom: sig.address, signedTo: scan - code.length, decoded: sig }
+      }
+    }
+    scan -= code.length
+  }
+  return null
+}
+
+// Sig-detail view — when you're at a sig chunk directly (e.g., from
+// drilling through storage). Sigs are auxiliary in the new model — the
+// user-level unit is the commit — so this page shows the sig's content
+// without trying to be the "polished signed commit" page. The kindBanner
+// is rendered by the caller (AtView) so its variant matches the rest of
+// the value-tab branches.
+function sigDetailBody (repo, keyHex, sigAddress, decoded) {
   const chunk = repo.resolve(sigAddress)
   const chunkLen = chunk.length
   const signedTo = sigAddress - chunkLen
   const sigChunkStart = sigAddress - chunkLen + 1
   const covered = commitsCoveredBySignature(repo, decoded.address, signedTo)
-  const head = covered[0]
   return h`
-    <div class="signed-commit-banner">
-      <span class="signed-label">signed commit</span>
-      ${() => {
-        dep()
-        const status = verifyStatus(repo, keyHex, decoded, sigAddress)
-        const label = status === 'valid'   ? 'verified — bytes match this repo’s public key'
-                    : status === 'invalid' ? 'NOT VERIFIED — bytes do not match the repo key'
-                    : status === 'pending' ? 'verifying…'
-                    : `error: ${status?.error ?? 'unknown'}`
-        return h`${verifyBadge(status)} <span class="dim">${label}</span>`
-      }}
-    </div>
-    ${covered.length === 0
-      ? h`<div class="empty">this signature covers no commits (would only happen if a sign produced over a non-commit range)</div>`
-      : h`
-        <h3>${covered.length === 1 ? 'message' : `${covered.length} messages (batched into one signature)`}</h3>
-        ${covered.map(c => h`
-          <div class="commit-card" data-key=${`cc${c.address}`}>
-            <div class="commit-msg">${c.message || h`<span class="dim">(no message)</span>`}</div>
-            <div class="commit-meta dim">
-              <span>${fmtDate(c.date)}</span>
-              <span> · commit chunk <a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${c.address}>@${c.address}</a></span>
-              <span> · value <a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${c.dataAddress}>@${c.dataAddress}</a></span>
-            </div>
-          </div>
-        `)}
-        ${head ? (() => {
-          let value
-          try { value = repo.decode(head.dataAddress) } catch { value = undefined }
-          return h`
-            <h3>value at this point</h3>
-            <pre class="value">${value === undefined ? '(decode error)' : safeJSON(value)}</pre>
-          `
-        })() : null}
-      `}
-    <h3>signature</h3>
     <table class="kv">
       <tbody>
         <tr>
           <td>covers</td>
-          <td><a class="addr-link" data-action="open-at"
-                 data-keyhex=${keyHex} data-addr=${decoded.address}
-                 >@${decoded.address}</a> through @${signedTo} (${signedTo - decoded.address + 1} bytes)</td>
+          <td>@${decoded.address} through @${signedTo} (${signedTo - decoded.address + 1} bytes)</td>
         </tr>
         <tr>
           <td>sig chunk</td>
@@ -263,6 +217,19 @@ function signedCommitDetail (repo, keyHex, sigAddress) {
         <tr><td>bytes</td><td class="mono">${truncHex(decoded.compactRawBytes, 32)}</td></tr>
       </tbody>
     </table>
+    ${covered.length ? h`
+      <h3>commits in this signature ${covered.length > 1 ? h`<span class="dim">(${covered.length}, batched in one sign)</span>` : null}</h3>
+      ${covered.map(c => h`
+        <div class="commit-card" data-key=${`cc${c.address}`} data-action="open-at"
+             data-keyhex=${keyHex} data-addr=${c.address}>
+          <div class="commit-msg">${c.message || h`<span class="dim">(no message)</span>`}</div>
+          <div class="commit-meta dim">
+            <span>${fmtDate(c.date)}</span>
+            <span> · @${c.address}</span>
+          </div>
+        </div>
+      `)}
+    ` : null}
   `
 }
 
@@ -314,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>
         `)
@@ -328,101 +302,108 @@ function RegistryView () {
   `
 }
 
-// Resolve the symbolic HEAD address to the most-recent sig chunk's
-// address. Returns undefined if the repo has no signatures yet.
+// Resolve the symbolic HEAD address to the most-recent COMMIT chunk's
+// address — not the most-recent signature. The user-level unit is the
+// commit; sigs are how it's verified, but HEAD-as-a-commit is what
+// people mean by "the latest." Returns undefined if there are no commits.
 function resolveHead (repo) {
   let walk = repo.byteLength - 1
   while (walk >= 0) {
     const code = repo.resolve(walk)
     if (!code || !code.length) break
-    if (repo.footerToCodec[code.at(-1)]?.type === 'SIGNATURE') return walk
+    if (repo.footerToCodec[code.at(-1)]?.type === 'OBJECT') {
+      let value
+      try { value = repo.decode(walk) } catch { value = null }
+      if (isCommitShape(value)) return walk
+    }
     walk -= code.length
   }
   return undefined
 }
 
-// Commit selector dropdown — used at the top of any sig at-view. The
-// summary is the currently-selected (= currently-viewed) signed commit
-// styled as a head-card; the body lists every signed commit with the
-// current one marked. Picking a different one (data-action=select-commit)
-// navigates to /at/<sigAddress> via the URL.
-function commitSelectorSection (repo, keyHex, currentSigAddr) {
-  const entries = [...signedCommits(repo)].filter(e => e.kind === 'signedCommit')
+// Commit selector dropdown — always rendered at the top of an at-view
+// when the repo has any commits. The dropdown enumerates COMMITS (not
+// sigs), since the commit is the user-level unit. Each entry's verify
+// badge comes from its covering sig; uncovered commits show a "pending"
+// badge. When the current address is a commit, that row is the summary;
+// otherwise the summary is a "detached" card (you're at a sig chunk, a
+// Duple, raw bytes, etc. — drill state, not a named ref).
+function commitSelectorSection (repo, keyHex, currentAddr) {
+  const entries = [...commitsNewestFirst(repo)].filter(e => e.kind === 'commit')
   if (!entries.length) return null
   const tagFor = i => i === 0 ? 'HEAD' : `HEAD-${i}`
-  const signedRow = (e, tag, { asSummary = false, isSelected = false } = {}) => {
-    const c0 = e.commits[0]
-    const headline = e.commits.length === 0
-      ? h`<span class="dim">(sig with no covered commits)</span>`
-      : e.commits.length === 1
-        ? (c0.message || h`<span class="dim">(no message)</span>`)
-        : h`<span class="dim">${e.commits.length}× </span>${c0?.message || ''}`
+  const commitRow = (c, tag, { asSummary = false, isSelected = false } = {}) => {
     const cls = ['row', 'signed-commit',
       asSummary ? 'head-card' : null,
-      isSelected ? 'selected' : null]
+      isSelected ? 'selected' : null,
+      c.covering ? null : 'unsigned']
     const action = asSummary ? null : 'select-commit'
+    const badge = () => {
+      dep()
+      if (!c.covering) return h`<span class="verify-badge pending" title="not yet signed">…</span>`
+      return verifyBadge(verifyStatus(repo, keyHex, c.covering.decoded || repo.decode(c.covering.sigAddress), c.covering.sigAddress))
+    }
     return h`
       <div class=${cls}
-           data-key=${`sc${e.sigAddress}`}
+           data-key=${`c${c.address}`}
            data-action=${action}
-           data-keyhex=${keyHex} data-addr=${e.sigAddress}>
-        <span class="kind">${tag} ${() => { dep(); return verifyBadge(verifyStatus(repo, keyHex, repo.decode(e.sigAddress), e.sigAddress)) }}</span>
-        <span class="msg">${headline}</span>
-        <span class="when">${c0 ? fmtDate(c0.date) : ''}</span>
-        <span class="mono dim">@${e.sigAddress}</span>
+           data-keyhex=${keyHex} data-addr=${c.address}>
+        <span class="kind">${tag} ${badge}</span>
+        <span class="msg">${c.message || h`<span class="dim">(no message)</span>`}</span>
+        <span class="when">${fmtDate(c.date)}</span>
+        <span class="mono dim">@${c.address}</span>
       </div>`
   }
-  const selectedIdx = entries.findIndex(e => e.sigAddress === currentSigAddr)
-  const selected = selectedIdx >= 0 ? entries[selectedIdx] : entries[0]
+  const selectedIdx = entries.findIndex(e => e.address === currentAddr)
+  const isDetached = selectedIdx < 0
+  const detachedSummary = (() => {
+    let codec = ''
+    try { codec = repo.footerToCodec[repo.resolve(currentAddr).at(-1)]?.type || '' } catch {}
+    return h`
+      <div class="row signed-commit detached-card" data-key="detached">
+        <span class="kind">detached</span>
+        <span class="msg dim">exploring raw memory${codec ? ` · ${codec}` : ''}</span>
+        <span class="when"></span>
+        <span class="mono dim">@${currentAddr}</span>
+      </div>`
+  })()
+  const summary = isDetached
+    ? detachedSummary
+    : commitRow(entries[selectedIdx], tagFor(selectedIdx), { asSummary: true })
   return h`
     <details class="commit-selector" data-key=${`selector-${keyHex}`}>
-      <summary>${signedRow(selected, tagFor(selectedIdx >= 0 ? selectedIdx : 0), { asSummary: true })}</summary>
-      ${entries.length > 1 ? h`
-        <div class="dropdown-body">
-          ${entries.map((e, i) => signedRow(e, tagFor(i), { isSelected: e === selected }))}
-        </div>
-      ` : null}
+      <summary>${summary}</summary>
+      <div class="dropdown-body">
+        ${entries.map((e, i) => commitRow(e, tagFor(i), { isSelected: !isDetached && i === selectedIdx }))}
+      </div>
     </details>
   `
 }
 
-// Unsigned commits + the repo-wide "other storage chunks" list. Shown
-// below the polished detail on sig at-views and on the no-HEAD page,
-// so the repo's full inventory is always one click away.
+// Repo-wide "other storage chunks" list — Duples, raw OBJECTs, ARRAYs,
+// STRINGs, etc. The chunks underneath the commit graph. Tucked into a
+// closed <details> so it doesn't compete with primary content. Unsigned
+// commits already appear in the selector dropdown (with a pending badge),
+// so they don't need a second listing here.
 function repoExtras (repo, keyHex) {
-  const entries = [...signedCommits(repo)]
-  const unsigned = entries.filter(e => e.kind === 'unsignedCommit')
-  const others = entries.filter(e => e.kind === 'other')
+  const others = [...commitsNewestFirst(repo)].filter(e => e.kind === 'other')
+  if (!others.length) return null
   return h`
-    ${unsigned.length ? h`
-      <h3>unsigned <span class="dim">(${unsigned.length} — sign in flight or pending)</span></h3>
-      ${unsigned.map(e => h`
-        <div class="row unsigned-commit" data-key=${`u${e.address}`} data-action="open-at"
-             data-keyhex=${keyHex} data-addr=${e.address}>
-          <span class="kind">unsigned</span>
-          <span class="msg">${e.message || h`<span class="dim">(no message)</span>`}</span>
-          <span class="when">${fmtDate(e.date)}</span>
-          <span class="mono dim">@${e.address}</span>
-        </div>
-      `)}
-    ` : null}
-    ${others.length ? h`
-      <details class="other-storage">
-        <summary>storage chunks <span class="dim">(${others.length}) — the chunks underneath</span></summary>
-        <table class="kv clickable">
-          <tbody>
-            ${others.map(e => h`
-              <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 class="mono dim">@${e.address}</td>
-              </tr>
-            `)}
-          </tbody>
-        </table>
-      </details>
-    ` : null}
+    <details class="other-storage">
+      <summary>storage chunks <span class="dim">(${others.length}) — the chunks underneath</span></summary>
+      <table class="kv clickable">
+        <tbody>
+          ${others.map(e => h`
+            <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 typedValue(repo.decode(e.address)) } catch { return '' } })()}</td>
+              <td class="mono dim">@${e.address}</td>
+            </tr>
+          `)}
+        </tbody>
+      </table>
+    </details>
   `
 }
 
@@ -439,15 +420,15 @@ function AtView ({ keyHex, address }) {
       if (!repo) return h`<div class="empty">opening…</div>`
 
       // Resolve HEAD (symbolic) to the most-recent sig address. If the
-      // repo has no sigs yet, render a useful "no HEAD" page that still
-      // surfaces unsigned commits and storage chunks.
+      // repo has no commits yet, render a useful "no HEAD" page that
+      // still surfaces any storage chunks.
       let resolvedAddr = address
       if (address === 'HEAD') {
         resolvedAddr = resolveHead(repo)
         if (resolvedAddr === undefined) {
           return h`
-            <h2>at HEAD <span class="dim">(no signed commits yet)</span></h2>
-            <div class="empty">this repo hasn't signed anything yet — once it does, HEAD will point to the most-recent signed commit and you'll land here automatically.</div>
+            <h2>at HEAD <span class="dim">(no commits yet)</span></h2>
+            <div class="empty">this repo doesn't have any commits yet — HEAD will resolve to the most-recent commit once one lands.</div>
             ${repoExtras(repo, keyHex)}
           `
         }
@@ -462,8 +443,11 @@ function AtView ({ keyHex, address }) {
       const isCommit = isCommitShape(decoded)
       const isSig = codecType === 'SIGNATURE'
 
-      // Tabs are part of the page content (not the static header) so a
-      // sig at-view can render the commit selector ABOVE the tabs.
+      // 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".
       const tabs = h`
         <nav class="tabs">
           <a class=${() => { dep(); return ['tab', atTab === 'value' ? 'active' : null] }}
@@ -472,7 +456,7 @@ function AtView ({ keyHex, address }) {
              data-action="set-tab" data-tab="storage">storage</a>
         </nav>
       `
-      const selector = isSig ? commitSelectorSection(repo, keyHex, resolvedAddr) : null
+      const selector = commitSelectorSection(repo, keyHex, resolvedAddr)
 
       // Storage tab: spatial view of where this chunk lives in the byte
       // stream + outgoing references + this chunk's bytes + incoming
@@ -488,37 +472,84 @@ function AtView ({ keyHex, address }) {
         `
       }
 
+      // 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.
+
       // Value tab — branches by codec.
+      // Helper: render the kv-table of decoded fields for any Object/Array
+      // (including commits, which are just OBJECTs with a known shape).
+      // Inline children render their value directly; addressable children
+      // get a clickable @addr link in the third column.
+      const refsTable = () => {
+        if (!refs || typeof refs !== 'object') return null
+        const isArray = Array.isArray(refs)
+        const fieldEntries = isArray
+          ? refs.map((addr, i) => [String(i), addr])
+          : Object.entries(refs)
+        if (fieldEntries.length === 0) return h`<div class="empty">${isArray ? '[]' : '{}'}</div>`
+        return h`
+          <table class="kv clickable">
+            <tbody>
+              ${fieldEntries.map(([k, childAddr]) => {
+                if (childAddr === undefined) {
+                  const inlineValue = isArray ? decoded[+k] : decoded[k]
+                  return h`
+                    <tr>
+                      <td class="mono">${k}</td>
+                      <td>${typedValue(inlineValue)}</td>
+                      <td class="dim">(inline)</td>
+                    </tr>
+                  `
+                }
+                let preview = ''
+                try { preview = typedValue(repo.decode(childAddr)) }
+                catch { preview = '(error)' }
+                return h`
+                  <tr data-key=${k} data-action="open-at"
+                      data-keyhex=${keyHex} data-addr=${childAddr}>
+                    <td class="mono">${k}</td>
+                    <td>${preview}</td>
+                    <td class="mono dim">@${childAddr}</td>
+                  </tr>
+                `
+              })}
+            </tbody>
+          </table>
+        `
+      }
+
+      // Commit: same direct kv-table format as Object (it *is* an OBJECT —
+      // user requested the "dumber" version that names every field rather
+      // than packing them into a polished headline). Banner shows the
+      // verify state from the covering sig; the verification table at the
+      // bottom links to that sig and shows its bytes.
       if (isCommit) {
+        const covering = findCoveringSig(repo, resolvedAddr)
         const parentDataAddr = decoded.parent !== undefined
           ? safeGet(() => repo.decode(decoded.parent)?.dataAddress)
           : undefined
         const changes = parentDataAddr !== undefined
           ? [...changedPaths(repo, parentDataAddr, decoded.dataAddress)]
           : null
+        const banner = kindBanner(
+          covering ? 'signed commit' : 'commit (unsigned)',
+          covering
+            ? () => {
+                dep()
+                const status = verifyStatus(repo, keyHex, covering.decoded, covering.sigAddress)
+                return h`${verifyBadge(status)} <span class="dim">${verifyLabel(status)}</span>`
+              }
+            : h`<span class="verify-badge pending">…</span><span class="dim">not yet signed — sign in flight or pending</span>`,
+          covering ? 'verified' : 'unsigned'
+        )
         return h`
+          ${selector}
           ${tabs}
-          <div class="dim">codec: ${codecType} · this is a commit</div>
-          <table class="kv">
-            <tbody>
-              <tr><td>message</td><td>${decoded.message || h`<span class="dim">(empty)</span>`}</td></tr>
-              <tr><td>date</td><td>${fmtDate(decoded.date)}</td></tr>
-              <tr>
-                <td>dataAddress</td>
-                <td><a class="addr-link" data-action="open-at"
-                       data-keyhex=${keyHex} data-addr=${decoded.dataAddress}
-                       >@${decoded.dataAddress}</a></td>
-              </tr>
-              <tr>
-                <td>parent</td>
-                <td>${decoded.parent === undefined
-                  ? h`<span class="dim">(none — first commit)</span>`
-                  : h`<a class="addr-link" data-action="open-at"
-                         data-keyhex=${keyHex} data-addr=${decoded.parent}
-                         >@${decoded.parent}</a>`}</td>
-              </tr>
-            </tbody>
-          </table>
+          ${banner}
+          ${refsTable()}
+          <h3>rehydrated</h3>
+          <pre class="value">${safeJSON(decoded)}</pre>
           ${changes
             ? h`
               <h3>changed paths <span class="dim">(${changes.length})</span></h3>
@@ -527,16 +558,32 @@ function AtView ({ keyHex, address }) {
                 : h`<div class="dim">(no path-level changes — same dataAddress)</div>`}
             `
             : null}
-          <h3>rehydrated</h3>
-          <pre class="value">${safeJSON(decoded)}</pre>
+          ${covering ? h`
+            <h3>verification</h3>
+            <table class="kv">
+              <tbody>
+                <tr>
+                  <td>signature</td>
+                  <td><a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${covering.sigAddress}>@${covering.sigAddress}</a></td>
+                </tr>
+                <tr>
+                  <td>covers</td>
+                  <td>@${covering.signedFrom} through @${covering.signedTo} (${covering.signedTo - covering.signedFrom + 1} bytes)</td>
+                </tr>
+                <tr><td>sig bytes</td><td class="mono">${truncHex(covering.decoded.compactRawBytes, 32)}</td></tr>
+              </tbody>
+            </table>
+          ` : null}
+          ${repoExtras(repo, keyHex)}
         `
       }
 
       // Duple: explain what this tree-node IS, then show its two children.
       if (codecType === 'DUPLE') {
         return h`
+          ${selector}
           ${tabs}
-          <div class="dim">codec: DUPLE</div>
+          ${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
             to balance binary trees of OBJECT entries and ARRAY elements. Each Duple
@@ -548,21 +595,31 @@ 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>
         `
       }
 
-      // Signature: the polished "signed commit" view + the unsigned/storage
-      // listing below. Shared with the storage tab's chunk-detail view.
+      // Signature: the sig-detail page (auxiliary in the new model — sigs
+      // are how commits are verified, not the user-level unit). Lists
+      // the commits this sig covers; pick one to land on its commit page.
       if (isSig) {
+        const banner = kindBanner(
+          'signature chunk',
+          () => {
+            dep()
+            const status = verifyStatus(repo, keyHex, decoded, resolvedAddr)
+            return h`${verifyBadge(status)} <span class="dim">${verifyLabel(status)}</span>`
+          },
+          'verified'
+        )
         return h`
           ${selector}
           ${tabs}
-          ${signedCommitDetail(repo, keyHex, resolvedAddr)}
-          ${repoExtras(repo, keyHex)}
+          ${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>
         `
       }
@@ -570,59 +627,30 @@ function AtView ({ keyHex, address }) {
       // Object/array: clickable children with their addresses.
       if (refs && typeof refs === 'object') {
         const isArray = Array.isArray(refs)
-        const entries = isArray
-          ? refs.map((addr, i) => [String(i), addr])
-          : Object.entries(refs)
-        if (entries.length === 0) {
-          return h`
-            ${tabs}
-            <div class="dim">codec: ${codecType}</div>
-            <div class="empty">${isArray ? '[]' : '{}'}</div>
-          `
-        }
+        const fieldCount = isArray ? refs.length : Object.keys(refs).length
+        const dim = fieldCount === 0
+          ? null
+          : h`<span class="dim">${isArray ? `length ${fieldCount}` : `${fieldCount} field${fieldCount === 1 ? '' : 's'}`}</span>`
+        const label = fieldCount === 0
+          ? (isArray ? 'empty array' : 'empty object')
+          : (isArray ? 'array' : 'object')
         return h`
+          ${selector}
           ${tabs}
-          <div class="dim">codec: ${codecType}${isArray ? ` · length ${entries.length}` : ''}</div>
-          <table class="kv clickable">
-            <tbody>
-              ${entries.map(([k, childAddr]) => {
-                // asRefs is mutation-impossible, so it returns undefined for
-                // inline children that don't have a separate chunk address.
-                // Show those non-clickably with the decoded value pulled from
-                // the parent.
-                if (childAddr === undefined) {
-                  const inlineValue = isArray ? decoded[+k] : decoded[k]
-                  return h`
-                    <tr>
-                      <td class="mono">${k}</td>
-                      <td>${previewValue(inlineValue)}</td>
-                      <td class="dim">(inline)</td>
-                    </tr>
-                  `
-                }
-                let preview = ''
-                try { preview = previewValue(repo.decode(childAddr)) }
-                catch { preview = '(error)' }
-                return h`
-                  <tr data-key=${k} data-action="open-at"
-                      data-keyhex=${keyHex} data-addr=${childAddr}>
-                    <td class="mono">${k}</td>
-                    <td>${preview}</td>
-                    <td class="mono dim">@${childAddr}</td>
-                  </tr>
-                `
-              })}
-            </tbody>
-          </table>
-          <h3>rehydrated</h3>
-          <pre class="value">${safeJSON(decoded)}</pre>
+          ${kindBanner(label, dim)}
+          ${refsTable()}
+          ${fieldCount > 0 ? h`
+            <h3>rehydrated</h3>
+            <pre class="value">${safeJSON(decoded)}</pre>
+          ` : null}
         `
       }
 
       // Primitive: just show it.
       return h`
+        ${selector}
         ${tabs}
-        <div class="dim">codec: ${codecType}</div>
+        ${kindBanner(codecType.toLowerCase())}
         <pre class="value">${safeJSON(decoded)}</pre>
       `
     }}
@@ -764,7 +792,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"
@@ -802,7 +830,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"
@@ -825,19 +853,44 @@ 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">null</span>`
+  if (v === undefined) return h`<span class="tv tv-undefined">undefined</span>`
+  if (typeof v === 'boolean') {
+    return h`<span class=${['tv', 'tv-bool', v ? 'tv-true' : 'tv-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"><span class="tv-quote">“</span>${display}<span class="tv-quote">”</span></span>`
+  }
+  if (typeof v === 'number') {
+    return h`<span class="tv tv-num">${String(v)}</span>`
+  }
+  if (v instanceof Date) {
+    return h`<span class="tv tv-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">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">Duple(…)</span>`
+    return h`<span class="tv tv-duple">Duple(${typedValue(v.v[0], depth + 1)}, ${typedValue(v.v[1], depth + 1)})</span>`
+  }
+  if (Array.isArray(v)) {
+    return h`<span class="tv tv-array">[ ${v.length} ${v.length === 1 ? 'element' : 'elements'} ]</span>`
   }
-  if (Array.isArray(v)) return `[…] (${v.length})`
-  if (typeof v === 'object') return `{…} (${Object.keys(v).length})`
-  return String(v)
+  if (typeof v === 'object') {
+    const n = Object.keys(v).length
+    return h`<span class="tv tv-object">{ ${n} ${n === 1 ? 'field' : 'fields'} }</span>`
+  }
+  return h`<span class="tv">${String(v)}</span>`
 }
 
 function safeGet (f) { try { return f() } catch { return undefined } }
@@ -925,6 +978,28 @@ function verifyStatus (repo, keyHex, sig, sigAddress) {
   return 'pending'
 }
 
+// Consistent "what this is" banner at the top of every value-tab branch.
+// label is the short codec/role name (e.g. "signed commit", "object",
+// "duple"); content is whatever else goes in the banner (verify badge +
+// label, field count, etc.); variant tints the surface — 'verified' for
+// commits/sigs with a covering signature, 'unsigned' for commits awaiting
+// one, undefined for everything else.
+function kindBanner (label, content, variant) {
+  return h`
+    <div class=${['kind-banner', variant || null]}>
+      <span class="kind-label">${label}</span>
+      ${content || null}
+    </div>
+  `
+}
+
+function verifyLabel (status) {
+  if (status === 'valid')   return 'verified — bytes match this repo’s public key'
+  if (status === 'invalid') return 'NOT VERIFIED — bytes do not match the repo key'
+  if (status === 'pending') return 'verifying…'
+  return `error: ${status?.error ?? 'unknown'}`
+}
+
 function verifyBadge (status) {
   if (status === 'valid')   return h`<span class="verify-badge valid"   title="signature verified against repo's public key">✓</span>`
   if (status === 'invalid') return h`<span class="verify-badge invalid" title="signature does NOT match repo's public key">✗</span>`

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/chat-cli.js

@@ -126,7 +126,7 @@ rl.on('line', async line => {
   const messages = myRepo.get('messages') ?? []
   const preview = text.length > 50 ? text.slice(0, 50).trim() + '…' : text
   myRepo.defaultMessage = `"${preview}" (cli)`
-  myRepo.set({ name: username, messages: [...messages, { text, at: Date.now() }] })
+  myRepo.set({ name: username, messages: [...messages, { text, at: new Date() }] })
   rl.prompt()
 })
 

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