npm - @dtudury/streamo - Versions diffs - 2.0.0 → 3.0.0 - Mend

@dtudury/streamo 2.0.0 → 3.0.0

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

Files changed (8) hide show

package/README.md +14 -4
package/package.json +1 -1
package/public/apps/explorer/index.html +118 -0
package/public/apps/explorer/main.js +434 -0
package/public/index.html +7 -0
package/public/streamo/Streamo.js +21 -3
package/public/streamo/registrySync.js +12 -0
package/public/streamo/utils/Recaller.js +12 -8

package/README.md CHANGED Viewed

@@ -177,17 +177,27 @@ For hot-reloading, `componentKey(prefix, address)` and `defineComponent(name, fn
 | `s3Sync` | replicate chunks to S3-compatible object storage |
 | `stateFileSync` | write repo state as JSON on every change |
-## chat example
+## the all-in-one demo
+The chat server is also the website server. Run it once and you get the
+homepage, chat app, **and** the repo explorer all on the same origin:
 ```bash
-# start the server — its public key becomes the room key
+# start the all-in-one demo server
 STREAMO_NAME=my-chat STREAMO_USERNAME=relay STREAMO_PASSWORD=secret \
   node public/apps/chat/server.js
-# join from the browser
+# homepage with app cards
+open http://localhost:8080/
+# chat
 open http://localhost:8080/apps/chat/
