codehost 0.20.1 → 0.20.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [0.20.3](https://github.com/snomiao/codehost/compare/v0.20.2...v0.20.3) (2026-06-12)
+
+
+### Bug Fixes
+
+* **web:** stop wasting wide screens — workspace cards and checkout links flow into grid columns ([3e4b41c](https://github.com/snomiao/codehost/commit/3e4b41c70f111aeff015ba1e50ae687e98d9d5eb))
+
+## [0.20.2](https://github.com/snomiao/codehost/compare/v0.20.1...v0.20.2) (2026-06-11)
+
+
+### Performance Improvements
+
+* **tunnel:** 64KB frames, gzip passthrough, immutable-asset SW cache, event-driven backpressure; ICE path badge ([da3647c](https://github.com/snomiao/codehost/commit/da3647c96ac1e323237e4743e7f0e4b1a83f741d))
+
 ## [0.20.1](https://github.com/snomiao/codehost/compare/v0.20.0...v0.20.1) (2026-06-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codehost",
-  "version": "0.20.1",
+  "version": "0.20.3",
   "type": "module",
   "repository": {
     "type": "git",

package/src/cli/tunnel.ts

@@ -13,6 +13,13 @@ import {
 
 const textDecoder = new TextDecoder();
 
+// Send-queue water marks. HIGH bounds how much data can sit ahead of an
+// interactive message on the (single, ordered) channel — at 20 Mbps, 4 MB is
+// already ~1.6 s of head-of-line latency, so resist raising it; LOW is where
+// the bufferedAmountLow event resumes a paused sender.
+const HIGH_WATER = 4 * 1024 * 1024;
+const LOW_WATER = 1 * 1024 * 1024;
+
 // Hop-by-hop headers that must not be forwarded across the tunnel.
 const HOP_BY_HOP = new Set([
   "connection",
@@ -72,6 +79,12 @@ export class Tunnel {
   ) {
     this.origin = `http://127.0.0.1:${vscodePort}`;
     this.wsOrigin = `ws://127.0.0.1:${vscodePort}`;
+    try {
+      this.channel.setBufferedAmountLowThreshold(LOW_WATER);
+      this.channel.onBufferedAmountLow(() => this.drainWaiter?.());
+    } catch {
+      // older node-datachannel: the poll in waitForDrain still covers it
+    }
     this.channel.onMessage((msg) => {
       if (typeof msg === "string") return; // all frames are binary
       const buf = msg as Buffer;
@@ -148,6 +161,14 @@ export class Tunnel {
     const hasBody = method !== "GET" && method !== "HEAD" && stream.body.length > 0;
     const body = hasBody ? concat(stream.body) : undefined;
 
+    // A client that can inflate (TunnelClient sends this marker) gets the
+    // upstream's gzip bytes passed through UNTOUCHED — 3-4x fewer bytes over
+    // the channel for VS Code's JS/CSS. gzip only: the browser inflates with
+    // DecompressionStream, which has no brotli.
+    const wantsGzip = reqHeaders.get("x-codehost-accept-gzip") === "1";
+    reqHeaders.delete("x-codehost-accept-gzip");
+    if (wantsGzip) reqHeaders.set("accept-encoding", "gzip");
+
     try {
       const local = this.onLocal?.({ method, path, headers: reqHeaders, body });
       const res = local
@@ -157,6 +178,8 @@ export class Tunnel {
             headers: reqHeaders,
             body: body as BodyInit | undefined,
             redirect: "manual",
+            // Bun extension: don't auto-inflate — keep the wire bytes compressed.
+            ...(wantsGzip ? ({ decompress: false } as RequestInit) : {}),
           });
 
       const resHeaders: Record<string, string> = {};
@@ -240,15 +263,26 @@ export class Tunnel {
     return p;
   }
 
+  // Fires from onBufferedAmountLow so a paused sender resumes the moment the
+  // queue drains past LOW_WATER instead of on the next poll tick.
+  private drainWaiter: (() => void) | null = null;
+
   private waitForDrain(): Promise<void> {
-    const HIGH = 8 * 1024 * 1024; // 8 MB
-    if (!this.channel.isOpen() || this.channel.bufferedAmount() < HIGH) return Promise.resolve();
+    if (!this.channel.isOpen() || this.channel.bufferedAmount() < HIGH_WATER) return Promise.resolve();
     return new Promise((resolve) => {
-      const tick = () => {
-        if (!this.channel.isOpen() || this.channel.bufferedAmount() < HIGH) resolve();
-        else setTimeout(tick, 10);
+      let settled = false;
+      const finish = () => {
+        if (settled) return;
+        settled = true;
+        clearInterval(timer);
+        this.drainWaiter = null;
+        resolve();
       };
-      tick();
+      this.drainWaiter = finish;
+      // Safety poll in case the low event raced or isn't available.
+      const timer = setInterval(() => {
+        if (!this.channel.isOpen() || this.channel.bufferedAmount() < HIGH_WATER) finish();
+      }, 100);
     });
   }
 

package/src/shared/protocol.ts

@@ -31,12 +31,15 @@ export enum Op {
   WsCont = 13,
 }
 
-// WebRTC data-channel messages must stay small to be portable: 16 KiB is the
-// largest size every WebRTC stack (libdatachannel, Chrome, Firefox) reliably
-// accepts. A frame is [op:1][streamId:4][payload], so the payload budget is
-// 16 KiB minus the 5-byte header.
+// Frame size vs JS overhead: every frame costs a promise hop + two copies on
+// its way through the tunnel, so bigger frames = faster bulk transfer. Both
+// stacks we pair (Chrome/Firefox <-> libdatachannel) negotiate an SCTP
+// max-message-size of 256 KiB, so 64 KiB rides well inside every negotiated
+// limit while cutting per-MB frame count 4x vs the old 16 KiB. Receivers
+// accept any frame size (decodeFrame is length-agnostic), so mixed old/new
+// peers interoperate. A frame is [op:1][streamId:4][payload].
 export const FRAME_HEADER = 5;
-export const MAX_FRAME = 16 * 1024;
+export const MAX_FRAME = 64 * 1024;
 /** Max payload bytes per frame; larger bodies/messages are split across frames. */
 export const MAX_CHUNK = MAX_FRAME - FRAME_HEADER;
 

package/src/web/discovery.tsx

@@ -193,6 +193,9 @@ export function Discovery() {
   // client carries the peer's signaling and it's the token Share/history record.
   const [activePeerId, setActivePeerId] = useState<string | null>(null);
   const [connState, setConnState] = useState<ConnState>("idle");
+  // ICE path of the live session ("lan" | "p2p"); null when unknown or when
+  // this tab rides another tab's connection via the broker.
+  const [connPath, setConnPath] = useState<"lan" | "p2p" | null>(null);
   const [iframeSrc, setIframeSrc] = useState<string | null>(null);
   // Streamed setup.sh output shown while connState === "provisioning".
   const [provisionLog, setProvisionLog] = useState("");
@@ -455,6 +458,22 @@ export function Discovery() {
 
       await connBroker.connect(server.peerId, establish);
 
+      // Show which ICE path got nominated (owner tab only — a proxied tab has
+      // no RTCPeerConnection of its own). ICE may re-nominate just after the
+      // channel opens, so sample again shortly.
+      setConnPath(null);
+      // (assertion: TS narrows the ref to null from the reset above and can't
+      // see that `establish` re-assigned it)
+      const rtcForPath = rtcRef.current as RtcClient | null;
+      if (rtcForPath) {
+        const sample = () =>
+          void rtcForPath.selectedPath().then((p) => {
+            if (rtcRef.current === rtcForPath && p) setConnPath(p);
+          });
+        sample();
+        setTimeout(sample, 3000);
+      }
+
       // For a repo deep link, ask the daemon to provision (run .codehost/setup.sh
       // and hand back the authoritative workspace path) before opening. Streams
       // the log under the "provisioning" state. Daemons without the route (older
@@ -624,6 +643,7 @@ export function Discovery() {
     rtcRef.current = null;
     if (activePeerRef.current) connBroker.disconnect(activePeerRef.current);
     setIframeSrc(null);
+    setConnPath(null);
     setActivePeerId(null);
     activePeerRef.current = null;
     activeRoomRef.current = null;
@@ -795,6 +815,18 @@ export function Discovery() {
                 activeServer?.meta?.name ??
                 activePeerId?.slice(0, 8)}
             </span>
+            {connPath && (
+              <span
+                style={styles.dim}
+                title={
+                  connPath === "lan"
+                    ? "direct LAN path — both ends on the same network"
+                    : "direct peer-to-peer path (NAT traversed)"
+                }
+              >
+                {connPath === "lan" ? "⚡LAN" : "🌐p2p"}
+              </span>
+            )}
             <span style={{ flex: 1 }} />
             <button
               style={styles.shareBtn}
@@ -830,6 +862,9 @@ export function Discovery() {
         </header>
 
         <main style={styles.main}>
+          {/* Inputs stay at a readable measure; the workspace grid below uses
+              the full width. */}
+          <div style={styles.controls}>
           {resolving && (
             <p style={{ color: "#dcb67a", marginBottom: 12 }}>
               Looking for <code style={styles.code}>{resolving}</code> in your rooms…{" "}
@@ -931,6 +966,7 @@ export function Discovery() {
               {ghError && <p style={styles.tokenError}>{ghError}</p>}
             </>
           )}
+          </div>
 
           <div style={styles.listHead}>
             <h2 style={styles.h2}>Workspaces</h2>
@@ -1074,7 +1110,11 @@ const styles: Record<string, React.CSSProperties> = {
   brand: { fontFamily: "monospace", fontWeight: 700, color: "#fff" },
   dim: { color: "#888", fontSize: 12 },
   status: { fontSize: 12 },
-  main: { flex: 1, overflow: "auto", padding: "20px 24px", maxWidth: 760, width: "100%", margin: "0 auto", boxSizing: "border-box" },
+  // Wide cap + per-host card GRID below: a 4K monitor gets several columns of
+  // workspaces instead of one skinny 760px strip. Inputs keep a readable
+  // measure via `controls`.
+  main: { flex: 1, overflow: "auto", padding: "20px 24px", maxWidth: 1560, width: "100%", margin: "0 auto", boxSizing: "border-box" },
+  controls: { maxWidth: 760 },
   tokenForm: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 },
   tokenHint: { margin: "0 0 20px", fontSize: 12, color: "#888" },
   tokenError: { margin: "0 0 20px", fontSize: 12, color: "#f48771" },
@@ -1106,13 +1146,22 @@ const styles: Record<string, React.CSSProperties> = {
     border: "1px solid #3d3d3d", background: "transparent", color: "#9aa4af", cursor: "pointer",
   },
   idLine: { fontFamily: "monospace", fontSize: 11, color: "#666", marginTop: 6 },
-  wsRow: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 3, marginTop: 8 },
+  // Workspace links flow into columns on wide screens (a busy root daemon can
+  // advertise 50+ checkouts — a single column wasted the whole viewport).
+  wsRow: {
+    display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+    gap: "2px 14px", marginTop: 8,
+  },
   wsLink: {
     fontFamily: "monospace", fontSize: 12, padding: "2px 0", border: "none", background: "transparent",
     color: "#75beff", cursor: "pointer", textAlign: "left",
   },
   code: { background: "#252525", padding: "2px 6px", borderRadius: 4, fontFamily: "monospace", fontSize: 12 },
-  list: { listStyle: "none", margin: "0 0 14px", padding: 0, display: "flex", flexDirection: "column", gap: 8 },
+  list: {
+    listStyle: "none", margin: "0 0 14px", padding: 0,
+    display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(360px, 1fr))", gap: 8,
+    alignItems: "start",
+  },
   hostHead: { display: "flex", alignItems: "baseline", gap: 10, margin: "0 0 8px" },
   hostName: { fontSize: 13, fontWeight: 600, color: "#dcdcaa", fontFamily: "monospace" },
   agentRow: { display: "flex", flexWrap: "wrap", gap: 6, margin: "0 0 8px" },

package/src/web/rtc-client.ts

@@ -69,6 +69,42 @@ export class RtcClient {
     return this.channel;
   }
 
+  /**
+   * Which ICE path the nominated candidate pair uses: "lan" when both ends
+   * are host candidates (same network — traffic never leaves it), "p2p" for a
+   * NAT-traversed direct path, null while undetermined. Surfaced in the UI so
+   * "it feels slow" reports come with the path attached.
+   */
+  async selectedPath(): Promise<"lan" | "p2p" | null> {
+    try {
+      const stats = await this.pc.getStats();
+      let pairId: string | null = null;
+      stats.forEach((s) => {
+        if (s.type === "transport" && s.selectedCandidatePairId) pairId = s.selectedCandidatePairId;
+      });
+      let pair: RTCIceCandidatePairStats | null = null;
+      stats.forEach((s) => {
+        if (pairId ? s.id === pairId : s.type === "candidate-pair" && s.state === "succeeded" && s.nominated) {
+          pair = s as RTCIceCandidatePairStats;
+        }
+      });
+      if (!pair) return null;
+      const { localCandidateId, remoteCandidateId } = pair as RTCIceCandidatePairStats;
+      let lan = true;
+      let found = 0;
+      stats.forEach((s) => {
+        if (s.id === localCandidateId || s.id === remoteCandidateId) {
+          found++;
+          if ((s as { candidateType?: string }).candidateType !== "host") lan = false;
+        }
+      });
+      if (found < 2) return null;
+      return lan ? "lan" : "p2p";
+    } catch {
+      return null;
+    }
+  }
+
   close(): void {
     try {
       this.channel?.close();

package/src/web/sw.ts

@@ -10,6 +10,12 @@ const sw = self as unknown as ServiceWorkerGlobalScope;
 
 const VS_PREFIX = /^\/vs\/([^/]+)(\/.*)?$/;
 const CDN_CACHE = "codehost-cdn-v1";
+const VS_STATIC_CACHE = "codehost-vs-static-v1";
+// VS Code's own immutable assets: /stable-<commit>/static/** is content-
+// addressed by the commit hash and identical across daemons, so it's cached
+// once per browser instead of crossing the WebRTC tunnel on every load. The
+// cache key strips the per-process /vs/<peerId> prefix.
+const VS_STATIC = /^\/(stable-[0-9a-f]{40})\/static\//;
 
 sw.addEventListener("install", () => sw.skipWaiting());
 sw.addEventListener("activate", (e) => e.waitUntil(sw.clients.claim()));
@@ -35,10 +41,39 @@ sw.addEventListener("fetch", (event: FetchEvent) => {
   const m = url.pathname.match(VS_PREFIX);
   if (!m) return; // let the network/Pages handle the discovery app itself
   const peerId = m[1];
+  const rest = (m[2] ?? "/") + url.search;
+
+  if (event.request.method === "GET" && !event.request.headers.has("range") && VS_STATIC.test(rest)) {
+    event.respondWith(cachedStatic(event.request, peerId, rest));
+    return;
+  }
 
   event.respondWith(proxyOverTunnel(event.request, peerId));
 });
 
+/** Cache-first for the immutable VS Code static assets; on a cache miss the
+ *  tunnel fills it, and assets of other (older) commits are evicted. */
+async function cachedStatic(request: Request, peerId: string, rest: string): Promise<Response> {
+  const key = `${sw.location.origin}/__codehost/vs-static${rest}`;
+  const cache = await caches.open(VS_STATIC_CACHE);
+  const hit = await cache.match(key);
+  if (hit) return hit;
+  const res = await proxyOverTunnel(request, peerId);
+  if (res.status === 200) {
+    void cache.put(key, res.clone()).catch(() => {});
+    void evictOtherCommits(cache, rest).catch(() => {});
+  }
+  return res;
+}
+
+async function evictOtherCommits(cache: Cache, rest: string): Promise<void> {
+  const commit = rest.match(VS_STATIC)?.[1];
+  if (!commit) return;
+  for (const req of await cache.keys()) {
+    if (!new URL(req.url).pathname.includes(`/${commit}/`)) void cache.delete(req);
+  }
+}
+
 /**
  * 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

package/src/web/tunnel-client.ts

@@ -118,14 +118,31 @@ export class TunnelClient {
         },
       });
 
+      // Tell the daemon we can inflate: it then passes the upstream's gzip
+      // bytes through untouched (3-4x fewer bytes over the channel) and we
+      // decompress here, once, for every consumer.
+      const reqHeaders =
+        typeof DecompressionStream !== "undefined"
+          ? { ...headers, "x-codehost-accept-gzip": "1" }
+          : headers;
+
       this.https.set(streamId, {
         onHead: (h) => {
           head = h;
+          const resHeaders = new Headers(h.headers);
+          let bodyStream: ReadableStream<Uint8Array> = stream;
+          if (resHeaders.get("content-encoding") === "gzip") {
+            bodyStream = stream.pipeThrough(
+              new DecompressionStream("gzip") as unknown as ReadableWritablePair<Uint8Array, Uint8Array>,
+            );
+            resHeaders.delete("content-encoding");
+            resHeaders.delete("content-length");
+          }
           resolve(
-            new Response(stream, {
+            new Response(bodyStream, {
               status: h.status === 204 || h.status === 304 ? h.status : h.status,
               statusText: h.statusText,
-              headers: h.headers,
+              headers: resHeaders,
             }),
           );
         },
@@ -154,7 +171,7 @@ export class TunnelClient {
         },
       });
 
-      this.send(encodeJson(Op.HttpReq, streamId, { method, path, headers }));
+      this.send(encodeJson(Op.HttpReq, streamId, { method, path, headers: reqHeaders }));
       if (body && body.byteLength) {
         for (const part of chunk(body)) this.send(encodeFrame(Op.HttpReqBody, streamId, part));
       }