@dtudury/streamo 0.1.0

package/README.md

@@ -0,0 +1,194 @@
+# streamo
+
+> 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.
+
+## 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.
+
+## install
+
+```bash
+npm install streamo
+```
+
+Or run the CLI directly:
+
+```bash
+npx streamo --help
+```
+
+## cli
+
+```bash
+streamo \
+  --name my-notes \
+  --username alice \
+  --files ./notes \
+  --web 8080
+```
+
+Opens `notes/` for editing, syncs every save to all connected peers, and serves a browser UI at `http://localhost:8080`. All options can come from a `.env` file:
+
+```bash
+streamo --env-file .env
+```
+
+| env var | flag | description |
+|---|---|---|
+| `STREAMO_NAME` | `--name` | dataset name |
+| `STREAMO_USERNAME` | `--username` | signing identity |
+| `STREAMO_PASSWORD` | `--password` | signing password |
+| `STREAMO_DATA_DIR` | `--data-dir` | archive directory (default `.streamo`) |
+| `STREAMO_FILES` | `--files` | mirror local files |
+| `STREAMO_WEB` | `--web` | HTTP + WebSocket server port |
+| `STREAMO_OUTLET` | `--outlet` | accept inbound peer connections |
+| `STREAMO_ORIGIN` | `--origin` | connect to a remote outlet |
+| `STREAMO_S3_BUCKET` | `--s3-bucket` | S3 bucket for replication |
+
+## 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'
+
+const store = new Streamo()
+store.set({ name: 'alice', score: 42 })
+store.get('name')   // 'alice'
+store.get('score')  // 42
+```
+
+Values are encoded with a self-describing codec (strings, numbers, dates, booleans, arrays, objects, `Uint8Array`). Same value → same bytes → same address; dedup is automatic.
+
+### Repo — signed commit log
+
+`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'
+
+const repo = new Repo()
+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
+```
+
+### Signer — deterministic identity
+
+```js
+import { Signer } from 'streamo/public/streamo/Signer.js'
+import { bytesToHex } from 'streamo/public/streamo/utils.js'
+
+const signer = new Signer('alice', 'my-password')
+const { publicKey } = await signer.keysFor('my-dataset')
+const publicKeyHex = bytesToHex(publicKey)   // stable identity for this (user, dataset) pair
+```
+
+Keys are derived with PBKDF2 so the same username + password always produces the same keypair. No key files to manage.
+
+### RepoRegistry — multi-repo store
+
+```js
+import { RepoRegistry } from 'streamo/public/streamo/RepoRegistry.js'
+import { archiveSync } from 'streamo/public/streamo/archiveSync.js'
+
+const registry = new RepoRegistry(async key => {
+  const repo = new Repo()
+  await archiveSync(repo, '.streamo', key)  // persist to disk
+  return repo
+})
+
+const repo = await registry.open(publicKeyHex)
+```
+
+### registrySync — peer sync over WebSocket
+
+```js
+import { registrySync } from 'streamo/public/streamo/registrySync.js'
+
+const session = await registrySync(registry, 'localhost', 8080, {
+  // only sync repos you care about
+  filter: key => key === rootKey,
+
+  // follow links embedded in repo data (content-driven discovery)
+  follow: (keyHex, repo, subscribe) => {
+    for (const memberKey of repo.get('members') ?? []) subscribe(memberKey)
+  },
+
+  // react to peer announcements
+  onAnnounce: key => session.subscribe(key)
+})
+
+session.interest(rootKey)        // receive announcements for this topic
+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'
+
+const recaller = new Recaller('app')
+
+mount(h`
+  <div class="card">
+    <h2>${() => repo.get('name')}</h2>
+    <p>${() => repo.get('bio')}</p>
+  </div>
+`, 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.
+
+## sync backends
+
+| module | what it does |
+|---|---|
+| `archiveSync` | persist chunks to numbered binary files under `.streamo/archive/` |
+| `fileSync` | mirror a repo's value to/from the local filesystem (respects `.gitignore`) |
+| `outletSync` | WebSocket server — accepts inbound peer connections |
+| `originSync` | WebSocket client — connects to a remote outlet |
+| `webSync` | HTTP + WebSocket server with browser-ready assets |
+| `s3Sync` | replicate chunks to S3-compatible object storage |
+| `stateFileSync` | write repo state as JSON on every change |
+
+## chat example
+
+```bash
+# start the server
+node public/streamo/chat-server.js 8080
+
+# join from the browser
+open http://localhost:8080
+
+# join from the terminal
+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.
+
+## tests
+
+```bash
+node --test                              # all tests
+node --test public/streamo/Repo.test.js  # single file
+```
+
+## roadmap
+
+See [ROADMAP.md](./ROADMAP.md) for what's been built, what's next, and what we're
+aiming at for 1.0.
+
+## license
+
+AGPL-3.0-only

package/ROADMAP.md

@@ -0,0 +1,111 @@
+# streamo roadmap
+
+This is a living document — updated with every meaningful change to give a clear
+picture of where the project is and where it's headed.
+
+---
+
+## where we are (0.1.0)
+
+The foundation is solid and working. Here's what's in:
+
+**Core data layer**
+- `Streamo` — reactive, content-addressed, append-only byte store with a
+  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.
+- `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
+  the exact paths they accessed are mutated. Efficient and precise.
+
+**Sync layer**
+- `registrySync` — bidirectional multi-repo sync over a single WebSocket. Catalog,
+  subscribe, and content-driven discovery via `follow`. Works in both Node and the
+  browser.
+- `outletSync` / `originSync` — server and client sides of a peer connection.
+- `archiveSync` — persists chunks to binary files on disk. Repos survive restarts.
+- `fileSync` — mirrors a repo's value to/from the local filesystem.
+- `s3Sync` — replicates chunks to S3-compatible object storage.
+- Ephemeral messaging layer — `interest` / `announce` for peer discovery without
+  any persistence.
+
+**UI layer**
+- `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.
+
+**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`).
+- Homepage at `public/index.html`.
+- `npm run serve` — static file server for `public/`.
+
+---
+
+## 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.
+
+### presence indicators
+Who's currently online? The `interest` / `announce` layer is ephemeral by design,
+so presence is a heartbeat + timeout — announce yourself periodically, time out
+peers you haven't heard from.
+
+### rebuild the browser app
+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.
+
+### CLAUDE.md
+Add a `CLAUDE.md` for the streamo repo so future Claude sessions have the full
+context.
+
+---
+
+## toward 1.0
+
+The three things blocking a stable `1.0` claim:
+
+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
+
+Keyed list reconciliation and refs are quality-of-life improvements that can come
+after 1.0.

