npm - @dtudury/streamo - Versions diffs - 4.0.2 → 4.0.4 - Mend

@dtudury/streamo 4.0.2 → 4.0.4

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 (7) hide show

package/README.md +4 -0
package/package.json +1 -1
package/public/apps/chat/index.html +6 -3
package/public/apps/explorer/index.html +94 -3
package/public/apps/explorer/main.js +203 -48
package/public/index.html +220 -15
package/public/streamo.svg +24 -0

package/README.md CHANGED Viewed

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/dtudury/streamo/main/public/streamo.svg" alt="streamo" width="140">
+</p>
 # streamo
 > every device is an equal author

package/package.json CHANGED Viewed

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

package/public/apps/chat/index.html CHANGED Viewed

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

package/public/apps/explorer/index.html CHANGED Viewed

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

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

@@ -443,11 +443,13 @@ function AtView ({ keyHex, address }) {
       const isCommit = isCommitShape(decoded)
       const isSig = codecType === 'SIGNATURE'
-      // Tabs are part of the page content (not the static header) so the
-      // commit selector renders ABOVE the tabs. The selector is always
-      // present (when the repo has any commits) so the UI doesn't shift
-      // as you click between commit pages and storage drilling — when
-      // the current address isn't a commit, the summary shows "detached".
+      // Common header shown on every at-view: commit selector dropdown,
+      // byte-strip with the current chunk highlighted, then the value/
+      // storage tab nav. The byte-strip used to live only in the storage
+      // tab; promoting it lets you keep spatial context across tab and
+      // commit switches, and any data-addr hover (typed-tree chips,
+      // refs/referrers tables, kv addr links) cross-highlights and
+      // smooth-scrolls into view in the strip.
       const tabs = h`
         <nav class="tabs">
           <a class=${() => { dep(); return ['tab', atTab === 'value' ? 'active' : null] }}
@@ -457,24 +459,25 @@ function AtView ({ keyHex, address }) {
         </nav>
       `
       const selector = commitSelectorSection(repo, keyHex, resolvedAddr)
+      const bytes = byteStreamSection(repo, keyHex, resolvedAddr)
+      // Wrap in a sticky container so the selector + strip + tabs stay
+      // anchored as you scroll long value trees or storage detail.
+      const header = h`<div class="atview-header">${selector}${bytes}${tabs}</div>`
-      // Storage tab: spatial view of where this chunk lives in the byte
-      // stream + outgoing references + this chunk's bytes + incoming
-      // referrers. The chunk graph from this chunk's perspective.
+      // Storage tab: this chunk's outgoing refs, raw bytes, and
+      // referrers. (byteStreamSection moved up into the header.)
       if (atTab === 'storage') {
         return h`
-          ${selector}
-          ${tabs}
-          ${byteStreamSection(repo, keyHex, resolvedAddr)}
+          ${header}
           ${outgoingReferencesSection(repo, keyHex, resolvedAddr)}
           ${rawChunkSection(repo, resolvedAddr)}
           ${referrersSection(repo, keyHex, resolvedAddr)}
         `
       }
-      // Every value-tab branch below prepends ${selector}${tabs} so the
-      // UI is stable across navigation: the selector is always at the
-      // top of the page when the repo has any sigs.
+      // Every value-tab branch below prepends ${header} so the UI is
+      // stable across navigation: selector + byte-strip + tabs are
+      // always at the top of the page when the repo has any commits.
       // Value tab — branches by codec.
       // Helper: render the kv-table of decoded fields for any Object/Array
@@ -543,13 +546,30 @@ function AtView ({ keyHex, address }) {
             : h`<span class="verify-badge pending">…</span><span class="dim">not yet signed — sign in flight or pending</span>`,
           covering ? 'verified' : 'unsigned'
         )
+        // Commit fields render with two semantic specials: dataAddress and
+        // parent are *byte-address pointers* (their numeric value IS a
+        // navigation target), so they're clickable address pills directly
+        // — the chunk holding the FLOAT64 value is incidental and we
+        // skip the chunk-address column for those rows.
+        const addrLink = (addr) => addr === undefined
+          ? h`<span class="dim">(none — first commit)</span>`
+          : h`<a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${addr}>@${addr}</a>`
+        const commitFieldsTable = h`
+          <table class="kv">
+            <tbody>
+              <tr><td class="mono">message</td><td>${typedValue(decoded.message)}</td></tr>
+              <tr><td class="mono">date</td><td>${typedValue(decoded.date)}</td></tr>
+              <tr><td class="mono">dataAddress</td><td>${addrLink(decoded.dataAddress)}</td></tr>
+              <tr><td class="mono">parent</td><td>${addrLink(decoded.parent)}</td></tr>
+            </tbody>
+          </table>
+        `
         return h`
-          ${selector}
-          ${tabs}
+          ${header}
           ${banner}
-          ${refsTable()}
-          <h3>rehydrated</h3>
-          <pre class="value">${safeJSON(decoded)}</pre>
+          ${commitFieldsTable}
+          <h3>value <span class="dim">at <a class="addr-link" data-action="open-at" data-keyhex=${keyHex} data-addr=${decoded.dataAddress}>@${decoded.dataAddress}</a></span></h3>
+          ${valueTree(repo, keyHex, decoded.dataAddress)}
           ${changes
             ? h`
               <h3>changed paths <span class="dim">(${changes.length})</span></h3>
@@ -581,8 +601,7 @@ function AtView ({ keyHex, address }) {
       // Duple: explain what this tree-node IS, then show its two children.
       if (codecType === 'DUPLE') {
         return h`
-          ${selector}
-          ${tabs}
+          ${header}
           ${kindBanner('duple', h`<span class="dim">2-tuple, tree scaffolding</span>`)}
           <p class="explainer">
             A <strong>Duple</strong> is a 2-tuple — the building block streamo uses
@@ -616,8 +635,7 @@ function AtView ({ keyHex, address }) {
           'verified'
         )
         return h`
-          ${selector}
-          ${tabs}
+          ${header}
           ${banner}
           ${sigDetailBody(repo, keyHex, resolvedAddr, decoded)}
           <div class="dim" style="margin-top: 0.5rem;">switch to the <strong>storage</strong> tab above to see the raw chunk bytes, outgoing references, and what else points at this address.</div>
@@ -635,8 +653,7 @@ function AtView ({ keyHex, address }) {
           ? (isArray ? 'empty array' : 'empty object')
           : (isArray ? 'array' : 'object')
         return h`
-          ${selector}
-          ${tabs}
+          ${header}
           ${kindBanner(label, dim)}
           ${refsTable()}
           ${fieldCount > 0 ? h`
@@ -648,8 +665,7 @@ function AtView ({ keyHex, address }) {
       // Primitive: just show it.
       return h`
-        ${selector}
-        ${tabs}
+        ${header}
         ${kindBanner(codecType.toLowerCase())}
         <pre class="value">${safeJSON(decoded)}</pre>
       `
@@ -703,12 +719,22 @@ function byteStreamSection (repo, keyHex, currentAddress) {
     const code = repo.resolve(addr)
     if (!code || !code.length) break
     const codec = repo.footerToCodec[code.at(-1)]
-    chunks.unshift({
+    const chunk = {
       address: addr,
       start: addr - code.length + 1,
       length: code.length,
       codecType: codec?.type || '?'
-    })
+    }
+    // For sigs: precompute the byte range covered, so hover anywhere on
+    // the page can light up that range as an overlay band on the strip.
+    if (chunk.codecType === 'SIGNATURE') {
+      try {
+        const sig = repo.decode(addr)
+        chunk.signedFrom = sig.address
+        chunk.signedTo = addr - code.length
+      } catch {}
+    }
+    chunks.unshift(chunk)
     addr -= code.length
   }
   if (!chunks.length) return null
@@ -744,6 +770,20 @@ function byteStreamSection (repo, keyHex, currentAddress) {
     return item
   })
   const stripW = cursorX
+  // Map byte address → strip x. Used by the sig-coverage overlay so hover
+  // anywhere on the page can light up "what bytes does this sig sign".
+  // Stored as data attrs on the strip container so the hover handler
+  // can read without recomputing.
+  const xForByte = (byteAddr) => {
+    // Find the chunk containing this byte and interpolate within it.
+    for (const c of layout) {
+      if (byteAddr >= c.start && byteAddr <= c.address) {
+        const frac = c.length === 1 ? 0 : (byteAddr - c.start) / (c.length - 1)
+        return c.x + frac * c.w
+      }
+    }
+    return 0
+  }
   return h`
     <h3>byte stream <span class="dim">(${total} bytes · ${chunks.length} chunks)</span></h3>
     <div class="byte-map-legend">
@@ -756,21 +796,33 @@ function byteStreamSection (repo, keyHex, currentAddress) {
       <span class="cat-num">num</span>
       <span class="cat-var">var</span>
     </div>
-    <div class="byte-strip-container" data-key=${`strip-${keyHex}`}>
+    <div class="byte-strip-container" data-key=${`strip-${keyHex}`} data-strip-w=${stripW}>
       <svg class="byte-map byte-strip" width=${stripW} height=${H} viewBox=${`0 0 ${stripW} ${H}`}>
         ${layout.map(c => {
           const cat = commitAddrs.has(c.address) ? 'commit' : codecCategory(c.codecType)
           const cls = ['chunk', `cat-${cat}`, c.address === currentAddress ? 'current' : null]
+          // Sigs carry their coverage range in data-attrs so hover handlers
+          // (anywhere on the page) can position the coverage overlay.
+          // Non-sigs get null which removes the attrs.
+          const sigFromX = c.signedFrom != null ? xForByte(c.signedFrom) : null
+          const sigToX   = c.signedTo   != null ? xForByte(c.signedTo)   : null
           return h`<rect
             class=${cls}
             x=${c.x} y="0" width=${c.w} height=${H}
             data-action="open-at"
             data-keyhex=${keyHex}
             data-addr=${c.address}
+            data-codec=${c.codecType}
+            data-len=${c.length}
+            data-sig-from-x=${sigFromX}
+            data-sig-to-x=${sigToX}
           ><title>${c.codecType} @${c.address} (${c.length} bytes)</title></rect>`
         })}
+        <rect class="sig-coverage" x="0" y="0" width="0" height=${H} pointer-events="none"/>
       </svg>
+      <div class="strip-direction"><span>← older</span><span>newer →</span></div>
     </div>
+    <div class="chunk-inspector dim" data-key=${`inspector-${keyHex}`}>hover the strip to inspect a chunk</div>
   `
 }
@@ -861,38 +913,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
@@ -1065,6 +1181,18 @@ appEl.addEventListener('click', e => {
       el.closest('details.commit-selector')?.removeAttribute('open')
       return go({ kind: 'at', keyHex: el.dataset.keyhex, address: +el.dataset.addr })
     }
+    case 'expand-tree': {
+      const k = `${el.dataset.keyhex}:${el.dataset.addr}`
+      forceExpanded.add(k)
+      forceCollapsed.delete(k)
+      return fire()
+    }
+    case 'collapse-tree': {
+      const k = `${el.dataset.keyhex}:${el.dataset.addr}`
+      forceCollapsed.add(k)
+      forceExpanded.delete(k)
+      return fire()
+    }
   }
 })
@@ -1126,11 +1254,11 @@ appEl.addEventListener('pointerup', endDrag)
 appEl.addEventListener('pointercancel', endDrag)
 // Cross-highlight: hovering any element with data-addr highlights the
-// matching chunk in the byte-map. References and referrers light up the
-// chunk's position in the stream so you can SEE where it lives. If the
-// hover came from somewhere other than the strip itself, smooth-scroll
-// the matching chunk into view inside any byte-strip-container —
-// otherwise hover-elsewhere can highlight chunks that are off-screen.
+// matching chunk in the byte-map, populates the chunk inspector below
+// the strip with codec/addr/length, and (if the hovered chunk is a
+// signature) lights up its covered byte range as an overlay band on
+// the strip. If the hover came from somewhere other than the strip
+// itself, smooth-scroll the matching chunk into view in the strip.
 appEl.addEventListener('mouseover', e => {
   const el = e.target.closest('[data-addr]')
   if (!el) return
@@ -1144,10 +1272,37 @@ appEl.addEventListener('mouseover', e => {
       }
     })
   }
+  // Look up the chunk's data on the strip rect for inspector + sig coverage.
+  const stripRect = matches[0]?.closest('.byte-strip-container') ? matches[0]
+    : appEl.querySelector(`.byte-strip .chunk[data-addr="${addr}"]`)
+  if (stripRect) {
+    const codec = stripRect.dataset.codec
+    const len = stripRect.dataset.len
+    for (const ins of appEl.querySelectorAll('.chunk-inspector')) {
+      ins.textContent = codec ? `${codec} · @${addr} · ${len} bytes` : `chunk @${addr}`
+      ins.classList.remove('dim')
+      ins.classList.add('active')
+    }
+    const fromX = stripRect.getAttribute('data-sig-from-x')
+    const toX   = stripRect.getAttribute('data-sig-to-x')
+    if (fromX != null && toX != null) {
+      const overlay = stripRect.closest('.byte-strip').querySelector('.sig-coverage')
+      if (overlay) {
+        overlay.setAttribute('x', fromX)
+        overlay.setAttribute('width', String(parseFloat(toX) - parseFloat(fromX)))
+        overlay.classList.add('active')
+      }
+    }
+  }
 })
 appEl.addEventListener('mouseout', e => {
   const el = e.target.closest('[data-addr]')
   if (!el) return
-  appEl.querySelectorAll('.byte-map .chunk.hovered')
-    .forEach(c => c.classList.remove('hovered'))
+  appEl.querySelectorAll('.byte-map .chunk.hovered').forEach(c => c.classList.remove('hovered'))
+  appEl.querySelectorAll('.sig-coverage.active').forEach(o => o.classList.remove('active'))
+  for (const ins of appEl.querySelectorAll('.chunk-inspector')) {
+    ins.textContent = 'hover the strip to inspect a chunk'
+    ins.classList.remove('active')
+    ins.classList.add('dim')
+  }
 })

package/public/index.html CHANGED Viewed

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

package/public/streamo.svg ADDED Viewed

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