@kizenapps/cli 0.10.0 → 0.12.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,36 +88,66 @@ 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";
 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__ */ jsx2(Box2, { flexDirection: "column", marginTop: 1, marginBottom, children: /* @__PURE__ */ jsx2(Text2, { bold: true, color: "cyan", children: "Kizen App Development Toolkit" }) })
+] });
+
+// 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 +159,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 +180,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 +198,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 }) })
     ] })
   ] });
 };
@@ -222,27 +257,785 @@ function buildCommand(program2) {
   });
 }
 
-// src/commands/dev.ts
-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 { createServer } from "http";
-import { dirname as dirname3, extname, join as join7 } from "path";
-import { fileURLToPath as fileURLToPath2 } from "url";
-import { WebSocketServer } from "ws";
-
+// src/commands/dev.ts
+import { createElement as createElement2 } from "react";
+import { render as render2 } from "ink";
+
+// src/ui/DevUI.tsx
+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 { join as join9 } from "path";
+import { WebSocketServer } from "ws";
+
+// src/server/requestHandler.ts
+import { createReadStream } from "fs";
+import { access as access2, readFile as readFile4 } from "fs/promises";
+import { dirname as dirname2, extname, join as join7 } 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/pythonExecutor.ts
+import { spawn, execFileSync } from "child_process";
+import { writeFile as writeFile4, rm, mkdtemp, access } from "fs/promises";
+import { join as join6 } from "path";
+import { tmpdir } from "os";
+var WRAPPER_SCRIPT = `
+import sys, json, os, traceback
+
+# --- Inputs proxy (attribute access) ---
+class _InputsProxy:
+    def __init__(self, data):
+        object.__setattr__(self, '_data', data)
+
+    def __getattr__(self, name):
+        if name.startswith('_'):
+            raise AttributeError(name)
+        return self._data.get(name)
+
+    def __repr__(self):
+        return repr(self._data)
+
+    def __str__(self):
+        return str(self._data)
+
+    def __bool__(self):
+        return bool(self._data)
+
+inputs = _InputsProxy(json.loads(os.environ.get('__KIZEN_INPUTS__', '{}')))
+
+# --- Secrets ---
+secrets = json.loads(os.environ.get('__KIZEN_SECRETS__', '{}'))
+
+# --- Outputs proxy ---
+class _OutputsProxy:
+    def __init__(self):
+        object.__setattr__(self, '_values', {})
+        object.__setattr__(self, '_logs', [])
+
+    def __setattr__(self, name, value):
+        if name.startswith('_'):
+            object.__setattr__(self, name, value)
+        else:
+            self._values[name] = value
+
+    def __getattr__(self, name):
+        if name.startswith('_'):
+            raise AttributeError(name)
+        return self._values.get(name)
+
+    def log(self, message):
+        self._logs.append(str(message))
+
+outputs = _OutputsProxy()
+
+# --- Execute user script ---
+try:
+    exec(open(os.environ['__KIZEN_SCRIPT_PATH__'], encoding='utf-8').read())
+    result = {
+        'success': True,
+        'outputValues': outputs._values,
+        'logs': outputs._logs,
+        'error': None,
+    }
+except Exception:
+    # Build a clean traceback that hides the wrapper internals.
+    # Keep only frames from the user script (shown as File "<string>")
+    # and re-label them with "script.py" for clarity.
+    exc_type, exc_value, exc_tb = sys.exc_info()
+    entries = traceback.extract_tb(exc_tb)
+    user_entries = [e for e in entries if e.filename != __file__]
+    for e in user_entries:
+        if e.filename == '<string>':
+            e.filename = 'script.py'
+    lines = ['Traceback (most recent call last):\\n']
+    lines += traceback.format_list(user_entries)
+    lines += traceback.format_exception_only(exc_type, exc_value)
+    result = {
+        'success': False,
+        'outputValues': outputs._values,
+        'logs': outputs._logs,
+        'error': ''.join(lines),
+    }
+
+# Write results between markers so we can extract them reliably
+# even if the user script wrote to stdout
+sys.stdout.write('\\n__KIZEN_RESULT_START__\\n')
+sys.stdout.write(json.dumps(result, ensure_ascii=False))
+sys.stdout.write('\\n__KIZEN_RESULT_END__\\n')
+sys.stdout.flush()
+`.trim();
+var DEFAULT_TIMEOUT = 3e4;
+var VENV_DIR = join6(process.cwd(), ".kizenapp", "venv");
+var VENV_PACKAGES = ["requests"];
+var venvReady = null;
+function resolvePythonBinary(runtime) {
+  const match = /^python-(\d+\.\d+)$/.exec(runtime);
+  if (match?.[1]) {
+    return `python${match[1]}`;
+  }
+  return "python3";
+}
+function ensureVenv(runtime) {
+  if (!venvReady) {
+    venvReady = (async () => {
+      const venvPython = join6(VENV_DIR, "bin", "python");
+      try {
+        await access(venvPython);
+      } catch {
+        const systemPython = resolvePythonBinary(runtime);
+        execFileSync(systemPython, ["-m", "venv", VENV_DIR], { stdio: "ignore" });
+      }
+      execFileSync(venvPython, ["-m", "pip", "install", "-q", ...VENV_PACKAGES], {
+        stdio: "ignore"
+      });
+      return venvPython;
+    })();
+  }
+  return venvReady;
+}
+function parseResult(stdout) {
+  const startMarker = "__KIZEN_RESULT_START__";
+  const endMarker = "__KIZEN_RESULT_END__";
+  const startIdx = stdout.indexOf(startMarker);
+  const endIdx = stdout.indexOf(endMarker);
+  if (startIdx === -1 || endIdx === -1) {
+    return { userStdout: stdout, result: null };
+  }
+  const userStdout = stdout.slice(0, startIdx).trimEnd();
+  const jsonStr = stdout.slice(startIdx + startMarker.length, endIdx).trim();
+  try {
+    const result = JSON.parse(jsonStr);
+    return { userStdout, result };
+  } catch {
+    return { userStdout: stdout, result: null };
+  }
+}
+async function executePythonStep(params) {
+  const timeout = params.timeout ?? DEFAULT_TIMEOUT;
+  const pythonBin = await ensureVenv(params.scriptRuntime);
+  const start = Date.now();
+  let tmpDir;
+  try {
+    tmpDir = await mkdtemp(join6(tmpdir(), "kizen-step-"));
+    const wrapperPath = join6(tmpDir, "wrapper.py");
+    const scriptPath = join6(tmpDir, "script.py");
+    await Promise.all([
+      writeFile4(wrapperPath, WRAPPER_SCRIPT, "utf-8"),
+      writeFile4(scriptPath, params.script, "utf-8")
+    ]);
+    const env = {
+      ...process.env,
+      __KIZEN_INPUTS__: JSON.stringify(params.inputs),
+      __KIZEN_SECRETS__: JSON.stringify(params.secrets),
+      __KIZEN_SCRIPT_PATH__: scriptPath
+    };
+    const { exitCode, stdout, stderr } = await new Promise((resolve) => {
+      const stdoutChunks = [];
+      const stderrChunks = [];
+      let settled = false;
+      const proc = spawn(pythonBin, [wrapperPath], {
+        env,
+        cwd: tmpDir,
+        stdio: ["ignore", "pipe", "pipe"]
+      });
+      const timer = setTimeout(() => {
+        proc.kill("SIGKILL");
+      }, timeout);
+      proc.stdout.on("data", (chunk) => {
+        stdoutChunks.push(chunk);
+      });
+      proc.stderr.on("data", (chunk) => {
+        stderrChunks.push(chunk);
+      });
+      const finish = (code) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        clearTimeout(timer);
+        resolve({
+          exitCode: code ?? 1,
+          stdout: Buffer.concat(stdoutChunks).toString("utf-8"),
+          stderr: Buffer.concat(stderrChunks).toString("utf-8")
+        });
+      };
+      proc.on("close", finish);
+      proc.on("error", (err) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        clearTimeout(timer);
+        resolve({
+          exitCode: 1,
+          stdout: "",
+          stderr: err.message
+        });
+      });
+    });
+    const durationMs = Date.now() - start;
+    const { userStdout, result } = parseResult(stdout);
+    if (result) {
+      const base2 = {
+        success: result.success,
+        outputValues: result.outputValues,
+        logs: result.logs,
+        stdout: userStdout,
+        stderr,
+        exitCode,
+        durationMs
+      };
+      if (result.error !== null) {
+        base2.error = result.error;
+      }
+      return base2;
+    }
+    const base = {
+      success: false,
+      outputValues: {},
+      logs: [],
+      stdout: userStdout,
+      stderr,
+      exitCode,
+      durationMs
+    };
+    if (exitCode !== 0) {
+      base.error = `Process exited with code ${String(exitCode)}`;
+    }
+    return base;
+  } finally {
+    if (tmpDir) {
+      void rm(tmpDir, { recursive: true, force: true });
+    }
+  }
+}
+
+// src/server/remoteCodeRunner.ts
+var BASE_URLS = {
+  go: "https://app.go.kizen.com/api",
+  fmo: "https://app.fmo.kizen.com/api",
+  staging: "https://staging.kizen.dev/api",
+  integration: "https://integration.kizen.dev/api",
+  test1: "https://test1.kizen.dev/api"
+};
+var SUPPORTED_RUNTIMES = ["python-3-13", "python-3-12"];
+var DEFAULT_RUNTIME = "python-3-12";
+var DATA_TYPE_TO_KIZEN = {
+  text: "s",
+  string: "s",
+  number: "n",
+  integer: "n",
+  boolean: "b",
+  date: "d",
+  datetime: "dt",
+  phone: "p",
+  phonenumber: "p",
+  uuid: "u",
+  file: "f",
+  list: "l"
+};
+function toKizenType(dataType) {
+  return DATA_TYPE_TO_KIZEN[dataType.toLowerCase()] ?? "s";
+}
+function resolveRuntime(runtime) {
+  if (SUPPORTED_RUNTIMES.includes(runtime)) {
+    return runtime;
+  }
+  return DEFAULT_RUNTIME;
+}
+function encodeInputs(inputs, inputTypes) {
+  const keys = Object.keys(inputs);
+  if (keys.length === 0) {
+    return null;
+  }
+  const encoded = {};
+  for (const key of keys) {
+    encoded[key] = {
+      t: toKizenType(inputTypes[key] ?? "string"),
+      v: inputs[key]
+    };
+  }
+  return encoded;
+}
+function encodeOutputTypes(outputTypes) {
+  const keys = Object.keys(outputTypes);
+  if (keys.length === 0) {
+    return null;
+  }
+  const encoded = {};
+  for (const key of keys) {
+    encoded[key] = toKizenType(outputTypes[key] ?? "string");
+  }
+  return encoded;
+}
+function decodeOutputValues(values) {
+  if (!values) {
+    return {};
+  }
+  const decoded = {};
+  for (const [key, encoded] of Object.entries(values)) {
+    decoded[key] = encoded.v;
+  }
+  return decoded;
+}
+async function executeRemoteStep(params, credentials) {
+  const baseUrl = BASE_URLS[credentials.environment];
+  const url = `${baseUrl}/coderunner/run`;
+  const start = Date.now();
+  const body = {
+    user_script: params.script,
+    runtime: resolveRuntime(params.scriptRuntime),
+    secrets: params.secretNames.length > 0 ? params.secretNames : void 0,
+    inputs: encodeInputs(params.inputs, params.inputTypes),
+    output_types: encodeOutputTypes(params.outputTypes)
+  };
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": credentials.apiKey,
+        "X-USER-ID": credentials.userId,
+        "X-BUSINESS-ID": credentials.businessId
+      },
+      body: JSON.stringify(body)
+    });
+    const durationMs = Date.now() - start;
+    if (!response.ok) {
+      const text = await response.text();
+      return {
+        success: false,
+        outputValues: {},
+        logs: [],
+        stdout: "",
+        stderr: "",
+        error: `Remote runner returned ${String(response.status)}: ${text}`,
+        exitCode: 1,
+        durationMs
+      };
+    }
+    const data = await response.json();
+    const hasError = data.error !== null;
+    const result = {
+      success: !hasError,
+      outputValues: decodeOutputValues(data.values),
+      logs: data.logs ?? [],
+      stdout: "",
+      stderr: "",
+      exitCode: hasError ? 1 : 0,
+      durationMs: data.duration_ms ?? durationMs
+    };
+    if (hasError && data.error) {
+      result.error = data.error.detail ? `${data.error.error}
+${data.error.detail}` : data.error.error;
+    }
+    return result;
+  } catch (err) {
+    return {
+      success: false,
+      outputValues: {},
+      logs: [],
+      stdout: "",
+      stderr: "",
+      error: `Remote execution failed: ${err instanceof Error ? err.message : String(err)}`,
+      exitCode: 1,
+      durationMs: Date.now() - start
+    };
+  }
+}
+
+// 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 join7(dirname2(filename), "viewer");
+}
+async function fileExists(filePath) {
+  try {
+    await access2(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function createRequestHandler(viewerPath, createServerLog, createProxyLog, credentialsRef, activeProfileRef, outputDir, broadcast, onProxyCacheChange, lastPathRef) {
+  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 = join7(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/last-path" && req.method === "POST") {
+          const chunks = [];
+          for await (const chunk of req) {
+            chunks.push(chunk);
+          }
+          const body = JSON.parse(Buffer.concat(chunks).toString("utf-8") || "{}");
+          if (typeof body.path === "string") {
+            lastPathRef.current = body.path;
+            const currentConfig = await loadConfig(outputDir);
+            await saveConfig(outputDir, { ...currentConfig, lastPath: body.path });
+          }
+          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+          res.end('{"ok":true}');
+          return;
+        }
+        if (url === "/api/execute-step" && req.method === "POST") {
+          const chunks = [];
+          for await (const chunk of req) {
+            chunks.push(chunk);
+          }
+          const body = JSON.parse(Buffer.concat(chunks).toString("utf-8") || "{}");
+          if (typeof body.script !== "string") {
+            res.writeHead(400, { "Content-Type": "application/json; charset=utf-8" });
+            res.end(JSON.stringify({ error: "Missing required field: script" }));
+            return;
+          }
+          let result;
+          if (body.mode === "remote") {
+            if (!credentialsRef.current) {
+              res.writeHead(400, { "Content-Type": "application/json; charset=utf-8" });
+              res.end(JSON.stringify({ error: "Credentials are required for remote execution" }));
+              return;
+            }
+            result = await executeRemoteStep(
+              {
+                script: body.script,
+                scriptRuntime: body.scriptRuntime ?? "python-3-12",
+                inputs: body.inputs ?? {},
+                inputTypes: body.inputTypes ?? {},
+                outputTypes: body.outputTypes ?? {},
+                secretNames: body.secretNames ?? []
+              },
+              credentialsRef.current
+            );
+          } else {
+            const stepParams = {
+              script: body.script,
+              scriptRuntime: body.scriptRuntime ?? "python-3.9",
+              inputs: body.inputs ?? {},
+              secrets: body.secrets ?? {}
+            };
+            if (typeof body.timeout === "number") {
+              stepParams.timeout = body.timeout;
+            }
+            result = await executePythonStep(stepParams);
+          }
+          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+          res.end(JSON.stringify(result));
+          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");
+        }
+      }
+    })();
+  };
+}
+
 // 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 join8 } 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",
