@kizenapps/cli 0.7.0 → 0.9.0

package/dist/index.js

@@ -229,14 +229,231 @@ 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:${opts.port}`,
+    chromeFlags: [
+      `--app=http://localhost:${opts.port}`,
+      "--no-first-run",
+      "--no-default-browser-check",
+      "--disable-extensions"
+    ],
+    userDataDir: opts.userDataDir,
+    handleSIGINT: false,
+    logLevel: "silent"
+  });
+  let client = null;
+  let cookieTimer = null;
+  let 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 = () => {
+    if (cookieTimer !== null) clearInterval(cookieTimer);
+    try {
+      void c.close();
+    } catch {
+    }
+    chrome.kill();
+  };
+  return { kill };
+}
 
 // src/lib/proxyCache.ts
 function createProxyCache() {
@@ -269,33 +486,14 @@ function createProxyCache() {
   };
 }
 
-// src/lib/config.ts
-import { mkdir as mkdir2, readFile as readFile2, writeFile as writeFile2 } from "fs/promises";
-import { join as join4 } from "path";
-async function loadConfig(outputDir) {
-  try {
-    const content = await readFile2(join4(outputDir, "config.json"), "utf-8");
-    return JSON.parse(content);
-  } catch {
-    return {};
-  }
-}
-async function saveConfig(outputDir, config) {
-  await mkdir2(outputDir, { recursive: true });
-  await writeFile2(join4(outputDir, "config.json"), JSON.stringify(config, null, 2), "utf-8");
-}
-
-// src/ui/CredentialSetupUI.tsx
-import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
-import { Box as Box3, Text as Text3, useInput } from "ink";
-
 // src/lib/credentials.ts
-import { mkdir as mkdir3, readFile as readFile3, writeFile as writeFile3 } 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 join5 } from "path";
+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);
 }
