@kizenapps/cli 0.3.0 → 0.4.0

package/dist/index.js

@@ -9,7 +9,7 @@ import { render } from "ink";
 
 // src/ui/BuildUI.tsx
 import { useEffect, useState } from "react";
-import { Box, Text, useApp } from "ink";
+import { Box as Box2, Text as Text2, useApp } from "ink";
 
 // src/lib/runBuild.ts
 import { mkdir, writeFile } from "fs/promises";
@@ -83,8 +83,33 @@ async function runBuild(pluginDir, outputDir, onStep) {
   await writeFile(join2(outputDir, "bundle.json"), JSON.stringify(bundle, null, 2), "utf-8");
 }
 
+// src/ui/Logo.tsx
+import { Box, Text } from "ink";
+import { jsx } from "react/jsx-runtime";
+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
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
 var Spinner = () => {
   const [frame, setFrame] = useState(0);
@@ -96,7 +121,7 @@ var Spinner = () => {
       clearInterval(id);
     };
   }, []);
-  return /* @__PURE__ */ jsx(Text, { color: "cyan", children: SPINNER_FRAMES[frame] ?? "\u280B" });
+  return /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: SPINNER_FRAMES[frame] ?? "\u280B" });
 };
 var STEPS = [
   "creating-dir",
@@ -113,57 +138,77 @@ var STEP_LABELS = {
   "writing-bundle": "Writing bundle.json"
 };
 var BuildUI = ({ outputDir, pluginDir }) => {
-  const { exit } = useApp();
+  const app = useApp();
   const [step, setStep] = useState("creating-dir");
   const [errorMessage, setErrorMessage] = useState(null);
   useEffect(() => {
     void runBuild(pluginDir, outputDir, setStep).then(() => {
       setStep("done");
-      exit();
+      app.exit();
     }).catch((err) => {
       const message = err instanceof Error ? err.message : String(err);
       setErrorMessage(message);
       setStep("error");
-      exit(err instanceof Error ? err : new Error(message));
+      app.exit();
     });
-  }, [outputDir, pluginDir, exit]);
+  }, [outputDir, pluginDir, app]);
   const currentIndex = STEPS.indexOf(step);
   const isError = step === "error";
   const isDone = step === "done";
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingY: 1, paddingX: 1, children: [
-    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "Kizen App Builder" }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(22) })
+  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(Box, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsxs(Box2, { 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__ */ jsx(Box, { gap: 1, children: isFailed ? /* @__PURE__ */ jsxs(Text, { color: "red", children: [
+        return /* @__PURE__ */ jsx2(Box2, { gap: 1, children: isFailed ? /* @__PURE__ */ jsxs(Text2, { color: "red", children: [
           "\u2717 ",
           STEP_LABELS[s]
-        ] }) : isStepDone ? /* @__PURE__ */ jsxs(Text, { color: "green", children: [
+        ] }) : isStepDone ? /* @__PURE__ */ jsxs(Text2, { color: "green", children: [
           "\u2713 ",
           STEP_LABELS[s]
         ] }) : isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Spinner, {}),
-          /* @__PURE__ */ jsx(Text, { children: STEP_LABELS[s] })
-        ] }) : /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-          "\xB7 ",
+          /* @__PURE__ */ jsx2(Spinner, {}),
+          /* @__PURE__ */ jsx2(Text2, { children: STEP_LABELS[s] })
+        ] }) : /* @__PURE__ */ jsxs(Text2, { dimColor: true, children: [
+          " ",
           STEP_LABELS[s]
         ] }) }, s);
       }),
-      errorMessage !== null && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "red", children: errorMessage }) })
+      errorMessage !== null && /* @__PURE__ */ jsx2(Box2, { marginTop: 1, borderStyle: "single", borderColor: "red", paddingX: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "red", children: errorMessage }) })
     ] })
   ] });
 };
 
