fix: grid algorithm — 4:3 breakpoint, 16:9 cap, uniform tile sizes

- Lower landscape breakpoint from width>height to width/height>=4:3
- fitTile helper caps tiles at 16:9 and shrinks to fit both dimensions,
  preventing overflow on ultrawide containers
- Mixed candidate uses uniform tile sizes for all rows; partial rows
  are centered with the same tile dimensions as full rows

e2e/ARCHITECTURE.md

@@ -0,0 +1,303 @@
+# E2E architecture
+
+Flotilla's end-to-end suite runs the real app against a relay network that is entirely under the
+test's control. Nothing in this directory may ever open a connection to a host the test did not
+create. That is the single invariant everything else is arranged around.
+
+## The relay
+
+Every spec runs against a real [zooid](https://github.com/coracle-social/zooid) relay in Docker, the
+implementation Flotilla is built for, so protocol drift between the client's assumptions and a real
+relay shows up as a failing test.
+
+zooid is multi-tenant: it binds a config to a `Host` header and serves any number of virtual relays
+from one process. `harness/zooid/config.ts` names them, one toml apiece in `harness/zooid/docker/`,
+and a scenario picks one by name. A second space costs a config file and no extra process, which is
+what keeps outbox routing and cross-space isolation testable.
+
+A relay's policy is its toml and nothing else. A scenario says what is _on_ a relay — its rooms, its
+members, its messages — never what the relay _is_, so there is no policy negotiation anywhere in the
+harness.
+
+### Why the relays are called `<name>.test`
+
+The container listens on plaintext loopback, but a url that is local or insecure is dropped from
+every relay selection unless the caller opts in — see `isLocalUrl` and `RelaySelection.getUrls` in
+`@welshman/util` — and Flotilla never opts in, since in production neither belongs in a routing
+decision. Handed `ws://localhost:3334/`, the client would load a space by its explicit url and
+resolve nothing else: no outbox loads for profiles or relay lists, no relay hints.
+
+So the client is given `wss://space.test/` and never learns the container has an address. Everything
+that speaks to it goes through `zooid/transport.ts`, which dials `127.0.0.1:3334` carrying the two
+headers a TLS terminator adds in front of a real deployment:
+
+- `Host: space.test` — zooid's dispatcher binds a config to a Host (`cmd/relay/main.go`), so this is
+  what selects which toml answers.
+- `X-Forwarded-Proto: https` — khatru derives the url it checks NIP-42 and NIP-86 signatures against
+  from Host plus this (`getBaseURL` in `khatru/relay.go`), arriving at `wss://space.test/`, which is
+  exactly what the client signed into its `relay` tag. Seeding signs the same url, so a fixture is
+  written over the same relay the app talks to.
+
+`.test` is reserved by RFC 2606 and resolves nowhere, so a url that ever escapes this process fails
+to connect rather than reaching a host.
+
+## Transport: one interception point
+
+All relay traffic is intercepted in the **Node** process via Playwright's `routeWebSocket`, applied
+to the `BrowserContext` so every page in it is covered:
+
+```
+browser context ──▶ context.routeWebSocket(everything but vite's hmr socket)
+                          │
+                          ▼
+                  zooid.relays.get(url)
+                          │
+        ┌─────────────────┴─────────────────┐
+        │                                   │
+  a socket this process opens         unknown url: a relay that
+  to the container, as that           holds no events, and the
+  relay's virtual host                url is recorded as a leak
+```
+
+Every socket the browser opens is terminated here, in this process, and the only one that leaves it
+is the loopback connection `zooid/transport.ts` makes to the container the test started.
+`assertNoLeaks()` fails a test that touched a url the scenario never declared.
+
+Interception is installed by `as()`, on a context it creates, so a page that came from anywhere else
+has none of it. Playwright's own `context` fixture — and the `page` fixture built on it — is
+therefore overridden to throw, so a spec written the ordinary way fails immediately with a message
+saying so rather than quietly dialling the relays in `.env`. The built-in `request` fixture goes the
+same way: an `APIRequestContext` is an http client in the node process that belongs to no browser
+context, so the block-all below cannot see it and nothing records what it sent.
+
+`playwright` is the one fixture left alone, and it has to be: it is where the run's own browser comes
+from, so every test would fail if it threw. A spec that goes around `as()` through
+`playwright.request` or `playwright.chromium.launch()` reaches the network unwatched, and no fixture
+can refuse that without refusing the suite.
+
+Interception in Node rather than in the page is what makes multi-user testing work. Three browser
+contexts logged in as three different users all dispatch into the _same_ relay, so one user
+genuinely observes another user's writes, over the wire, through the client's real socket stack.
+
+### Why not an `AdapterFactory`
+
+The obvious alternative — `new App({getAdapter})` returning a `Repository`-backed adapter — cannot
+test authentication. NIP-42 lives on `Socket`: `AuthState` listens to `SocketEvent.Receiving`/
+`Sending`, and `socketPolicyAuthBuffer` replays messages that were rejected with `auth-required:`.
+An `AbstractAdapter` whose `sockets` getter returns `[]` never constructs any of that. Patching the
+transport instead leaves `Pool → Socket → SocketAdapter` untouched, so auth, message buffering,
+replay-after-auth and reconnect are all exercised as written.
+
+## HTTP
+
+Relays are not the only egress. `installHttpRoutes` routes every url that is not the dev server — a
+predicate rather than a `"**/*"` pattern, so the hundreds of module requests a sveltekit page makes
+in dev are never even matched — and aborts what it catches. Two origins get past it: the dev server
+on `localhost:1847`, which is left unrouted, and each relay's own origin, which is forwarded to the
+container by the same transport carrying the same two headers, so the NIP-11 document and the NIP-86
+management API the app reads are the real relay's answers, signed against the url the client used.
+Every other request is aborted and recorded.
+
+A relay's NIP-11 document decides whether a space is synced by reconciliation or a plain REQ
+(NIP-77), whether a message the UI composes carries a protected `-` tag (NIP-70), what the space is
+called, and which pubkey room state is trusted from. Its NIP-86 answers decide whether the user is an
+admin, since a relay refuses management calls from anyone else and the method list that comes back
+doubles as the client's permission set — the space, room, event and pin menus, the directory and the
+library are all gated on it.
+
+Services the app talks to are then mocked back in per-scenario, so a blocked request is always a bug
+rather than ambient noise: Dufflepud (`dufflepud.coracle.social`), Blossom uploads, the push server
+(`nps.flotilla.social`), the hosting API, LiveKit token endpoints, and image/thumbnail fetches. The
+analytics script hard-coded in `src/app.html` is mocked with an empty body: it is requested on every
+navigation whatever the scenario is doing, so leaving it to the block-all would make
+`assertNoBlockedRequests()` a statement about the page shell rather than about the test.
+
+## Containment
+
+A browser has a fixed set of ways to put bytes on a wire.
+
+| how the app can reach the network                                   | what stops it                                                                                                                                                  |
+| ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `WebSocket` — `@welshman/net`'s `Socket`, the only constructor call | `context.routeWebSocket(url => !isDevServerUrl(url))`. Terminated in node; an undeclared url gets a relay holding nothing and `assertNoLeaks()` fails the test |
+| `fetch` / `XMLHttpRequest` — app code, welshman, `@pomade/core`     | `context.route(url => !isDevServerUrl(url))`, which aborts unless a mock registered later answers first                                                        |
+| `img`, `script`, `link`, fonts, media, and every other subresource  | the same route. Images never reach it — `mockImages` answers anything with `resourceType() === "image"` with a 1×1 png                                         |
+| navigation, including the external links the ui offers              | the same route: a document request is routed like any other, and a popup opens in the context that owns it                                                     |
+| `EventSource`                                                       | the same route. Neither `src` nor welshman constructs one                                                                                                      |
+| `navigator.sendBeacon`                                              | no call site. The one script that would use it is the plausible tag in `src/app.html`, served with an empty body                                               |
+| a service worker                                                    | `serviceWorkers: "block"` on the context. Playwright does not route a worker's requests, so the worker is refused instead                                      |
+| a web worker                                                        | no call site in `src`; `@pomade/core`'s is argon2, which is cpu and no socket                                                                                  |
+| Capacitor's native http and push plugins                            | not reachable from a browser, and the zooid config leaves `[push]` disabled so nothing is asked to register                                                    |
+
+Two connections leave this process, both to something the test started: the browser's to the vite dev
+server on `localhost:1847`, and `zooid/transport.ts`'s to `127.0.0.1:3334`. Everything else the app
+initiates dies in node.
+
+The two ends are enforced differently. A websocket to a url no scenario declared is answered rather
+than refused — by a relay that EOSEs every REQ and accepts every event into the void — and the url is
+recorded, so the test fails on `assertNoLeaks()` naming it rather than on a timeout somewhere
+downstream. An http request nothing mocked is aborted outright, but noticing it is opt-in:
+`assertNoBlockedRequests()` is for a spec that has mocked what it exercises, because some of what a
+page asks for is meant to be refused.
+
+Configuration is the other half. `boot()` overrides every `VITE_` value that names a relay — default,
+indexer, search, messaging, signer, platform, blocked, the default space list — with the scenario's
+own urls, through the hook `src/app/env.ts` reads them with, and points `VITE_PUSH_BRIDGE` at `ws://localhost:1/`, which nothing serves, so a push
+bridge connection is reported as a leak rather than blending into a relay's traffic. The `VITE_`
+values it does not override still name real hosts — the blossom server, the pomade signers, the
+thumbnail service, the push server, the hosting api — and none of them is contacted at boot. Blossom
+is read only when an upload starts, the thumbnail url only on android, pomade only when a signup uses
+it, and the hosting api and dufflepud are mocked. They are contained by the block-all rather than by
+configuration, which is the weaker of the two guarantees.
+
+Grepping the repo for hostnames accounts for all of them, and there are only three kinds. Most are an
+`href` in help text — nostr.com, nostrapps.com, nsec.app, nosta.me, nostr.how, github.com,
+fountain.fm, cal.com, figma.com, coracle.tools, gitea.coracle.social, nwc.getalby.com, and the
+`coracle.social` entity links `src/app/env.ts` builds — reachable only by clicking, and routed if
+clicked. Two are fetched: dufflepud, whose origin is the one service url hard-coded rather than read
+from `VITE_`, and the plausible tag in `src/app.html`. Both are mocked. The rest are in comments.
+Under `e2e` the only hostnames are the four service origins `net/http.ts` matches on, the virtual
+relays' own `.test` names, and the loopback address `zooid/transport.ts` dials.
+
+Three things this does not cover:
+
+- **WebRTC.** `livekit-client` opens an `RTCPeerConnection`, and Playwright cannot see one. A voice
+  or video room reaches its sfu over ice and dtls with nothing in between. `mockLivekit` decides
+  where the client is pointed, which is why its `serverUrl` has to be something the test owns, and
+  why `[livekit]` is omitted from the zooid config entirely. A spec that joins a call escapes this
+  document's guarantee and needs its own answer.
+- **Playwright's own fixtures.** `context`, `page` and `request` are overridden to throw, but
+  `playwright` cannot be — it is where the browser comes from. A spec that reaches the network
+  through `playwright.request` or `playwright.chromium.launch()` is unwatched.
+- **The browser itself.** A browser's own traffic is not the app's and is not routed. Playwright
+  launches chromium with `--disable-background-networking`, `--disable-component-update` and
+  `--disable-breakpad`, which is the whole of the mitigation, and which is chromium's alone —
+  `E2E_BROWSER=firefox` or `webkit` runs the suite under an engine those flags say nothing about.
+
+## Determinism without freezing the clock
+
+Timestamps are never patched. Instead every fixture is generated fresh at the start of each test and
+signed with timestamps relative to the moment the test began:
+
+```ts
+const scenario = await seed(({relay, user, at}) => {
+  const space = relay("space")
+  space.room("general", {name: "General"})
+  space.join(user.alice, "general")
+  space.join(user.bob, "general")
+  space.message(user.alice, "general", "morning all", at(2, HOUR))
+  space.message(user.bob, "general", "morning!", at(90, MINUTE))
+})
+```
+
+`at(2, HOUR)` is `now() - int(2, HOUR)` evaluated once per test, so "2 hours ago" renders the same
+way on every run without the app's `now()` being touched. Fixtures are published over a real socket,
+authenticated as the identity that signed them, so the relay stores exactly what it would have stored
+for a real client: there are no pre-signed JSON blobs to drift out of date, and a fixture the relay
+would have refused fails the test instead of appearing in a query.
+
+## Users and sessions
+
+Test identities are deterministic secp256k1 keypairs derived from fixed secrets (`alice`, `bob`,
+`carol`, `admin`), so a pubkey is stable across runs and can be asserted on directly.
+
+A logged-in user is created by injecting a NIP-01 session before the app boots. `src/app/session.ts`
+carries a DEV-only hook: `restoreSession()` prefers `window.__TEST_SESSION__` when it is present, and
+`window.__TEST_EVENTS__` becomes the repository contents a returning user's client would have found
+on disk. Both branches are stripped from production builds, and injecting through the hook avoids
+writing Capacitor's `SecureStorage`/`Preferences` localStorage encoding by hand.
+
+The injected events go in _after_ `storage.ready`. Storage loads what the last session left behind
+with `Repository.load`, which clears the repository before inserting, so anything put there while
+IndexedDB is still opening is wiped a few milliseconds later — before the layout has rendered
+anything, and long before `authPolicy` reads the room list to decide whether to answer a relay's AUTH
+challenge.
+
+The cache exists for the harness rather than for the app. In production the client bootstraps itself:
+asking a keyed collection for a pubkey loads it, so `authPolicy` reading the user's room and relay
+lists to decide whether to answer a challenge is itself what fetches them, as is any outbox-routed
+load of the user's own data. Kind-10002 comes back from the public indexers, and `syncRelayList`
+cascades into the room list from there.
+
+Here the indexers _are_ the scenario's relays, because `boot()` points every relay list at them, and
+those are members-only — so that first load is refused with `auth-required:`, while `authPolicy`,
+conservative by default, will not sign for a url no list has named yet. Each waits on the other. The
+injected room list breaks the circle, and it is what a user who joined a space through the UI would
+have on disk anyway.
+
+The price is that no spec exercises the bootstrap: every one of them starts already knowing which
+relays it belongs to, so a regression in the chain from relay list to room list, or in `authPolicy`'s
+conservative gate, leaves the suite green. Covering it needs a scenario with a public relay standing
+in for an indexer.
+
+Each user is a separate `BrowserContext`, which also gives each one its own IndexedDB and
+localStorage, so nothing bleeds between users.
+
+## Layout
+
+```
+e2e/
+  ARCHITECTURE.md          this document
+  harness/
+    index.ts               everything a spec imports: `test`, `expect`, helpers
+    keys.ts                deterministic keypairs
+    zooid/
+      config.ts            the virtual relays and their hosts — the one place they are named
+      relay.ts             docker lifecycle, reset, seeding over its own authenticated socket
+      transport.ts         the only thing that knows the container's address: ws and http to it
+      testRelay.ts         the seeding affordances a scenario builds on
+      types.ts             TestRelay, RoomOptions, RelayConnection
+      docker/
+        compose.yaml       no data volume; tmpfs for /app/data and /app/media
+        config/            one toml per virtual relay: its host, and its whole policy
+    net/
+      websocket.ts         routeWebSocket install, dispatch, transcript, leak detection
+      http.ts              block-all + per-service mocks
+    app/
+      boot.ts              env overrides, navigate, wait for mount and for the app to have read
+                           the overrides
+      session.ts           NIP-01 session injection
+    seed/
+      scenario.ts          the `seed()` builder and relative-time helpers
+      space.ts             one space's fixtures: rooms, members, messages, replies, profiles
+  specs/
+    *.spec.ts
+```
+
+One piece lives outside this directory: `src/lib/test/session.ts` holds the two window keys and the
+getters `src/app/session.ts` reads them through. It is the only file the app ships on the harness's
+behalf, and `harness/app/session.ts` duplicates the key names rather than importing them, since
+importing anything under `src` would pull sveltekit into the node process.
+
+## Resetting between tests
+
+`Zooid.reset()` recreates the container rather than restarting it: with no volume mounted for
+`/app/data`, storage lives in the container's writable layer and a tmpfs, so a fresh container is a
+fresh database. The configs are bind-mounted read-only and survive, so every test starts against the
+same relays with nothing in them. The container is a worker fixture, so the docker start-up cost is
+paid once per worker rather than once per test.
+
+Seeding then writes over a real authenticated socket, one per identity per relay, held open for the
+rest of the test. A fixture must therefore be signed by one of the identities in `harness/keys.ts`,
+since zooid authenticates every write.
+
+## Running
+
+The suite is not run by agents (see CLAUDE.md).
+
+```sh
+pnpm exec playwright install                          # once
+docker pull gitea.coracle.social/coracle/zooid:latest # once; the harness never pulls
+pnpm test                                             # starts and stops the container itself
+```
+
+Every test skips when docker is unavailable, rather than failing.
+
+One engine per run rather than a project per engine: these specs exercise sockets, auth and sync, so
+a third copy of each buys much less than it costs. `E2E_BROWSER=webkit pnpm test` runs the whole
+suite under another one. The container listens on a fixed port and cannot be sharded, which is why
+`workers` is 1.
+
+`src/app/env.ts` resolves every `VITE_` value through a DEV-only hook that prefers
+`window.__TEST_ENV__`, which `boot()` injects per browser context, so any dev server will do and a
+server already listening on `:1847` is reused. `boot()` still checks that the app read the injected
+values, and fails naming the hook rather than letting a run drift onto the relays in `.env`.

e2e/harness/app/boot.ts

@@ -0,0 +1,96 @@
+import type {BrowserContext} from "@playwright/test"
+import {MINUTE, int, ms} from "@welshman/lib"
+import type {TrustedEvent} from "@welshman/util"
+import type {TestUser} from "../keys"
+import {injectEvents, injectSession} from "./session"
+
+// Must match TEST_ENV_KEY in src/lib/test/env.ts.
+const TEST_ENV_KEY = "__TEST_ENV__"
+
+// Set the first time the app reads a value out of the injected env, which is this side's only
+// evidence that the hook in src/app/env.ts ran at all.
+const TEST_ENV_READ_KEY = "__TEST_ENV_READ__"
+
+export type BootOptions = {
+  // Every relay list the app reads at startup is pointed here, so the urls it dials on its own
+  // initiative can only ever be relays the scenario created.
+  relays: string[]
+  spaces?: string[]
+  user?: TestUser
+  // What this user's client already has in local storage, e.g. their room list.
+  events?: TrustedEvent[]
+  path?: string
+}
+
+export const boot = async (
+  context: BrowserContext,
+  {relays, spaces = [], user, events = [], path = "/"}: BootOptions,
+) => {
+  const urls = relays.join(",")
+
+  await context.addInitScript(
+    ([key, readKey, env]) => {
+      Object.assign(window, {
+        [key]: new Proxy(env, {
+          get(target, prop) {
+            Object.assign(window, {[readKey]: true})
+
+            return Reflect.get(target, prop)
+          },
+        }),
+      })
+    },
+    [
+      TEST_ENV_KEY,
+      TEST_ENV_READ_KEY,
+      {
+        VITE_DEFAULT_RELAYS: urls,
+        VITE_INDEXER_RELAYS: urls,
+        VITE_DEFAULT_SEARCH_RELAYS: urls,
+        VITE_DEFAULT_MESSAGING_RELAYS: urls,
+        VITE_SIGNER_RELAYS: urls,
+        VITE_DEFAULT_SPACES: spaces.join(","),
+        VITE_PLATFORM_RELAYS: "",
+        VITE_BLOCKED_RELAYS: "",
+        // Nothing serves this url, so a push bridge connection is reported as a leak instead of
+        // blending into the traffic of a relay the scenario did create.
+        VITE_PUSH_BRIDGE: "ws://localhost:1/",
+      },
+    ] as const,
+  )
+
+  if (user) {
+    await injectSession(context, user)
+    await injectEvents(context, events)
+  }
+
+  const page = await context.newPage()
+
+  await page.goto(path)
+
+  // The root layout renders nothing until its async setup block resolves, so the shell appearing
+  // is the first point at which the app is really running. With a session injected, wait for the
+  // signed-in nav instead — one the app rejected renders the landing dialog, and failing on that
+  // here is much easier to read than the assertions it would break later.
+  await page
+    .locator(user ? ".primary-nav" : ".fl")
+    .waitFor({state: "attached", timeout: ms(int(1, MINUTE))})
+
+  // src/app/env.ts reads every VITE_ value as it is imported, so by now the app has either resolved
+  // them against the env above or against .env's real relays — which would otherwise surface as
+  // every assertion in the suite timing out.
+  const usedTestEnv = await page.evaluate(
+    key => Boolean(Reflect.get(window, key)),
+    TEST_ENV_READ_KEY,
+  )
+
+  if (!usedTestEnv) {
+    throw new Error(
+      "The app read none of its VITE_ values from the harness, so it is pointed at the relays in " +
+        ".env rather than at this scenario's. Check that src/app/env.ts still resolves them " +
+        "through maybeGetTestEnv, and that the dev server is running in dev mode.",
+    )
+  }
+
+  return page
+}

e2e/harness/app/session.ts

@@ -0,0 +1,30 @@
+import type {BrowserContext} from "@playwright/test"
+import type {TrustedEvent} from "@welshman/util"
+import type {TestUser} from "../keys"
+
+// Must match TEST_SESSION_KEY and TEST_EVENTS_KEY in src/lib/test/session.ts.
+const TEST_SESSION_KEY = "__TEST_SESSION__"
+
+const TEST_EVENTS_KEY = "__TEST_EVENTS__"
+
+// A nip01 session in the {method, data} shape @welshman/app's session handlers deserialize, so
+// restoreSession can build a signer from it without any of the storage encoding a real login
+// would have gone through. addInitScript runs before any page script, so this must be called
+// before navigating, and it is installed on the context so every page in it boots as this user.
+export const injectSession = (context: BrowserContext, user: TestUser) =>
+  context.addInitScript(
+    ([key, session]) => {
+      Object.assign(window, {[key]: session})
+    },
+    [TEST_SESSION_KEY, {method: "nip01", data: {secret: user.secret}}] as const,
+  )
+
+// The repository contents the app loads once the injected session is restored — the local cache
+// a user who had used the app before would boot with.
+export const injectEvents = (context: BrowserContext, events: TrustedEvent[]) =>
+  context.addInitScript(
+    ([key, value]) => {
+      Object.assign(window, {[key]: value})
+    },
+    [TEST_EVENTS_KEY, events] as const,
+  )

e2e/harness/index.ts

@@ -0,0 +1,165 @@
+import {test as base, expect} from "@playwright/test"
+import type {BrowserContext, BrowserContextOptions, Page} from "@playwright/test"
+import type {Maybe, MaybeAsync} from "@welshman/lib"
+import {normalizeRelayUrl} from "@welshman/util"
+import {Zooid, describeDockerProblem} from "./zooid/relay"
+import {
+  installHttpRoutes,
+  mockAnalytics,
+  mockDufflepud,
+  mockHosting,
+  mockImages,
+  mockPushServer,
+} from "./net/http"
+import {assertNoLeaks, installWebSocketRoutes} from "./net/websocket"
+import {boot} from "./app/boot"
+import {seed} from "./seed/scenario"
+import type {Scenario, SeedTools} from "./seed/scenario"
+import type {TestUser} from "./keys"
+
+export {expect}
+export {users} from "./keys"
+export type {TestUser} from "./keys"
+export type {Scenario} from "./seed/scenario"
+export type {SeededSpace} from "./seed/space"
+export type {TenantName} from "./zooid/config"
+export type {TranscriptEntry} from "./net/websocket"
+export {formatTranscript, getTranscript} from "./net/websocket"
+export {assertNoBlockedRequests, mockBlossom, mockLivekit} from "./net/http"
+
+// Mirrors encodeRelay in src/app/relays.ts, which can't be imported here — it reaches the app's
+// module graph, and with it sveltekit.
+const encodeRelay = (url: string) =>
+  encodeURIComponent(
+    normalizeRelayUrl(url)
+      .replace(/^wss:\/\//, "")
+      .replace(/\/$/, ""),
+  )
+
+export const spacePath = (url: string) => `/spaces/${encodeRelay(url)}`
+
+export const roomPath = (url: string, h: string) => `${spacePath(url)}/${h}`
+
+export type Harness = {
+  zooid: Zooid
+  seed(build: (tools: SeedTools) => MaybeAsync<void>): Promise<Scenario>
+  // A logged-in page for a user: its own browser context, its own storage, its own sockets into
+  // the relays every other user is talking to. `options` overrides the project's context options,
+  // for a spec that needs a viewport or colour scheme of its own.
+  as(user: TestUser, path?: string, options?: BrowserContextOptions): Promise<Page>
+}
+
+export type HarnessFixtures = {
+  harness: Harness
+  seed: Harness["seed"]
+  as: Harness["as"]
+}
+
+export type HarnessWorkerFixtures = {
+  zooid: Zooid
+}
+
+export const test = base.extend<HarnessFixtures, HarnessWorkerFixtures>({
+  // Playwright's own context — and the `page` fixture built on it — is unrouted: no websocket
+  // interception, no http block-all, no injected env, and nothing collecting leaks from it. A page
+  // born there boots the app against the relays baked into .env, which is the one thing this suite
+  // exists to prevent, so it is refused outright and `as()` is the only way to get a page.
+  context: async () => {
+    throw new Error(
+      "The built-in `context` and `page` fixtures reach the real network. Open a page with the " +
+        "harness's `as(user, path)` fixture, which installs interception before it navigates.",
+    )
+  },
+  // Playwright builds this one with `playwright.request.newContext()`, so it is an http client in
+  // this process that belongs to no browser context: `installHttpRoutes` cannot see it and nothing
+  // records what it sent.
+  request: async () => {
+    throw new Error(
+      "The built-in `request` fixture makes http requests from node, where nothing intercepts " +
+        "them. Anything the app fetches belongs in a mock installed by `as(user, path)`.",
+    )
+  },
+  // One container per worker, torn down when the worker ends. It is reset between tests rather
+  // than recreated, so the docker start-up cost is paid once.
+  zooid: [
+    // playwright reads a fixture's dependencies off this pattern, so it has to stay a pattern
+    // even when there are none.
+    // eslint-disable-next-line no-empty-pattern
+    async ({}, use) => {
+      const zooid = new Zooid()
+
+      await use(zooid)
+      await zooid.stop()
+    },
+    {scope: "worker"},
+  ],
+  harness: async ({zooid, browser}, use, testInfo) => {
+    const dockerProblem = await describeDockerProblem()
+
+    testInfo.skip(Boolean(dockerProblem), dockerProblem)
+
+    await zooid.start()
+    await zooid.reset()
+
+    const contexts: BrowserContext[] = []
+
+    let scenario: Maybe<Scenario>
+
+    const requireScenario = () => {
+      if (scenario) return scenario
+
+      throw new Error("Seed a scenario before opening a page for a user")
+    }
+
+    const as = async (user: TestUser, path = "/", options: BrowserContextOptions = {}) => {
+      const {urls, cache} = requireScenario()
+      // The project's own `use` first, so a viewport, colour scheme or device descriptor set in
+      // playwright.config.ts reaches the context rather than being silently dropped.
+      //
+      // A request a service worker makes is not seen by context.route, so a worker is the one
+      // way out of the block-all below. Sveltekit registers src/service-worker.js on every
+      // navigation in dev; it has no fetch handler today, and blocking registration is what keeps
+      // that from being the thing containment rests on.
+      const context = await browser.newContext({
+        ...testInfo.project.use,
+        serviceWorkers: "block",
+        ...options,
+      })
+
+      contexts.push(context)
+
+      // Interception before navigation, and the block-all before the mocks — playwright matches
+      // the most recently registered route first, and every mock falls through what it doesn't
+      // recognize, so the mocks have to be registered last to be reachable at all.
+      await installHttpRoutes(context)
+      await installWebSocketRoutes(context, zooid)
+      await mockAnalytics(context)
+      await mockDufflepud(context)
+      await mockHosting(context)
+      await mockPushServer(context)
+      await mockImages(context)
+
+      return boot(context, {user, path, relays: urls, spaces: urls, events: cache(user)})
+    }
+
+    await use({
+      zooid,
+      as,
+      seed: async build => {
+        scenario = await seed(zooid, build)
+
+        return scenario
+      },
+    })
+
+    for (const context of contexts) {
+      await context.close()
+    }
+
+    for (const context of contexts) {
+      assertNoLeaks(context)
+    }
+  },
+  seed: async ({harness}, use) => use(harness.seed),
+  as: async ({harness}, use) => use(harness.as),
+})

e2e/harness/keys.ts

@@ -0,0 +1,26 @@
+import {getPubkey} from "@welshman/util"
+import {Nip01Signer} from "@welshman/signer"
+
+export type TestUser = {
+  name: string
+  secret: string
+  pubkey: string
+  signer: Nip01Signer
+}
+
+const makeUser = (name: string, secret: string): TestUser => ({
+  name,
+  secret,
+  pubkey: getPubkey(secret),
+  signer: new Nip01Signer(secret),
+})
+
+// The secrets are near-zero entropy on purpose: they never leave the test process, they are
+// stable across runs so a pubkey can be asserted on directly, and the leading nibbles make an
+// event's author recognizable at a glance in a failed-assertion diff.
+export const users = {
+  alice: makeUser("alice", "a11ce00000000000000000000000000000000000000000000000000000000001"),
+  bob: makeUser("bob", "b0b0000000000000000000000000000000000000000000000000000000000002"),
+  carol: makeUser("carol", "ca20100000000000000000000000000000000000000000000000000000000003"),
+  admin: makeUser("admin", "ad31100000000000000000000000000000000000000000000000000000000004"),
+}

e2e/harness/net/http.ts

@@ -0,0 +1,315 @@
+import {createHash} from "node:crypto"
+import type {BrowserContext} from "@playwright/test"
+import {now} from "@welshman/lib"
+import type {Handle} from "@welshman/util"
+import type {ZapperValues} from "@welshman/domain"
+import {tenantByUrl} from "../zooid/config"
+import {requestZooid} from "../zooid/transport"
+
+// Mirrors the service urls in src/app/env.ts and .env, which this process can't import: env.ts
+// reads import.meta.env and pulls in Capacitor. Nothing here is ever fetched — these are route
+// patterns, and every handler answers from memory.
+const DUFFLEPUD_ORIGIN = "https://dufflepud.coracle.social"
+const PUSH_SERVER_ORIGIN = "https://nps.flotilla.social"
+const HOSTING_ORIGIN = "https://api.hosting.coracle.social"
+
+// Hard-coded in src/app.html, so every navigation asks for it whatever the scenario is doing.
+const PLAUSIBLE_ORIGIN = "https://plausible.coracle.social"
+
+// Relay-hosted livekit lives under a well-known path rather than an origin of its own.
+const LIVEKIT_PATH = "/.well-known/nip29/livekit"
+
+// A 1x1 transparent png, small enough to inline and real enough for an <img> to decode.
+const PNG = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNgAAIAAAUAAen63NgAAAAASUVORK5CYII=",
+  "base64",
+)
+
+// The dev server from vite.config.ts. Traffic to it is the app loading itself rather than egress,
+// so it is the one host both layers here let past, websockets included — Vite's hmr socket has to
+// keep working.
+export const isDevServerUrl = (url: URL) =>
+  url.port === "1847" && ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname)
+
+export type BlockedRequest = {
+  method: string
+  url: string
+}
+
+const blockedByContext = new WeakMap<BrowserContext, BlockedRequest[]>()
+
+export const getBlockedRequests = (context: BrowserContext) => {
+  const blocked = blockedByContext.get(context)
+
+  if (blocked) {
+    return blocked
+  }
+
+  throw new Error("installHttpRoutes was never called for this browser context")
+}
+
+/**
+ * Blocks every http request the app makes, except to the dev server and to a relay's own origin,
+ * which is forwarded to the container so that the nip-11 document and the nip-86 management api the
+ * app reads are the real relay's. Install this first: the per-service mocks below are registered
+ * later and therefore take priority, so a request that still reaches this handler is one nothing
+ * has mocked.
+ */
+export const installHttpRoutes = (context: BrowserContext) => {
+  const blocked: BlockedRequest[] = []
+  const hostByOrigin = new Map(
+    Array.from(tenantByUrl, ([url, host]): [string, string] => [
+      new URL(url.replace(/^ws/, "http")).origin,
+      host,
+    ]),
+  )
+
+  blockedByContext.set(context, blocked)
+
+  // The dev server is left unrouted rather than matched and continued: a sveltekit page in dev is
+  // hundreds of module requests, and none of them is egress.
+  return context.route(
+    url => !isDevServerUrl(url),
+    async route => {
+      const request = route.request()
+      const {origin, pathname, search} = new URL(request.url())
+
+      const host = hostByOrigin.get(origin)
+
+      if (host) {
+        return route.fulfill(
+          await requestZooid(
+            host,
+            request.method(),
+            pathname + search,
+            request.headers(),
+            request.postDataBuffer() ?? undefined,
+          ),
+        )
+      }
+
+      blocked.push({method: request.method(), url: request.url()})
+
+      return route.abort()
+    },
+  )
+}
+
+/**
+ * Opt-in, for a spec that wants every request the app made to have been answered by something the
+ * scenario stood up. Some of what a page asks for is meant to be refused — the blossom probe
+ * against a relay with blossom off, for one — so call this from a spec that has mocked what it
+ * exercises rather than from teardown.
+ */
+export const assertNoBlockedRequests = (context: BrowserContext) => {
+  const blocked = getBlockedRequests(context)
+
+  if (blocked.length > 0) {
+    throw new Error(
+      [
+        `The app made ${blocked.length} http request(s) nothing served:`,
+        ...blocked.map(({method, url}) => `  ${method} ${url}`),
+      ].join("\n"),
+    )
+  }
+}
+
+/**
+ * The analytics script src/app.html loads on every page. Answering with an empty body leaves
+ * `window.plausible` as the queueing shim src/app/analytics.ts installs, so pageviews accumulate
+ * in memory and nothing is ever sent — and `assertNoBlockedRequests` stays a statement about the
+ * scenario rather than about the page shell.
+ */
+export const mockAnalytics = (context: BrowserContext) =>
+  context.route(`${PLAUSIBLE_ORIGIN}/**`, route =>
+    route.fulfill({contentType: "application/javascript", body: ""}),
+  )
+
+export type DufflepudFixtures = {
+  // The remote half of the read-state sync in src/app/notifications.ts, keyed by path.
+  checked?: Record<string, number>
+  // A link preview is only rendered when it carries a title or an image.
+  preview?: {title?: string; description?: string; image?: string}
+  handles?: {handle: string; info?: Handle}[]
+  // `lnurl` is hex here, not bech32 — that's the encoding dufflepud speaks.
+  zappers?: {lnurl: string; info?: Omit<ZapperValues, "lnurl">}[]
+}
+
+export const mockDufflepud = (context: BrowserContext, fixtures: DufflepudFixtures = {}) =>
+  context.route(`${DUFFLEPUD_ORIGIN}/**`, route => {
+    const {pathname} = new URL(route.request().url())
+
+    if (pathname === "/link/preview") {
+      return route.fulfill({json: fixtures.preview ?? {}})
+    }
+
+    if (pathname === "/handle/info") {
+      return route.fulfill({json: {data: fixtures.handles ?? []}})
+    }
+
+    if (pathname === "/zapper/info") {
+      return route.fulfill({json: {data: fixtures.zappers ?? []}})
+    }
+
+    if (pathname === "/kv/checked") {
+      return route.fulfill({
+        json: route.request().method() === "GET" ? (fixtures.checked ?? {}) : {},
+      })
+    }
+
+    return route.fallback()
+  })
+
+export type BlossomOptions = {
+  // The blossom server the scenario expects an upload to land on, e.g. a space's own url.
+  server: string
+}
+
+/**
+ * A blossom server that keeps what it was given: an upload is hashed exactly as the real thing
+ * would be, so the descriptor it answers with points at a blob this mock can then serve back.
+ */
+export const mockBlossom = (context: BrowserContext, {server}: BlossomOptions) => {
+  const {origin} = new URL(server)
+  const blobs = new Map<string, {body: Buffer; type: string}>()
+
+  return context.route(`${origin}/**`, route => {
+    const request = route.request()
+    const method = request.method()
+    const {pathname} = new URL(request.url())
+
+    if (pathname === "/upload") {
+      if (method === "HEAD") {
+        return route.fulfill({status: 200, body: ""})
+      }
+
+      if (method === "PUT") {
+        const body = request.postDataBuffer() ?? Buffer.alloc(0)
+        const type = request.headers()["content-type"] ?? "application/octet-stream"
+        const sha256 = createHash("sha256").update(body).digest("hex")
+
+        blobs.set(sha256, {body, type})
+
+        return route.fulfill({
+          json: {sha256, type, url: `${origin}/${sha256}`, size: body.length, uploaded: now()},
+        })
+      }
+    }
+
+    const blob = blobs.get(pathname.slice(1).split(".")[0])
+
+    if (blob) {
+      return route.fulfill({
+        contentType: blob.type,
+        body: method === "HEAD" ? "" : blob.body,
+      })
+    }
+
+    return route.fallback()
+  })
+}
+
+/**
+ * The push server from src/app/push/adapters/capacitor.ts. Only the native adapters talk to it,
+ * so a browser run reaches this only if the platform detection regresses.
+ */
+export const mockPushServer = (context: BrowserContext) =>
+  context.route(`${PUSH_SERVER_ORIGIN}/**`, route => {
+    const [resource] = new URL(route.request().url()).pathname.split("/").filter(Boolean)
+
+    if (resource === "subscription") {
+      if (route.request().method() === "DELETE") {
+        return route.fulfill({json: {}})
+      }
+
+      // Registration is only usable if it comes back with both, and the relay is told to post
+      // notifications to the callback rather than the client ever fetching it.
+      const key = "test-push-subscription"
+
+      return route.fulfill({json: {key, callback: `${PUSH_SERVER_ORIGIN}/callback/${key}`}})
+    }
+
+    return route.fallback()
+  })
+
+// Records straight off the hosting api, whose shapes live in src/app/hosting.ts. They're typed as
+// plain objects here so that mocking a payment flow doesn't pull the app's module graph — and
+// with it import.meta.env — into the node process.
+export type HostingFixtures = {
+  plans?: object[]
+  // Provisioning runs on every login and ignores what it gets back, so the empty default carries
+  // any spec that isn't actually exercising the hosting ui.
+  tenant?: object
+  relays?: object[]
+  invoices?: object[]
+  draftInvoice?: object
+}
+
+export const mockHosting = (context: BrowserContext, fixtures: HostingFixtures = {}) =>
+  context.route(`${HOSTING_ORIGIN}/**`, route => {
+    const [resource, id, sub, detail] = new URL(route.request().url()).pathname
+      .split("/")
+      .filter(Boolean)
+
+    if (resource === "plans") {
+      return route.fulfill({json: {data: fixtures.plans ?? []}})
+    }
+
+    if (resource === "tenants") {
+      if (sub) {
+        if (sub === "relays") {
+          return route.fulfill({json: {data: fixtures.relays ?? []}})
+        }
+
+        if (sub === "invoices") {
+          const data = detail === "draft" ? fixtures.draftInvoice : (fixtures.invoices ?? [])
+
+          return route.fulfill({json: {data}})
+        }
+      } else {
+        return route.fulfill({json: {data: {pubkey: id, ...fixtures.tenant}}})
+      }
+    }
+
+    return route.fallback()
+  })
+
+export type LivekitOptions = {
+  // Where the client is told to connect. Point it at something the test owns — the token this
+  // hands out is accepted by nothing else.
+  serverUrl: string
+  token?: string
+}
+
+export const mockLivekit = (context: BrowserContext, {serverUrl, token}: LivekitOptions) =>
+  context.route(
+    url => url.pathname.startsWith(LIVEKIT_PATH),
+    route => {
+      const roomId = new URL(route.request().url()).pathname.slice(LIVEKIT_PATH.length + 1)
+
+      if (roomId) {
+        return route.fulfill({
+          json: {server_url: serverUrl, participant_token: token ?? "test-participant-token"},
+        })
+      }
+
+      // The support probe in src/lib/livekit.ts reads support off the status alone.
+      return route.fulfill({status: 204, body: ""})
+    },
+  )
+
+/**
+ * Serves a png for anything the browser is loading as an image — avatars, banners, blossom blobs,
+ * video posters — so a scenario's fixtures can reference urls without any of them being fetched.
+ */
+export const mockImages = (context: BrowserContext) =>
+  context.route(
+    url => !isDevServerUrl(url),
+    route => {
+      if (route.request().resourceType() === "image") {
+        return route.fulfill({contentType: "image/png", body: PNG})
+      }
+
+      return route.fallback()
+    },
+  )

