@openthink/ui-leaf 0.5.0 → 0.6.1

package/packages/cli/dist/cli.js

@@ -38,13 +38,15 @@ var reactAliasPlugin = {
     });
   }
 };
+var SESSION_ENDED_HTML = '<div style="font-family:sans-serif;padding:2em;color:#555"><p>Session ended \u2014 re-launch the CLI to continue.</p></div>';
+var CLOSED_OVERLAY_HTML = '<div style="font-family:sans-serif;padding:2em;color:#555"><p>This view has closed.</p></div>';
 var SHARED_BRIDGE = `
 async function mutate(name: string, args?: unknown): Promise<unknown> {
   const res = await fetch("/mutate", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      ...(token ? { Authorization: "Bearer " + token } : {}),
+      ...(token ? { "X-UI-Leaf-Token": token } : {}),
     },
     body: JSON.stringify({ name, args }),
   });
@@ -66,12 +68,64 @@ async function heartbeat(): Promise<void> {
   try {
     await fetch("/heartbeat", {
       method: "POST",
-      headers: token ? { Authorization: "Bearer " + token } : {},
+      headers: token ? { "X-UI-Leaf-Token": token } : {},
     });
   } catch { /* server may have shut down; ignore */ }
 }
 setInterval(heartbeat, 5000);
-heartbeat();`;
+heartbeat();
+
+function subscribeEvents(onEvent: (ev: { type: string; [k: string]: unknown }) => void): void {
+  let delay = 250;
+  const budget = 30_000;
+  const started = Date.now();
+  let done = false;
+
+  async function connect(): Promise<void> {
+    try {
+      const res = await fetch("/events", {
+        headers: token ? { "X-UI-Leaf-Token": token } : {},
+      });
+      if (!res.ok || !res.body) throw new Error("bad status " + res.status);
+      delay = 250;
+      const reader = res.body.getReader();
+      const dec = new TextDecoder("utf-8");
+      let buf = "";
+      while (true) {
+        const { done: streamDone, value } = await reader.read();
+        if (streamDone) break;
+        buf += dec.decode(value, { stream: true });
+        let idx: number;
+        while ((idx = buf.indexOf("\\n\\n")) !== -1) {
+          const chunk = buf.slice(0, idx);
+          buf = buf.slice(idx + 2);
+          for (const line of chunk.split("\\n")) {
+            if (line.startsWith("data:")) {
+              try {
+                const ev = JSON.parse(line.slice(5).trimStart()) as { type: string; [k: string]: unknown };
+                if (ev.type === "closing") done = true;
+                onEvent(ev);
+              } catch { /* skip malformed event */ }
+            }
+          }
+        }
+        if (done) return;
+      }
+    } catch {
+      if (done) return;
+    }
+    if (done) return;
+    if (Date.now() - started > budget) {
+      onEvent({ type: "closing", reason: "error" });
+      return;
+    }
+    await new Promise<void>((r) => setTimeout(r, delay));
+    delay = Math.min(delay * 2, 5_000);
+    void connect();
+  }
+
+  void connect();
+}`;
 async function runBunBuild(entryPath) {
   let buildOutput;
   try {
@@ -104,21 +158,21 @@ async function runBunBuild(entryPath) {
   return { js: await output.text() };
 }
 function assembleHtml(opts) {
-  const { js, title, csp, data, token, dataLoader } = opts;
+  const { js, title, csp, data, dataLoader } = opts;
   const safeJs = js.replace(/<\/script>/gi, "<\\/script>");
   const titleEscaped = title.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   const cspMeta = csp ? `    <meta http-equiv="Content-Security-Policy" content="${csp.replace(/&/g, "&amp;").replace(/"/g, "&quot;")}" />
 ` : "";
-  const safeToken = token ? escapeForScriptTag(JSON.stringify(token)) : null;
-  const tokenField = safeToken ? `, token: ${safeToken}` : "";
-  const bootstrapValue = dataLoader ? `{ token: ${safeToken ?? '""'} }` : `{ data: JSON.parse(${escapeForScriptTag(JSON.stringify(JSON.stringify(data ?? null)))})${tokenField} }`;
+  const dataInit = dataLoader ? "window.__UI_LEAF__ = {};" : `window.__UI_LEAF__ = { data: JSON.parse(${escapeForScriptTag(JSON.stringify(JSON.stringify(data ?? null)))}) };`;
+  const bootstrapScript = `${dataInit}
+(function(){var m=/[#&]token=([^&#]*)/.exec(window.location.hash);if(m){try{window.__UI_LEAF__.token=decodeURIComponent(m[1]);history.replaceState(null,"",window.location.pathname+window.location.search);}catch(e){window.__UI_LEAF__.sessionEnded=true;}}else{window.__UI_LEAF__.sessionEnded=true;}})();`;
   return `<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>${titleEscaped}</title>
 ${cspMeta}    <!-- ui-leaf bootstrap -->
-    <script>window.__UI_LEAF__ = ${bootstrapValue};</script>
+    <script>${bootstrapScript}</script>
   </head>
   <body>
     <div id="root"></div>
@@ -133,9 +187,9 @@ async function compileView(opts) {
     data,
     title = "ui-leaf",
     csp,
-    // allowedHosts has no compile-time effect; accepted for API symmetry.
+    // allowedHosts and token have no compile-time effect; accepted for API symmetry.
     allowedHosts: _allowedHosts,
-    token,
+    token: _token,
     dataLoader = false
   } = opts;
   const viewsRootAbs = resolve(viewsRoot);
@@ -175,41 +229,75 @@ async function compileView(opts) {
     const entryContent = dataLoader ? `import { createRoot } from "react-dom/client";
 import View from ${JSON.stringify(viewAbs)};
 
-const ctx = (globalThis as { __UI_LEAF__?: { token?: string } }).__UI_LEAF__ ?? {};
+const ctx = (globalThis as { __UI_LEAF__?: { token?: string; sessionEnded?: boolean } }).__UI_LEAF__ ?? {};
 const token = ctx.token;
+
+if (ctx.sessionEnded) {
+  const root = document.getElementById("root");
+  if (root) root.innerHTML = ${JSON.stringify(SESSION_ENDED_HTML)};
+} else {
 ${SHARED_BRIDGE}
 
-async function bootstrap(): Promise<void> {
-  const res = await fetch("/api/data", {
-    headers: token ? { Authorization: "Bearer " + token } : {},
-  });
-  if (!res.ok) {
-    const text = await res.text().catch(() => "");
-    throw new Error("ui-leaf: /api/data fetch failed (" + res.status + "): " + text);
+  async function bootstrap(): Promise<void> {
+    const res = await fetch("/api/data", {
+      headers: token ? { "X-UI-Leaf-Token": token } : {},
+    });
+    if (!res.ok) {
+      const text = await res.text().catch(() => "");
+      throw new Error("ui-leaf: /api/data fetch failed (" + res.status + "): " + text);
+    }
+    let currentData: unknown = await res.json();
+    const el = document.getElementById("root");
+    if (!el) throw new Error("ui-leaf: #root element missing");
+    const root = createRoot(el);
+    root.render(<View data={currentData} mutate={mutate} />);
+    subscribeEvents((ev) => {
+      if (ev.type === "data-updated") {
+        currentData = ev.data;
+        root.render(<View data={currentData} mutate={mutate} />);
+      } else if (ev.type === "view-swapped") {
+        window.location.reload();
+      } else if (ev.type === "closing") {
+        el.innerHTML = ${JSON.stringify(CLOSED_OVERLAY_HTML)};
+      }
+    });
   }
-  const data = await res.json();
-  const el = document.getElementById("root");
-  if (!el) throw new Error("ui-leaf: #root element missing");
-  createRoot(el).render(<View data={data} mutate={mutate} />);
+  bootstrap();
 }
-bootstrap();
 ` : `import { createRoot } from "react-dom/client";
 import View from ${JSON.stringify(viewAbs)};
 
-const ctx = (globalThis as { __UI_LEAF__?: { data?: unknown; token?: string } }).__UI_LEAF__ ?? {};
-const data = ctx.data;
+const ctx = (globalThis as { __UI_LEAF__?: { data?: unknown; token?: string; sessionEnded?: boolean } }).__UI_LEAF__ ?? {};
 const token = ctx.token;
+
+if (ctx.sessionEnded) {
+  const root = document.getElementById("root");
+  if (root) root.innerHTML = ${JSON.stringify(SESSION_ENDED_HTML)};
+} else {
+  let currentData: unknown = ctx.data;
 ${SHARED_BRIDGE}
 
-const el = document.getElementById("root");
-if (!el) throw new Error("ui-leaf: #root element missing");
-createRoot(el).render(<View data={data} mutate={mutate} />);
+  const el = document.getElementById("root");
+  if (!el) throw new Error("ui-leaf: #root element missing");
+  const root = createRoot(el);
+  root.render(<View data={currentData} mutate={mutate} />);
+  subscribeEvents((ev) => {
+    if (ev.type === "data-updated") {
+      currentData = ev.data;
+      root.render(<View data={currentData} mutate={mutate} />);
+    } else if (ev.type === "view-swapped") {
+      window.location.reload();
+    } else if (ev.type === "closing") {
+      el.innerHTML = ${JSON.stringify(CLOSED_OVERLAY_HTML)};
+    }
+  });
+}
 `;
     await writeFile(entryPath, entryContent);
     const buildResult = await runBunBuild(entryPath);
     if ("errors" in buildResult) return { html: "", errors: buildResult.errors };
     return {
-      html: assembleHtml({ js: buildResult.js, title, csp, data, token, dataLoader }),
+      html: assembleHtml({ js: buildResult.js, title, csp, data, dataLoader }),
       errors: []
     };
   } finally {
@@ -217,7 +305,7 @@ createRoot(el).render(<View data={data} mutate={mutate} />);
   }
 }
 async function compileSource(opts) {
-  const { source, data, title = "ui-leaf", csp, token } = opts;
+  const { source, data, title = "ui-leaf", csp, token: _token } = opts;
   const tempDir = await mkdtemp(join(tmpdir(), "ui-leaf-src-"));
   try {
     const viewPath = join(tempDir, "view.tsx");
@@ -226,20 +314,37 @@ async function compileSource(opts) {
     const entryContent = `import { createRoot } from "react-dom/client";
 import View from ${JSON.stringify(viewPath)};
 
-const ctx = (globalThis as { __UI_LEAF__?: { data?: unknown; token?: string } }).__UI_LEAF__ ?? {};
-const data = ctx.data;
+const ctx = (globalThis as { __UI_LEAF__?: { data?: unknown; token?: string; sessionEnded?: boolean } }).__UI_LEAF__ ?? {};
 const token = ctx.token;
+
+if (ctx.sessionEnded) {
+  const root = document.getElementById("root");
+  if (root) root.innerHTML = ${JSON.stringify(SESSION_ENDED_HTML)};
+} else {
+  let currentData: unknown = ctx.data;
 ${SHARED_BRIDGE}
 
-const el = document.getElementById("root");
-if (!el) throw new Error("ui-leaf: #root element missing");
-createRoot(el).render(<View data={data} mutate={mutate} />);
+  const el = document.getElementById("root");
+  if (!el) throw new Error("ui-leaf: #root element missing");
+  const root = createRoot(el);
+  root.render(<View data={currentData} mutate={mutate} />);
+  subscribeEvents((ev) => {
+    if (ev.type === "data-updated") {
+      currentData = ev.data;
+      root.render(<View data={currentData} mutate={mutate} />);
+    } else if (ev.type === "view-swapped") {
+      window.location.reload();
+    } else if (ev.type === "closing") {
+      el.innerHTML = ${JSON.stringify(CLOSED_OVERLAY_HTML)};
+    }
+  });
+}
 `;
     await writeFile(entryPath, entryContent);
     const buildResult = await runBunBuild(entryPath);
     if ("errors" in buildResult) return { html: "", errors: buildResult.errors };
     return {
-      html: assembleHtml({ js: buildResult.js, title, csp, data, token, dataLoader: false }),
+      html: assembleHtml({ js: buildResult.js, title, csp, data, dataLoader: false }),
       errors: []
     };
   } finally {
@@ -337,7 +442,8 @@ async function startDevServer(opts) {
     csp,
     allowedHosts,
     silent = false,
-    _opener
+    _opener,
+    _heartbeatCheckIntervalMs = 1e3
   } = opts;
   const cspHeader = resolveCsp(csp);
   const allowedHostSet = new Set(DEFAULT_LOOPBACK_HOSTNAMES);
@@ -347,8 +453,19 @@ async function startDevServer(opts) {
   try {
     let fireEvent2 = function(event) {
       for (const fn of listeners.get(event)) fn();
+    }, broadcast2 = function(event) {
+      const frame = sseEncoder.encode(`data: ${JSON.stringify(event)}
+
+`);
+      for (const controller of sseClients) {
+        try {
+          controller.enqueue(frame);
+        } catch {
+          sseClients.delete(controller);
+        }
+      }
     };
-    var fireEvent = fireEvent2;
+    var fireEvent = fireEvent2, broadcast = broadcast2;
     if (view.includes("/") || view.includes("\\")) {
       throw new Error(
         `ui-leaf: view '${view}' must be a bare identifier with no path separators`
@@ -378,10 +495,15 @@ async function startDevServer(opts) {
     const viewState = { html: result.html, data: dataLoader ? loadedData : data };
     const listeners = /* @__PURE__ */ new Map([
       ["data-updated", /* @__PURE__ */ new Set()],
-      ["view-swapped", /* @__PURE__ */ new Set()]
+      ["view-swapped", /* @__PURE__ */ new Set()],
+      ["disconnected", /* @__PURE__ */ new Set()],
+      ["reconnected", /* @__PURE__ */ new Set()]
     ]);
+    const sseClients = /* @__PURE__ */ new Set();
+    const sseEncoder = new TextEncoder();
     let lastHeartbeatAt = Date.now();
     let closeRequested = false;
+    let connectionState = "connecting";
     let resolveClosed = () => {
     };
     const closed = new Promise((r) => {
@@ -389,82 +511,135 @@ async function startDevServer(opts) {
     });
     const bunPort = port === void 0 ? 5810 : port;
     let actualPort = bunPort;
-    const server = (() => {
-      const handler = (req) => {
-        const host = req.headers.get("host") ?? void 0;
-        const origin = req.headers.get("origin") ?? void 0;
-        const hostOk = isAllowedHost(host, allowedHostSet);
-        const originOk = isAllowedOrigin(origin, allowedHostSet);
-        if (!hostOk || !originOk) {
-          const offender = !hostOk ? `Host "${host ?? "(absent)"}"` : `Origin "${origin}"`;
-          return new Response(
-            `ui-leaf: refusing request with ${offender} \u2014 only the following hostnames are accepted to prevent DNS rebinding: ${allowedHostList}. Open the server at http://localhost:${actualPort}/ or http://127.0.0.1:${actualPort}/, or pass { allowedHosts: ["my-alias"] } to mount() to permit a custom alias.
+    const handler = (req) => {
+      const host = req.headers.get("host") ?? void 0;
+      const origin = req.headers.get("origin") ?? void 0;
+      const hostOk = isAllowedHost(host, allowedHostSet);
+      const originOk = isAllowedOrigin(origin, allowedHostSet);
+      if (!hostOk || !originOk) {
+        const offender = !hostOk ? `Host "${host ?? "(absent)"}"` : `Origin "${origin}"`;
+        return new Response(
+          `ui-leaf: refusing request with ${offender} \u2014 only the following hostnames are accepted to prevent DNS rebinding: ${allowedHostList}. Open the server at http://localhost:${actualPort}/ or http://127.0.0.1:${actualPort}/, or pass { allowedHosts: ["my-alias"] } to mount() to permit a custom alias.
 `,
-            { status: 403, headers: { "Content-Type": "text/plain; charset=utf-8" } }
-          );
+          { status: 403, headers: { "Content-Type": "text/plain; charset=utf-8" } }
+        );
+      }
+      const headers = {};
+      if (cspHeader) {
+        headers["Content-Security-Policy"] = cspHeader;
+      }
+      const url2 = new URL(req.url);
+      const path = url2.pathname;
+      const method = req.method;
+      if (method === "GET" && path === "/") {
+        return new Response(viewState.html, {
+          status: 200,
+          headers: { ...headers, "Content-Type": "text/html; charset=utf-8" }
+        });
+      }
+      if (method === "POST" && path === "/heartbeat") {
+        if (!checkAuth(req, token)) {
+          return new Response("", { status: 401, headers });
         }
-        const headers = {};
-        if (cspHeader) {
-          headers["Content-Security-Policy"] = cspHeader;
+        lastHeartbeatAt = Date.now();
+        if (connectionState === "disconnected") {
+          connectionState = "connected";
+          fireEvent2("reconnected");
+        } else if (connectionState === "connecting") {
+          connectionState = "connected";
         }
-        const url2 = new URL(req.url);
-        const path = url2.pathname;
-        const method = req.method;
-        if (method === "GET" && path === "/") {
-          return new Response(viewState.html, {
-            status: 200,
-            headers: { ...headers, "Content-Type": "text/html; charset=utf-8" }
+        return new Response("", { status: 204, headers });
+      }
+      if (method === "POST" && path === "/mutate") {
+        if (!checkAuth(req, token)) {
+          return new Response("", { status: 401, headers });
+        }
+        return handleMutate(req, mutations, headers);
+      }
+      if (method === "GET" && path === "/api/data") {
+        if (!dataLoader) {
+          return new Response(JSON.stringify({ error: "not found" }), {
+            status: 404,
+            headers: { ...headers, "Content-Type": "application/json" }
           });
         }
-        if (method === "POST" && path === "/heartbeat") {
-          if (!checkAuth(req, token)) {
-            return new Response(JSON.stringify({ error: "unauthorized" }), {
-              status: 401,
-              headers: { ...headers, "Content-Type": "application/json" }
-            });
-          }
-          lastHeartbeatAt = Date.now();
-          return new Response("", { status: 204, headers });
+        if (!checkAuth(req, token)) {
+          return new Response("", { status: 401, headers });
         }
-        if (method === "POST" && path === "/mutate") {
-          if (!checkAuth(req, token)) {
-            return new Response(JSON.stringify({ error: "unauthorized" }), {
-              status: 401,
-              headers: { ...headers, "Content-Type": "application/json" }
-            });
-          }
-          return handleMutate(req, mutations, headers);
+        return new Response(JSON.stringify(viewState.data !== void 0 ? viewState.data : null), {
+          status: 200,
+          headers: { ...headers, "Content-Type": "application/json" }
+        });
+      }
+      if (method === "GET" && path === "/events") {
+        if (!checkAuth(req, token)) {
+          return new Response("", { status: 401, headers });
         }
-        if (method === "GET" && path === "/api/data") {
-          if (!dataLoader) {
-            return new Response(JSON.stringify({ error: "not found" }), {
-              status: 404,
-              headers: { ...headers, "Content-Type": "application/json" }
+        let sseController;
+        const stream = new ReadableStream({
+          start(controller) {
+            sseController = controller;
+            sseClients.add(controller);
+            controller.enqueue(sseEncoder.encode(": connected\n\n"));
+            req.signal?.addEventListener("abort", () => {
+              sseClients.delete(sseController);
+              try {
+                sseController.close();
+              } catch {
+              }
             });
+          },
+          cancel() {
+            sseClients.delete(sseController);
           }
-          if (!checkAuth(req, token)) {
-            return new Response(JSON.stringify({ error: "unauthorized" }), {
-              status: 401,
-              headers: { ...headers, "Content-Type": "application/json" }
-            });
+        });
+        return new Response(stream, {
+          status: 200,
+          headers: {
+            ...headers,
+            "Content-Type": "text/event-stream",
+            "Cache-Control": "no-cache"
           }
-          return new Response(JSON.stringify(viewState.data !== void 0 ? viewState.data : null), {
-            status: 200,
-            headers: { ...headers, "Content-Type": "application/json" }
-          });
-        }
-        return new Response(JSON.stringify({ error: "not found" }), {
-          status: 404,
-          headers: { ...headers, "Content-Type": "application/json" }
         });
-      };
+      }
+      return new Response(JSON.stringify({ error: "not found" }), {
+        status: 404,
+        headers: { ...headers, "Content-Type": "application/json" }
+      });
+    };
+    let heartbeatWatcher;
+    let bunServer;
+    const cleanup = async (reason) => {
+      if (closeRequested) return;
+      closeRequested = true;
+      if (heartbeatWatcher) clearInterval(heartbeatWatcher);
+      broadcast2({ type: "closing", reason });
+      for (const controller of sseClients) {
+        try {
+          controller.close();
+        } catch {
+        }
+      }
+      sseClients.clear();
+      await bunServer.stop();
+      if (restoreStdout) restoreStdout();
+      resolveClosed(reason);
+    };
+    const serverErrorHandler = (_err) => {
+      void cleanup("error");
+      return new Response(JSON.stringify({ error: "internal server error" }), {
+        status: 500,
+        headers: { "Content-Type": "application/json" }
+      });
+    };
+    bunServer = (() => {
       if (bunPort === 0) {
-        return Bun.serve({ hostname: "127.0.0.1", port: 0, fetch: handler });
+        return Bun.serve({ hostname: "127.0.0.1", port: 0, fetch: handler, error: serverErrorHandler, idleTimeout: 0 });
       }
       const MAX_PORT_ATTEMPTS = 10;
       for (let i = 0; i < MAX_PORT_ATTEMPTS; i++) {
         try {
-          return Bun.serve({ hostname: "127.0.0.1", port: bunPort + i, fetch: handler });
+          return Bun.serve({ hostname: "127.0.0.1", port: bunPort + i, fetch: handler, error: serverErrorHandler, idleTimeout: 0 });
         } catch (err) {
           const isAddrinuse = err instanceof Error && err.message.includes("EADDRINUSE");
           if (!isAddrinuse || i === MAX_PORT_ATTEMPTS - 1) {
@@ -479,37 +654,33 @@ async function startDevServer(opts) {
       }
       throw new Error("unreachable");
     })();
-    actualPort = server.port ?? bunPort;
+    actualPort = bunServer.port ?? bunPort;
     const url = `http://127.0.0.1:${actualPort}`;
     const startedAt = Date.now();
-    let heartbeatWatcher;
-    const cleanup = async () => {
-      if (closeRequested) return;
-      closeRequested = true;
-      if (heartbeatWatcher) clearInterval(heartbeatWatcher);
-      await server.stop(true);
-      if (restoreStdout) restoreStdout();
-      resolveClosed();
-    };
     heartbeatWatcher = setInterval(() => {
+      if (closeRequested) return;
       const now = Date.now();
       if (now - startedAt < startupGraceMs) return;
       if (now - lastHeartbeatAt > heartbeatTimeoutMs) {
-        void cleanup();
+        if (connectionState !== "disconnected") {
+          connectionState = "disconnected";
+          fireEvent2("disconnected");
+        }
       }
-    }, 1e3);
-    const doOpen = _opener ? () => _opener(url) : async () => {
+    }, _heartbeatCheckIntervalMs);
+    const openUrl = `${url}/#token=${token}`;
+    const doOpen = _opener ? () => _opener(openUrl) : async () => {
       if (shell === "app") {
-        const launched = await openInAppMode(url);
+        const launched = await openInAppMode(openUrl);
         if (!launched) {
           process.stderr.write(
             `ui-leaf: shell:"app" requested but no Chromium browser found; falling back to default browser tab.
 `
           );
-          await open(url);
+          await open(openUrl);
         }
       } else {
-        await open(url);
+        await open(openUrl);
       }
     };
     if (openBrowser) {
@@ -519,7 +690,7 @@ async function startDevServer(opts) {
       url,
       port: actualPort,
       closed,
-      close: cleanup,
+      close: (reason = "caller") => cleanup(reason),
       on(event, listener) {
         listeners.get(event)?.add(listener);
       },
@@ -528,6 +699,7 @@ async function startDevServer(opts) {
       },
       update(newData) {
         viewState.data = newData;
+        broadcast2({ type: "data-updated", data: newData });
         fireEvent2("data-updated");
       },
       async swapView(source) {
@@ -540,6 +712,7 @@ async function startDevServer(opts) {
         });
         if (r.errors.length > 0) return r.errors;
         viewState.html = r.html;
+        broadcast2({ type: "view-swapped" });
         fireEvent2("view-swapped");
         return [];
       },
@@ -554,6 +727,8 @@ async function startDevServer(opts) {
         if (r.errors.length > 0) return r.errors;
         viewState.data = newData;
         viewState.html = r.html;
+        broadcast2({ type: "data-updated", data: newData });
+        broadcast2({ type: "view-swapped" });
         fireEvent2("data-updated");
         fireEvent2("view-swapped");
         return [];
@@ -568,10 +743,9 @@ async function startDevServer(opts) {
   }
 }
 function checkAuth(req, token) {
-  const header = req.headers.get("authorization") ?? "";
-  const match = /^Bearer (.+)$/.exec(header);
-  if (!match) return false;
-  return timingSafeEqual(match[1], token);
+  const value = req.headers.get("x-ui-leaf-token") ?? "";
+  if (!value) return false;
+  return timingSafeEqual(value, token);
 }
 async function handleMutate(req, mutations, headers) {
   const contentLength = req.headers.get("content-length");
@@ -644,11 +818,12 @@ async function mount(opts) {
     startupGraceMs: opts.startupGraceMs,
     csp: opts.csp,
     allowedHosts: opts.allowedHosts,
-    silent: opts.silent
+    silent: opts.silent,
+    _heartbeatCheckIntervalMs: opts._heartbeatCheckIntervalMs
   });
   const onSignal = (signal) => {
     void (async () => {
-      await server.close();
+      await server.close("signal");
       process.kill(process.pid, signal);
     })();
   };
@@ -664,8 +839,8 @@ async function mount(opts) {
       return {
         url: server.url,
         port: server.port,
-        closed: Promise.resolve(),
-        close: server.close,
+        closed: Promise.resolve("caller"),
+        close: () => server.close(),
         update: server.update.bind(server),
         swapView: (source) => server.swapView(source),
         patch: (data, source) => server.patch(data, source),
@@ -688,7 +863,7 @@ async function mount(opts) {
     url: server.url,
     port: server.port,
     closed,
-    close: server.close,
+    close: () => server.close(),
     update: server.update.bind(server),
     swapView: (source) => server.swapView(source),
     patch: (data, source) => server.patch(data, source),
@@ -894,6 +1069,10 @@ async function runMount() {
       });
       return;
     }
+    if (msg.type === "close") {
+      void mountedView.close();
+      return;
+    }
     emit2({ type: "error", message: `unknown message type: ${msg.type}` });
   });
   rl.on("close", () => {
@@ -942,10 +1121,12 @@ async function runMount() {
     if (stdinClosed) {
       void view.close();
     }
+    view.on("disconnected", () => emit2({ type: "disconnected" }));
+    view.on("reconnected", () => emit2({ type: "reconnected" }));
     emit2({ type: "ready", url: view.url, port: view.port });
-    await view.closed;
-    emit2({ type: "closed" });
-    process.exit(0);
+    const closeReason = await view.closed;
+    emit2({ type: "closed", reason: closeReason });
+    process.exit(closeReason === "error" ? 1 : 0);
   } catch (err) {
     emit2({
       type: "error",