@kizenapps/cli 0.9.0 → 0.11.0

package/dist/index.js

@@ -8,8 +8,8 @@ import { createElement } from "react";
 import { render } from "ink";
 
 // src/ui/BuildUI.tsx
-import { useEffect, useState } from "react";
-import { Box as Box2, Text as Text2, useApp } from "ink";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { Box as Box3, Text as Text4, useApp } from "ink";
 
 // src/lib/runBuild.ts
 import { mkdir, writeFile } from "fs/promises";
@@ -88,9 +88,26 @@ async function runBuild(pluginDir, outputDir, onStep) {
     })).sort((a, b) => b.version.localeCompare(a.version, void 0, { numeric: true })) : [];
     return serializePlugin(plugin, allReleaseNotes);
   });
-  await writeFile(join2(outputDir, "bundle.json"), JSON.stringify(bundle, null, 2), "utf-8");
+  const jsonStr = JSON.stringify(bundle, null, 2);
+  const bundleSize = Buffer.byteLength(jsonStr, "utf-8");
+  await writeFile(join2(outputDir, "bundle.json"), jsonStr, "utf-8");
+  return { bundleSize };
 }
 
+// src/lib/formatBytes.ts
+function formatBytes(n) {
+  if (n < 1024) {
+    return `${String(n)} B`;
+  }
+  if (n < 1024 * 1024) {
+    return `${(n / 1024).toFixed(1)} KB`;
+  }
+  return `${(n / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+// src/ui/AppHeader.tsx
+import { Box as Box2, Text as Text2 } from "ink";
+
 // src/ui/Logo.tsx
 import { Box, Text } from "ink";
 import { jsx } from "react/jsx-runtime";
@@ -116,8 +133,20 @@ var LOGO_LINES = [
 ];
 var Logo = () => /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: LOGO_LINES.map((line, i) => /* @__PURE__ */ jsx(Text, { color: "cyan", children: line }, i)) });
 
-// src/ui/BuildUI.tsx
+// src/ui/AppHeader.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var AppHeader = ({ marginBottom = 0 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx2(Logo, {}),
+  /* @__PURE__ */ jsxs(Box2, { flexDirection: "column", marginTop: 1, marginBottom, children: [
+    /* @__PURE__ */ jsx2(Text2, { bold: true, color: "cyan", children: "Kizen App Builder" }),
+    /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "\u2500".repeat(24) })
+  ] })
+] });
+
+// src/ui/Spinner.tsx
+import { useEffect, useState } from "react";
+import { Text as Text3 } from "ink";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
 var Spinner = () => {
   const [frame, setFrame] = useState(0);
@@ -129,8 +158,11 @@ var Spinner = () => {
       clearInterval(id);
     };
   }, []);
-  return /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: SPINNER_FRAMES[frame] ?? "\u280B" });
+  return /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: SPINNER_FRAMES[frame] ?? "\u280B" });
 };
+
+// src/ui/BuildUI.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var STEPS = [
   "creating-dir",
   "reading-files",
@@ -147,10 +179,12 @@ var STEP_LABELS = {
 };
 var BuildUI = ({ outputDir, pluginDir }) => {
   const app = useApp();
-  const [step, setStep] = useState("creating-dir");
-  const [errorMessage, setErrorMessage] = useState(null);
-  useEffect(() => {
-    void runBuild(pluginDir, outputDir, setStep).then(() => {
+  const [step, setStep] = useState2("creating-dir");
+  const [errorMessage, setErrorMessage] = useState2(null);
+  const [bundleSize, setBundleSize] = useState2(null);
+  useEffect2(() => {
+    void runBuild(pluginDir, outputDir, setStep).then(({ bundleSize: size }) => {
+      setBundleSize(size);
       setStep("done");
       app.exit();
     }).catch((err) => {
@@ -163,32 +197,32 @@ var BuildUI = ({ outputDir, pluginDir }) => {
   const currentIndex = STEPS.indexOf(step);
   const isError = step === "error";
   const isDone = step === "done";
-  return /* @__PURE__ */ jsxs(Box2, { flexDirection: "column", paddingY: 1, paddingX: 2, children: [
-    /* @__PURE__ */ jsx2(Logo, {}),
-    /* @__PURE__ */ jsxs(Box2, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [
-      /* @__PURE__ */ jsx2(Text2, { bold: true, color: "cyan", children: "Kizen App Builder" }),
-      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "\u2500".repeat(24) })
-    ] }),
-    /* @__PURE__ */ jsxs(Box2, { flexDirection: "column", gap: 0, children: [
+  return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", paddingY: 1, paddingX: 2, children: [
+    /* @__PURE__ */ jsx4(AppHeader, { marginBottom: 1 }),
+    /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", gap: 0, children: [
       STEPS.map((s, i) => {
         const isActive = step === s;
         const isStepDone = isDone || currentIndex > i;
         const isFailed = isError && i === currentIndex;
-        return /* @__PURE__ */ jsx2(Box2, { gap: 1, children: isFailed ? /* @__PURE__ */ jsxs(Text2, { color: "red", children: [
+        return /* @__PURE__ */ jsx4(Box3, { gap: 1, children: isFailed ? /* @__PURE__ */ jsxs2(Text4, { color: "red", children: [
           "\u2717 ",
           STEP_LABELS[s]
-        ] }) : isStepDone ? /* @__PURE__ */ jsxs(Text2, { color: "green", children: [
+        ] }) : isStepDone ? /* @__PURE__ */ jsxs2(Text4, { color: "green", children: [
           "\u2713 ",
           STEP_LABELS[s]
-        ] }) : isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx2(Spinner, {}),
-          /* @__PURE__ */ jsx2(Text2, { children: STEP_LABELS[s] })
-        ] }) : /* @__PURE__ */ jsxs(Text2, { dimColor: true, children: [
+        ] }) : isActive ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx4(Spinner, {}),
+          /* @__PURE__ */ jsx4(Text4, { children: STEP_LABELS[s] })
+        ] }) : /* @__PURE__ */ jsxs2(Text4, { dimColor: true, children: [
           " ",
           STEP_LABELS[s]
         ] }) }, s);
       }),
-      errorMessage !== null && /* @__PURE__ */ jsx2(Box2, { marginTop: 1, borderStyle: "single", borderColor: "red", paddingX: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "red", children: errorMessage }) })
+      isDone && bundleSize !== null && /* @__PURE__ */ jsx4(Box3, { marginTop: 1, gap: 1, children: /* @__PURE__ */ jsxs2(Text4, { color: "green", children: [
+        "\u2713 bundle.json \u2014 ",
+        formatBytes(bundleSize)
+      ] }) }),
+      errorMessage !== null && /* @__PURE__ */ jsx4(Box3, { marginTop: 1, borderStyle: "single", borderColor: "red", paddingX: 1, children: /* @__PURE__ */ jsx4(Text4, { color: "red", children: errorMessage }) })
     ] })
   ] });
 };
@@ -227,22 +261,350 @@ import { createElement as createElement2 } from "react";
 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 { createReadStream, watch } from "fs";
-import { access, readFile as readFile5 } from "fs/promises";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState5 } from "react";
+import { Box as Box5, Text as Text6, useInput as useInput2 } from "ink";
+import { watch } from "fs";
 import { createServer } from "http";
-import { dirname as dirname3, extname, join as join7 } from "path";
-import { fileURLToPath as fileURLToPath2 } from "url";
+import { join as join8 } from "path";
 import { WebSocketServer } from "ws";
 
+// src/server/requestHandler.ts
+import { createReadStream } from "fs";
+import { access, readFile as readFile4 } from "fs/promises";
+import { dirname as dirname2, extname, join as join6 } from "path";
+import { fileURLToPath } from "url";
+
+// src/lib/proxyCache.ts
+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);
+      if (existing !== void 0) {
+        return existing.then((response) => ({ response, fromCache: true }));
+      }
+      const pending = fetcher().then(async (response) => {
+        const headers = Object.fromEntries(response.headers);
+        delete headers["content-encoding"];
+        delete headers["content-length"];
+        return {
+          status: response.status,
+          headers,
+          body: Buffer.from(await response.arrayBuffer())
+        };
+      }).catch((error) => {
+        cache.delete(key);
+        emitChange();
+        throw error;
+      });
+      cache.set(key, pending);
+      emitChange();
+      return pending.then((response) => {
+        if (response.status >= 400) {
+          cache.delete(key);
+          emitChange();
+        }
+        return { response, fromCache: false };
+      });
+    },
+    clear() {
+      cache.clear();
+      emitChange();
+    }
+  };
+}
+
+// src/lib/constants.ts
+var LOG_LIMIT = 50;
+var LOG_DISPLAY = 8;
+var FILE_WATCH_DEBOUNCE_MS = 150;
+var MIME_TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".mjs": "application/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  ".json": "application/json; charset=utf-8",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".map": "application/json"
+};
+
+// src/lib/credentials.ts
+import { mkdir as mkdir2, readFile as readFile2, readdir as readdir2, writeFile as writeFile2 } from "fs/promises";
+import { homedir } from "os";
+import { dirname, join as join4 } 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 DEFAULT_PROFILE_NAME = "credentials";
+function isValidEnvironment(value) {
+  return ENVIRONMENTS.includes(value);
+}
+function parseCredentials(raw) {
+  if (typeof raw !== "object" || raw === null) {
+    throw new Error("Credentials must be a JSON object");
+  }
+  const obj = raw;
+  const env = obj.environment;
+  return {
+    apiKey: typeof obj.apiKey === "string" ? obj.apiKey : "",
+    userId: typeof obj.userId === "string" ? obj.userId : "",
+    businessId: typeof obj.businessId === "string" ? obj.businessId : "",
+    environment: isValidEnvironment(env) ? env : "go"
+  };
+}
+async function loadCredentialsFromFile(filePath) {
+  const content = await readFile2(filePath, "utf-8");
+  return parseCredentials(JSON.parse(content));
+}
+async function loadGlobalCredentials() {
+  try {
+    return await loadCredentialsFromFile(GLOBAL_CREDENTIALS_PATH);
+  } catch {
+    return null;
+  }
+}
+async function saveGlobalCredentials(credentials) {
+  await mkdir2(dirname(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`);
+}
+async function listCredentialProfiles() {
+  const profiles = [
+    { name: DEFAULT_PROFILE_NAME, path: GLOBAL_CREDENTIALS_PATH, isDefault: true }
+  ];
+  try {
+    const entries = await readdir2(GLOBAL_CREDENTIALS_DIR);
+    for (const entry of entries) {
+      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 });
+    }
+  } catch {
+  }
+  return profiles;
+}
+async function saveCredentialProfile(name, credentials) {
+  if (name === DEFAULT_PROFILE_NAME) {
+    await saveGlobalCredentials(credentials);
+    return;
+  }
+  await mkdir2(GLOBAL_CREDENTIALS_DIR, { recursive: true });
+  await writeFile2(getProfilePath(name), JSON.stringify(credentials, null, 2), "utf-8");
+}
+async function loadCredentialProfile(name) {
+  try {
+    return await loadCredentialsFromFile(getProfilePath(name));
+  } catch {
+    return null;
+  }
+}
+
+// src/lib/config.ts
+import { mkdir as mkdir3, readFile as readFile3, writeFile as writeFile3 } from "fs/promises";
+import { join as join5 } from "path";
+async function loadConfig(outputDir) {
+  try {
+    const content = await readFile3(join5(outputDir, "config.json"), "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return {};
+  }
+}
+async function saveConfig(outputDir, config) {
+  await mkdir3(outputDir, { recursive: true });
+  await writeFile3(join5(outputDir, "config.json"), JSON.stringify(config, null, 2), "utf-8");
+}
+
+// src/server/requestHandler.ts
+function proxyLogEntryToString(entry) {
+  if (entry.kind === "info") {
+    return entry.message;
+  }
+  const cache = entry.fromCache ? " [cache]" : "";
+  return `${entry.method} ${entry.url} \u2192 ${String(entry.status)}${cache}`;
+}
+function getViewerPath() {
+  const filename = fileURLToPath(import.meta.url);
+  return join6(dirname2(filename), "viewer");
+}
+async function fileExists(filePath) {
+  try {
+    await access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function createRequestHandler(viewerPath, createServerLog, createProxyLog, credentialsRef, activeProfileRef, outputDir, broadcast, onProxyCacheChange) {
+  const proxyCache = createProxyCache({ onChange: onProxyCacheChange });
+  return (req, res) => {
+    void (async () => {
+      const url = req.url ?? "/";
+      try {
+        createServerLog(`Received request: ${url}`);
+        if (url === "/api/credentials") {
+          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+          res.end(credentialsRef.current !== null ? JSON.stringify(credentialsRef.current) : "{}");
+          return;
+        }
+        if (url === "/api/credential-profiles" && req.method === "GET") {
+          const profiles = await listCredentialProfiles();
+          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+          res.end(JSON.stringify({ profiles, active: activeProfileRef.current }));
+          return;
+        }
+        if (url === "/api/credentials/switch" && req.method === "POST") {
+          const chunks = [];
+          for await (const chunk of req) {
+            chunks.push(chunk);
+          }
+          const body = JSON.parse(Buffer.concat(chunks).toString("utf-8") || "{}");
+          const profileName = body.profile;
+          const creds = profileName === void 0 || profileName === "" ? await loadGlobalCredentials() : await loadCredentialProfile(profileName);
+          if (creds !== null) {
+            credentialsRef.current = creds;
+            activeProfileRef.current = profileName ?? void 0;
+            const active = activeProfileRef.current;
+            await saveConfig(outputDir, {
+              credentialMode: "global",
+              ...active !== void 0 && { activeCredentialProfile: active }
+            });
+            broadcast({ type: "credentials-updated", credentials: creds });
+          }
+          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+          res.end(JSON.stringify({ ok: creds !== null }));
+          return;
+        }
+        if (url === "/api/bundle") {
+          const bundlePath = join6(process.cwd(), ".kizenapp", "bundle.json");
+          try {
+            const content = await readFile4(bundlePath, "utf-8");
+            res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+            res.end(content);
+          } catch {
+            res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+            res.end("{}");
+          }
+          return;
+        }
+        if (url === "/api/proxy-cache/clear") {
+          proxyCache.clear();
+          createProxyLog({ kind: "info", message: "Proxy cache cleared" });
+          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+          res.end('{"ok":true}');
+          return;
+        }
+        if (url.startsWith("/api/proxy")) {
+          const proxyTarget = req.headers["x-proxy-target"];
+          if (typeof proxyTarget !== "string") {
+            res.writeHead(400);
+            res.end("Missing x-proxy-target header");
+            return;
+          }
+          const upstreamPath = url.slice("/api/proxy".length) || "/";
+          const upstreamUrl = `${proxyTarget}${upstreamPath}`;
+          const method = req.method ?? "GET";
+          const chunks = [];
+          for await (const chunk of req) {
+            chunks.push(chunk);
+          }
+          const { host, "x-proxy-target": _drop, ...forwardHeaders } = req.headers;
+          if (method === "GET") {
+            const cacheKey = `GET::${upstreamUrl}`;
+            const { response: cached, fromCache } = await proxyCache.get(
+              cacheKey,
+              () => fetch(upstreamUrl, {
+                method: "GET",
+                headers: forwardHeaders
+              })
+            );
+            createProxyLog({
+              kind: "request",
+              method: "GET",
+              status: cached.status,
+              fromCache,
+              url: upstreamPath
+            });
+            res.writeHead(cached.status, cached.headers);
+            res.end(cached.body);
+            return;
+          }
+          const body = chunks.length > 0 ? Buffer.concat(chunks) : void 0;
+          const resolvedBody = body && body.length > 0 ? body : void 0;
+          const upstream = await fetch(upstreamUrl, {
+            method,
+            headers: forwardHeaders,
+            ...resolvedBody !== void 0 && { body: resolvedBody }
+          });
+          createProxyLog({
+            kind: "request",
+            method,
+            status: upstream.status,
+            fromCache: false,
+            url: upstreamPath
+          });
+          const responseHeaders = Object.fromEntries(upstream.headers);
+          delete responseHeaders["content-encoding"];
+          delete responseHeaders["content-length"];
+          res.writeHead(upstream.status, responseHeaders);
+          res.end(Buffer.from(await upstream.arrayBuffer()));
+          return;
+        }
+        const rawPath = url === "/" ? "/index.html" : url;
+        const filePath = join6(viewerPath, rawPath);
+        const resolvedPath = await fileExists(filePath) ? filePath : join6(viewerPath, "index.html");
+        const ext = extname(resolvedPath);
+        const mimeType = MIME_TYPES[ext] ?? "application/octet-stream";
+        res.writeHead(200, { "Content-Type": mimeType });
+        createReadStream(resolvedPath).pipe(res);
+      } catch (err) {
+        if (url.startsWith("/api/proxy")) {
+          createProxyLog({
+            kind: "request",
+            method: req.method ?? "GET",
+            status: 502,
+            fromCache: false,
+            url: url.slice("/api/proxy".length) || "/"
+          });
+        } else {
+          createProxyLog({
+            kind: "info",
+            message: `Error handling ${url}: ${err instanceof Error ? err.message : String(err)}`
+          });
+        }
+        if (!res.headersSent) {
+          res.writeHead(502);
+          res.end("Bad Gateway");
+        }
+      }
+    })();
+  };
+}
+
 // src/chrome/launcher.ts
 import { launch } from "chrome-launcher";
 import { createRequire } from "module";
 import { mkdirSync } from "fs";
-import { readFile as readFile2 } from "fs/promises";
-import { dirname, join as join4 } from "path";
-import { fileURLToPath } from "url";
+import { readFile as readFile5 } from "fs/promises";
+import { dirname as dirname3, join as join7 } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
 var CDP = createRequire(import.meta.url)("chrome-remote-interface");
 var CSP_HEADERS = /* @__PURE__ */ new Set([
   "content-security-policy",
@@ -259,30 +621,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 +672,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 {
     }
   }
@@ -304,8 +682,8 @@ async function serializeArgAsync(client, arg) {
 }
 async function installDockIcon(client) {
   try {
-    const iconPath = join4(dirname(fileURLToPath(import.meta.url)), "viewer", "icon.png");
-    const icon = await readFile2(iconPath);
+    const iconPath = join7(dirname3(fileURLToPath2(import.meta.url)), "viewer", "icon.png");
+    const icon = await readFile5(iconPath);
     await client.Browser.setDockTile({ image: icon.toString("base64") });
   } catch {
   }
@@ -313,9 +691,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 +704,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 +713,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 +739,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 +779,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,173 +827,63 @@ 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;
-      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 = () => {
-    if (cookieTimer !== null) clearInterval(cookieTimer);
-    try {
-      void c.close();
-    } catch {
-    }
-    chrome.kill();
-  };
-  return { kill };
-}
-
-// src/lib/proxyCache.ts
-function createProxyCache() {
-  const cache = /* @__PURE__ */ new Map();
-  return {
-    get(key, fetcher) {
-      const existing = cache.get(key);
-      if (existing !== void 0) {
-        return existing.then((response) => ({ response, fromCache: true }));
-      }
-      const pending = fetcher().then(async (response) => {
-        const headers = Object.fromEntries(response.headers);
-        delete headers["content-encoding"];
-        delete headers["content-length"];
-        return {
-          status: response.status,
-          headers,
-          body: Buffer.from(await response.arrayBuffer())
-        };
-      }).catch((error) => {
-        cache.delete(key);
-        throw error;
-      });
-      cache.set(key, pending);
-      return pending.then((response) => ({ response, fromCache: false }));
-    },
-    clear() {
-      cache.clear();
-    }
-  };
-}
-
-// src/lib/credentials.ts
-import { mkdir as mkdir2, readFile as readFile3, readdir as readdir2, writeFile as writeFile2 } from "fs/promises";
-import { homedir } from "os";
-import { dirname as dirname2, join as join5 } from "path";
-var ENVIRONMENTS = ["go", "fmo", "staging", "integration", "test1"];
-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);
-}
-function parseCredentials(raw) {
-  if (typeof raw !== "object" || raw === null) {
-    throw new Error("Credentials must be a JSON object");
-  }
-  const obj = raw;
-  const env = obj.environment;
-  return {
-    apiKey: typeof obj.apiKey === "string" ? obj.apiKey : "",
-    userId: typeof obj.userId === "string" ? obj.userId : "",
-    businessId: typeof obj.businessId === "string" ? obj.businessId : "",
-    environment: isValidEnvironment(env) ? env : "go"
-  };
-}
-async function loadCredentialsFromFile(filePath) {
-  const content = await readFile3(filePath, "utf-8");
-  return parseCredentials(JSON.parse(content));
-}
-async function loadGlobalCredentials() {
-  try {
-    return await loadCredentialsFromFile(GLOBAL_CREDENTIALS_PATH);
-  } catch {
-    return null;
-  }
-}
-async function saveGlobalCredentials(credentials) {
-  await mkdir2(dirname2(GLOBAL_CREDENTIALS_PATH), { recursive: true });
-  await writeFile2(GLOBAL_CREDENTIALS_PATH, JSON.stringify(credentials, null, 2), "utf-8");
-}
-function getProfilePath(name) {
-  return join5(GLOBAL_CREDENTIALS_DIR, `${name}.json`);
-}
-async function listCredentialProfiles() {
-  const profiles = [
-    { name: DEFAULT_PROFILE_NAME, path: GLOBAL_CREDENTIALS_PATH, isDefault: true }
-  ];
-  try {
-    const entries = await readdir2(GLOBAL_CREDENTIALS_DIR);
-    for (const entry of entries) {
-      if (!entry.endsWith(".json")) {
-        continue;
-      }
-      const name = entry.slice(0, -5);
-      if (name === DEFAULT_PROFILE_NAME) {
-        continue;
+      if (args[0]?.type === "string" && String(args[0].value).includes("Chrome Security")) {
+        return;
       }
-      profiles.push({ name, path: join5(GLOBAL_CREDENTIALS_DIR, entry), isDefault: false });
+      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 {
     }
-  } catch {
-  }
-  return profiles;
-}
-async function saveCredentialProfile(name, credentials) {
-  if (name === DEFAULT_PROFILE_NAME) {
-    await saveGlobalCredentials(credentials);
-    return;
-  }
-  await mkdir2(GLOBAL_CREDENTIALS_DIR, { recursive: true });
-  await writeFile2(getProfilePath(name), JSON.stringify(credentials, null, 2), "utf-8");
-}
-async function loadCredentialProfile(name) {
-  try {
-    return await loadCredentialsFromFile(getProfilePath(name));
-  } catch {
-    return null;
-  }
+    chrome.kill();
+  };
+  return { kill };
 }
 
-// src/lib/config.ts
-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 readFile4(join6(outputDir, "config.json"), "utf-8");
-    return JSON.parse(content);
-  } catch {
-    return {};
-  }
-}
-async function saveConfig(outputDir, config) {
-  await mkdir3(outputDir, { recursive: true });
-  await writeFile3(join6(outputDir, "config.json"), JSON.stringify(config, null, 2), "utf-8");
+// src/hooks/useLogHistory.ts
+import { useCallback, useState as useState3 } from "react";
+function useLogHistory(limit) {
+  const [history, setHistory] = useState3([]);
+  const append = useCallback(
+    (message) => {
+      setHistory((h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-limit));
+    },
+    [limit]
+  );
+  return [history, append];
 }
 
 // src/ui/CredentialSetupUI.tsx
-import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
-import { Box as Box3, Text as Text3, useInput } from "ink";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState4 } from "react";
+import { Box as Box4, Text as Text5, useInput } from "ink";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FIELDS = ["apiKey", "userId", "businessId"];
 var FIELD_LABELS = {
   apiKey: "API Key",
   userId: "User ID",
   businessId: "Business ID"
 };
-var Hint = ({ text }) => /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: text });
+var Hint = ({ text }) => /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: text });
 var CredentialSetupUI = ({
   initialMode,
   showProfileManager,
   onComplete,
   onCancel
 }) => {
-  const [phase, setPhase] = useState2(
+  const [phase, setPhase] = useState4(
     initialMode === "global" && !showProfileManager ? { type: "loading" } : initialMode === "global" && showProfileManager ? { type: "profile-loading" } : { type: "mode-select", cursor: 0 }
   );
-  const [inputBuffer, setInputBuffer] = useState2("");
-  const [error, setError] = useState2(null);
-  const [activeProfileName, setActiveProfileName] = useState2(void 0);
-  const handleModeChosen = useCallback(
+  const [inputBuffer, setInputBuffer] = useState4("");
+  const [error, setError] = useState4(null);
+  const [activeProfileName, setActiveProfileName] = useState4(void 0);
+  const handleModeChosen = useCallback2(
     (mode) => {
       if (mode === "local") {
         onComplete({ mode: "local", credentials: null });
@@ -613,7 +893,7 @@ var CredentialSetupUI = ({
     },
     [onComplete]
   );
-  const handleProfileChosen = useCallback(async (profile) => {
+  const handleProfileChosen = useCallback2(async (profile) => {
     if (profile === null) {
       setPhase({ type: "profile-loading" });
       const profiles = await listCredentialProfiles();
@@ -626,7 +906,7 @@ var CredentialSetupUI = ({
     const envCursor2 = existing ? Math.max(0, ENVIRONMENTS.indexOf(existing.environment)) : 0;
     setPhase({ type: "creds-entry", field: 0, values: existing ?? {}, envCursor: envCursor2 });
   }, []);
-  const handleSave = useCallback(
+  const handleSave = useCallback2(
     async (values2, envCursor2) => {
       const environment = ENVIRONMENTS[envCursor2] ?? "go";
       const credentials = {
@@ -767,16 +1047,16 @@ var CredentialSetupUI = ({
       }
     }
   });
-  const loadProfileList = useCallback(async () => {
+  const loadProfileList = useCallback2(async () => {
     const profiles = await listCredentialProfiles();
     setPhase({ type: "profile-select", profiles, cursor: 0 });
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (phase.type === "profile-loading") {
       void loadProfileList();
     }
   }, [phase.type, loadProfileList]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (initialMode === "global" && !showProfileManager) {
       void (async () => {
         const existing = await loadGlobalCredentials();
@@ -785,14 +1065,14 @@ var CredentialSetupUI = ({
       })();
     }
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (phase.type === "creds-entry" && phase.field === 0) {
       setInputBuffer(phase.values.apiKey ?? "");
     }
   }, [phase.type]);
   if (phase.type === "loading" || phase.type === "saving" || phase.type === "profile-loading") {
     const label = phase.type === "saving" ? "Saving credentials\u2026" : phase.type === "profile-loading" ? "Loading profiles\u2026" : "Loading credentials\u2026";
-    return /* @__PURE__ */ jsx3(Box3, { paddingY: 1, paddingX: 2, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: label }) });
+    return /* @__PURE__ */ jsx5(Box4, { paddingY: 1, paddingX: 2, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: label }) });
   }
   if (phase.type === "done") {
     return null;
@@ -802,49 +1082,41 @@ var CredentialSetupUI = ({
       { label: "Global", desc: `~/.kizenappbuilder/credentials.json`, mode: "global" },
       { label: "Local", desc: "Enter credentials in the browser dev tools", mode: "local" }
     ];
-    return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", paddingY: 1, paddingX: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx3(Logo, {}),
-      /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx3(Text3, { bold: true, color: "cyan", children: "Kizen App Builder" }),
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "\u2500".repeat(24) })
-      ] }),
-      /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", gap: 0, children: [
-        /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Credential mode" }),
+    return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", paddingY: 1, paddingX: 2, gap: 1, children: [
+      /* @__PURE__ */ jsx5(AppHeader, {}),
+      /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", gap: 0, children: [
+        /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Credential mode" }),
         options.map((opt, i) => {
           const selected = phase.cursor === i;
-          return /* @__PURE__ */ jsxs2(Box3, { gap: 2, children: [
-            /* @__PURE__ */ jsx3(Text3, { ...selected && { color: "cyan" }, children: selected ? "\u276F" : " " }),
-            /* @__PURE__ */ jsx3(Text3, { bold: selected, ...selected && { color: "cyan" }, children: opt.label }),
-            /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: opt.desc })
+          return /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
+            /* @__PURE__ */ jsx5(Text5, { ...selected && { color: "cyan" }, children: selected ? "\u276F" : " " }),
+            /* @__PURE__ */ jsx5(Text5, { bold: selected, ...selected && { color: "cyan" }, children: opt.label }),
+            /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: opt.desc })
           ] }, opt.mode);
         })
       ] }),
-      /* @__PURE__ */ jsx3(Hint, { text: "\u2191\u2193 to move \xB7 Enter to select \xB7 Ctrl+C to quit" })
+      /* @__PURE__ */ jsx5(Hint, { text: "\u2191\u2193 to move \xB7 Enter to select \xB7 Ctrl+C to quit" })
     ] });
   }
   if (phase.type === "profile-select") {
     const { profiles, cursor } = phase;
     const addNewIdx = profiles.length;
-    return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", paddingY: 1, paddingX: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx3(Logo, {}),
-      /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx3(Text3, { bold: true, color: "cyan", children: "Kizen App Builder" }),
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "\u2500".repeat(24) })
-      ] }),
-      /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", gap: 0, children: [
-        /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Credential profiles" }),
+    return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", paddingY: 1, paddingX: 2, gap: 1, children: [
+      /* @__PURE__ */ jsx5(AppHeader, {}),
+      /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", gap: 0, children: [
+        /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Credential profiles" }),
         profiles.map((profile, i) => {
           const selected = cursor === i;
-          return /* @__PURE__ */ jsxs2(Box3, { gap: 2, children: [
-            /* @__PURE__ */ jsx3(Text3, { ...selected && { color: "cyan" }, children: selected ? "\u276F" : " " }),
-            /* @__PURE__ */ jsx3(Text3, { bold: selected, ...selected && { color: "cyan" }, children: profile.isDefault ? "Default" : profile.name }),
-            /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: profile.path })
+          return /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
+            /* @__PURE__ */ jsx5(Text5, { ...selected && { color: "cyan" }, children: selected ? "\u276F" : " " }),
+            /* @__PURE__ */ jsx5(Text5, { bold: selected, ...selected && { color: "cyan" }, children: profile.isDefault ? "Default" : profile.name }),
+            /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: profile.path })
           ] }, profile.name);
         }),