package/bin/streamo.js

@@ -0,0 +1,238 @@
+#!/usr/bin/env node
+
+import { readFileSync } from 'fs'
+import { dirname } from 'path'
+import { Option, program } from 'commander'
+import { config } from 'dotenv'
+import { question, questionNewPassword } from 'readline-sync'
+import { start as startRepl } from 'repl'
+import { Signer } from '../public/streamo/Signer.js'
+import { Repo } from '../public/streamo/Repo.js'
+import { RepoRegistry } from '../public/streamo/RepoRegistry.js'
+import { archiveSync } from '../public/streamo/archiveSync.js'
+import { fileSync } from '../public/streamo/fileSync.js'
+import { outletSync } from '../public/streamo/outletSync.js'
+import { originSync } from '../public/streamo/originSync.js'
+import { webSync } from '../public/streamo/webSync.js'
+import { s3Sync } from '../public/streamo/s3Sync.js'
+import { stateFileSync } from '../public/streamo/stateFileSync.js'
+
+const { version } = JSON.parse(readFileSync(new URL('../package.json', import.meta.url)))
+
+program
+  .name('streamo')
+  .description('streamo CLI')
+  .version(version)
+
+  .addOption(
+    new Option('--env-file <path>', 'path to .env file')
+  )
+  .addOption(
+    new Option('--name <string>', 'name for this dataset')
+      .env('STREAMO_NAME')
+  )
+  .addOption(
+    new Option('--username <string>', 'username for signing')
+      .env('STREAMO_USERNAME')
+  )
+  .addOption(
+    new Option('--password <string>', 'password for signing')
+      .env('STREAMO_PASSWORD')
+  )
+  .addOption(
+    new Option('--data-dir <path>', 'directory for archive files')
+      .env('STREAMO_DATA_DIR')
+      .default('.streamo')
+  )
+  .addOption(
+    new Option('--files [path]', 'mirror local files to/from streamo (defaults to current directory)')
+      .env('STREAMO_FILES')
+      .preset('.')
+  )
+  .addOption(
+    new Option('--state-file <path>', 'write streamo state as JSON to this file on every change')
+      .env('STREAMO_STATE_FILE')
+  )
+  .addOption(
+    new Option('--s3-bucket <name>', 'S3 bucket name')
+      .env('STREAMO_S3_BUCKET')
+  )
+  .addOption(
+    new Option('--s3-endpoint <url>', 'S3-compatible endpoint (omit for AWS)')
+      .env('STREAMO_S3_ENDPOINT')
+  )
+  .addOption(
+    new Option('--s3-region <region>', 'S3 region')
+      .env('STREAMO_S3_REGION')
+  )
+  .addOption(
+    new Option('--s3-access-key-id <id>', 'S3 access key ID')
+      .env('STREAMO_S3_ACCESS_KEY_ID')
+  )
+  .addOption(
+    new Option('--s3-secret-access-key <key>', 'S3 secret access key')
+      .env('STREAMO_S3_SECRET_ACCESS_KEY')
+  )
+  .addOption(
+    new Option('--web [port]', 'start HTTP + WebSocket server for browsers and peers')
+      .env('STREAMO_WEB')
+      .preset('8080')
+  )
+  .addOption(
+    new Option('--outlet [port]', 'accept inbound WebSocket peer connections')
+      .env('STREAMO_OUTLET')
+      .preset('1024')
+  )
+  .addOption(
+    new Option('--origin <host:port>', 'connect to a remote outlet')
+      .env('STREAMO_ORIGIN')
+  )
+  .addOption(
+    new Option('--interactive', 'start a REPL with streamo, signer, and helpers as globals')
+      .env('STREAMO_INTERACTIVE')
+  )
+  .addOption(
+    new Option('--key-iterations <number>', 'PBKDF2 iterations for key derivation (lower = faster startup, less secure)')
+      .env('STREAMO_KEY_ITERATIONS')
+      .default(100000)
+      .argParser(Number)
+  )
+  .addOption(
+    new Option('--verbose', 'enable verbose logging')
+      .env('STREAMO_VERBOSE')
+  )
+
+  .parse()
+
+const options = program.opts()
+
+if (options.envFile) {
+  config({ path: options.envFile })
+  program.parse()
+  Object.assign(options, program.opts())
+}
+
+options.name ||= question('Name: ')
+options.username ||= question('Username: ')
+const password = options.password || questionNewPassword('Password [ATTENTION!: Backspace won\'t work here]: ', { min: 4, max: 999 })
+
+const signer = new Signer(options.username, password, options.keyIterations)
+const { publicKey } = await signer.keysFor(options.name)
+const publicKeyHex = Array.from(publicKey).map(b => b.toString(16).padStart(2, '0')).join('')
+
+const name = options.name
+const username = options.username
+const appPath = options.envFile
+  ? '/' + dirname(options.envFile).replace(/^public\//, '') + '/'
+  : '/'
+const webUrl = options.web ? `http://localhost:${+options.web}${appPath}` : null
+const rows = [
+  ['NAME', name],
+  ['USERNAME', username],
+  ['PUBLIC KEY', publicKeyHex],
+  ...(webUrl ? [['URL', webUrl]] : []),
+]
+const maxLength = Math.max(...rows.map(([, v]) => v.length))
+const pad = (v) => v + ' '.repeat(maxLength - v.length)
+const div = '─'.repeat(maxLength)
+const label = (l) => l.padStart(16)
+console.log(`\x1b[35m
+    ╭${'─'.repeat(maxLength + 23)}╮
+    ╞══════════════════╤══${'═'.repeat(maxLength)}══╡
+${rows.map(([l, v], i) => [
+  `    │ ${label(l + ':')} │  \x1b[0m${pad(v)}\x1b[35m  │`,
+  i < rows.length - 1 ? `    ├──────────────────┼──${div}──┤` : null
+].filter(Boolean).join('\n')).join('\n')}
+    ╰──────────────────┴──${'━'.repeat(maxLength)}──╯\x1b[0m`)
+
+const dataDir = options.dataDir
+const registry = new RepoRegistry(async key => {
+  const repo = new Repo()
+  await archiveSync(repo, dataDir, key)
+  return repo
+})
+const streamo = await registry.open(publicKeyHex)
+
+if (options.files) {
+  const folder = typeof options.files === 'string' ? options.files : '.'
+  await fileSync(streamo, folder, options.dataDir)
+  console.log(`\x1b[32mmirroring files: ${folder}\x1b[0m`)
+}
+
+if (options.stateFile) {
+  stateFileSync(streamo, options.stateFile)
+  console.log(`\x1b[32mstate file: ${options.stateFile}\x1b[0m`)
+}
+
+if (options.s3Bucket) {
+  await s3Sync(streamo, publicKeyHex, {
+    bucket: options.s3Bucket,
+    endpoint: options.s3Endpoint,
+    region: options.s3Region,
+    accessKeyId: options.s3AccessKeyId,
+    secretAccessKey: options.s3SecretAccessKey
+  })
+  console.log(`\x1b[32ms3: syncing to bucket ${options.s3Bucket}\x1b[0m`)
+}
+
+if (options.web) {
+  await webSync(registry, publicKeyHex, +options.web, name, options.keyIterations)
+}
+
+if (options.outlet) {
+  const port = +options.outlet
+  outletSync(registry, port)
+  console.log(`\x1b[32moutlet: listening on port ${port}\x1b[0m`)
+}
+
+if (options.origin) {
+  const [host, port] = options.origin.split(':')
+  await originSync(streamo, publicKeyHex, host, +port)
+  console.log(`\x1b[32morigin: connected to ${options.origin}\x1b[0m`)
+}
+
+if (options.verbose) {
+  console.log(`archive: ${options.dataDir}/${publicKeyHex}.bin (${streamo.byteLength} bytes loaded)`)
+  console.log({ options })
+}
+
+if (options.interactive) {
+  const get = (...args) => streamo.get(...args)
+  const set = (...args) => streamo.set(...args)
+  const ls = () => [...registry].map(([k, s]) => ({ key: k.slice(0, 8) + '…', bytes: s.byteLength }))
+  const connect = (hostPort) => {
+    const [host, port] = hostPort.split(':')
+    return originSync(streamo, publicKeyHex, host, +port)
+  }
+
+  Object.assign(globalThis, {
+    // identity
+    name, username, publicKeyHex, signer,
+    // data
+    streamo, registry,
+    // shorthands
+    get, set, ls,
+    // networking
+    connect, originSync, outletSync,
+    // sync modules
+    archiveSync, fileSync, s3Sync,
+    // class
+    Repo, RepoRegistry,
+  })
+
+  console.log(`\x1b[36m
+  get(...path)          streamo.get() — read a value by path
+  set(value)            streamo.set() — write a value
+  ls()                  list all open streamos in the registry
+  connect('host:port')  connect this streamo to a remote outlet
+  streamo / registry    the live streamo and registry instances
+  signer                sign / verify data
+  originSync(s,k,h,p)   attach any streamo as an origin
+  outletSync(reg,port)  start a new outlet server\x1b[0m`)
+
+  const replServer = startRepl({ breakEvalOnSigint: true })
+  replServer.setupHistory('.node_repl_history', err => {
+    if (err) console.error(err)
+  })
+  replServer.on('exit', process.exit)
+}

package/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "checkJs": false
+  },
+  "exclude": ["node_modules"]
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@dtudury/streamo",
+  "version": "0.1.0",
+  "description": "content-addressed p2p sync",
+  "repository": "git@github.com:dtudury/streamo.git",
+  "author": "David Tudury <david.tudury@gmail.com>",
+  "license": "AGPL-3.0-only",
+  "bin": {
+    "streamo": "./bin/streamo.js"
+  },
+  "type": "module",
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.958.0",
+    "@gerhobbelt/gitignore-parser": "^0.2.0-9",
+    "@parcel/watcher": "^2.5.1",
+    "commander": "^14.0.2",
+    "dotenv": "^17.2.3",
+    "express": "^5.2.1",
+    "mkcert": "^3.2.0",
+    "readline-sync": "^1.4.10",
+    "ws": "^8.18.3"
+  },
+  "scripts": {
+    "serve": "node scripts/serve.js"
+  }
+}