+// src/lib/gitignore.ts
+import * as fs from "fs";
+import * as path from "path";
+function ensureGitignore(projectDir) {
+  const gitignorePath = path.join(projectDir, ".gitignore");
+  const entry = ".kizenapp/";
+  let contents = "";
+  if (fs.existsSync(gitignorePath)) {
+    contents = fs.readFileSync(gitignorePath, "utf8");
+    const lines = contents.split("\n").map((l) => l.trim());
+    if (lines.includes(entry) || lines.includes(".kizenapp")) {
+      return;
+    }
+  }
+  const addition = contents.endsWith("\n") ? entry + "\n" : "\n" + entry + "\n";
+  fs.writeFileSync(gitignorePath, contents + addition);
+}
+
 // src/commands/build.ts
 function buildCommand(program2) {
   program2.command("build").description("Bundle the plugin app into .kizenapp directory").action(async () => {
-    const outputDir = `${process.cwd()}/.kizenapp`;
     const pluginDir = process.cwd();
+    const outputDir = `${pluginDir}/.kizenapp`;
+    ensureGitignore(pluginDir);
     const { waitUntilExit } = render(createElement(BuildUI, { outputDir, pluginDir }));
     await waitUntilExit();
   });
@@ -174,24 +219,285 @@ import { createElement as createElement2 } from "react";
 import { render as render2 } from "ink";
 
 // src/ui/DevUI.tsx
-import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
-import { Box as Box2, Text as Text2, useInput } from "ink";
+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,
-  readFileSync,
-  statSync,
-  unlinkSync,
-  watch,
-  writeFileSync
-} from "fs";
-import { access, readFile as readFile2 } from "fs/promises";
+import { createReadStream, watch } from "fs";
+import { access, readFile as readFile4 } from "fs/promises";
 import { createServer } from "http";
 import { createRequire } from "module";
-import { dirname, extname, join as join3 } from "path";
+import { dirname as dirname2, extname, join as join6 } from "path";
 import { fileURLToPath } from "url";
 import { WebSocketServer } from "ws";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// 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 { homedir } from "os";