@@ -324,11 +522,67 @@ async function loadGlobalCredentials() {
   }
 }
 async function saveGlobalCredentials(credentials) {
-  await mkdir3(dirname(GLOBAL_CREDENTIALS_PATH), { recursive: true });
-  await writeFile3(GLOBAL_CREDENTIALS_PATH, JSON.stringify(credentials, null, 2), "utf-8");
+  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;
+      }
+      profiles.push({ name, path: join5(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 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/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";
 var FIELDS = ["apiKey", "userId", "businessId"];
 var FIELD_LABELS = {
@@ -339,32 +593,39 @@ var FIELD_LABELS = {
 var Hint = ({ text }) => /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: text });
 var CredentialSetupUI = ({
   initialMode,
+  showProfileManager,
   onComplete,
   onCancel
 }) => {
   const [phase, setPhase] = useState2(
-    initialMode === "global" ? { type: "loading" } : { type: "mode-select", cursor: 0 }
+    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(
-    async (mode) => {
+    (mode) => {
       if (mode === "local") {
         onComplete({ mode: "local", credentials: null });
         return;
       }
-      setPhase({ type: "loading" });
-      const existing = await loadGlobalCredentials();
-      const envCursor2 = existing ? Math.max(0, ENVIRONMENTS.indexOf(existing.environment)) : 0;
-      setPhase({
-        type: "creds-entry",
-        field: 0,
-        values: existing ?? {},
-        envCursor: envCursor2
-      });
+      setPhase({ type: "profile-loading" });
     },
     [onComplete]
   );
+  const handleProfileChosen = useCallback(async (profile) => {
+    if (profile === null) {
+      setPhase({ type: "profile-loading" });
+      const profiles = await listCredentialProfiles();
+      setPhase({ type: "name-entry", nameBuffer: "", existingProfiles: profiles });
+      return;
+    }
+    setActiveProfileName(profile.isDefault ? void 0 : profile.name);
+    setPhase({ type: "loading" });
+    const existing = profile.isDefault ? await loadGlobalCredentials() : await loadCredentialProfile(profile.name);
+    const envCursor2 = existing ? Math.max(0, ENVIRONMENTS.indexOf(existing.environment)) : 0;
+    setPhase({ type: "creds-entry", field: 0, values: existing ?? {}, envCursor: envCursor2 });
+  }, []);
   const handleSave = useCallback(
     async (values2, envCursor2) => {
       const environment = ENVIRONMENTS[envCursor2] ?? "go";
@@ -376,20 +637,32 @@ var CredentialSetupUI = ({
       };
       setPhase({ type: "saving" });
       try {
-        await saveGlobalCredentials(credentials);
-        onComplete({ mode: "global", credentials });
+        const profileName = activeProfileName ?? DEFAULT_PROFILE_NAME;
+        await saveCredentialProfile(profileName, credentials);
+        onComplete({
+          mode: "global",
+          credentials,
+          ...activeProfileName !== void 0 && { profileName: activeProfileName }
+        });
       } catch (err) {
         setError(err instanceof Error ? err.message : String(err));
         setPhase({ type: "creds-entry", field: 0, values: values2, envCursor: envCursor2 });
       }
     },
-    [onComplete]
+    [onComplete, activeProfileName]
   );
   useInput((input, key) => {
     if (key.ctrl && input === "c") {
       process.exit(0);
     }
     if (key.escape) {
+      if (phase.type === "creds-entry" || phase.type === "name-entry") {
+        if (initialMode === "global" && showProfileManager) {
+          setPhase({ type: "profile-loading" });
+          void loadProfileList();
+          return;
+        }
+      }
       onCancel?.();
       return;
     }
@@ -400,7 +673,53 @@ 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;
+    }
+    if (phase.type === "profile-select") {
+      const { profiles, cursor } = phase;
+      const addNewIdx = profiles.length;
+      const totalItems = profiles.length + 1;
+      if (key.upArrow) {
+        setPhase({ ...phase, cursor: (cursor - 1 + totalItems) % totalItems });
+      } else if (key.downArrow) {
+        setPhase({ ...phase, cursor: (cursor + 1) % totalItems });
+      } else if (key.return) {
+        if (cursor === addNewIdx) {
+          setPhase({ type: "name-entry", nameBuffer: "", existingProfiles: profiles });
+        } else {
+          const selected = profiles[cursor] ?? profiles[0];
+          if (selected) {
+            void handleProfileChosen(selected);
+          }
+        }
+      }
+      return;
+    }
+    if (phase.type === "name-entry") {
+      const { nameBuffer, existingProfiles } = phase;
+      if (key.backspace || key.delete) {
+        setPhase({ type: "name-entry", nameBuffer: nameBuffer.slice(0, -1), existingProfiles });
+      } else if (key.return) {
+        const trimmed = nameBuffer.trim();
+        if (!trimmed) {
+          setPhase({ ...phase, nameError: "Name cannot be empty" });
+          return;
+        }
+        if (trimmed === DEFAULT_PROFILE_NAME) {
+          setPhase({ ...phase, nameError: `"${DEFAULT_PROFILE_NAME}" is reserved` });
+          return;
+        }
+        if (existingProfiles.some((p) => p.name === trimmed)) {
+          setPhase({ ...phase, nameError: `Profile "${trimmed}" already exists` });
+          return;
+        }
+        setActiveProfileName(trimmed);
+        setPhase({ type: "creds-entry", field: 0, values: {}, envCursor: 0 });
+        setInputBuffer("");
+      } else if (input && !key.ctrl && !key.meta) {
+        setPhase({ type: "name-entry", nameBuffer: nameBuffer + input, existingProfiles });
       }
       return;
     }
@@ -448,9 +767,22 @@ var CredentialSetupUI = ({
       }
     }
   });
+  const loadProfileList = useCallback(async () => {
+    const profiles = await listCredentialProfiles();
+    setPhase({ type: "profile-select", profiles, cursor: 0 });
+  }, []);
   useEffect2(() => {
-    if (initialMode === "global") {
-      void handleModeChosen("global");
+    if (phase.type === "profile-loading") {
+      void loadProfileList();
+    }
+  }, [phase.type, loadProfileList]);
+  useEffect2(() => {
+    if (initialMode === "global" && !showProfileManager) {
+      void (async () => {
+        const existing = await loadGlobalCredentials();
+        const envCursor2 = existing ? Math.max(0, ENVIRONMENTS.indexOf(existing.environment)) : 0;
+        setPhase({ type: "creds-entry", field: 0, values: existing ?? {}, envCursor: envCursor2 });
+      })();
     }
   }, []);
   useEffect2(() => {
@@ -458,8 +790,9 @@ var CredentialSetupUI = ({
       setInputBuffer(phase.values.apiKey ?? "");
     }
   }, [phase.type]);
-  if (phase.type === "loading" || phase.type === "saving") {
-    return /* @__PURE__ */ jsx3(Box3, { paddingY: 1, paddingX: 2, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: phase.type === "loading" ? "Loading credentials\u2026" : "Saving credentials\u2026" }) });
+  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 }) });
   }
   if (phase.type === "done") {
     return null;
@@ -489,8 +822,65 @@ var CredentialSetupUI = ({
       /* @__PURE__ */ jsx3(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" }),
+        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 })
+          ] }, profile.name);
+        }),
+        /* @__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(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: [
+        "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__ */ jsx3(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: [
@@ -498,10 +888,11 @@ var CredentialSetupUI = ({
       /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "\u2500".repeat(24) })
     ] }),
     /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", gap: 0, children: [