-        /* @__PURE__ */ jsxs2(Box3, { gap: 2, children: [
-          /* @__PURE__ */ jsx3(Text3, { ...cursor === addNewIdx && { color: "cyan" }, children: cursor === addNewIdx ? "\u276F" : " " }),
-          /* @__PURE__ */ jsx3(
-            Text3,
+        /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
+          /* @__PURE__ */ jsx5(Text5, { ...cursor === addNewIdx && { color: "cyan" }, children: cursor === addNewIdx ? "\u276F" : " " }),
+          /* @__PURE__ */ jsx5(
+            Text5,
             {
               bold: cursor === addNewIdx,
               ...cursor === addNewIdx && { color: "cyan" },
@@ -853,77 +1125,69 @@ var CredentialSetupUI = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx3(Hint, { text: "\u2191\u2193 to move \xB7 Enter to select \xB7 Esc to cancel" })
+      /* @__PURE__ */ jsx5(Hint, { text: "\u2191\u2193 to move \xB7 Enter to select \xB7 Esc to cancel" })
     ] });
   }
   if (phase.type === "name-entry") {
     const { nameBuffer, nameError } = phase;
-    return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", paddingY: 1, paddingX: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx3(Logo, {}),
-      /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx3(Text3, { bold: true, color: "cyan", children: "Kizen App Builder" }),
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "\u2500".repeat(24) })
-      ] }),
-      /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", gap: 0, children: /* @__PURE__ */ jsx3(Text3, { bold: true, children: "New credential profile" }) }),
-      nameError && /* @__PURE__ */ jsxs2(Text3, { color: "red", children: [
+    return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", paddingY: 1, paddingX: 2, gap: 1, children: [
+      /* @__PURE__ */ jsx5(AppHeader, {}),
+      /* @__PURE__ */ jsx5(Box4, { flexDirection: "column", gap: 0, children: /* @__PURE__ */ jsx5(Text5, { bold: true, children: "New credential profile" }) }),
+      nameError && /* @__PURE__ */ jsxs3(Text5, { color: "red", children: [
         "Error: ",
         nameError
       ] }),
-      /* @__PURE__ */ jsxs2(Box3, { gap: 2, children: [
-        /* @__PURE__ */ jsx3(Box3, { width: 12, children: /* @__PURE__ */ jsx3(Text3, { bold: true, color: "cyan", children: "Profile name" }) }),
-        /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: ">" }),
-        /* @__PURE__ */ jsx3(Text3, { children: nameBuffer }),
-        /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: "\u2588" })
+      /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
+        /* @__PURE__ */ jsx5(Box4, { width: 12, children: /* @__PURE__ */ jsx5(Text5, { bold: true, color: "cyan", children: "Profile name" }) }),
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: ">" }),
+        /* @__PURE__ */ jsx5(Text5, { children: nameBuffer }),
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "\u2588" })
       ] }),