-# join from the terminal
+# repo explorer — leave it open in another tab to watch commits roll in
+# as you chat
+open http://localhost:8080/apps/explorer/
+# join chat from the terminal
 node public/streamo/chat-cli.js alice secret localhost 8080
 ```

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dtudury/streamo",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "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/explorer/index.html ADDED Viewed

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>streamo explorer</title>
+  <link rel="stylesheet" href="/apps/styles/proto.css">
+  <style>
+    body { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem; }
+    .header  { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.25rem; }
+    .wordmark { font-size: 1.6rem; letter-spacing: -0.02em; }
+    .crumbs  { font-size: 0.85rem; color: var(--ink-dim); }
+    .back    { cursor: pointer; color: var(--ink-dim); font-size: 0.85rem; display: inline-block; margin-bottom: 1rem; }
+    .back:hover { color: var(--ink); }
+    h2 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
+    h2 .dim { font-weight: 400; font-size: 0.9rem; }
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 12rem 14rem;
+      gap: 0.75rem;
+      align-items: baseline;
+      padding: 0.55rem 0.75rem;
+      border: 1.5px solid transparent;
+      border-radius: var(--radius);
+      cursor: pointer;
+    }
+    .row:hover { border-color: var(--ink); background: rgba(254, 240, 138, 0.4); }
+    .row + .row { border-top-color: var(--rule); }
+    .row:hover + .row { border-top-color: transparent; }
+    /* signature rows show 4 columns: kind, range, hex, addr */
+    .row.signature { grid-template-columns: 4rem 1fr 1fr 6rem; }
+    .row.commit    { grid-template-columns: 4rem 1fr 12rem 6rem; }
+    .row .mono { font-size: 0.85rem; }
+    .row .when { font-size: 0.78rem; color: var(--ink-dim); }
+    .row .msg  { font-size: 0.85rem; }
+    .row .kind {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--ink-dim);
+      border: 1px solid var(--rule);
+      border-radius: 999px;
+      padding: 0.05rem 0.5rem;
+      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); }
+    .empty { color: var(--ink-dim); padding: 0.5rem 0.75rem; font-size: 0.9rem; }
+    /* key/value table for the at-view */
+    .kv { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.75rem 0; }
+    .kv td { padding: 0.4rem 0.6rem; vertical-align: top; }
+    .kv tr + tr td { border-top: 1px dashed var(--rule); }
+    .kv td:first-child {
+      color: var(--ink-dim);
+      width: 8rem;
+      font-size: 0.78rem;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+    /* clickable variant — whole row is the click target */
+    .kv.clickable tr { cursor: pointer; }
+    .kv.clickable tr:hover td { background: rgba(254, 240, 138, 0.4); }
+    .kv.clickable td:last-child { color: var(--accent); text-align: right; }
+    .addr-link {
+      font-family: monospace;
+      font-size: 0.85rem;
+      color: var(--accent);
+      cursor: pointer;
+      text-decoration: underline dotted;
+    }
+    .addr-link:hover { background: var(--flash); text-decoration-style: solid; }
+    .paths { list-style: none; padding: 0; }
+    .paths li { padding: 0.2rem 0.5rem; font-size: 0.85rem; }
+    .paths li + li { border-top: 1px dashed var(--rule); }
+    h3 { font-size: 0.9rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
+    h3 .dim { font-weight: 400; font-size: 0.85rem; }
+    .conn { font-size: 0.75rem; color: var(--ink-dim); margin-bottom: 1.5rem; }
+    .conn.ok  { color: #16a34a; }
+    .conn.err { color: #dc2626; }
+    .keyfull { font-family: monospace; font-size: 0.78rem; color: var(--ink-dim); word-break: break-all; }
+    pre.value {
+      font-family: monospace;
+      font-size: 0.8rem;
+      background: var(--rule);
+      border-radius: var(--radius);
+      padding: 1rem;
+      overflow-x: auto;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div class="wordmark">streamo</div>
+    <div class="crumbs">explorer</div>
+  </div>
+  <div id="conn" class="conn">connecting…</div>
+  <div id="app"></div>
+  <script type="module" src="./main.js"></script>
+</body>
+</html>

package/public/apps/explorer/main.js ADDED Viewed

@@ -0,0 +1,434 @@
+// streamo explorer — read-only registry / repo / address browser.
+//
+// Three views, navigated by URL hash:
+//   #/                              — registry list
+//   #/repo/<keyHex>                 — chunks (commits + signatures) in a repo
+//   #/repo/<keyHex>/at/<address>    — the value at any address
+//
+// 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).
+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 { changedPaths } from '../../streamo/Streamo.js'
+// ── Connect ───────────────────────────────────────────────────────────────
+const registry = new RepoRegistry()
+const port = +location.port || 80
+const connEl = document.getElementById('conn')
+try {
+  await registrySync(registry, location.hostname, port)
+  connEl.textContent = `connected · ${location.hostname}:${port}`
+  connEl.classList.add('ok')
+} catch (e) {
+  connEl.textContent = `connection failed: ${e.message}`
+  connEl.classList.add('err')
+  throw e
+}
+// ── App-level reactivity ──────────────────────────────────────────────────
+const recaller = new Recaller('explorer')
+const signal = {}
+const dep = () => recaller.reportKeyAccess(signal, 'data')
+const schedule = typeof requestAnimationFrame !== 'undefined'
+  ? fn => requestAnimationFrame(fn)
+  : fn => queueMicrotask(fn)
+let scheduled = false
+function fire () {
+  if (scheduled) return
+  scheduled = true
+  schedule(() => { scheduled = false; recaller.reportKeyMutation(signal, 'data') })
+}
+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 () {
+  const m = (location.hash || '#/').match(/^#\/repo\/([0-9a-f]+)(?:\/at\/(\d+))?\/?$/i)
+  if (!m) return { kind: 'registry' }
+  if (m[2] != null) return { kind: 'at', keyHex: m[1], address: +m[2] }
+  return { kind: 'repo', keyHex: m[1] }
+}
+function hashFromView (v) {
+  switch (v.kind) {
+    case 'repo': return `#/repo/${v.keyHex}`
+    case 'at':   return `#/repo/${v.keyHex}/at/${v.address}`
+    default:     return '#/'
+  }
+}
+let view = viewFromHash()
+function go (next) {
+  view = next
+  const target = hashFromView(next)
+  if (location.hash !== target) location.hash = target
+  fire()
+}
+window.addEventListener('hashchange', () => {
+  const next = viewFromHash()
+  if (next.kind === view.kind && next.keyHex === view.keyHex && next.address === view.address) return
+  view = next
+  fire()
+})
+// ── Helpers ───────────────────────────────────────────────────────────────
+const truncKey = k => k.slice(0, 12) + '…'
+const truncHex = (b, n = 16) => Array.from(b.subarray(0, n)).map(x => x.toString(16).padStart(2, '0')).join('') + (b.length > n ? '…' : '')
+const fmtDate  = d => d ? d.toLocaleString() : ''
+function isCommitShape (v) {
+  return v && typeof v === 'object' && !Array.isArray(v) &&
+    typeof v.message === 'string' && v.date instanceof Date &&
+    typeof v.dataAddress === 'number'
+}
+function safeJSON (value) {
+  return JSON.stringify(value, (_, v) => {
+    if (v instanceof Uint8Array) return `Uint8Array(${v.length})`
+    if (v instanceof Date) return v.toISOString()
+    return v
+  }, 2)
+}
+// Walk every chunk newest-to-oldest. Each chunk's address is the index of
+// its last byte; the next chunk back ends at addr - chunk.length.
+function * repoEntries (repo) {
+  const len = repo.byteLength
+  if (len <= 0) return
+  let addr = len - 1
+  while (addr >= 0) {
+    const code = repo.resolve(addr)
+    if (!code || !code.length) return
+    const type = repo.footerToCodec[code.at(-1)]?.type
+    if (type === 'SIGNATURE') {
+      let sig
+      try { sig = repo.decode(addr) } catch { sig = null }
+      if (sig) {
+        // Per Streamo.sign / .verify, signed range is [sig.address, sigAddr - chunkLen + 1),
+        // i.e. last covered byte index = sigAddr - chunkLen. The sig chunk itself
+        // spans [sigAddr - chunkLen + 1, sigAddr], so coverage runs right up to
+        // (but does not include) the sig chunk's first byte.
+        yield {
+          kind: 'signature',
+          address: addr,
+          signedFrom: sig.address,
+          signedTo: addr - code.length,
+          chunkStart: addr - code.length + 1,
+          hex: truncHex(sig.compactRawBytes, 12)
+        }
+      }
+    } else if (type === 'OBJECT') {
+      let value
+      try { value = repo.decode(addr) } catch { value = null }
+      if (isCommitShape(value)) {
+        yield { kind: 'commit', address: addr, message: value.message, date: value.date, dataAddress: value.dataAddress, parent: value.parent }
+      }
+    }
+    addr -= code.length
+  }
+}
+// Decode the value at an address but treat object/array as REFS (children
+// are addresses, not decoded recursively). For primitives, returns the
+// decoded value directly.
+function valueAndChildren (repo, address) {
+  const code = repo.resolve(address)
+  const codecType = repo.footerToCodec[code.at(-1)]?.type
+  const refs = repo.asRefs(address)
+  // refs is either an object/array of addresses or just the address itself for primitives
+  return { codecType, refs, decoded: repo.decode(address) }
+}
+// ── Views ─────────────────────────────────────────────────────────────────
+function RegistryView () {
+  return h`
+    <h2>repos <span class="dim">${() => { dep(); return `(${[...registry].length})` }}</span></h2>
+    ${() => {
+      dep()
+      const rows = []
+      for (const [keyHex, repo] of registry) {
+        const last = repo.lastCommit
+        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="msg dim">${last?.message || ''}</span>
+          </div>
+        `)
+      }
+      return rows.length ? rows : h`<div class="empty">waiting for repos…</div>`
+    }}
+  `
+}
+function RepoView ({ keyHex }) {
+  return h`
+    <a class="back" data-action="back-registry">← all repos</a>
+    <div class="keyfull">${keyHex}</div>
+    ${() => {
+      dep()
+      const repo = registry.get(keyHex)
+      if (!repo) return h`<div class="empty">opening…</div>`
+      const entries = [...repoEntries(repo)]
+      if (!entries.length) {
+        return h`
+          <h2>chunks <span class="dim">(0)</span></h2>
+          <div class="empty">no signed commits yet</div>
+        `
+      }
+      const commitCount = entries.filter(e => e.kind === 'commit').length
+      const sigCount = entries.length - commitCount
+      return h`
+        <h2>chunks <span class="dim">(${commitCount} commit${commitCount === 1 ? '' : 's'} · ${sigCount} sig${sigCount === 1 ? '' : 's'})</span></h2>
+        ${entries.map(e => e.kind === 'commit'
+          ? h`
+            <div class="row commit" data-key=${`c${e.address}`} data-action="open-at"
+                 data-keyhex=${keyHex} data-addr=${e.address}>
+              <span class="kind">commit</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>`
+          : h`
+            <div class="row signature" data-key=${`s${e.address}`} data-action="open-at"
+                 data-keyhex=${keyHex} data-addr=${e.address}>
+              <span class="kind">sig</span>
+              <span class="mono dim">covers @${e.signedFrom}…@${e.signedTo}</span>
+              <span class="mono dim">${e.hex}</span>
+              <span class="mono dim">@${e.address}</span>
+            </div>`
+        )}
+      `
+    }}
+  `
+}
+function AtView ({ keyHex, address }) {
+  return h`
+    <a class="back" data-action="back-repo" data-keyhex=${keyHex}>← chunks</a>
+    <div class="keyfull">${truncKey(keyHex)} @ ${address}</div>
+    ${() => {
+      dep()
+      const repo = registry.get(keyHex)
+      if (!repo) return h`<div class="empty">opening…</div>`
+      if (address >= repo.byteLength) return h`<div class="empty">loading…</div>`
+      let info
+      try { info = valueAndChildren(repo, address) }
+      catch (e) { return h`<pre class="value">decode error: ${e.message}</pre>` }
+      const { codecType, refs, decoded } = info
+      const isCommit = isCommitShape(decoded)
+      // For commits, render the rich commit panel + changed paths.
+      if (isCommit) {
+        const parentDataAddr = decoded.parent !== undefined
+          ? safeGet(() => repo.decode(decoded.parent)?.dataAddress)
+          : undefined
+        const changes = parentDataAddr !== undefined
+          ? [...changedPaths(repo, parentDataAddr, decoded.dataAddress)]
+          : null
+        return h`
+          <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>
+          ${changes
+            ? h`
+              <h3>changed paths <span class="dim">(${changes.length})</span></h3>
+              ${changes.length
+                ? h`<ul class="paths">${changes.map(p => h`<li class="mono">${p.length === 0 ? '/' : p.join('.')}</li>`)}</ul>`
+                : h`<div class="dim">(no path-level changes — same dataAddress)</div>`}
+            `
+            : null}
+          <h3>rehydrated</h3>
+          <pre class="value">${safeJSON(decoded)}</pre>
+          ${rawChunkSection(repo, address)}
+        `
+      }
+      // Signature: dedicated layout.
+      if (codecType === 'SIGNATURE') {
+        const chunk = repo.resolve(address)
+        const chunkLen = chunk.length
+        const signedTo = address - chunkLen          // last byte covered (inclusive)
+        const sigChunkStart = address - chunkLen + 1 // first byte of the sig chunk
+        return h`
+          <div class="dim">codec: ${codecType}</div>
+          <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>
+              </tr>
+              <tr>
+                <td>sig chunk</td>
+                <td class="mono">@${sigChunkStart}…@${address} (${chunkLen} bytes)</td>
+              </tr>
+              <tr><td>bytes</td><td class="mono">${truncHex(decoded.compactRawBytes, 32)}</td></tr>
+            </tbody>
+          </table>
+          ${rawChunkSection(repo, 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`
+            <div class="dim">codec: ${codecType}</div>
+            <div class="empty">${isArray ? '[]' : '{}'}</div>
+            ${rawChunkSection(repo, address)}
+          `
+        }
+        return h`
+          <div class="dim">codec: ${codecType}${isArray ? ` · length ${entries.length}` : ''}</div>
+          <table class="kv clickable">
+            <tbody>
+              ${entries.map(([k, childAddr]) => {
+                let preview = ''
+                try {
+                  const v = repo.decode(childAddr)
+                  preview = previewValue(v)
+                } 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>
+          ${rawChunkSection(repo, address)}
+        `
+      }
+      // Primitive: just show it.
+      return h`
+        <div class="dim">codec: ${codecType}</div>
+        <pre class="value">${safeJSON(decoded)}</pre>
+        ${rawChunkSection(repo, address)}
+      `
+    }}
+  `
+}
+// Hex dump of the chunk at this address — the actual bytes that live in the
+// streamo for this value. For commits we also include this so you can see
+// the literal commit-record bytes.
+function rawChunkSection (repo, address) {
+  let bytes
+  try { bytes = repo.resolve(address) }
+  catch { return null }
+  if (!bytes || !bytes.length) return null
+  return h`
+    <h3>chunk bytes <span class="dim">(${bytes.length} bytes ending @${address})</span></h3>
+    <pre class="value mono">${hexDump(bytes)}</pre>
+  `
+}
+function previewValue (v) {
+  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})`
+  if (Array.isArray(v)) return `[…] (${v.length})`
+  if (typeof v === 'object') return `{…} (${Object.keys(v).length})`
+  return String(v)
+}
+function safeGet (f) { try { return f() } catch { return undefined } }
+// Hex dump of a chunk's raw bytes. Truncates at maxLen so a giant value
+// chunk doesn't blow up the page.
+function hexDump (bytes, maxLen = 256) {
+  const lines = []
+  const len = Math.min(bytes.length, maxLen)
+  for (let i = 0; i < len; i += 16) {
+    const offset = i.toString(16).padStart(4, '0')
+    const slice = bytes.subarray(i, Math.min(i + 16, len))
+    const hex = Array.from(slice).map(b => b.toString(16).padStart(2, '0')).join(' ')
+    const ascii = Array.from(slice).map(b => (b >= 0x20 && b < 0x7f) ? String.fromCharCode(b) : '·').join('')
+    lines.push(`${offset}  ${hex.padEnd(48)}  ${ascii}`)
+  }
+  if (bytes.length > maxLen) lines.push(`…  (${bytes.length - maxLen} more bytes)`)
+  return lines.join('\n')
+}
+// ── Mount ─────────────────────────────────────────────────────────────────
+const appEl = document.getElementById('app')
+mount(h`${() => {
+  dep()
+  switch (view.kind) {
+    case 'registry': return RegistryView()
+    case 'repo':     return RepoView({ keyHex: view.keyHex })
+    case 'at':       return AtView({ keyHex: view.keyHex, address: view.address })
+    default:         return h`<div class="empty">?</div>`
+  }
+}}`, appEl, recaller)
+// ── Click delegation ──────────────────────────────────────────────────────
+appEl.addEventListener('click', e => {
+  const el = e.target.closest('[data-action]')
+  if (!el) return
+  switch (el.dataset.action) {
+    case 'open-repo':     return go({ kind: 'repo', keyHex: el.dataset.key })
+    case 'open-at':       return go({ kind: 'at', keyHex: el.dataset.keyhex, address: +el.dataset.addr })
+    case 'back-registry': return go({ kind: 'registry' })
+    case 'back-repo':     return go({ kind: 'repo', keyHex: el.dataset.keyhex })
+  }
+})

package/public/index.html CHANGED Viewed

@@ -99,7 +99,14 @@
       <div class="app-name">chat</div>
       <div class="app-desc">p2p messaging — the server is a relay, not a gatekeeper</div>
     </a>
+    <a class="app-card" href="/apps/explorer/">
+      <div class="app-name">explorer</div>
+      <div class="app-desc">browse repos, commit history, and value at any commit</div>
+    </a>
   </div>
+  <p class="dim" style="margin-top: 1rem; font-size: 0.78rem;">
+    open both side by side — watch commits roll in as you chat
+  </p>
   <p class="footer">
     <a href="https://github.com/dtudury/streamo">github</a>

package/public/streamo/Streamo.js CHANGED Viewed

@@ -33,6 +33,13 @@ export function * changedPaths (streamo, addrA, addrB, path = []) {
   const objA = isPlain(refsA)
   const objB = isPlain(refsB)
   if (objA || objB) {
+    // Array length is not in Object.keys but watchers may read arr.length
+    // and register a dep on [...path, 'length']. Fire that path explicitly
+    // so length-watchers see length changes; without this, they only fire
+    // when an index they happen to read changes.
+    if (Array.isArray(refsA) && Array.isArray(refsB) && refsA.length !== refsB.length) {
+      yield [...path, 'length']
+    }
     const keys = new Set([...Object.keys(refsA ?? {}), ...Object.keys(refsB ?? {})])
     for (const key of keys) {
       const a = objA ? refsA[key] : undefined
@@ -321,7 +328,11 @@ export class Streamo extends CodecRegistry {
    */
   async sign (signer, streamoName) {
     const before = super.byteLength
-    const bytes = this.slice(this.#signedLength, before - 1)
+    // Slice end is exclusive, so [signedLength, before) is the full byte range
+    // appended since the last signature. (Earlier code used `before - 1` here
+    // and dropped the final byte — the footer of the last pre-sig chunk —
+    // from the signature's coverage. Matching change in verify below.)
+    const bytes = this.slice(this.#signedLength, before)
     const compactRawBytes = await signer.sign(streamoName, bytes)
     if (super.byteLength !== before) throw new Error('streamo was modified while signing')
     const sig = new Signature(this.#signedLength, compactRawBytes)
@@ -339,7 +350,11 @@ export class Streamo extends CodecRegistry {
   async verify (sig, publicKey) {
     const sigCode = this.encode(sig)
     const sigAddress = this.addressOf(sigCode)
-    const bytes = this.slice(sig.address, sigAddress - sigCode.length)
+    // The sig chunk's first byte is at sigAddress - sigCode.length + 1, so
+    // the byte just before the sig chunk is at sigAddress - sigCode.length.
+    // Slice end is exclusive, so [sig.address, sigAddress - sigCode.length + 1)
+    // covers all bytes up to and including that byte — matching sign() above.
+    const bytes = this.slice(sig.address, sigAddress - sigCode.length + 1)
     return verifySignature(publicKey, bytes, sig.compactRawBytes)
   }
@@ -376,10 +391,13 @@ export class Streamo extends CodecRegistry {
           // If this is a SIGNATURE chunk, verify it covers the bytes since its
           // stated start address before we accept it into the store.
+          // self.byteLength here is the length BEFORE this sig chunk is
+          // appended, so [sig.address, self.byteLength) is the full pre-sig
+          // range — matching sign() / verify() above.
           const codec = self.footerToCodec[code.at(-1)]
           if (codec?.type === 'SIGNATURE') {
             const sig = self.decode(code)
-            const bytes = self.slice(sig.address, self.byteLength - 1)
+            const bytes = self.slice(sig.address, self.byteLength)
             const valid = await verifySignature(publicKey, bytes, sig.compactRawBytes)
             if (!valid) throw new Error('signature verification failed')
           }

package/public/streamo/registrySync.js CHANGED Viewed

@@ -30,6 +30,12 @@ function adaptWebSocket (ws) {
 // to the correct repository without any per-connection state table.
 const KEY_BYTES = 33
+// Keep-alive: send a {type:'ping'} JSON frame periodically so PaaS hosts that
+// idle-close WebSockets don't drop us. Browsers don't expose WS ping/pong
+// frames, so we use a JSON message — the receiver silently ignores unknown
+// types, but the frame itself counts as activity.
+const KEEPALIVE_INTERVAL_MS = 20000
 /**
  * @typedef {Object} RegistrySyncOptions
  *
@@ -191,6 +197,11 @@ export function handleRegistryPeer (ws, registry, options = {}, label = 'registr
   // Announce what we already have
   sendCatalog()
+  // Keep-alive heartbeat — both sides ping; receivers ignore unknown types.
+  const keepalive = setInterval(() => {
+    if (ws.readyState === ws.OPEN) sendJson({ type: 'ping' })
+  }, KEEPALIVE_INTERVAL_MS)
   ws.on('message', async data => {
     // Normalize to Uint8Array — works for Node Buffer, ArrayBuffer, Uint8Array, string
     const buf = typeof data === 'string' ? new TextEncoder().encode(data)
@@ -245,6 +256,7 @@ export function handleRegistryPeer (ws, registry, options = {}, label = 'registr
   })
   function cleanup () {
+    clearInterval(keepalive)
     registry.offOpen(onNewRepo)
     for (const reader of readers.values()) reader.cancel().catch(() => {})
     for (const [keyHex, fn] of followFns) {

package/public/streamo/utils/Recaller.js CHANGED Viewed

@@ -32,9 +32,10 @@ export class Recaller {
   }
   unwatch (f) {
-    // Also drop f from the pending queue: a mutation may have queued it before
-    // unwatch was called, and the next #flush() would resurrect it via watch()
-    // — re-establishing all its dependencies and undoing the unwatch.
+    // Drop f from the pending queue (catches the case where unwatch happens
+    // before #flush() starts) and clear its deps/name. The complementary fix
+    // in #flush() — checking #names presence per item — handles the harder
+    // case where unwatch happens MID-flush, after the batch was snapshotted.
     this.#pending.delete(f)
     this.#disassociate(f)
   }
@@ -69,11 +70,14 @@ export class Recaller {
       }
       const batch = [...this.#pending]
       this.#pending = new Set()
-      batch.forEach(f => {
-        const name = this.#names.get(f) ?? f.name ?? '(unnamed)'
-        this.#disassociate(f)
-        this.watch(name, f)
-      })
+      for (const f of batch) {
+        // Skip watchers unwatched during this flush — e.g. when processing one
+        // watcher tears down DOM that contained another watcher's slot anchor.
+        // #names is the source of truth for "is this watcher still registered."
+        if (!this.#names.has(f)) continue
+        const name = this.#names.get(f)
+        this.watch(name, f)  // watch() handles its own #disassociate
+      }
       loops++
     }
     this.#flushing = false