@@ -320,18 +1113,19 @@ 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 = join8(dirname3(fileURLToPath2(import.meta.url)), "viewer", "icon.png");
+    const icon = await readFile5(iconPath);
     await client.Browser.setDockTile({ image: icon.toString("base64") });
   } catch {
   }
 }
 async function launchChromeViewer(opts) {
   mkdirSync(opts.userDataDir, { recursive: true });
+  const baseUrl = `http://localhost:${String(opts.port)}`;
   const chrome = await launch({
-    startingUrl: `http://localhost:${String(opts.port)}`,
+    startingUrl: baseUrl,
     chromeFlags: [
-      `--app=http://localhost:${String(opts.port)}`,
+      `--app=${baseUrl}`,
       "--no-first-run",
       "--no-default-browser-check",
       "--disable-extensions"
@@ -347,6 +1141,9 @@ async function launchChromeViewer(opts) {
     await new Promise((r) => setTimeout(r, 300));
     try {
       client = await CDP({ port: cdpPort });
+      if (opts.path) {
+        void client.send("Page.navigate", { url: `${baseUrl}${opts.path}` });
+      }
       break;
     } catch {
       if (attempt === 9) {
@@ -465,188 +1262,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 = () => {
-    clearInterval(cookieTimer);
-    try {
-      void c.close();
-    } catch {
-    }
-    chrome.kill();
-  };
-  return { kill };
-}
-
-// 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/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 });
@@ -656,7 +1328,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();
@@ -669,7 +1341,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 = {
@@ -810,16 +1482,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();
@@ -828,14 +1500,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;
@@ -845,49 +1517,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" },
@@ -896,77 +1560,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
     ] })
@@ -974,235 +1630,44 @@ 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, 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 = 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,
   outputDir,
   credentials: initialCredentials,
   credentialMode: initialCredentialMode,
-  activeCredentialProfile: initialActiveProfile
+  activeCredentialProfile: initialActiveProfile,
+  lastPath: initialLastPath
 }) => {
   const credentialsRef = useRef(initialCredentials);
   const activeProfileRef = useRef(initialActiveProfile);
-  const [credMode, setCredMode] = useState3("main");
-  const [credentialMode, setCredentialMode] = useState3(
+  const lastPathRef = useRef(initialLastPath);
+  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 [proxyCacheSize, setProxyCacheSize] = useState3(0);
-  const [proxyCacheHits, setProxyCacheHits] = useState3(0);
-  const [proxyCacheMisses, setProxyCacheMisses] = 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);
@@ -1214,18 +1679,15 @@ 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"),
-      broadcast
+      userDataDir: join9(outputDir, ".chrome"),
+      broadcast,
+      ...lastPathRef.current !== void 0 && { path: lastPathRef.current }
     }).then((handle) => {
       chromeHandleRef.current = handle;
       process.on("exit", () => {
@@ -1247,14 +1709,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;
@@ -1269,7 +1731,7 @@ var DevUI = ({
     },
     [outputDir, broadcast]
   );
-  const createProxyLog = useCallback2(
+  const createProxyLog = useCallback3(
     (entry) => {
       setProxyLogHistory(
         (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${proxyLogEntryToString(entry)}`].slice(
@@ -1287,16 +1749,14 @@ var DevUI = ({
     },
     [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;
     }
@@ -1304,10 +1764,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) {
@@ -1322,7 +1783,7 @@ var DevUI = ({
       buildingRef.current = false;
     });
   }, [pluginDir, outputDir, createBuildLog]);
-  useEffect3(() => {
+  useEffect4(() => {
     triggerBuild();
     const watcher = watch(pluginDir, { recursive: true }, (_, filename) => {
       if (!filename) {
@@ -1336,7 +1797,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();
@@ -1345,9 +1806,9 @@ var DevUI = ({
       }
     };
   }, [pluginDir, triggerBuild, createBuildLog]);
-  useEffect3(() => {
+  useEffect4(() => {
     const viewerPath = getViewerPath();
-    void fileExists(join7(viewerPath, "index.html")).then((viewerBuilt) => {
+    void fileExists(join9(viewerPath, "index.html")).then((viewerBuilt) => {
       if (!viewerBuilt) {
         setErrorMessage("Viewer not built. Run 'pnpm build:viewer' first.");
         setStatus("error");
@@ -1361,7 +1822,8 @@ var DevUI = ({
         activeProfileRef,
         outputDir,
         broadcast,
-        setProxyCacheSize
+        setProxyCacheSize,
+        lastPathRef
       );
       const server = createServer(handler);
       const wss = new WebSocketServer({ server });
@@ -1395,7 +1857,7 @@ var DevUI = ({
     });
   }, [port, createServerLog, createProxyLog, broadcast, outputDir]);
   if (credMode === "editing") {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx6(
       CredentialSetupUI,
       {
         ...credentialMode !== void 0 && { initialMode: credentialMode },
@@ -1409,80 +1871,80 @@ 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: "App 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 + 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: "Web Server" }),
-        status === "starting" && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "starting\u2026" }),
-        status === "running" && /* @__PURE__ */ jsxs3(Box4, { gap: 2, children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "green", children: "\u2713 Running" }),
-          /* @__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 + 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: "Network Proxy" }),
-        /* @__PURE__ */ jsx4(Text4, { color: "green", children: "\u2713 Active" }),
-        /* @__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: "Network Proxy" }),
+        /* @__PURE__ */ jsx6(Text6, { color: "green", children: "\u2713 Active" }),
+        /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
           "\u25CF ",
           proxyCacheSize,
           " key",
@@ -1495,26 +1957,26 @@ var DevUI = ({
           " miss"
         ] })
       ] }),
-      /* @__PURE__ */ jsx4(
-        Box4,
+      /* @__PURE__ */ jsx6(
+        Box5,
         {
           flexDirection: "column",
           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"
       ] })
@@ -1549,6 +2011,7 @@ function devCommand(program2) {
     let credentials = null;
     let credentialMode;
     let activeCredentialProfile;
+    const { lastPath } = await loadConfig(outputDir);
     if (options.credentials) {
       credentials = await loadCredentialsFromFile(options.credentials);
     } else {
@@ -1591,7 +2054,8 @@ function devCommand(program2) {
         outputDir,
         credentials,
         ...credentialMode !== void 0 && { credentialMode },
-        ...activeCredentialProfile !== void 0 && { activeCredentialProfile }
+        ...activeCredentialProfile !== void 0 && { activeCredentialProfile },
+        ...lastPath !== void 0 && { lastPath }
       }),
       { exitOnCtrlC: false }
     );