-      /* @__PURE__ */ jsx3(Hint, { text: "Type a name \xB7 Enter to confirm \xB7 Esc to go back" })
+      /* @__PURE__ */ jsx5(Hint, { text: "Type a name \xB7 Enter to confirm \xB7 Esc to go back" })
     ] });
   }
   const { field: activeField, values, envCursor } = phase;
   const isEnvField = activeField === FIELDS.length;
   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: [
-      /* @__PURE__ */ jsx3(Text3, { bold: true, color: "cyan", children: "Kizen App Builder" }),
-      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "\u2500".repeat(24) })
-    ] }),
-    /* @__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: [
+  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", paddingY: 1, paddingX: 2, gap: 1, children: [
+    /* @__PURE__ */ jsx5(AppHeader, {}),
+    /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", gap: 0, children: [
+      /* @__PURE__ */ jsx5(Text5, { bold: true, children: activeProfileName !== void 0 ? `Profile: ${activeProfileName}` : "Global credentials" }),
+      /* @__PURE__ */ jsxs3(Text5, { dimColor: true, children: [
         "Saved to:",
         " ",
         activeProfileName !== void 0 ? `~/.kizenappbuilder/${activeProfileName}.json` : GLOBAL_CREDENTIALS_PATH
       ] })
     ] }),
