@dtudury/streamo 4.0.0 → 4.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtudury/streamo",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "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

@@ -13,8 +13,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>
@@ -129,7 +131,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

@@ -51,10 +51,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 +64,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 +129,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);

package/public/apps/explorer/main.js

@@ -134,58 +134,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 +185,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 +234,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}
   `
 }
 
@@ -328,101 +312,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 previewValue(repo.decode(e.address)) } catch { return '' } })()}</td>
+              <td class="mono dim">@${e.address}</td>
+            </tr>
+          `)}
+        </tbody>
+      </table>
+    </details>
   `
 }
 
@@ -439,15 +430,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 +453,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 +466,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 +482,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>${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>
+        `
+      }
+
+      // 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 +568,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
@@ -555,14 +612,24 @@ function AtView ({ keyHex, address }) {
         `
       }
 
-      // 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 +637,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>
       `
     }}
@@ -925,6 +963,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/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()
 })