@atolljs/devtools 0.1.7 → 0.1.8

package/dist/{chunk-4N3NBFL3.js → chunk-AGT6VNZI.js}

@@ -1,199 +1,43 @@
-// ../../src/devtools.ts
-var THREAD = typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope ? "worker" : "main";
-var sink = null;
-var setDevtoolsSink = (custom) => {
-  sink = custom;
-};
-var emitDevtools = (event) => {
-  if (sink) sink({ ...event, at: performance.now(), thread: THREAD });
-};
-var PROBED = /* @__PURE__ */ Symbol.for("atoll.devtools.fetch");
-var BODY_PREVIEW = 8 * 1024;
-var TEXTISH = /text|json|javascript|xml|html|css|svg|csv|urlencoded|graphql/;
-var headerList = (h) => h ? [...h.entries()].slice(0, 64) : void 0;
-var bodyPreview = (body) => {
-  if (body === null || body === void 0) return void 0;
-  if (typeof body === "string") return body.slice(0, BODY_PREVIEW);
-  if (body instanceof URLSearchParams) return String(body).slice(0, BODY_PREVIEW);
-  if (body instanceof Blob) return `[${body.type || "blob"} ${body.size}B]`;
-  if (body instanceof ArrayBuffer) return `[ArrayBuffer ${body.byteLength}B]`;
-  if (ArrayBuffer.isView(body)) return `[${body.constructor.name} ${body.byteLength}B]`;
-  if (typeof FormData !== "undefined" && body instanceof FormData) return "[FormData]";
-  return "[stream]";
-};
-var readPreview = async (res, cap) => {
-  const reader = res.body?.getReader();
-  if (!reader) return void 0;
-  const chunks = [];
-  let n = 0;
+import {
+  installFetchProbe,
+  installJankProbe,
+  installMemoryProbe,
+  runDevtoolsCommand,
+  setDevtoolsSink
+} from "./chunk-57NGHQUL.js";
+
+// src/control.ts
+var jsonSafe = (v) => {
+  if (v === void 0) return void 0;
   try {
-    while (n < cap) {
-      const { done, value } = await reader.read();
-      if (done || !value) break;
-      chunks.push(value);
-      n += value.byteLength;
-    }
+    return JSON.parse(JSON.stringify(v));
   } catch {
+    return String(v);
   }
-  if (!n) return void 0;
-  const all = new Uint8Array(n);
-  let off = 0;
-  for (const c of chunks) {
-    all.set(c, off);
-    off += c.byteLength;
-  }
-  return new TextDecoder().decode(all) + (n >= cap ? "\u2026" : "");
 };
-var findTiming = async (absUrl, t0) => {
-  const perf = globalThis.performance;
-  if (!perf?.getEntriesByType) return void 0;
-  for (let tries = 0; tries < 12; tries++) {
-    let best;
-    for (const e of perf.getEntriesByType("resource")) {
-      if (e.name !== absUrl || e.startTime < t0 - 5) continue;
-      if (!best || e.startTime < best.startTime) best = e;
-    }
-    if (best) {
-      const seg = (a, b) => b > a && a > 0 ? b - a : 0;
-      return {
-        queue: seg(best.fetchStart, best.domainLookupStart),
-        dns: seg(best.domainLookupStart, best.domainLookupEnd),
-        tcp: best.secureConnectionStart > 0 ? seg(best.connectStart, best.secureConnectionStart) : seg(best.connectStart, best.connectEnd),
-        tls: best.secureConnectionStart > 0 ? seg(best.secureConnectionStart, best.connectEnd) : 0,
-        wait: seg(best.requestStart, best.responseStart),
-        download: seg(best.responseStart, best.responseEnd),
-        transferSize: best.transferSize,
-        encodedSize: best.encodedBodySize,
-        decodedSize: best.decodedBodySize
-      };
-    }
-    await new Promise((r) => setTimeout(r, 250));
+var answerControl = async (req, reply) => {
+  try {
+    const result = await runDevtoolsCommand(req.cmd, req.args ?? {});
+    reply({ type: "control-result", sessionId: req.sessionId, id: req.id, ok: true, result: jsonSafe(result) });
+  } catch (err) {
+    reply({
+      type: "control-result",
+      sessionId: req.sessionId,
+      id: req.id,
+      ok: false,
+      error: err instanceof Error ? err.message : String(err)
+    });
   }
-  return void 0;
 };
-var installFetchProbe = (scope) => {
-  const original = scope.fetch;
-  if (!original || original[PROBED]) return;
-  let seq = 0;
-  const wrapped = async (input, init) => {
-    const t0 = performance.now();
-    const id = ++seq;
-    const isReq = typeof Request !== "undefined" && input instanceof Request;
-    const url = isReq ? input.url : String(input);
-    const abs = (() => {
-      try {
-        return new URL(url, self.location?.href).href;
-      } catch {
-        return url;
-      }
-    })();
-    const method = (init?.method ?? (isReq ? input.method : "GET")).toUpperCase();
-    const reqClone = isReq && !init?.body ? input.clone() : null;
-    const reqHeaders = headerList(
-      init?.headers ? new Headers(init.headers) : isReq ? input.headers : void 0
-    );
-    let reqBody = bodyPreview(init?.body);
-    try {
-      const res = await original.call(scope, input, init);
-      const len = res.headers.get("content-length");
-      emitDevtools({
-        type: "net:fetch",
-        id,
-        url: url.slice(0, 300),
-        method,
-        status: res.status,
-        ms: performance.now() - t0,
-        bytes: len === null ? void 0 : Number(len),
-        reqHeaders,
-        reqBody
-      });
-      const resClone = res.clone();
-      void (async () => {
-        reqBody ??= reqClone ? await reqClone.text().then((t2) => t2.slice(0, BODY_PREVIEW)).catch(() => void 0) : void 0;
-        const ct = res.headers.get("content-type") ?? "";
-        const resBody = TEXTISH.test(ct) ? await readPreview(resClone, BODY_PREVIEW).catch(() => void 0) : void 0;
-        const t = await findTiming(abs, t0);
-        emitDevtools({
-          type: "net:fetch-detail",
-          id,
-          reqBody,
-          resHeaders: headerList(res.headers),
-          resBody,
-          timing: t,
-          transferSize: t?.transferSize,
-          encodedSize: t?.encodedSize,
-          decodedSize: t?.decodedSize
-        });
-      })();
-      return res;
-    } catch (err) {
-      emitDevtools({
-        type: "net:fetch",
-        id,
-        url: url.slice(0, 300),
-        method,
-        ms: performance.now() - t0,
-        error: err instanceof Error ? err.message : String(err),
-        reqHeaders,
-        reqBody
-      });
-      throw err;
-    }
+var captureEnv = () => {
+  const g = globalThis;
+  return {
+    crossOriginIsolated: g.crossOriginIsolated,
+    sharedArrayBuffer: typeof SharedArrayBuffer !== "undefined",
+    hardwareConcurrency: g.navigator?.hardwareConcurrency,
+    userAgent: g.navigator?.userAgent,
+    node: g.navigator ? void 0 : g.process?.version
   };
-  wrapped[PROBED] = true;
-  scope.fetch = wrapped;
-};
-var memProbed = /* @__PURE__ */ new WeakSet();
-var installMemoryProbe = (scope, intervalMs = 2500) => {
-  if (memProbed.has(scope)) return;
-  const perf = scope.performance;
-  if (!perf) return;
-  const mem = perf.memory;
-  const inWorker = typeof WorkerGlobalScope !== "undefined" && globalThis.self instanceof WorkerGlobalScope;
-  const measure = perf.measureUserAgentSpecificMemory?.bind(perf);
-  const procMem = globalThis.process?.memoryUsage;
-  if (!mem && (!measure || inWorker) && !procMem) return;
-  memProbed.add(scope);
-  if (measure && !inWorker) {
-    const timer2 = setInterval(() => {
-      measure().then((res) => {
-        const contexts = (res.breakdown ?? []).map((b) => ({
-          bytes: b.bytes,
-          scope: b.attribution?.[0]?.scope,
-          url: b.attribution?.[0]?.url
-        })).sort((a, b) => b.bytes - a.bytes).slice(0, 24);
-        emitDevtools({
-          type: "runtime:memory",
-          heapBytes: res.bytes,
-          heapLimitBytes: mem?.jsHeapSizeLimit,
-          contexts
-        });
-      }).catch(() => {
-        if (mem) {
-          emitDevtools({
-            type: "runtime:memory",
-            heapBytes: mem.usedJSHeapSize,
-            heapLimitBytes: mem.jsHeapSizeLimit
-          });
-        }
-      });
-    }, Math.max(intervalMs, 4e3));
-    timer2.unref?.();
-    return;
-  }
-  const timer = setInterval(() => {
-    if (mem) {
-      emitDevtools({
-        type: "runtime:memory",
-        heapBytes: mem.usedJSHeapSize,
-        heapLimitBytes: mem.jsHeapSizeLimit
-      });
-    } else if (procMem) {
-      const u = procMem();
-      emitDevtools({ type: "runtime:memory", heapBytes: u.heapUsed, rssBytes: u.rss });
-    }
-  }, intervalMs);
-  timer.unref?.();
 };
 
 // src/protocol.ts
@@ -225,6 +69,8 @@ function connectBroadcast(opts, session) {
     if (m.data?.type === "view") {
       hello();
       for (const events of tail) post({ type: "batch", session, events });
+    } else if (m.data?.type === "control" && m.data.sessionId === session.id) {
+      void answerControl(m.data, (res) => post(res));
     }
   };
   const timer = setInterval(flush, opts.flushMs ?? 100);
@@ -237,6 +83,8 @@ function connectBroadcast(opts, session) {
   if (typeof addEventListener === "function") addEventListener("pagehide", onHide);
   if (opts.network !== false) installFetchProbe(globalThis);
   if (opts.memory !== false) installMemoryProbe(globalThis);
+  const releaseJank = opts.jank !== false ? installJankProbe() : () => {
+  };
   setDevtoolsSink((event) => {
     if (closed) return;
     pending.push(event);
@@ -255,6 +103,7 @@ function connectBroadcast(opts, session) {
       bye();
       setDevtoolsSink(null);
       clearInterval(timer);
+      releaseJank();
       if (typeof removeEventListener === "function") removeEventListener("pagehide", onHide);
       bc.close();
     }
@@ -269,8 +118,10 @@ var makeSession = (opts) => {
   return {
     id: `s-${Date.now().toString(36)}-${++sessionSeq}`,
     name: opts.session?.name,
+    framework: opts.session?.framework,
     runtime,
-    hint
+    hint,
+    env: captureEnv()
   };
 };
 var autoBroadcast = () => typeof BroadcastChannel !== "undefined" && typeof window !== "undefined" && typeof window.document !== "undefined";
@@ -298,6 +149,15 @@ function connectWebSocket(opts, session) {
     send({ type: "hello", session });
     flush();
   };
+  const onMessage = (text) => {
+    let msg;
+    try {
+      msg = JSON.parse(text);
+    } catch {
+      return;
+    }
+    if (msg.type === "control") void answerControl(msg, (res) => send(res));
+  };
   const isNode = typeof window === "undefined" || typeof window.document === "undefined";
   if (typeof WebSocket !== "undefined") {
     const ws = new WebSocket(url);
@@ -309,6 +169,7 @@ function connectWebSocket(opts, session) {
       close: () => ws.close()
     };
     ws.onopen = onOpen;
+    ws.onmessage = (m) => onMessage(String(m.data));
     ws.onclose = () => clearInterval(timer);
     ws.onerror = () => ws.close();
   } else if (isNode) {
@@ -321,6 +182,7 @@ function connectWebSocket(opts, session) {
       const ws = m.connectNodeWebSocket(url);
       sock = ws;
       ws.onOpen = onOpen;
+      ws.onMessage = onMessage;
       ws.onClose = () => clearInterval(timer);
     }).catch(() => {
     });
@@ -329,6 +191,8 @@ function connectWebSocket(opts, session) {
   timer.unref?.();
   if (opts.network !== false) installFetchProbe(globalThis);
   if (opts.memory !== false) installMemoryProbe(globalThis);
+  const releaseJank = opts.jank !== false ? installJankProbe() : () => {
+  };
   setDevtoolsSink((event) => {
     if (closed) return;
     pending.push(event);
@@ -346,6 +210,7 @@ function connectWebSocket(opts, session) {
       flush();
       sock?.close();
       clearInterval(timer);
+      releaseJank();
     }
   };
 }
@@ -361,41 +226,120 @@ var ANCHOR = {
   bottomcenter: (m) => `left:50%;bottom:${m}px;transform:translateX(-50%)`,
   bottomright: (m) => `right:${m}px;bottom:${m}px`
 };
+var MIN_W = 340;
+var MIN_H = 220;
+var seq = 0;
+function parseHotkey(spec) {
+  const parts = spec.split("+").map((p) => p.trim().toLowerCase()).filter(Boolean);
+  const key = parts.pop() ?? "";
+  const mods = new Set(parts.map((m) => m === "option" ? "alt" : m === "cmd" || m === "meta" ? "meta" : m === "control" ? "ctrl" : m));
+  const code = /^[a-z]$/.test(key) ? `Key${key.toUpperCase()}` : /^[0-9]$/.test(key) ? `Digit${key}` : null;
+  return (e) => e.altKey === mods.has("alt") && e.shiftKey === mods.has("shift") && e.ctrlKey === mods.has("ctrl") && e.metaKey === mods.has("meta") && (code ? e.code === code : e.key.toLowerCase() === key);
+}
 function mountDevtoolsOverlay(opts = {}) {
   const src = opts.src ?? "/__atoll/?mini=1";
-  const W = opts.width ?? 760;
-  const H = opts.height ?? 580;
+  const storeKey = opts.persist === false ? null : typeof opts.persist === "string" ? opts.persist : "atoll-devtools:overlay";
+  const load = () => {
+    if (!storeKey) return {};
+    try {
+      return JSON.parse(localStorage.getItem(storeKey) ?? "{}");
+    } catch {
+      return {};
+    }
+  };
+  const saved = load();
+  const W = Math.max(MIN_W, saved.width ?? opts.width ?? 760);
+  const H = Math.max(MIN_H, saved.height ?? opts.height ?? 580);
   const anchor = ANCHOR[opts.position ?? "bottomright"];
+  const hotkey = opts.hotkey === false ? null : opts.hotkey ?? "Alt+Shift+D";
+  const isHotkey = hotkey ? parseHotkey(hotkey) : null;
+  const hint = hotkey ? ` (${hotkey})` : "";
+  const id = `atoll-devtools-overlay-${++seq}`;
   let open = false;
   const btn = document.createElement("button");
+  btn.type = "button";
   btn.textContent = "atoll devtools";
+  btn.title = `Open atoll devtools${hint}`;
+  btn.setAttribute("aria-controls", id);
+  btn.setAttribute("aria-expanded", "false");
   btn.style.cssText = `${BTN_STYLE};${anchor(12)}`;
   const panel = document.createElement("div");
+  panel.id = id;
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", "atoll devtools");
   panel.style.cssText = `${PANEL_STYLE};width:${W}px;height:${H}px;display:none;${anchor(16)}`;
   const head = document.createElement("div");
   head.style.cssText = "display:flex;align-items:center;gap:8px;padding:5px 10px;flex:none;border-bottom:1px solid #21262d;font:11px ui-monospace,monospace;color:#8b949e;background:#161b22;cursor:move;user-select:none";
-  head.textContent = "atoll devtools";
+  const title = document.createElement("span");
+  title.textContent = "atoll devtools";
+  const base = src.split(/[?#]/)[0];
+  const frame = document.createElement("iframe");
+  let route = "";
+  const currentRoute = () => {
+    try {
+      const h = frame.contentWindow?.location.hash;
+      if (typeof h === "string" && h.startsWith("#/")) return h;
+    } catch {
+    }
+    return route;
+  };
   const pop = document.createElement("a");
-  pop.href = "/__atoll/";
+  pop.href = base;
   pop.target = "_blank";
   pop.rel = "noopener";
   pop.textContent = "full page \u2197";
+  pop.title = "Open this view in the full-page dashboard";
   pop.style.cssText = "color:#58a6ff;text-decoration:none;margin-left:auto";
+  const syncPop = () => {
+    pop.href = base + currentRoute();
+  };
+  pop.addEventListener("pointerenter", syncPop);
+  pop.addEventListener("focus", syncPop);
+  pop.addEventListener("click", syncPop);
   const x = document.createElement("button");
-  x.textContent = "\u2014";
-  x.title = "collapse";
-  x.style.cssText = "color:#8b949e;background:none;border:none;cursor:pointer;font:inherit;padding:0 2px";
-  head.append(pop, x);
-  const frame = document.createElement("iframe");
+  x.type = "button";
+  x.textContent = "\xD7";
+  x.title = `Close${hint}`;
+  x.setAttribute("aria-label", "Close atoll devtools");
+  x.style.cssText = "color:#8b949e;background:none;border:none;cursor:pointer;font:14px/1 ui-monospace,monospace;padding:0 2px";
+  head.append(title, pop, x);
   frame.src = src;
+  frame.title = "atoll devtools dashboard";
   frame.style.cssText = "flex:1;border:0;background:#0d1117;min-height:0";
   const grip = document.createElement("div");
+  grip.setAttribute("aria-hidden", "true");
   grip.style.cssText = "position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#30363d 50%);border-radius:0 0 7px";
   panel.append(head, frame, grip);
   document.body.append(panel, btn);
-  const drag = (e, move) => {
+  const placeAt = (left, top) => {
+    panel.style.left = `${Math.min(Math.max(0, left), Math.max(0, innerWidth - 60))}px`;
+    panel.style.top = `${Math.min(Math.max(0, top), Math.max(0, innerHeight - 40))}px`;
+    panel.style.right = "auto";
+    panel.style.bottom = "auto";
+    panel.style.transform = "none";
+  };
+  if (typeof saved.left === "number" && typeof saved.top === "number") placeAt(saved.left, saved.top);
+  const mem = { ...saved };
+  const save = (what) => {
+    if (!storeKey) return;
+    if (what === "open") mem.open = open;
+    if (what === "size") {
+      mem.width = parseFloat(panel.style.width);
+      mem.height = parseFloat(panel.style.height);
+    }
+    if (what === "move") {
+      mem.left = parseFloat(panel.style.left);
+      mem.top = parseFloat(panel.style.top);
+    }
+    try {
+      localStorage.setItem(storeKey, JSON.stringify(mem));
+    } catch {
+    }
+  };
+  const drag = (e, what, move) => {
     e.preventDefault();
     let lx = e.clientX, ly = e.clientY;
+    frame.style.pointerEvents = "none";
     const mm = (ev) => {
       move(ev.clientX - lx, ev.clientY - ly);
       lx = ev.clientX;
@@ -404,44 +348,62 @@ function mountDevtoolsOverlay(opts = {}) {
     const up = () => {
       removeEventListener("pointermove", mm);
       removeEventListener("pointerup", up);
+      frame.style.pointerEvents = "";
+      save(what);
     };
     addEventListener("pointermove", mm);
     addEventListener("pointerup", up);
   };
   head.onpointerdown = (e) => {
     if (e.target.closest("a,button")) return;
-    drag(e, (dx, dy) => {
+    drag(e, "move", (dx, dy) => {
       const r = panel.getBoundingClientRect();
-      const left = Math.min(Math.max(0, r.left + dx), innerWidth - 60);
-      const top = Math.min(Math.max(0, r.top + dy), innerHeight - 40);
-      panel.style.left = `${left}px`;
-      panel.style.top = `${top}px`;
-      panel.style.right = "auto";
-      panel.style.bottom = "auto";
-      panel.style.transform = "none";
+      placeAt(r.left + dx, r.top + dy);
     });
   };
   grip.onpointerdown = (e) => {
     e.stopPropagation();
-    drag(e, (dx, dy) => {
+    drag(e, "size", (dx, dy) => {
       const r = panel.getBoundingClientRect();
-      panel.style.width = `${Math.max(340, r.width + dx)}px`;
-      panel.style.height = `${Math.max(220, r.height + dy)}px`;
+      panel.style.width = `${Math.max(MIN_W, r.width + dx)}px`;
+      panel.style.height = `${Math.max(MIN_H, r.height + dy)}px`;
     });
   };
-  const set = (v) => {
+  const set = (v, focus = false, persist = true) => {
+    const hadFocus = panel.contains(document.activeElement);
     open = v;
     panel.style.display = v ? "flex" : "none";
     btn.style.display = v ? "none" : "block";
+    btn.setAttribute("aria-expanded", String(v));
+    if (v && focus) frame.focus();
+    if (!v && hadFocus) btn.focus();
+    if (persist) save("open");
   };
-  btn.onclick = () => set(true);
+  btn.onclick = () => set(true, true);
   x.onclick = () => set(false);
-  set(opts.startOpen === true);
+  const onKey = (e) => {
+    if (!isHotkey?.(e)) return;
+    e.preventDefault();
+    set(!open, true);
+  };
+  const onMessage = (e) => {
+    if (e.source !== frame.contentWindow || !e.data || typeof e.data !== "object") return;
+    const d = e.data;
+    if (d.type === "atoll-devtools:toggle") set(!open);
+    else if (d.type === "atoll-devtools:route" && typeof d.hash === "string" && d.hash.startsWith("#/")) {
+      route = d.hash;
+    }
+  };
+  if (isHotkey) addEventListener("keydown", onKey);
+  addEventListener("message", onMessage);
+  set(opts.startOpen ?? saved.open === true, false, false);
   return {
     open: () => set(true),
     close: () => set(false),
     toggle: () => set(!open),
     unmount: () => {
+      removeEventListener("keydown", onKey);
+      removeEventListener("message", onMessage);
       panel.remove();
       btn.remove();
     }
@@ -450,7 +412,7 @@ function mountDevtoolsOverlay(opts = {}) {
 
 // src/init.ts
 var DEVTOOLS_PARAM = "__atoll_devtools";
-var devtoolsEnabled2 = (enabled) => {
+var devtoolsEnabled = (enabled) => {
   if (enabled !== void 0) return enabled;
   if (typeof location !== "undefined" && typeof location.search === "string") {
     return new URLSearchParams(location.search).has(DEVTOOLS_PARAM);
@@ -458,7 +420,7 @@ var devtoolsEnabled2 = (enabled) => {
   return !!globalThis.process?.env?.ATOLL_DEVTOOLS;
 };
 function initDevtools(opts = {}) {
-  if (!devtoolsEnabled2(opts.enabled)) return null;
+  if (!devtoolsEnabled(opts.enabled)) return null;
   const conn = connectDevtools(opts);
   const inWindow = typeof window !== "undefined" && typeof window.document !== "undefined";
   const overlay = inWindow && opts.overlay !== false ? mountDevtoolsOverlay(typeof opts.overlay === "object" ? opts.overlay : {}) : null;
@@ -469,6 +431,6 @@ export {
   connectDevtools,
   mountDevtoolsOverlay,
   DEVTOOLS_PARAM,
-  devtoolsEnabled2 as devtoolsEnabled,
+  devtoolsEnabled,
   initDevtools
 };