-    error && /* @__PURE__ */ jsxs2(Text3, { color: "red", children: [
+    error && /* @__PURE__ */ jsxs3(Text5, { color: "red", children: [
       "Error: ",
       error
     ] }),
-    /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", gap: 0, children: [
       FIELDS.map((name, i) => {
         const isActive = activeField === i;
         const displayValue = isActive ? inputBuffer : values[name] ?? "";
-        return /* @__PURE__ */ jsxs2(Box3, { gap: 2, children: [
-          /* @__PURE__ */ jsx3(Box3, { width: 12, children: /* @__PURE__ */ jsx3(Text3, { bold: isActive, ...isActive && { color: "cyan" }, children: FIELD_LABELS[name] }) }),
-          /* @__PURE__ */ jsx3(Text3, { ...isActive && { color: "cyan" }, children: ">" }),
-          /* @__PURE__ */ jsx3(Text3, { children: displayValue }),
-          isActive && /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: "\u2588" })
+        return /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
+          /* @__PURE__ */ jsx5(Box4, { width: 12, children: /* @__PURE__ */ jsx5(Text5, { bold: isActive, ...isActive && { color: "cyan" }, children: FIELD_LABELS[name] }) }),
+          /* @__PURE__ */ jsx5(Text5, { ...isActive && { color: "cyan" }, children: ">" }),
+          /* @__PURE__ */ jsx5(Text5, { children: displayValue }),
+          isActive && /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "\u2588" })
         ] }, name);
       }),
