@dtudury/streamo 0.1.1 → 0.1.2

package/.claude/settings.json

@@ -0,0 +1 @@
+{}

package/.claude/settings.local.json

@@ -4,7 +4,9 @@
       "Bash(git add *)",
       "Bash(git commit -m ' *)",
       "Bash(git push *)",
-      "Bash(gh repo *)"
+      "Bash(gh repo *)",
+      "Bash(git rm *)",
+      "Bash(node --test)"
     ]
   }
 }

package/.env.dev

@@ -0,0 +1,4 @@
+STREAMO_NAME=streamo-dev
+STREAMO_USERNAME=dev
+STREAMO_PASSWORD=dev
+STREAMO_KEY_ITERATIONS=1

package/CLAUDE.md

@@ -0,0 +1,73 @@
+# streamo — Claude context
+
+## what this project is
+
+`@dtudury/streamo` is a peer-to-peer sync library with a reactive UI layer. The central
+promise: no server holds authority over your data or your identity. Keys are derived
+deterministically from credentials (no files to manage), every write is signed and
+append-only, and the server is a relay — not a gatekeeper.
+
+## the face of the project
+
+These files are how people discover and understand streamo. Keep them in sync
+after any meaningful change — not as an afterthought, but as part of the work:
+
+- **`README.md`** — npm/GitHub landing page; imports, framing, and examples must reflect
+  the current package name (`@dtudury/streamo`) and current capabilities
+- **`public/index.html`** — browser homepage; feature list and app cards should match
+  the README's framing
+- **`package.json`** — version, name (`@dtudury/streamo`), description, and keywords;
+  version bumps immediately after the user says they've published
+- **`ROADMAP.md`** — public on GitHub; mark items done when they ship, update "start
+  here" to the next priority, keep the "toward 1.0" list current
+
+Stale public-facing docs erode trust faster than bugs do.
+
+## publish rhythm
+
+The user publishes to npm manually and notifies Claude when done. The moment they say
+they've published, bump the patch version in `package.json`, commit, and push — before
+starting any other work. This ritual matters to them.
+
+## language and framing
+
+Use this framing consistently across all public-facing text:
+
+1. **No server holds authority** — the server is a relay, not a gatekeeper
+2. **Your identity travels with you** — same credentials, same keypair, everywhere; no
+   key files, no seed phrases, no backup ritual
+3. **Every write is provably yours** — signed commits, append-only, permanent
+4. **Content-addressed** — data identified by what it is, not where it lives
+
+"Content-addressed" is technically important but not the lead. Start with ownership.
+
+## architecture notes
+
+- `Streamo` — content-addressed, append-only byte store with self-describing codec
+- `Repo` — wraps Streamo; every `set()` is a signed commit (message, date, address, parent)
+- `Signer` — deterministic secp256k1 keypairs via PBKDF2 from username + password
+- `Recaller` — fine-grained reactive dependency tracker; `watch(name, f)` / `unwatch(f)`
+- `h` — tagged template literal HTML parser → HElement / HText virtual tree
+- `mount` — reactive DOM renderer; slots are reactive cells; elements recycled by
+  `data-key` then tag on re-render; removed nodes cleaned up via `recaller.unwatch()`;
+  exports `dismount(root, recaller)` for custom element cleanup
+- `StreamoComponent` — base class for hot-reloadable custom elements; `componentKey`
+  generates address-based names; `defineComponent` registers render functions; function
+  components `(props) => nodes` work directly as tags in `h` with no class needed
+- `registrySync` — bidirectional multi-repo sync over a single WebSocket; works in Node
+  and browser; content-driven discovery via `follow`
+- CLI `--chat-room` flag — when combined with `--web`, auto-accepts member announcements
+  and stores the member list in the server's own repo (backed by `archiveSync`);
+  the server's public key is the room key; `chat-server.js` is retired
+
+## what's next (toward 1.0)
+
+1. Chat signing — wire `repo.sign()` so messages are cryptographically verified
+2. Rebuild the browser app with `h` / `mount`
+
+## commit style
+
+Commit and push at the end of every response that makes a change. Over-commit rather
+than over-think. Co-author line on every commit:
+
+    Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package/README.md

@@ -2,25 +2,25 @@
 
 > every device is an equal author
 
-Streamo is a content-addressed, cryptographically signed, peer-to-peer sync library. There is no central server — your keypair is your identity, your commit log is the source of truth, and every connected peer sees the same history.
+Streamo is a peer-to-peer sync library built around a simple promise: **no server holds authority over your data or your identity.** The server is a relay, not a gatekeeper. Your keypair is your identity — derived from your credentials, not stored in a file. Your commit log is the source of truth, and every connected peer sees the same history.
 
 ## core ideas
 
-- **Content-addressed** — data is identified by what it is, not where it lives. The same value always lands at the same address; deduplication and diffing are free.
-- **Signed** — every write is authenticated with a secp256k1 keypair derived from your username and password. Peers reject unsigned or mis-signed data.
-- **Append-only** — history is never rewritten. Every commit is permanent and verifiable.
-- **P2P sync** — repos replicate over WebSocket. The server is just another peer; disconnect it and the data is still yours.
+- **No server holds authority** — the server is a relay; your data lives on your devices and can't be seized or censored. Disconnect the server and everything is still yours.
+- **Your identity travels with you** — keys are derived with PBKDF2 from your username and password. Same credentials, same keypair, everywhere — no key files, no seed phrases, no backup ritual.
+- **Every write is provably yours** — commits are signed with your keypair and append-only. History is permanent and can't be forged; peers reject unsigned or mis-signed data.
+- **Content-addressed** — data is identified by what it is, not where it lives. The same value always lands at the same address; deduplication and diffing are structural.
 
 ## install
 
 ```bash
-npm install streamo
+npm install @dtudury/streamo
 ```
 
 Or run the CLI directly:
 
 ```bash
-npx streamo --help
+npx @dtudury/streamo --help
 ```
 
 ## cli