e2e/harness/net/websocket.ts

@@ -0,0 +1,130 @@
+import type {BrowserContext, WebSocketRoute} from "@playwright/test"
+import {call, parseJson} from "@welshman/lib"
+import {normalizeRelayUrl} from "@welshman/util"
+import {RelayMessageType, isClientEvent, isClientReq} from "@welshman/net"
+import type {ClientMessage, RelayMessage} from "@welshman/net"
+import type {RelayConnection} from "../zooid/types"
+import type {Zooid} from "../zooid/relay"
+import {isDevServerUrl} from "./http"
+
+export type Direction = "toRelay" | "toClient"
+
+export type TranscriptEntry = {
+  url: string
+  direction: Direction
+  message: ClientMessage | RelayMessage
+}
+
+type Traffic = {
+  transcript: TranscriptEntry[]
+  leaks: Set<string>
+}
+
+const trafficByContext = new WeakMap<BrowserContext, Traffic>()
+
+const getTraffic = (context: BrowserContext) => {
+  const traffic = trafficByContext.get(context)
+
+  if (traffic) {
+    return traffic
+  }
+
+  throw new Error("installWebSocketRoutes was never called for this browser context")
+}
+
+// A relay that holds nothing: REQs get an immediate EOSE and events are accepted into the void.
+// Only urls the container does not serve get one, so a leak fails on the assertion that names it
+// rather than on a timeout three layers away.
+const openEmptyRelay = (): RelayConnection => {
+  let listener: (message: RelayMessage) => void = () => undefined
+
+  return {
+    onMessage(f) {
+      listener = f
+    },
+    send(message) {
+      if (isClientReq(message)) {
+        listener([RelayMessageType.Eose, message[1]])
+      } else if (isClientEvent(message)) {
+        listener([RelayMessageType.Ok, message[1].id, true, ""])
+      }
+    },
+    close() {},
+  }
+}
+
+const serve = (traffic: Traffic, zooid: Zooid, route: WebSocketRoute) => {
+  const url = normalizeRelayUrl(route.url())
+  const connection = call(() => {
+    const relay = zooid.relays.get(url)
+
+    if (relay) {
+      return relay.connect()
+    }
+
+    traffic.leaks.add(url)
+
+    return openEmptyRelay()
+  })
+
+  connection.onMessage(message => {
+    traffic.transcript.push({url, direction: "toClient", message})
+    route.send(JSON.stringify(message))
+  })
+
+  route.onMessage(frame => {
+    const message = parseJson<ClientMessage>(frame.toString())
+
+    if (message) {
+      traffic.transcript.push({url, direction: "toRelay", message})
+      connection.send(message)
+    }
+  })
+
+  route.onClose(() => connection.close())
+}
+
+/**
+ * The single interception point for relay traffic. It goes on the context rather than a page, so
+ * every page in it is covered including ones opened later, and it is safe to call before any page
+ * exists — routing is the environment a page is born into, not a step in a sequence.
+ *
+ * Vite's hmr socket is the one url left alone. Everything else is answered from this process, and
+ * a url that is not one of the container's virtual relays is served by an empty relay and recorded
+ * as a leak.
+ */
+export const installWebSocketRoutes = (context: BrowserContext, zooid: Zooid) => {
+  const traffic: Traffic = {transcript: [], leaks: new Set()}
+
+  trafficByContext.set(context, traffic)
+
+  return context.routeWebSocket(
+    url => !isDevServerUrl(url),
+    route => serve(traffic, zooid, route),
+  )
+}
+
+export const getTranscript = (context: BrowserContext) => getTraffic(context).transcript
+
+// Every frame in both directions, oldest first. Attach it to a failing test to see what the client
+// actually said, and to whom.
+export const formatTranscript = (context: BrowserContext) =>
+  getTranscript(context)
+    .map(
+      ({url, direction, message}) =>
+        `${direction === "toRelay" ? ">>" : "<<"} ${url} ${JSON.stringify(message)}`,
+    )
+    .join("\n")
+
+export const assertNoLeaks = (context: BrowserContext) => {
+  const {leaks} = getTraffic(context)
+
+  if (leaks.size > 0) {
+    throw new Error(
+      [
+        `The app opened a websocket to ${leaks.size} url(s) the scenario never created:`,
+        ...Array.from(leaks).map(url => `  ${url}`),
+      ].join("\n"),
+    )
+  }
+}

e2e/harness/seed/scenario.ts

@@ -0,0 +1,113 @@
+import {int, now} from "@welshman/lib"
+import type {MaybeAsync} from "@welshman/lib"
+import {ROOMS, makeEvent} from "@welshman/util"
+import type {SignedEvent} from "@welshman/util"
+import type {Zooid} from "../zooid/relay"
+import type {TenantName} from "../zooid/config"
+import {users} from "../keys"
+import type {TestUser} from "../keys"
+import {seedSpace} from "./space"
+import type {SeededSpace} from "./space"
+
+// A fixture timestamp, as an offset from the moment the scenario started: `at(2, HOUR)` is two
+// hours before the test began. Count-first, like int and ago.
+export type At = (count: number, unit: number) => number
+
+export type SeedTools = {
+  // Names a relay the container already serves — its policy is its toml in zooid/docker/config, so
+  // a scenario describes what is on a relay, never what the relay is.
+  relay: (name: TenantName) => SeededSpace
+  user: typeof users
+  at: At
+}
+
+export type Scenario = {
+  readonly startedAt: number
+  readonly at: At
+  readonly urls: string[]
+  space(name: TenantName): SeededSpace
+  // The events a returning user's client would already have on disk. Just the room list: the
+  // scenario's own relays stand in for the indexers, and a members-only relay won't serve the list
+  // that would tell authPolicy it may identify to it. See ARCHITECTURE.md, "Users and sessions".
+  cache(user: TestUser): SignedEvent[]
+}
+
+export const seed = async (
+  zooid: Zooid,
+  build: (tools: SeedTools) => MaybeAsync<void>,
+): Promise<Scenario> => {
+  const startedAt = now()
+  const at: At = (count, unit) => startedAt - int(count, unit)
+  const spaces = new Map<string, SeededSpace>()
+  const writes: (() => Promise<void>)[] = []
+  const roomLists = new Map<string, SignedEvent>()
+
+  const relay = (name: TenantName) => {
+    const space = seedSpace({
+      zooid,
+      startedAt,
+      name,
+      enqueue: write => writes.push(write),
+    })
+
+    spaces.set(name, space)
+
+    return space
+  }
+
+  await build({relay, user: users, at})
+
+  // Seeding is async and fixtures depend on one another, so the builder only records what to
+  // write. Draining the queue here publishes each fixture in the order it was declared.
+  for (const write of writes) {
+    await write()
+  }
+
+  const seeded = Array.from(spaces.values())
+
+  // A room list is replaceable and covers every space at once, so it can only be written after
+  // all of them have been seeded.
+  const membershipsByPubkey = new Map<string, {user: TestUser; urls: string[]; tags: string[][]}>()
+
+  for (const space of seeded) {
+    for (const {user, rooms} of space.memberships) {
+      const membership = membershipsByPubkey.get(user.pubkey) ?? {user, urls: [], tags: []}
+
+      membership.urls.push(space.url)
+      membership.tags.push(["r", space.url], ...rooms.map(h => ["group", h, space.url]))
+      membershipsByPubkey.set(user.pubkey, membership)
+    }
+  }
+
+  for (const {user, urls, tags} of membershipsByPubkey.values()) {
+    const event = await user.signer.sign(makeEvent(ROOMS, {tags, created_at: startedAt}))
+
+    for (const url of urls) {
+      await zooid.publish(url, event)
+    }
+
+    roomLists.set(user.pubkey, event)
+  }
+
+  const getSpace = (name: TenantName) => {
+    const space = spaces.get(name)
+
+    if (space) return space
+
+    throw new Error(`No space named "${name}" was seeded`)
+  }
+
+  const cache = (user: TestUser) => {
+    const roomList = roomLists.get(user.pubkey)
+
+    return roomList ? [roomList] : []
+  }
+
+  return {
+    startedAt,
+    at,
+    cache,
+    urls: seeded.map(space => space.url),
+    space: getSpace,
+  }
+}

e2e/harness/seed/space.ts

