@kizenapps/cli 0.8.0 → 0.10.0

package/dist/index.js

@@ -229,18 +229,269 @@ import { render as render2 } from "ink";
 // src/ui/DevUI.tsx
 import { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState3 } from "react";
 import { Box as Box4, Text as Text4, useInput as useInput2 } from "ink";
-import { spawn } from "child_process";
 import { createReadStream, watch } from "fs";
-import { access, readFile as readFile4 } from "fs/promises";
+import { access, readFile as readFile5 } from "fs/promises";
 import { createServer } from "http";
+import { dirname as dirname3, extname, join as join7 } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+import { WebSocketServer } from "ws";
+
+// src/chrome/launcher.ts
+import { launch } from "chrome-launcher";
 import { createRequire } from "module";
-import { dirname as dirname2, extname, join as join6 } from "path";
+import { mkdirSync } from "fs";
+import { readFile as readFile2 } from "fs/promises";
+import { dirname, join as join4 } from "path";
 import { fileURLToPath } from "url";
-import { WebSocketServer } from "ws";
+var CDP = createRequire(import.meta.url)("chrome-remote-interface");
+var CSP_HEADERS = /* @__PURE__ */ new Set([
+  "content-security-policy",
+  "content-security-policy-report-only",
+  "x-frame-options"
+]);
+var KIZEN_DOMAINS = ["kizen.dev", "kizen.com"];
+function isKizenUrl(url) {
+  try {
+    const { hostname } = new URL(url);
+    return KIZEN_DOMAINS.some((d) => hostname === d || hostname.endsWith("." + d));
+  } catch {
+    return false;
+  }
+}
+function parseProp(prop) {
+  if (prop.type === "number") {
+    return Number(prop.value);
+  }
+  if (prop.type === "boolean") {
+    return prop.value === "true";
+  }
+  if (prop.type === "undefined") {
+    return void 0;
+  }
+  if (prop.type === "object" && prop.value === "null") {
+    return null;
+  }
+  if (prop.type === "object" && prop.valuePreview) {
+    const { valuePreview } = prop;
+    if (valuePreview.subtype === "array") {
+      return valuePreview.properties.filter((p) => /^\d+$/.test(p.name)).sort((a, b) => parseInt(a.name) - parseInt(b.name)).map(parseProp);
+    }
+    const obj = {};
+    for (const p of valuePreview.properties) {
+      obj[p.name] = parseProp(p);
+    }
+    return obj;
+  }
+  return prop.value ?? `[${prop.type}]`;
+}
+function serializeArg(arg) {
+  if (arg.value !== void 0) {
+    return arg.value;
+  }
+  if (arg.preview) {
+    const { preview } = arg;
+    if (preview.subtype === "array") {
+      return preview.properties.filter((p) => /^\d+$/.test(p.name)).sort((a, b) => parseInt(a.name) - parseInt(b.name)).map(parseProp);
+    }
+    const obj = {};
+    for (const prop of preview.properties) {
+      obj[prop.name] = parseProp(prop);
+    }
+    return obj;
+  }
+  return arg.description ?? `[${arg.type}]`;
+}
+async function serializeArgAsync(client, arg) {
+  if (arg.type === "object" && arg.objectId) {
+    try {
+      const result = await client.Runtime.callFunctionOn({
+        objectId: arg.objectId,
+        functionDeclaration: 'function() { const seen = new WeakSet(); return JSON.stringify(this, function(k,v) { if (typeof v === "object" && v !== null) { if (seen.has(v)) return "[Circular]"; seen.add(v); } return v; }); }',
+        returnByValue: true
+      });
+      const val = result.result.value;
+      if (typeof val === "string") {
+        return JSON.parse(val);
+      }
+    } catch {
+    }
+  }
+  return serializeArg(arg);
+}
+async function installDockIcon(client) {
+  try {
+    const iconPath = join4(dirname(fileURLToPath(import.meta.url)), "viewer", "icon.png");
+    const icon = await readFile2(iconPath);
+    await client.Browser.setDockTile({ image: icon.toString("base64") });
+  } catch {
+  }
+}
+async function launchChromeViewer(opts) {
+  mkdirSync(opts.userDataDir, { recursive: true });
+  const chrome = await launch({
+    startingUrl: `http://localhost:${String(opts.port)}`,
+    chromeFlags: [
+      `--app=http://localhost:${String(opts.port)}`,
+      "--no-first-run",
+      "--no-default-browser-check",
+      "--disable-extensions"
+    ],
+    userDataDir: opts.userDataDir,
+    handleSIGINT: false,
+    logLevel: "silent"
+  });
+  let client = null;
+  let cookieTimer = null;
+  const cdpPort = chrome.port;
+  for (let attempt = 0; attempt < 10; attempt++) {
+    await new Promise((r) => setTimeout(r, 300));
+    try {
+      client = await CDP({ port: cdpPort });
+      break;
+    } catch {
+      if (attempt === 9) {
+        return {
+          kill: () => {
+            chrome.kill();
+          }
+        };
+      }
+    }
+  }
+  if (!client) {
+    return {
+      kill: () => {
+        chrome.kill();
+      }
+    };
+  }
+  const c = client;
+  await installDockIcon(c);
+  await c.Fetch.enable({
+    patterns: KIZEN_DOMAINS.flatMap((d) => [
+      { urlPattern: `*://${d}/*`, requestStage: "Response" },
+      { urlPattern: `*://*.${d}/*`, requestStage: "Response" }
+    ])
+  });
+  c.on("Fetch.requestPaused", (rawParams) => {
+    void (async () => {
+      const params = rawParams;
+      const { requestId, request, responseHeaders, responseStatusCode } = params;
+      const url = request.url;
+      const filtered = [];
+      for (const h of responseHeaders ?? []) {
+        if (CSP_HEADERS.has(h.name.toLowerCase())) {
+          continue;
+        }
+        if (h.name.toLowerCase() === "set-cookie" && isKizenUrl(url)) {
+          const patched = h.value.split("\n").map((cookie) => {
+            if (!/SameSite=/i.test(cookie)) {
+              return cookie + "; SameSite=None; Secure";
+            }
+            return cookie.replace(/SameSite=\w+/i, "SameSite=None");
+          }).join("\n");
+          filtered.push({ name: h.name, value: patched });
+        } else {
+          filtered.push(h);
+        }
+      }
+      try {
+        const { body, base64Encoded } = await c.Fetch.getResponseBody({ requestId });
+        await c.Fetch.fulfillRequest({
+          requestId,
+          responseCode: responseStatusCode ?? 200,
+          responseHeaders: filtered,
+          body,
+          ...base64Encoded && { base64Encoded: true }
+        });
+      } catch {
+        try {
+          await c.Fetch.continueRequest({ requestId });
+        } catch {
+        }
+      }
+    })();
+  });
+  cookieTimer = setInterval(() => {
+    void (async () => {
+      try {
+        const { cookies } = await c.Network.getAllCookies();
+        for (const cookie of cookies) {
+          if (!isKizenUrl(`https://${cookie.domain ?? ""}`)) {
+            continue;
+          }
+          if (cookie.sameSite === "None") {
+            continue;
+          }
+          const raw = cookie.domain ?? "";
+          const bare = raw.startsWith(".") ? raw.slice(1) : raw;
+          await c.Network.setCookie({
+            url: `https://${bare}`,
+            name: cookie.name,
+            value: cookie.value,
+            domain: raw,
+            path: cookie.path ?? "/",
+            secure: true,
+            ...cookie.httpOnly !== void 0 && { httpOnly: cookie.httpOnly },
+            ...cookie.expirationDate !== void 0 && {
+              expires: cookie.expirationDate
+            },
+            sameSite: "None"
+          });
+        }
+      } catch {
+      }
+    })();
+  }, 2e3);
+  await c.send("Runtime.enable", { generatePreview: true });
+  c.on("Target.attachedToTarget", (rawParams) => {
+    const { sessionId } = rawParams;
+    void c.send("Runtime.enable", { generatePreview: true }, sessionId).catch(() => {
+    });
+  });
+  await c.Target.setAutoAttach({
+    autoAttach: true,
+    waitForDebuggerOnStart: false,
+    flatten: true
+  });
+  await c.Target.setDiscoverTargets({ discover: true });
+  c.on("Target.targetCreated", (rawParams) => {
+    const { targetInfo } = rawParams;
+    if (targetInfo.type === "page" && targetInfo.url === "chrome://newtab/") {
+      void c.Target.closeTarget({ targetId: targetInfo.targetId }).catch(() => {
+      });
+    }
+  });
+  c.on("Runtime.consoleAPICalled", (rawParams) => {
+    void (async () => {
+      const { type, args } = rawParams;
+      if (args[0]?.type === "string" && String(args[0].value).includes("Chrome Security")) {
+        return;
+      }
+      const level = type === "warning" ? "warn" : ["log", "warn", "error", "info"].includes(type) ? type : "log";
+      const serialized = await Promise.all(args.map((arg) => serializeArgAsync(c, arg)));
+      opts.broadcast({ type: "console-message", level, args: serialized });
+    })().catch(() => {
+    });
+  });
+  const kill = () => {
+    clearInterval(cookieTimer);
+    try {
+      void c.close();
+    } catch {
+    }
+    chrome.kill();
+  };
+  return { kill };
+}
 
 // src/lib/proxyCache.ts