-      /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Global credentials" }),
+      /* @__PURE__ */ jsx3(Text3, { bold: true, children: activeProfileName !== void 0 ? `Profile: ${activeProfileName}` : "Global credentials" }),
       /* @__PURE__ */ jsxs2(Text3, { dimColor: true, children: [
-        "Saved to: ",
-        GLOBAL_CREDENTIALS_PATH
+        "Saved to:",
+        " ",
+        activeProfileName !== void 0 ? `~/.kizenappbuilder/${activeProfileName}.json` : GLOBAL_CREDENTIALS_PATH
       ] })
     ] }),
     error && /* @__PURE__ */ jsxs2(Text3, { color: "red", children: [
@@ -531,7 +922,11 @@ var CredentialSetupUI = ({
         }) })
       ] })
     ] }),
-    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" })
+    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: [
+      "Profile: ",
+      profileLabel
+    ] })
   ] });
 };
 
@@ -576,12 +971,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 {
@@ -591,7 +982,7 @@ async function fileExists(filePath) {
     return false;
   }
 }
-function createRequestHandler(viewerPath, createServerLog, createProxyLog, credentialsRef) {
+function createRequestHandler(viewerPath, createServerLog, createProxyLog, credentialsRef, activeProfileRef, outputDir, broadcast) {
   const proxyCache = createProxyCache();
   return (req, res) => {
     void (async () => {
@@ -603,10 +994,38 @@ function createRequestHandler(viewerPath, createServerLog, createProxyLog, crede
           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");
+          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 {
@@ -679,17 +1098,27 @@ 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 });
         createReadStream(resolvedPath).pipe(res);
       } catch (err) {
-        createProxyLog({
-          kind: "info",
-          message: `Error handling ${url}: ${err instanceof Error ? err.message : String(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");
@@ -702,10 +1131,16 @@ var DevUI = ({
   port,
   pluginDir,
   outputDir,
-  credentials: initialCredentials
+  credentials: initialCredentials,
+  credentialMode: initialCredentialMode,
+  activeCredentialProfile: initialActiveProfile
 }) => {
   const credentialsRef = useRef(initialCredentials);
+  const activeProfileRef = useRef(initialActiveProfile);
   const [credMode, setCredMode] = useState3("main");
+  const [credentialMode, setCredentialMode] = useState3(
+    initialCredentialMode
+  );
   const [status, setStatus] = useState3("starting");
   const [errorMessage, setErrorMessage] = useState3(null);
   const [serverLogHistory, setServerLogHistory] = useState3([]);
@@ -716,10 +1151,40 @@ var DevUI = ({
   const [lastBuilt, setLastBuilt] = useState3(null);
   const [wsClientCount, setWsClientCount] = 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") {
@@ -728,55 +1193,30 @@ 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;
+      activeProfileRef.current = result.profileName;
       setCredMode("main");
-      void saveConfig(outputDir, { credentialMode: result.mode });
+      setCredentialMode(result.mode);
+      const profile = result.profileName;
+      void saveConfig(outputDir, {
+        credentialMode: result.mode,
+        ...profile !== void 0 && { activeCredentialProfile: profile }
+      });
       broadcast({ type: "credentials-updated", credentials: result.credentials });
     },
     [outputDir, broadcast]
@@ -852,7 +1292,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");
@@ -862,7 +1302,10 @@ var DevUI = ({
         viewerPath,
         createServerLog,
         createProxyLog,
-        credentialsRef
+        credentialsRef,
+        activeProfileRef,
+        outputDir,
+        broadcast
       );
       const server = createServer(handler);
       const wss = new WebSocketServer({ server });
@@ -894,11 +1337,13 @@ var DevUI = ({
         server.close();
       };
     });
-  }, [port, createServerLog, createProxyLog]);
+  }, [port, createServerLog, createProxyLog, broadcast, outputDir]);
   if (credMode === "editing") {
     return /* @__PURE__ */ jsx4(
       CredentialSetupUI,
       {
+        ...credentialMode !== void 0 && { initialMode: credentialMode },
+        showProfileManager: credentialMode === "global",
         onComplete: handleCredentialsDone,
         onCancel: () => {
           setCredMode("main");
@@ -1000,8 +1445,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"
+      ] })
     ] })
   ] });
 };
@@ -1032,6 +1480,7 @@ function devCommand(program2) {
     ensureGitignore(pluginDir);
     let credentials = null;
     let credentialMode;
+    let activeCredentialProfile;
     if (options.credentials) {
       credentials = await loadCredentialsFromFile(options.credentials);
     } else {
@@ -1040,16 +1489,31 @@ function devCommand(program2) {
         credentialMode = "local";
       } else if (config.credentialMode === "global") {
         credentialMode = "global";
-        credentials = await loadGlobalCredentials();
+        activeCredentialProfile = config.activeCredentialProfile;
+        if (activeCredentialProfile) {
+          credentials = await loadCredentialProfile(activeCredentialProfile);
+          if (!credentials) {
+            credentials = await loadGlobalCredentials();
+            activeCredentialProfile = void 0;
+          }
+        } else {
+          credentials = await loadGlobalCredentials();
+        }
         if (!credentials) {
           const result = await runSetupUI("global");
           credentials = result.credentials;
+          activeCredentialProfile = result.profileName;
         }
       } else {
         const result = await runSetupUI();
         credentials = result.credentials;
         credentialMode = result.mode;
-        await saveConfig(outputDir, { credentialMode: result.mode });
+        activeCredentialProfile = result.profileName;
+        const profile = result.profileName;
+        await saveConfig(outputDir, {
+          credentialMode: result.mode,
+          ...profile !== void 0 && { activeCredentialProfile: profile }
+        });
       }
     }
     const { waitUntilExit } = render2(
@@ -1058,7 +1522,8 @@ function devCommand(program2) {
         pluginDir,
         outputDir,
         credentials,
-        ...credentialMode !== void 0 && { credentialMode }
+        ...credentialMode !== void 0 && { credentialMode },
+        ...activeCredentialProfile !== void 0 && { activeCredentialProfile }
       }),
       { exitOnCtrlC: false }
     );