+import { dirname, 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");
+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 mkdir3(dirname(GLOBAL_CREDENTIALS_PATH), { recursive: true });
+  await writeFile3(GLOBAL_CREDENTIALS_PATH, JSON.stringify(credentials, null, 2), "utf-8");
+}
+
+// src/ui/CredentialSetupUI.tsx
+import { jsx as jsx3, jsxs as jsxs2 } 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 CredentialSetupUI = ({
+  initialMode,
+  onComplete,
+  onCancel
+}) => {
+  const [phase, setPhase] = useState2(
+    initialMode === "global" ? { type: "loading" } : { type: "mode-select", cursor: 0 }
+  );
+  const [inputBuffer, setInputBuffer] = useState2("");
+  const [error, setError] = useState2(null);
+  const handleModeChosen = useCallback(
+    async (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
+      });
+    },
+    [onComplete]
+  );
+  const handleSave = useCallback(
+    async (values2, envCursor2) => {
+      const environment = ENVIRONMENTS[envCursor2] ?? "go";
+      const credentials = {
+        apiKey: values2.apiKey ?? "",
+        userId: values2.userId ?? "",
+        businessId: values2.businessId ?? "",
+        environment
+      };
+      setPhase({ type: "saving" });
+      try {
+        await saveGlobalCredentials(credentials);
+        onComplete({ mode: "global", credentials });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+        setPhase({ type: "creds-entry", field: 0, values: values2, envCursor: envCursor2 });
+      }
+    },
+    [onComplete]
+  );
+  useInput((input, key) => {
+    if (key.ctrl && input === "c") {
+      process.exit(0);
+    }
+    if (key.escape) {
+      onCancel?.();
+      return;
+    }
+    if (phase.type === "mode-select") {
+      if (key.upArrow) {
+        setPhase({ type: "mode-select", cursor: 0 });
+      } else if (key.downArrow) {
+        setPhase({ type: "mode-select", cursor: 1 });
+      } else if (key.return) {
+        const mode = phase.cursor === 0 ? "global" : "local";
+        void handleModeChosen(mode);
+      }
+      return;
+    }
+    if (phase.type === "creds-entry") {
+      const { field, values: values2, envCursor: envCursor2 } = phase;
+      const isEnvField2 = field === FIELDS.length;
+      if (isEnvField2) {
+        if (key.leftArrow) {
+          setPhase({
+            ...phase,
+            envCursor: (envCursor2 - 1 + ENVIRONMENTS.length) % ENVIRONMENTS.length
+          });
+        } else if (key.rightArrow) {
+          setPhase({ ...phase, envCursor: (envCursor2 + 1) % ENVIRONMENTS.length });
+        } else if (key.upArrow) {
+          setPhase({ ...phase, field: field - 1 });
+          setInputBuffer(values2[FIELDS[field - 1]] ?? "");
+        } else if (key.return) {
+          void handleSave(values2, envCursor2);
+        }
+        return;
+      }
+      const fieldName = FIELDS[field];
+      if (!fieldName) {
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setInputBuffer((prev) => prev.slice(0, -1));
+      } else if (key.upArrow && field > 0) {
+        const updatedValues = { ...values2, [fieldName]: inputBuffer };
+        const prevField = field - 1;
+        setPhase({ ...phase, field: prevField, values: updatedValues });
+        setInputBuffer(updatedValues[FIELDS[prevField]] ?? "");
+      } else if (key.return || key.tab || key.downArrow) {
+        const updatedValues = { ...values2, [fieldName]: inputBuffer };
+        const nextField = field + 1;
+        setPhase({ ...phase, field: nextField, values: updatedValues });
+        if (nextField < FIELDS.length) {
+          setInputBuffer(updatedValues[FIELDS[nextField]] ?? "");
+        } else {
+          setInputBuffer("");
+        }
+      } else if (input && !key.ctrl && !key.meta) {
+        setInputBuffer((prev) => prev + input);
+      }
+    }
+  });
+  useEffect2(() => {
+    if (initialMode === "global") {
+      void handleModeChosen("global");
+    }
+  }, []);
+  useEffect2(() => {
+    if (phase.type === "creds-entry" && phase.field === 0) {
+      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 === "done") {
+    return null;
+  }
+  if (phase.type === "mode-select") {
+    const options = [
+      { 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" }),
+        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 })
+          ] }, opt.mode);
+        })
+      ] }),
+      /* @__PURE__ */ jsx3(Hint, { text: "\u2191\u2193 to move \xB7 Enter to select \xB7 Ctrl+C to quit" })
+    ] });
+  }
+  const { field: activeField, values, envCursor } = phase;
+  const isEnvField = activeField === FIELDS.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: "Global credentials" }),
+      /* @__PURE__ */ jsxs2(Text3, { dimColor: true, children: [
+        "Saved to: ",
+        GLOBAL_CREDENTIALS_PATH
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxs2(Text3, { color: "red", children: [
+      "Error: ",
+      error
+    ] }),
+    /* @__PURE__ */ jsxs2(Box3, { 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" })
+        ] }, 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) => {
+          const isSelected = i === envCursor;
+          if (isEnvField) {
+            return /* @__PURE__ */ jsx3(Text3, { bold: isSelected, ...isSelected && { color: "cyan" }, children: isSelected ? `[${env}]` : env }, env);
+          }
+          return /* @__PURE__ */ jsx3(Text3, { 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" })
+  ] });
+};
+
+// src/ui/DevUI.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var SKIP_WATCH_PREFIXES = [".kizenapp", ".git"];
 var LOG_LIMIT = 50;
 var LOG_DISPLAY = 8;
@@ -212,8 +518,8 @@ var MIME_TYPES = {
 };
 var SPINNER_FRAMES2 = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
 var Spinner2 = () => {
-  const [frame, setFrame] = useState2(0);
-  useEffect2(() => {
+  const [frame, setFrame] = useState3(0);
+  useEffect3(() => {
     const id = setInterval(() => {
       setFrame((prev) => (prev + 1) % SPINNER_FRAMES2.length);
     }, 80);
@@ -221,15 +527,15 @@ var Spinner2 = () => {
       clearInterval(id);
     };
   }, []);
-  return /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: SPINNER_FRAMES2[frame] ?? "\u280B" });
+  return /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: SPINNER_FRAMES2[frame] ?? "\u280B" });
 };
 function getViewerPath() {
   const filename = fileURLToPath(import.meta.url);
-  return join3(dirname(filename), "viewer");
+  return join6(dirname2(filename), "viewer");
 }
 function getElectronMainPath() {
   const filename = fileURLToPath(import.meta.url);
-  return join3(dirname(filename), "electron", "main.js");
+  return join6(dirname2(filename), "electron", "main.js");
 }
 async function fileExists(filePath) {
   try {
@@ -239,83 +545,114 @@ async function fileExists(filePath) {
     return false;
   }
 }
-function createRequestHandler(viewerPath, createServerLog, createProxyLog) {
+function createRequestHandler(viewerPath, createServerLog, createProxyLog, credentialsRef) {
   return (req, res) => {
     void (async () => {
       const url = req.url ?? "/";
-      createServerLog(`Received request: ${url}`);
-      if (url === "/api/bundle") {
-        const bundlePath = join3(process.cwd(), ".kizenapp", "bundle.json");
-        try {
-          const content = await readFile2(bundlePath, "utf-8");
-          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
-          res.end(content);
-        } catch {
+      try {
+        createServerLog(`Received request: ${url}`);
+        if (url === "/api/credentials") {
           res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
-          res.end("{}");
+          res.end(credentialsRef.current !== null ? JSON.stringify(credentialsRef.current) : "{}");
+          return;
         }
-        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");
+        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.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 chunks = [];
+          for await (const chunk of req) {
+            chunks.push(chunk);
+          }
+          const body = chunks.length > 0 ? Buffer.concat(chunks) : void 0;
+          const { host, "x-proxy-target": _drop, ...forwardHeaders } = req.headers;
+          const resolvedBody = body && body.length > 0 ? body : void 0;
+          const upstream = await fetch(upstreamUrl, {
+            ...req.method !== void 0 && { method: req.method },
+            headers: forwardHeaders,
+            ...resolvedBody !== void 0 && { body: resolvedBody }
+          });
+          createProxyLog(`${req.method ?? "GET"} ${upstreamPath} \u2192 ${String(upstream.status)}`);
+          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 upstreamPath = url.slice("/api/proxy".length) || "/";
-        const upstreamUrl = `${proxyTarget}${upstreamPath}`;
-        const chunks = [];
-        for await (const chunk of req) {
-          chunks.push(chunk);
+        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) {
+        createProxyLog(
+          `Error handling ${url}: ${err instanceof Error ? err.message : String(err)}`
+        );
+        if (!res.headersSent) {
+          res.writeHead(502);
+          res.end("Bad Gateway");
         }
-        const body = chunks.length > 0 ? Buffer.concat(chunks) : void 0;
-        const { host, "x-proxy-target": _drop, ...forwardHeaders } = req.headers;
-        const resolvedBody = body && body.length > 0 ? body : void 0;
-        const upstream = await fetch(upstreamUrl, {
-          ...req.method !== void 0 && { method: req.method },
-          headers: forwardHeaders,
-          ...resolvedBody !== void 0 && { body: resolvedBody }
-        });
-        createProxyLog(`${req.method ?? "GET"} ${upstreamPath} \u2192 ${String(upstream.status)}`);
-        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 = join3(viewerPath, rawPath);
-      const resolvedPath = await fileExists(filePath) ? filePath : join3(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);
     })();
   };
 }
-var DevUI = ({ port, pluginDir, outputDir }) => {
-  const [status, setStatus] = useState2("starting");
-  const [errorMessage, setErrorMessage] = useState2(null);
-  const [serverLogHistory, setServerLogHistory] = useState2([]);
-  const [buildLogHistory, setBuildLogHistory] = useState2([]);
-  const [proxyLogHistory, setProxyLogHistory] = useState2([]);
-  const [buildStatus, setBuildStatus] = useState2("pending");
-  const [buildError, setBuildError] = useState2(null);
-  const [lastBuilt, setLastBuilt] = useState2(null);
-  const [wsClientCount, setWsClientCount] = useState2(0);
+var DevUI = ({
+  port,
+  pluginDir,
+  outputDir,
+  credentials: initialCredentials
+}) => {
+  const credentialsRef = useRef(initialCredentials);
+  const [credMode, setCredMode] = useState3("main");
+  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 buildingRef = useRef(false);
   const electronLaunchedRef = useRef(false);
   const debounceTimerRef = useRef(null);
   const wsClientsRef = useRef(/* @__PURE__ */ new Set());
   const pendingMessagesRef = useRef([]);
-  useInput((input, key) => {
-    if (input === "q" || key.ctrl && input === "c") {
-      process.exit(0);
-    }
-  });
-  useEffect2(() => {
+  useInput2(
+    (input, key) => {
+      if (input === "q" || key.ctrl && input === "c") {
+        process.exit(0);
+      }
+      if (input === "c") {
+        setCredMode("editing");
+      }
+      if (input === "d") {
+        broadcast({ type: "open-devtools" });
+      }
+    },
+    { isActive: credMode === "main" }
+  );
+  useEffect3(() => {
     if (status !== "running" || electronLaunchedRef.current) {
       return;
     }
@@ -323,27 +660,7 @@ var DevUI = ({ port, pluginDir, outputDir }) => {
     const _require = createRequire(import.meta.url);
     const electronBin = _require("electron");
     const electronMain = getElectronMainPath();
-    const userDataDir = join3(outputDir, ".electron");
-    if (process.platform === "darwin") {
-      try {
-        const plistPath = join3(dirname(dirname(electronBin)), "Info.plist");
-        const plist = readFileSync(plistPath, "utf-8");
-        if (!plist.includes(">Kizen Dev<")) {
-          if (statSync(plistPath).nlink > 1) {
-            unlinkSync(plistPath);
-            writeFileSync(plistPath, plist);
-          }
-          writeFileSync(
-            plistPath,
-            plist.replace(/(<key>CFBundleName<\/key>\s*<string>)[^<]*(<\/string>)/, "$1Kizen Dev$2").replace(
-              /(<key>CFBundleDisplayName<\/key>\s*<string>)[^<]*(<\/string>)/,
-              "$1Kizen Dev$2"
-            )
-          );
-        }
-      } catch {
-      }
-    }
+    const userDataDir = join6(outputDir, ".electron");
     const proc = spawn(
       electronBin,
       [electronMain, `--port=${String(port)}`, `--user-data-dir=${userDataDir}`],
@@ -356,12 +673,12 @@ var DevUI = ({ port, pluginDir, outputDir }) => {
       proc.kill();
     });
   }, [status, port, outputDir]);
-  const createServerLog = useCallback((message) => {
+  const createServerLog = useCallback2((message) => {
     setServerLogHistory(
       (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
     );
   }, []);
-  const broadcast = useCallback((msg) => {
+  const broadcast = useCallback2((msg) => {
     const json = JSON.stringify(msg);
     if (wsClientsRef.current.size === 0) {
       pendingMessagesRef.current = [...pendingMessagesRef.current, json].slice(-LOG_LIMIT);
@@ -373,7 +690,16 @@ var DevUI = ({ port, pluginDir, outputDir }) => {
       }
     }
   }, []);
-  const createProxyLog = useCallback(
+  const handleCredentialsDone = useCallback2(
+    (result) => {
+      credentialsRef.current = result.credentials;
+      setCredMode("main");
+      void saveConfig(outputDir, { credentialMode: result.mode });
+      broadcast({ type: "credentials-updated", credentials: result.credentials });
+    },
+    [outputDir, broadcast]
+  );
+  const createProxyLog = useCallback2(
     (message) => {
       setProxyLogHistory(
         (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
@@ -382,7 +708,7 @@ var DevUI = ({ port, pluginDir, outputDir }) => {
     },
     [broadcast]
   );
-  const createBuildLog = useCallback(
+  const createBuildLog = useCallback2(
     (message) => {
       setBuildLogHistory(
         (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
@@ -391,7 +717,7 @@ var DevUI = ({ port, pluginDir, outputDir }) => {
     },
     [broadcast]
   );
-  const triggerBuild = useCallback(() => {
+  const triggerBuild = useCallback2(() => {
     if (buildingRef.current) {
       return;
     }
@@ -417,7 +743,7 @@ var DevUI = ({ port, pluginDir, outputDir }) => {
       buildingRef.current = false;
     });
   }, [pluginDir, outputDir, createBuildLog]);
-  useEffect2(() => {
+  useEffect3(() => {
     triggerBuild();
     const watcher = watch(pluginDir, { recursive: true }, (_, filename) => {
       if (!filename) {
@@ -440,15 +766,20 @@ var DevUI = ({ port, pluginDir, outputDir }) => {
       }
     };
   }, [pluginDir, triggerBuild, createBuildLog]);
-  useEffect2(() => {
+  useEffect3(() => {
     const viewerPath = getViewerPath();
-    void fileExists(join3(viewerPath, "index.html")).then((viewerBuilt) => {
+    void fileExists(join6(viewerPath, "index.html")).then((viewerBuilt) => {
       if (!viewerBuilt) {
         setErrorMessage("Viewer not built. Run 'pnpm build:viewer' first.");
         setStatus("error");
         return;
       }
-      const handler = createRequestHandler(viewerPath, createServerLog, createProxyLog);
+      const handler = createRequestHandler(
+        viewerPath,
+        createServerLog,
+        createProxyLog,
+        credentialsRef
+      );
       const server = createServer(handler);
       const wss = new WebSocketServer({ server });
       wss.on("connection", (ws) => {
@@ -480,95 +811,173 @@ var DevUI = ({ port, pluginDir, outputDir }) => {
       };
     });
   }, [port, createServerLog, createProxyLog]);
+  if (credMode === "editing") {
+    return /* @__PURE__ */ jsx4(
+      CredentialSetupUI,
+      {
+        onComplete: handleCredentialsDone,
+        onCancel: () => {
+          setCredMode("main");
+        }
+      }
+    );
+  }
   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__ */ jsxs2(Box2, { flexDirection: "column", paddingY: 1, paddingX: 1, children: [
-    /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsx2(Box2, { gap: 1, children: /* @__PURE__ */ jsx2(Text2, { bold: true, color: "cyan", children: "Kizen App Builder" }) }) }),
-    /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs2(Box2, { gap: 1, marginBottom: 0, children: [
-        buildStatus === "pending" && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Build waiting..." }),
-        buildStatus === "building" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          /* @__PURE__ */ jsx2(Spinner2, {}),
-          /* @__PURE__ */ jsx2(Text2, { children: "Building Plugin Package..." })
+  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" })
         ] }),
-        buildStatus === "done" && /* @__PURE__ */ jsxs2(Text2, { color: "green", children: [
-          "\u2713 Built Plugin Package",
-          lastBuilt !== null ? ` at ${lastBuilt.toLocaleTimeString()}` : "",
-          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: elapsedLabel })
+        buildStatus === "done" && /* @__PURE__ */ jsxs3(Box4, { gap: 1, children: [
+          /* @__PURE__ */ jsx4(Text4, { color: "green", children: "\u2713 Built" }),
+          lastBuilt !== null && /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+            "at ",
+            lastBuilt.toLocaleTimeString(),
+            elapsedLabel
+          ] })
         ] }),
-        buildStatus === "error" && /* @__PURE__ */ jsxs2(Text2, { color: "red", children: [
-          "\u2717 Build error: ",
+        buildStatus === "error" && /* @__PURE__ */ jsxs3(Text4, { color: "red", children: [
+          "\u2717 ",
           buildError ?? "unknown error"
         ] })
       ] }),
-      /* @__PURE__ */ jsx2(
-        Box2,
+      /* @__PURE__ */ jsx4(
+        Box4,
         {
           flexDirection: "column",
           height: LOG_DISPLAY,
-          borderStyle: "round",
+          borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
-          children: buildLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx2(Text2, { dimColor: true, wrap: "truncate", children: log }, index))
+          children: buildLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx4(Text4, { dimColor: true, wrap: "truncate", children: log }, index))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
-        status === "starting" && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Starting server..." }),
-        status === "running" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          /* @__PURE__ */ jsx2(Text2, { color: "green", children: "\u2713 Dev Server running" }),
-          /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    /* @__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: [
             "\u25CF ",
             wsClientCount,
             " viewer",
             wsClientCount !== 1 ? "s" : ""
           ] })
         ] }),
-        status === "error" && /* @__PURE__ */ jsxs2(Text2, { color: "red", children: [
+        status === "error" && /* @__PURE__ */ jsxs3(Text4, { color: "red", children: [
           "\u2717 ",
           errorMessage ?? "Server error"
         ] })
       ] }),
-      /* @__PURE__ */ jsx2(
-        Box2,
+      /* @__PURE__ */ jsx4(
+        Box4,
         {
           flexDirection: "column",
           height: LOG_DISPLAY,
-          borderStyle: "round",
+          borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
-          children: serverLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx2(Text2, { dimColor: true, wrap: "truncate", children: log }, index))
+          children: serverLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx4(Text4, { dimColor: true, wrap: "truncate", children: log }, index))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Proxy" }),
-      /* @__PURE__ */ jsx2(
-        Box2,
+    /* @__PURE__ */ jsxs3(Box4, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
+        /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "Proxy" }),
+        /* @__PURE__ */ jsx4(Text4, { color: "green", children: "\u2713 Active" })
+      ] }),
+      /* @__PURE__ */ jsx4(
+        Box4,
         {
           flexDirection: "column",
           height: LOG_DISPLAY,
-          borderStyle: "round",
+          borderStyle: "single",
           borderColor: "gray",
           overflow: "hidden",
-          children: proxyLogHistory.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " No proxy requests yet." }) : proxyLogHistory.slice(-LOG_DISPLAY).map((log, i) => /* @__PURE__ */ jsx2(Text2, { dimColor: true, wrap: "truncate", children: log }, i))
+          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))
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "q to quit" }) })
+    /* @__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: "d" }),
+      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "] devtools" })
+    ] })
   ] });
 };
 
 // src/commands/dev.ts
+async function runSetupUI(initialMode) {
+  return new Promise((resolve) => {
+    let unmountFn = null;
+    const handleComplete = (result) => {
+      unmountFn?.();
+      resolve(result);
+    };
+    const { unmount } = render2(
+      createElement2(CredentialSetupUI, {
+        ...initialMode !== void 0 && { initialMode },
+        onComplete: handleComplete
+      }),
+      { exitOnCtrlC: false }
+    );
+    unmountFn = unmount;
+  });
+}
 function devCommand(program2) {
-  program2.command("dev").description("Start the plugin viewer dev server").option("-p, --port <port>", "port to listen on", "3121").action(async (options) => {
+  program2.command("dev").description("Start the plugin viewer dev server").option("-p, --port <port>", "port to listen on", "3121").option("-c, --credentials <path>", "path to a credentials JSON file").action(async (options) => {
     const port = parseInt(options.port, 10);
     const pluginDir = process.cwd();
     const outputDir = `${pluginDir}/.kizenapp`;
-    const { waitUntilExit } = render2(createElement2(DevUI, { port, pluginDir, outputDir }), {
-      exitOnCtrlC: false
-    });
+    ensureGitignore(pluginDir);
+    let credentials = null;
+    let credentialMode;
+    if (options.credentials) {
+      credentials = await loadCredentialsFromFile(options.credentials);
+    } else {
+      const config = await loadConfig(outputDir);
+      if (config.credentialMode === "local") {
+        credentialMode = "local";
+      } else if (config.credentialMode === "global") {
+        credentialMode = "global";
+        credentials = await loadGlobalCredentials();
+        if (!credentials) {
+          const result = await runSetupUI("global");
+          credentials = result.credentials;
+        }
+      } else {
+        const result = await runSetupUI();
+        credentials = result.credentials;
+        credentialMode = result.mode;
+        await saveConfig(outputDir, { credentialMode: result.mode });
+      }
+    }
+    const { waitUntilExit } = render2(
+      createElement2(DevUI, {
+        port,
+        pluginDir,
+        outputDir,
+        credentials,
+        ...credentialMode !== void 0 && { credentialMode }
+      }),
+      { exitOnCtrlC: false }
+    );
     await waitUntilExit();
   });
 }