@@ -50,14 +50,15 @@ streamo --env-file .env
 | `STREAMO_OUTLET` | `--outlet` | accept inbound peer connections |
 | `STREAMO_ORIGIN` | `--origin` | connect to a remote outlet |
 | `STREAMO_S3_BUCKET` | `--s3-bucket` | S3 bucket for replication |
+| `STREAMO_CHAT_ROOM` | `--chat-room` | auto-accept member announcements; this node's key becomes the room address |
 
 ## javascript api
 
 ### Streamo — reactive append-only store
 
 ```js
-import { Streamo } from 'streamo/public/streamo/Streamo.js'
-import { Recaller } from 'streamo/public/streamo/utils/Recaller.js'
+import { Streamo } from '@dtudury/streamo/public/streamo/Streamo.js'
+import { Recaller } from '@dtudury/streamo/public/streamo/utils/Recaller.js'
 
 const store = new Streamo()
 store.set({ name: 'alice', score: 42 })
@@ -72,20 +73,23 @@ Values are encoded with a self-describing codec (strings, numbers, dates, boolea
 `Repo` wraps a `Streamo` so every `set()` becomes a commit — message, date, data address, and parent pointer. The raw commit log is what syncs over the wire.
 
 ```js
-import { Repo } from 'streamo/public/streamo/Repo.js'
+import { Repo } from '@dtudury/streamo/public/streamo/Repo.js'
 
 const repo = new Repo()
+repo.attachSigner(signer, 'my-dataset')  // auto-sign every commit
 repo.set({ name: 'alice', messages: [] })
 repo.get('name')      // 'alice'
 repo.lastCommit       // { message: '', date: Date, dataAddress: n, parent: n|undefined }
 [...repo.history()]   // newest-first iterator over commits
 ```
 
+Signature chunks travel in the byte stream automatically — peers running `registrySync` or `originSync` verify every signature on receipt and reject data that doesn't match the repo's public key.
+
 ### Signer — deterministic identity
 
 ```js
-import { Signer } from 'streamo/public/streamo/Signer.js'
-import { bytesToHex } from 'streamo/public/streamo/utils.js'
+import { Signer } from '@dtudury/streamo/public/streamo/Signer.js'
+import { bytesToHex } from '@dtudury/streamo/public/streamo/utils.js'
 
 const signer = new Signer('alice', 'my-password')
 const { publicKey } = await signer.keysFor('my-dataset')
@@ -97,8 +101,8 @@ Keys are derived with PBKDF2 so the same username + password always produces the
 ### RepoRegistry — multi-repo store
 
 ```js
-import { RepoRegistry } from 'streamo/public/streamo/RepoRegistry.js'
-import { archiveSync } from 'streamo/public/streamo/archiveSync.js'
+import { RepoRegistry } from '@dtudury/streamo/public/streamo/RepoRegistry.js'
+import { archiveSync } from '@dtudury/streamo/public/streamo/archiveSync.js'
 
 const registry = new RepoRegistry(async key => {
   const repo = new Repo()
@@ -112,7 +116,7 @@ const repo = await registry.open(publicKeyHex)
 ### registrySync — peer sync over WebSocket
 
 ```js