-      /* @__PURE__ */ jsxs2(Box3, { gap: 2, children: [
-        /* @__PURE__ */ jsx3(Box3, { width: 12, children: /* @__PURE__ */ jsx3(Text3, { bold: isEnvField, ...isEnvField && { color: "cyan" }, children: "Environment" }) }),
-        /* @__PURE__ */ jsx3(Text3, { ...isEnvField && { color: "cyan" }, children: ">" }),
-        /* @__PURE__ */ jsx3(Box3, { gap: 1, children: ENVIRONMENTS.map((env, i) => {
+      /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
+        /* @__PURE__ */ jsx5(Box4, { width: 12, children: /* @__PURE__ */ jsx5(Text5, { bold: isEnvField, ...isEnvField && { color: "cyan" }, children: "Environment" }) }),
+        /* @__PURE__ */ jsx5(Text5, { ...isEnvField && { color: "cyan" }, children: ">" }),
+        /* @__PURE__ */ jsx5(Box4, { gap: 1, children: ENVIRONMENTS.map((env, i) => {
           const isSelected = i === envCursor;
           if (isEnvField) {
-            return /* @__PURE__ */ jsx3(Text3, { bold: isSelected, ...isSelected && { color: "cyan" }, children: isSelected ? `[${env}]` : env }, env);
+            return /* @__PURE__ */ jsx5(Text5, { bold: isSelected, ...isSelected && { color: "cyan" }, children: isSelected ? `[${env}]` : env }, env);
           }
-          return /* @__PURE__ */ jsx3(Text3, { dimColor: !isSelected, bold: isSelected, children: env }, env);
+          return /* @__PURE__ */ jsx5(Text5, { dimColor: !isSelected, bold: isSelected, children: env }, env);
         }) })
       ] })
     ] }),
-    isEnvField ? /* @__PURE__ */ jsx3(Hint, { text: "\u2190\u2192 to select \xB7 \u2191\u2193 to move \xB7 Enter to save \xB7 Esc to cancel" }) : /* @__PURE__ */ jsx3(Hint, { text: "\u2191\u2193 to move \xB7 Backspace to delete \xB7 Esc to cancel" }),
-    /* @__PURE__ */ jsxs2(Text3, { dimColor: true, children: [
+    isEnvField ? /* @__PURE__ */ jsx5(Hint, { text: "\u2190\u2192 to select \xB7 \u2191\u2193 to move \xB7 Enter to save \xB7 Esc to cancel" }) : /* @__PURE__ */ jsx5(Hint, { text: "\u2191\u2193 to move \xB7 Backspace to delete \xB7 Esc to cancel" }),
+    /* @__PURE__ */ jsxs3(Text5, { dimColor: true, children: [
       "Profile: ",
       profileLabel
     ] })
@@ -931,202 +1195,8 @@ var CredentialSetupUI = ({
 };
 
 // src/ui/DevUI.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function proxyLogEntryToString(entry) {
-  if (entry.kind === "info") {
-    return entry.message;
-  }
-  const cache = entry.fromCache ? " [cache]" : "";
-  return `${entry.method} ${entry.url} \u2192 ${String(entry.status)}${cache}`;
-}
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SKIP_WATCH_PREFIXES = [".kizenapp", ".git"];
-var LOG_LIMIT = 50;
-var LOG_DISPLAY = 8;
-var MIME_TYPES = {
-  ".html": "text/html; charset=utf-8",
-  ".js": "application/javascript; charset=utf-8",
-  ".mjs": "application/javascript; charset=utf-8",
-  ".css": "text/css; charset=utf-8",
-  ".png": "image/png",
-  ".jpg": "image/jpeg",
-  ".svg": "image/svg+xml",
-  ".ico": "image/x-icon",
-  ".json": "application/json; charset=utf-8",
-  ".woff": "font/woff",
-  ".woff2": "font/woff2",
-  ".ttf": "font/ttf",
-  ".map": "application/json"
-};
-var SPINNER_FRAMES2 = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
-var Spinner2 = () => {
-  const [frame, setFrame] = useState3(0);
-  useEffect3(() => {
-    const id = setInterval(() => {
-      setFrame((prev) => (prev + 1) % SPINNER_FRAMES2.length);
-    }, 80);
-    return () => {
-      clearInterval(id);
-    };
-  }, []);
-  return /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: SPINNER_FRAMES2[frame] ?? "\u280B" });
-};
-function getViewerPath() {
-  const filename = fileURLToPath2(import.meta.url);
-  return join7(dirname3(filename), "viewer");
-}
-async function fileExists(filePath) {
-  try {
-    await access(filePath);
-    return true;
-  } catch {
-    return false;
-  }
-}
-function createRequestHandler(viewerPath, createServerLog, createProxyLog, credentialsRef, activeProfileRef, outputDir, broadcast) {
-  const proxyCache = createProxyCache();
-  return (req, res) => {
-    void (async () => {
-      const url = req.url ?? "/";
-      try {
-        createServerLog(`Received request: ${url}`);
-        if (url === "/api/credentials") {
-          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
-          res.end(credentialsRef.current !== null ? JSON.stringify(credentialsRef.current) : "{}");
-          return;
-        }
-        if (url === "/api/credential-profiles" && req.method === "GET") {
-          const profiles = await listCredentialProfiles();
-          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
-          res.end(JSON.stringify({ profiles, active: activeProfileRef.current }));
-          return;
-        }
-        if (url === "/api/credentials/switch" && req.method === "POST") {
-          const chunks = [];
-          for await (const chunk of req) {
-            chunks.push(chunk);
-          }
-          const body = JSON.parse(Buffer.concat(chunks).toString("utf-8") || "{}");
-          const profileName = body.profile;
-          const creds = profileName === void 0 || profileName === "" ? await loadGlobalCredentials() : await loadCredentialProfile(profileName);
-          if (creds !== null) {
-            credentialsRef.current = creds;
-            activeProfileRef.current = profileName ?? void 0;
-            const active = activeProfileRef.current;
-            await saveConfig(outputDir, {
-              credentialMode: "global",
-              ...active !== void 0 && { activeCredentialProfile: active }
-            });
-            broadcast({ type: "credentials-updated", credentials: creds });
-          }
-          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
-          res.end(JSON.stringify({ ok: creds !== null }));
-          return;
-        }
-        if (url === "/api/bundle") {
-          const bundlePath = join7(process.cwd(), ".kizenapp", "bundle.json");
-          try {
-            const content = await readFile5(bundlePath, "utf-8");
-            res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
-            res.end(content);
-          } catch {
-            res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
-            res.end("{}");
-          }
-          return;
-        }
-        if (url === "/api/proxy-cache/clear") {
-          proxyCache.clear();
-          createProxyLog({ kind: "info", message: "Proxy cache cleared" });
-          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
-          res.end('{"ok":true}');
-          return;
-        }
-        if (url.startsWith("/api/proxy")) {
-          const proxyTarget = req.headers["x-proxy-target"];
-          if (typeof proxyTarget !== "string") {
-            res.writeHead(400);
-            res.end("Missing x-proxy-target header");
-            return;
-          }
-          const upstreamPath = url.slice("/api/proxy".length) || "/";
-          const upstreamUrl = `${proxyTarget}${upstreamPath}`;
-          const method = req.method ?? "GET";
-          const chunks = [];
-          for await (const chunk of req) {
-            chunks.push(chunk);
-          }
-          const { host, "x-proxy-target": _drop, ...forwardHeaders } = req.headers;
-          if (method === "GET") {
-            const cacheKey = `GET::${upstreamUrl}`;
-            const { response: cached, fromCache } = await proxyCache.get(
-              cacheKey,
-              () => fetch(upstreamUrl, {
-                method: "GET",
-                headers: forwardHeaders
-              })
-            );
-            createProxyLog({
-              kind: "request",
-              method: "GET",
-              status: cached.status,
-              fromCache,
-              url: upstreamPath
-            });
-            res.writeHead(cached.status, cached.headers);
-            res.end(cached.body);
-            return;
-          }
-          const body = chunks.length > 0 ? Buffer.concat(chunks) : void 0;
-          const resolvedBody = body && body.length > 0 ? body : void 0;
-          const upstream = await fetch(upstreamUrl, {
-            method,
-            headers: forwardHeaders,
-            ...resolvedBody !== void 0 && { body: resolvedBody }
-          });
-          createProxyLog({
-            kind: "request",
-            method,
-            status: upstream.status,
-            fromCache: false,
-            url: upstreamPath
-          });
-          const responseHeaders = Object.fromEntries(upstream.headers);
-          delete responseHeaders["content-encoding"];
-          delete responseHeaders["content-length"];
-          res.writeHead(upstream.status, responseHeaders);
-          res.end(Buffer.from(await upstream.arrayBuffer()));
-          return;
-        }
-        const rawPath = url === "/" ? "/index.html" : url;
-        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 });
-        createReadStream(resolvedPath).pipe(res);
-      } catch (err) {
-        if (url.startsWith("/api/proxy")) {
-          createProxyLog({
-            kind: "request",
-            method: req.method ?? "GET",
-            status: 502,
-            fromCache: false,
-            url: url.slice("/api/proxy".length) || "/"
-          });
-        } else {
-          createProxyLog({
-            kind: "info",
-            message: `Error handling ${url}: ${err instanceof Error ? err.message : String(err)}`
-          });
-        }
-        if (!res.headersSent) {
-          res.writeHead(502);
-          res.end("Bad Gateway");
-        }
-      }
-    })();
-  };
-}
 var DevUI = ({
   port,
   pluginDir,
@@ -1137,26 +1207,30 @@ var DevUI = ({
 }) => {
   const credentialsRef = useRef(initialCredentials);
   const activeProfileRef = useRef(initialActiveProfile);
-  const [credMode, setCredMode] = useState3("main");
-  const [credentialMode, setCredentialMode] = useState3(
+  const [credMode, setCredMode] = useState5("main");
+  const [credentialMode, setCredentialMode] = useState5(
     initialCredentialMode
   );
-  const [status, setStatus] = useState3("starting");
-  const [errorMessage, setErrorMessage] = useState3(null);
-  const [serverLogHistory, setServerLogHistory] = useState3([]);
-  const [buildLogHistory, setBuildLogHistory] = useState3([]);
-  const [proxyLogHistory, setProxyLogHistory] = useState3([]);
-  const [buildStatus, setBuildStatus] = useState3("pending");
-  const [buildError, setBuildError] = useState3(null);
-  const [lastBuilt, setLastBuilt] = useState3(null);
-  const [wsClientCount, setWsClientCount] = useState3(0);
+  const [status, setStatus] = useState5("starting");
+  const [errorMessage, setErrorMessage] = useState5(null);
+  const [serverLogHistory, appendServerLog] = useLogHistory(LOG_LIMIT);
+  const [buildLogHistory, appendBuildLog] = useLogHistory(LOG_LIMIT);
+  const [proxyLogHistory, setProxyLogHistory] = useState5([]);
+  const [buildStatus, setBuildStatus] = useState5("pending");
+  const [buildError, setBuildError] = useState5(null);
+  const [lastBuilt, setLastBuilt] = useState5(null);
+  const [lastBundleSize, setLastBundleSize] = useState5(null);
+  const [wsClientCount, setWsClientCount] = useState5(0);
+  const [proxyCacheSize, setProxyCacheSize] = useState5(0);
+  const [proxyCacheHits, setProxyCacheHits] = useState5(0);
+  const [proxyCacheMisses, setProxyCacheMisses] = useState5(0);
   const buildingRef = 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 broadcast = useCallback3((msg) => {
     const json = JSON.stringify(msg);
     if (wsClientsRef.current.size === 0) {
       pendingMessagesRef.current = [...pendingMessagesRef.current, json].slice(-LOG_LIMIT);
@@ -1168,21 +1242,19 @@ var DevUI = ({
       }
     }
   }, []);
-  const createServerLog = useCallback2((message) => {
-    setServerLogHistory(
-      (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
-    );
-  }, []);
-  const launchChromeViewerCb = useCallback2(() => {
+  const createServerLog = appendServerLog;
+  const launchChromeViewerCb = useCallback3(() => {
     chromeHandleRef.current?.kill();
     chromeHandleRef.current = null;
     void launchChromeViewer({
       port,
-      userDataDir: join7(outputDir, ".chrome"),
+      userDataDir: join8(outputDir, ".chrome"),
       broadcast
     }).then((handle) => {
       chromeHandleRef.current = handle;
-      process.on("exit", () => handle.kill());
+      process.on("exit", () => {
+        handle.kill();
+      });
     });
   }, [port, outputDir, broadcast]);
   useInput2(
@@ -1199,14 +1271,14 @@ var DevUI = ({
     },
     { isActive: credMode === "main" }
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (status !== "running" || viewerLaunchedRef.current) {
       return;
     }
     viewerLaunchedRef.current = true;
     launchChromeViewerCb();
   }, [status, launchChromeViewerCb]);
-  const handleCredentialsDone = useCallback2(
+  const handleCredentialsDone = useCallback3(
     (result) => {
       credentialsRef.current = result.credentials;
       activeProfileRef.current = result.profileName;
@@ -1221,27 +1293,32 @@ var DevUI = ({
     },
     [outputDir, broadcast]
   );
-  const createProxyLog = useCallback2(
+  const createProxyLog = useCallback3(
     (entry) => {
       setProxyLogHistory(
         (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${proxyLogEntryToString(entry)}`].slice(
           -LOG_LIMIT
         )
       );
+      if (entry.kind === "request") {
+        if (entry.fromCache) {
+          setProxyCacheHits((n) => n + 1);
+        } else {
+          setProxyCacheMisses((n) => n + 1);
+        }
+      }
       broadcast({ type: "proxy-log", entry });
     },
     [broadcast]
   );
-  const createBuildLog = useCallback2(
+  const createBuildLog = useCallback3(
     (message) => {
-      setBuildLogHistory(
-        (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
-      );
+      appendBuildLog(message);
       broadcast({ type: "log", message });
     },
-    [broadcast]
+    [appendBuildLog, broadcast]
   );
-  const triggerBuild = useCallback2(() => {
+  const triggerBuild = useCallback3(() => {
     if (buildingRef.current) {
       return;
     }
@@ -1249,10 +1326,11 @@ var DevUI = ({
     setBuildStatus("building");
     setBuildError(null);
     createBuildLog("Build started");
-    void runBuild(pluginDir, outputDir).then(() => {
-      createBuildLog("Build finished");
+    void runBuild(pluginDir, outputDir).then(({ bundleSize }) => {
+      createBuildLog(`Build finished \u2014 bundle: ${formatBytes(bundleSize)}`);
       setBuildStatus("done");
       setLastBuilt(/* @__PURE__ */ new Date());
+      setLastBundleSize(bundleSize);
       createBuildLog("Notifying viewers to reload");
       for (const client of wsClientsRef.current) {
         if (client.readyState === 1) {
@@ -1267,7 +1345,7 @@ var DevUI = ({
       buildingRef.current = false;
     });
   }, [pluginDir, outputDir, createBuildLog]);
-  useEffect3(() => {
+  useEffect4(() => {
     triggerBuild();
     const watcher = watch(pluginDir, { recursive: true }, (_, filename) => {
       if (!filename) {
@@ -1281,7 +1359,7 @@ var DevUI = ({
       if (debounceTimerRef.current !== null) {
         clearTimeout(debounceTimerRef.current);
       }
-      debounceTimerRef.current = setTimeout(triggerBuild, 150);
+      debounceTimerRef.current = setTimeout(triggerBuild, FILE_WATCH_DEBOUNCE_MS);
     });
     return () => {
       watcher.close();
@@ -1290,9 +1368,9 @@ var DevUI = ({
       }
     };
   }, [pluginDir, triggerBuild, createBuildLog]);
-  useEffect3(() => {
+  useEffect4(() => {
     const viewerPath = getViewerPath();
-    void fileExists(join7(viewerPath, "index.html")).then((viewerBuilt) => {
+    void fileExists(join8(viewerPath, "index.html")).then((viewerBuilt) => {
       if (!viewerBuilt) {
         setErrorMessage("Viewer not built. Run 'pnpm build:viewer' first.");
         setStatus("error");
@@ -1305,7 +1383,8 @@ var DevUI = ({
         credentialsRef,
         activeProfileRef,
         outputDir,
-        broadcast
+        broadcast,
+        setProxyCacheSize
       );
       const server = createServer(handler);
       const wss = new WebSocketServer({ server });
@@ -1339,7 +1418,7 @@ var DevUI = ({
     });
   }, [port, createServerLog, createProxyLog, broadcast, outputDir]);
   if (credMode === "editing") {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx6(
       CredentialSetupUI,
       {
         ...credentialMode !== void 0 && { initialMode: credentialMode },
@@ -1353,100 +1432,112 @@ var DevUI = ({
   }
   const elapsedSeconds = lastBuilt !== null ? Math.round((Date.now() - lastBuilt.getTime()) / 1e3) : null;
   const elapsedLabel = elapsedSeconds === null ? "" : elapsedSeconds < 5 ? " (just now)" : ` (${String(elapsedSeconds)}s ago)`;
-  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", paddingY: 1, paddingX: 2, children: [
-    /* @__PURE__ */ jsx4(Logo, {}),
-    /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "Kizen App Builder" }),
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "\u2500".repeat(24) })
-    ] }),
-    /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs3(Box4, { gap: 2, marginBottom: 0, children: [
-        /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "Build" }),
-        buildStatus === "pending" && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "waiting\u2026" }),
-        buildStatus === "building" && /* @__PURE__ */ jsxs3(Box4, { gap: 1, children: [
-          /* @__PURE__ */ jsx4(Spinner2, {}),
-          /* @__PURE__ */ jsx4(Text4, { children: "Building plugin package\u2026" })
+  return /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", paddingY: 1, paddingX: 2, children: [
+    /* @__PURE__ */ jsx6(AppHeader, { marginBottom: 1 }),
+    /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs4(Box5, { gap: 2, marginBottom: 0, children: [
+        /* @__PURE__ */ jsx6(Text6, { bold: true, dimColor: true, children: "App Build" }),
+        buildStatus === "pending" && /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "waiting\u2026" }),
+        buildStatus === "building" && /* @__PURE__ */ jsxs4(Box5, { gap: 1, children: [
+          /* @__PURE__ */ jsx6(Spinner, {}),
+          /* @__PURE__ */ jsx6(Text6, { children: "Building plugin package\u2026" })
         ] }),
-        buildStatus === "done" && /* @__PURE__ */ jsxs3(Box4, { gap: 1, children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "green", children: "\u2713 Built" }),
-          lastBuilt !== null && /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+        buildStatus === "done" && /* @__PURE__ */ jsxs4(Box5, { gap: 1, children: [
+          /* @__PURE__ */ jsx6(Text6, { color: "green", children: "\u2713 Built" }),
+          lastBuilt !== null && /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
             "at ",
             lastBuilt.toLocaleTimeString(),
             elapsedLabel
+          ] }),
+          lastBundleSize !== null && /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
+            "\xB7 bundle: ",
+            formatBytes(lastBundleSize)
           ] })
         ] }),
-        buildStatus === "error" && /* @__PURE__ */ jsxs3(Text4, { color: "red", children: [
+        buildStatus === "error" && /* @__PURE__ */ jsxs4(Text6, { color: "red", children: [
           "\u2717 ",
           buildError ?? "unknown error"
         ] })
       ] }),
-      /* @__PURE__ */ jsx4(
-        Box4,
+      /* @__PURE__ */ jsx6(
+        Box5,
         {
           flexDirection: "column",
-          height: LOG_DISPLAY,
+          height: LOG_DISPLAY + 2,
           borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
-          children: buildLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx4(Text4, { dimColor: true, wrap: "truncate", children: log }, index))
+          children: buildLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx6(Text6, { dimColor: true, wrap: "truncate", children: log }, index))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs3(Box4, { marginTop: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
-        /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "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" }),
-          /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+    /* @__PURE__ */ jsxs4(Box5, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs4(Box5, { gap: 2, children: [
+        /* @__PURE__ */ jsx6(Text6, { bold: true, dimColor: true, children: "Web Server" }),
+        status === "starting" && /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "starting\u2026" }),
+        status === "running" && /* @__PURE__ */ jsxs4(Box5, { gap: 2, children: [
+          /* @__PURE__ */ jsx6(Text6, { color: "green", children: "\u2713 Running" }),
+          /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
             "\u25CF ",
             wsClientCount,
             " viewer",
             wsClientCount !== 1 ? "s" : ""
           ] })
         ] }),
-        status === "error" && /* @__PURE__ */ jsxs3(Text4, { color: "red", children: [
+        status === "error" && /* @__PURE__ */ jsxs4(Text6, { color: "red", children: [
           "\u2717 ",
           errorMessage ?? "Server error"
         ] })
       ] }),
-      /* @__PURE__ */ jsx4(
-        Box4,
+      /* @__PURE__ */ jsx6(
+        Box5,
         {
           flexDirection: "column",
-          height: LOG_DISPLAY,
+          height: LOG_DISPLAY + 2,
           borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
-          children: serverLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx4(Text4, { dimColor: true, wrap: "truncate", children: log }, index))
+          children: serverLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx6(Text6, { dimColor: true, wrap: "truncate", children: log }, index))
         }
       )
     ] }),
-    /* @__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__ */ jsxs4(Box5, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs4(Box5, { gap: 2, children: [
+        /* @__PURE__ */ jsx6(Text6, { bold: true, dimColor: true, children: "Network Proxy" }),
+        /* @__PURE__ */ jsx6(Text6, { color: "green", children: "\u2713 Active" }),
+        /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
+          "\u25CF ",
+          proxyCacheSize,
+          " key",
+          proxyCacheSize !== 1 ? "s" : "",
+          " in the network cache \xB7",
+          " ",
+          proxyCacheHits,
+          " hit \xB7 ",
+          proxyCacheMisses,
+          " miss"
+        ] })
       ] }),
-      /* @__PURE__ */ jsx4(
-        Box4,
+      /* @__PURE__ */ jsx6(
+        Box5,
         {
           flexDirection: "column",
-          height: LOG_DISPLAY,
+          height: LOG_DISPLAY + 2,
           borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
-          children: proxyLogHistory.length === 0 ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: " No requests yet." }) : proxyLogHistory.slice(-LOG_DISPLAY).map((log, i) => /* @__PURE__ */ jsx4(Text4, { dimColor: true, wrap: "truncate", children: log }, i))
+          children: proxyLogHistory.length === 0 ? /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: " No requests yet." }) : proxyLogHistory.slice(-LOG_DISPLAY).map((log, i) => /* @__PURE__ */ jsx6(Text6, { dimColor: true, wrap: "truncate", children: log }, i))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs3(Box4, { marginTop: 1, gap: 1, children: [
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "[" }),
-      /* @__PURE__ */ jsx4(Text4, { children: "q" }),
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "] quit [" }),
-      /* @__PURE__ */ jsx4(Text4, { children: "c" }),
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "] credentials [" }),
-      /* @__PURE__ */ jsx4(Text4, { children: "v" }),
-      /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+    /* @__PURE__ */ jsxs4(Box5, { marginTop: 1, gap: 1, children: [
+      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "[" }),
+      /* @__PURE__ */ jsx6(Text6, { children: "q" }),
+      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "] quit [" }),
+      /* @__PURE__ */ jsx6(Text6, { children: "c" }),
+      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "] credentials [" }),
+      /* @__PURE__ */ jsx6(Text6, { children: "v" }),
+      /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
         "] ",
         wsClientCount === 0 ? "open viewer" : "relaunch viewer"
       ] })