Files
web-terminal/relay-web/src/preview-grid.ts
Yaojia Wang 2af57e6686 feat(relay): rendezvous-relay service — 7 packages + plans (contracts/transport/agent/control-plane/e2e/auth/web)
Multi-tenant reverse-tunnel service ("ngrok for Claude Code" with E2E): a
host-agent dials OUT to an operator-run relay; external devices reach the host
THROUGH the relay, routed by per-tenant subdomain, forwarding ciphertext only
(the relay never sees plaintext). Lets a customer reach their own self-hosted
web-terminal from anywhere with zero networking setup.

Packages — all tsc-strict + vitest green (656 tests), cross-package integration verified:
- relay-contracts: frozen shared contracts (mux frame codec, data model,
  capability token, E2E envelope, pairing) — the src/types.ts analog
- term-relay:   native WS mux + stateless data plane (subdomain routing, ciphertext forward)
- agent:        host-agent (pairing, per-host Ed25519 + mTLS dial-out, forwards to 127.0.0.1:3000)
- control-plane: accounts/hosts registry, pairing-code flow, routing table, provisioning
- relay-e2e:    browser<->agent E2E (X25519 ECDH through relay, AEAD, anti-replay, recoverable replay key)
- relay-auth:   Passkey/WebAuthn, capability tokens, per-host certs, deny-by-default tenant isolation
- relay-web:    browser login + Web Crypto E2E + client-side preview rendering

Security invariants INV1-15 enforced; cross-tenant isolation CI tripwire live
(.github/workflows/relay-tripwire.yml). Design + implementation-level plans in
docs/PLAN_RELAY_*.md and docs/EXPLORE_RELAY_SERVICE.md.

NOTE: generated autonomously per the reviewed plans. The security-critical
packages (relay-e2e, relay-auth) REQUIRE expert security audit before any real
deployment — passing tests prove self-consistency, not resistance to attackers.
Base app (src/, public/) unchanged; concurrent desktop work left uncommitted.
2026-07-02 06:10:16 +02:00

88 lines
2.6 KiB
TypeScript

/**
* T9 (v0.10) — grid of `preview-client` cards (the manage-page moved CLIENT-SIDE under E2E).
*
* Renders one read-only, locally-decrypted preview per authorized host. A host the account can't
* reach → `loadReplay` rejects → the card shows "unavailable", never another tenant's screen
* (INV1). Disposes all preview clients on unmount so no xterms/sockets leak (EXPLORE §6 preview-cost
* discipline); `hostContentSecret` is never written to `localStorage`/`console`.
*/
import type { ApiClient } from './api-client'
import type { HostRecord } from './api-schemas'
import {
mountPreviewClient,
type PreviewClient,
type PreviewDeps,
type ReplaySource,
} from './preview-client'
const DEFAULT_DIMS = { cols: 80, rows: 24 } as const
export interface PreviewGridOpts {
readonly dims?: { cols: number; rows: number }
}
export function mountPreviewGrid(
root: HTMLElement,
api: ApiClient,
loadReplay: (
hostId: string,
) => Promise<{ replay: ReplaySource; hostContentSecret: Uint8Array }>,
deps: PreviewDeps,
opts: PreviewGridOpts = {},
): { dispose(): void } {
const dims = opts.dims ?? DEFAULT_DIMS
const clients: PreviewClient[] = []
let disposed = false
function unavailableCard(host: HostRecord): HTMLElement {
const card = document.createElement('div')
card.className = 'preview-card'
card.dataset['hostId'] = host.hostId
const msg = document.createElement('p')
msg.className = 'preview-unavailable'
msg.textContent = 'unavailable'
card.append(msg)
return card
}
async function build(): Promise<void> {
let hosts: readonly HostRecord[]
try {
hosts = await api.listHosts()
} catch {
const err = document.createElement('p')
err.className = 'preview-grid-error'
err.textContent = 'Could not load previews.'
root.append(err)
return
}
if (disposed) return
for (const host of hosts) {
const card = document.createElement('div')
card.className = 'preview-card'
card.dataset['hostId'] = host.hostId
root.append(card)
try {
const { replay, hostContentSecret } = await loadReplay(host.hostId)
if (disposed) return
const client = mountPreviewClient(card, replay, hostContentSecret, dims, deps)
clients.push(client)
await client.render()
} catch {
// A host the account can't reach (403) or a decrypt failure → "unavailable" (INV1).
card.replaceWith(unavailableCard(host))
}
}
}
void build()
return {
dispose(): void {
disposed = true
for (const c of clients) c.dispose() // no leaked xterms/sockets
},
}
}