collab-web

@oh-my-pi/collab-web

Web client for omp collab sessions. Paste a /collab link into the browser and you get the same live session guests see in the TUI: streaming transcript, tool-call cards, subagent panel with live transcripts, and a composer that prompts (or interrupts) the host agent.

Quick start

# dev server (Bun HTML dev server with HMR) — http://localhost:3000
bun run dev

# offline demo: local relay + scripted mock host; prints a ws://localhost link
bun run mock-host

Host a session from any omp instance (/collab, or /collab ws://localhost:7466 to use the mock relay), then paste the printed link into the connect screen. Deep links work too: http://localhost:3000/#<roomId>.<key> auto-connects on load.

Build & deploy

bun run build   # static site in dist/

dist/ is a fully static SPA — host it anywhere. JS/CSS bundles are content-hashed; favicons, manifest.webmanifest, robots.txt, sitemap.xml, and og-image.png come from public/ and are emitted at the site root under stable names (canonical URL: https://my.omp.sh/). Two runtime requirements:

• Secure context: room keys are unwrapped with WebCrypto (crypto.subtle), which browsers expose only on https:// or localhost.
• Relay reachability: the client connects straight to the relay over WebSocket (wss:// for anything that isn't localhost). The default relay is wss://my.omp.sh; bare <roomId>.<key> links resolve against it (legacy <roomId>#<key> and %23-mangled links still parse).

The room key never leaves the URL fragment — it is not sent to the relay or any server.

Architecture

• src/lib/ — vendored wire codec (codec.ts AES-256-GCM, link.ts envelope + link grammar), socket.ts reconnecting relay socket, client.ts guest session store (GuestClient + immutable snapshots for useSyncExternalStore). Shared protocol shapes come from @oh-my-pi/pi-wire.
• src/components/ — transcript/ (entries, markdown, tool cards), agents/ (panel + transcript drawer), shell/ (connect screen, header, composer, banners, toasts).
• src/tool-render/ — per-tool React renderers shared with coding-agent HTML session exports: one view per built-in tool, common ToolView chrome, theme-adaptive tv- design tokens, and an <omp-tool-view> web-component wrapper. The ToolRenderHost seam lets hosts wire agent-id chips to a sub-session view (drawer here, overlay in exports).
• scripts/ — local-relay.ts (content-blind relay on Bun.serve), mock-host.ts + fixture.ts (scripted host for offline dev), build-tool-views.ts (bundles src/tool-render/ + React into packages/coding-agent/src/export/html/tool-views.generated.js for self-contained exports).

The package is intentionally standalone — no dependency on @oh-my-pi/pi-coding-agent at runtime or type level. Wire-shape drift is prevented by consuming the same @oh-my-pi/pi-wire contracts as the host, with sealed-frame interop still covered by test/codec.test.ts.