@@ -0,0 +1,191 @@
+import {neventEncode} from "nostr-tools/nip19"
+import type {Maybe, MaybeAsync} from "@welshman/lib"
+import {
+  MESSAGE,
+  ROOM_ADD_MEMBER,
+  Resolver,
+  makeEvent,
+  tagSpec,
+  tagValue,
+  toNostrURI,
+} from "@welshman/util"
+import type {SignedEvent, StampedEvent} from "@welshman/util"
+import {EventWriter, Profile} from "@welshman/domain"
+import type {BaseEventReader} from "@welshman/domain"
+import type {RoomOptions, TestRelay} from "../zooid/types"
+import type {Zooid} from "../zooid/relay"
+import type {TenantName} from "../zooid/config"
+import {users} from "../keys"
+import type {TestUser} from "../keys"
+
+// @welshman/domain has no writer for NIP-29 kind-9 messages, and none of its readers describe one,
+// so this pairs the base writer with the base reader. The behavior tags it renders — `h` via
+// setRoom, `q`/`p` via addQuote/addMention — are everything a room message carries.
+class MessageWriter extends EventWriter<BaseEventReader> {}
+
+// A handle to an event the scenario is going to publish. Seeding calls record what to write and
+// return before anything is written, so the event is filled in when its turn in the queue comes up.
+export type SeededEvent = {
+  readonly event: SignedEvent
+  readonly id: string
+}
+
+export type ProfileValues = {
+  name?: string
+  about?: string
+  picture?: string
+  nip05?: string
+}
+
+// A queued write. Seeding is ordered — a reply's parent has to exist first — so every write goes
+// through the scenario's queue rather than starting when it is declared.
+export type Enqueue = (write: () => Promise<void>) => void
+
+// A user's membership as their own client sees it, which the scenario turns into one room list
+// per user once every space has been seeded.
+export type SeededMembership = {
+  user: TestUser
+  rooms: string[]
+}
+
+export type SeededSpace = {
+  readonly name: TenantName
+  // The url is read off the relay handle, so this only reads once seeding has run.
+  readonly url: string
+  readonly memberships: SeededMembership[]
+  room(h: string, options?: RoomOptions): void
+  member(user: TestUser, h?: string): void
+  // Relay and room membership, plus a place in the user's own room list — what a user who joined
+  // this space through the ui would end up with.
+  join(user: TestUser, ...rooms: string[]): void
+  message(user: TestUser, h: string, content: string, createdAt?: number): SeededEvent
+  reply(user: TestUser, parent: SeededEvent, content: string, createdAt?: number): SeededEvent
+  profile(user: TestUser, values: ProfileValues, createdAt?: number): SeededEvent
+  event(user: TestUser, template: StampedEvent): SeededEvent
+}
+
+export type SeedSpaceOptions = {
+  zooid: Zooid
+  enqueue: Enqueue
+  // The moment the scenario began. A fixture declared without a timestamp is stamped with it
+  // rather than with the wall clock, so a run's events never drift apart from one another.
+  startedAt: number
+  name: TenantName
+}
+
+export const seedSpace = ({zooid, enqueue, startedAt, name}: SeedSpaceOptions): SeededSpace => {
+  const memberships: SeededMembership[] = []
+
+  let testRelay: Maybe<TestRelay>
+
+  const relay = () => {
+    if (testRelay) return testRelay
+
+    throw new Error(`Space "${name}" has not been seeded yet, await seed() first`)
+  }
+
+  enqueue(async () => {
+    testRelay = await zooid.relay(name)
+  })
+
+  // Every fixture is published to this space, so a relay hint always resolves to its url.
+  const context = {resolver: new Resolver(() => [relay().url])}
+
+  const publish = (write: () => Promise<SignedEvent>): SeededEvent => {
+    let signed: Maybe<SignedEvent>
+
+    const event = () => {
+      if (signed) return signed
+
+      throw new Error(`An event seeded into "${name}" was read before seed() published it`)
+    }
+
+    enqueue(async () => {
+      signed = await write()
+    })
+
+    return {
+      get event() {
+        return event()
+      },
+      get id() {
+        return event().id
+      },
+    }
+  }
+
+  const publishTemplate = (user: TestUser, build: () => MaybeAsync<StampedEvent>) =>
+    publish(async () => relay().event(user, await build()))
+
+  const room = (h: string, roomOptions: RoomOptions = {}) =>
+    enqueue(() => relay().room(h, roomOptions, startedAt))
+
+  const member = (user: TestUser, h?: string) => enqueue(() => relay().member(user, h, startedAt))
+
+  const event = (user: TestUser, template: StampedEvent) => publishTemplate(user, () => template)
+
+  const join = (user: TestUser, ...roomIds: string[]) => {
+    memberships.push({user, rooms: roomIds})
+    member(user)
+
+    for (const h of roomIds) {
+      event(
+        users.admin,
+        makeEvent(ROOM_ADD_MEMBER, {
+          created_at: startedAt,
+          tags: [
+            ["h", h],
+            ["p", user.pubkey],
+          ],
+        }),
+      )
+    }
+  }
+
+  const message = (user: TestUser, h: string, content: string, createdAt = startedAt) =>
+    publish(() => relay().message(user, h, content, createdAt))
+
+  // Flotilla replies in a room by quoting: Content.svelte renders a quote from the nostr uri in the
+  // content rather than from the q tag, so the uri has to be prepended, as prependParent does in
+  // src/app/rooms.ts.
+  const reply = (user: TestUser, parent: SeededEvent, content: string, createdAt = startedAt) =>
+    publishTemplate(user, async () => {
+      const h = tagValue(tagSpec("h"), parent.event.tags)
+
+      if (h) {
+        const url = relay().url
+        const nevent = neventEncode({...parent.event, relays: [url]})
+        const template = await new MessageWriter(MESSAGE, context)
+          .setRoom(url, h)
+          .addQuote(parent.event)
+          .addMention(parent.event.pubkey)
+          .setContent(toNostrURI(nevent) + "\n\n" + content)
+          .renderTemplate()
+
+        return {...template, created_at: createdAt}
+      }
+
+      throw new Error(`Cannot reply to ${parent.id}, it is not in a room`)
+    })
+
+  const profile = (user: TestUser, values: ProfileValues, createdAt = startedAt) =>
+    publishTemplate(user, async () => ({
+      ...(await Profile.configure(context).writer().update(values).renderTemplate()),
+      created_at: createdAt,
+    }))
+
+  return {
+    name,
+    get url() {
+      return relay().url
+    },
+    memberships,
+    room,
+    member,
+    join,
+    message,
+    reply,
+    profile,
+    event,
+  }
+}

e2e/harness/zooid/config.ts

@@ -0,0 +1,27 @@
+/**
+ * The virtual relays the container serves, and the only place their names are written down.
+ *
+ * zooid is multi-tenant: it binds a config to a Host header and serves any number of them from one
+ * process, so a second space costs a toml in docker/config and nothing else. The names are a union
+ * rather than a string so that a scenario naming a relay that has no config fails to compile
+ * instead of hanging on a 404 from the dispatcher.
+ *
+ * Each host is a name that resolves nowhere. The container is reached on loopback and told what to
+ * call itself, so that what it calls itself is a url a relay selection will keep — see transport.ts
+ * for why that matters, and `.test` is reserved by rfc 2606, so a url that escapes this process
+ * fails to connect rather than reaching a host.
+ */
+export const tenants = {
+  space: "space.test",
+  other: "other.test",
+} as const
+
+export type TenantName = keyof typeof tenants
+
+export const tenantUrl = (name: TenantName) => `wss://${tenants[name]}/`
+
+export const tenantNames = Object.keys(tenants) as TenantName[]
+
+// Which tenant a url belongs to, for the transport's Host header. A url the app opens that is not
+// one of these is a leak, and is reported as one rather than dialled.
+export const tenantByUrl = new Map(tenantNames.map(name => [tenantUrl(name), tenants[name]]))

e2e/harness/zooid/docker/compose.yaml

@@ -0,0 +1,37 @@
+# The relay the whole suite runs against. Bound to loopback only, and the one server this harness is
+# allowed to connect to for real.
+#
+# The image is distroless and runs as `nonroot`. zooid creates DATA and MEDIA itself, but it cannot
+# create their parent /app, so both have to arrive already mounted — and writable by uid 65532,
+# which is what `mode` below is for: docker defaults a tmpfs to 1777 and podman does not, and a
+# tmpfs the relay cannot write is a container that exits 1 the moment it opens its database.
+# Nothing is persisted, so `up --force-recreate` is a guaranteed-empty database.
+name: flotilla-e2e-zooid
+
+services:
+  relay:
+    image: gitea.coracle.social/coracle/zooid:latest
+    # The harness dials this published port and sends a `Host` per virtual relay, which is what the
+    # dispatcher matches against the `host` in each file under config/.
+    ports:
+      - "127.0.0.1:3334:3334"
+    environment:
+      PORT: "3334"
+      CONFIG: /app/config
+      DATA: /app/data
+      MEDIA: /app/media
+    volumes:
+      - type: bind
+        source: ./config
+        target: /app/config
+        read_only: true
+      - type: tmpfs
+        target: /app/data
+        tmpfs:
+          size: 268435456
+          mode: 01777
+      - type: tmpfs
+        target: /app/media
+        tmpfs:
+          size: 33554432
+          mode: 01777

e2e/harness/zooid/docker/config/other.toml

@@ -0,0 +1,44 @@
+# A second virtual relay, identical in policy to space.toml, for specs that need two spaces on
+# different relays — outbox routing, cross-space isolation. zooid is multi-tenant, so this costs a
+# file and no extra process.
+#
+# `host` must equal the Host header the harness sends, which is the hostname of the url the client
+# is given; anything else gets a 404 from the dispatcher instead of a relay. Keep it in step with
+# `tenants` in harness/zooid/config.ts, and see harness/zooid/transport.ts for why it is a name
+# that resolves nowhere.
+host = "other.test"
+schema = "e2e_other"
+secret = "07be7000000000000000000000000000000000000000000000000000000000e7"
+
+[info]
+# Served to the client as nip-11. `name` is what a spec sees as the space's name, so it matches the
+# name scenarios pass to `relay()`. `pubkey` is the owner, and here it is the relay's own key (the
+# pubkey for `secret`) so that [roles.admin] below is the only thing granting a test identity
+# can_manage.
+name = "other"
+pubkey = "d9220af5f36469d17322f41902b6b30dad1869cbb473b35f5e8f8d8e924f36b8"
+description = "Throwaway relay for Flotilla's end-to-end suite."
+
+[policy]
+public_read = false
+public_write = false
+public_join = true
+strip_signatures = false
+
+[groups]
+enabled = true
+
+[management]
+enabled = true
+
+# Blossom and push are off, and [livekit] is omitted entirely, because each of them would have
+# the relay or the client talk to a service the test did not create.
+[blossom]
+enabled = false
+
+[push]
+enabled = false
+
+[roles.admin]
+pubkeys = ["6ada7b6eabb3a8349f88667d278a275c704b553a7c57f9d8156555986884a08e"]
+can_manage = true

e2e/harness/zooid/docker/config/space.toml

@@ -0,0 +1,43 @@
+# One of the virtual relays the container serves, and the only statement of this relay's policy —
+# a scenario says what is on a relay, never what the relay is.
+#
+# `host` must equal the Host header the harness sends, which is the hostname of the url the client
+# is given; anything else gets a 404 from the dispatcher instead of a relay. Keep it in step with
+# `tenants` in harness/zooid/config.ts, and see harness/zooid/transport.ts for why it is a name
+# that resolves nowhere.
+host = "space.test"
+schema = "e2e"
+secret = "5e1f000000000000000000000000000000000000000000000000000000000005"
+
+[info]
+# Served to the client as nip-11. `name` is what a spec sees as the space's name, so it matches the
+# name scenarios pass to `relay()`. `pubkey` is the owner, and here it is the relay's own key (the
+# pubkey for `secret`) so that [roles.admin] below is the only thing granting a test identity
+# can_manage.
+name = "space"
+pubkey = "da00132eaf7ef6bbde47e5dc409fa1d481e518db0621af31591e0306eb48ed8a"
+description = "Throwaway relay for Flotilla's end-to-end suite."
+
+[policy]
+public_read = false
+public_write = false
+public_join = true
+strip_signatures = false
+
+[groups]
+enabled = true
+
+[management]
+enabled = true
+
+# Blossom and push are off, and [livekit] is omitted entirely, because each of them would have
+# the relay or the client talk to a service the test did not create.
+[blossom]
+enabled = false
+
+[push]
+enabled = false
+
+[roles.admin]
+pubkeys = ["6ada7b6eabb3a8349f88667d278a275c704b553a7c57f9d8156555986884a08e"]
+can_manage = true

e2e/harness/zooid/relay.ts

@@ -0,0 +1,264 @@
+import {execFile} from "node:child_process"
+import {fileURLToPath} from "node:url"
+import {promisify} from "node:util"
+import {ms, sleep} from "@welshman/lib"
+import type {Maybe} from "@welshman/lib"
+import {makeRelayAuth} from "@welshman/util"
+import type {SignedEvent} from "@welshman/util"
+import {ClientMessageType, isRelayAuth, isRelayOk} from "@welshman/net"
+import type {ClientMessage} from "@welshman/net"
+import {users} from "../keys"
+import {tenantNames, tenantUrl, tenants} from "./config"
+import type {TenantName} from "./config"
+import {makeTestRelay} from "./testRelay"
+import {connectToZooid, requestZooid} from "./transport"
+import type {ZooidConnection} from "./transport"
+
+const image = "gitea.coracle.social/coracle/zooid:latest"
+
+const composeFile = fileURLToPath(new URL("docker/compose.yaml", import.meta.url))
+
+const testUsersByPubkey = new Map(Object.values(users).map(user => [user.pubkey, user]))
+
+const execFileAsync = promisify(execFile)
+
+// execFile does not go through a shell, so a `docker` that exists only as an alias or a function —
+// podman, colima, a wrapper in a shell rc file — is invisible to it however well it works when
+// typed. Name the executable to drive with E2E_DOCKER in that case.
+const dockerCommand = process.env.E2E_DOCKER ?? "docker"
+
+const docker = (...args: string[]) => execFileAsync(dockerCommand, args)
+
+const compose = (...args: string[]) => docker("compose", "-f", composeFile, ...args)
+
+// Why the container cannot be driven, or undefined when it can. The two failures need different
+// answers — a cli that is not on this process's PATH is usually a shell alias or an inherited
+// environment, and telling someone to start docker sends them the wrong way — so they are reported
+// apart rather than as one boolean.
+const probeDocker = async () => {
+  try {
+    await docker("compose", "version")
+
+    return undefined
+  } catch (error) {
+    const {code, stderr} = Object(error) as {code?: string; stderr?: string}
+
+    if (code === "ENOENT") {
+      return (
+        `\`${dockerCommand}\` is not on PATH for the test runner. If it works in your shell it is ` +
+        "an alias or a function rather than an executable, which execFile cannot see: set " +
+        "E2E_DOCKER to the real command, e.g. `E2E_DOCKER=podman pnpm test`."
+      )
+    }
+
+    return (
+      `\`${dockerCommand} compose version\` failed, so the daemon is likely not running. ` +
+      (stderr?.trim() || String(error))
+    )
+  }
+}
+
+let problem: Maybe<Promise<Maybe<string>>>
+
+// Asked once a worker: docker does not come and go mid-run, and the answer is also written to the
+// terminal, because a skip reason otherwise reaches only the html report and a run that silently
+// skips every test is the least useful thing this can do.
+export const describeDockerProblem = () =>
+  (problem ??= probeDocker().then(reason => {
+    if (reason) {
+      console.warn(
+        `\nThe e2e suite cannot drive a container, so every test will skip:\n  ${reason}\n`,
+      )
+    }
+
+    return reason
+  }))
+
+/**
+ * The relay every test runs against: one zooid container on loopback, serving a virtual relay per
+ * entry in `tenants`. Each relay's policy is whatever its toml in docker/config says, which is the
+ * only place policy is written down — a scenario describes what is *on* a relay, never what the
+ * relay is.
+ */
+export class Zooid {
+  // Every socket into the container — the client's and seeding's alike — is one this process
+  // opened, so this map is also the definition of a url that is not a leak.
+  relays = new Map(
+    tenantNames.map(name => [
+      tenantUrl(name),
+      {connect: () => connectToZooid(tenants[name]), host: tenants[name]},
+    ]),
+  )
+
+  private sessions = new Map<string, ZooidConnection>()
+
+  private started = false
+
+  // Verifying docker rather than bringing the container up: every test resets, and that is what
+  // starts it. Repeat calls are free, so the fixture can call this per test.
+  start = async () => {
+    if (this.started) return
+
+    const problem = await describeDockerProblem()
+
+    if (problem) {
+      throw new Error(problem)
+    }
+
+    const hasImage = await docker("image", "inspect", image).then(
+      () => true,
+      () => false,
+    )
+
+    if (!hasImage) {
+      throw new Error(
+        `The zooid image ${image} is not present locally. Fetch it with ` +
+          `\`${dockerCommand} pull ${image}\`, or build it from a zooid checkout with ` +
+          `\`${dockerCommand} build -t ${image} .\`.`,
+      )
+    }
+
+    this.started = true
+  }
+
+  relay = async (name: TenantName) =>
+    makeTestRelay({
+      name,
+      url: tenantUrl(name),
+      publish: event => this.publish(tenantUrl(name), event),
+    })
+
+  publish = async (url: string, event: SignedEvent) => {
+    const relay = this.relays.get(url)
+
+    if (!relay) {
+      throw new Error(`Attempted to publish to ${url}, which is not one of this container's relays`)
+    }
+
+    const connection = await this.authenticate(relay.host, event.pubkey)
+    const {ok, detail} = await this.send(connection, [ClientMessageType.Event, event], event.id)
+
+    if (!ok) {
+      throw new Error(`zooid refused a kind ${event.kind} fixture: ${detail}`)
+    }
+  }
+
+  reset = async () => {
+    this.closeSessions()
+
+    await this.up()
+  }
+
+  stop = async () => {
+    if (this.started) {
+      this.closeSessions()
+
+      await compose("down")
+
+      this.started = false
+    }
+  }
+
+  // Whatever the relay wrote before it died. Compose reports only that a container exited, so
+  // without this a startup failure is a status code and no reason.
+  private logs = () =>
+    compose("logs", "--no-color", "--tail", "50").then(
+      ({stdout, stderr}) => [stdout, stderr].filter(Boolean).join("\n").trim(),
+      () => "",
+    )
+
+  private fail = async (summary: string) => {
+    const logs = await this.logs()
+
+    throw new Error(logs ? `${summary}\n\nzooid said:\n${logs}` : summary)
+  }
+
+  // Recreating rather than restarting is what makes this a reset: with storage in tmpfs and no
+  // volume mounted for it, a new container is a new database.
+  private up = async () => {
+    try {
+      await compose("up", "-d", "--force-recreate", "--wait")
+    } catch (error) {
+      const {stderr} = Object(error) as {stderr?: string}
+
+      await this.fail((stderr?.trim() || String(error)).split("\n").slice(-3).join("\n"))
+    }
+
+    const deadline = Date.now() + ms(30)
+
+    while (Date.now() < deadline) {
+      // A 404 means the dispatcher has no relay bound to that host yet, so the configs are still
+      // loading. Anything a relay itself answers means every tenant is ready.
+      const isUp = await Promise.all(
+        tenantNames.map(name =>
+          requestZooid(tenants[name], "GET", "/", {accept: "application/nostr+json"}).then(
+            response => response.status === 200,
+            () => false,
+          ),
+        ),
+      ).then(results => results.every(Boolean))
+
+      if (isUp) {
+        return
+      }
+
+      await sleep(200)
+    }
+
+    await this.fail(
+      `zooid did not answer as ${tenantNames.map(name => tenants[name]).join(" and ")} within 30 ` +
+        "seconds.",
+    )
+  }
+
+  // NIP-42 binds an identity to a connection, so each test user seeds over its own, per relay. The
+  // url signed into the auth event is the one the client uses, because that is the one khatru
+  // rebuilds from the headers transport.ts sends — a fixture is written over the same relay the app
+  // talks to.
+  private authenticate = async (host: string, pubkey: string) => {
+    const key = `${host} ${pubkey}`
+    const session = this.sessions.get(key)
+
+    if (session) return session
+
+    const user = testUsersByPubkey.get(pubkey)
+
+    if (!user) {
+      throw new Error(
+        `Cannot publish as ${pubkey}: zooid authenticates every write, so seeded events must be ` +
+          "signed by one of the test identities in e2e/harness/keys.ts",
+      )
+    }
+
+    const connection = connectToZooid(host)
+    const [, challenge] = await connection.wait(isRelayAuth)
+    const event = await user.signer.sign(makeRelayAuth(`wss://${host}/`, challenge))
+    const {ok, detail} = await this.send(connection, [ClientMessageType.Auth, event], event.id)
+
+    if (ok) {
+      this.sessions.set(key, connection)
+
+      return connection
+    }
+
+    throw new Error(`Failed to authenticate as ${user.name} on ${host}: ${detail}`)
+  }
+
+  // Both halves of seeding — the auth that opens a connection and every event written over it —
+  // are answered with an OK naming the event that was sent.
+  private send = async (connection: ZooidConnection, message: ClientMessage, id: string) => {
+    connection.send(message)
+
+    const [, , ok, detail] = await connection.wait(reply => isRelayOk(reply) && reply[1] === id)
+
+    return {ok, detail}
+  }
+
+  private closeSessions = () => {
+    for (const connection of this.sessions.values()) {
+      connection.close()
+    }
+
+    this.sessions.clear()
+  }
+}

e2e/harness/zooid/testRelay.ts

@@ -0,0 +1,72 @@
+import {
+  MESSAGE,
+  RELAY_JOIN,
+  ROOM_ADD_MEMBER,
+  ROOM_CREATE,
+  ROOM_EDIT_META,
+  makeEvent,
+} from "@welshman/util"
+import type {SignedEvent, StampedEvent} from "@welshman/util"
+import {users} from "../keys"
+import type {TestUser} from "../keys"
+import type {TestRelay} from "./types"
+
+export type TestRelayOptions = {
+  name: string
+  url: string
+  publish: (event: SignedEvent) => Promise<void>
+}
+
+// Seeding signs the events a real client would send and publishes them over a socket. Room
+// administration is signed by `admin`, the only test identity the tomls grant can_manage.
+//
+// Every timestamp is the caller's: seeding runs off the scenario's clock, and reading the wall
+// clock here would leave two fixtures that describe the same thing — a room's membership, say —
+// stamped seconds apart, which is enough to decide which of them wins.
+export const makeTestRelay = ({name, url, publish}: TestRelayOptions): TestRelay => {
+  const event = async (user: TestUser, template: StampedEvent) => {
+    const signed = await user.signer.sign(template)
+
+    await publish(signed)
+
+    return signed
+  }
+
+  return {
+    name,
+    url,
+    event,
+    room: async (h, meta, createdAt) => {
+      // A relay stamps the metadata it derives from these ops with the op's own created_at, so
+      // creation has to be strictly older than the edit or the edit is dropped as stale.
+      await event(
+        users.admin,
+        makeEvent(ROOM_CREATE, {tags: [["h", h]], created_at: createdAt - 1}),
+      )
+
+      const tags = [["h", h]]
+
+      if (meta.name) tags.push(["name", meta.name])
+      if (meta.about) tags.push(["about", meta.about])
+      if (meta.picture) tags.push(["picture", meta.picture])
+      if (meta.closed) tags.push(["closed"])
+      if (meta.private) tags.push(["private"])
+
+      await event(users.admin, makeEvent(ROOM_EDIT_META, {tags, created_at: createdAt}))
+    },
+    message: (user, h, content, createdAt) =>
+      event(user, makeEvent(MESSAGE, {content, tags: [["h", h]], created_at: createdAt})),
+    member: async (user, h, createdAt) => {
+      await event(user, makeEvent(RELAY_JOIN, {created_at: createdAt}))
+
+      if (h) {
+        const tags = [
+          ["h", h],
+          ["p", user.pubkey],
+        ]
+
+        await event(users.admin, makeEvent(ROOM_ADD_MEMBER, {tags, created_at: createdAt}))
+      }
+    },
+  }
+}

e2e/harness/zooid/transport.ts

@@ -0,0 +1,144 @@
+import {request as httpRequest} from "node:http"
+import WebSocket from "ws"
+import {parseJson} from "@welshman/lib"
+import type {ClientMessage, RelayMessage} from "@welshman/net"
+import type {RelayConnection} from "./types"
+
+/**
+ * How the harness reaches the zooid container, and the only place that knows the container has a
+ * loopback address at all.
+ *
+ * The client is given `wss://<tenant>.test/` and never learns anything else. It has to be that
+ * rather than the container's own `ws://localhost:3334/`, because a relay selection drops a url
+ * that is local or insecure unless the caller opts in — see isLocalUrl and RelaySelection.getUrls
+ * in @welshman/util — which Flotilla never does, so the Router would resolve every outbox load,
+ * profile and relay hint to nothing.
+ *
+ * The two headers below are what makes the container answer to that name. zooid's dispatcher binds
+ * a config to a Host (cmd/relay/main.go), and khatru derives the url it checks nip-42 and nip-86
+ * signatures against from that Host plus the forwarded proto (getBaseURL in khatru/relay.go), so
+ * both the relay the config describes and the url it expects to have been signed are the tenant's.
+ * They are exactly what a tls terminator adds in front of a real deployment.
+ */
+const port = 3334
+
+const headersFor = (host: string) => ({Host: host, "X-Forwarded-Proto": "https"})
+
+export type ZooidConnection = RelayConnection & {
+  // Resolves with the first message the relay sends that matches. Seeding waits for its auth
+  // challenge and for the OK answering each write this way.
+  wait(match: (message: RelayMessage) => boolean): Promise<RelayMessage>
+}
+
+// One connection to the container, as one of its virtual relays. Node's own WebSocket cannot carry
+// a Host header — fetch forbids it — so this is the one thing in the harness that `ws` is here for.
+export const connectToZooid = (host: string): ZooidConnection => {
+  const socket = new WebSocket(`ws://127.0.0.1:${port}/`, {headers: headersFor(host)})
+  const listeners = new Set<(message: RelayMessage) => void>()
+  const pending: ClientMessage[] = []
+
+  const write = (message: ClientMessage) => socket.send(JSON.stringify(message))
+
+  socket.on("open", () => pending.splice(0).forEach(write))
+
+  socket.on("message", data => {
+    const message = parseJson<RelayMessage>(data.toString())
+
+    if (message) {
+      for (const listener of listeners) {
+        listener(message)
+      }
+    }
+  })
+
+  // The likeliest error here is a 404 from zooid's dispatcher, which means `tenants` in config.ts
+  // and the `host` in the tenant's toml have drifted apart.
+  socket.on("error", error =>
+    console.error(`The zooid container refused a socket for ${host}: ${error.message}`),
+  )
+
+  return {
+    onMessage: listener => {
+      listeners.add(listener)
+    },
+    // A client may speak before the container has finished its handshake — the page's socket is
+    // open as soon as playwright has a route for it, which is well before this one is.
+    send: message => {
+      if (socket.readyState === WebSocket.OPEN) {
+        write(message)
+      } else {
+        pending.push(message)
+      }
+    },
+    close: () => socket.close(),
+    wait: match =>
+      new Promise(resolve => {
+        const listener = (message: RelayMessage) => {
+          if (match(message)) {
+            listeners.delete(listener)
+            resolve(message)
+          }
+        }
+
+        listeners.add(listener)
+      }),
+  }
+}
+
+export type ZooidResponse = {
+  status: number
+  headers: Record<string, string>
+  body: Buffer
+}
+
+// One http request to the container, carrying the same two headers, so that the nip-11 document
+// and the nip-86 management api the browser reads are the real relay's rather than a mock's.
+export const requestZooid = (
+  host: string,
+  method: string,
+  path: string,
+  requestHeaders: Record<string, string>,
+  body?: Buffer,
+): Promise<ZooidResponse> =>
+  new Promise((resolve, reject) => {
+    const request = httpRequest(
+      {
+        method,
+        path,
+        host: "127.0.0.1",
+        port,
+        headers: {
+          // A pseudo-header describes the request line rather than the request, and node:http
+          // rejects a header name with a colon in it.
+          ...Object.fromEntries(
+            Object.entries(requestHeaders).filter(([name]) => !name.startsWith(":")),
+          ),
+          ...headersFor(host),
+        },
+      },
+      response => {
+        const chunks: Buffer[] = []
+        const responseHeaders: Record<string, string> = {}
+
+        for (const [name, value] of Object.entries(response.headers)) {
+          // Hop-by-hop headers describe the connection this answer arrived on rather than the one
+          // the browser is waiting on, which playwright frames itself.
+          if (value && !["connection", "keep-alive", "transfer-encoding"].includes(name)) {
+            responseHeaders[name] = Array.isArray(value) ? value.join(", ") : value
+          }
+        }
+
+        response.on("data", chunk => chunks.push(chunk))
+        response.on("end", () =>
+          resolve({
+            status: response.statusCode ?? 500,
+            headers: responseHeaders,
+            body: Buffer.concat(chunks),
+          }),
+        )
+      },
+    )
+
+    request.on("error", reject)
+    request.end(body)
+  })