-import { registrySync } from 'streamo/public/streamo/registrySync.js'
+import { registrySync } from '@dtudury/streamo/public/streamo/registrySync.js'
 
 const session = await registrySync(registry, 'localhost', 8080, {
   // only sync repos you care about
@@ -134,9 +138,9 @@ session.announce(myKey, rootKey) // tell interested peers about your repo
 ### h + mount — reactive UI
 
 ```js
-import { h } from 'streamo/public/streamo/h.js'
-import { mount } from 'streamo/public/streamo/mount.js'
-import { Recaller } from 'streamo/public/streamo/utils/Recaller.js'
+import { h } from '@dtudury/streamo/public/streamo/h.js'
+import { mount } from '@dtudury/streamo/public/streamo/mount.js'
+import { Recaller } from '@dtudury/streamo/public/streamo/utils/Recaller.js'
 
 const recaller = new Recaller('app')
 
@@ -148,7 +152,21 @@ mount(h`
 `, document.body, recaller)
 ```
 
-Functions interpolated as `${() => ...}` are reactive cells — they re-run automatically whenever the data they read changes. No virtual DOM diffing; only the exact DOM nodes bound to changed data update.
+Functions interpolated as `${() => ...}` are reactive cells — they re-run automatically whenever the data they read changes. No virtual DOM diffing; only the exact DOM nodes bound to changed data update. Elements are recycled across re-renders by `data-key` (or tag as a fallback), so user input and focus survive list reorders. SVG namespaces propagate automatically — `` h`<svg><path d="..."/></svg>` `` works without any extra wiring. `class` accepts an array (`['btn', isActive && 'active']`) or an object (`{btn: true, active: false}`); falsy entries are filtered out.
+
+Any function can be used directly as a tag — it receives `{ ...attrs, children }` and returns virtual nodes:
+
+```js
+import { StreamoComponent, componentKey, defineComponent } from '@dtudury/streamo/public/streamo/StreamoComponent.js'
+
+function Card ({ title, children }) {
+  return h`<div class="card"><h2>${title}</h2>${children}</div>`
+}
+
+mount(h`<${Card} title="Hello"><p>hi</p></${Card}>`, document.body, recaller)
+```
+
+For hot-reloading, `componentKey(prefix, address)` and `defineComponent(name, fn)` pair a content address to a unique custom element name. A new file version gets a new name; stale elements are naturally orphaned and cleaned up without any explicit bookkeeping.
 
 ## sync backends
 
@@ -165,8 +183,8 @@ Functions interpolated as `${() => ...}` are reactive cells — they re-run auto
 ## chat example
 
 ```bash
-# start the server
-node public/streamo/chat-server.js 8080
+# start the server — its public key becomes the room key
+streamo --name my-chat --username relay --web 8080 --chat-room
 
 # join from the browser
 open http://localhost:8080
@@ -175,7 +193,7 @@ open http://localhost:8080
 node public/streamo/chat-cli.js alice secret localhost 8080
 ```
 
-Each participant owns their own message stream. The server holds only a root repo listing members; it has no special authority over anyone's data.
+Each participant owns their own message stream. The server is just another streamo node — it holds the member list in its own repo and auto-accepts anyone who announces to it. Its public key is the room address. No special authority, no hidden state.
 
 ## tests
 
@@ -189,6 +207,10 @@ node --test public/streamo/Repo.test.js  # single file
 See [ROADMAP.md](./ROADMAP.md) for what's been built, what's next, and what we're
 aiming at for 1.0.
 
+## collaboration
+
+Built with significant AI collaboration via [Claude Code](https://claude.ai/code). Human-directed; Claude is a co-author and contributor, not an autonomous builder.
+
 ## license
 
 AGPL-3.0-only

package/ROADMAP.md

@@ -5,7 +5,7 @@ picture of where the project is and where it's headed.
 
 ---
 
-## where we are (0.1.0)
+## where we are (0.1.3)
 
 The foundation is solid and working. Here's what's in:
 
@@ -14,7 +14,8 @@ The foundation is solid and working. Here's what's in:
   self-describing codec. Same value always encodes to the same bytes; dedup and
   diffing are free.
 - `Repo` — every write is a signed commit. Message, date, data address, parent.
-  The full history is always there.
+  The full history is always there. `attachSigner(signer, name)` enables
+  automatic signing after every commit; concurrent commits are batched safely.
 - `Signer` — deterministic secp256k1 keypairs from username + password via PBKDF2.
   No key files to manage; same credentials always produce the same identity.
 - `Recaller` — fine-grained reactive dependency tracker. Watchers re-run only when
@@ -32,51 +33,42 @@ The foundation is solid and working. Here's what's in:
   any persistence.
 
 **UI layer**
-- `h` — tagged template literal parser. Turns `h\`<div class=${cls}>...\`` into a
+- `h` — tagged template literal parser. Turns `` h`<div class=${cls}>...` `` into a
   virtual tree of `HElement` / `HText` / slot nodes.
 - `mount` — reactive DOM renderer. Slots that are functions re-run automatically
   when the data they read changes. No virtual DOM diffing — only the exact nodes
-  bound to mutated paths update.
+  bound to mutated paths update. Watcher cleanup is precise: removed nodes are
+  unwatched before removal so watchers never accumulate. Elements are recycled
+  across re-renders by `data-key` (exact) then tag (positional fallback), so user
+  input and focus survive list reorders. SVG namespaces propagate automatically —
+  `` h`<svg><path/></svg>` `` just works. `class` accepts an array
+  (`['btn', isActive && 'active']`) or an object (`{btn: true, active: false}`).
+- `StreamoComponent` — base class for hot-reloadable custom element components.
+  Function components (`(props) => nodes`) work directly as tags in `h`. For
+  hot-reloading, `componentKey(prefix, address)` and `defineComponent(name, fn)`
+  pair a content address to a unique custom element name — a new file version gets
+  a new name, stale elements are naturally orphaned and cleaned up.
 
 **Apps**
-- Chat — full p2p messaging app. Each participant owns their own message stream;
-  the server is just a relay and holds no special authority. Runs in the browser
-  and from the terminal (`chat-cli.js`).
+- Chat — full p2p messaging app. Each participant owns their own signed message
+  stream. The server is just another streamo node (`--chat-room` flag) — its
+  public key is the room address, its member list is in its own repo, and it
+  has no special authority over anyone's data. Runs in the browser and from
+  the terminal (`chat-cli.js`).
 - Homepage at `public/index.html`.
-- `npm run serve` — static file server for `public/`.
+- `npm run serve` — starts a streamo node (with REPL) using `.env.dev`
+  credentials. The dev server is a real peer, not a bare static file server.
 
 ---
 
 ## what's next
 
-### fix watcher leaks in `mount` ← start here
-When a reactive slot re-renders, child watchers registered inside it are never
-cleaned up. Every re-render accumulates more. This is a correctness bug and the
-thing most worth fixing before building more UI on top of `mount`.
-
-### component support in `h`
-Functions as tags: `h\`<${Card} title="hi"/>\``. This is the difference between
-a templating tool and a UI framework. Once watcher cleanup exists, components
-become straightforward — a component is just a function that returns nodes and
-cleans up after itself.
-
-### SVG namespace
-`mount` hardcodes the XHTML namespace. `h\`<svg><path/></svg>\`` won't render
-correctly until `mount` auto-detects SVG elements and switches namespaces.
-
-### `class` as array or object
-`class=${['btn', isActive && 'active']}` is such a common pattern that not
-supporting it is a daily papercut. Easy win.
-
-### chat persistence
-Right now the chat server is in-memory — restart it and history is gone. Wiring
-`archiveSync` into `chat-server.js` is a small change with a big quality-of-life
-improvement.
-
-### chat signing
-Messages aren't cryptographically verified yet. Anyone who knows a participant's
-public key hex could theoretically spoof them. Wiring `repo.sign()` after each
-`set()` closes this.
+### chat persistence ← start here
+The chat server now runs through the CLI, which already wires `archiveSync` — so
+the member list survives restarts automatically. Individual message history lives
+in each participant's own repo; persistence there depends on participants running
+with `--data-dir` set (the CLI default). The remaining work is ensuring the browser
+chat client also persists across page reloads.
 
 ### presence indicators
 Who's currently online? The `interest` / `announce` layer is ephemeral by design,
@@ -88,24 +80,63 @@ The old repository-browser app was left behind during the migration because its
 imports broke. Rebuilding it with `h` / `mount` would be the first substantial
 real-world test of the UI layer.
 
-### fix dead links on the homepage
-`public/index.html` links to the browser and components apps that no longer exist.
-Either rebuild them or remove the links.
+---
+
+## toward 1.0
+
+One thing blocking a stable `1.0` claim:
 
-### CLAUDE.md
-Add a `CLAUDE.md` for the streamo repo so future Claude sessions have the full
-context.
+1. **Chat persistence** — a chat app that loses history on restart isn't production-ready
+
+Chat signing is done. Components, keyed list reconciliation, SVG namespaces,
+`class` arrays/objects, and the CLI server unification are all done.
+Persistence is the last mile.
 
 ---
 
-## toward 1.0
+## beyond 1.0
+
+Ideas that follow naturally from the architecture but aren't blocking anything.
+
+### Claude scratchpad repos
+
+Every streamo node already has a signed, append-only repo. A Claude session
+could write observations, notes, and work products to that repo during a
+conversation — and the owner could watch them appear live in a browser via
+`mount`. Between sessions, Claude reads the repo to reconstruct context
+instead of relying on static memory files. The work is persistent and
+provably Claude's, with the same integrity guarantees as any other streamo data.
+
+### Claude-to-Claude networks
+
+If each person's Claude has a scratchpad repo, those repos can sync the same
+way any other repos do. The `follow` callback in `registrySync` already handles
+content-driven discovery — subscribe to a member list, auto-follow everyone on
+it. A Claude could watch its person's friends' scratchpads, surface what's
+relevant, and filter what isn't.
+
+The interesting architectural difference from a traditional social network: there
+is no central moderator. Each Claude is an advocate for its person, not a
+reporter to a platform. Judgment about what to surface or filter lives at the
+edge, anchored to a real signed identity. Conflicts between Claudes are just
+their people having different values — which is honest in a way platform
+moderation usually isn't.
+
+A natural extension: if a Claude scratchpad includes a `StreamoComponent` for
+how its notes render, other people see those notes in Claude's own layout. The
+presentation travels with the content — no server controls the framing.
 
-The three things blocking a stable `1.0` claim:
+### StreamoComponent demos — shared components as content
 
-1. **Watcher leak fixed** — `mount` must be correct before anyone builds on it
-2. **Components** — without them, `h` / `mount` is too limited for real apps
-3. **Chat signing** — the whole point of the project is cryptographic authorship;
-   the flagship app should demonstrate it
+`StreamoComponent` makes most sense as a post-1.0 story, after chat signing
+gives the trust foundation that running someone else's component requires.
+The right first demo is a **tarot deck**: each card is a `StreamoComponent`
+from its designer, stored in their signed repo at a content address.
+`componentKey` generates a stable element name from that address. A reading
+is a snapshot — cards freeze at the version they were drawn, which is a
+feature, not a bug. The designer's signed key is provenance.
 
-Keyed list reconciliation and refs are quality-of-life improvements that can come
-after 1.0.
+Other directions once the pattern is established: publisher-controlled article
+cards that travel with syndicated content (the layout is the author's, not
+the platform's); collaborative maps where each participant's marker is their
+own component; shared instrument components in a live music session.

package/bin/streamo.js

@@ -91,6 +91,10 @@ program
     new Option('--interactive', 'start a REPL with streamo, signer, and helpers as globals')
       .env('STREAMO_INTERACTIVE')
   )
+  .addOption(
+    new Option('--chat-room', 'auto-accept member announcements — this node\'s key becomes the room key (requires --web)')
+      .env('STREAMO_CHAT_ROOM')
+  )
   .addOption(
     new Option('--key-iterations <number>', 'PBKDF2 iterations for key derivation (lower = faster startup, less secure)')
       .env('STREAMO_KEY_ITERATIONS')
@@ -122,9 +126,8 @@ const publicKeyHex = Array.from(publicKey).map(b => b.toString(16).padStart(2, '
 
 const name = options.name
 const username = options.username
-const appPath = options.envFile
-  ? '/' + dirname(options.envFile).replace(/^public\//, '') + '/'
-  : '/'
+const envDir   = options.envFile ? dirname(options.envFile).replace(/^public\//, '') : null
+const appPath  = (envDir && envDir !== '.') ? `/${envDir}/` : '/'
 const webUrl = options.web ? `http://localhost:${+options.web}${appPath}` : null
 const rows = [
   ['NAME', name],
@@ -152,6 +155,7 @@ const registry = new RepoRegistry(async key => {
   return repo
 })
 const streamo = await registry.open(publicKeyHex)
+streamo.attachSigner(signer, name)
 
 if (options.files) {
   const folder = typeof options.files === 'string' ? options.files : '.'
@@ -175,8 +179,24 @@ if (options.s3Bucket) {
   console.log(`\x1b[32ms3: syncing to bucket ${options.s3Bucket}\x1b[0m`)
 }
 
+const peerOptions = {}
+if (options.chatRoom) {
+  if (!streamo.get('members')) {
+    streamo.set({ ...(streamo.get() ?? {}), members: [] })
+    console.log('\x1b[32m[chat] initialized chat room\x1b[0m')
+  }
+  peerOptions.onAnnounce = (key, topic) => {
+    if (topic !== publicKeyHex) return
+    const members = streamo.get('members') ?? []
+    if (!members.includes(key)) {
+      streamo.set({ ...(streamo.get() ?? {}), members: [...members, key] })
+      console.log(`\x1b[32m[chat] new member: ${key.slice(0, 12)}…\x1b[0m`)
+    }
+  }
+}
+
 if (options.web) {
-  await webSync(registry, publicKeyHex, +options.web, name, options.keyIterations)
+  await webSync(registry, publicKeyHex, +options.web, name, options.keyIterations, peerOptions)
 }
 
 if (options.outlet) {

package/jsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "module": "ES2022",
-    "moduleResolution": "node",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "node16",
+    "moduleResolution": "node16",
     "checkJs": false
   },
   "exclude": ["node_modules"]

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@dtudury/streamo",
-  "version": "0.1.1",
-  "description": "content-addressed p2p sync",
+  "version": "0.1.2",
+  "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",
   "author": "David Tudury <david.tudury@gmail.com>",
   "license": "AGPL-3.0-only",
@@ -21,6 +22,6 @@
     "ws": "^8.18.3"
   },
   "scripts": {
-    "serve": "node scripts/serve.js"
+    "serve": "node bin/streamo.js --env-file .env.dev --web 3000 --interactive"
   }
 }

package/public/apps/chat/main.js

@@ -1,74 +1,33 @@
-import { Signer } from '/streamo/Signer.js'
-import { RepoRegistry } from '/streamo/RepoRegistry.js'
-import { registrySync } from '/streamo/registrySync.js'
-import { bytesToHex } from '/streamo/utils.js'
+import { h } from '../../streamo/h.js'
+import { mount } from '../../streamo/mount.js'
+import { Recaller } from '../../streamo/utils/Recaller.js'
+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 ────────────────────────────────────────────────────────────────
+const { primaryKeyHex: rootKey } = await fetch('/api/info').then(r => r.json())
 
 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>
+function Msg ({ name, text, at, mine }) {
+  return h`
+    <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>
-    `
-    msgsEl.appendChild(div)
-  }
-  rendered = all.length
-  if (all.length > rendered - 1) msgsEl.scrollTop = msgsEl.scrollHeight
+    </div>
+  `
 }
 
-function escHtml (s) {
-  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-// ── Join ───────────────────────────────────────────────────────────────────
+const loginEl  = document.getElementById('login')
+const chatEl   = document.getElementById('chat')
+const msgsEl   = document.getElementById('messages')
+const inputEl  = document.getElementById('msg-input')
+const statusEl = document.getElementById('status')
+const joinBtn  = document.getElementById('join-btn')
 
 joinBtn.onclick = async () => {
   const username = document.getElementById('username').value.trim()
@@ -79,50 +38,74 @@ joinBtn.onclick = async () => {
   statusEl.textContent = 'connecting…'
 
   try {
-    const signer = new Signer(username, password, 1)
+    const signer  = new Signer(username, password, 1)
     const { publicKey } = await signer.keysFor('chat')
-    myKey = bytesToHex(publicKey)
-
+    const 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)
-      }
+      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: [] })
-    }
+    myRepo.attachSigner(signer, 'chat')
+    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})`
+    chatEl.style.display  = 'flex'
+    document.getElementById('my-name').textContent = `(${username})`
+
+    // ── Reactive message list ──────────────────────────────────────────────
+    //
+    // Each repo has its own internal Recaller, so repo.get() inside a mount
+    // slot won't automatically re-trigger mount's recaller. Bridge via
+    // reportKey*: repo.watch() calls reportKeyMutation when data changes;
+    // the slot calls reportKeyAccess to register the dependency.
+
+    const recaller = new Recaller('chat')
+    const signal   = {}
+
+    function triggerRender () {
+      recaller.reportKeyMutation(signal, 'data')
+      requestAnimationFrame(() => { msgsEl.scrollTop = msgsEl.scrollHeight })
+    }
 
-    // Reactive rendering: re-render on any repo change
     function watchRepo (keyHex, repo) {
-      repo.watch(`chat-render:${keyHex}`, () => renderMessages(registry))
+      repo.watch(`chat:${keyHex}`, triggerRender)
     }
+
     for (const [k, r] of registry) watchRepo(k, r)
-    registry.onOpen((keyHex, repo) => {
-      watchRepo(keyHex, repo)
-      renderMessages(registry)
-    })
-    renderMessages(registry)
+    registry.onOpen((keyHex, repo) => { watchRepo(keyHex, repo); triggerRender() })
+
+    mount(h`${function messages () {
+      recaller.reportKeyAccess(signal, 'data')
+      const all = []
+      for (const [keyHex, repo] of registry) {
+        if (keyHex === rootKey) continue
+        const name = repo.get('name')
+        for (const msg of repo.get('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.map(({ name, text, at, mine }) =>
+        h`<${Msg} name=${name} text=${text} at=${at} mine=${mine}/>`)
+    }}`, msgsEl, recaller)
 
     // ── Send ────────────────────────────────────────────────────────────────
 
-    async function sendMessage () {
+    const sendBtn = document.getElementById('send-btn')
+
+    function sendMessage () {
       const text = inputEl.value.trim()
       if (!text) return
       inputEl.value = ''

package/public/streamo/Repo.js

@@ -18,6 +18,39 @@ import { Streamo, changedPaths } from './Streamo.js'
  * for read-only inspection or direct use with the explicit commit() API.
  */
 export class Repo extends Streamo {
+  #signer      = null
+  #signerName  = null
+  #signing     = false
+  #signPending = false
+
+  /**
+   * Attach a signer so every commit is automatically signed.
+   * Concurrent commits are batched: if a sign is in flight when another
+   * commit lands, one more sign runs after the current one finishes,
+   * covering all accumulated commits in a single signature.
+   *
+   * @param {import('./Signer.js').Signer} signer
+   * @param {string} name  stream name passed to signer.keysFor()
+   */
+  attachSigner (signer, name) {
+    this.#signer     = signer
+    this.#signerName = name
+  }
+
+  #scheduleSign () {
+    if (!this.#signer) return
+    if (this.#signing) { this.#signPending = true; return }
+    this.#signing = true
+    this.sign(this.#signer, this.#signerName)
+      .then(() => {
+        this.#signing = false
+        if (this.#signPending) {
+          this.#signPending = false
+          this.#scheduleSign()
+        }
+      })
+      .catch(console.error)
+  }
   /**
    * The latest commit record, or null if nothing has been committed yet.
    * Registers a reactive dependency on the commit log length.
@@ -171,6 +204,8 @@ export class Repo extends Streamo {
     const parent = parentAddr >= 0 ? parentAddr : undefined
     const dataAddress = this.copyFrom(workingStreamo, workingStreamo.byteLength - 1)
     const code = this.encode({ message, date: new Date(), dataAddress, parent })
-    return this.append(code)
+    const result = this.append(code)
+    this.#scheduleSign()
+    return result
   }
 }

package/public/streamo/StreamoComponent.js

@@ -0,0 +1,92 @@
+/**
+ * StreamoComponent — base class for hot-reloadable custom element components
+ *
+ * Two levels of component in streamo:
+ *
+ *   1. Function components — plain functions used directly as tags in h``:
+ *
+ *        function Card ({ title, children }) {
+ *          return h`<div class="card"><h2>${title}</h2>${children}</div>`
+ *        }
+ *        mount(h`<${Card} title="Hello"><p>hi</p></${Card}>`, body, recaller)
+ *
+ *      Attr values are passed as-is: reactive function attrs stay as functions,
+ *      so the component can forward them straight into its own slots.
+ *
+ *   2. Custom element components (this file) — for hot-reloading via content
+ *      addresses. Each file version gets a unique element name; stale elements
+ *      become orphans (different tag → no recycling → cleaned up automatically).
+ *
+ *      Typical pattern:
+ *
+ *        // When the address of Card.js changes in the reactive store:
+ *        const cardTag = () => {
+ *          const addr = repo.get('components.card')
+ *          if (!addr) return null
+ *          return defineComponent(componentKey('s-card', addr), ({ title }) =>
+ *            h`<div class="card"><h2>${title}</h2></div>`
+ *          )
+ *        }
+ *        mount(h`${() => { const t = cardTag(); return t && h`<${t} title="Hello"/>` }}`, body, recaller)
+ */
+
+import { Recaller } from './utils/Recaller.js'
+import { mount, dismount } from './mount.js'
+
+export class StreamoComponent extends HTMLElement {
+  #recaller
+  #root
+
+  connectedCallback () {
+    this.#recaller = new Recaller(this.localName)
+    this.#root = this.attachShadow({ mode: 'open' })
+    mount(this.render(this.#buildProps()), this.#root, this.#recaller)
+  }
+
+  disconnectedCallback () {
+    if (this.#root) {
+      dismount(this.#root, this.#recaller)
+      this.#root = null
+    }
+  }
+
+  // Override in subclasses or via defineComponent.
+  render (props) { return [] }
+
+  #buildProps () {
+    const props = {}
+    for (const { name, value } of this.attributes) props[name] = value
+    props.children = [...this.childNodes]
+    return props
+  }
+}
+
+/**
+ * Generate a valid custom element name from a prefix and a content address.
+ * The address provides uniqueness — a new address means a new element name,
+ * so stale elements are naturally orphaned without any explicit cleanup.
+ *
+ * @param {string} prefix  e.g. 's-card' (must contain a hyphen)
+ * @param {string} address hex content address from the reactive store
+ * @returns {string} e.g. 's-card-a1b2c3d4e5f6g7h8'
+ */
+export function componentKey (prefix, address) {
+  return `${prefix}-${String(address).slice(0, 16).toLowerCase()}`
+}
+
+/**
+ * Register a render function as a custom element. Safe to call multiple times
+ * with the same name — subsequent calls are no-ops.
+ *
+ * @param {string}   name      valid custom element name (must contain a hyphen)
+ * @param {Function} renderFn  (props) => virtual nodes
+ * @returns {string} the name, for use directly as a tag
+ */
+export function defineComponent (name, renderFn) {
+  if (!customElements.get(name)) {
+    customElements.define(name, class extends StreamoComponent {
+      render (props) { return renderFn(props) }
+    })
+  }
+  return name
+}

package/public/streamo/chat-cli.js

@@ -25,11 +25,12 @@ const signer = new Signer(username, password, 1)
 const { publicKey } = await signer.keysFor('chat')
 const myKey = bytesToHex(publicKey)
 
-// Fetch root key from server
+// Fetch root key from server (/api/info is the canonical endpoint)
 let rootKey
 try {
-  const res = await fetch(`http://${host}:${port}/api/chat-info`)
-  ;({ rootKey } = await res.json())
+  const res = await fetch(`http://${host}:${port}/api/info`)
+  const info = await res.json()
+  rootKey = info.primaryKeyHex ?? info.rootKey
 } catch (e) {
   console.error(`could not reach server at http://${host}:${port}: ${e.message}`)
   process.exit(1)

package/public/streamo/mount.js

@@ -21,6 +21,9 @@
 
 import { HElement, HText } from './h.js'
 
+const HTML_NS = 'http://www.w3.org/1999/xhtml'
+const SVG_NS  = 'http://www.w3.org/2000/svg'
+
 // ── Watcher cleanup registry ──────────────────────────────────────────────
 //
 // Each node tracks the watcher functions registered against it.
@@ -44,34 +47,48 @@ function cleanupNode (node, recaller) {
   for (const child of [...node.childNodes]) cleanupNode(child, recaller)
 }
 
+// Call when removing a mounted root (e.g. in disconnectedCallback of a custom element).
+export function dismount (root, recaller) {
+  cleanupNode(root, recaller)
+}
+
 /**
  * Mount an array of virtual nodes (result of h``) into `container`.
- * @param {Array} nodes
+ * @param {Array}  nodes
  * @param {Element} container
  * @param {import('./utils/Recaller.js').Recaller} recaller
+ * @param {string} [ns]  XML namespace inherited from parent (defaults to XHTML)
  */
-export function mount (nodes, container, recaller) {
+export function mount (nodes, container, recaller, ns = HTML_NS) {
   for (const node of [nodes].flat()) {
-    mountNode(node, container, recaller)
+    mountNode(node, container, recaller, ns)
   }
 }
 
-function mountNode (node, container, recaller) {
+function mountNode (node, container, recaller, ns = HTML_NS) {
   if (node == null) return
   if (Array.isArray(node)) {
-    node.forEach(n => mountNode(n, container, recaller))
+    node.forEach(n => mountNode(n, container, recaller, ns))
     return
   }
   if (node instanceof HElement) {
-    const el = document.createElementNS(
-      node.attrs.find(a => a?.name === 'xmlns')?.value ?? 'http://www.w3.org/1999/xhtml',
-      node.tag
-    )
+    if (typeof node.tag === 'function') {
+      mountNode(node.tag(buildProps(node)), container, recaller, ns)
+      return
+    }
+    // Determine this element's namespace:
+    //   xmlns attr > svg tag > foreignObject resets to HTML > inherit from parent
+    const nsAttr = node.attrs.find(a => a?.name === 'xmlns')?.value
+    const elemNs = nsAttr
+      ?? (node.tag === 'svg' ? SVG_NS
+        : node.tag === 'foreignObject' ? HTML_NS
+        : ns)
+    const el = document.createElementNS(elemNs, node.tag)
     for (const attr of node.attrs) {
       if (attr == null) continue
       applyAttr(el, attr, recaller)
     }
-    mount(node.children, el, recaller)
+    mount(node.children, el, recaller, elemNs)
     container.appendChild(el)
     return
   }
@@ -84,7 +101,7 @@ function mountNode (node, container, recaller) {
     return
   }
   if (typeof node === 'function') {
-    mountSlot(node, container, recaller)
+    mountSlot(node, container, recaller, ns)
     return
   }
   // primitive — string, number, etc.
@@ -98,7 +115,7 @@ function mountNode (node, container, recaller) {
 // elements are matched by data-key (exact) or tag (positional fallback)
 // and recycled in place. Unmatched nodes are cleaned up before removal.
 
-function mountSlot (cell, container, recaller) {
+function mountSlot (cell, container, recaller, ns = HTML_NS) {
   const start = document.createComment('')
   const end = document.createComment('')
   container.appendChild(start)
@@ -106,13 +123,13 @@ function mountSlot (cell, container, recaller) {
 
   const watcher = () => {
     const newVNodes = [cell(container)].flat(Infinity).filter(n => n != null)
-    reconcileSlot(start, end, newVNodes, recaller)
+    reconcileSlot(start, end, newVNodes, recaller, ns)
   }
   addCleanup(start, watcher)
   recaller.watch(cell.name || '(h cell)', watcher)
 }
 
-function reconcileSlot (start, end, newVNodes, recaller) {
+function reconcileSlot (start, end, newVNodes, recaller, ns = HTML_NS) {
   // Collect existing Element nodes between the anchors — only elements can be recycled
   const existingEls = []
   let node = start.nextSibling
@@ -183,7 +200,7 @@ function reconcileSlot (start, end, newVNodes, recaller) {
       end.before(recycled)
     } else {
       const frag = document.createDocumentFragment()
-      mountNode(vnode, frag, recaller)
+      mountNode(vnode, frag, recaller, ns)
       end.before(frag)
     }
   }
@@ -201,11 +218,30 @@ function patchElement (el, vnode) {
   }
 }
 
+// ── Function components ───────────────────────────────────────────────────
+//
+// When an HElement's tag is a function, call it with a props object instead
+// of creating a DOM element. Attr values are passed as-is — reactive function
+// attrs stay as functions so the component can forward them into its own slots.
+
+function buildProps (node) {
+  const props = {}
+  for (const attr of node.attrs) {
+    if (attr == null) continue
+    if (typeof attr === 'object' && attr.name) props[attr.name] = attr.value
+    else if (typeof attr === 'object') Object.assign(props, attr) // spread
+  }
+  props.children = node.children
+  return props
+}
+
 // ── Attribute cells ───────────────────────────────────────────────────────
 //
 // attr=${cell}          → cell(el), return value applied via setAttr
 // onclick=${cell}       → cell(el), return value assigned to el.onclick
 // attr="prefix-${cell}" → each fn part called with el, results joined as string
+// class=${[...]}        → falsy items filtered, truthy items joined with space
+// class=${{k:bool}}     → keys with truthy values joined with space
 
 function applyAttr (el, attr, recaller) {
   if (typeof attr === 'object' && !attr.name) {
@@ -221,12 +257,17 @@ function applyAttr (el, attr, recaller) {
     return
   }
   if (Array.isArray(value)) {
-    // mixed static/dynamic: each function part is a cell called with el
-    const watcher = () => {
-      setAttr(el, name, value.map(p => typeof p === 'function' ? p(el) : String(p ?? '')).join(''))
+    if (value.some(p => typeof p === 'function')) {
+      // Mixed static/dynamic attr from template interpolation — evaluate and concatenate
+      const watcher = () => {
+        setAttr(el, name, value.map(p => typeof p === 'function' ? p(el) : String(p ?? '')).join(''))
+      }
+      addCleanup(el, watcher)
+      recaller.watch(`attr:${name}`, watcher)
+    } else {
+      // Static array value (e.g. class list) — delegate to setAttr for normalization
+      setAttr(el, name, value)
     }
-    addCleanup(el, watcher)
-    recaller.watch(`attr:${name}`, watcher)
     return
   }
   if (value !== undefined) setAttr(el, name, value)
@@ -234,6 +275,14 @@ function applyAttr (el, attr, recaller) {
 }
 
 function setAttr (el, name, value) {
+  // Normalize class arrays and objects into a space-separated string
+  if (name === 'class') {
+    if (Array.isArray(value)) {
+      value = value.filter(Boolean).join(' ')
+    } else if (value !== null && value !== undefined && typeof value === 'object') {
+      value = Object.entries(value).filter(([, v]) => v).map(([k]) => k).join(' ')
+    }
+  }
   if (name.startsWith('on')) {
     el[name] = typeof value === 'function' ? value : null
   } else if (name === 'value' && 'value' in el) {

package/public/streamo/webSync.js

@@ -25,7 +25,7 @@ const publicDir = join(dirname(fileURLToPath(import.meta.url)), '..')
  * @param {number} port
  * @returns {Promise<import('http').Server>}
  */
-export async function webSync (registry, primaryKeyHex, port, name, keyIterations = 100000) {
+export async function webSync (registry, primaryKeyHex, port, name, keyIterations = 100000, peerOptions = {}) {
   const app = express()
 
   app.use(express.static(publicDir))
@@ -108,7 +108,7 @@ export async function webSync (registry, primaryKeyHex, port, name, keyIteration
 
   const server = createServer(app)
 
-  attachStreamSync(new WebSocketServer({ server }), registry, 'web')
+  attachStreamSync(new WebSocketServer({ server }), registry, 'web', peerOptions)
 
   await new Promise((resolve, reject) => {
     server.listen(port, err => err ? reject(err) : resolve())

package/public/streamo/chat-server.js

@@ -1,60 +0,0 @@
-#!/usr/bin/env node
-/**
- * streamo chat server
- *
- * Usage:
- *   node public/streamo/chat-server.js [port]
- *
- * Starts an HTTP + WebSocket server.  Auto-accepts any participant that
- * announces their repo key to the root chat topic.
- *
- * The root key is printed on startup — pass it to clients via the
- * /api/chat-info endpoint or by copying it into the config.
- */
-import { createServer } from 'http'
-import { WebSocketServer } from 'ws'
-import { fileURLToPath } from 'url'
-import { join, dirname } from 'path'
-import express from 'express'
-import { Signer } from './Signer.js'
-import { RepoRegistry } from './RepoRegistry.js'
-import { attachStreamSync } from './outletSync.js'
-import { bytesToHex } from './utils.js'
-
-const port = Number(process.argv[2] ?? process.env.PORT ?? 8080)
-const __dir = dirname(fileURLToPath(import.meta.url))
-
-// Derive a stable, well-known root key for this chat room.
-// Using 1 PBKDF2 iteration so startup is instant; this is fine for a demo.
-const rootSigner = new Signer('streamo-chat-room', 'streamo-chat', 1)
-const { publicKey: rootPubKey } = await rootSigner.keysFor('v1')
-const ROOT_KEY = bytesToHex(rootPubKey)
-
-const registry = new RepoRegistry()
-const rootRepo = await registry.open(ROOT_KEY)
-if (!rootRepo.get('members')) rootRepo.set({ name: 'chat-root', members: [] })
-
-// Auto-accept: when a client announces their key to the root topic, add them.
-function onAnnounce (key, topic) {
-  if (topic !== ROOT_KEY) return
-  const members = rootRepo.get('members') ?? []
-  if (!members.includes(key)) {
-    rootRepo.set({ name: 'chat-root', members: [...members, key] })
-    console.log(`[chat] new member: ${key.slice(0, 12)}…`)
-  }
-}
-
-const app = express()
-app.use(express.static(join(__dir, '../../apps/chat')))
-// Also serve public/streamo/ so the browser can import streamo modules
-app.use('/streamo', express.static(__dir))
-app.get('/api/chat-info', (_req, res) => res.json({ rootKey: ROOT_KEY }))
-
-const server = createServer(app)
-const wss = new WebSocketServer({ server })
-attachStreamSync(wss, registry, 'chat', { onAnnounce })
-
-server.listen(port, () => {
-  console.log(`chat server → http://localhost:${port}`)
-  console.log(`root key   → ${ROOT_KEY}`)
-})

package/scripts/serve.js

@@ -1,15 +0,0 @@
-#!/usr/bin/env node
-/**
- * Serve public/ as a static site.
- * Usage: node scripts/serve.js [port]
- */
-import express from 'express'
-import { fileURLToPath } from 'url'
-import { join, dirname } from 'path'
-
-const port = Number(process.argv[2] ?? process.env.PORT ?? 3000)
-const root = join(dirname(fileURLToPath(import.meta.url)), '../public')
-
-const app = express()
-app.use(express.static(root))
-app.listen(port, () => console.log(`http://localhost:${port}`))