codehost 0.1.0

package/src/cli/tunnel.ts

@@ -0,0 +1,233 @@
+import type { DataChannel } from "node-datachannel";
+import {
+  type HttpReqHead,
+  Op,
+  WsReassembler,
+  chunk,
+  decodeFrame,
+  encodeFrame,
+  encodeJson,
+  payloadJson,
+  payloadText,
+  wsMessageFrames,
+} from "../shared/protocol";
+
+const textDecoder = new TextDecoder();
+
+// Hop-by-hop headers that must not be forwarded across the tunnel.
+const HOP_BY_HOP = new Set([
+  "connection",
+  "keep-alive",
+  "proxy-authenticate",
+  "proxy-authorization",
+  "te",
+  "trailer",
+  "transfer-encoding",
+  "upgrade",
+  "content-length",
+  "host",
+]);
+
+interface HttpStream {
+  head: HttpReqHead;
+  body: Uint8Array[];
+}
+
+/**
+ * Bridges one WebRTC data channel to a local `code serve-web` instance.
+ * Multiplexes concurrent HTTP requests and WebSocket connections by streamId.
+ */
+export class Tunnel {
+  private httpStreams = new Map<number, HttpStream>();
+  private wsConns = new Map<number, WebSocket>();
+  private wsRx = new WsReassembler(); // reassembles browser -> daemon WS messages
+  private origin: string; // e.g. http://127.0.0.1:11991
+  private wsOrigin: string; // e.g. ws://127.0.0.1:11991
+
+  constructor(
+    private channel: DataChannel,
+    private vscodePort: number,
+  ) {
+    this.origin = `http://127.0.0.1:${vscodePort}`;
+    this.wsOrigin = `ws://127.0.0.1:${vscodePort}`;
+    this.channel.onMessage((msg) => {
+      if (typeof msg === "string") return; // all frames are binary
+      const buf = msg as Buffer;
+      void this.onFrame(new Uint8Array(buf.buffer, buf.byteOffset, buf.byteLength));
+    });
+    this.channel.onClosed(() => this.closeAll());
+  }
+
+  private async onFrame(data: Uint8Array): Promise<void> {
+    const { op, streamId, payload } = decodeFrame(data);
+    switch (op) {
+      case Op.HttpReq:
+        this.httpStreams.set(streamId, { head: payloadJson<HttpReqHead>(payload), body: [] });
+        break;
+      case Op.HttpReqBody:
+        this.httpStreams.get(streamId)?.body.push(payload.slice());
+        break;
+      case Op.HttpReqEnd:
+        await this.doHttp(streamId);
+        break;
+      case Op.WsOpen:
+        this.openWs(streamId, payloadJson<{ path: string; protocols?: string[] }>(payload));
+        break;
+      case Op.WsCont:
+        this.wsRx.cont(streamId, payload);
+        break;
+      case Op.WsText:
+        this.wsConns.get(streamId)?.send(textDecoder.decode(this.wsRx.finish(streamId, payload)));
+        break;
+      case Op.WsBin:
+        this.wsConns.get(streamId)?.send(this.wsRx.finish(streamId, payload));
+        break;
+      case Op.WsClose:
+        this.wsRx.drop(streamId);
+        this.wsConns.get(streamId)?.close();
+        this.wsConns.delete(streamId);
+        break;
+    }
+  }
+
+  // ---- HTTP ----
+
+  private async doHttp(streamId: number): Promise<void> {
+    const stream = this.httpStreams.get(streamId);
+    if (!stream) return;
+    this.httpStreams.delete(streamId);
+
+    const { method, path, headers } = stream.head;
+    const reqHeaders = new Headers();
+    for (const [k, v] of Object.entries(headers)) {
+      if (!HOP_BY_HOP.has(k.toLowerCase())) reqHeaders.set(k, v);
+    }
+    reqHeaders.set("host", `127.0.0.1:${this.vscodePort}`);
+
+    const hasBody = method !== "GET" && method !== "HEAD" && stream.body.length > 0;
+    const body = hasBody ? concat(stream.body) : undefined;
+
+    try {
+      const res = await fetch(this.origin + path, {
+        method,
+        headers: reqHeaders,
+        body: body as BodyInit | undefined,
+        redirect: "manual",
+      });
+
+      const resHeaders: Record<string, string> = {};
+      res.headers.forEach((v, k) => {
+        if (!HOP_BY_HOP.has(k.toLowerCase())) resHeaders[k] = v;
+      });
+
+      await this.send(
+        encodeJson(Op.HttpResHead, streamId, {
+          status: res.status,
+          statusText: res.statusText,
+          headers: resHeaders,
+        }),
+      );
+
+      if (res.body) {
+        const reader = res.body.getReader();
+        for (;;) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          for (const part of chunk(value)) {
+            await this.send(encodeFrame(Op.HttpResBody, streamId, part));
+          }
+        }
+      }
+      await this.send(encodeFrame(Op.HttpResEnd, streamId));
+    } catch (err) {
+      await this.send(
+        encodeJson(Op.Error, streamId, { message: `proxy error: ${String(err)}` }),
+      );
+    }
+  }
+
+  // ---- WebSocket ----
+
+  private openWs(streamId: number, info: { path: string; protocols?: string[] }): void {
+    let ws: WebSocket;
+    try {
+      ws = new WebSocket(this.wsOrigin + info.path, info.protocols);
+    } catch (err) {
+      void this.send(encodeJson(Op.WsOpenAck, streamId, { ok: false, error: String(err) }));
+      return;
+    }
+    ws.binaryType = "arraybuffer";
+    this.wsConns.set(streamId, ws);
+
+    ws.onopen = () => {
+      void this.send(encodeJson(Op.WsOpenAck, streamId, { ok: true, protocol: ws.protocol }));
+    };
+    ws.onmessage = (ev: MessageEvent) => {
+      const [terminal, u8] =
+        typeof ev.data === "string"
+          ? [Op.WsText, new TextEncoder().encode(ev.data)] as const
+          : [Op.WsBin, ev.data instanceof ArrayBuffer ? new Uint8Array(ev.data) : new Uint8Array(ev.data as ArrayBufferLike)] as const;
+      for (const frame of wsMessageFrames(terminal, streamId, u8)) void this.send(frame);
+    };
+    ws.onclose = (ev: CloseEvent) => {
+      void this.send(encodeJson(Op.WsClose, streamId, { code: ev.code, reason: ev.reason }));
+      this.wsConns.delete(streamId);
+    };
+    ws.onerror = () => {
+      void this.send(encodeJson(Op.WsClose, streamId, { code: 1006, reason: "error" }));
+      this.wsConns.delete(streamId);
+    };
+  }
+
+  // ---- send: serialized FIFO with backpressure ----
+
+  // Frames must reach the channel in enqueue order (chunked bodies and
+  // fragmented WS messages rely on it), but each send may pause for drain.
+  // Chaining on `sendTail` preserves order even when callers don't await.
+  private sendTail: Promise<void> = Promise.resolve();
+
+  private send(frame: Uint8Array): Promise<void> {
+    const p = this.sendTail.then(async () => {
+      await this.waitForDrain();
+      if (!this.channel.isOpen()) return;
+      this.channel.sendMessageBinary(Buffer.from(frame.buffer, frame.byteOffset, frame.byteLength));
+    });
+    this.sendTail = p.catch(() => {});
+    return p;
+  }
+
+  private waitForDrain(): Promise<void> {
+    const HIGH = 8 * 1024 * 1024; // 8 MB
+    if (!this.channel.isOpen() || this.channel.bufferedAmount() < HIGH) return Promise.resolve();
+    return new Promise((resolve) => {
+      const tick = () => {
+        if (!this.channel.isOpen() || this.channel.bufferedAmount() < HIGH) resolve();
+        else setTimeout(tick, 10);
+      };
+      tick();
+    });
+  }
+
+  closeAll(): void {
+    for (const ws of this.wsConns.values()) {
+      try {
+        ws.close();
+      } catch {
+        // ignore
+      }
+    }
+    this.wsConns.clear();
+    this.httpStreams.clear();
+  }
+}
+
+function concat(parts: Uint8Array[]): Uint8Array {
+  const total = parts.reduce((n, p) => n + p.byteLength, 0);
+  const out = new Uint8Array(total);
+  let off = 0;
+  for (const p of parts) {
+    out.set(p, off);
+    off += p.byteLength;
+  }
+  return out;
+}

