@dtudury/streamo 4.0.2 → 4.0.5

package/public/apps/explorer/main.js

@@ -58,6 +58,31 @@ function fire () {
   requestAnimationFrame(() => { stripSyncScheduled = false; syncByteStrips() })
 }
 
+// Hover-only signal — separate from the bridge. Hover events that
+// only set hoveredAddress fire hoverSignal exclusively; slots that
+// read hoverDep() re-run, slots that don't are left alone. This is
+// what keeps hovering the strip from re-rendering the strip itself.
+const hoverSignal = {}
+const hoverDep = () => recaller.reportKeyAccess(hoverSignal, 'data')
+const hoverFire = () => recaller.reportKeyMutation(hoverSignal, 'data')
+
+// View-shape signal — fires only when view.kind or view.keyHex
+// changes. The outer mount slot watches this (NOT bridge), so
+// intra-repo navigation (address changes within an at-view) does
+// NOT re-run the outer slot, does NOT recreate AtView's inner slots,
+// does NOT fresh-mount the byte-strip-container. Inner slots watch
+// bridge — they re-run on address change, chunk arrivals, tab clicks,
+// async results — and recursive-reconcile preserves the strip's DOM
+// (scrollLeft, focus, keyed children) across those re-runs.
+//
+// Together with hoverSignal, this is the full signal decomposition:
+//   viewKindSignal — kind/keyHex (registry ↔ at-view, repo switch)
+//   bridge         — chunks, address, tab, async (everything else)
+//   hoverSignal    — strip hover preview
+const viewKindSignal = {}
+const viewKindDep = () => recaller.reportKeyAccess(viewKindSignal, 'data')
+const viewKindFire = () => recaller.reportKeyMutation(viewKindSignal, 'data')
+
 // ── Hash routing ──────────────────────────────────────────────────────────
 
 function viewFromHash () {
@@ -80,15 +105,19 @@ function hashFromView (v) {
 
 let view = viewFromHash()
 function go (next) {
+  const kindChanged = next.kind !== view.kind || next.keyHex !== view.keyHex
   view = next
   const target = hashFromView(next)
   if (location.hash !== target) location.hash = target
+  if (kindChanged) viewKindFire()
   fire()
 }
 window.addEventListener('hashchange', () => {
   const next = viewFromHash()
   if (next.kind === view.kind && next.keyHex === view.keyHex && next.address === view.address) return
+  const kindChanged = next.kind !== view.kind || next.keyHex !== view.keyHex
   view = next
+  if (kindChanged) viewKindFire()
   fire()
 })
 
@@ -97,6 +126,15 @@ window.addEventListener('hashchange', () => {
 // drill-down. Reset to default on registry/repo views (set in go()).
 let atTab = 'value'
 
+// Live-hover-preview state. When the user hovers a chunk on the byte
+// strip, the page content below the tabs renders that chunk's value/
+// storage instead of the URL's. Click to actually navigate. The header
+// (selector + strip + tabs) keeps showing where you ARE; only the
+// content area peeks ahead. Set by the mouseover handler when on a
+// strip; cleared on mouseout. Module-level so AtView reads it inside
+// the slot's reactive cell.
+let hoveredAddress = null
+
 // ── Helpers ───────────────────────────────────────────────────────────────
 
 const truncKey = k => k.slice(0, 12) + '…'
@@ -407,75 +445,102 @@ function repoExtras (repo, keyHex) {
   `
 }
 
-function AtView ({ keyHex, address }) {
+function AtView ({ keyHex }) {
+  // AtView's body is built once per repo (the outer mount slot only
+  // re-runs on view.kind / view.keyHex changes — see viewKindSignal).
+  // Anything that depends on view.address must read it fresh inside a
+  // reactive cell, NOT capture it in closure here. Same for resolved
+  // chunk lookups: each slot calls resolveContext(repo) on every run.
+  const resolveContext = (repo) => {
+    let resolvedAddr = view.address
+    if (view.address === 'HEAD') {
+      resolvedAddr = resolveHead(repo)
+      if (resolvedAddr === undefined) return { state: 'no-head' }
+    }
+    if (resolvedAddr >= repo.byteLength) return { state: 'loading' }
+    return { state: 'ok', resolvedAddr }
+  }
+
   return h`
     <a class="back" data-action="back-registry">← all repos</a>
     <div class="keyfull">
       <a class="repo-link" data-action="back-repo" data-keyhex=${keyHex}>${truncKey(keyHex)}</a>
-      <span class="dim"> @ ${address}</span>
+      <span class="dim"> @ ${() => { dep(); return view.address }}</span>
     </div>
+
     ${() => {
+      // HEADER slot — bridge only. Re-runs on chunk arrivals, navigation,
+      // tab clicks, and async results. Does NOT re-run on hover (which
+      // fires hoverSignal exclusively), so hovering the strip leaves the
+      // selector + strip itself + tabs untouched. This is the whole
+      // reason the hover signal exists as a separate channel.
       dep()
       const repo = registry.get(keyHex)
-      if (!repo) return h`<div class="empty">opening…</div>`
+      if (!repo) return null
+      const ctx = resolveContext(repo)
+      if (ctx.state !== 'ok') return null
+      const tabs = h`
+        <nav class="tabs">
+          <a class=${() => { dep(); return ['tab', atTab === 'value' ? 'active' : null] }}
+             data-action="set-tab" data-tab="value">value</a>
+          <a class=${() => { dep(); return ['tab', atTab === 'storage' ? 'active' : null] }}
+             data-action="set-tab" data-tab="storage">storage</a>
+        </nav>
+      `
+      const selector = commitSelectorSection(repo, keyHex, ctx.resolvedAddr)
+      const bytes = byteStreamSection(repo, keyHex, ctx.resolvedAddr)
+      return h`<div class="atview-header">${selector}${bytes}${tabs}</div>`
+    }}
 
-      // Resolve HEAD (symbolic) to the most-recent sig address. If the
-      // 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 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)}
-          `
-        }
+    ${() => {
+      // CONTENT slot — bridge + hover. Re-runs on hover (so the page
+      // content peeks at the hovered chunk) AND on bridge fires (for
+      // chunk arrivals, tab clicks, async results). Renders the tab
+      // body for contentAddr — the hovered address if peeking, else the
+      // URL's address.
+      dep()
+      hoverDep()
+      const repo = registry.get(keyHex)
+      if (!repo) return h`<div class="empty">opening…</div>`
+      const ctx = resolveContext(repo)
+      if (ctx.state === 'no-head') {
+        return h`
+          <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)}
+        `
       }
-      if (resolvedAddr >= repo.byteLength) return h`<div class="empty">loading…</div>`
+      if (ctx.state === 'loading') return h`<div class="empty">loading…</div>`
+      const resolvedAddr = ctx.resolvedAddr
+
+      // Live hover preview: contentAddr peeks at the hovered chunk;
+      // header still shows resolvedAddr (the URL position). Click to
+      // navigate.
+      const contentAddr = hoveredAddress != null && hoveredAddress < repo.byteLength
+        ? hoveredAddress
+        : resolvedAddr
 
       let info
-      try { info = valueAndChildren(repo, resolvedAddr) }
+      try { info = valueAndChildren(repo, contentAddr) }
       catch (e) { return h`<pre class="value">decode error: ${e.message}</pre>` }
 
       const { codecType, refs, decoded } = info
       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".
-      const tabs = h`
-        <nav class="tabs">
-          <a class=${() => { dep(); return ['tab', atTab === 'value' ? 'active' : null] }}
-             data-action="set-tab" data-tab="value">value</a>
-          <a class=${() => { dep(); return ['tab', atTab === 'storage' ? 'active' : null] }}
-             data-action="set-tab" data-tab="storage">storage</a>
-        </nav>
-      `
-      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
-      // referrers. The chunk graph from this chunk's perspective.
+      // Storage tab: position in stream + reachable commit, then this
+      // chunk's outgoing refs, raw bytes, and referrers. All for
+      // contentAddr (the peeked chunk during hover, otherwise the
+      // URL's address). Header is rendered by the sibling header slot.
       if (atTab === 'storage') {
         return h`
-          ${selector}
-          ${tabs}
-          ${byteStreamSection(repo, keyHex, resolvedAddr)}
-          ${outgoingReferencesSection(repo, keyHex, resolvedAddr)}
-          ${rawChunkSection(repo, resolvedAddr)}
-          ${referrersSection(repo, keyHex, resolvedAddr)}
+          ${chunkContextSection(repo, keyHex, contentAddr)}
+          ${outgoingReferencesSection(repo, keyHex, contentAddr)}
+          ${rawChunkSection(repo, contentAddr)}
+          ${referrersSection(repo, keyHex, contentAddr)}
         `
       }
 
-      // 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).
@@ -525,7 +590,7 @@ function AtView ({ keyHex, address }) {
       // 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 covering = findCoveringSig(repo, contentAddr)
         const parentDataAddr = decoded.parent !== undefined
           ? safeGet(() => repo.decode(decoded.parent)?.dataAddress)
           : undefined
@@ -543,13 +608,35 @@ 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.
+        // dataAddress and parent are byte-address pointers held as
+        // FLOAT64 values. The → glyph signals "this number is a
+        // pointer; click to follow it." Without it, the address pill
+        // looks like any other typedValue(number) and the navigation
+        // hint depends on the user already knowing what these fields
+        // mean.
+        const addrLink = (addr) => addr === undefined
+          ? h`<span class="dim">(none — first commit)</span>`
+          : h`<span class="dim">→ </span><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}
           ${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>
@@ -581,8 +668,6 @@ function AtView ({ keyHex, address }) {
       // Duple: explain what this tree-node IS, then show its two children.
       if (codecType === 'DUPLE') {
         return h`
-          ${selector}
-          ${tabs}
           ${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
@@ -610,16 +695,14 @@ function AtView ({ keyHex, address }) {
           'signature chunk',
           () => {
             dep()
-            const status = verifyStatus(repo, keyHex, decoded, resolvedAddr)
+            const status = verifyStatus(repo, keyHex, decoded, contentAddr)
             return h`${verifyBadge(status)} <span class="dim">${verifyLabel(status)}</span>`
           },
           'verified'
         )
         return h`
-          ${selector}
-          ${tabs}
           ${banner}
-          ${sigDetailBody(repo, keyHex, resolvedAddr, decoded)}
+          ${sigDetailBody(repo, keyHex, contentAddr, 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>
         `
       }
@@ -635,8 +718,6 @@ function AtView ({ keyHex, address }) {
           ? (isArray ? 'empty array' : 'empty object')
           : (isArray ? 'array' : 'object')
         return h`
-          ${selector}
-          ${tabs}
           ${kindBanner(label, dim)}
           ${refsTable()}
           ${fieldCount > 0 ? h`
@@ -648,8 +729,6 @@ function AtView ({ keyHex, address }) {
 
       // Primitive: just show it.
       return h`
-        ${selector}
-        ${tabs}
         ${kindBanner(codecType.toLowerCase())}
         <pre class="value">${safeJSON(decoded)}</pre>
       `
@@ -703,12 +782,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
@@ -744,6 +833,26 @@ function byteStreamSection (repo, keyHex, currentAddress) {
     return item
   })
   const stripW = cursorX
+  // Inspector text — codec, address, length, percentage. Defaults to
+  // the at-view's current chunk (currentAddress) but follows the
+  // hovered chunk when the user is peeking at one on the strip. The
+  // slot re-renders on hover (via the live-preview path), so reading
+  // hoveredAddress in a nested slot below — reacts to hoverDep so its
+  // text updates without re-rendering the strip itself.
+  // 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">
@@ -756,21 +865,161 @@ 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>
+    ${() => {
+      // Inspector slot — reads hoverDep so it updates as the user moves
+      // across the strip, but doesn't re-render the strip itself. layout,
+      // total, currentAddress are closed over from byteStreamSection's
+      // call (which only runs on bridge fires; chunk content is fixed
+      // per render). isPeekActive lights up the .active background only
+      // when the inspector is showing something other than the URL's
+      // chunk.
+      hoverDep()
+      const inspectorAddr = hoveredAddress != null && hoveredAddress < total
+        ? hoveredAddress
+        : currentAddress
+      const inspectorChunk = layout.find(c => c.address === inspectorAddr)
+      const inspectorText = inspectorChunk
+        ? `${inspectorChunk.codecType} · @${inspectorChunk.address} · ${inspectorChunk.length} bytes${total > 0 ? ` (${((inspectorChunk.length / total) * 100).toFixed(2)}% of ${total})` : ''}`
+        : `${chunks.length} chunks · ${total} bytes`
+      const isPeekActive = hoveredAddress != null && hoveredAddress !== currentAddress
+      return h`<div class=${['chunk-inspector', isPeekActive ? 'active' : null]}
+                    data-key=${`inspector-${keyHex}`}>${inspectorText}</div>`
+    }}
+  `
+}
+
+// Commit reachability — the *semantic* parent of every chunk. Commits
+// don't reference their data tree via asRefs; they store the address
+// as a number value (a FLOAT64), and the convention "follow this
+// number to find your data" is implicit. So the structural referrer
+// index doesn't connect chunks to their owning commits. This walk
+// makes the connection: for each commit, BFS from commit.dataAddress
+// through asRefs and mark every reachable chunk. Result: chunk
+// address → set of commit addresses whose dataAddress reach it.
+function buildCommitReachabilityIndex (repo) {
+  const reach = new Map()  // chunk addr → Set<commit addr>
+  let walk = repo.byteLength - 1
+  while (walk >= 0) {
+    const code = repo.resolve(walk)
+    if (!code || !code.length) break
+    const type = repo.footerToCodec[code.at(-1)]?.type
+    if (type === 'OBJECT') {
+      let value
+      try { value = repo.decode(walk) } catch {}
+      if (value && isCommitShape(value)) {
+        const visited = new Set()
+        const stack = [value.dataAddress]
+        while (stack.length) {
+          const a = stack.pop()
+          if (typeof a !== 'number' || visited.has(a)) continue
+          visited.add(a)
+          if (!reach.has(a)) reach.set(a, new Set())
+          reach.get(a).add(walk)
+          let refs
+          try { refs = repo.asRefs(a) } catch {}
+          if (Array.isArray(refs)) {
+            for (const c of refs) if (typeof c === 'number') stack.push(c)
+          } else if (refs && typeof refs === 'object' && !(refs instanceof Date) && !(refs instanceof Uint8Array)) {
+            if (Array.isArray(refs.v)) {
+              for (const c of refs.v) if (typeof c === 'number') stack.push(c)
+            } else {
+              for (const c of Object.values(refs)) if (typeof c === 'number') stack.push(c)
+            }
+          }
+        }
+      }
+    }
+    walk -= code.length
+  }
+  return reach
+}
+
+// Storage-tab context: which commits reach this chunk. (Position info
+// — byte range, percentage, codec — now lives in the persistent chunk
+// inspector under the byte strip, so this section focuses on the
+// "story" of the chunk's place in user data.) Uses the commit-
+// reachability index above, falling back to the structural referrer
+// BFS for chunks not reachable from any commit (typically sigs and
+// other top-level chunks).
+function chunkContextSection (repo, keyHex, address) {
+  const reach = buildCommitReachabilityIndex(repo)
+  const reachingCommits = reach.get(address)
+  let label = null
+  if (reachingCommits && reachingCommits.size) {
+    // Show the most recent commit (highest address) reaching this chunk,
+    // plus a count if there are more.
+    const sorted = [...reachingCommits].sort((a, b) => b - a)
+    const newest = sorted[0]
+    label = h`
+      <a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${newest}>@${newest}</a>
+      ${sorted.length > 1
+        ? h` <span class="dim">(and ${sorted.length - 1} earlier commit${sorted.length === 2 ? '' : 's'})</span>`
+        : null}
+    `
+  } else {
+    // Fall back to the structural BFS — catches sig chunks (referenced
+    // by nothing in the asRefs sense, but the user might want to know
+    // some commit they cover).
+    const index = buildReferrerIndex(repo)
+    const visited = new Set()
+    let frontier = [address]
+    let depth = 0
+    while (frontier.length && depth < 64 && !label) {
+      const next = []
+      for (const a of frontier) {
+        if (visited.has(a)) continue
+        visited.add(a)
+        const parents = index.get(a) ?? []
+        for (const p of parents) {
+          try {
+            const decoded = repo.decode(p.address)
+            if (isCommitShape(decoded)) {
+              label = h`<a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${p.address}>@${p.address}</a> <span class="dim">(via structural ref)</span>`
+              break
+            }
+          } catch {}
+          next.push(p.address)
+        }
+        if (label) break
+      }
+      frontier = next
+      depth++
+    }
+  }
+  if (!label) {
+    label = h`<span class="dim">no commit references this chunk</span>`
+  }
+  return h`
+    <h3>reachable from <span class="dim">user-meaningful commits</span></h3>
+    <p class="dim" style="font-size: 0.85rem; margin-bottom: 0.4rem;">
+      commits hold their data's location as a number-valued <code>dataAddress</code> field, so reachability isn't a structural ref — it's "starting from each commit's data, this chunk shows up."
+    </p>
+    <p>${label}</p>
   `
 }
 
@@ -778,7 +1027,8 @@ function byteStreamSection (repo, keyHex, currentAddress) {
 // opposed to "referenced by", which is what points to this chunk). Walks
 // the codec's parts via repo.directReferences. Codec-by-codec — exposes
 // the storage chain so e.g. STRING → UINT8ARRAY → DUPLE → DUPLE → … → WORD
-// is browsable one click at a time.
+// is browsable one click at a time. Codec column is color-coded to match
+// the byte-strip palette so the chain reads visually.
 function outgoingReferencesSection (repo, keyHex, address) {
   const refs = repo.directReferences(address)
   if (!refs.length) return null
@@ -797,7 +1047,7 @@ function outgoingReferencesSection (repo, keyHex, address) {
           return h`
             <tr data-key=${`out${i}@${childAddr}`} data-action="open-at"
                 data-keyhex=${keyHex} data-addr=${childAddr}>
-              <td class="mono dim">${codecType}</td>
+              <td class=${['mono', 'codec-tag', `codec-${codecCategory(codecType)}`]}>${codecType}</td>
               <td>${preview}</td>
               <td class="mono dim">@${childAddr}</td>
             </tr>
@@ -835,7 +1085,7 @@ function referrersSection (repo, keyHex, address) {
           return h`
             <tr data-key=${`r${r.address}`} data-action="open-at"
                 data-keyhex=${keyHex} data-addr=${r.address}>
-              <td class="mono dim">${r.codecType || '?'}${r.count > 1 ? ` ×${r.count}` : ''}</td>
+              <td class=${['mono', 'codec-tag', `codec-${codecCategory(r.codecType || '?')}`]}>${r.codecType || '?'}${r.count > 1 ? ` ×${r.count}` : ''}</td>
               <td>${preview}</td>
               <td class="mono dim">@${r.address}</td>
             </tr>
@@ -861,38 +1111,102 @@ function isDuple (v) {
 // 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 (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']}>${v ? '✓' : '✗'} ${String(v)}</span>`
+    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"><span class="tv-quote">“</span>${display}<span class="tv-quote">”</span></span>`
+    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') {
-    return h`<span class="tv tv-num">${String(v)}</span>`
+    // 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"><span class="tv-glyph">📅</span><time datetime=${v.toISOString()}>${v.toLocaleString()}</time></span>`
+    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">Uint8Array(${v.length})</span>`
+    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 > 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 (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 h`<span class="tv tv-array">[ ${v.length} ${v.length === 1 ? 'element' : 'elements'} ]</span>`
+    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">{ ${n} ${n === 1 ? 'field' : 'fields'} }</span>`
+    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 } }
 
 // Build a child→parents index for the entire repo in one pass, so we can
@@ -1027,17 +1341,24 @@ function hexDump (bytes, maxLen = 256) {
 
 const appEl = document.getElementById('app')
 
-// Wrap each view in a data-keyed <section> so mount's tag-pool recycling
-// doesn't pull stale elements from one view into another. Without this,
-// switching from registry to an at-view would recycle the registry's
-// <h2> and keep its old text children (patchElement only updates attrs).
-// The data-key changes whenever the view's identity changes (kind + the
-// params that affect rendering), forcing a fresh mount.
+// Outer mount slot. Reads viewKindDep ONLY — re-runs on view.kind
+// or view.keyHex changes (registry ↔ at, or switching repos). It does
+// NOT re-run on address changes, chunk arrivals, tab clicks, or any
+// other bridge fire. That's the whole point of the decomposition:
+// keep the at-view's <section> (and the strip-container inside it)
+// alive across intra-repo navigation so click-to-navigate doesn't
+// rebuild the strip and reset its scrollLeft.
+//
+// Each view gets a data-keyed <section> so mount's matcher distinguishes
+// them — switching from registry to an at-view, or between repos, drops
+// the old section and fresh-mounts the new one. RegistryView and AtView
+// each do their own internal reactivity (inner slots reading dep() and
+// hoverDep()) for everything within a view.
 mount(h`${() => {
-  dep()
+  viewKindDep()
   switch (view.kind) {
     case 'registry': return h`<section class="view" data-key="view-registry">${RegistryView()}</section>`
-    case 'at':       return h`<section class="view" data-key=${`view-at-${view.keyHex}-${view.address}`}>${AtView({ keyHex: view.keyHex, address: view.address })}</section>`
+    case 'at':       return h`<section class="view" data-key=${`view-at-${view.keyHex}`}>${AtView({ keyHex: view.keyHex })}</section>`
     default:         return h`<div class="empty">?</div>`
   }
 }}`, appEl, recaller)
@@ -1065,6 +1386,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()
+    }
   }
 })
 
@@ -1078,8 +1411,12 @@ function syncByteStrips () {
   for (const container of appEl.querySelectorAll('.byte-strip-container')) {
     const visible = container.clientWidth || 1
     const atRight = container.scrollLeft + visible >= container.scrollWidth - 8
-    if (!container.dataset.pinned || atRight) {
-      container.dataset.pinned = '1'
+    // Auto-pin to HEAD only when the strip is freshly mounted (scroll
+    // hasn't been touched yet, so scrollLeft === 0). For recycled strips
+    // mount restores the previous scrollLeft, so this branch correctly
+    // skips and the user's position is preserved. Live updates still
+    // pin if the user is already at the right edge (atRight).
+    if (container.scrollLeft === 0 || atRight) {
       container.scrollLeft = container.scrollWidth
     }
   }
@@ -1126,11 +1463,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
@@ -1144,10 +1481,46 @@ appEl.addEventListener('mouseover', e => {
       }
     })
   }
+  // Look up the chunk's data on the strip rect for sig-coverage overlay.
+  const stripRect = matches[0]?.closest('.byte-strip-container') ? matches[0]
+    : appEl.querySelector(`.byte-strip .chunk[data-addr="${addr}"]`)
+  if (stripRect) {
+    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')
+      }
+    }
+  }
+  // Live preview: if the hovered chunk is on the byte strip, set
+  // hoveredAddress so the page content below renders for that chunk.
+  // Click to actually navigate. Only fire if the address changed —
+  // moving within the same chunk shouldn't re-render.
+  const onStrip = el.closest('.byte-strip-container')
+  const newHover = onStrip ? +addr : null
+  if (newHover !== hoveredAddress) {
+    hoveredAddress = newHover
+    hoverFire()
+  }
 })
 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'))
+  // Clear hoveredAddress unless the cursor is moving to ANOTHER chunk
+  // on the strip. The previous check ("still inside .byte-strip-container")
+  // treated the direction labels and any blank-space as "still hovering,"
+  // which left the page stuck on the previously hovered chunk's content.
+  // Requiring .chunk[data-addr] specifically means moving off a chunk
+  // anywhere — out of the strip OR to its non-chunk regions — reverts.
+  const goingToChunk = e.relatedTarget?.closest?.('.byte-strip-container .chunk[data-addr]')
+  if (!goingToChunk && hoveredAddress !== null) {
+    hoveredAddress = null
+    hoverFire()
+  }
 })