package/public/apps/chat/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>streamo chat</title>
+  <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 }
+    body { background: var(--bg); height: 100dvh; display: flex; align-items: center; justify-content: center }
+
+    /* 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 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 }
+    #status { font-size: .8rem; color: #666; min-height: 1.2em }
+
+    /* Chat */
+    #chat { display: none; flex-direction: column; width: min(600px, 100vw); height: 100dvh; background: var(--surface) }
+    #chat-header { padding: .75rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .95rem; display: flex; gap: .5rem; align-items: center }
+    #chat-header span { font-size: .75rem; font-weight: 400; color: #888 }
+    #messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem }
+    .msg { max-width: 75%; padding: .5rem .75rem; border-radius: 10px; line-height: 1.4; word-break: break-word }
+    .msg.mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 3px }
+    .msg.theirs { align-self: flex-start; background: #f0f0f0; border-bottom-left-radius: 3px }
+    .msg .sender { font-size: .7rem; font-weight: 600; margin-bottom: .2rem; opacity: .7 }
+    .msg .text { font-size: .95rem }
+    .msg .time { font-size: .65rem; opacity: .5; margin-top: .2rem; text-align: right }
+    #input-row { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border) }
+    #msg-input { flex: 1; border: 1px solid var(--border); border-radius: 20px; padding: .5rem 1rem; font-size: .95rem; outline: none }
+    #msg-input:focus { border-color: var(--accent) }
+    #send-btn { background: var(--accent); color: #fff; border: none; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 1.1rem; flex-shrink: 0 }
+    #send-btn:hover { opacity: .85 }
+  </style>
+</head>
+<body>
+
+<div id="login">
+  <h1>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>
+  <div id="status"></div>
+</div>
+
+<div id="chat">
+  <div id="chat-header">
+    streamo chat <span id="my-name"></span>
+  </div>
+  <div id="messages"></div>
+  <div id="input-row">
+    <input id="msg-input" placeholder="message…" autocomplete="off">
+    <button id="send-btn">↑</button>
+  </div>
+</div>
+
+<script type="module" src="./main.js"></script>
+</body>
+</html>