package/src/cli/vscode.ts

@@ -0,0 +1,85 @@
+import { spawn, type Subprocess } from "bun";
+
+export interface VscodeServer {
+  port: number;
+  basePath: string;
+  proc: Subprocess;
+  stop: () => void;
+}
+
+export interface LaunchOptions {
+  /** Folder to open in VS Code. */
+  dir: string;
+  /** Base path the server is mounted under, e.g. /vs/<peerId>. */
+  basePath: string;
+  /** Fixed port, or 0 to let VS Code pick a free one. */
+  port?: number;
+}
+
+/**
+ * Launch `code serve-web` for a directory under a given base path and wait
+ * until it answers. Mirrors the prior project's flag set
+ * (tmp/.../vscode-server.cjs): no connection token, license accepted.
+ */
+export async function launchVscode(opts: LaunchOptions): Promise<VscodeServer> {
+  const port = opts.port && opts.port > 0 ? opts.port : await freePort();
+  const args = [
+    "serve-web",
+    "--host",
+    "127.0.0.1",
+    "--port",
+    String(port),
+    "--server-base-path",
+    opts.basePath,
+    "--default-folder",
+    opts.dir,
+    "--without-connection-token",
+    "--accept-server-license-terms",
+  ];
+
+  console.log(`[codehost] launching: code ${args.join(" ")}`);
+  const proc = spawn(["code", ...args], {
+    cwd: opts.dir,
+    stdout: "inherit",
+    stderr: "inherit",
+  });
+
+  const base = `http://127.0.0.1:${port}${opts.basePath}/`;
+  await waitForHttp(base, 30_000);
+  console.log(`[codehost] VS Code ready at ${base}`);
+
+  const stop = () => {
+    try {
+      proc.kill();
+    } catch {
+      // ignore
+    }
+  };
+  return { port, basePath: opts.basePath, proc, stop };
+}
+
+async function waitForHttp(url: string, timeoutMs: number): Promise<void> {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    try {
+      const res = await fetch(url, { redirect: "manual" });
+      if (res.status > 0) return;
+    } catch {
+      // not up yet
+    }
+    await Bun.sleep(300);
+  }
+  throw new Error(`VS Code did not become ready at ${url} within ${timeoutMs}ms`);
+}
+
+async function freePort(): Promise<number> {
+  // Bind to port 0 to get an OS-assigned free port, then release it.
+  const server = Bun.listen({
+    hostname: "127.0.0.1",
+    port: 0,
+    socket: { data() {}, open() {}, close() {} },
+  });
+  const port = server.port;
+  server.stop(true);
+  return port;
+}

