feat(frontend): scaffold PWA with LiveKit join flow

Vite + React + TS + Tailwind v4, installable PWA. Join-pod UI that fetches a
LiveKit token from the backend, connects to the pod room, and publishes screen
+ mic so PodMan can watch.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import type { Room } from 'livekit-client';
+import { joinPod } from './lib/pod.js';
+
+export default function App() {
+  const [podId, setPodId] = useState('demo-pod');
+  const [name, setName] = useState('');
+  const [room, setRoom] = useState<Room | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [connecting, setConnecting] = useState(false);
+
+  async function handleJoin() {
+    setError(null);
+    setConnecting(true);
+    try {
+      const identity = `${name || 'engineer'}-${Math.random().toString(36).slice(2, 7)}`;
+      setRoom(await joinPod(podId, identity, name || identity));
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setConnecting(false);
+    }
+  }
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center gap-6 p-6">
+      <header>
+        <h1 className="text-3xl font-bold">🛰️ PodMan</h1>
+        <p className="text-sm text-slate-400">
+          Join a pod and share your screen — PodMan watches for collisions before you push.
+        </p>
+      </header>
+
+      {room ? (
+        <section className="rounded-lg border border-slate-700 bg-slate-900/50 p-4">
+          <p className="font-medium text-emerald-400">Connected to “{podId}”.</p>
+          <p className="mt-1 text-sm text-slate-400">Sharing screen + mic. PodMan is watching.</p>
+        </section>
+      ) : (
+        <section className="flex flex-col gap-3">
+          <input
+            className="rounded-md border border-slate-700 bg-slate-900 px-3 py-2"
+            placeholder="Your name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <input
+            className="rounded-md border border-slate-700 bg-slate-900 px-3 py-2"
+            placeholder="Pod id"
+            value={podId}
+            onChange={(e) => setPodId(e.target.value)}
+          />
+          <button
+            className="rounded-md bg-emerald-600 px-3 py-2 font-medium hover:bg-emerald-500 disabled:opacity-50"
+            onClick={handleJoin}
+            disabled={connecting || !podId}
+          >
+            {connecting ? 'Joining…' : 'Join pod'}
+          </button>
+          {error && <p className="text-sm text-red-400">{error}</p>}
+        </section>
+      )}
+    </main>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,16 @@
+@import 'tailwindcss';
+
+:root {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  background: #0b0f17;
+  color: #e7eaf0;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    sans-serif;
+}

frontend/src/lib/pod.ts

@@ -0,0 +1,38 @@
+import { Room, RoomEvent } from 'livekit-client';
+
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:8787';
+
+/** Ask the backend for a LiveKit token to join a pod. */
+export async function fetchPodToken(
+  podId: string,
+  identity: string,
+  name: string,
+): Promise<{ token: string; url: string }> {
+  const res = await fetch(`${BACKEND_URL}/pods/${encodeURIComponent(podId)}/token`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ identity, name }),
+  });
+  if (!res.ok) throw new Error(`token request failed: ${res.status}`);
+  return res.json();
+}
+
+/**
+ * Join a pod: connect to the LiveKit room and publish screen + mic so PodMan
+ * can watch. Returns the connected Room.
+ */
+export async function joinPod(podId: string, identity: string, name: string): Promise<Room> {
+  const { token, url } = await fetchPodToken(podId, identity, name);
+  const room = new Room({ adaptiveStream: true, dynacast: true });
+  room.on(RoomEvent.Disconnected, () => console.log('[podman] disconnected'));
+
+  await room.connect(url, token);
+
+  const screen = await navigator.mediaDevices.getDisplayMedia({ video: true });
+  for (const track of screen.getTracks()) {
+    await room.localParticipant.publishTrack(track);
+  }
+  await room.localParticipant.setMicrophoneEnabled(true);
+
+  return room;
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.js';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

frontend/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_BACKEND_URL: string;
+  readonly VITE_LIVEKIT_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}