-function createProxyCache() {
+function createProxyCache(options = {}) {
   const cache = /* @__PURE__ */ new Map();
+  const { onChange } = options;
+  const emitChange = () => {
+    onChange?.(cache.size);
+  };
   return {
     get(key, fetcher) {
       const existing = cache.get(key);
@@ -258,24 +509,33 @@ function createProxyCache() {
         };
       }).catch((error) => {
         cache.delete(key);
+        emitChange();
         throw error;
       });
       cache.set(key, pending);
-      return pending.then((response) => ({ response, fromCache: false }));
+      emitChange();
+      return pending.then((response) => {
+        if (response.status >= 400) {
+          cache.delete(key);
+          emitChange();
+        }
+        return { response, fromCache: false };
+      });
     },
     clear() {
       cache.clear();
+      emitChange();
     }
   };
 }
 
 // src/lib/credentials.ts
-import { mkdir as mkdir2, readFile as readFile2, readdir as readdir2, writeFile as writeFile2 } from "fs/promises";
+import { mkdir as mkdir2, readFile as readFile3, readdir as readdir2, writeFile as writeFile2 } from "fs/promises";
 import { homedir } from "os";
-import { dirname, join as join4 } from "path";
+import { dirname as dirname2, join as join5 } from "path";
 var ENVIRONMENTS = ["go", "fmo", "staging", "integration", "test1"];