package/src/components/Terminal.tsx

@@ -0,0 +1,333 @@
+/**
+ * xterm.js terminal wired to the PTY WebSocket at /ws.
+ *
+ * Features:
+ * - VS Code Dark/Light Modern themes with system auto-switch
+ * - OSC 7 CWD tracking → onCwdChange callback
+ * - OSC 11 background color query response
+ * - CJK double-width (Unicode11Addon)
+ * - Clickable URLs with wrapped-URL reconstruction
+ * - Auto-copy on selection; Cmd/Ctrl+C copies when text is selected
+ * - ResizeObserver for responsive fit
+ * - Auto-reconnect on unexpected disconnect (2 s)
+ * - Heartbeat ping/pong every 10 s to detect zombie sockets
+ */
+import { ClipboardAddon } from "@xterm/addon-clipboard";
+import { FitAddon } from "@xterm/addon-fit";
+import { SearchAddon } from "@xterm/addon-search";
+import { Unicode11Addon } from "@xterm/addon-unicode11";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { Terminal as XTerm } from "@xterm/xterm";
+import "@xterm/xterm/css/xterm.css";
+import { CSSProperties, useEffect, useRef, useState } from "react";
+
+const lightTheme = {
+  background: "#ffffff",
+  foreground: "#3b3b3b",
+  cursor: "#005fb8",
+  cursorAccent: "#ffffff",
+  selectionBackground: "#add6ff",
+  black: "#000000",
+  red: "#cd3131",
+  green: "#00bc00",
+  yellow: "#949800",
+  blue: "#0451a5",
+  magenta: "#bc05bc",
+  cyan: "#0598bc",
+  white: "#555555",
+  brightBlack: "#666666",
+  brightRed: "#cd3131",
+  brightGreen: "#14ce14",
+  brightYellow: "#b5ba00",
+  brightBlue: "#0451a5",
+  brightMagenta: "#bc05bc",
+  brightCyan: "#0598bc",
+  brightWhite: "#a5a5a5",
+};
+
+const darkTheme = {
+  background: "#1f1f1f",
+  foreground: "#cccccc",
+  cursor: "#aeafad",
+  cursorAccent: "#1f1f1f",
+  selectionBackground: "#264f78",
+  black: "#000000",
+  red: "#cd3131",
+  green: "#0dbc79",
+  yellow: "#e5e510",
+  blue: "#2472c8",
+  magenta: "#bc3fbc",
+  cyan: "#11a8cd",
+  white: "#e5e5e5",
+  brightBlack: "#666666",
+  brightRed: "#f14c4c",
+  brightGreen: "#23d18b",
+  brightYellow: "#f5f543",
+  brightBlue: "#3b8eea",
+  brightMagenta: "#d670d6",
+  brightCyan: "#29b8db",
+  brightWhite: "#e5e5e5",
+};
+
+function hexToOscRgb(hex: string): string {
+  const r = hex.slice(1, 3);
+  const g = hex.slice(3, 5);
+  const b = hex.slice(5, 7);
+  return `rgb:${r}${r}/${g}${g}/${b}${b}`;
+}
+
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+const getTheme = () => (prefersDark.matches ? darkTheme : lightTheme);
+
+interface TerminalProps {
+  wsUrl: string;
+  cwd?: string;
+  session?: string;
+  onCwdChange?: (cwd: string) => void;
+  initialCmd?: string;
+  style?: CSSProperties;
+}
+
+export function Terminal({ wsUrl, cwd, session, onCwdChange, initialCmd, style }: TerminalProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const onCwdRef = useRef(onCwdChange);
+  onCwdRef.current = onCwdChange;
+
+  const [wsStatus, setWsStatus] = useState<"connecting" | "connected" | "reconnecting" | "ended">(
+    "connecting",
+  );
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    if (wsUrl === "/ws" && !cwd && !session) return;
+    let disposed = false;
+
+    const init = async () => {
+      if (disposed) return;
+
+      const term = new XTerm({
+        cursorBlink: true,
+        fontSize: 14,
+        lineHeight: 1.2,
+        allowProposedApi: true,
+        rightClickSelectsWord: true,
+        scrollback: 10000,
+        fontFamily:
+          "'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace",
+        theme: getTheme(),
+        linkHandler: {
+          activate(_event, text) {
+            window.open(text, "_blank", "noopener");
+          },
+        },
+      });
+
+      const fitAddon = new FitAddon();
+      const unicode11 = new Unicode11Addon();
+      const webLinks = new WebLinksAddon(((_e: MouseEvent, uri: string, range: { start: { y: number } }) => {
+        let fullUrl = uri;
+        try {
+          const buf = term.buffer.active;
+          const startRow = range.start.y + buf.viewportY;
+          for (let row = startRow + 1; row < buf.length; row++) {
+            const line = buf.getLine(row);
+            if (!line?.isWrapped) break;
+            fullUrl += line.translateToString(true);
+          }
+          fullUrl = fullUrl.replace(/[\s\x00-\x1f]+$/, "");
+        } catch { /* fallback */ }
+        window.open(fullUrl, "_blank", "noopener");
+      }) as never);
+      const searchAddon = new SearchAddon();
+      const clipboardAddon = new ClipboardAddon();
+
+      term.loadAddon(fitAddon);
+      term.loadAddon(unicode11);
+      term.loadAddon(webLinks);
+      term.loadAddon(searchAddon);
+      term.loadAddon(clipboardAddon);
+      term.unicode.activeVersion = "11";
+      term.open(containerRef.current!);
+
+      // Auto-switch theme on system preference change
+      const onThemeChange = () => {
+        term.options.theme = getTheme();
+        if (wrapperRef.current) wrapperRef.current.style.backgroundColor = getTheme().background;
+        wsRef.current?.send(`\x1b[?997;${prefersDark.matches ? "1" : "2"}h`);
+      };
+      prefersDark.addEventListener("change", onThemeChange);
+
+      // OSC 11: respond to background color query
+      term.parser.registerOscHandler(11, (data) => {
+        if (data === "?") {
+          const reply = `\x1b]11;${hexToOscRgb(getTheme().background)}\x1b\\`;
+          wsRef.current?.send(reply);
+        }
+        return true;
+      });
+
+      // Auto-copy on selection
+      term.onSelectionChange(() => {
+        const sel = term.getSelection();
+        if (sel) navigator.clipboard.writeText(sel).catch(() => {});
+      });
+
+      // Ctrl/Cmd+C copies selection; otherwise sends SIGINT
+      term.attachCustomKeyEventHandler((e) => {
+        if (e.type === "keydown" && (e.ctrlKey || e.metaKey) && e.key === "c" && term.hasSelection()) {
+          navigator.clipboard.writeText(term.getSelection()).catch(() => {});
+          term.clearSelection();
+          return false;
+        }
+        return true;
+      });
+
+      // Fit
+      let fitRaf = 0;
+      const debouncedFit = () => {
+        cancelAnimationFrame(fitRaf);
+        fitRaf = requestAnimationFrame(() => {
+          if (disposed) return;
+          const buf = term.buffer.active;
+          const wasAtBottom = buf.baseY + term.rows >= buf.length;
+          fitAddon.fit();
+          if (wasAtBottom) term.scrollToBottom();
+        });
+      };
+
+      await document.fonts.ready;
+      let stableCount = 0, lastH = 0;
+      for (let i = 0; i < 60; i++) {
+        await new Promise((r) => requestAnimationFrame(r));
+        if (disposed) { term.dispose(); return; }
+        const { clientHeight } = containerRef.current ?? {};
+        if (clientHeight && clientHeight === lastH) { if (++stableCount >= 3) break; }
+        else { stableCount = 0; lastH = clientHeight ?? 0; }
+      }
+      if (disposed) { term.dispose(); return; }
+      fitAddon.fit();
+      setTimeout(() => { if (!disposed) fitAddon.fit(); }, 300);
+      setTimeout(() => { if (!disposed) fitAddon.fit(); }, 800);
+
+      // WebSocket connection
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const base =
+        wsUrl.startsWith("ws://") || wsUrl.startsWith("wss://")
+          ? wsUrl
+          : `${protocol}//${window.location.host}${wsUrl}`;
+      const params = new URLSearchParams({
+        cols: String(term.cols),
+        rows: String(term.rows),
+        ...(cwd && { cwd }),
+        ...(session && { session }),
+      });
+      const absUrl = `${base}?${params}`;
+
+      let ws: WebSocket | null = null;
+      const setWs = (w: WebSocket | null) => { ws = w; wsRef.current = w; };
+
+      term.onData((data) => { if (ws?.readyState === WebSocket.OPEN) ws.send(data); });
+      term.onResize(({ cols, rows }) => {
+        if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "resize", cols, rows }));
+      });
+
+      let heartbeatInterval: number | undefined;
+      let pongTimer: number | undefined;
+      const stopHeartbeat = () => {
+        clearInterval(heartbeatInterval);
+        clearTimeout(pongTimer);
+        heartbeatInterval = pongTimer = undefined;
+      };
+      const startHeartbeat = () => {
+        stopHeartbeat();
+        heartbeatInterval = window.setInterval(() => {
+          if (!ws || ws.readyState !== WebSocket.OPEN) return;
+          ws.send(JSON.stringify({ type: "ping", t: Date.now() }));
+          pongTimer = window.setTimeout(() => { try { ws?.close(); } catch { /* */ } }, 8000);
+        }, 10000);
+      };
+
+      const connect = () => {
+        if (disposed) return;
+        setWs(new WebSocket(absUrl));
+        ws!.binaryType = "arraybuffer";
+
+        ws!.onopen = () => {
+          setWsStatus("connected");
+          debouncedFit();
+          ws!.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
+          if (initialCmd) ws!.send(initialCmd + "\n");
+          startHeartbeat();
+        };
+
+        ws!.onmessage = (e) => {
+          if (typeof e.data === "string") {
+            try {
+              const msg = JSON.parse(e.data);
+              if (msg.type === "pong") { if (pongTimer) { clearTimeout(pongTimer); pongTimer = undefined; } return; }
+              if (msg.type === "cwd" && msg.path) { onCwdRef.current?.(msg.path); return; }
+            } catch { /* not a control message */ }
+            term.write(e.data);
+          } else {
+            term.write(e.data instanceof ArrayBuffer ? new Uint8Array(e.data) : e.data);
+          }
+        };
+
+        ws!.onclose = (ev) => {
+          stopHeartbeat();
+          if (disposed) return;
+          if (ev.code === 1000 || ev.code === 1008) { setWsStatus("ended"); return; }
+          setWsStatus("reconnecting");
+          setTimeout(connect, 2000);
+        };
+
+        ws!.onerror = () => setWsStatus("reconnecting");
+      };
+
+      connect();
+
+      const observer = new ResizeObserver(debouncedFit);
+      if (wrapperRef.current) observer.observe(wrapperRef.current);
+
+      if (wrapperRef.current) wrapperRef.current.style.backgroundColor = getTheme().background;
+
+      return () => {
+        disposed = true;
+        stopHeartbeat();
+        cancelAnimationFrame(fitRaf);
+        observer.disconnect();
+        prefersDark.removeEventListener("change", onThemeChange);
+        ws?.close();
+        setWs(null);
+        term.dispose();
+      };
+    };
+
+    let cleanup: (() => void) | undefined;
+    init().then((fn) => { cleanup = fn; });
+    return () => { disposed = true; cleanup?.(); };
+  }, [wsUrl, cwd, session]);
+
+  return (
+    <div
+      ref={wrapperRef}
+      style={{ position: "relative", overflow: "hidden", ...style }}
+    >
+      <div ref={containerRef} style={{ position: "absolute", inset: 0 }} onContextMenu={(e) => e.preventDefault()} />
+      {wsStatus !== "connected" && (
+        <div
+          style={{
+            position: "absolute", top: 8, right: 12, padding: "4px 10px",
+            fontSize: 12, fontFamily: "monospace", borderRadius: 4, pointerEvents: "none", zIndex: 10,
+            background: wsStatus === "reconnecting" ? "#b58900" : wsStatus === "ended" ? "#586e75" : "#268bd2",
+            color: "#fff",
+          }}
+        >
+          {wsStatus === "reconnecting" ? "reconnecting…" : wsStatus === "ended" ? "session ended" : "connecting…"}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Discovery } from "./web/discovery";
+import "./style.css";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element not found");
+createRoot(root).render(
+  <StrictMode>
+    <Discovery />
+  </StrictMode>,
+);