e2e/harness/zooid/types.ts

@@ -0,0 +1,34 @@
+import type {SignedEvent, StampedEvent} from "@welshman/util"
+import type {ClientMessage, RelayMessage} from "@welshman/net"
+import type {TestUser} from "../keys"
+
+export type RoomOptions = {
+  name?: string
+  about?: string
+  picture?: string
+  closed?: boolean
+  private?: boolean
+}
+
+// A handle to one relay, plus the seeding affordances scenarios build on. Every seeding call
+// publishes over a real socket rather than inserting into storage, so the relay stores exactly what
+// it would have stored for a real client. Each one is stamped by its caller rather than off the
+// wall clock, so a scenario's fixtures share one clock.
+export type TestRelay = {
+  readonly name: string
+  readonly url: string
+  room(h: string, options: RoomOptions, createdAt: number): Promise<void>
+  message(user: TestUser, h: string, content: string, createdAt: number): Promise<SignedEvent>
+  // Grants relay membership, and room membership too when `h` is given.
+  member(user: TestUser, h: string | undefined, createdAt: number): Promise<void>
+  // Escape hatch for kinds with no affordance of their own: profiles, reactions, threads, DMs.
+  event(user: TestUser, event: StampedEvent): Promise<SignedEvent>
+}
+
+// One client's connection to a relay. Every connection to a url reaches the same container, which
+// is what lets one browser context observe another's writes over the wire.
+export type RelayConnection = {
+  onMessage(listener: (message: RelayMessage) => void): void
+  send(message: ClientMessage): void
+  close(): void
+}

e2e/smoke.spec.ts

@@ -1,12 +0,0 @@
-import {expect, test} from "@playwright/test"
-
-test("boots the SPA on the home page", async ({page}) => {
-  const response = await page.goto("/")
-
-  expect(response?.ok()).toBeTruthy()
-
-  // adapter-static serves an empty shell that hydrates client-side, so the presence of
-  // rendered text proves the Svelte app actually mounted (not just that a file was served).
-  // TODO: tighten this to assert concrete onboarding UI once the markup is settled.
-  await expect(page.locator("body")).toContainText(/\S/, {timeout: 15_000})
-})

e2e/specs/auth.spec.ts

@@ -0,0 +1,43 @@
+import {CLIENT_AUTH} from "@welshman/util"
+import {ClientMessageType, RelayMessageType} from "@welshman/net"
+import {expect, getTranscript, roomPath, test, users} from "../harness"
+
+test("authenticates over nip-42 before a members-only relay serves anything", async ({
+  seed,
+  as,
+}) => {
+  const scenario = await seed(({relay, user}) => {
+    const space = relay("space")
+
+    space.room("backroom", {name: "Backroom"})
+    space.join(user.alice, "backroom")
+    space.message(user.alice, "backroom", "the secret handshake")
+  })
+
+  const {url} = scenario.space("space")
+  const page = await as(users.alice, roomPath(url, "backroom"))
+
+  await expect(page.getByText("the secret handshake")).toBeVisible()
+
+  const transcript = getTranscript(page.context()).filter(entry => entry.url === url)
+  const challengedAt = transcript.findIndex(
+    ({direction, message}) => direction === "toClient" && message[0] === RelayMessageType.Auth,
+  )
+  const authenticatedAt = transcript.findIndex(
+    ({direction, message}) => direction === "toRelay" && message[0] === ClientMessageType.Auth,
+  )
+  const firstEventAt = transcript.findIndex(
+    ({direction, message}) => direction === "toClient" && message[0] === RelayMessageType.Event,
+  )
+
+  expect(challengedAt).toBeGreaterThanOrEqual(0)
+  expect(authenticatedAt).toBeGreaterThan(challengedAt)
+  expect(transcript[authenticatedAt].message[1]).toMatchObject({
+    kind: CLIENT_AUTH,
+    pubkey: users.alice.pubkey,
+  })
+
+  // The whole point of intercepting the transport rather than swapping in an adapter: until the
+  // client proves who it is, the relay hands it nothing at all.
+  expect(firstEventAt).toBeGreaterThan(authenticatedAt)
+})

e2e/specs/multiuser.spec.ts

@@ -0,0 +1,27 @@
+import {expect, roomPath, test, users} from "../harness"
+
+test("delivers one user's message to another user's open page", async ({seed, as}) => {
+  const scenario = await seed(({relay, user}) => {
+    const space = relay("space")
+
+    space.room("general", {name: "General"})
+    space.join(user.alice, "general")
+    space.join(user.bob, "general")
+  })
+
+  const {url} = scenario.space("space")
+  const path = roomPath(url, "general")
+
+  // Two browser contexts, two identities, one relay: bob's page is already listening when alice
+  // sends, so the message reaches him over the wire rather than out of a shared repository.
+  const alice = await as(users.alice, path)
+  const bob = await as(users.bob, path)
+
+  await expect(bob.getByRole("link", {name: "General"})).toBeVisible()
+
+  await alice.locator(".chat-editor [contenteditable=true]").pressSequentially("anyone there?")
+  await alice.locator(".chat-editor [contenteditable=true]").press("Enter")
+
+  await expect(alice.getByText("anyone there?")).toBeVisible()
+  await expect(bob.getByText("anyone there?")).toBeVisible()
+})

e2e/specs/routing.spec.ts

@@ -0,0 +1,57 @@
+import {spec} from "@welshman/lib"
+import type {TrustedEvent} from "@welshman/util"
+import {RelayMessageType} from "@welshman/net"
+import {expect, getTranscript, roomPath, test, users} from "../harness"
+
+test("keeps two spaces' contents on their own relays", async ({seed, as}) => {
+  const scenario = await seed(({relay, user}) => {
+    const space = relay("space")
+    const other = relay("other")
+
+    // Same room id on both relays, so anything that keys rooms by id alone conflates them.
+    space.room("lounge", {name: "Space Lounge"})
+    other.room("lounge", {name: "Other Lounge"})
+    space.join(user.alice, "lounge")
+    other.join(user.alice, "lounge")
+    space.message(user.alice, "lounge", "only in space")
+    other.message(user.alice, "lounge", "only in other")
+  })
+
+  const space = scenario.space("space")
+  const other = scenario.space("other")
+  const page = await as(users.alice, roomPath(space.url, "lounge"))
+
+  const deliveredByOther = (match: (event: TrustedEvent) => boolean) =>
+    getTranscript(page.context()).some(
+      ({url, direction, message}) =>
+        url === other.url &&
+        direction === "toClient" &&
+        message[0] === RelayMessageType.Event &&
+        match(message[2]),
+    )
+
+  await expect(page.getByText("only in space")).toBeVisible()
+  await expect(page.getByRole("link", {name: "Space Lounge"})).toBeVisible()
+
+  // Alice belongs to both spaces, so the client is talking to the other relay at the same time —
+  // its room and its messages just don't belong in this one. It syncs independently, so wait until
+  // both have actually reached this page: `toHaveCount(0)` is equally satisfied by an element that
+  // has not loaded yet, which would pass against a client that does conflate them.
+  await expect.poll(() => deliveredByOther(event => event.content === "only in other")).toBe(true)
+  await expect
+    .poll(() => deliveredByOther(event => event.tags.some(spec(["name", "Other Lounge"]))))
+    .toBe(true)
+
+  await expect(page.getByText("only in other")).toHaveCount(0)
+  await expect(page.getByRole("link", {name: "Other Lounge"})).toHaveCount(0)
+
+  const strays = getTranscript(page.context()).filter(
+    ({url, direction, message}) =>
+      direction === "toClient" &&
+      message[0] === RelayMessageType.Event &&
+      message[2].content === "only in space" &&
+      url !== space.url,
+  )
+
+  expect(strays).toEqual([])
+})

e2e/specs/space.spec.ts

@@ -0,0 +1,26 @@
+import {HOUR, MINUTE} from "@welshman/lib"
+import {expect, roomPath, test, users} from "../harness"
+
+test("renders a seeded space, its rooms and its messages", async ({seed, as}) => {
+  const scenario = await seed(({relay, user, at}) => {
+    const space = relay("space")
+
+    space.room("general", {name: "General"})
+    space.room("random", {name: "Random"})
+    space.join(user.alice, "general")
+    space.join(user.bob, "general")
+    space.message(user.bob, "general", "morning all", at(2, HOUR))
+    space.message(user.alice, "general", "morning!", at(90, MINUTE))
+  })
+
+  const {url} = scenario.space("space")
+  const page = await as(users.alice, roomPath(url, "general"))
+
+  // The room the user belongs to and the one they don't are both advertised by the relay, so
+  // both appear in the space menu.
+  await expect(page.getByRole("link", {name: "General"})).toBeVisible()
+  await expect(page.getByRole("link", {name: "Random"})).toBeVisible()
+
+  await expect(page.getByText("morning all")).toBeVisible()
+  await expect(page.getByText("morning!")).toBeVisible()
+})

e2e/support/fixtures.ts

@@ -1,29 +0,0 @@
-import type {SignedEvent} from "@welshman/util"
-import type {RelayMockConfig} from "../../src/lib/test/relayMocks"
-
-import relay1Events from "./fixtures/relay1.json"
-
-// Fake relay urls used by tests. Each maps to a json fixture under ./fixtures/ and an entry in
-// EVENTS_BY_RELAY below. To add a relay: drop a `<name>.json` file in ./fixtures/, import it, add a
-// url here, and wire it into EVENTS_BY_RELAY.
-export const FIXTURE_RELAYS = {
-  relay1: "wss://relay1.test/",
-} as const
-
-// The events each fake relay serves. The json files hold static, pre-signed events: schnorr
-// signatures are non-deterministic, so events are signed once and committed verbatim (they pass
-// verifyEvent, which netContext.isEventValid enforces). Regenerate with @welshman/signer:
-//   await Nip01Signer.fromSecret(secret).sign(makeEvent(kind, {content, created_at}))
-const EVENTS_BY_RELAY: Record<string, SignedEvent[]> = {
-  [FIXTURE_RELAYS.relay1]: relay1Events as SignedEvent[],
-}
-
-// Build a RelayMockConfig populating the given fixture relays (all of them when none are passed).
-// Any relay not included returns nothing, keeping tests offline.
-export const relayFixtures = (...urls: string[]): RelayMockConfig => {
-  const selected = urls.length > 0 ? urls : Object.keys(EVENTS_BY_RELAY)
-
-  return {
-    relays: Object.fromEntries(selected.map(url => [url, EVENTS_BY_RELAY[url] ?? []])),
-  }
-}

e2e/support/fixtures/relay1.json

@@ -1,29 +0,0 @@
-[
-  {
-    "kind": 0,
-    "content": "{\"name\":\"Alice\"}",
-    "tags": [],
-    "created_at": 1700000000,
-    "pubkey": "79be667ef9dcbbac55a06295ce870b07029bfcdb2dce28d959f2815b16f81798",
-    "id": "9b3d138641b38364945b20d800268006c2cb7d974bb4b1d63a9f90f5ab974b90",
-    "sig": "de6b86274e7bcf6c02aa881ada1feee9e01ba320691711d4975916b3cd231ab43cf469a47c5db99503ed72707d5db85fede1ad3763c4fbd7c998d04f00eda6bc"
-  },
-  {
-    "kind": 1,
-    "content": "hello from the fixture relay",
-    "tags": [],
-    "created_at": 1700000000,
-    "pubkey": "79be667ef9dcbbac55a06295ce870b07029bfcdb2dce28d959f2815b16f81798",
-    "id": "b9874875bfa8d830c5c9ef3673104360cf21b94848a311febfaf52f0a652b1a9",
-    "sig": "85df94a2e9884ac3d280145492d5191cde2948d49a824c443a1f5d2143633eff1e1789fa7e8843b6efc3dd2dc0d7e33322edb628125d8e35de8ddca1d06ca970"
-  },
-  {
-    "kind": 1,
-    "content": "reply from bob",
-    "tags": [],
-    "created_at": 1700000001,
-    "pubkey": "c6047f9441ed7d6d3045406e95c07cd85c778e4b8cef3ca7abac09b95c709ee5",
-    "id": "171dcbdd63d474ba46da609e8b0104cbcf4801fbb581b6c343d9426280f9e1be",
-    "sig": "eecf26e616a6b70dc67c7eae16fc4fe159314647ba1d4581332257de7f070410aa9a9e41f571b9403ff145d16c9b32766846fce08516201263e25cf08c1ed8f1"
-  }
-]

e2e/support/relayMocks.ts

@@ -1,30 +0,0 @@
-import type {Page} from "@playwright/test"
-import type {RelayMockConfig} from "../../src/lib/test/relayMocks"
-
-// Must match RELAY_MOCKS_KEY in src/lib/test/relayMocks.ts.
-const RELAY_MOCKS_KEY = "__RELAY_MOCKS__"
-
-// Hard safety net: intercept every real websocket so a test can never reach the network, even if
-// some code path opens a socket directly (e.g. relay AUTH) rather than going through the adapter
-// layer. We never call route.connectToServer(), so the socket connects to Playwright's in-process
-// mock and simply receives nothing.
-export const blockWebsockets = (page: Page) => page.routeWebSocket(/^wss?:\/\//, () => {})
-
-// Inject the relay-mock config the app reads on startup. addInitScript runs before any page script
-// on every navigation, so this must be called before page.goto().
-export const injectRelayConfig = (page: Page, config: RelayMockConfig) =>
-  page.addInitScript(
-    ([key, value]) => {
-      Object.assign(window, {[key]: value})
-    },
-    [RELAY_MOCKS_KEY, config] as const,
-  )
-
-// Full network isolation plus optional fixtures, in one call. With no config, every relay returns
-// nothing (requirement 1). Pass {relays: {url: events}} to populate specific relays (requirement 2).
-export const setupRelayMocks = async (page: Page, config: RelayMockConfig = {}) => {
-  await blockWebsockets(page)
-  await injectRelayConfig(page, config)
-}
-
-export type {RelayMockConfig}

link_deps

@@ -10,27 +10,44 @@ if (execSync('git status --porcelain', { encoding: 'utf8' }).trim() && !force) {
   process.exit(1)
 }
 
-const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'))
+// One entry per directory under ../welshman/packages.
+const packages = [
+  'app',
+  'content',
+  'domain',
+  'editor',
+  'feeds',
+  'lib',
+  'net',
+  'signer',
+  'store',
+  'util',
+]
 
-pkg.pnpm = pkg.pnpm || {}
-pkg.pnpm.overrides = pkg.pnpm.overrides || {}
-pkg.pnpm.overrides["@welshman/app"] = "link:../welshman/packages/app"
-pkg.pnpm.overrides["@welshman/content"] = "link:../welshman/packages/content"
-pkg.pnpm.overrides["@welshman/editor"] = "link:../welshman/packages/editor"
-pkg.pnpm.overrides["@welshman/feeds"] = "link:../welshman/packages/feeds"
-pkg.pnpm.overrides["@welshman/lib"] = "link:../welshman/packages/lib"
-pkg.pnpm.overrides["@welshman/net"] = "link:../welshman/packages/net"
-pkg.pnpm.overrides["@welshman/router"] = "link:../welshman/packages/router"
-pkg.pnpm.overrides["@welshman/signer"] = "link:../welshman/packages/signer"
-pkg.pnpm.overrides["@welshman/store"] = "link:../welshman/packages/store"
-pkg.pnpm.overrides["@welshman/util"] = "link:../welshman/packages/util"
-// pkg.pnpm.overrides["nostr-editor"] = "link:../nostr-editor"
-// pkg.pnpm.overrides["@pomade/core"] = "link:../pomade/packages/core"
-// pkg.pnpm.overrides["nostr-signer-capacitor-plugin"] = "link:../nostr-signer-capacitor-plugin"
+// pnpm 11 no longer reads the `pnpm` field in package.json, so overrides live in the workspace
+// file. They are written for the install and reverted straight after: a committed link: override
+// points every clone and every ci run at a checkout that only exists on one machine.
+const file = 'pnpm-workspace.yaml'
+const workspace = fs.readFileSync(file, 'utf8')
 
-fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2) + '\n')
+if (!/^overrides:$/m.test(workspace)) {
+  console.error(`Error: ${file} has no \`overrides:\` block to link welshman into.`)
+  process.exit(1)
+}
 
-execSync('pnpm i', { stdio: 'inherit' })
+const links = packages
+  .map(name => `  '@welshman/${name}': link:../welshman/packages/${name}`)
+  .join('\n')
 
-execSync('git checkout -f pnpm-lock.yaml', { stdio: 'inherit' })
-execSync('git checkout -f package.json', { stdio: 'inherit' })
+// Other packages worth linking now and then:
+//   '@pomade/core': link:../pomade/packages/core
+//   nostr-editor: link:../nostr-editor
+//   nostr-signer-capacitor-plugin: link:../nostr-signer-capacitor-plugin
+
+fs.writeFileSync(file, workspace.replace(/^overrides:$/m, `overrides:\n${links}`))
+
+try {
+  execSync('pnpm i', { stdio: 'inherit' })
+} finally {
+  execSync(`git checkout -f ${file} pnpm-lock.yaml`, { stdio: 'inherit' })
+}

package.json

@@ -10,7 +10,7 @@
     "release:android": "./build.sh && cap build android --androidreleasetype APK --signing-type apksigner",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check src && eslint src",
+    "lint": "prettier --check src e2e playwright.config.ts && eslint src e2e",
     "test": "playwright test",
     "test:ui": "playwright test --ui",
     "format": "git diff head --name-only --diff-filter d | grep -E '(js|ts|svelte|css)$' | xargs -r prettier --write",
@@ -26,6 +26,7 @@
     "@tailwindcss/postcss": "^4.2.2",
     "@types/eslint": "^9.6.1",
     "@types/node": "^25.9.1",
+    "@types/ws": "^8.18.1",
     "autoprefixer": "^10.4.23",
     "classnames": "^2.5.1",
     "eslint": "^9.39.2",
@@ -41,7 +42,8 @@
     "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",
-    "vite": "^6.4.2"
+    "vite": "^6.4.2",
+    "ws": "^8.18.3"
   },
   "type": "module",
   "dependencies": {
@@ -101,5 +103,5 @@
     "throttle-debounce": "^5.0.2",
     "tippy.js": "^6.3.7"
   },
-  "packageManager": "pnpm@11.5.1"
+  "packageManager": "pnpm@11.20.0"
 }

playwright.config.ts

@@ -1,27 +1,47 @@
 import {defineConfig, devices} from "@playwright/test"
 
-// E2E tests live in ./e2e and run against the dev server (port 1847 from vite.config.ts).
-// Run with `pnpm test:e2e` (after `pnpm exec playwright install` to fetch browsers).
+// One engine per run rather than a project per engine: these specs exercise protocol behaviour —
+// sockets, auth, sync — so a third copy of each buys much less than it costs. Run the whole suite
+// under another engine with `E2E_BROWSER=webkit pnpm test`.
+const deviceNames: Record<string, string> = {
+  chromium: "Desktop Chrome",
+  firefox: "Desktop Firefox",
+  webkit: "Desktop Safari",
+}
+
+const device = devices[deviceNames[process.env.E2E_BROWSER ?? "chromium"]]
+
 export default defineConfig({
-  testDir: "e2e",
-  fullyParallel: true,
+  testDir: "e2e/specs",
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  reporter: "html",
+  // Fixture setup is charged to the test, and the harness fixture does a lot of it: the container
+  // is recreated and waits for the relay to answer, seeding authenticates a socket per
+  // identity, and the first test of a run also pays vite's on-demand compile of the whole
+  // sveltekit graph. Playwright's 30s default kills that partway through as a flake.
+  timeout: 120_000,
+  // An assertion carries its own deadline, which the test's does not bound, and the first one in a
+  // spec runs the moment the shell mounts: it waits out the socket opening, the nip-42 exchange,
+  // the three negentropy pulls a space is synced with and a render. Playwright's 5s default is a
+  // coin flip on a loaded machine.
+  expect: {timeout: 30_000},
+  // One container on a fixed port, so the suite can't be sharded.
+  workers: 1,
+  // list alongside html: the html report is where a failure is investigated, but a run that skips
+  // has to say so on the terminal, where the person who started it is looking.
+  reporter: [["list"], ["html"]],
   use: {
     baseURL: "http://localhost:1847",
     trace: "on-first-retry",
   },
-  // Boots the SvelteKit dev server before the suite and reuses one if already running locally.
+  // Boots the SvelteKit dev server before the suite and reuses one if already running locally. The
+  // app resolves its VITE_ values against a key the harness injects per browser context, so any
+  // dev server will do.
   webServer: {
     command: "pnpm dev",
     url: "http://localhost:1847",
     reuseExistingServer: !process.env.CI,
     timeout: 120_000,
   },
-  projects: [
-    {name: "chromium", use: {...devices["Desktop Chrome"]}},
-    {name: "firefox", use: {...devices["Desktop Firefox"]}},
-    {name: "webkit", use: {...devices["Desktop Safari"]}},
-  ],
+  projects: [{name: "zooid", use: {...device}}],
 })

pnpm-workspace.yaml

@@ -3,6 +3,7 @@ allowBuilds:
   cbor-extract: false
   esbuild: false
   sharp: true
+  nostr-signer-capacitor-plugin@https://codeload.github.com/coracle-social/nostr-signer-capacitor-plugin/tar.gz/436adec9ed1e71569748cd56aa697f361e7a8d47: true
 minimumReleaseAgeExclude:
   - '@pomade/core'
   - '@welshman/app'
@@ -16,14 +17,4 @@ minimumReleaseAgeExclude:
   - '@welshman/store'
   - '@welshman/util'
 overrides:
-  '@welshman/app': link:../welshman/packages/app
-  '@welshman/content': link:../welshman/packages/content
-  '@welshman/domain': link:../welshman/packages/domain
-  '@welshman/editor': link:../welshman/packages/editor
-  '@welshman/feeds': link:../welshman/packages/feeds
-  '@welshman/lib': link:../welshman/packages/lib
-  '@welshman/net': link:../welshman/packages/net
-  '@welshman/signer': link:../welshman/packages/signer
-  '@welshman/store': link:../welshman/packages/store
-  '@welshman/util': link:../welshman/packages/util
   sharp: ^0.35.3

src/app/call.ts

@@ -2,7 +2,6 @@
  * Voice rooms via LiveKit. Note: Voice does not work on localhost in Firefox
  * (ICE candidate gathering fails). Use Chrome or test from deployed HTTPS.
  */