-var GLOBAL_CREDENTIALS_DIR = join4(homedir(), ".kizenappbuilder");
-var GLOBAL_CREDENTIALS_PATH = join4(GLOBAL_CREDENTIALS_DIR, "credentials.json");
+var GLOBAL_CREDENTIALS_DIR = join5(homedir(), ".kizenappbuilder");
+var GLOBAL_CREDENTIALS_PATH = join5(GLOBAL_CREDENTIALS_DIR, "credentials.json");
 var DEFAULT_PROFILE_NAME = "credentials";
 function isValidEnvironment(value) {
   return ENVIRONMENTS.includes(value);
@@ -294,7 +554,7 @@ function parseCredentials(raw) {
   };
 }
 async function loadCredentialsFromFile(filePath) {
-  const content = await readFile2(filePath, "utf-8");
+  const content = await readFile3(filePath, "utf-8");
   return parseCredentials(JSON.parse(content));
 }
 async function loadGlobalCredentials() {
@@ -305,11 +565,11 @@ async function loadGlobalCredentials() {
   }
 }
 async function saveGlobalCredentials(credentials) {
-  await mkdir2(dirname(GLOBAL_CREDENTIALS_PATH), { recursive: true });
+  await mkdir2(dirname2(GLOBAL_CREDENTIALS_PATH), { recursive: true });
   await writeFile2(GLOBAL_CREDENTIALS_PATH, JSON.stringify(credentials, null, 2), "utf-8");
 }
 function getProfilePath(name) {
-  return join4(GLOBAL_CREDENTIALS_DIR, `${name}.json`);
+  return join5(GLOBAL_CREDENTIALS_DIR, `${name}.json`);
 }
 async function listCredentialProfiles() {
   const profiles = [
@@ -318,10 +578,14 @@ async function listCredentialProfiles() {
   try {
     const entries = await readdir2(GLOBAL_CREDENTIALS_DIR);
     for (const entry of entries) {
-      if (!entry.endsWith(".json")) continue;
+      if (!entry.endsWith(".json")) {
+        continue;
+      }
       const name = entry.slice(0, -5);
-      if (name === DEFAULT_PROFILE_NAME) continue;
-      profiles.push({ name, path: join4(GLOBAL_CREDENTIALS_DIR, entry), isDefault: false });
+      if (name === DEFAULT_PROFILE_NAME) {
+        continue;
+      }
+      profiles.push({ name, path: join5(GLOBAL_CREDENTIALS_DIR, entry), isDefault: false });
     }
   } catch {
   }
@@ -344,11 +608,11 @@ async function loadCredentialProfile(name) {
 }
 
 // src/lib/config.ts
-import { mkdir as mkdir3, readFile as readFile3, writeFile as writeFile3 } from "fs/promises";
-import { join as join5 } from "path";
+import { mkdir as mkdir3, readFile as readFile4, writeFile as writeFile3 } from "fs/promises";
+import { join as join6 } from "path";
 async function loadConfig(outputDir) {
   try {
-    const content = await readFile3(join5(outputDir, "config.json"), "utf-8");
+    const content = await readFile4(join6(outputDir, "config.json"), "utf-8");
     return JSON.parse(content);
   } catch {
     return {};
@@ -356,7 +620,7 @@ async function loadConfig(outputDir) {
 }
 async function saveConfig(outputDir, config) {
   await mkdir3(outputDir, { recursive: true });
-  await writeFile3(join5(outputDir, "config.json"), JSON.stringify(config, null, 2), "utf-8");
+  await writeFile3(join6(outputDir, "config.json"), JSON.stringify(config, null, 2), "utf-8");
 }
 
 // src/ui/CredentialSetupUI.tsx
@@ -383,7 +647,7 @@ var CredentialSetupUI = ({
   const [error, setError] = useState2(null);
   const [activeProfileName, setActiveProfileName] = useState2(void 0);
   const handleModeChosen = useCallback(
-    async (mode) => {
+    (mode) => {
       if (mode === "local") {
         onComplete({ mode: "local", credentials: null });
         return;
@@ -452,7 +716,7 @@ var CredentialSetupUI = ({
         setPhase({ type: "mode-select", cursor: 1 });
       } else if (key.return) {
         const mode = phase.cursor === 0 ? "global" : "local";
-        void handleModeChosen(mode);
+        handleModeChosen(mode);
       }
       return;
     }
@@ -468,13 +732,16 @@ var CredentialSetupUI = ({
         if (cursor === addNewIdx) {
           setPhase({ type: "name-entry", nameBuffer: "", existingProfiles: profiles });
         } else {
-          void handleProfileChosen(profiles[cursor] ?? profiles[0]);
+          const selected = profiles[cursor] ?? profiles[0];
+          if (selected) {
+            void handleProfileChosen(selected);
+          }
         }
       }
       return;
     }
     if (phase.type === "name-entry") {
-      const { nameBuffer, nameError: _nameError, existingProfiles } = phase;
+      const { nameBuffer, existingProfiles } = phase;
       if (key.backspace || key.delete) {
         setPhase({ type: "name-entry", nameBuffer: nameBuffer.slice(0, -1), existingProfiles });
       } else if (key.return) {
@@ -619,7 +886,14 @@ var CredentialSetupUI = ({
         }),
         /* @__PURE__ */ jsxs2(Box3, { gap: 2, children: [
           /* @__PURE__ */ jsx3(Text3, { ...cursor === addNewIdx && { color: "cyan" }, children: cursor === addNewIdx ? "\u276F" : " " }),
-          /* @__PURE__ */ jsx3(Text3, { bold: cursor === addNewIdx, ...cursor === addNewIdx && { color: "cyan" }, children: "+ Add new profile" })
+          /* @__PURE__ */ jsx3(
+            Text3,
+            {
+              bold: cursor === addNewIdx,
+              ...cursor === addNewIdx && { color: "cyan" },
+              children: "+ Add new profile"
+            }
+          )
         ] })
       ] }),
       /* @__PURE__ */ jsx3(Hint, { text: "\u2191\u2193 to move \xB7 Enter to select \xB7 Esc to cancel" })
@@ -649,7 +923,7 @@ var CredentialSetupUI = ({
   }
   const { field: activeField, values, envCursor } = phase;
   const isEnvField = activeField === FIELDS.length;
-  const profileLabel = activeProfileName !== void 0 ? activeProfileName : DEFAULT_PROFILE_NAME;
+  const profileLabel = activeProfileName ?? DEFAULT_PROFILE_NAME;
   return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", paddingY: 1, paddingX: 2, gap: 1, children: [
     /* @__PURE__ */ jsx3(Logo, {}),
     /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", marginTop: 1, children: [
@@ -659,7 +933,8 @@ var CredentialSetupUI = ({
     /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", gap: 0, children: [
       /* @__PURE__ */ jsx3(Text3, { bold: true, children: activeProfileName !== void 0 ? `Profile: ${activeProfileName}` : "Global credentials" }),
       /* @__PURE__ */ jsxs2(Text3, { dimColor: true, children: [
-        "Saved to: ",
+        "Saved to:",
+        " ",
         activeProfileName !== void 0 ? `~/.kizenappbuilder/${activeProfileName}.json` : GLOBAL_CREDENTIALS_PATH
       ] })
     ] }),
@@ -739,12 +1014,8 @@ var Spinner2 = () => {
   return /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: SPINNER_FRAMES2[frame] ?? "\u280B" });
 };
 function getViewerPath() {
-  const filename = fileURLToPath(import.meta.url);
-  return join6(dirname2(filename), "viewer");
-}
-function getElectronMainPath() {
-  const filename = fileURLToPath(import.meta.url);
-  return join6(dirname2(filename), "electron", "main.js");
+  const filename = fileURLToPath2(import.meta.url);
+  return join7(dirname3(filename), "viewer");
 }
 async function fileExists(filePath) {
   try {
@@ -754,8 +1025,8 @@ async function fileExists(filePath) {
     return false;
   }
 }
-function createRequestHandler(viewerPath, createServerLog, createProxyLog, credentialsRef, activeProfileRef, outputDir, broadcast) {
-  const proxyCache = createProxyCache();
+function createRequestHandler(viewerPath, createServerLog, createProxyLog, credentialsRef, activeProfileRef, outputDir, broadcast, onProxyCacheChange) {
+  const proxyCache = createProxyCache({ onChange: onProxyCacheChange });
   return (req, res) => {
     void (async () => {
       const url = req.url ?? "/";
@@ -782,7 +1053,7 @@ function createRequestHandler(viewerPath, createServerLog, createProxyLog, crede
           const creds = profileName === void 0 || profileName === "" ? await loadGlobalCredentials() : await loadCredentialProfile(profileName);
           if (creds !== null) {
             credentialsRef.current = creds;
-            activeProfileRef.current = profileName || void 0;
+            activeProfileRef.current = profileName ?? void 0;
             const active = activeProfileRef.current;
             await saveConfig(outputDir, {
               credentialMode: "global",
@@ -795,9 +1066,9 @@ function createRequestHandler(viewerPath, createServerLog, createProxyLog, crede
           return;
         }
         if (url === "/api/bundle") {
-          const bundlePath = join6(process.cwd(), ".kizenapp", "bundle.json");
+          const bundlePath = join7(process.cwd(), ".kizenapp", "bundle.json");
           try {
-            const content = await readFile4(bundlePath, "utf-8");
+            const content = await readFile5(bundlePath, "utf-8");
             res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
             res.end(content);
           } catch {
@@ -870,8 +1141,8 @@ function createRequestHandler(viewerPath, createServerLog, createProxyLog, crede
           return;
         }
         const rawPath = url === "/" ? "/index.html" : url;
-        const filePath = join6(viewerPath, rawPath);
-        const resolvedPath = await fileExists(filePath) ? filePath : join6(viewerPath, "index.html");
+        const filePath = join7(viewerPath, rawPath);
+        const resolvedPath = await fileExists(filePath) ? filePath : join7(viewerPath, "index.html");
         const ext = extname(resolvedPath);
         const mimeType = MIME_TYPES[ext] ?? "application/octet-stream";
         res.writeHead(200, { "Content-Type": mimeType });
@@ -922,11 +1193,46 @@ var DevUI = ({
   const [buildError, setBuildError] = useState3(null);
   const [lastBuilt, setLastBuilt] = useState3(null);
   const [wsClientCount, setWsClientCount] = useState3(0);
+  const [proxyCacheSize, setProxyCacheSize] = useState3(0);
+  const [proxyCacheHits, setProxyCacheHits] = useState3(0);
+  const [proxyCacheMisses, setProxyCacheMisses] = useState3(0);
   const buildingRef = useRef(false);
-  const electronLaunchedRef = useRef(false);
+  const viewerLaunchedRef = useRef(false);
+  const chromeHandleRef = useRef(null);
   const debounceTimerRef = useRef(null);
   const wsClientsRef = useRef(/* @__PURE__ */ new Set());
   const pendingMessagesRef = useRef([]);
+  const broadcast = useCallback2((msg) => {
+    const json = JSON.stringify(msg);
+    if (wsClientsRef.current.size === 0) {
+      pendingMessagesRef.current = [...pendingMessagesRef.current, json].slice(-LOG_LIMIT);
+      return;
+    }
+    for (const client of wsClientsRef.current) {
+      if (client.readyState === 1) {
+        client.send(json);
+      }
+    }
+  }, []);
+  const createServerLog = useCallback2((message) => {
+    setServerLogHistory(
+      (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
+    );
+  }, []);
+  const launchChromeViewerCb = useCallback2(() => {
+    chromeHandleRef.current?.kill();
+    chromeHandleRef.current = null;
+    void launchChromeViewer({
+      port,
+      userDataDir: join7(outputDir, ".chrome"),
+      broadcast
+    }).then((handle) => {
+      chromeHandleRef.current = handle;
+      process.on("exit", () => {
+        handle.kill();
+      });
+    });
+  }, [port, outputDir, broadcast]);
   useInput2(
     (input, key) => {
       if (input === "q" || key.ctrl && input === "c") {
@@ -935,50 +1241,19 @@ var DevUI = ({
       if (input === "c") {
         setCredMode("editing");
       }
-      if (input === "d") {
-        broadcast({ type: "open-devtools" });
+      if (input === "v") {
+        launchChromeViewerCb();
       }
     },
     { isActive: credMode === "main" }
   );
   useEffect3(() => {
-    if (status !== "running" || electronLaunchedRef.current) {
+    if (status !== "running" || viewerLaunchedRef.current) {
       return;
     }
-    electronLaunchedRef.current = true;
-    const _require = createRequire(import.meta.url);
-    const electronBin = _require("electron");
-    const electronMain = getElectronMainPath();
-    const userDataDir = join6(outputDir, ".electron");
-    const proc = spawn(
-      electronBin,
-      [electronMain, `--port=${String(port)}`, `--user-data-dir=${userDataDir}`],
-      {
-        stdio: "ignore"
-      }
-    );
-    proc.unref();
-    process.on("exit", () => {
-      proc.kill();
-    });
-  }, [status, port, outputDir]);
-  const createServerLog = useCallback2((message) => {
-    setServerLogHistory(
-      (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
-    );
-  }, []);
-  const broadcast = useCallback2((msg) => {
-    const json = JSON.stringify(msg);
-    if (wsClientsRef.current.size === 0) {
-      pendingMessagesRef.current = [...pendingMessagesRef.current, json].slice(-LOG_LIMIT);
-      return;
-    }
-    for (const client of wsClientsRef.current) {
-      if (client.readyState === 1) {
-        client.send(json);
-      }
-    }
-  }, []);
+    viewerLaunchedRef.current = true;
+    launchChromeViewerCb();
+  }, [status, launchChromeViewerCb]);
   const handleCredentialsDone = useCallback2(
     (result) => {
       credentialsRef.current = result.credentials;
@@ -1001,6 +1276,13 @@ var DevUI = ({
           -LOG_LIMIT
         )
       );
+      if (entry.kind === "request") {
+        if (entry.fromCache) {
+          setProxyCacheHits((n) => n + 1);
+        } else {
+          setProxyCacheMisses((n) => n + 1);
+        }
+      }
       broadcast({ type: "proxy-log", entry });
     },
     [broadcast]
@@ -1065,7 +1347,7 @@ var DevUI = ({
   }, [pluginDir, triggerBuild, createBuildLog]);
   useEffect3(() => {
     const viewerPath = getViewerPath();
-    void fileExists(join6(viewerPath, "index.html")).then((viewerBuilt) => {
+    void fileExists(join7(viewerPath, "index.html")).then((viewerBuilt) => {
       if (!viewerBuilt) {
         setErrorMessage("Viewer not built. Run 'pnpm build:viewer' first.");
         setStatus("error");
@@ -1078,7 +1360,8 @@ var DevUI = ({
         credentialsRef,
         activeProfileRef,
         outputDir,
-        broadcast
+        broadcast,
+        setProxyCacheSize
       );
       const server = createServer(handler);
       const wss = new WebSocketServer({ server });
@@ -1110,7 +1393,7 @@ var DevUI = ({
         server.close();
       };
     });
-  }, [port, createServerLog, createProxyLog]);
+  }, [port, createServerLog, createProxyLog, broadcast, outputDir]);
   if (credMode === "editing") {
     return /* @__PURE__ */ jsx4(
       CredentialSetupUI,
@@ -1134,7 +1417,7 @@ var DevUI = ({
     ] }),
     /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", children: [
       /* @__PURE__ */ jsxs3(Box4, { gap: 2, marginBottom: 0, children: [
-        /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "Build" }),
+        /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "App Build" }),
         buildStatus === "pending" && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "waiting\u2026" }),
         buildStatus === "building" && /* @__PURE__ */ jsxs3(Box4, { gap: 1, children: [
           /* @__PURE__ */ jsx4(Spinner2, {}),
@@ -1157,7 +1440,7 @@ var DevUI = ({
         Box4,
         {
           flexDirection: "column",
-          height: LOG_DISPLAY,
+          height: LOG_DISPLAY + 2,
           borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
@@ -1167,7 +1450,7 @@ var DevUI = ({
     ] }),
     /* @__PURE__ */ jsxs3(Box4, { marginTop: 1, flexDirection: "column", children: [
       /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
-        /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "Server" }),
+        /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "Web Server" }),
         status === "starting" && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "starting\u2026" }),
         status === "running" && /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
           /* @__PURE__ */ jsx4(Text4, { color: "green", children: "\u2713 Running" }),
@@ -1187,7 +1470,7 @@ var DevUI = ({
         Box4,
         {
           flexDirection: "column",
-          height: LOG_DISPLAY,
+          height: LOG_DISPLAY + 2,
           borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
@@ -1197,14 +1480,26 @@ var DevUI = ({
     ] }),
     /* @__PURE__ */ jsxs3(Box4, { marginTop: 1, flexDirection: "column", children: [
       /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
-        /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "Proxy" }),
-        /* @__PURE__ */ jsx4(Text4, { color: "green", children: "\u2713 Active" })
+        /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "Network Proxy" }),
+        /* @__PURE__ */ jsx4(Text4, { color: "green", children: "\u2713 Active" }),
+        /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+          "\u25CF ",
+          proxyCacheSize,
+          " key",
+          proxyCacheSize !== 1 ? "s" : "",
+          " in the network cache \xB7",
+          " ",
+          proxyCacheHits,
+          " hit \xB7 ",
+          proxyCacheMisses,
+          " miss"
+        ] })
       ] }),
       /* @__PURE__ */ jsx4(
         Box4,
         {
           flexDirection: "column",
-          height: LOG_DISPLAY,
+          height: LOG_DISPLAY + 2,
           borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
@@ -1218,8 +1513,11 @@ var DevUI = ({
       /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "] quit [" }),
       /* @__PURE__ */ jsx4(Text4, { children: "c" }),
       /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "] credentials [" }),
-      /* @__PURE__ */ jsx4(Text4, { children: "d" }),
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "] devtools" })
+      /* @__PURE__ */ jsx4(Text4, { children: "v" }),
+      /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+        "] ",
+        wsClientCount === 0 ? "open viewer" : "relaunch viewer"
+      ] })
     ] })
   ] });
 };