codehost 0.1.1 → 0.3.1

package/src/web/discovery.tsx

@@ -7,13 +7,54 @@ import { RtcClient } from "./rtc-client";
 import { getSignalUrl } from "./config";
 import { registerTunnelHost } from "./tunnel-host";
 import { connBroker } from "./conn-broker";
+import {
+  type DeepLink,
+  parseDeepLink,
+  repoKey,
+  resolveDevTarget,
+  resolveRepoTarget,
+} from "../shared/repo";
+import { addRoom, historyFor, recordConnection } from "./history";
 
 const TOKEN_KEY = "codehost.token";
 
 type ConnState = "idle" | "connecting" | "connected" | "failed";
 
+/**
+ * Read a room token handed in the URL fragment as `#t=<token>` (what the CLI
+ * prints/opens after `setup`/`serve`). The page is static, so the fragment
+ * never reaches the server — a safe place for the shared secret. Everything
+ * after `#t=` is the token (URL-encoded by the CLI); returns "" if absent.
+ */
+function tokenFromHash(): string {
+  const m = window.location.hash.match(/^#t=(.+)$/);
+  if (!m) return "";
+  try {
+    return decodeURIComponent(m[1]).trim();
+  } catch {
+    return m[1].trim();
+  }
+}
+
+/** Short label for the "looking for…" state from a deep link. */
+function deepLinkLabel(dl: DeepLink): string | null {
+  if (!dl) return null;
+  return dl.type === "repo" ? `${dl.target.owner}/${dl.target.name}` : dl.target.path;
+}
+
+function folderQuery(folder?: string): string {
+  return folder ? `?folder=${encodeURIComponent(folder)}` : "";
+}
+
 export function Discovery() {
-  const [token, setToken] = useState(() => localStorage.getItem(TOKEN_KEY) ?? "");
+  const [token, setToken] = useState(() => {
+    const fromHash = tokenFromHash();
+    if (fromHash && validateToken(fromHash).ok) {
+      localStorage.setItem(TOKEN_KEY, fromHash);
+      return fromHash;
+    }
+    return localStorage.getItem(TOKEN_KEY) ?? "";
+  });
   const [draft, setDraft] = useState(token);
   const [tokenError, setTokenError] = useState<string | null>(null);
   const [connected, setConnected] = useState(false);
@@ -30,6 +71,15 @@ export function Discovery() {
   const rtcRef = useRef<RtcClient | null>(null);
   const activePeerRef = useRef<string | null>(null);
 
+  // Deep-link resolution (/gh/<owner>/<repo>/... or /dev/<path>): parse once,
+  // auto-connect when a matching server appears, remember the opened folder.
+  const deepLinkRef = useRef<DeepLink>(parseDeepLink(window.location.pathname));
+  const resolvedRef = useRef(false);
+  // A valid token in the URL fragment enables single-server auto-connect.
+  const autoConnectRef = useRef(false);
+  const activeFolderRef = useRef<string | undefined>(undefined);
+  const [resolving, setResolving] = useState<string | null>(() => deepLinkLabel(deepLinkRef.current));
+
   // Register the Service Worker + connection broker once. The broker shares one
   // WebRTC connection per server across tabs; on owner failover it asks us to
   // reload the iframe so it reconnects through the new owner.
@@ -38,8 +88,27 @@ export function Discovery() {
     connBroker.onLost((peerId) => {
       if (peerId !== activePeerRef.current) return;
       setIframeSrc(null);
-      setTimeout(() => setIframeSrc(`/vs/${peerId}/`), 400);
+      const folder = activeFolderRef.current;
+      setTimeout(() => setIframeSrc(`/vs/${peerId}/${folderQuery(folder)}`), 400);
     });
+    // A valid token in the URL fragment (#t=<token>) seeds the room and turns on
+    // single-server auto-connect; consume it from the address bar afterwards so
+    // the secret isn't left visible or re-applied on a manual reload.
+    const urlToken = tokenFromHash();
+    if (urlToken && validateToken(urlToken).ok) {
+      autoConnectRef.current = true;
+      if (window.location.hash) {
+        history.replaceState(null, "", window.location.pathname + window.location.search);
+      }
+    }
+
+    // For a repo deep link, adopt the room that last served it so it resolves
+    // without re-entering a token.
+    const dl = deepLinkRef.current;
+    if (dl?.type === "repo") {
+      const h = historyFor(repoKey(dl.target));
+      if (h?.token) setToken(h.token);
+    }
   }, []);
 
   useEffect(() => {
@@ -48,9 +117,16 @@ export function Discovery() {
       url: getSignalUrl(),
       token,
       role: "viewer",
-      onOpen: () => setConnected(true),
+      onOpen: () => {
+        setConnected(true);
+        addRoom(token);
+      },
       onClose: () => setConnected(false),
-      onPeers: (peers) => setServers(peers.filter((p) => p.role === "server")),
+      onPeers: (peers) => {
+        const list = peers.filter((p) => p.role === "server");
+        setServers(list);
+        void tryAutoConnect(list);
+      },
       onSignal: (from, data) => {
         if (from === activePeerRef.current) void rtcRef.current?.handleSignal(data);
       },
@@ -85,7 +161,7 @@ export function Discovery() {
     setToken(t);
   }
 
-  async function connectTo(server: PeerInfo) {
+  async function connectTo(server: PeerInfo, folder?: string) {
     const client = clientRef.current;
     if (!client) return;
 
@@ -128,12 +204,55 @@ export function Discovery() {
     try {
       await connBroker.connect(server.peerId, establish);
       setConnState("connected");
-      setIframeSrc(`/vs/${server.peerId}/`);
+      // The daemon no longer sets a default folder (current VS Code serve-web
+      // dropped that flag), so open the served workspace from here: an explicit
+      // deep-link folder if we have one, else the server's reported cwd.
+      const openFolder = folder ?? server.meta?.cwd;
+      activeFolderRef.current = openFolder;
+      setIframeSrc(`/vs/${server.peerId}/${folderQuery(openFolder)}`);
+      setResolving(null);
+      recordConnect(server, openFolder);
     } catch {
       setConnState("failed");
     }
   }
 
+  // Deep-link auto-connect: when servers arrive, pick the best match (exact repo
+  // daemon, else a root daemon's subfolder) and open it once.
+  async function tryAutoConnect(list: PeerInfo[]) {
+    if (resolvedRef.current) return;
+    const dl = deepLinkRef.current;
+    if (dl) {
+      const res = dl.type === "repo" ? resolveRepoTarget(list, dl.target) : resolveDevTarget(list, dl.target);
+      if (!res) return;
+      const server = list.find((s) => s.peerId === res.peerId);
+      if (!server) return;
+      resolvedRef.current = true;
+      await connectTo(server, res.folder);
+      return;
+    }
+    // No deep link, but a token arrived via the URL: open the room's server
+    // straight away when there's exactly one; with several, leave the picker.
+    if (autoConnectRef.current && list.length === 1) {
+      resolvedRef.current = true;
+      await connectTo(list[0]);
+    }
+  }
+
+  function recordConnect(server: PeerInfo, folder?: string) {
+    const base = {
+      token,
+      peerId: server.peerId,
+      kind: server.meta?.kind,
+      name: server.meta?.name,
+      host: server.meta?.host,
+      lastConnected: Date.now(),
+    };
+    if (server.meta?.repo) recordConnection(server.meta.repo, { ...base, folder });
+    const dl = deepLinkRef.current;
+    if (dl?.type === "repo") recordConnection(repoKey(dl.target), { ...base, folder });
+  }
+
   function disconnect() {
     rtcRef.current?.close();
     rtcRef.current = null;
@@ -178,6 +297,12 @@ export function Discovery() {
       </header>
 
       <main style={styles.main}>
+        {resolving && (
+          <p style={{ color: "#dcb67a", marginBottom: 12 }}>
+            Looking for <code style={styles.code}>{resolving}</code> in your rooms…{" "}
+            {token ? "waiting for a live server" : "enter the room's token below"}.
+          </p>
+        )}
         <form onSubmit={applyToken} style={styles.tokenForm}>
           <label style={styles.label}>Token</label>
           <input

package/src/web/history.ts

@@ -0,0 +1,58 @@
+// Persists which rooms you've joined and which repo opened where, so a deep
+// link (/gh/<owner>/<repo>/...) can resolve to the right room + server without
+// re-entering a token. Keyed by repoKey ("gh/owner/repo").
+
+const ROOMS_KEY = "codehost.rooms";
+const HISTORY_KEY = "codehost.history";
+
+export interface HistoryEntry {
+  token: string;
+  peerId?: string;
+  kind?: "repo" | "root";
+  /** For root-kind opens, the ?folder= path used. */
+  folder?: string;
+  name?: string;
+  host?: string;
+  lastConnected: number;
+}
+
+function read<T>(key: string, fallback: T): T {
+  try {
+    const s = localStorage.getItem(key);
+    return s ? (JSON.parse(s) as T) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function write(key: string, val: unknown): void {
+  try {
+    localStorage.setItem(key, JSON.stringify(val));
+  } catch {
+    // quota / private mode — non-fatal
+  }
+}
+
+export function getRooms(): string[] {
+  return read<string[]>(ROOMS_KEY, []);
+}
+
+export function addRoom(token: string): void {
+  if (!token) return;
+  const rooms = getRooms();
+  if (!rooms.includes(token)) write(ROOMS_KEY, [...rooms, token]);
+}
+
+export function getHistory(): Record<string, HistoryEntry> {
+  return read<Record<string, HistoryEntry>>(HISTORY_KEY, {});
+}
+
+export function historyFor(repoKey: string): HistoryEntry | undefined {
+  return getHistory()[repoKey];
+}
+
+export function recordConnection(repoKey: string, entry: HistoryEntry): void {
+  const all = getHistory();
+  all[repoKey] = entry;
+  write(HISTORY_KEY, all);
+}

package/src/web/sw.ts

@@ -4,16 +4,27 @@
 // MessageChannel, streaming the response back. WebSocket connections can't be
 // intercepted here, so we inject a bootstrap script into VS Code's HTML that
 // overrides window.WebSocket inside the iframe (see tunnel-websocket.ts).
+import { cdnProxyBase, isProxiableCdnHost } from "./config";
+
 const sw = self as unknown as ServiceWorkerGlobalScope;
 
 const VS_PREFIX = /^\/vs\/([^/]+)(\/.*)?$/;
+const CDN_CACHE = "codehost-cdn-v1";
 
 sw.addEventListener("install", () => sw.skipWaiting());
 sw.addEventListener("activate", (e) => e.waitUntil(sw.clients.claim()));
 
 sw.addEventListener("fetch", (event: FetchEvent) => {
   const url = new URL(event.request.url);
-  if (url.origin !== sw.location.origin) return;
+  if (url.origin !== sw.location.origin) {
+    // VS Code's product CDN (main.vscode-cdn.net, ...) sends no CORS headers, so
+    // its cross-origin fetches fail in our iframe. Route them through the
+    // signaling Worker, which re-serves them with permissive CORS.
+    if (event.request.method === "GET" && isProxiableCdnHost(url.hostname)) {
+      event.respondWith(proxyCdn(url));
+    }
+    return; // all other cross-origin requests pass through untouched
+  }
 
   // Serve the iframe bootstrap from the SW itself (same-origin, CSP 'self').
   if (url.pathname === "/__codehost/bootstrap.js") {
@@ -28,6 +39,25 @@ sw.addEventListener("fetch", (event: FetchEvent) => {
   event.respondWith(proxyOverTunnel(event.request, peerId));
 });
 
+/**
+ * Fetch an allow-listed VS Code CDN asset through the signaling Worker's /cdn
+ * route (which adds CORS), caching the result so each asset crosses to the
+ * Worker once per browser rather than on every request.
+ */
+async function proxyCdn(url: URL): Promise<Response> {
+  const target = `${cdnProxyBase(sw.location.hostname, sw.location.protocol)}/cdn/${url.hostname}${url.pathname}${url.search}`;
+  const cache = await caches.open(CDN_CACHE);
+  const hit = await cache.match(target);
+  if (hit) return hit;
+  try {
+    const res = await fetch(target);
+    if (res.ok) void cache.put(target, res.clone()).catch(() => {});
+    return res;
+  } catch (err) {
+    return new Response(`cdn proxy error: ${String(err)}`, { status: 502 });
+  }
+}
+
 async function proxyOverTunnel(request: Request, peerId: string): Promise<Response> {
   const client = await pickClient();
   if (!client) return new Response("no codehost page open", { status: 502 });
@@ -35,6 +65,11 @@ async function proxyOverTunnel(request: Request, peerId: string): Promise<Respon
   const url = new URL(request.url);
   const headers: Record<string, string> = {};
   request.headers.forEach((v, k) => (headers[k] = v));
+  // Tell the daemon our public host so VS Code advertises it as the client's
+  // remoteAuthority and builds same-origin resource URLs (vscode-remote-resource,
+  // extension grammars) that route back through the tunnel — instead of the
+  // unreachable 127.0.0.1:<port> it bakes in when it only sees the local host.
+  headers["x-forwarded-host"] = sw.location.host;
   const bodyBuf =
     request.method === "GET" || request.method === "HEAD"
       ? undefined

package/worker/index.ts

@@ -9,10 +9,17 @@ interface Env {
 
 const CORS = {
   "Access-Control-Allow-Origin": "*",
-  "Access-Control-Allow-Methods": "GET,OPTIONS",
+  "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS",
   "Access-Control-Allow-Headers": "*",
 };
 
+// VS Code's product CDN sends no CORS headers, so the workbench's cross-origin
+// fetches (e.g. main.vscode-cdn.net/extensions/chat.json) are blocked in our
+// iframe. We re-serve allow-listed CDN assets with CORS. This is the
+// authoritative gate — only hosts under this suffix may be proxied.
+const CDN_HOST_SUFFIX = ".vscode-cdn.net";
+const CDN_MAX_AGE = 3600;
+
 export default {
   async fetch(request: Request, env: Env): Promise<Response> {
     const url = new URL(request.url);
@@ -21,6 +28,13 @@ export default {
       return new Response(null, { headers: CORS });
     }
 
+    // GET /cdn/<host>/<path>  -> proxy an allow-listed VS Code CDN asset, adding
+    // CORS so it loads cross-origin inside the iframe.
+    const cdn = url.pathname.match(/^\/cdn\/([^/]+)(\/.*)?$/);
+    if (cdn) {
+      return handleCdnProxy(request, cdn[1], `${cdn[2] ?? "/"}${url.search}`);
+    }
+
     // GET /room/:token  -> WebSocket upgrade routed to the per-token DO.
     const match = url.pathname.match(/^\/room\/([^/]+)\/?$/);
     if (match) {
@@ -45,3 +59,37 @@ export default {
     return new Response("not found", { status: 404, headers: CORS });
   },
 };
+
+/**
+ * Proxy a single VS Code CDN asset with permissive CORS, edge-cached. Only
+ * hosts under CDN_HOST_SUFFIX are allowed (not an open proxy). GET/HEAD only.
+ */
+async function handleCdnProxy(request: Request, host: string, pathAndQuery: string): Promise<Response> {
+  if (request.method !== "GET" && request.method !== "HEAD") {
+    return new Response("method not allowed", { status: 405, headers: CORS });
+  }
+  if (!host.endsWith(CDN_HOST_SUFFIX)) {
+    return new Response("host not allowed", { status: 403, headers: CORS });
+  }
+
+  const upstream = `https://${host}${pathAndQuery}`;
+  const cacheKey = new Request(upstream, { method: "GET" });
+  const cache = caches.default;
+
+  let res = await cache.match(cacheKey);
+  if (!res) {
+    const up = await fetch(upstream, { method: "GET", redirect: "follow" });
+    const headers = new Headers(CORS);
+    const ct = up.headers.get("content-type");
+    if (ct) headers.set("content-type", ct);
+    headers.set("cache-control", `public, max-age=${CDN_MAX_AGE}`);
+    res = new Response(up.body, { status: up.status, headers });
+    if (up.ok) await cache.put(cacheKey, res.clone());
+  }
+
+  // HEAD: same headers, no body.
+  if (request.method === "HEAD") {
+    return new Response(null, { status: res.status, headers: res.headers });
+  }
+  return res;
+}