@kizenapps/cli 0.1.0

package/dist/index.js

@@ -0,0 +1,687 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { program } from "commander";
+
+// src/commands/build.ts
+import { createElement } from "react";
+import { render } from "ink";
+
+// src/ui/BuildUI.tsx
+import { useEffect, useState } from "react";
+import { Box, Text, useApp } from "ink";
+
+// src/lib/runBuild.ts
+import { mkdir, writeFile } from "fs/promises";
+import { join as join2 } from "path";
+import { minifyFiles, packagePlugin, transformDeployablePlugin } from "@kizenapps/packager";
+
+// src/lib/readFiles.ts
+import { readdir, readFile } from "fs/promises";
+import { join, relative } from "path";
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([".png", ".svg"]);
+var BINARY_EXTENSIONS = /* @__PURE__ */ new Set([".kzn"]);
+var SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", ".git", ".kizenapp", ".github"]);
+async function walk(dir, rootDir) {
+  const entries = await readdir(dir, { withFileTypes: true });
+  const paths = [];
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      if (SKIP_DIRS.has(entry.name)) {
+        continue;
+      }
+      paths.push(...await walk(join(dir, entry.name), rootDir));
+    } else if (entry.isFile()) {
+      paths.push(join(dir, entry.name));
+    }
+  }
+  return paths;
+}
+async function readLocalFiles(rootDir) {
+  const absolutePaths = await walk(rootDir, rootDir);
+  return Promise.all(
+    absolutePaths.map(async (absPath) => {
+      const relPath = relative(rootDir, absPath).split("\\").join("/");
+      const dotIndex = relPath.lastIndexOf(".");
+      const ext = dotIndex >= 0 ? relPath.slice(dotIndex).toLowerCase() : "";
+      if (IMAGE_EXTENSIONS.has(ext)) {
+        const buf = await readFile(absPath);
+        return { path: relPath, content: "", base64Image: buf.toString("base64") };
+      }
+      if (BINARY_EXTENSIONS.has(ext)) {
+        const buf = await readFile(absPath);
+        return { path: relPath, content: "", binaryData: buf };
+      }
+      const content = await readFile(absPath, "utf-8");
+      return { path: relPath, content };
+    })
+  );
+}
+
+// src/lib/runBuild.ts
+var serializePlugin = (plugin) => ({
+  ...plugin,
+  thumbnail: plugin.thumbnail ? Buffer.from(plugin.thumbnail).toString("base64") : null,
+  kznFile: plugin.kznFile ? Buffer.from(plugin.kznFile).toString("base64") : null
+});
+async function runBuild(pluginDir, outputDir, onStep) {
+  await mkdir(outputDir, { recursive: true });
+  onStep?.("reading-files");
+  const files = await readLocalFiles(pluginDir);
+  onStep?.("minifying");
+  const minified = await minifyFiles(files);
+  onStep?.("packaging");
+  const manifestFile = minified.find((f) => f.path === "kizen.json");
+  if (!manifestFile) {
+    throw new Error("kizen.json not found in plugin directory.");
+  }
+  const manifests = JSON.parse(manifestFile.content);
+  const packaged = packagePlugin(minified, manifests);
+  const deployable = Object.values(packaged).map(transformDeployablePlugin);
+  onStep?.("writing-bundle");
+  const bundle = deployable.map(serializePlugin);
+  await writeFile(join2(outputDir, "bundle.json"), JSON.stringify(bundle, null, 2), "utf-8");
+}
+
+// src/ui/BuildUI.tsx
+import { Fragment, jsx, 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);
+  useEffect(() => {
+    const id = setInterval(() => {
+      setFrame((prev) => (prev + 1) % SPINNER_FRAMES.length);
+    }, 80);
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Text, { color: "cyan", children: SPINNER_FRAMES[frame] ?? "\u280B" });
+};
+var STEPS = [
+  "creating-dir",
+  "reading-files",
+  "minifying",
+  "packaging",
+  "writing-bundle"
+];
+var STEP_LABELS = {
+  "creating-dir": "Creating .kizenapp directory",
+  "reading-files": "Reading plugin files",
+  minifying: "Minifying scripts",
+  packaging: "Packaging plugin",
+  "writing-bundle": "Writing bundle.json"
+};
+var BuildUI = ({ outputDir, pluginDir }) => {
+  const { exit } = useApp();
+  const [step, setStep] = useState("creating-dir");
+  const [errorMessage, setErrorMessage] = useState(null);
+  useEffect(() => {
+    void runBuild(pluginDir, outputDir, setStep).then(() => {
+      setStep("done");
+      exit();
+    }).catch((err) => {
+      const message = err instanceof Error ? err.message : String(err);
+      setErrorMessage(message);
+      setStep("error");
+      exit(err instanceof Error ? err : new Error(message));
+    });
+  }, [outputDir, pluginDir, exit]);
+  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) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 1, 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: [
+          "\u2717 ",
+          STEP_LABELS[s]
+        ] }) : isStepDone ? /* @__PURE__ */ jsxs(Text, { 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 ",
+          STEP_LABELS[s]
+        ] }) }, s);
+      }),
+      errorMessage !== null && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "red", children: errorMessage }) })
+    ] })
+  ] });
+};
+
+// 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 { waitUntilExit } = render(createElement(BuildUI, { outputDir, pluginDir }));
+    await waitUntilExit();
+  });
+}
+
+// src/commands/dev.ts
+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 * as ChromeLauncher from "chrome-launcher";
+import { createReadStream, mkdirSync, watch } from "fs";
+import { access, readFile as readFile2 } from "fs/promises";
+import { createServer } from "http";
+import { dirname, extname, join as join3 } from "path";
+import { fileURLToPath } from "url";
+import { WebSocket, WebSocketServer } from "ws";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } 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] = useState2(0);
+  useEffect2(() => {
+    const id = setInterval(() => {
+      setFrame((prev) => (prev + 1) % SPINNER_FRAMES2.length);
+    }, 80);
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: SPINNER_FRAMES2[frame] ?? "\u280B" });
+};
+function getViewerPath() {
+  const filename = fileURLToPath(import.meta.url);
+  return join3(dirname(filename), "viewer");
+}
+function setupCspBypass(debugPort) {
+  void (async () => {
+    let wsUrl;
+    try {
+      const res = await fetch(`http://localhost:${String(debugPort)}/json/version`);
+      const data = await res.json();
+      wsUrl = data.webSocketDebuggerUrl;
+    } catch {
+      return;
+    }
+    const ws = new WebSocket(wsUrl);
+    let msgId = 0;
+    const pending = /* @__PURE__ */ new Map();
+    const send = (method, params, sessionId) => {
+      ws.send(
+        JSON.stringify({
+          id: ++msgId,
+          method,
+          ...params !== void 0 && { params },
+          ...sessionId !== void 0 && { sessionId }
+        })
+      );
+    };
+    const sendAndAwait = (method, params, sessionId) => {
+      const id = ++msgId;
+      return new Promise((resolve) => {
+        pending.set(id, resolve);
+        ws.send(
+          JSON.stringify({
+            id,
+            method,
+            ...params !== void 0 && { params },
+            ...sessionId !== void 0 && { sessionId }
+          })
+        );
+      });
+    };
+    const CSP_HEADERS = /* @__PURE__ */ new Set([
+      "content-security-policy",
+      "content-security-policy-report-only",
+      "x-frame-options"
+    ]);
+    const KIZEN_DOMAINS = ["kizen.dev", "kizen.com"];
+    let primarySession;
+    ws.on("open", () => {
+      send("Target.setAutoAttach", {
+        autoAttach: true,
+        waitForDebuggerOnStart: false,
+        flatten: true
+      });
+    });
+    ws.on("message", (data) => {
+      const msg = JSON.parse(data.toString());
+      if (msg.id !== void 0 && pending.has(msg.id)) {
+        pending.get(msg.id)?.(msg.result);
+        pending.delete(msg.id);
+        return;
+      }
+      if (msg.method === "Target.attachedToTarget" && msg.params?.sessionId) {
+        send(
+          "Fetch.enable",
+          { patterns: [{ requestStage: "Response", resourceType: "Document" }] },
+          msg.params.sessionId
+        );
+        send("Network.enable", {}, msg.params.sessionId);
+        primarySession ??= msg.params.sessionId;
+      }
+      if (msg.method === "Fetch.requestPaused" && msg.params?.requestId) {
+        const { requestId, responseHeaders, responseStatusCode = 200 } = msg.params;
+        const sessionId = msg.sessionId;
+        const hasCsp = responseHeaders?.some((h) => CSP_HEADERS.has(h.name.toLowerCase()));
+        if (!hasCsp) {
+          send("Fetch.continueResponse", { requestId }, sessionId);
+          return;
+        }
+        void (async () => {
+          try {
+            const { body, base64Encoded } = await sendAndAwait(
+              "Fetch.getResponseBody",
+              { requestId },
+              sessionId
+            );
+            const filteredHeaders = (responseHeaders ?? []).filter(
+              (h) => !CSP_HEADERS.has(h.name.toLowerCase())
+            );
+            const bodyBase64 = base64Encoded ? body : Buffer.from(body).toString("base64");
+            send(
+              "Fetch.fulfillRequest",
+              {
+                requestId,
+                responseCode: responseStatusCode,
+                responseHeaders: filteredHeaders,
+                body: bodyBase64
+              },
+              sessionId
+            );
+          } catch {
+            send("Fetch.continueResponse", { requestId }, sessionId);
+          }
+        })();
+      }
+    });
+    ws.on("error", () => {
+    });
+    setInterval(() => {
+      const session = primarySession;
+      if (!session) {
+        return;
+      }
+      void (async () => {
+        try {
+          const { cookies } = await sendAndAwait("Network.getAllCookies", void 0, session);
+          const toFix = cookies.filter(
+            (c) => KIZEN_DOMAINS.some((d) => c.domain === d || c.domain.endsWith("." + d)) && c.sameSite !== "None"
+          );
+          if (toFix.length === 0) {
+            return;
+          }
+          await sendAndAwait(
+            "Network.setCookies",
+            {
+              cookies: toFix.map(({ expires, ...rest }) => ({
+                ...rest,
+                sameSite: "None",
+                secure: true,
+                ...expires !== -1 && { expires }
+              }))
+            },
+            session
+          );
+        } catch {
+        }
+      })();
+    }, 2e3);
+  })();
+}
+async function fileExists(filePath) {
+  try {
+    await access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function createRequestHandler(viewerPath, createServerLog, createProxyLog) {
+  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 {
+          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 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);
+  const buildingRef = useRef(false);
+  const chromiumLaunchedRef = 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(() => {
+    if (status !== "running" || chromiumLaunchedRef.current) {
+      return;
+    }
+    chromiumLaunchedRef.current = true;
+    const chromeDataDir = join3(outputDir, ".chrome");
+    mkdirSync(chromeDataDir, { recursive: true });
+    void ChromeLauncher.launch({
+      startingUrl: "",
+      chromeFlags: [`--app=http://localhost:${String(port)}`],
+      userDataDir: chromeDataDir,
+      logLevel: "silent"
+    }).then((chrome) => {
+      chrome.process.unref();
+      setupCspBypass(chrome.port);
+      process.on("exit", () => {
+        chrome.process.kill();
+      });
+    }).catch(() => {
+    });
+  }, [status, port, outputDir]);
+  const createServerLog = useCallback((message) => {
+    setServerLogHistory(
+      (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
+    );
+  }, []);
+  const broadcast = useCallback((msg) => {
+    const json = JSON.stringify(msg);
+    if (wsClientsRef.current.size === 0) {
+      pendingMessagesRef.current = [...pendingMessagesRef.current, json].slice(-LOG_LIMIT);
+      return;
+    }
+    for (const client of wsClientsRef.current) {
+      if (client.readyState === 1) {
+        client.send(json);
+      }
+    }
+  }, []);
+  const createProxyLog = useCallback(
+    (message) => {
+      setProxyLogHistory(
+        (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
+      );
+      broadcast({ type: "proxy-log", message });
+    },
+    [broadcast]
+  );
+  const createBuildLog = useCallback(
+    (message) => {
+      setBuildLogHistory(
+        (h) => [...h, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`].slice(-LOG_LIMIT)
+      );
+      broadcast({ type: "log", message });
+    },
+    [broadcast]
+  );
+  const triggerBuild = useCallback(() => {
+    if (buildingRef.current) {
+      return;
+    }
+    buildingRef.current = true;
+    setBuildStatus("building");
+    setBuildError(null);
+    createBuildLog("Build started");
+    void runBuild(pluginDir, outputDir).then(() => {
+      createBuildLog("Build finished");
+      setBuildStatus("done");
+      setLastBuilt(/* @__PURE__ */ new Date());
+      createBuildLog("Notifying viewers to reload");
+      for (const client of wsClientsRef.current) {
+        if (client.readyState === 1) {
+          client.send(JSON.stringify({ type: "rebuild" }));
+        }
+      }
+    }).catch((err) => {
+      const message = err instanceof Error ? err.message : String(err);
+      setBuildError(message);
+      setBuildStatus("error");
+    }).finally(() => {
+      buildingRef.current = false;
+    });
+  }, [pluginDir, outputDir, createBuildLog]);
+  useEffect2(() => {
+    triggerBuild();
+    const watcher = watch(pluginDir, { recursive: true }, (_, filename) => {
+      if (!filename) {
+        return;
+      }
+      const normalized = filename.replace(/\\/g, "/");
+      if (SKIP_WATCH_PREFIXES.some((prefix) => normalized.startsWith(prefix))) {
+        return;
+      }
+      createBuildLog(`File change detected: ${filename}`);
+      if (debounceTimerRef.current !== null) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(triggerBuild, 150);
+    });
+    return () => {
+      watcher.close();
+      if (debounceTimerRef.current !== null) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [pluginDir, triggerBuild, createBuildLog]);
+  useEffect2(() => {
+    const viewerPath = getViewerPath();
+    void fileExists(join3(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 server = createServer(handler);
+      const wss = new WebSocketServer({ server });
+      wss.on("connection", (ws) => {
+        for (const json of pendingMessagesRef.current) {
+          if (ws.readyState === 1) {
+            ws.send(json);
+          }
+        }
+        pendingMessagesRef.current = [];
+        createServerLog("Viewer connected for live reload");
+        wsClientsRef.current.add(ws);
+        setWsClientCount(wsClientsRef.current.size);
+        ws.on("close", () => {
+          wsClientsRef.current.delete(ws);
+          setWsClientCount(wsClientsRef.current.size);
+        });
+      });
+      server.listen(port, () => {
+        setStatus("running");
+        createServerLog(`Server started on port ${String(port)}`);
+      });
+      server.on("error", (err) => {
+        setErrorMessage(err.message);
+        setStatus("error");
+      });
+      return () => {
+        wss.close();
+        server.close();
+      };
+    });
+  }, [port, createServerLog, createProxyLog]);
+  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..." })
+        ] }),
+        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 === "error" && /* @__PURE__ */ jsxs2(Text2, { color: "red", children: [
+          "\u2717 Build error: ",
+          buildError ?? "unknown error"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        Box2,
+        {
+          flexDirection: "column",
+          height: LOG_DISPLAY,
+          borderStyle: "round",
+          borderColor: "gray",
+          overflow: "hidden",
+          children: buildLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx2(Text2, { 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, { color: "cyan", bold: true, children: [
+            "http://localhost:",
+            port
+          ] }),
+          /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+            "\u25CF ",
+            wsClientCount,
+            " viewer",
+            wsClientCount !== 1 ? "s" : ""
+          ] })
+        ] }),
+        status === "error" && /* @__PURE__ */ jsxs2(Text2, { color: "red", children: [
+          "\u2717 ",
+          errorMessage ?? "Server error"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        Box2,
+        {
+          flexDirection: "column",
+          height: LOG_DISPLAY,
+          borderStyle: "round",
+          borderColor: "gray",
+          overflow: "hidden",
+          children: serverLogHistory.slice(-LOG_DISPLAY).map((log, index) => /* @__PURE__ */ jsx2(Text2, { 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,
+        {
+          flexDirection: "column",
+          height: LOG_DISPLAY,
+          borderStyle: "round",
+          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))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "q to quit" }) })
+  ] });
+};
+
+// src/commands/dev.ts
+function devCommand(program2) {
+  program2.command("dev").description("Start the plugin viewer dev server").option("-p, --port <port>", "port to listen on", "3000").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 });
+    await waitUntilExit();
+  });
+}
+
+// src/index.ts
+program.name("appbuilder").description("Kizen plugin app builder").version("0.1.0");
+buildCommand(program);
+devCommand(program);
+program.parse();
+//# sourceMappingURL=index.js.map