@dtudury/streamo 0.1.0

package/public/apps/chat/main.js

@@ -0,0 +1,144 @@
+import { Signer } from '/streamo/Signer.js'
+import { RepoRegistry } from '/streamo/RepoRegistry.js'
+import { registrySync } from '/streamo/registrySync.js'
+import { bytesToHex } from '/streamo/utils.js'
+
+const loginEl  = document.getElementById('login')
+const chatEl   = document.getElementById('chat')
+const statusEl = document.getElementById('status')
+const myNameEl = document.getElementById('my-name')
+const msgsEl   = document.getElementById('messages')
+const inputEl  = document.getElementById('msg-input')
+const sendBtn  = document.getElementById('send-btn')
+const joinBtn  = document.getElementById('join-btn')
+
+const { rootKey } = await fetch('/api/chat-info').then(r => r.json())
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function fmt (ts) {
+  return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+// ── Rendering ──────────────────────────────────────────────────────────────
+
+let myKey = null
+
+/** Flat list of { name, text, at, mine } sorted by `at` */
+function collectMessages (registry) {
+  const all = []
+  for (const [keyHex, repo] of registry) {
+    const name = repo.get('name')
+    const messages = repo.get('messages') ?? []
+    for (const msg of messages) {
+      const text = typeof msg === 'string' ? msg : msg?.text ?? String(msg)
+      const at   = msg?.at ?? 0
+      all.push({ name, text, at, mine: keyHex === myKey })
+    }
+  }
+  all.sort((a, b) => a.at - b.at)
+  return all
+}
+
+let rendered = 0
+
+function renderMessages (registry) {
+  const all = collectMessages(registry)
+  // Only append new messages (simple: clear + rebuild if out of order, else append)
+  if (all.length < rendered) {
+    msgsEl.innerHTML = ''
+    rendered = 0
+  }
+  for (let i = rendered; i < all.length; i++) {
+    const { name, text, at, mine } = all[i]
+    const div = document.createElement('div')
+    div.className = `msg ${mine ? 'mine' : 'theirs'}`
+    div.innerHTML = `
+      ${!mine ? `<div class="sender">${escHtml(name)}</div>` : ''}
+      <div class="text">${escHtml(text)}</div>
+      <div class="time">${fmt(at)}</div>
+    `
+    msgsEl.appendChild(div)
+  }
+  rendered = all.length
+  if (all.length > rendered - 1) msgsEl.scrollTop = msgsEl.scrollHeight
+}
+
+function escHtml (s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+// ── Join ───────────────────────────────────────────────────────────────────
+
+joinBtn.onclick = async () => {
+  const username = document.getElementById('username').value.trim()
+  const password = document.getElementById('password').value.trim()
+  if (!username || !password) { statusEl.textContent = 'enter username and password'; return }
+
+  joinBtn.disabled = true
+  statusEl.textContent = 'connecting…'
+
+  try {
+    const signer = new Signer(username, password, 1)
+    const { publicKey } = await signer.keysFor('chat')
+    myKey = bytesToHex(publicKey)
+
+    const registry = new RepoRegistry()
+
+    const session = await registrySync(registry, location.hostname, Number(location.port) || 80, {
+      filter: k => k === rootKey,
+      follow: (keyHex, repo, subscribe) => {
+        for (const memberKey of repo.get('members') ?? []) subscribe(memberKey)
+      },
+      onAnnounce: (key) => {
+        session.subscribe(key)
+      }
+    })
+
+    // Open own repo
+    const myRepo = await registry.open(myKey)
+    if (!myRepo.get('name')) {
+      myRepo.set({ name: username, messages: [] })
+    }
+
+    session.interest(rootKey)
+    session.announce(myKey, rootKey)
+
+    // Switch to chat view
+    loginEl.style.display = 'none'
+    chatEl.style.display = 'flex'
+    myNameEl.textContent = `(${username})`
+
+    // Reactive rendering: re-render on any repo change
+    function watchRepo (keyHex, repo) {
+      repo.watch(`chat-render:${keyHex}`, () => renderMessages(registry))
+    }
+    for (const [k, r] of registry) watchRepo(k, r)
+    registry.onOpen((keyHex, repo) => {
+      watchRepo(keyHex, repo)
+      renderMessages(registry)
+    })
+    renderMessages(registry)
+
+    // ── Send ────────────────────────────────────────────────────────────────
+
+    async function sendMessage () {
+      const text = inputEl.value.trim()
+      if (!text) return
+      inputEl.value = ''
+      const messages = myRepo.get('messages') ?? []
+      myRepo.set({ name: username, messages: [...messages, { text, at: Date.now() }] })
+    }
+
+    sendBtn.onclick = sendMessage
+    inputEl.onkeydown = e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage() } }
+    inputEl.focus()
+
+  } catch (e) {
+    statusEl.textContent = `error: ${e.message}`
+    joinBtn.disabled = false
+  }
+}
+
+document.getElementById('username').onkeydown = e => { if (e.key === 'Enter') document.getElementById('password').focus() }
+document.getElementById('password').onkeydown = e => { if (e.key === 'Enter') joinBtn.click() }

