@kizenapps/cli 0.9.0 → 0.10.0

package/dist/index.js

@@ -259,30 +259,44 @@ function isKizenUrl(url) {
   }
 }
 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 === "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);
+    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.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);
+    for (const prop of preview.properties) {
+      obj[prop.name] = parseProp(prop);
+    }
     return obj;
   }
   return arg.description ?? `[${arg.type}]`;
@@ -296,7 +310,9 @@ async function serializeArgAsync(client, arg) {
         returnByValue: true
       });
       const val = result.result.value;
-      if (typeof val === "string") return JSON.parse(val);
+      if (typeof val === "string") {
+        return JSON.parse(val);
+      }
     } catch {
     }
   }
@@ -313,9 +329,9 @@ async function installDockIcon(client) {
 async function launchChromeViewer(opts) {
   mkdirSync(opts.userDataDir, { recursive: true });
   const chrome = await launch({
-    startingUrl: `http://localhost:${opts.port}`,
+    startingUrl: `http://localhost:${String(opts.port)}`,
     chromeFlags: [
-      `--app=http://localhost:${opts.port}`,
+      `--app=http://localhost:${String(opts.port)}`,
       "--no-first-run",
       "--no-default-browser-check",
       "--disable-extensions"
@@ -326,7 +342,7 @@ async function launchChromeViewer(opts) {
   });
   let client = null;
   let cookieTimer = null;
-  let cdpPort = chrome.port;
+  const cdpPort = chrome.port;
   for (let attempt = 0; attempt < 10; attempt++) {
     await new Promise((r) => setTimeout(r, 300));
     try {
@@ -335,14 +351,18 @@ async function launchChromeViewer(opts) {
     } catch {
       if (attempt === 9) {
         return {
-          kill: () => chrome.kill()
+          kill: () => {
+            chrome.kill();
+          }
         };
       }
     }
   }
   if (!client) {
     return {
-      kill: () => chrome.kill()
+      kill: () => {
+        chrome.kill();
+      }
     };
   }
   const c = client;
@@ -357,13 +377,17 @@ async function launchChromeViewer(opts) {
     void (async () => {
       const params = rawParams;
       const { requestId, request, responseHeaders, responseStatusCode } = params;
-      const url = request?.url ?? "";
+      const url = request.url;
       const filtered = [];
       for (const h of responseHeaders ?? []) {
-        if (CSP_HEADERS.has(h.name.toLowerCase())) continue;
+        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";
+            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 });
@@ -393,8 +417,12 @@ async function launchChromeViewer(opts) {
       try {
         const { cookies } = await c.Network.getAllCookies();
         for (const cookie of cookies) {
-          if (!isKizenUrl(`https://${cookie.domain ?? ""}`)) continue;
-          if (cookie.sameSite === "None") continue;
+          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({
@@ -437,7 +465,9 @@ async function launchChromeViewer(opts) {
   c.on("Runtime.consoleAPICalled", (rawParams) => {
     void (async () => {
       const { type, args } = rawParams;
-      if (args[0]?.type === "string" && String(args[0].value).includes("Chrome Security")) return;
+      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 });
@@ -445,7 +475,7 @@ async function launchChromeViewer(opts) {
     });
   });
   const kill = () => {
-    if (cookieTimer !== null) clearInterval(cookieTimer);
+    clearInterval(cookieTimer);
     try {
       void c.close();
     } catch {
@@ -456,8 +486,12 @@ async function launchChromeViewer(opts) {
 }
 
 // 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);
@@ -475,13 +509,22 @@ 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();
     }
   };
 }
@@ -982,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 ?? "/";
@@ -1150,6 +1193,9 @@ 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 viewerLaunchedRef = useRef(false);
   const chromeHandleRef = useRef(null);
@@ -1182,7 +1228,9 @@ var DevUI = ({
       broadcast
     }).then((handle) => {
       chromeHandleRef.current = handle;
-      process.on("exit", () => handle.kill());
+      process.on("exit", () => {
+        handle.kill();
+      });
     });
   }, [port, outputDir, broadcast]);
   useInput2(
@@ -1228,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]
@@ -1305,7 +1360,8 @@ var DevUI = ({
         credentialsRef,
         activeProfileRef,
         outputDir,
-        broadcast
+        broadcast,
+        setProxyCacheSize
       );
       const server = createServer(handler);
       const wss = new WebSocketServer({ server });
@@ -1361,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, {}),
@@ -1384,7 +1440,7 @@ var DevUI = ({
         Box4,
         {
           flexDirection: "column",
-          height: LOG_DISPLAY,
+          height: LOG_DISPLAY + 2,
           borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
@@ -1394,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" }),
@@ -1414,7 +1470,7 @@ var DevUI = ({
         Box4,
         {
           flexDirection: "column",
-          height: LOG_DISPLAY,
+          height: LOG_DISPLAY + 2,
           borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
@@ -1424,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",