castle-web-sdk 0.4.5 → 0.4.6

package/src/runtime.ts

@@ -1,451 +0,0 @@
-import {
-  CASTLE_SDK_PROTOCOL,
-  type CommandName,
-  type CommandParams,
-  type CommandResponseEnvelope,
-} from "./commands";
-import { getCastleEmbed, isEdit } from "./context";
-
-export const CARD_RATIO = 5 / 7;
-
-interface PendingRequest {
-  resolve: (msg: LocalResponse) => void;
-  reject: (err: Error) => void;
-  timeout: ReturnType<typeof setTimeout>;
-}
-
-interface OutgoingMessage {
-  type: string;
-  [key: string]: unknown;
-}
-
-interface LocalResponse {
-  type: string;
-  requestId?: string;
-  ok?: boolean;
-  error?: string;
-  [key: string]: unknown;
-}
-
-interface IncomingMessage {
-  type: string;
-  requestId?: string;
-  [key: string]: unknown;
-}
-
-interface WsPortResponse {
-  port?: number;
-  path?: string;
-}
-
-let ws: WebSocket | null = null;
-let logBuffer: OutgoingMessage[] = [];
-let nextRequestId = 1;
-const pendingRequests = new Map<string, PendingRequest>();
-
-// Local-dev command channel: the `castle-web serve` dev server is the host, so
-// SDK commands ride the same websocket runtime.ts already uses for
-// logs/screenshots/restart. Correlated by requestId, separate from the
-// screenshot/write_file request map above.
-const COMMAND_TIMEOUT_MS = 15000;
-const SOCKET_WAIT_TIMEOUT_MS = 10000;
-const pendingCommands = new Map<
-  string,
-  (env: CommandResponseEnvelope) => void
->();
-
-const origLog = console.log;
-const origWarn = console.warn;
-const origError = console.error;
-
-// Indirected dynamic import so deck bundlers don't statically rewrite it.
-// eslint-disable-next-line @typescript-eslint/no-implied-eval
-const dynamicImport = new Function("u", "return import(u)") as (
-  url: string,
-) => Promise<unknown>;
-
-export function setup(): void {
-  interceptConsole();
-  connectLocal();
-  initPlayCard();
-}
-
-export function writeFile(
-  path: string,
-  contents: string,
-): Promise<LocalResponse> {
-  return sendLocalRequest({
-    type: "write_file",
-    path,
-    contents,
-  });
-}
-
-export function initCard(): HTMLDivElement {
-  const style = document.createElement("style");
-  style.textContent = `
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
-    body { display: flex; align-items: center; justify-content: center; }
-    #castle-card {
-      position: relative;
-      border-radius: 4% / calc(4% * (5 / 7));
-      overflow: hidden;
-      background: #121213;
-    }
-  `;
-  document.head.appendChild(style);
-
-  const card = document.createElement("div");
-  card.id = "castle-card";
-  document.body.appendChild(card);
-
-  function resize(): void {
-    if (getCastleEmbed()?.feed === true) {
-      card.style.width = "100vw";
-      card.style.height = "100vh";
-      return;
-    }
-    const { w, h } = computeCardSize();
-    card.style.width = w + "px";
-    card.style.height = h + "px";
-  }
-  resize();
-  window.addEventListener("resize", resize);
-
-  return card;
-}
-
-// Constrains whatever the deck renders into #root to a centered 5:7 card.
-// The mobile feed host card-sizes its WebView itself, and the editor needs the
-// full viewport, so the card shell applies only to standalone play.
-function initPlayCard(): void {
-  if (isEdit()) return;
-  if (getCastleEmbed()?.feed === true) return;
-
-  const style = document.createElement("style");
-  style.textContent = `
-    html, body { background: #000; }
-    #root > * {
-      position: fixed !important;
-      inset: auto !important;
-      left: 50% !important;
-      top: 50% !important;
-      transform: translate(-50%, -50%) !important;
-      width: var(--castle-card-w, 100vw) !important;
-      height: var(--castle-card-h, 100vh) !important;
-      border-radius: 4% / calc(4% * (5 / 7)) !important;
-      overflow: hidden !important;
-    }
-  `;
-  document.head.appendChild(style);
-
-  function resize(): void {
-    const { w, h } = computeCardSize();
-    document.documentElement.style.setProperty("--castle-card-w", w + "px");
-    document.documentElement.style.setProperty("--castle-card-h", h + "px");
-  }
-  resize();
-  window.addEventListener("resize", resize);
-}
-
-function computeCardSize(): { w: number; h: number } {
-  const maxW = 450;
-  const maxH = 630;
-  const pad = 20;
-  const aw = window.innerWidth - pad * 2;
-  const ah = window.innerHeight - pad * 2;
-  let w: number;
-  let h: number;
-  if (aw / ah < CARD_RATIO) {
-    w = Math.min(aw, maxW);
-    h = w / CARD_RATIO;
-  } else {
-    h = Math.min(ah, maxH);
-    w = h * CARD_RATIO;
-  }
-  return { w, h };
-}
-
-function sendMsg(msg: OutgoingMessage): void {
-  if (ws && ws.readyState === WebSocket.OPEN) {
-    ws.send(JSON.stringify(msg));
-  } else {
-    logBuffer.push(msg);
-  }
-}
-
-function sendLocalRequest(msg: OutgoingMessage): Promise<LocalResponse> {
-  if (!ws || ws.readyState !== WebSocket.OPEN) {
-    return Promise.reject(new Error("Castle local CLI is not connected."));
-  }
-
-  const requestId = `req_${nextRequestId++}`;
-  const request = { ...msg, requestId };
-  return new Promise<LocalResponse>((resolve, reject) => {
-    const timeout = setTimeout(() => {
-      pendingRequests.delete(requestId);
-      reject(new Error(`Timed out waiting for ${msg.type}.`));
-    }, 10000);
-    pendingRequests.set(requestId, { resolve, reject, timeout });
-    ws!.send(JSON.stringify(request));
-  });
-}
-
-// Send an SDK command to the dev server and resolve with the raw response
-// envelope (ok/data/error). transport.ts interprets it — error reconstruction
-// stays uniform across all three channels there. Waits for the socket to open
-// so a command issued during startup isn't dropped.
-export function sendLocalCommand<C extends CommandName>(
-  command: C,
-  params: CommandParams[C],
-): Promise<CommandResponseEnvelope> {
-  const requestId = `cmd_${nextRequestId++}`;
-  return new Promise<CommandResponseEnvelope>((resolve, reject) => {
-    const timeout = setTimeout(() => {
-      pendingCommands.delete(requestId);
-      reject(new Error(`Timed out waiting for command ${command}.`));
-    }, COMMAND_TIMEOUT_MS);
-    pendingCommands.set(requestId, (env) => {
-      clearTimeout(timeout);
-      pendingCommands.delete(requestId);
-      resolve(env);
-    });
-    waitForSocket()
-      .then((socket) => {
-        socket.send(
-          JSON.stringify({
-            type: "castle_command",
-            castleSdk: CASTLE_SDK_PROTOCOL,
-            requestId,
-            command,
-            params,
-          }),
-        );
-      })
-      .catch((error: unknown) => {
-        clearTimeout(timeout);
-        pendingCommands.delete(requestId);
-        reject(error instanceof Error ? error : new Error(String(error)));
-      });
-  });
-}
-
-function waitForSocket(): Promise<WebSocket> {
-  if (ws && ws.readyState === WebSocket.OPEN) return Promise.resolve(ws);
-  return new Promise<WebSocket>((resolve, reject) => {
-    const start = Date.now();
-    const poll = setInterval(() => {
-      if (ws && ws.readyState === WebSocket.OPEN) {
-        clearInterval(poll);
-        resolve(ws);
-      } else if (Date.now() - start > SOCKET_WAIT_TIMEOUT_MS) {
-        clearInterval(poll);
-        reject(new Error("Castle dev server is not connected."));
-      }
-    }, 100);
-  });
-}
-
-function resolveLocalCommand(msg: CommandResponseEnvelope): void {
-  const pending = pendingCommands.get(msg.requestId);
-  if (pending) pending(msg);
-}
-
-function resolveLocalRequest(msg: LocalResponse): boolean {
-  if (!msg.requestId) return false;
-  const pending = pendingRequests.get(msg.requestId);
-  if (!pending) return false;
-  clearTimeout(pending.timeout);
-  pendingRequests.delete(msg.requestId);
-  if (msg.ok) {
-    pending.resolve(msg);
-  } else {
-    pending.reject(new Error(msg.error || "Castle local request failed."));
-  }
-  return true;
-}
-
-function interceptConsole(): void {
-  console.log = (...args: unknown[]): void => {
-    origLog(...args);
-    sendMsg({ type: "log", level: "log", msg: formatConsoleArgs(args) });
-  };
-  console.warn = (...args: unknown[]): void => {
-    origWarn(...args);
-    sendMsg({ type: "log", level: "warn", msg: formatConsoleArgs(args) });
-  };
-  console.error = (...args: unknown[]): void => {
-    origError(...args);
-    sendMsg({ type: "log", level: "error", msg: formatConsoleArgs(args) });
-  };
-}
-
-function formatConsoleArgs(args: unknown[]): string {
-  return args
-    .map((arg) => {
-      if (typeof arg === "string") return arg;
-      if (arg instanceof Error) return arg.stack || arg.message;
-      try {
-        const json = JSON.stringify(arg);
-        return json ?? String(arg);
-      } catch {
-        return String(arg);
-      }
-    })
-    .join(" ");
-}
-
-async function captureWithHtml2Canvas(
-  target: HTMLElement,
-): Promise<string | null> {
-  try {
-    const mod = (await dynamicImport("https://esm.sh/html2canvas")) as {
-      default: (
-        el: HTMLElement,
-        opts: Record<string, unknown>,
-      ) => Promise<HTMLCanvasElement>;
-    };
-    const c = await mod.default(target, {
-      backgroundColor: null,
-      scale: devicePixelRatio,
-      useCORS: true,
-    });
-    return c.toDataURL("image/png");
-  } catch {
-    return null;
-  }
-}
-
-async function captureScreenshot(): Promise<string | null> {
-  const card = document.getElementById("castle-card");
-  const canvas = document.querySelector("canvas");
-  if (document.body?.dataset.castleScreenshotTarget === "viewport") {
-    const viewportCapture = await captureWithHtml2Canvas(document.body);
-    if (viewportCapture) return viewportCapture;
-  }
-  if (card && canvas) {
-    const cardRect = card.getBoundingClientRect();
-    const c = document.createElement("canvas");
-    c.width = cardRect.width * devicePixelRatio;
-    c.height = cardRect.height * devicePixelRatio;
-    const ctx = c.getContext("2d")!;
-    const canvasRect = canvas.getBoundingClientRect();
-    const dx = (canvasRect.left - cardRect.left) * devicePixelRatio;
-    const dy = (canvasRect.top - cardRect.top) * devicePixelRatio;
-    ctx.drawImage(
-      canvas,
-      dx,
-      dy,
-      canvasRect.width * devicePixelRatio,
-      canvasRect.height * devicePixelRatio,
-    );
-    return c.toDataURL("image/png");
-  }
-  if (canvas) return canvas.toDataURL("image/png");
-  return captureWithHtml2Canvas(card || document.body);
-}
-
-function connectLocal(): void {
-  fetch("/__castle/ws-port")
-    .then((r) => r.json() as Promise<WsPortResponse>)
-    .then(({ port, path }) => {
-      if (!port && !path) return;
-      const socket = new WebSocket(
-        path ? localWsUrl(path) : `ws://localhost:${port}`,
-      );
-      socket.onopen = (): void => {
-        ws = socket;
-        for (const msg of logBuffer) ws.send(JSON.stringify(msg));
-        logBuffer = [];
-      };
-      socket.onmessage = (evt: MessageEvent): void => {
-        try {
-          const msg = JSON.parse(evt.data as string) as IncomingMessage;
-          handleLocalMessage(msg);
-        } catch {
-          // ignore malformed messages
-        }
-      };
-      socket.onclose = (): void => {
-        ws = null;
-        for (const [requestId, pending] of pendingRequests) {
-          clearTimeout(pending.timeout);
-          pending.reject(new Error("Castle local CLI disconnected."));
-          pendingRequests.delete(requestId);
-        }
-        setTimeout(connectLocal, 2000);
-      };
-      socket.onerror = (): void => socket.close();
-    })
-    .catch(() => {});
-}
-
-function handleLocalMessage(msg: IncomingMessage): void {
-  if (msg.type === "screenshot_request") {
-    void captureScreenshot()
-      .then((data) => {
-        if (data) {
-          sendMsg({
-            type: "screenshot_response",
-            requestId: msg.requestId,
-            data,
-          });
-          return;
-        }
-        sendMsg({
-          type: "screenshot_response",
-          requestId: msg.requestId,
-          ok: false,
-          error: "Could not capture screenshot.",
-        });
-      })
-      .catch((error: unknown) => {
-        sendMsg({
-          type: "screenshot_response",
-          requestId: msg.requestId,
-          ok: false,
-          error: error instanceof Error ? error.message : "Could not capture screenshot.",
-        });
-      });
-  } else if (msg.type === "restart") {
-    scheduleRestart();
-  } else if (msg.type === "write_file_response") {
-    resolveLocalRequest(msg);
-  } else if (msg.type === "castle_command_response") {
-    resolveLocalCommand(msg as unknown as CommandResponseEnvelope);
-  }
-}
-
-// Restart (from `castle-web restart` / task agents) is debounced so a burst
-// of reload requests -- several tasks finishing close together -- produces
-// one reload. Before reloading, registered hooks run (the kit editor flushes
-// its debounced unsaved edits there) so in-flight work isn't lost.
-const RESTART_DEBOUNCE_MS = 1500;
-let restartTimer: ReturnType<typeof setTimeout> | null = null;
-const beforeRestartHooks = new Set<() => void | Promise<void>>();
-
-export function onBeforeRestart(hook: () => void | Promise<void>): () => void {
-  beforeRestartHooks.add(hook);
-  return () => beforeRestartHooks.delete(hook);
-}
-
-function scheduleRestart(): void {
-  if (restartTimer !== null) clearTimeout(restartTimer);
-  restartTimer = setTimeout(() => {
-    void (async () => {
-      try {
-        await Promise.all([...beforeRestartHooks].map(async (hook) => hook()));
-      } catch {
-        // a failed flush shouldn't block the reload
-      }
-      location.reload();
-    })();
-  }, RESTART_DEBOUNCE_MS);
-}
-
-function localWsUrl(path: string): string {
-  const url = new URL(path, location.href);
-  url.protocol = location.protocol === "https:" ? "wss:" : "ws:";
-  return url.href;
-}