package/public/apps/styles/proto.css

@@ -0,0 +1,71 @@
+/*
+ * proto.css — shared prototype stylesheet
+ *
+ * Deliberately rough. Use this so design bikeshedding doesn't happen.
+ * Replace per-app when the app is ready to grow up.
+ */
+
+:root {
+  --ink:      #1c1917;
+  --ink-dim:  #78716c;
+  --paper:    #fefdf8;
+  --rule:     #e7e5e0;
+  --accent:   #2563eb;
+  --warn:     #ca8a04;
+  --flash:    #fef08a;
+  --radius:   2px 8px 3px 7px / 7px 3px 8px 2px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: cursive;
+  background: var(--paper);
+  color: var(--ink);
+  padding: 1.25rem;
+  line-height: 1.5;
+}
+
+/* data / code always monospace */
+code, pre, .mono { font-family: monospace; }
+
+/* hand-drawn border feel */
+.box {
+  border: 1.5px solid var(--ink);
+  border-radius: var(--radius);
+  box-shadow: 2px 3px 0 var(--ink);
+  padding: 0.75rem 1rem;
+}
+
+/* status pill */
+.pill {
+  font-family: cursive;
+  font-size: 0.75rem;
+  padding: 0.15rem 0.6rem;
+  border: 1.5px solid currentColor;
+  border-radius: 999px;
+}
+.pill.ok  { color: #16a34a; }
+.pill.err { color: #dc2626; }
+
+/* flash animation — add .flash class, it auto-expires */
+@keyframes proto-flash {
+  0%   { background-color: var(--flash); }
+  100% { background-color: transparent; }
+}
+.flash { animation: proto-flash 0.7s ease-out; }
+
+/* divider */
+hr { border: none; border-top: 1.5px dashed var(--rule); margin: 0.75rem 0; }
+
+/* muted / helper text */
+.dim { color: var(--ink-dim); font-size: 0.8rem; }
+
+/* inline code snippet */
+.snippet {
+  font-family: monospace;
+  font-size: 0.85rem;
+  background: var(--rule);
+  border-radius: 3px;
+  padding: 0.1em 0.35em;
+}

package/public/index.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>streamo</title>
+  <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; }
+
+    .ideas {
+      display: flex;
+      flex-direction: column;
+      gap: 0.6rem;
+      margin-bottom: 2.5rem;
+    }
+    .idea {
+      display: flex;
+      gap: 0.75rem;
+      align-items: baseline;
+      font-size: 0.9rem;
+    }
+    .idea-glyph { font-size: 1rem; flex-shrink: 0; width: 1.4rem; text-align: center; }
+    .idea-text  { color: var(--ink-dim); }
+    .idea-text strong { color: var(--ink); }
+
+    hr { margin: 2rem 0; }
+
+    .apps-heading {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      color: var(--ink-dim);
+      margin-bottom: 1rem;
+    }
+
+    .app-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+      gap: 0.75rem;
+    }
+
+    .app-card {
+      display: block;
+      text-decoration: none;
+      color: var(--ink);
+      border: 1.5px solid var(--ink);
+      border-radius: var(--radius);
+      box-shadow: 2px 3px 0 var(--ink);
+      padding: 0.9rem 1rem;
+      transition: transform 0.08s, box-shadow 0.08s;
+    }
+    .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-desc { font-size: 0.78rem; color: var(--ink-dim); line-height: 1.4; }
+
+    .footer {
+      margin-top: 3rem;
+      font-size: 0.75rem;
+      color: var(--ink-dim);
+    }
+    .footer a { color: var(--ink-dim); }
+  </style>
+</head>
+<body>
+
+  <div class="wordmark">streamo</div>
+  <p class="tagline">every device is an equal author</p>
+
+  <div class="ideas">
+    <div class="idea">
+      <span class="idea-glyph">⬡</span>
+      <span class="idea-text"><strong>content-addressed</strong> — data is identified by what it is, not where it lives</span>
+    </div>
+    <div class="idea">
+      <span class="idea-glyph">✍</span>
+      <span class="idea-text"><strong>signed</strong> — every write is authenticated with a secp256k1 keypair derived from your identity</span>
+    </div>
+    <div class="idea">
+      <span class="idea-glyph">↔</span>
+      <span class="idea-text"><strong>p2p sync</strong> — repos replicate over WebSocket without a central authority; the server is just another peer</span>
+    </div>
+    <div class="idea">
+      <span class="idea-glyph">∞</span>
+      <span class="idea-text"><strong>append-only</strong> — history is never rewritten; every commit is permanent and verifiable</span>
+    </div>
+  </div>
+
+  <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 — each participant owns their message stream</div>
+    </a>
+  </div>
+
+  <p class="footer">
+    <a href="https://github.com/dtudury/streamo">github</a>
+  </p>
+
+</body>
+</html>