-import {MediaQuery} from "svelte/reactivity"
 import {
   DisconnectReason,
   LocalParticipant,
@@ -15,6 +14,7 @@ import {
   supportsAudioOutputSelection,
   type AudioCaptureOptions,
 } from "livekit-client"
+import {App} from "@capacitor/app"
 import {derived, get, writable} from "svelte/store"
 import {first, not, nthEq, reject, uniqBy} from "@welshman/lib"
 import {makeHttpAuth, makeHttpAuthHeader, sortEventsDesc, tagSpec, tagValues} from "@welshman/util"
@@ -62,13 +62,12 @@ export type TileRow = {
 }
 
 /**
- * Adaptive tile grid: rows can have different tile sizes, allowing
- * a Jitsi-style layout where tiles flex between 3:4 and 16:9 and
- * partial rows use wider tiles to fill whitespace.
+ * Adaptive tile grid: all tiles share the same dimensions. Full rows
+ * fill the container width; partial rows are centered.
  *
  * Example (3 tiles, 2 columns):
  *   row 0: [ square ] [ square ]
- *   row 1: [   16:9     ]   (centered)
+ *   row 1: [    square    ]   (centered, same size)
  */
 export type AdaptiveTileGrid = {
   rows: TileRow[]
@@ -112,94 +111,70 @@ const compareScores = (a: LayoutScore, b: LayoutScore): number => {
   return 0
 }
 
+/**
+ * Compute the largest tile size that fits within a given width and height,
+ * bounded by [minAspect, TILE_ASPECT_LANDSCAPE]. The tile is shrunk to fit
+ * whichever dimension is more constraining, so it never overflows.
+ */
+const fitTile = (availWidth: number, availHeight: number, minAspect: number) => {
+  const fillAspect = availWidth / availHeight
+  const aspectRatio = Math.max(minAspect, Math.min(TILE_ASPECT_LANDSCAPE, fillAspect))
+  if (fillAspect >= aspectRatio) {
+    const tileWidth = availHeight * aspectRatio
+    return {tileWidth, tileHeight: availHeight, aspectRatio}
+  }
+  const tileHeight = availWidth / aspectRatio
+  return {tileWidth: availWidth, tileHeight, aspectRatio}
+}
+
 /**
  * Build a single-row TileRow for the uniform case where all rows
- * have the same number of tiles. No upper-bound clamping on aspect
- * ratio — tiles can be wider than 16:9 to avoid overflow.
+ * have the same number of tiles. Tiles are centered within the row
+ * and capped at 16:9 to avoid overflow on ultrawide containers.
  */
 const buildUniformRow = (
   columnCount: number,
   containerWidth: number,
   containerHeight: number,
   rowCount: number,
+  minAspect: number,
 ): TileRow => {
   const gap = TILE_GAP
-  const availableHeight = containerHeight - (rowCount - 1) * gap
-  const rowHeight = availableHeight / rowCount
-  const tileWidth = (containerWidth - (columnCount - 1) * gap) / columnCount
-  const fillAspect = tileWidth / rowHeight
-  // Cap at 16:9 to avoid horizontally stretching video (review feedback)
-  const aspectRatio = Math.max(TILE_ASPECT_PORTRAIT, Math.min(TILE_ASPECT_LANDSCAPE, fillAspect))
-  const tileHeight = tileWidth / aspectRatio
+  const availHeight = (containerHeight - (rowCount - 1) * gap) / rowCount
+  const availWidth = (containerWidth - (columnCount - 1) * gap) / columnCount
+  const {tileWidth, tileHeight, aspectRatio} = fitTile(availWidth, availHeight, minAspect)
   return {columnCount, tileWidth, tileHeight, aspectRatio}
 }
 
 /**
  * Build a mixed-size layout candidate for a given column count.
- * Uses a "match heights" approach: the last (partial) row is at 16:9
- * (per review #1: "single centered 16:9 tile") and full-row tiles
- * match that same height. This creates a cohesive Jitsi-style look
- * where all tiles in all rows are the same height, with different
- * widths per row (full-row tiles are narrower/squarer, last-row
- * tiles are wider).
- *
- * If the full-row aspect would go below the portrait bound (3:4),
- * the height diverges: full rows clamp to 3:4 portrait.
+ * All tiles share the same dimensions — full rows fill the width,
+ * and the partial last row is centered with the same tile size.
  */
 const buildMixedCandidate = (
   tileCount: number,
   columnCount: number,
   containerWidth: number,
   containerHeight: number,
+  minAspect: number,
 ): AdaptiveTileGrid | undefined => {
   const gap = TILE_GAP
   const fullRowCount = Math.floor(tileCount / columnCount)
   const remainder = tileCount % columnCount
   const totalRowCount = fullRowCount + 1
 
-  const tileWidthFull = (containerWidth - (columnCount - 1) * gap) / columnCount
-  if (tileWidthFull <= 0) return undefined
-
-  const tileWidthLast = (containerWidth - (remainder - 1) * gap) / remainder
-  if (tileWidthLast <= 0) return undefined
-
-  // Find a common height that fits both row types and container
-  const maxPossibleHeight = Math.min(
-    tileWidthFull / TILE_ASPECT_PORTRAIT,
-    tileWidthLast / TILE_ASPECT_PORTRAIT,
-    (containerHeight - (totalRowCount - 1) * gap) / totalRowCount,
-  )
-
-  // Target 16:9 for the last row if possible
-  const targetHeight = tileWidthLast / TILE_ASPECT_LANDSCAPE
-  const commonHeight = Math.min(maxPossibleHeight, targetHeight)
-
-  const tileHeightFull = commonHeight
-  const tileHeightLast = commonHeight
-  const fullRowAspectRatio = tileWidthFull / commonHeight
-  const lastRowAspectRatio = tileWidthLast / commonHeight
-
-  const totalHeight = fullRowCount * tileHeightFull + tileHeightLast + (totalRowCount - 1) * gap
-  const totalWidth = Math.max(
-    columnCount * tileWidthFull + (columnCount - 1) * gap,
-    remainder * tileWidthLast + (remainder - 1) * gap,
-  )
+  const availHeight = (containerHeight - (totalRowCount - 1) * gap) / totalRowCount
+  const availWidth = (containerWidth - (columnCount - 1) * gap) / columnCount
+  const {tileWidth, tileHeight, aspectRatio} = fitTile(availWidth, availHeight, minAspect)
 
   const rows: TileRow[] = []
   for (let r = 0; r < fullRowCount; r++) {
-    rows.push({
-      columnCount,
-      tileWidth: tileWidthFull,
-      tileHeight: tileHeightFull,
-      aspectRatio: fullRowAspectRatio,
-    })
+    rows.push({columnCount, tileWidth, tileHeight, aspectRatio})
   }
-  rows.push({
-    columnCount: remainder,
-    tileWidth: tileWidthLast,
-    tileHeight: tileHeightLast,
-    aspectRatio: lastRowAspectRatio,
-  })
+  rows.push({columnCount: remainder, tileWidth, tileHeight, aspectRatio})
+
+  const totalHeight = totalRowCount * tileHeight + (totalRowCount - 1) * gap
+  const totalWidth = columnCount * tileWidth + (columnCount - 1) * gap
 
   return {
     rows,
@@ -214,12 +189,12 @@ const buildMixedCandidate = (
  *
  * - Tiles flex between 3:4 (portrait) and wider than 16:9 if needed
  *   to avoid overflow. No upper bound on aspect ratio — tiles can
- *   be wider than 16:9 when the container is very wide.
- * - When the last row is partial (fewer tiles than a full row),
- *   those tiles are wider (16:9) while full rows use square-ish
- *   tiles, filling whitespace per review #1.
- * - Only allows overflow (scroll) when tiles would be below
- *   MIN_TILE_HEIGHT (review #2: ~6-8 tiles on portrait phone).
+ * Tiles flex between a minimum aspect (1:1 on landscape, 3:4 on portrait)
+ * and 16:9, capped so they never overflow the container. Partial rows
+ * use the same tile size as full rows, centered.
+ *
+ * Only allows overflow (scroll) when tiles would be below
+ * MIN_TILE_HEIGHT (review #2: ~6-8 tiles on portrait phone).
  *
  * Prioritises:
  *  1. No overflow (tiles shrink to fit within aspect bounds)
@@ -234,6 +209,11 @@ export const computeAdaptiveGrid = (
 ): AdaptiveTileGrid | undefined => {
   if (tileCount <= 0 || containerWidth <= 0 || containerHeight <= 0) return undefined
 
+  // When the container is at least 4:3 landscape, bound tiles at 1:1 (square)
+  // so they don't become tall and narrow. On narrower/portrait viewports,
+  // allow 3:4 so more tiles fit on a phone screen.
+  const minAspect = containerWidth / containerHeight >= 4 / 3 ? 1 : TILE_ASPECT_PORTRAIT
+
   let best: AdaptiveTileGrid | undefined
   let bestScore: LayoutScore | undefined
 
@@ -246,7 +226,13 @@ export const computeAdaptiveGrid = (
 
     if (remainder === 0) {
       // Uniform layout — all rows identical
-      const row = buildUniformRow(columnCount, containerWidth, containerHeight, totalRowCount)
+      const row = buildUniformRow(
+        columnCount,
+        containerWidth,
+        containerHeight,
+        totalRowCount,
+        minAspect,
+      )
       const totalHeight = totalRowCount * row.tileHeight + (totalRowCount - 1) * TILE_GAP
       const totalWidth = columnCount * row.tileWidth + (columnCount - 1) * TILE_GAP
       const rows: TileRow[] = []
@@ -261,7 +247,13 @@ export const computeAdaptiveGrid = (
       }
     } else {
       // Mixed layout — last row has fewer tiles, make them wider
-      candidate = buildMixedCandidate(tileCount, columnCount, containerWidth, containerHeight)
+      candidate = buildMixedCandidate(
+        tileCount,
+        columnCount,
+        containerWidth,
+        containerHeight,
+        minAspect,
+      )
     }
 
     if (!candidate) continue
@@ -322,7 +314,6 @@ export const computeAdaptiveGrid = (
 }
 
 const LIVEKIT_DEFAULT_DEVICE_ID = "default"
-const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
 const RECONNECT_DELAYS = [1000, 2000, 4000, 8000, 16000]
 
 export type CallSession = {
@@ -355,11 +346,6 @@ export enum VideoCallLayout {
   Split = "split",
 }
 
-export enum ViewportSize {
-  Desktop = "desktop",
-  Mobile = "mobile",
-}
-
 export enum DeviceKind {
   AudioInput = "audioinput",
   AudioOutput = "audiooutput",
@@ -399,24 +385,10 @@ export const triggerVideoTrackRevision = () => {
   videoTrackRevision.update(n => n + 1)
 }
 
-export const isDesktopLayout = new MediaQuery("min-width: 768px", false)
-
-export const videoCallViewportSync = {
-  previousLayout: undefined as ViewportSize | undefined,
-}
-
 export const videoCallLayout = writable<VideoCallLayout>(VideoCallLayout.Split)
 
 export const videoPrimaryTileKey = writable<string | undefined>(undefined)
 
-export const videoTileCount = derived(
-  [currentCallSession, callState, videoTrackRevision, participantMediaState],
-  ([$session, $state]) => {
-    if ($state !== CallState.Connected || !$session) return 0
-    return countLiveVisualFeeds($session)
-  },
-)
-
 export const joinVoiceRoom = async (
   url: string,
   h: string,
@@ -664,8 +636,26 @@ export const switchCallActiveDevice = async (
   }
 }
 
+/**
+ * On mobile, locking the screen can suspend microphone capture without ever
+ * ending the underlying MediaStreamTrack: the local participant still looks
+ * connected and unmuted, but publishes silence until the track is manually
+ * reacquired. LiveKit only guards against this for tracks attached to a DOM
+ * element (i.e. video), so the mic needs the same treatment on foreground
+ * return. `App.addListener("appStateChange", ...)` fires from Capacitor's web
+ * fallback too, so this covers both native and browser tabs.
+ */
+export const syncCallAudioResume = () => {
+  const listener = App.addListener("appStateChange", ({isActive}) => {
+    if (isActive) void reacquireMicrophoneIfNeeded()
+  })
+
+  return () => {
+    listener.then(l => l.remove())
+  }
+}
+
 export const resetVideoCallLayout = () => {
-  videoCallViewportSync.previousLayout = undefined
   videoCallLayout.set(VideoCallLayout.Chat)
 }
 
@@ -748,27 +738,6 @@ const teardownRoom = (livekit: LiveKitRoom) => {
   livekit.disconnect()
 }
 
-const countLiveVisualFeeds = (session: CallSession): number => {
-  const livekit = session.livekit
-  let n = 0
-  const lp = livekit.localParticipant
-  if (session.cameraOn) {
-    const pub = lp.getTrackPublication(Track.Source.Camera)
-    if (pub?.track) n += 1
-  }
-  if (session.screenShareOn) {
-    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
-    if (pub?.track) n += 1
-  }
-  for (const rp of livekit.remoteParticipants.values()) {
-    for (const source of VISUAL_SOURCES) {
-      const pub = rp.getTrackPublication(source)
-      if (pub?.isSubscribed && pub.track && !pub.isMuted) n += 1
-    }
-  }
-  return n
-}
-
 const participantMediaFrom = (participant: Participant): ParticipantMediaState => ({
   muted: !participant.isMicrophoneEnabled,
   cameraOn: participant.isCameraEnabled,
@@ -872,6 +841,33 @@ const setUpMicrophone = async (
   return muted
 }
 
+const reacquireMicrophoneIfNeeded = async () => {
+  const session = get(currentCallSession)
+  if (!session || get(callMicMuted)) return
+
+  const track = session.livekit.localParticipant.getTrackPublication(
+    Track.Source.Microphone,
+  )?.audioTrack
+  if (!track || track.isMuted || track.isUserProvided) return
+
+  // Mirrors LiveKit's own (mobile-only, video-track-only) reacquisition
+  // check: a capture device that died silently still reports readyState
+  // "live", but the browser flips `muted`/`enabled` on the underlying
+  // MediaStreamTrack. Checking for actual silence instead would false-
+  // positive any time the user simply isn't talking.
+  const {mediaStreamTrack} = track
+  const needsReacquisition =
+    mediaStreamTrack.readyState !== "live" || mediaStreamTrack.muted || !mediaStreamTrack.enabled
+  if (!needsReacquisition) return
+
+  try {
+    await track.restartTrack()
+  } catch {
+    // Best-effort: the user can still recover via mute/unmute or by
+    // rejoining if reacquiring the mic fails here.
+  }
+}
+
 const clearReconnectSchedule = () => {
   if (reconnectTimeout !== undefined) {
     clearTimeout(reconnectTimeout)

src/app/components/Chat.svelte

@@ -26,6 +26,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
+  import PageContent from "@lib/components/PageContent.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import Button from "@lib/components/Button.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
@@ -263,67 +264,69 @@
   </div>
 </PageBar>
 
-<div class="flex flex-col-reverse gap-4 py-2 bg-surface scroll-container h-screen overflow-y-auto">
-  {#if missingRelayLists.length > 0}
-    <div class="py-12">
-      <div class="card flex flex-col gap-2 m-auto max-w-md items-center text-center">
-        <p class="flex gap-2 text-lg text-error">
-          <Icon icon={Danger} />
-          Direct messages are not enabled
-        </p>
-        <p>
-          Ask
-          {#each missingRelayLists as pubkey (pubkey)}
-            <ProfileLink {pubkey} />
-          {/each}
-          to enable direct messaging by opening this conversation in their $app.
-        </p>
+<div class="room flex min-h-0 min-w-0 flex-1 flex-col">
+  <PageContent class="flex flex-col-reverse gap-4 py-2 bg-surface !mb-0">
+    {#if missingRelayLists.length > 0}
+      <div class="py-12">
+        <div class="card flex flex-col gap-2 m-auto max-w-md items-center text-center">
+          <p class="flex gap-2 text-lg text-error">
+            <Icon icon={Danger} />
+            Direct messages are not enabled
+          </p>
+          <p>
+            Ask
+            {#each missingRelayLists as pubkey (pubkey)}
+              <ProfileLink {pubkey} />
+            {/each}
+            to enable direct messaging by opening this conversation in their $app.
+          </p>
+        </div>
       </div>
-    </div>
-  {/if}
-  {#each elements as { type, id, value, showPubkey } (id)}
-    {#if type === "date"}
-      <Divider>{value}</Divider>
-    {:else}
-      <ChatMessage
-        event={$state.snapshot(value as TrustedEvent)}
-        {pubkeys}
-        {showPubkey}
-        {replyTo}
-        canEdit={canEditEvent}
-        onEdit={onEditEvent} />
     {/if}
-  {/each}
-  <p class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
-    <Spinner {loading}>
-      {#if loading}
-        Looking for messages...
+    {#each elements as { type, id, value, showPubkey } (id)}
+      {#if type === "date"}
+        <Divider>{value}</Divider>
       {:else}
-        End of message history
+        <ChatMessage
+          event={$state.snapshot(value as TrustedEvent)}
+          {pubkeys}
+          {showPubkey}
+          {replyTo}
+          canEdit={canEditEvent}
+          onEdit={onEditEvent} />
       {/if}
-    </Spinner>
-    {@render info?.()}
-  </p>
-  <div class="h-screen"></div>
-</div>
+    {/each}
+    <p
+      class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
+      <Spinner {loading}>
+        {#if loading}
+          Looking for messages...
+        {:else}
+          End of message history
+        {/if}
+      </Spinner>
+      {@render info?.()}
+    </p>
+  </PageContent>
 
-<div class="room__compose bg-surface">
-  <div>
-    {#if parent}
-      <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
-    {/if}
-    {#if eventToEdit}
-      <ChatComposeEdit clear={clearEventToEdit} />
-    {/if}
+  <div class="room__compose bg-surface">
+    <div>
+      {#if parent}
+        <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
+      {/if}
+      {#if eventToEdit}
+        <ChatComposeEdit clear={clearEventToEdit} />
+      {/if}
+    </div>
+    {#key eventToEdit}
+      <ChatCompose
+        bind:this={compose}
+        {onSubmit}
+        {onEscape}
+        {onEditPrevious}
+        initialValues={eventToEdit}
+        draftKey={eventToEdit ? undefined : draftKey}
+        disabled={Boolean(missingRelayLists.length)} />
+    {/key}
   </div>
-  {#key eventToEdit}
-    <ChatCompose
-      bind:this={compose}
-      {onSubmit}
-      {onEscape}
-      {onEditPrevious}
-      initialValues={eventToEdit}
-      draftKey={eventToEdit ? undefined : draftKey}
-      disabled={Boolean(missingRelayLists.length)} />
-  {/key}
 </div>

src/app/components/MicLevelMeter.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import cx from "classnames"
+  import Microphone from "@assets/icons/microphone.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+
+  type Props = {
+    track: MediaStreamTrack | undefined
+    error?: string
+    offMessage?: string
+  }
+
+  const {track, error, offMessage = "Microphone is off"}: Props = $props()
+
+  let level = $state(0)
+
+  $effect(() => {
+    const t = track
+    level = 0
+
+    if (!t || error) return
+
+    let frame: number | undefined
+    const context = new AudioContext()
+    const analyser = context.createAnalyser()
+    analyser.fftSize = 512
+    context.createMediaStreamSource(new MediaStream([t])).connect(analyser)
+    const data = new Uint8Array(analyser.frequencyBinCount)
+
+    // Smooth into a plain local, not into `level` itself: reading the `$state`
+    // we also write would make this effect depend on its own output, so every
+    // frame would invalidate and re-run it, tearing down the AudioContext
+    // before it ever produced a reading.
+    let smoothed = 0
+
+    const tick = () => {
+      if (!t.enabled || t.readyState !== "live") {
+        smoothed = 0
+        level = 0
+        frame = requestAnimationFrame(tick)
+        return
+      }
+
+      analyser.getByteTimeDomainData(data)
+      let sumSquares = 0
+      for (const v of data) {
+        const normalized = (v - 128) / 128
+        sumSquares += normalized * normalized
+      }
+      const rms = Math.sqrt(sumSquares / data.length)
+      const NOISE_FLOOR = 0.03
+      const gated = rms < NOISE_FLOOR ? 0 : (rms - NOISE_FLOOR) / (1 - NOISE_FLOOR)
+      smoothed += (Math.min(1, gated * 4) - smoothed) * 0.5
+      if (smoothed < 0.005) smoothed = 0
+      level = smoothed
+      frame = requestAnimationFrame(tick)
+    }
+    tick()
+
+    return () => {
+      if (frame !== undefined) cancelAnimationFrame(frame)
+      context.close().catch(() => {})
+    }
+  })
+</script>
+
+<div class="flex items-center gap-2">
+  <Icon icon={Microphone} size={4} class="shrink-0 opacity-70" />
+  {#if error}
+    <p class="text-xs text-error" role="alert">{error}</p>
+  {:else if !track}
+    <p class="text-xs opacity-60">{offMessage}</p>
+  {:else}
+    <div
+      class="flex flex-1 items-center gap-1"
+      role="meter"
+      aria-label="Microphone input level"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(level * 100)}>
+      {#each Array(5) as _, i (i)}
+        <div
+          class={cx(
+            "h-2 flex-1 rounded-full transition-colors",
+            level * 5 > i ? "bg-success" : "bg-surface-more",
+          )}>
+        </div>
+      {/each}
+    </div>
+    <span class="shrink-0 text-xs opacity-60">Speak to test</span>
+  {/if}
+</div>

src/app/components/RoomChat.svelte

@@ -13,8 +13,11 @@
   import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import Login2 from "@assets/icons/login-3.svg?dataurl"
+  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
+  import Close from "@assets/icons/close.svg?dataurl"
   import {fade, fly} from "@lib/transition"
   import {popKey} from "@lib/implicit"
+  import {documentActive} from "@lib/html"
   import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -30,14 +33,7 @@
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import {deletes, relays, rooms, thunks, user} from "@app/core"
   import {publishRoomJoinRequest} from "@app/access"
-  import {
-    CallState,
-    callTargetRoom,
-    callState,
-    VideoCallLayout,
-    videoCallLayout,
-    videoTileCount,
-  } from "@app/call"
+  import {CallState, callTargetRoom, callState, VideoCallLayout, videoCallLayout} from "@app/call"
   import {
     PROTECTED,
     RoomType,
@@ -48,7 +44,7 @@
   } from "@app/rooms"
   import {userSettingsValues} from "@app/settings"
   import {makeFeed} from "@app/feeds"
-  import {checked, deferredRoomPath, setChecked} from "@app/notifications"
+  import {checked, deferredRoomPath, notifications, setChecked} from "@app/notifications"
   import {makeRoomPath} from "@app/routes"
   import {pushToast} from "@app/toast"
 
@@ -74,45 +70,53 @@
     isVoiceRoom && $callState === CallState.Connected && $videoCallLayout === VideoCallLayout.Video,
   )
 
-  const roomPath = h ? makeRoomPath(url, h) : undefined
+  // Basic pass at issue #121's "chat overlaid on video" idea: float the chat panel over
+  // the full-bleed video instead of splitting the screen into fixed columns, so the call
+  // stays the visual focus. The panel opens from — and collapses back to — a chat FAB.
+  const isOverlayChat = $derived(voiceConnectedHere && $videoCallLayout === VideoCallLayout.Split)
 
   const videoCallChatHidden = $derived(
     voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video,
   )
 
+  const roomPath = h ? makeRoomPath(url, h) : undefined
+  const chatUnread = $derived(roomPath !== undefined && $notifications.has(roomPath))
+
+  const openChat = () => videoCallLayout.set(VideoCallLayout.Split)
+  const closeChat = () => videoCallLayout.set(VideoCallLayout.Video)
+
   $effect(() => {
     deferredRoomPath.set(videoCallChatHidden ? roomPath : undefined)
     if (roomPath && voiceConnectedHere && !videoCallChatHidden) {
       setChecked(roomPath)
     }
+    // The messages pane (and its scroll position) is offscreen while the call view is
+    // showing — don't leave its floating "scroll down"/"new messages" chips stranded.
+    if (videoCallChatHidden) {
+      showScrollButton = false
+      showFixedNewMessages = false
+    }
   })
 
   onDestroy(() => deferredRoomPath.set(undefined))
 
-  let prevVideoTileCount = $state(0)
+  let wasConnectedHere = $state(false)
 
   $effect(() => {
-    if ($callState !== CallState.Connected) {
-      videoCallLayout.set(VideoCallLayout.Chat)
-      prevVideoTileCount = 0
+    if (!voiceConnectedHere) {
+      if ($callState !== CallState.Connected) {
+        videoCallLayout.set(VideoCallLayout.Chat)
+      }
+      wasConnectedHere = false
       return
     }
 
-    const here = isVoiceRoom && $callTargetRoom?.url === url && $callTargetRoom?.h === h
-    const n = $videoTileCount
-
-    if (!here) {
-      prevVideoTileCount = 0
-      return
-    }
-
-    if (prevVideoTileCount === 0 && n >= 1) {
+    // Land on the call view (chat as a FAB) as soon as the call starts here, whether
+    // or not anyone's camera is on — chat is one tap away via the FAB.
+    if (!wasConnectedHere) {
       videoCallLayout.set(VideoCallLayout.Video)
+      wasConnectedHere = true
     }
-    if (prevVideoTileCount >= 1 && n === 0 && $videoCallLayout === VideoCallLayout.Split) {
-      videoCallLayout.set(VideoCallLayout.Chat)
-    }
-    prevVideoTileCount = n
   })
 
   const shouldProtect = $relays.hasNip(url, 70)
@@ -301,8 +305,10 @@
     }
   }
 
-  const onVisibilityChange = () => {
-    if (document.hidden) {
+  // A tab can be `visible` but unfocused (user alt-tabbed to another app), so we
+  // can't rely on document.hidden alone to know the room is actually being watched.
+  const onActiveChange = (active: boolean) => {
+    if (!active) {
       lastVisibleAt = now()
     } else if ($events.some(e => e.pubkey !== $user.pubkey && e.created_at > lastVisibleAt)) {
       newMessagesAfter = lastVisibleAt
@@ -448,42 +454,61 @@
   const onEditPrevious = () => ifLet($events.toReversed().find(canEditEvent), onEditEvent)
 
   onMount(() => {
-    start()
+    // Defer rendering until navigation finishes
+    let frame = requestAnimationFrame(() => {
+      frame = requestAnimationFrame(start)
+    })
 
-    document.addEventListener("visibilitychange", onVisibilityChange)
+    const unsubscribeActive = documentActive.subscribe(onActiveChange)
 
     return () => {
-      // Wrap in a closure to avoid calling a stale cleanup function
       cleanup?.()
+      unsubscribeActive()
+      cancelAnimationFrame(frame)
       document.removeEventListener("visibilitychange", onVisibilityChange)
     }
   })
 </script>
 
-<div
-  class={cx(
-    "flex min-h-0 flex-1 flex-col",
-    voiceConnectedHere && $videoCallLayout === VideoCallLayout.Split && "md:flex-row",
-  )}>
+<div class={cx("flex min-h-0 flex-1 flex-col", isOverlayChat && "relative")}>
   {#if h && voiceConnectedHere}
     <VideoCallContent
       layout={$videoCallLayout}
       {url}
       {h}
-      class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
+      class={cx(
+        "hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex",
+        isOverlayChat && "md:absolute md:inset-0",
+      )} />
+  {/if}
+
+  {#if h && isVoiceRoom && $callState === CallState.Connected}
+    <VideoCallContent
+      layout={$videoCallLayout}
+      mobile
+      {url}
+      {h}
+      class={cx("md:hidden", isOverlayChat && "absolute inset-0")} />
   {/if}
 
   <div
     class={cx(
       "room flex min-h-0 min-w-0 flex-1 flex-col",
-      voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video && "md:hidden",
+      videoCallChatHidden && "hidden",
+      isOverlayChat &&
+        "absolute inset-x-2 top-4 bottom-[calc(3.5rem+var(--saib))] z-popover overflow-hidden rounded-2xl border border-line bg-surface/95 shadow-lg md:left-auto md:right-4 md:bottom-4 md:w-96 md:max-w-[26rem] md:bg-surface/90",
     )}>
-    {#if h}
-      <RoomPinnedMessages {url} {h} />
+    {#if isOverlayChat}
+      <Button
+        aria-label="Close room chat"
+        class="button button-neutral button-xs button-circle absolute right-2 top-2 z-popover"
+        onclick={closeChat}>
+        <Icon icon={Close} size={4} />
+      </Button>
     {/if}
 
-    {#if h && isVoiceRoom && $callState === CallState.Connected}
-      <VideoCallContent layout={$videoCallLayout} mobile {url} {h} class="md:hidden" />
+    {#if h}
+      <RoomPinnedMessages {url} {h} />
     {/if}
 
     <div
@@ -618,13 +643,27 @@
         <div
           class={cx(
             "hide-on-keyboard flex-shrink-0 p-2 md:hidden",
-            showMobileVideoPanel && "hidden",
+            videoCallChatHidden && "hidden",
           )}>
           <VoiceWidget />
         </div>
       {/if}
     </div>
   </div>
+
+  {#if videoCallChatHidden}
+    <Button
+      aria-label="Open room chat"
+      class="button button-primary button-circle fixed z-popover bottom-[calc(4.5rem+var(--saib))] right-4 shadow-lg md:bottom-4"
+      onclick={openChat}>
+      <Icon icon={ChatRound} size={5} />
+      {#if chatUnread}
+        <span
+          class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-primary ring-2 ring-surface"
+          aria-hidden="true"></span>
+      {/if}
+    </Button>
+  {/if}
 </div>
 
 {#if showScrollButton}

src/app/components/SpaceMenu.svelte

@@ -1,79 +1,13 @@
 <script lang="ts">
-  import {derived} from "svelte/store"
-  import cx from "classnames"
-  import {
-    displayRelayUrl,
-    EVENT_TIME,
-    ZAP_GOAL,
-    THREAD,
-    CLASSIFIED,
-    PINBOARD,
-    POLL,
-  } from "@welshman/util"
-  import {createSearch} from "@welshman/app"
-  import {fly} from "@lib/transition"
-  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
-  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
-  import UsersGroup from "@assets/icons/users-group-rounded.svg?dataurl"
-  import Home from "@assets/icons/home.svg?dataurl"
-  import GalleryWide from "@assets/icons/gallery-wide.svg?dataurl"
-  import Danger from "@assets/icons/danger.svg?dataurl"
-  import ServerPath from "@assets/icons/server-path.svg?dataurl"
-  import LinkRound from "@assets/icons/link-round.svg?dataurl"
-  import Pen from "@assets/icons/pen.svg?dataurl"
-  import Exit from "@assets/icons/logout-3.svg?dataurl"
-  import Letter from "@assets/icons/letter.svg?dataurl"
-  import Login from "@assets/icons/login-3.svg?dataurl"
-  import History from "@assets/icons/history.svg?dataurl"
-  import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic-2.svg?dataurl"
-  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
-  import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
-  import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
-  import Revote from "@assets/icons/revote.svg?dataurl"
-  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
-  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
-  import Bell from "@assets/icons/bell.svg?dataurl"
-  import BellOff from "@assets/icons/bell-off.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Popover from "@lib/components/Popover.svelte"
-  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
   import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
-  import SpaceInvite from "@app/components/SpaceInvite.svelte"
-  import SpaceExit from "@app/components/SpaceExit.svelte"
-  import SpaceEdit from "@app/components/SpaceEdit.svelte"
-  import SpaceJoin from "@app/components/SpaceJoin.svelte"
-  import RelayName from "@app/components/RelayName.svelte"
-  import SpaceActionItems from "@app/components/SpaceActionItems.svelte"
-  import SpaceSearch from "@app/components/SpaceSearch.svelte"
-  import RoomCreate from "@app/components/RoomCreate.svelte"
-  import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
+  import SpaceMenuHeader from "@app/components/SpaceMenuHeader.svelte"
+  import SpaceMenuNavItems from "@app/components/SpaceMenuNavItems.svelte"
+  import SpaceMenuRooms from "@app/components/SpaceMenuRooms.svelte"
+  import Link from "@lib/components/Link.svelte"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
-  import {relays, user} from "@app/core"
-  import {ENABLE_ZAPS} from "@app/env"
-  import {CONTENT_KINDS} from "@app/content"
-  import {deriveHostedRelay, HOSTING_ENABLED} from "@app/hosting"
-  import {
-    deriveSpaceSupportedMethods,
-    deriveUserCanCreateRoom,
-    deriveUserIsSpaceAdmin,
-  } from "@app/management"
-  import {
-    deriveOtherRooms,
-    deriveOtherVoiceRooms,
-    deriveUserRooms,
-    displayRoom,
-    userSpaceUrls,
-  } from "@app/rooms"
-  import {deriveEventsForUrl} from "@app/repository"
-  import {deriveSpaceActionItems} from "@app/actionItems"
-  import {notificationSettings, deriveShouldNotify, setSpaceNotifications} from "@app/settings"
-  import {pushModal} from "@app/modal"
-  import {makeSpacePath, goToChat} from "@app/routes"
-  import {notifications} from "@app/notifications"
+  import {makeSpacePath} from "@app/routes"
 
   type Props = {
     url: string
@@ -81,335 +15,45 @@
   }
 
   const {url, mobile = false}: Props = $props()
-
-  const relay = $relays.one(url)
-  const chatPath = makeSpacePath(url, "chat")
-  const goalsPath = makeSpacePath(url, "goals")
-  const threadsPath = makeSpacePath(url, "threads")
-  const classifiedsPath = makeSpacePath(url, "classifieds")
-  const calendarPath = makeSpacePath(url, "calendar")
-  const pollsPath = makeSpacePath(url, "polls")
-  const userRooms = deriveUserRooms(url)
-  const otherRooms = deriveOtherRooms(url)
-  const otherVoiceRooms = deriveOtherVoiceRooms(url)
-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
-  const hostedRelay = deriveHostedRelay(url)
-  const actionItems = deriveSpaceActionItems(url)
-
-  const spaceKinds = derived(
-    deriveEventsForUrl(url, [{kinds: CONTENT_KINDS}]),
-    $events => new Set($events.map(e => e.kind)),
-  )
-
-  const boardEvents = deriveEventsForUrl(url, [{kinds: [PINBOARD]}])
-  const hasNip29 = $derived($relay?.hasNip(29) ?? false)
-  const supportedMethods = deriveSpaceSupportedMethods(url)
-  const showLibrary = $derived($boardEvents.length > 0 || $supportedMethods.includes("signevent"))
-
-  const roomSearch = derived(otherRooms, $otherRooms =>
-    createSearch(
-      $otherRooms.map(h => ({h, name: displayRoom(url, h)})),
-      {
-        getValue: item => item.h,
-        fuseOptions: {keys: ["name"]},
-      },
-    ),
-  )
-
-  const openMenu = () => {
-    showMenu = true
-  }
-
-  const toggleMenu = () => {
-    showMenu = !showMenu
-  }
-
-  const startEdit = () => pushModal(SpaceEdit, {url, initialValues: $relay || {url}})
-
-  const showActionItems = () => pushModal(SpaceActionItems, {url})
-
-  const openSearch = () => pushModal(SpaceSearch, {url})
-
-  const canCreateRoom = deriveUserCanCreateRoom(url)
-
-  const createInvite = () => pushModal(SpaceInvite, {url})
-
-  const leaveSpace = () => pushModal(SpaceExit, {url})
-
-  const joinSpace = () => pushModal(SpaceJoin, {url})
-
-  const addRoom = () => pushModal(RoomCreate, {url})
-
-  const contactOwner = () => goToChat([$relay!.pubkey!])
-
-  const shouldNotify = deriveShouldNotify(url)
-
-  const toggleSpaceNotifications = () => {
-    setSpaceNotifications(url, !$shouldNotify)
-  }
-
-  const clearTerm = () => {
-    setTimeout(() => {
-      term = ""
-    }, 100)
-  }
-
-  let term = $state("")
-  let showMenu = $state(false)
-  let element: Element | undefined = $state()
 </script>
 
-{#snippet spaceHeader()}
-  <Button
-    class={cx(
-      mobile
-        ? "space-menu__header-button text-content"
-        : "relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-surface",
-    )}
-    onclick={openMenu}>
-    <div class="flex items-center justify-between">
-      <strong class="flex items-center gap-1 relative">
-        <RelayName {url} class="truncate min-w-0" />
-        <div
-          class={cx(
-            "absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary text-primary-content transition-all",
-            $userIsAdmin && $actionItems.length > 0 ? "opacity-100" : "opacity-0",
-          )}>
-        </div>
-        {#if $notificationSettings.push && !$shouldNotify}
-          <Icon icon={BellOff} size={3} class="opacity-50" />
-        {/if}
-      </strong>
-      <Icon icon={AltArrowDown} />
-    </div>
-    <span class="text-xs text-primary">{displayRelayUrl(url)}</span>
-  </Button>
-  {#if showMenu}
-    <Popover hideOnClick onClose={toggleMenu}>
-      <ul
-        transition:fly
-        class="menu absolute z-popover mt-2 w-full gap-1 rounded-2xl bg-surface p-2">
-        <li>
-          <Button onclick={createInvite}>
-            <Icon icon={LinkRound} />
-            Create Invite
-          </Button>
-        </li>
-        {#if $userIsAdmin}
-          <li>
-            <Button onclick={showActionItems}>
-              <Icon icon={Danger} />
-              Action Items ({$actionItems.length})
-              {#if $actionItems.length > 0}
-                <div class="h-2 w-2 rounded-full bg-primary text-primary-content"></div>
-              {/if}
-            </Button>
-          </li>
-        {/if}
-        {#if $relay?.pubkey && $relay.pubkey !== $user.pubkey}
-          <li>
-            <Button onclick={contactOwner}>
-              <Icon icon={Letter} />
-              Contact Owner
-            </Button>
-          </li>
-        {/if}
-        <li>
-          {#if $notificationSettings.push}
-            <Button onclick={toggleSpaceNotifications}>
-              <Icon icon={$shouldNotify ? Bell : BellOff} />
-              {$shouldNotify ? "Turn off" : "Turn on"} notifications
-            </Button>
-          {:else}
-            <Link href="/settings/alerts">
-              <Icon icon={Bell} />
-              Enable notifications
-            </Link>
-          {/if}
-        </li>
-        {#if HOSTING_ENABLED && $hostedRelay.relay}
-          <li>
-            <Link href={makeSpacePath(url, "admin")}>
-              <Icon icon={ServerPath} />
-              Hosting settings
-            </Link>
-          </li>
-        {:else if $userIsAdmin}
-          <li>
-            <Button onclick={startEdit}>
-              <Icon icon={Pen} />
-              Edit Space
-            </Button>
-          </li>
-        {/if}
-        <li>
-          {#if $userSpaceUrls.includes(url)}
-            <Button onclick={leaveSpace} class="text-error">
-              <Icon icon={Exit} />
-              Leave Space
-            </Button>
-          {:else}
-            <Button
-              onclick={joinSpace}
-              class="bg-primary text-primary-content"
-              style="color: var(--primary-content)">
-              <Icon icon={Login} />
-              Join Space
-            </Button>
-          {/if}
-        </li>
-      </ul>
-    </Popover>
-  {/if}
-{/snippet}
-
-{#snippet spaceNavItems()}
-  <SecondaryNavItem href={makeSpacePath(url, "about")}>
-    <Icon icon={Home} /> Space Details
-  </SecondaryNavItem>
-  {#if hasNip29}
-    <SecondaryNavItem href={makeSpacePath(url, "recent")}>
-      <Icon icon={History} /> Recent Activity
-    </SecondaryNavItem>
-  {:else}
-    <SecondaryNavItem href={chatPath} notification={$notifications.has(chatPath)}>
-      <Icon icon={ChatRound} /> Chat
-    </SecondaryNavItem>
-  {/if}
-  <SecondaryNavItem href={makeSpacePath(url, "directory")}>
-    <Icon icon={UsersGroup} /> Directory
-  </SecondaryNavItem>
-  {#if showLibrary}
-    <SecondaryNavItem href={makeSpacePath(url, "library")}>
-      <Icon icon={GalleryWide} /> Library
-    </SecondaryNavItem>
-  {/if}
-  {#if ENABLE_ZAPS && $spaceKinds.has(ZAP_GOAL)}
-    <SecondaryNavItem href={goalsPath}>
-      <Icon icon={StarFallMinimalistic} /> Goals
-    </SecondaryNavItem>
-  {/if}
-  {#if $spaceKinds.has(THREAD)}
-    <SecondaryNavItem href={threadsPath}>
-      <Icon icon={NotesMinimalistic} /> Threads
-    </SecondaryNavItem>
-  {/if}
-  {#if $spaceKinds.has(CLASSIFIED)}
-    <SecondaryNavItem href={classifiedsPath}>
-      <Icon icon={CaseMinimalistic} /> Classifieds
-    </SecondaryNavItem>
-  {/if}
-  {#if $spaceKinds.has(EVENT_TIME)}
-    <SecondaryNavItem href={calendarPath}>
-      <Icon icon={CalendarMinimalistic} /> Calendar
-    </SecondaryNavItem>
-  {/if}
-  {#if $spaceKinds.has(POLL)}
-    <SecondaryNavItem href={pollsPath}>
-      <Icon icon={Revote} /> Polls
-    </SecondaryNavItem>
-  {/if}
-  {#if hasNip29}
-    <SecondaryNavItem onclick={openSearch}>
-      <Icon icon={Magnifier} /> Search
-    </SecondaryNavItem>
-  {/if}
-{/snippet}
-
-{#snippet spaceRooms()}
-  {#if hasNip29}
-    {#if $userRooms.length > 0}
-      {#if !mobile}
-        <div class="h-2 shrink-0"></div>
-      {/if}
-      <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
-    {/if}
-    {#each $userRooms as h (h)}
-      <SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
-    {/each}
-    {#if $otherRooms.length > 0}
-      {#if !mobile}
-        <div class="h-2 shrink-0"></div>
-      {/if}
-      <SecondaryNavHeader>
-        {#if $userRooms.length > 0}
-          Other Rooms
-        {:else}
-          Rooms
-        {/if}
-      </SecondaryNavHeader>
-    {/if}
-    {#if $otherRooms.length > 20}
-      <label class="input input-sm flex items-center gap-2">
-        <Icon icon={Magnifier} />
-        <input bind:value={term} onblur={clearTerm} class="grow" />
-      </label>
-    {/if}
-    {#each $roomSearch.searchValues(term) as h (h)}
-      <SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
-    {/each}
-    {#if $otherVoiceRooms.length > 0}
-      {#if !mobile}
-        <div class="h-2 shrink-0"></div>
-      {/if}
-      <SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
-      {#each $otherVoiceRooms as h (h)}
-        <SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
-      {/each}
-    {/if}
-    {#if $canCreateRoom}
-      <SecondaryNavItem onclick={addRoom}>
-        <Icon icon={AddCircle} />
-        Create room
-      </SecondaryNavItem>
-    {/if}
-  {/if}
-{/snippet}
-
-{#snippet spaceFooter()}
-  <VoiceWidget />
-  <Link
-    href={makeSpacePath(url, "about")}
-    class={cx(mobile ? "space-menu__status-link" : "button button-neutral button-sm h-10")}>
-    <SocketStatusIndicator {url} />
-  </Link>
-{/snippet}
-
-<div bind:this={element} class="flex min-h-0 flex-1 flex-col">
+<div class="flex min-h-0 flex-1 flex-col">
   {#if mobile}
     <SecondaryNavSection class="space-menu min-h-0 flex-1 flex flex-col gap-3 p-0">
       <div class="card space-menu__card space-menu__header shrink-0 z-nav-item">
-        {@render spaceHeader()}
+        <SpaceMenuHeader {url} mobile />
       </div>
       <div class="space-menu__scroll flex flex-col -mt-12 pt-12 -mb-8 pb-8">
         <div class="card space-menu__card flex flex-col gap-1">
           <SecondaryNavHeader>Space</SecondaryNavHeader>
-          {@render spaceNavItems()}
+          <SpaceMenuNavItems {url} />
         </div>
-        {#if hasNip29 && ($userRooms.length > 0 || $otherRooms.length > 0 || $otherVoiceRooms.length > 0 || $canCreateRoom)}
-          <div class="card space-menu__card flex flex-col gap-1">
-            {@render spaceRooms()}
-          </div>
-        {/if}
+        <SpaceMenuRooms {url} mobile />
       </div>
       <div class="card space-menu__card space-menu__status shrink-0 z-nav-item">
-        {@render spaceFooter()}
+        <VoiceWidget />
+        <Link href={makeSpacePath(url, "about")} class="space-menu__status-link">
+          <SocketStatusIndicator {url} />
+        </Link>
       </div>
     </SecondaryNavSection>
   {:else}
     <SecondaryNavSection class="min-h-0 flex-1 flex flex-col pb-0">
       <div class="shrink-0">
-        {@render spaceHeader()}
+        <SpaceMenuHeader {url} />
       </div>
       <div
         class="space-menu__scroll flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto py-1">
-        {@render spaceNavItems()}
-        {@render spaceRooms()}
+        <SpaceMenuNavItems {url} />
+        <SpaceMenuRooms {url} />
         <div class="h-5 shrink-0"></div>
       </div>
     </SecondaryNavSection>
     <div class="flex shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-1 md:pb-2 z-nav">
-      {@render spaceFooter()}
+      <VoiceWidget />
+      <Link href={makeSpacePath(url, "about")} class="button button-neutral button-sm h-10">
+        <SocketStatusIndicator {url} />
+      </Link>
     </div>
   {/if}
 </div>

src/app/components/SpaceMenuActions.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import cx from "classnames"
+  import Danger from "@assets/icons/danger.svg?dataurl"
+  import ServerPath from "@assets/icons/server-path.svg?dataurl"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Pen from "@assets/icons/pen.svg?dataurl"
+  import Exit from "@assets/icons/logout-3.svg?dataurl"
+  import Letter from "@assets/icons/letter.svg?dataurl"
+  import Login from "@assets/icons/login-3.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import SpaceInvite from "@app/components/SpaceInvite.svelte"
+  import SpaceExit from "@app/components/SpaceExit.svelte"
+  import SpaceEdit from "@app/components/SpaceEdit.svelte"
+  import SpaceJoin from "@app/components/SpaceJoin.svelte"
+  import SpaceActionItems from "@app/components/SpaceActionItems.svelte"
+  import {relays, user} from "@app/core"
+  import {deriveHostedRelay, HOSTING_ENABLED} from "@app/hosting"
+  import {deriveUserIsSpaceAdmin} from "@app/management"
+  import {userSpaceUrls} from "@app/rooms"
+  import {deriveSpaceActionItems} from "@app/actionItems"
+  import {notificationSettings, deriveShouldNotify, setSpaceNotifications} from "@app/settings"
+  import {pushModal, popModal} from "@app/modal"
+  import {makeSpacePath, goToChat} from "@app/routes"
+
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const relay = $relays.one(url)
+  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const hostedRelay = deriveHostedRelay(url)
+  const actionItems = deriveSpaceActionItems(url)
+  const shouldNotify = deriveShouldNotify(url)
+
+  const createInvite = () => pushModal(SpaceInvite, {url})
+
+  const startEdit = () => pushModal(SpaceEdit, {url, initialValues: $relay || {url}})
+
+  const leaveSpace = () => pushModal(SpaceExit, {url})
+
+  const joinSpace = () => pushModal(SpaceJoin, {url})
+
+  const showActionItems = () => pushModal(SpaceActionItems, {url})
+
+  const contactOwner = () => goToChat([$relay!.pubkey!])
+
+  const toggleSpaceNotifications = () => {
+    popModal()
+    setSpaceNotifications(url, !$shouldNotify)
+  }
+</script>
+
+{#snippet actionButton(
+  onclick: () => void,
+  icon: string,
+  label: string,
+  variant?: "error" | "primary",
+)}
+  <li>
+    <Button
+      {onclick}
+      class={cx({
+        "text-error": variant === "error",
+        "bg-primary text-primary-content": variant === "primary",
+      })}
+      style={variant === "primary" ? "color: var(--primary-content)" : undefined}>
+      <Icon {icon} />
+      {label}
+    </Button>
+  </li>
+{/snippet}
+
+{@render actionButton(createInvite, LinkRound, "Create Invite")}
+{#if $userIsAdmin}
+  <li>
+    <Button onclick={showActionItems}>
+      <Icon icon={Danger} />
+      Action Items ({$actionItems.length})
+      {#if $actionItems.length > 0}
+        <div class="h-2 w-2 rounded-full bg-primary text-primary-content"></div>
+      {/if}
+    </Button>
+  </li>
+{/if}
+{#if $relay?.pubkey && $relay.pubkey !== $user.pubkey}
+  {@render actionButton(contactOwner, Letter, "Contact Owner")}
+{/if}
+{#if $notificationSettings.push}
+  {@render actionButton(
+    toggleSpaceNotifications,
+    $shouldNotify ? Bell : BellOff,
+    `${$shouldNotify ? "Turn off" : "Turn on"} notifications`,
+  )}
+{:else}
+  <li>
+    <Link href="/settings/alerts">
+      <Icon icon={Bell} />
+      Enable notifications
+    </Link>
+  </li>
+{/if}
+{#if HOSTING_ENABLED && $hostedRelay.relay}
+  <li>
+    <Link href={makeSpacePath(url, "admin")}>
+      <Icon icon={ServerPath} />
+      Hosting settings
+    </Link>
+  </li>
+{:else if $userIsAdmin}
+  {@render actionButton(startEdit, Pen, "Edit Space")}
+{/if}
+{#if $userSpaceUrls.includes(url)}
+  {@render actionButton(leaveSpace, Exit, "Leave Space", "error")}
+{:else}
+  {@render actionButton(joinSpace, Login, "Join Space", "primary")}
+{/if}

src/app/components/SpaceMenuActionsMobile.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import cx from "classnames"
+  import Danger from "@assets/icons/danger.svg?dataurl"
+  import ServerPath from "@assets/icons/server-path.svg?dataurl"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Pen from "@assets/icons/pen.svg?dataurl"
+  import Exit from "@assets/icons/logout-3.svg?dataurl"
+  import Letter from "@assets/icons/letter.svg?dataurl"
+  import Login from "@assets/icons/login-3.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import SpaceInvite from "@app/components/SpaceInvite.svelte"
+  import SpaceExit from "@app/components/SpaceExit.svelte"
+  import SpaceEdit from "@app/components/SpaceEdit.svelte"
+  import SpaceJoin from "@app/components/SpaceJoin.svelte"
+  import SpaceActionItems from "@app/components/SpaceActionItems.svelte"
+  import {relays, user} from "@app/core"
+  import {deriveHostedRelay, HOSTING_ENABLED} from "@app/hosting"
+  import {deriveUserIsSpaceAdmin} from "@app/management"
+  import {userSpaceUrls} from "@app/rooms"
+  import {deriveSpaceActionItems} from "@app/actionItems"
+  import {notificationSettings, deriveShouldNotify, setSpaceNotifications} from "@app/settings"
+  import {pushModal, popModal} from "@app/modal"
+  import {makeSpacePath, goToChat} from "@app/routes"
+
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const relay = $relays.one(url)
+  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const hostedRelay = deriveHostedRelay(url)
+  const actionItems = deriveSpaceActionItems(url)
+  const shouldNotify = deriveShouldNotify(url)
+
+  const createInvite = () => pushModal(SpaceInvite, {url}, {replaceState: true})
+
+  const startEdit = () =>
+    pushModal(SpaceEdit, {url, initialValues: $relay || {url}}, {replaceState: true})
+
+  const leaveSpace = () => pushModal(SpaceExit, {url}, {replaceState: true})
+
+  const joinSpace = () => pushModal(SpaceJoin, {url}, {replaceState: true})
+
+  const showActionItems = () => pushModal(SpaceActionItems, {url}, {replaceState: true})
+
+  const contactOwner = () => goToChat([$relay!.pubkey!], {replaceState: true})
+
+  const toggleSpaceNotifications = () => {
+    popModal()
+    setSpaceNotifications(url, !$shouldNotify)
+  }
+</script>
+
+{#snippet actionButton(
+  onclick: () => void,
+  icon: string,
+  label: string,
+  variant?: "error" | "primary",
+)}
+  <Button
+    class={cx("button w-full justify-start", {
+      "button-neutral": !variant,
+      "button-error": variant === "error",
+      "button-primary": variant === "primary",
+    })}
+    {onclick}>
+    <Icon size={4} {icon} />
+    {label}
+  </Button>
+{/snippet}
+
+{@render actionButton(createInvite, LinkRound, "Create Invite")}
+{#if $userIsAdmin}
+  <Button class="button button-neutral w-full justify-start" onclick={showActionItems}>
+    <Icon size={4} icon={Danger} />
+    Action Items ({$actionItems.length})
+    {#if $actionItems.length > 0}
+      <div class="h-2 w-2 rounded-full bg-primary text-primary-content"></div>
+    {/if}
+  </Button>
+{/if}
+{#if $relay?.pubkey && $relay.pubkey !== $user.pubkey}
+  {@render actionButton(contactOwner, Letter, "Contact Owner")}
+{/if}
+{#if $notificationSettings.push}
+  {@render actionButton(
+    toggleSpaceNotifications,
+    $shouldNotify ? Bell : BellOff,
+    `${$shouldNotify ? "Turn off" : "Turn on"} notifications`,
+  )}
+{:else}
+  <Link href="/settings/alerts" replaceState class="button button-neutral w-full justify-start">
+    <Icon size={4} icon={Bell} />
+    Enable notifications
+  </Link>
+{/if}
+{#if HOSTING_ENABLED && $hostedRelay.relay}
+  <Link
+    href={makeSpacePath(url, "admin")}
+    replaceState
+    class="button button-neutral w-full justify-start">
+    <Icon size={4} icon={ServerPath} />
+    Hosting settings
+  </Link>
+{:else if $userIsAdmin}
+  {@render actionButton(startEdit, Pen, "Edit Space")}
+{/if}
+{#if $userSpaceUrls.includes(url)}
+  {@render actionButton(leaveSpace, Exit, "Leave Space", "error")}
+{:else}
+  {@render actionButton(joinSpace, Login, "Join Space", "primary")}
+{/if}

src/app/components/SpaceMenuHeader.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {displayRelayUrl} from "@welshman/util"
+  import {fly} from "@lib/transition"
+  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.svelte"
+  import SpaceMenuMobile from "@app/components/SpaceMenuMobile.svelte"
+  import SpaceMenuActions from "@app/components/SpaceMenuActions.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import {deriveUserIsSpaceAdmin} from "@app/management"
+  import {deriveSpaceActionItems} from "@app/actionItems"
+  import {notificationSettings, deriveShouldNotify} from "@app/settings"
+  import {pushModal} from "@app/modal"
+
+  type Props = {
+    url: string
+    mobile?: boolean
+  }
+
+  const {url, mobile = false}: Props = $props()
+
+  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const actionItems = deriveSpaceActionItems(url)
+  const shouldNotify = deriveShouldNotify(url)
+
+  const openMenu = () => {
+    if (mobile) {
+      pushModal(SpaceMenuMobile, {url})
+    } else {
+      showMenu = true
+    }
+  }
+
+  const toggleMenu = () => {
+    showMenu = !showMenu
+  }
+
+  let showMenu = $state(false)
+</script>
+
+<Button
+  class={cx(
+    mobile
+      ? "space-menu__header-button text-content"
+      : "relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-surface",
+  )}
+  onclick={openMenu}>
+  <div class="flex items-center justify-between">
+    <strong class="flex items-center gap-1 relative">
+      <RelayName {url} class="truncate min-w-0" />
+      <div
+        class={cx(
+          "absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary text-primary-content transition-all",
+          $userIsAdmin && $actionItems.length > 0 ? "opacity-100" : "opacity-0",
+        )}>
+      </div>
+      {#if $notificationSettings.push && !$shouldNotify}
+        <Icon icon={BellOff} size={3} class="opacity-50" />
+      {/if}
+    </strong>
+    <Icon icon={AltArrowDown} />
+  </div>
+  <span class="text-xs text-primary">{displayRelayUrl(url)}</span>
+</Button>
+{#if showMenu && !mobile}
+  <Popover hideOnClick onClose={toggleMenu}>
+    <ul transition:fly class="menu absolute z-popover mt-2 w-full gap-1 rounded-2xl bg-surface p-2">
+      <SpaceMenuActions {url} />
+    </ul>
+  </Popover>
+{/if}

src/app/components/SpaceMenuMobile.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import SpaceMenuActionsMobile from "@app/components/SpaceMenuActionsMobile.svelte"
+
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
+</script>
+
+<Modal>
+  <ModalBody>
+    <div class="flex flex-col gap-2">
+      <SpaceMenuActionsMobile {url} />
+    </div>
+  </ModalBody>
+</Modal>

src/app/components/SpaceMenuNavItems.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import {derived} from "svelte/store"
+  import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED, PINBOARD, POLL} from "@welshman/util"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import UsersGroup from "@assets/icons/users-group-rounded.svg?dataurl"
+  import Home from "@assets/icons/home.svg?dataurl"
+  import GalleryWide from "@assets/icons/gallery-wide.svg?dataurl"
+  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
+  import History from "@assets/icons/history.svg?dataurl"
+  import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic-2.svg?dataurl"
+  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
+  import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
+  import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
+  import Revote from "@assets/icons/revote.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SpaceSearch from "@app/components/SpaceSearch.svelte"
+  import {relays} from "@app/core"
+  import {ENABLE_ZAPS} from "@app/env"
+  import {CONTENT_KINDS} from "@app/content"
+  import {deriveSpaceSupportedMethods} from "@app/management"
+  import {deriveEventsForUrl} from "@app/repository"
+  import {makeSpacePath} from "@app/routes"
+  import {notifications} from "@app/notifications"
+  import {pushModal} from "@app/modal"
+
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const relay = $relays.one(url)
+  const chatPath = makeSpacePath(url, "chat")
+  const goalsPath = makeSpacePath(url, "goals")
+  const threadsPath = makeSpacePath(url, "threads")
+  const classifiedsPath = makeSpacePath(url, "classifieds")
+  const calendarPath = makeSpacePath(url, "calendar")
+  const pollsPath = makeSpacePath(url, "polls")
+
+  const spaceKinds = derived(
+    deriveEventsForUrl(url, [{kinds: CONTENT_KINDS}]),
+    $events => new Set($events.map(e => e.kind)),
+  )
+
+  const boardEvents = deriveEventsForUrl(url, [{kinds: [PINBOARD]}])
+  const hasNip29 = $derived($relay?.hasNip(29) ?? false)
+  const supportedMethods = deriveSpaceSupportedMethods(url)
+  const showLibrary = $derived($boardEvents.length > 0 || $supportedMethods.includes("signevent"))
+
+  const openSearch = () => pushModal(SpaceSearch, {url})
+</script>
+
+<SecondaryNavItem href={makeSpacePath(url, "about")}>
+  <Icon icon={Home} /> Space Details
+</SecondaryNavItem>
+{#if hasNip29}
+  <SecondaryNavItem href={makeSpacePath(url, "recent")}>
+    <Icon icon={History} /> Recent Activity
+  </SecondaryNavItem>
+{:else}
+  <SecondaryNavItem href={chatPath} notification={$notifications.has(chatPath)}>
+    <Icon icon={ChatRound} /> Chat
+  </SecondaryNavItem>
+{/if}
+<SecondaryNavItem href={makeSpacePath(url, "directory")}>
+  <Icon icon={UsersGroup} /> Directory
+</SecondaryNavItem>
+{#if showLibrary}
+  <SecondaryNavItem href={makeSpacePath(url, "library")}>
+    <Icon icon={GalleryWide} /> Library
+  </SecondaryNavItem>
+{/if}
+{#if ENABLE_ZAPS && $spaceKinds.has(ZAP_GOAL)}
+  <SecondaryNavItem href={goalsPath}>
+    <Icon icon={StarFallMinimalistic} /> Goals
+  </SecondaryNavItem>
+{/if}
+{#if $spaceKinds.has(THREAD)}
+  <SecondaryNavItem href={threadsPath}>
+    <Icon icon={NotesMinimalistic} /> Threads
+  </SecondaryNavItem>
+{/if}
+{#if $spaceKinds.has(CLASSIFIED)}
+  <SecondaryNavItem href={classifiedsPath}>
+    <Icon icon={CaseMinimalistic} /> Classifieds
+  </SecondaryNavItem>
+{/if}
+{#if $spaceKinds.has(EVENT_TIME)}
+  <SecondaryNavItem href={calendarPath}>
+    <Icon icon={CalendarMinimalistic} /> Calendar
+  </SecondaryNavItem>
+{/if}
+{#if $spaceKinds.has(POLL)}
+  <SecondaryNavItem href={pollsPath}>
+    <Icon icon={Revote} /> Polls
+  </SecondaryNavItem>
+{/if}
+{#if hasNip29}
+  <SecondaryNavItem onclick={openSearch}>
+    <Icon icon={Magnifier} /> Search
+  </SecondaryNavItem>
+{/if}

src/app/components/SpaceMenuRooms.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import {derived} from "svelte/store"
+  import {createSearch} from "@welshman/app"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
+  import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
+  import RoomCreate from "@app/components/RoomCreate.svelte"
+  import {relays} from "@app/core"
+  import {deriveUserCanCreateRoom} from "@app/management"
+  import {deriveUserRooms, deriveOtherRooms, deriveOtherVoiceRooms, displayRoom} from "@app/rooms"
+  import {pushModal} from "@app/modal"
+
+  type Props = {
+    url: string
+    mobile?: boolean
+  }
+
+  const {url, mobile = false}: Props = $props()
+
+  const relay = $relays.one(url)
+  const userRooms = deriveUserRooms(url)
+  const otherRooms = deriveOtherRooms(url)
+  const otherVoiceRooms = deriveOtherVoiceRooms(url)
+  const canCreateRoom = deriveUserCanCreateRoom(url)
+
+  const roomSearch = derived(otherRooms, $otherRooms =>
+    createSearch(
+      $otherRooms.map(h => ({h, name: displayRoom(url, h)})),
+      {
+        getValue: item => item.h,
+        fuseOptions: {keys: ["name"]},
+      },
+    ),
+  )
+
+  const addRoom = () => pushModal(RoomCreate, {url})
+
+  const clearTerm = () => {
+    setTimeout(() => {
+      term = ""
+    }, 100)
+  }
+
+  let term = $state("")
+</script>
+
+{#snippet content()}
+  {#if $userRooms.length > 0}
+    {#if !mobile}
+      <div class="h-2 shrink-0"></div>
+    {/if}
+    <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
+  {/if}
+  {#each $userRooms as h (h)}
+    <SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
+  {/each}
+  {#if $otherRooms.length > 0}
+    {#if !mobile}
+      <div class="h-2 shrink-0"></div>
+    {/if}
+    <SecondaryNavHeader>
+      {#if $userRooms.length > 0}
+        Other Rooms
+      {:else}
+        Rooms
+      {/if}
+    </SecondaryNavHeader>
+  {/if}
+  {#if $otherRooms.length > 20}
+    <label class="input input-sm flex items-center gap-2">
+      <Icon icon={Magnifier} />
+      <input bind:value={term} onblur={clearTerm} class="grow" />
+    </label>
+  {/if}
+  {#each $roomSearch.searchValues(term) as h (h)}
+    <SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
+  {/each}
+  {#if $otherVoiceRooms.length > 0}
+    {#if !mobile}
+      <div class="h-2 shrink-0"></div>
+    {/if}
+    <SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
+    {#each $otherVoiceRooms as h (h)}
+      <SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
+    {/each}
+  {/if}
+  {#if $canCreateRoom}
+    <SecondaryNavItem onclick={addRoom}>
+      <Icon icon={AddCircle} />
+      Create room
+    </SecondaryNavItem>
+  {/if}
+{/snippet}
+
+{#if ($relay?.hasNip(29) ?? false) && ($userRooms.length > 0 || $otherRooms.length > 0 || $otherVoiceRooms.length > 0 || $canCreateRoom)}
+  {#if mobile}
+    <div class="card space-menu__card flex flex-col gap-1">
+      {@render content()}
+    </div>
+  {:else}
+    {@render content()}
+  {/if}
+{/if}

src/app/components/VideoCallContent.svelte

@@ -2,7 +2,6 @@
   import {spec} from "@welshman/lib"
   import cx from "classnames"
   import {Track} from "livekit-client"
-  import {get} from "svelte/store"
   import Pin from "@assets/icons/pin.svg?dataurl"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -12,11 +11,7 @@
   import VoiceParticipantMediaBadges from "@app/components/VoiceParticipantMediaBadges.svelte"
   import {
     VideoCallLayout,
-    isDesktopLayout,
     toggleVideoPrimaryTile,
-    videoCallLayout,
-    videoCallViewportSync,
-    ViewportSize,
     videoPrimaryTileKey,
     currentCallSession,
     callTargetRoom,
@@ -49,32 +44,13 @@
 
   const {layout, mobile = false, url, h, class: className = ""}: Props = $props()
 
-  $effect(() => {
-    const currentLayout = isDesktopLayout.current ? ViewportSize.Desktop : ViewportSize.Mobile
-    const {previousLayout} = videoCallViewportSync
-    if (previousLayout === undefined) {
-      videoCallViewportSync.previousLayout = currentLayout
-      return
-    }
-    if (previousLayout === currentLayout) return
-    const p = get(videoCallLayout)
-    if (previousLayout === ViewportSize.Desktop && currentLayout === ViewportSize.Mobile) {
-      if (p === VideoCallLayout.Split) videoCallLayout.set(VideoCallLayout.Video)
-    } else if (previousLayout === ViewportSize.Mobile && currentLayout === ViewportSize.Desktop) {
-      if (p === VideoCallLayout.Chat) videoCallLayout.set(VideoCallLayout.Split)
-    }
-    videoCallViewportSync.previousLayout = currentLayout
-  })
-
   const isViewingCurrentCallRoom = $derived(
     $callTargetRoom?.url === url && $callTargetRoom?.h === h,
   )
 
   const showVideoContent = $derived(
     isViewingCurrentCallRoom &&
-      (mobile
-        ? layout === VideoCallLayout.Video
-        : layout === VideoCallLayout.Split || layout === VideoCallLayout.Video),
+      (layout === VideoCallLayout.Split || layout === VideoCallLayout.Video),
   )
 
   const videoTiles = $derived.by(() => {
@@ -225,6 +201,7 @@
 
 {#snippet videoTile(tile: VideoTileData, layout: TileLayoutVariant)}
   {@const media = $mediaStateByIdentity(tile.liveKitIdentity)}
+  {@const label = labelFor(tile.liveKitIdentity, tile.source)}
   <div
     class={cx(
       "relative isolate overflow-hidden rounded-2xl shadow-sm",
@@ -255,12 +232,13 @@
     {/if}
     <span
       class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-surface/80 px-1.5 py-0.5 text-xs">
-      {labelFor(tile.liveKitIdentity, tile.source)}{tile.isLocal ? " (you)" : ""}
+      {label}{tile.isLocal ? " (you)" : ""}
     </span>
     {#if videoTiles.length > 1}
       {@const pinned = $videoPrimaryTileKey === tileKey(tile)}
       <Button
         data-tip={pinned ? "Exit spotlight" : "Spotlight"}
+        aria-label={pinned ? `Exit spotlight for ${label}` : `Spotlight ${label}`}
         aria-pressed={pinned}
         class={cx(
           `button button-${pinned ? "primary" : "ghost"} button-xs button-square`,
@@ -292,7 +270,7 @@
       <div
         bind:clientWidth={gridWidth}
         bind:clientHeight={gridHeight}
-        class="min-h-0 flex-1 overflow-y-auto">
+        class="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">
         {#if tileGrid}
           <div class="flex flex-col items-center gap-2">
             {#each tileGrid.rows as row, rowIndex}
@@ -300,7 +278,7 @@
                 .slice(0, rowIndex)
                 .reduce((sum, r) => sum + r.columnCount, 0)}
               <div
-                class="flex flex-wrap justify-center gap-2"
+                class="flex flex-nowrap justify-center gap-2"
                 style={`max-width: ${row.columnCount * row.tileWidth + (row.columnCount - 1) * 8}px`}>
                 {#each videoTiles.slice(offset, offset + row.columnCount) as tile (tileKey(tile))}
                   <div
@@ -327,7 +305,7 @@
   <div class={panelChrome}>
     {#if mobile}
       <div class="flex min-h-0 flex-1 flex-col gap-2">
-        <div class="min-h-0 flex-1 overflow-hidden">
+        <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
           {@render videoPanelBody()}
         </div>
         <div class="shrink-0 pb-2">

src/app/components/VoiceCallAudioSettingsDialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {spec} from "@welshman/lib"
+  import {RoomEvent, Track} from "livekit-client"
   import Button from "@lib/components/Button.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Modal from "@lib/components/Modal.svelte"
@@ -8,6 +9,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import MicLevelMeter from "@app/components/MicLevelMeter.svelte"
   import {
     currentCallSession,
     DeviceKind,
@@ -31,6 +33,11 @@
   let selectedInput = $state("")
   let selectedOutput = $state("")
   let selectedVideo = $state("")
+  let micTrack = $state<MediaStreamTrack | undefined>(undefined)
+
+  const readMicTrack = (session: CallSession): MediaStreamTrack | undefined =>
+    session.livekit.localParticipant.getTrackPublication(Track.Source.Microphone)?.track
+      ?.mediaStreamTrack
 
   const loadDevices = async () => {
     if (!navigator.mediaDevices?.enumerateDevices) return
@@ -61,10 +68,29 @@
     selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
     selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
     selectedVideo = selectValueForActiveDevice(session, DeviceKind.VideoInput)
+
+    // Mic mute/unmute publishes or unpublishes the microphone track; keep the
+    // level meter in sync with whichever track is actually live right now.
+    const {livekit} = session
+    const refreshMicTrack = () => {
+      micTrack = readMicTrack(session)
+    }
+    refreshMicTrack()
+    livekit.on(RoomEvent.LocalTrackPublished, refreshMicTrack)
+    livekit.on(RoomEvent.LocalTrackUnpublished, refreshMicTrack)
+    return () => {
+      livekit.off(RoomEvent.LocalTrackPublished, refreshMicTrack)
+      livekit.off(RoomEvent.LocalTrackUnpublished, refreshMicTrack)
+    }
   })
 
-  const onInputChange = () => {
-    void switchCallActiveDevice(DeviceKind.AudioInput, selectedInput)
+  const onInputChange = async () => {
+    await switchCallActiveDevice(DeviceKind.AudioInput, selectedInput)
+    // Switching the active device restarts the existing LocalAudioTrack in
+    // place with a new MediaStreamTrack rather than emitting a publish event,
+    // so the meter needs an explicit re-read here.
+    const session = $currentCallSession
+    if (session) micTrack = readMicTrack(session)
   }
 
   const onOutputChange = () => {
@@ -109,6 +135,7 @@
           </select>
         {/snippet}
       </FieldInline>
+      <MicLevelMeter track={micTrack} offMessage="Microphone is off — unmute to test it" />
       {#if canPickOutput}
         <FieldInline>
           {#snippet label()}

src/app/components/VoiceRoomItem.svelte

@@ -35,6 +35,10 @@
 
   const {url, h, replaceState = false, notification = false}: Props = $props()
 
+  // Beyond this many participants, a full name+avatar row per person makes the
+  // sidebar item too tall — fall back to the compact ProfileCircles cluster instead.
+  const ACTIVE_LIST_MAX = 5
+
   const participants = deriveCallParticipants(url, h)
   const participantPubkeys = $derived($participants.flatMap(p => (p.pubkey ? [p.pubkey] : [])))
   const isActive = $derived(
@@ -85,7 +89,7 @@
       <RoomName {url} {h} />
     </div>
     {#if participantPubkeys.length > 0}
-      {#if isActive}
+      {#if isActive && $participants.length <= ACTIVE_LIST_MAX}
         {#each $participants as p (participantKey(p as CallParticipant))}
           {@const media = $mediaStateByIdentity(p.liveKitIdentity)}
           <div class="flex items-center gap-2 ml-6">

src/app/components/VoiceRoomJoinDialog.svelte

@@ -13,6 +13,7 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {AbortError, TimeoutError} from "$lib/util"
+  import MicLevelMeter from "@app/components/MicLevelMeter.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import {displayRoom} from "@app/rooms"
   import {deriveCallParticipants, joinVoiceRoom, loadCallParticipants} from "@app/call"
@@ -33,6 +34,7 @@
   let audioInputs = $state<MediaDeviceInfo[]>([])
   let selectedDeviceId = $state("")
   let startWithoutMic = $state(false)
+  let micError = $state(false)
 
   const loadDevices = async () => {
     if (!navigator.mediaDevices?.enumerateDevices) return
@@ -49,7 +51,60 @@
     void loadDevices()
   })
 
-  const goBack = () => history.back()
+  // Live mic level meter so the user can confirm their selected microphone is
+  // actually picking up sound before joining, rather than finding out mid-call.
+  // The stream handle stays a plain local while only the track is reactive: the
+  // effect below both reads and writes it, and reading reactive state an effect
+  // also writes makes that effect depend on its own output, so it would re-run
+  // forever and cancel the in-flight getUserMedia every time.
+  let previewStream: MediaStream | undefined
+  let previewTrack = $state<MediaStreamTrack | undefined>(undefined)
+
+  const stopMicPreview = () => {
+    previewStream?.getTracks().forEach(t => t.stop())
+    previewStream = undefined
+    previewTrack = undefined
+  }
+
+  $effect(() => {
+    // Re-runs when selectedDeviceId or startWithoutMic changes.
+    void selectedDeviceId
+    const withoutMic = startWithoutMic
+
+    stopMicPreview()
+    micError = false
+
+    if (withoutMic || !navigator.mediaDevices?.getUserMedia) return
+
+    let cancelled = false
+    const deviceId = selectedDeviceId
+
+    void (async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: deviceId ? {deviceId: {exact: deviceId}} : true,
+        })
+        if (cancelled) {
+          stream.getTracks().forEach(t => t.stop())
+          return
+        }
+        previewStream = stream
+        previewTrack = stream.getAudioTracks()[0]
+      } catch {
+        if (!cancelled) micError = true
+      }
+    })()
+
+    return () => {
+      cancelled = true
+      stopMicPreview()
+    }
+  })
+
+  const goBack = () => {
+    stopMicPreview()
+    history.back()
+  }
 
   const handleJoinError = (e: unknown) => {
     if (e instanceof AbortError) return
@@ -62,6 +117,7 @@
   }
 
   const joinVoice = async () => {
+    stopMicPreview()
     popModal()
     await joinVoiceRoom(
       url,
@@ -121,6 +177,13 @@
           </select>
         {/snippet}
       </FieldInline>
+      {#if !startWithoutMic}
+        <MicLevelMeter
+          track={previewTrack}
+          error={micError
+            ? "Could not access this microphone. Check your browser permissions, or join without one."
+            : undefined} />
+      {/if}
     </div>
   </ModalBody>
   <ModalFooter>

src/app/components/VoiceWidget.svelte

@@ -19,7 +19,6 @@
   import Settings from "@assets/icons/settings.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
   import VoiceCallAudioSettingsDialog from "@app/components/VoiceCallAudioSettingsDialog.svelte"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
   import {rooms} from "@app/core"
@@ -30,7 +29,6 @@
   import {makeRoomPath} from "@app/routes"
   import {
     VideoCallLayout,
-    isDesktopLayout,
     toggleCamera,
     toggleScreenShare,
     videoCallLayout,
@@ -98,24 +96,13 @@
 
   const showChatButton = $derived($callState === CallState.Connected && isViewingCurrentVoiceRoom)
 
-  const isChatPanelActive = $derived(
-    showChatButton &&
-      (isDesktopLayout.current
-        ? $videoCallLayout === VideoCallLayout.Split
-        : $videoCallLayout === VideoCallLayout.Chat),
-  )
+  const isChatPanelActive = $derived(showChatButton && $videoCallLayout === VideoCallLayout.Split)
 
   const onChatToggle = () => {
     if (!showChatButton) return
-    if (isDesktopLayout.current) {
-      videoCallLayout.update(p =>
-        p === VideoCallLayout.Split ? VideoCallLayout.Video : VideoCallLayout.Split,
-      )
-    } else {
-      videoCallLayout.update(p =>
-        p === VideoCallLayout.Video ? VideoCallLayout.Chat : VideoCallLayout.Video,
-      )
-    }
+    videoCallLayout.update(p =>
+      p === VideoCallLayout.Split ? VideoCallLayout.Video : VideoCallLayout.Split,
+    )
   }
 
   const chatUnread = $derived(
@@ -128,99 +115,114 @@
     in:fly={{y: 60, duration: 350}}
     out:fly={{y: 60, duration: 250}}
     class="card card-sm flex flex-col gap-2">
-    <div class="flex items-start justify-between gap-2">
-      <Button
-        class="min-w-0 flex-1 rounded-xl px-2 py-1 text-left hover:bg-surface"
-        onclick={goToRoom}
-        aria-label="Open room {roomName}">
-        <div class="flex flex-col gap-0.5">
-          {#if $callState === CallState.Joining}
-            <span class="text-sm font-semibold text-warning">Joining...</span>
-          {:else if $callState === CallState.Connected}
-            <span class="text-sm font-semibold text-success">Voice Connected</span>
-          {:else}
-            <span class="text-sm font-semibold text-content-muted">Disconnected</span>
-          {/if}
-          <span class="truncate min-w-0 text-xs text-content-muted">
-            {roomName} / {spaceName}
-          </span>
-        </div>
-      </Button>
-      {#if showChatButton}
-        <Button
-          data-tip="Toggle Chat"
-          class={cx(
-            "button button-sm button-square tip tip-top relative",
-            isChatPanelActive && "button-primary",
-          )}
-          onclick={onChatToggle}>
-          <Icon icon={ChatRound} size={4} />
-          {#if chatUnread}
-            <span
-              transition:fade={{duration: 150}}
-              class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"
-              aria-hidden="true"></span>
-          {/if}
-        </Button>
-      {/if}
-    </div>
-    <div class="flex items-center gap-1.5">
+    <Button
+      class="w-full min-w-0 rounded-xl px-2 py-1 text-left hover:bg-surface"
+      onclick={goToRoom}
+      aria-label="Open room {roomName}">
+      <div class="flex flex-col gap-0.5">
+        {#if $callState === CallState.Joining}
+          <span class="text-sm font-semibold text-warning">Joining...</span>
+        {:else if $callState === CallState.Connected}
+          <span class="text-sm font-semibold text-success">Voice Connected</span>
+        {:else}
+          <span class="text-sm font-semibold text-content-muted">Disconnected</span>
+        {/if}
+        <span class="truncate min-w-0 text-xs text-content-muted">
+          {roomName} / {spaceName}
+        </span>
+      </div>
+    </Button>
+    <div class="grid grid-cols-3 gap-1.5">
       {#if $callState === CallState.Joining}
-        <Spinner size="sm" />
         <Button
-          data-tip="Cancel"
-          class="button button-sm button-square tip tip-top"
+          aria-label="Cancel joining voice room"
+          class="button button-neutral col-span-3 flex-col !h-auto gap-0.5 rounded-xl px-2 py-1.5"
           onclick={cancelJoinVoiceRoom}>
           <Icon icon={CloseCircle} size={4} />
+          <span class="text-[10px] leading-none font-semibold">Cancel</span>
         </Button>
       {:else if $callState === CallState.Connected && $currentCallSession}
         <Button
-          data-tip={$callMicMuted ? "Unmute" : "Mute"}
+          aria-label={$callMicMuted ? "Unmute microphone" : "Mute microphone"}
+          aria-pressed={!$callMicMuted}
           class={cx(
-            "button button-sm button-square tip tip-top",
+            "button w-full flex-col !h-auto gap-0.5 rounded-xl px-2 py-1.5",
             $callMicMuted ? "button-neutral" : "button-primary",
           )}
           onclick={toggleMute}>
           <Icon icon={$callMicMuted ? MicrophoneOff : Microphone} size={$callMicMuted ? 4 : 4.5} />
+          <span class="text-[10px] leading-none font-semibold">
+            {$callMicMuted ? "Unmute" : "Mute"}
+          </span>
         </Button>
         <Button
-          data-tip={$currentCallSession.cameraOn ? "Turn off camera" : "Turn on camera"}
+          aria-label={$currentCallSession.cameraOn ? "Turn off camera" : "Turn on camera"}
+          aria-pressed={$currentCallSession.cameraOn}
           class={cx(
-            "button button-sm button-square tip tip-top",
+            "button w-full flex-col !h-auto gap-0.5 rounded-xl px-2 py-1.5",
             $currentCallSession.cameraOn ? "button-primary" : "button-neutral",
           )}
           onclick={toggleCamera}>
           <Icon icon={$currentCallSession.cameraOn ? VideocameraRecord : VideocameraOff} size={4} />
+          <span class="text-[10px] leading-none font-semibold">
+            {$currentCallSession.cameraOn ? "Stop" : "Start"}
+          </span>
         </Button>
         {#if !Capacitor.isNativePlatform()}
           <Button
-            data-tip={$currentCallSession.screenShareOn ? "Stop sharing" : "Share screen"}
+            aria-label={$currentCallSession.screenShareOn ? "Stop sharing screen" : "Share screen"}
+            aria-pressed={$currentCallSession.screenShareOn}
             class={cx(
-              "button button-sm button-square tip tip-top",
+              "button w-full flex-col !h-auto gap-0.5 rounded-xl px-2 py-1.5",
               $currentCallSession.screenShareOn ? "button-primary" : "button-neutral",
             )}
             onclick={toggleScreenShare}>
             <Icon icon={Monitor} size={3.75} />
+            <span class="text-[10px] leading-none font-semibold">
+              {$currentCallSession.screenShareOn ? "Stop share" : "Share"}
+            </span>
           </Button>
         {/if}
         <Button
-          data-tip="Call settings"
-          class="button button-neutral button-sm button-square tip tip-top"
+          aria-label="Call settings"
+          class="button button-neutral w-full flex-col !h-auto gap-0.5 rounded-xl px-2 py-1.5"
           onclick={openCallSettings}>
           <Icon icon={Settings} size={4} />
+          <span class="text-[10px] leading-none font-semibold">Settings</span>
         </Button>
         <Button
-          data-tip="Leave room"
-          class="button button-error button-sm button-square tip tip-top"
+          aria-label="Leave voice room"
+          class="button button-error w-full flex-col !h-auto gap-0.5 rounded-xl px-2 py-1.5"
           onclick={leaveVoiceRoom}>
           <Icon icon={EndCall} size={4.5} />
+          <span class="text-[10px] leading-none font-semibold">Leave</span>
         </Button>
+        {#if showChatButton}
+          <Button
+            aria-label="Toggle chat panel"
+            aria-pressed={isChatPanelActive}
+            class={cx(
+              "button w-full flex-col !h-auto gap-0.5 rounded-xl px-2 py-1.5 relative",
+              isChatPanelActive ? "button-primary" : "button-neutral",
+            )}
+            onclick={onChatToggle}>
+            <Icon icon={ChatRound} size={4} />
+            <span class="text-[10px] leading-none font-semibold">Chat</span>
+            {#if chatUnread}
+              <span
+                transition:fade={{duration: 150}}
+                class="absolute right-2 top-1.5 h-2 w-2 rounded-full bg-primary"
+                aria-hidden="true"></span>
+            {/if}
+          </Button>
+        {/if}
       {:else}
         <Button
-          data-tip="Join Voice"
-          class="button button-primary button-sm button-square tip tip-top"
+          aria-label="Join voice room"
+          class="button button-primary col-span-3 flex-col !h-auto gap-0.5 rounded-xl px-2 py-1.5"
           onclick={openJoinDialog}>
           <Icon icon={PhoneCallingRounded} size={4.5} />
+          <span class="text-[10px] leading-none font-semibold">Join</span>
         </Button>
       {/if}
     </div>

src/app/core.ts

@@ -39,7 +39,6 @@ import {
 } from "@welshman/app"
 import type {AppPolicy, DerivedPlugin, Plugin, Session} from "@welshman/app"
 import type {BaseEventReader, EventWriter, KindFactory} from "@welshman/domain"
-import {maybeMakeRelayMockAdapter} from "@lib/test/relayMocks"
 import {DEFAULT_RELAYS, DEFAULT_SEARCH_RELAYS, DUFFLEPUD_URL, INDEXER_RELAYS} from "@app/env"
 
 // Flotilla's own policies (ingest, sockets, storage) can't be imported here — they depend on
@@ -55,9 +54,6 @@ export const appPolicies: AppPolicy[] = [
 const makeApp = (user?: User) => {
   const instance: App = new App({
     user,
-    // Test-only: when Playwright has injected window.__RELAY_MOCKS__, serve relays from in-memory
-    // fixtures instead of the network. No-op for real users; stripped from production builds.
-    getAdapter: import.meta.env.DEV ? maybeMakeRelayMockAdapter() : undefined,
     config: {
       dufflepudUrl: DUFFLEPUD_URL,
       getDefaultRelays: always(DEFAULT_RELAYS),

src/app/env.ts

@@ -2,69 +2,76 @@ import {Capacitor} from "@capacitor/core"
 import * as nip19 from "nostr-tools/nip19"
 import {identity} from "@welshman/lib"
 import {normalizeRelayUrl} from "@welshman/util"
+import {maybeGetTestEnv} from "@lib/test/env"
 
 const fromCsv = (s: string) => (s || "").split(",").filter(identity)
 
-export const PUSH_SERVER = import.meta.env.VITE_PUSH_SERVER
+// Test-only: when Playwright has injected window.__TEST_ENV__, VITE_ values resolve against it, so
+// each browser context can be pointed at the relays its own test created. Vite folds DEV to false
+// in a production build, so the branch and the import are stripped from it.
+const env = (key: string): string =>
+  (import.meta.env.DEV ? maybeGetTestEnv(key) : undefined) ?? import.meta.env[key]
 
-export const PUSH_BRIDGE = normalizeRelayUrl(import.meta.env.VITE_PUSH_BRIDGE)
+export const PUSH_SERVER = env("VITE_PUSH_SERVER")
+
+export const PUSH_BRIDGE = normalizeRelayUrl(env("VITE_PUSH_BRIDGE"))
 
 export const ENABLE_ZAPS = Capacitor.getPlatform() != "ios"
 
-export const SIGNER_RELAYS = fromCsv(import.meta.env.VITE_SIGNER_RELAYS).map(normalizeRelayUrl)
+export const SIGNER_RELAYS = fromCsv(env("VITE_SIGNER_RELAYS")).map(normalizeRelayUrl)
 
-export const BLOCKED_RELAYS = fromCsv(import.meta.env.VITE_BLOCKED_RELAYS).map(normalizeRelayUrl)
+export const BLOCKED_RELAYS = fromCsv(env("VITE_BLOCKED_RELAYS")).map(normalizeRelayUrl)
 
-export const INDEXER_RELAYS = fromCsv(import.meta.env.VITE_INDEXER_RELAYS).map(normalizeRelayUrl)
+export const INDEXER_RELAYS = fromCsv(env("VITE_INDEXER_RELAYS")).map(normalizeRelayUrl)
 
-export const DEFAULT_RELAYS = fromCsv(import.meta.env.VITE_DEFAULT_RELAYS).map(normalizeRelayUrl)
+export const DEFAULT_RELAYS = fromCsv(env("VITE_DEFAULT_RELAYS")).map(normalizeRelayUrl)
 
-export const DEFAULT_SEARCH_RELAYS = fromCsv(import.meta.env.VITE_DEFAULT_SEARCH_RELAYS).map(
+export const DEFAULT_SEARCH_RELAYS = fromCsv(env("VITE_DEFAULT_SEARCH_RELAYS")).map(
   normalizeRelayUrl,
 )
 
-export const DEFAULT_MESSAGING_RELAYS = fromCsv(import.meta.env.VITE_DEFAULT_MESSAGING_RELAYS).map(
+export const DEFAULT_MESSAGING_RELAYS = fromCsv(env("VITE_DEFAULT_MESSAGING_RELAYS")).map(
   normalizeRelayUrl,
 )
 
-export const PLATFORM_RELAYS = fromCsv(import.meta.env.VITE_PLATFORM_RELAYS).map(normalizeRelayUrl)
+export const PLATFORM_RELAYS = fromCsv(env("VITE_PLATFORM_RELAYS")).map(normalizeRelayUrl)
 
-export const PLATFORM_URL = import.meta.env.VITE_PLATFORM_URL
+export const PLATFORM_URL = env("VITE_PLATFORM_URL")
 
-export const PLATFORM_TERMS = import.meta.env.VITE_PLATFORM_TERMS
+export const PLATFORM_TERMS = env("VITE_PLATFORM_TERMS")
 
-export const PLATFORM_PRIVACY = import.meta.env.VITE_PLATFORM_PRIVACY
+export const PLATFORM_PRIVACY = env("VITE_PLATFORM_PRIVACY")
 
 export const PLATFORM_LOGO = import.meta.env.PROD
   ? PLATFORM_URL + "/logo.png"
-  : import.meta.env.VITE_PLATFORM_LOGO.replace(/^static/, "") || PLATFORM_URL + "/logo.png"
+  : env("VITE_PLATFORM_LOGO").replace(/^static/, "") || PLATFORM_URL + "/logo.png"
 
-export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
+export const PLATFORM_NAME = env("VITE_PLATFORM_NAME")
 
-export const PLATFORM_ACCENT = import.meta.env.VITE_PLATFORM_ACCENT
+export const PLATFORM_ACCENT = env("VITE_PLATFORM_ACCENT")
 
 // components visual preset (see src/lib/components/theme.css). Selected per
 // deployment via VITE_THEME, which is assumed to be set to a known theme
 // (e.g. "clay" or "flat") — there is no default.
-export const FL_THEME = import.meta.env.VITE_THEME
+export const FL_THEME = env("VITE_THEME")
 
-export const PLATFORM_DESCRIPTION = import.meta.env.VITE_PLATFORM_DESCRIPTION
+export const PLATFORM_DESCRIPTION = env("VITE_PLATFORM_DESCRIPTION")
 
-export const POMADE_SIGNERS = fromCsv(import.meta.env.VITE_POMADE_SIGNERS)
+export const POMADE_SIGNERS = fromCsv(env("VITE_POMADE_SIGNERS"))
 
-export const DEFAULT_BLOSSOM_SERVERS = fromCsv(import.meta.env.VITE_DEFAULT_BLOSSOM_SERVERS)
+export const DEFAULT_BLOSSOM_SERVERS = fromCsv(env("VITE_DEFAULT_BLOSSOM_SERVERS"))
 
-export const DEFAULT_SPACES = fromCsv(import.meta.env.VITE_DEFAULT_SPACES).map(normalizeRelayUrl)
+export const DEFAULT_SPACES = fromCsv(env("VITE_DEFAULT_SPACES")).map(normalizeRelayUrl)
 
-export const DEFAULT_PUBKEYS = import.meta.env.VITE_DEFAULT_PUBKEYS
+export const DEFAULT_PUBKEYS = env("VITE_DEFAULT_PUBKEYS")
 
-export const HOSTING_BACKEND_URL = import.meta.env.VITE_HOSTING_BACKEND_URL
+export const HOSTING_BACKEND_URL = env("VITE_HOSTING_BACKEND_URL")
 
-export const HOSTING_RELAY_DOMAIN = import.meta.env.VITE_HOSTING_RELAY_DOMAIN
+export const HOSTING_RELAY_DOMAIN = env("VITE_HOSTING_RELAY_DOMAIN")
 
 export const DUFFLEPUD_URL = "https://dufflepud.coracle.social"
 
-export const THUMBNAIL_URL = import.meta.env.VITE_THUMBNAIL_URL
+export const THUMBNAIL_URL = env("VITE_THUMBNAIL_URL")
 
 export const dufflepud = (path: string) => DUFFLEPUD_URL + "/" + path
 

src/app/routes.ts

@@ -57,13 +57,13 @@ export const makeRoomPath = (url: string, h: string) => `/spaces/${encodeRelay(u
 
 export const makeSpaceChatPath = (url: string) => makeRoomPath(url, "chat")
 
-export const goToChat = (pubkeys: string[] = []) => {
+export const goToChat = (pubkeys: string[] = [], options: {replaceState?: boolean} = {}) => {
   if (messagingRelayLists.get().urls(user.get().pubkey).get().length === 0) {
-    pushModal(ChatEnable, {next: () => goToChat(pubkeys)})
+    pushModal(ChatEnable, {next: () => goToChat(pubkeys, options)})
   } else if (pubkeys.length === 0) {
-    goto(lastChatUrl ?? "/chat")
+    goto(lastChatUrl ?? "/chat", options)
   } else {
-    goto(makeChatPath(pubkeys))
+    goto(makeChatPath(pubkeys), options)
   }
 }
 

src/app/session.ts

@@ -2,6 +2,7 @@ import type {ClientOptions} from "@pomade/core"
 import type {Wallet} from "@welshman/util"
 import {nip01, nip07, nip46, nip55, pomade, toSession} from "@welshman/app"
 import type {Session} from "@welshman/app"
+import {getTestEvents, maybeGetTestSession} from "@lib/test/session"
 import {app, login, session} from "@app/core"
 import {wallet} from "@app/lightning"
 import {kv, ss, storage} from "@app/storage"
@@ -61,12 +62,27 @@ const readLegacySession = async () => {
 // The session is derived from the app's user, so it can't be synced to storage directly —
 // read it back once at startup, then persist it whenever the identity changes.
 export const restoreSession = async () => {
-  const $session = (await ss.get<Session>("session")) ?? (await readLegacySession())
+  // Test-only: when Playwright has injected window.__TEST_SESSION__, that identity wins over
+  // whatever is in storage. No-op for real users; stripped from production builds.
+  const testSession = import.meta.env.DEV ? maybeGetTestSession() : undefined
+  const $session = testSession ?? (await ss.get<Session>("session")) ?? (await readLegacySession())
 
   if ($session) {
     await login($session)
   }
 
+  // Logging in builds a fresh app, so the test's cached events go into its repository afterwards,
+  // the same way storage loads what the last session left behind. Storage gets there first and
+  // loads with Repository.load, which clears the repository before inserting, so these have to
+  // wait for it or they are wiped before anything reads them.
+  if (testSession) {
+    await storage.get()?.ready
+
+    for (const event of getTestEvents()) {
+      app.get().repository.publish(event)
+    }
+  }
+
   return session.subscribe($session => {
     if ($session) {
       ss.set("session", $session)

src/lib/components/space-menu.css

@@ -68,12 +68,8 @@
       @apply mt-2 pt-3;
     }
 
-    .space-menu__header {
-      @apply p-3;
-    }
-
     .space-menu__header-button {
-      @apply rounded-2xl p-0;
+      @apply w-full rounded-2xl p-0 p-3;
 
       &:hover {
         @apply bg-transparent;

src/lib/html.ts

@@ -1,7 +1,32 @@
+import {readable} from "svelte/store"
 import {sleep, randomId} from "@welshman/lib"
 import {Capacitor} from "@capacitor/core"
 export {preventDefault, stopPropagation} from "svelte/legacy"
 
+/** Whether the user is actually looking at this tab right now. Display-only concern,
+ * kept separate from any data store — consult it wherever "is someone watching" should
+ * affect what's rendered. `document.hidden` alone misses window blur: switching to
+ * another app without switching tabs leaves visibilityState "visible", so we also track
+ * focus and require both. */
+export const documentActive = readable(
+  typeof document === "undefined" ? true : !document.hidden && document.hasFocus(),
+  set => {
+    if (typeof document === "undefined") return
+
+    const update = () => set(!document.hidden && document.hasFocus())
+
+    document.addEventListener("visibilitychange", update)
+    window.addEventListener("blur", update)
+    window.addEventListener("focus", update)
+
+    return () => {
+      document.removeEventListener("visibilitychange", update)
+      window.removeEventListener("blur", update)
+      window.removeEventListener("focus", update)
+    }
+  },
+)
+
 // Anchors an @svelte-plugins/datepicker popup with fixed positioning so it
 // escapes scroll-container clipping (e.g. inside modals). Call when the picker
 // opens; returns a cleanup function that removes the listeners.

src/lib/test/env.ts

@@ -0,0 +1,10 @@
+import type {Maybe} from "@welshman/lib"
+
+// The window key Playwright writes to (see e2e/harness/app/boot.ts). Keep it in sync with the
+// literal duplicated there.
+export const TEST_ENV_KEY = "__TEST_ENV__"
+
+// Consulted when the app resolves a VITE_ value, so each browser context can be pointed at the
+// relays its own test created. Yields nothing for real users.
+export const maybeGetTestEnv = (key: string): Maybe<string> =>
+  (globalThis as {[TEST_ENV_KEY]?: Record<string, string>})[TEST_ENV_KEY]?.[key]

src/lib/test/relayMocks.ts

@@ -1,83 +0,0 @@
-import {on} from "@welshman/lib"
-import type {Maybe} from "@welshman/lib"
-import {isRelayUrl, normalizeRelayUrl} from "@welshman/util"
-import type {TrustedEvent} from "@welshman/util"
-import {AbstractAdapter, AdapterEvent, LocalAdapter, Repository} from "@welshman/net"
-import type {AdapterFactory, ClientMessage, RelayMessage} from "@welshman/net"
-
-// The window key Playwright writes the mock config to (see e2e/support/relayMocks.ts). Keep it in
-// sync with the literal duplicated there.
-export const RELAY_MOCKS_KEY = "__RELAY_MOCKS__"
-
-export type RelayMockConfig = {
-  // Map of relay url -> events that relay should return. Any relay NOT listed returns nothing (an
-  // immediate EOSE), which is what keeps tests offline and reproducible by default.
-  relays?: Record<string, TrustedEvent[]>
-}
-
-// Wraps welshman's LocalAdapter so we reuse its REQ/EVENT/CLOSE handling against an in-memory
-// Repository, but re-emits its messages under the real relay url instead of LOCAL_RELAY_URL. That
-// keeps relay attribution / relay-scoped behaviour (e.g. NIP-29 groups) working as it would over a
-// real socket. (Composition rather than inheritance because LocalAdapter emits via a private method
-// that hardcodes LOCAL_RELAY_URL.)
-class FixtureAdapter extends AbstractAdapter {
-  readonly local: LocalAdapter
-
-  constructor(
-    readonly url: string,
-    repository: Repository,
-  ) {
-    super()
-
-    this.local = new LocalAdapter(repository)
-
-    const forward = (message: RelayMessage) => this.emit(AdapterEvent.Receive, message, this.url)
-
-    this._unsubscribers.push(on(this.local, AdapterEvent.Receive, forward), () =>
-      this.local.cleanup(),
-    )
-  }
-
-  get sockets() {
-    return this.local.sockets
-  }
-
-  get urls() {
-    return [this.url]
-  }
-
-  send(message: ClientMessage) {
-    this.local.send(message)
-  }
-}
-
-// An adapter factory serving every real relay url from memory, so no websocket is ever created for
-// one. Non-relay urls (e.g. the local:// repository relay) fall through to welshman's default
-// handling by returning undefined.
-export const makeRelayMockAdapter = (config: RelayMockConfig): AdapterFactory => {
-  const reposByUrl = new Map<string, Repository>()
-
-  for (const [url, events] of Object.entries(config.relays ?? {})) {
-    const repository = new Repository()
-    repository.load(events)
-    reposByUrl.set(normalizeRelayUrl(url), repository)
-  }
-
-  const emptyRepository = new Repository()
-
-  return (url: string) => {
-    if (isRelayUrl(url)) {
-      return new FixtureAdapter(url, reposByUrl.get(normalizeRelayUrl(url)) ?? emptyRepository)
-    }
-  }
-}
-
-// Called when the app is created. Yields an adapter factory only when Playwright has injected a
-// config, so it is a no-op for real users.
-export const maybeMakeRelayMockAdapter = (): Maybe<AdapterFactory> => {
-  const config = (globalThis as {[RELAY_MOCKS_KEY]?: RelayMockConfig})[RELAY_MOCKS_KEY]
-
-  if (config) {
-    return makeRelayMockAdapter(config)
-  }
-}

src/lib/test/session.ts

@@ -0,0 +1,19 @@
+import type {Maybe} from "@welshman/lib"
+import type {TrustedEvent} from "@welshman/util"
+import type {Session} from "@welshman/app"
+
+// The window keys Playwright writes to (see e2e/harness/app/session.ts). Keep them in sync with
+// the literals duplicated there.
+export const TEST_SESSION_KEY = "__TEST_SESSION__"
+
+export const TEST_EVENTS_KEY = "__TEST_EVENTS__"
+
+// Called when the session is restored at startup. Yields a session only when Playwright has
+// injected one, so it is a no-op for real users.
+export const maybeGetTestSession = (): Maybe<Session> =>
+  (globalThis as {[TEST_SESSION_KEY]?: Session})[TEST_SESSION_KEY]
+
+// The events a returning user's client would have found in storage, loaded into the repository
+// alongside the injected session so a test boots into a state the app can reach on its own.
+export const getTestEvents = (): TrustedEvent[] =>
+  (globalThis as {[TEST_EVENTS_KEY]?: TrustedEvent[]})[TEST_EVENTS_KEY] ?? []

src/routes/+layout.svelte

@@ -15,7 +15,7 @@
   import * as util from "@welshman/util"
   import * as lib from "@welshman/lib"
   import {Logger} from "@welshman/app"
-  import {isMobile} from "@lib/html"
+  import {isMobile, documentActive} from "@lib/html"
   import AppContainer from "@app/components/AppContainer.svelte"
   import ModalContainer from "@app/components/ModalContainer.svelte"
   import {app} from "@app/core"
@@ -33,9 +33,11 @@
   import {theme} from "@app/theme"
   import {toast, pushToast} from "@app/toast"
   import * as notifications from "@app/notifications"
+  import {notifications as notificationPaths, allNotifications} from "@app/notifications"
   import {Push} from "@app/push"
   import {onPushNotificationAction, pushState} from "@app/push/adapters/common"
   import {syncKeyboard} from "@app/keyboard"
+  import {syncCallAudioResume} from "@app/call"
   import {getPageTitle} from "@app/title"
   import NewNotificationSound from "@src/app/components/NewNotificationSound.svelte"
 
@@ -162,6 +164,9 @@
     // Initialize keyboard state tracking
     unsubscribers.push(syncKeyboard())
 
+    // Reacquire the mic if the screen locked mid-call and capture died
+    unsubscribers.push(syncCallAudioResume())
+
     // Subscribe to badge count for changes
     unsubscribers.push(notifications.syncBadges())
 
@@ -239,7 +244,12 @@
   })
 
   $effect(() => {
-    document.title = getPageTitle({page: $page, pubkey: $app.user?.pubkey})
+    const title = getPageTitle({page: $page, pubkey: $app.user?.pubkey})
+    // While the tab isn't actively focused the user isn't actually looking at the
+    // active page, so count notifications for it too rather than treating it as read.
+    const unreadCount = $documentActive ? $notificationPaths.size : $allNotifications.size
+
+    document.title = unreadCount > 0 ? `(${unreadCount}) ${title}` : title
   })
 </script>
 

tsconfig.json

@@ -10,7 +10,22 @@
     "sourceMap": true,
     "strict": true,
     "moduleResolution": "bundler"
-  }
+  },
+  // TypeScript does not merge includes, so this repeats .svelte-kit/tsconfig.json's list in order
+  // to add the e2e harness, which runs in node and is otherwise checked by nothing.
+  "include": [
+    ".svelte-kit/ambient.d.ts",
+    ".svelte-kit/non-ambient.d.ts",
+    ".svelte-kit/types/**/$types.d.ts",
+    "vite.config.ts",
+    "playwright.config.ts",
+    "src/**/*.js",
+    "src/**/*.ts",
+    "src/**/*.svelte",
+    "test/**/*.ts",
+    "tests/**/*.ts",
+    "e2e/**/*.ts"
+  ]
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
   // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
   //

vite.config.ts

@@ -8,6 +8,23 @@ config({path: ".env.local"})
 config({path: ".env"})
 
 export default defineConfig({
+  // @welshman/editor takes tiptap as peer dependencies, so an installed copy resolves them from
+  // here and there is one prosemirror. link_deps symlinks its source instead, and that directory
+  // carries node_modules from welshman's own install — a second prosemirror, whose Plugin and
+  // PluginKey classes tiptap refuses to mix with ours ("Adding different instances of a keyed
+  // plugin"). Deduping resolves these to this project's copy wherever they are imported from, and
+  // does nothing when only one copy exists.
+  resolve: {
+    dedupe: [
+      "@tiptap/core",
+      "@tiptap/pm",
+      "@tiptap/suggestion",
+      "prosemirror-model",
+      "prosemirror-state",
+      "prosemirror-transform",
+      "prosemirror-view",
+    ],
+  },
   server: {
     port: 1847,
     // host: "0.0.0.0",