package/public/streamo/Addressifier.js

@@ -0,0 +1,212 @@
+import { ContentMap } from './ContentMap.js'
+
+/**
+ * Append-only, content-addressable byte store.
+ *
+ * Each appended Uint8Array gets an address equal to the index of its last byte.
+ * Duplicate content is rejected: the same bytes always live at the same address.
+ *
+ * The store exposes ReadableStream / WritableStream for network sync — the wire
+ * format is a sequence of length-prefixed chunks (4-byte little-endian length
+ * followed by the chunk bytes).
+ */
+export class Addressifier {
+  /** @type {Array.<{uint8Array: Uint8Array, offset: number}>} */
+  #chunks = []
+  #contentMap = new ContentMap()
+
+  #resolveNext
+  #nextChunk = new Promise(resolve => { this.#resolveNext = resolve })
+
+  get byteLength () {
+    if (!this.#chunks.length) return 0
+    const last = this.#chunks[this.#chunks.length - 1]
+    return last.offset + last.uint8Array.length
+  }
+
+  /**
+   * Returns the Uint8Array whose last byte is at `address`.
+   * For negative addresses, the caller (CodecRegistry) must override.
+   * @param {number} address
+   * @returns {Uint8Array}
+   */
+  resolve (address) {
+    return this.#chunkAt(address).uint8Array
+  }
+
+  /**
+   * Look up the address of a previously appended chunk.
+   * @param {Uint8Array} code
+   * @returns {number|undefined}
+   */
+  addressOf (code) {
+    return this.#contentMap.get(code)
+  }
+
+  /**
+   * Append a new chunk to the store. Returns its address.
+   * Throws if the chunk is empty or already present.
+   * @param {Uint8Array} code
+   * @returns {number}
+   */
+  append (code) {
+    if (!code.length) throw new Error('chunk must not be empty')
+    if (this.#contentMap.get(code) !== undefined) throw new Error('chunk already exists')
+    this.#chunks.push({ uint8Array: code, offset: this.byteLength })
+    const address = this.byteLength - 1
+    this.#contentMap.set(code, address)
+    const prev = this.#resolveNext
+    this.#nextChunk = new Promise(resolve => { this.#resolveNext = resolve })
+    prev(code)
+    return address
+  }
+
+  /**
+   * Clear all stored chunks and reset the store to empty.
+   * Any readers waiting on future chunks will never resolve after this call;
+   * use only when no live readers exist (e.g. before an archiveSync write loop).
+   */
+  _reset () {
+    this.#chunks = []
+    this.#contentMap = new ContentMap()
+    this.#nextChunk = new Promise(resolve => { this.#resolveNext = resolve })
+  }
+
+  /**
+   * Clone this store up to (and including) `address`.
+   * @param {number} address
+   * @returns {Addressifier}
+   */
+  clone (address) {
+    return this._applyClone(new Addressifier(), address)
+  }
+
+  /**
+   * Copy internal store state (chunks + content map) into `target` up to
+   * `address`. Called by subclass clone() methods so they can pass a
+   * subclass instance as `target`.
+   * @param {Addressifier} target
+   * @param {number} address
+   * @returns {Addressifier}
+   */
+  _applyClone (target, address) {
+    const idx = this.#indexAt(address, false)
+    target.#chunks = this.#chunks.slice(0, idx + 1)
+    target.#contentMap = this.#contentMap.clone(address)
+    return target
+  }
+
+  /**
+   * Extract a byte range as a single Uint8Array.
+   * @param {number} [start=0]
+   * @param {number} [end=this.byteLength]
+   * @returns {Uint8Array}
+   */
+  slice (start = 0, end = this.byteLength) {
+    const parts = []
+    for (const { uint8Array, offset } of this.#chunks) {
+      const chunkEnd = offset + uint8Array.length
+      if (chunkEnd <= start || offset >= end) continue
+      parts.push(uint8Array.slice(Math.max(0, start - offset), Math.min(uint8Array.length, end - offset)))
+    }
+    if (parts.length === 1) return parts[0]
+    const out = new Uint8Array(parts.reduce((n, p) => n + p.length, 0))
+    let pos = 0
+    for (const p of parts) { out.set(p, pos); pos += p.length }
+    return out
+  }
+
+  /**
+   * Return a byte at a specific index (not address — just a raw byte position).
+   * @param {number} byteIndex
+   * @returns {number|undefined}
+   */
+  byteAt (byteIndex) {
+    const chunk = this.#chunkAt(byteIndex, false)
+    if (!chunk) return undefined
+    return chunk.uint8Array[byteIndex - chunk.offset]
+  }
+
+  /**
+   * ReadableStream that emits all chunks, then waits for new ones.
+   * Wire format: 4-byte LE length prefix followed by chunk bytes.
+   * @returns {ReadableStream}
+   */
+  makeReadableStream () {
+    const self = this
+    let index = 0
+    return new ReadableStream({
+      async start (controller) {
+        while (true) {
+          while (index < self.#chunks.length) {
+            const { uint8Array } = self.#chunks[index++]
+            const len = new Uint8Array(new Uint32Array([uint8Array.length]).buffer)
+            const frame = new Uint8Array(len.length + uint8Array.length)
+            frame.set(len)
+            frame.set(uint8Array, len.length)
+            controller.enqueue(frame)
+          }
+          await self.#nextChunk
+        }
+      }
+    })
+  }
+
+  /**
+   * WritableStream that accepts the wire format and calls append() for each chunk.
+   *
+   * Resilient by design: duplicate chunks are silently skipped (they are already
+   * stored at the same address). Frames with implausible lengths are rejected so
+   * a single corrupt byte cannot stall the stream indefinitely.
+   *
+   * @param {number} [maxFrameSize=64*1024*1024]  reject frames larger than this
+   * @returns {WritableStream}
+   */
+  makeWritableStream (maxFrameSize = 64 * 1024 * 1024) {
+    const self = this
+    let buf = new Uint8Array(0)
+    return new WritableStream({
+      write (incoming) {
+        const next = new Uint8Array(buf.length + incoming.length)
+        next.set(buf); next.set(incoming, buf.length)
+        buf = next
+        while (buf.length >= 4) {
+          const len = new Uint32Array(buf.slice(0, 4).buffer)[0]
+          if (len === 0) throw new Error('malformed frame: zero-length chunk')
+          if (len > maxFrameSize) throw new Error(`malformed frame: length ${len} exceeds ${maxFrameSize}`)
+          if (buf.length < 4 + len) break
+          const code = buf.slice(4, 4 + len)
+          if (self.addressOf(code) === undefined) self.append(code)
+          buf = buf.slice(4 + len)
+        }
+      }
+    })
+  }
+
+  #indexAt (byteIndex, strict = true) {
+    const chunks = this.#chunks
+    if (!chunks.length) return -1
+    let lo = 0
+    let hi = chunks.length - 1
+    while (lo <= hi) {
+      const mid = (lo + hi) >>> 1
+      const { offset, uint8Array } = chunks[mid]
+      const end = offset + uint8Array.length - 1
+      if (strict) {
+        if (byteIndex === end) return mid
+        if (byteIndex < offset) hi = mid - 1
+        else lo = mid + 1
+      } else {
+        if (byteIndex >= offset && byteIndex < offset + uint8Array.length) return mid
+        if (byteIndex < offset) hi = mid - 1
+        else lo = mid + 1
+      }
+    }
+    return -1
+  }
+
+  #chunkAt (byteIndex, strict = true) {
+    const idx = this.#indexAt(byteIndex, strict)
+    return idx >= 0 ? this.#chunks[idx] : undefined
+  }
+}