@akanjs/cli 0.9.20 → 0.9.22

package/esm/index.js

@@ -3523,115 +3523,35 @@ var LibraryScript = class {
   }
 };
 
-// pkgs/@akanjs/cli/src/application/application.runner.ts
-import { confirm as confirm2, input as input4, select as select5 } from "@inquirer/prompts";
-import { StringOutputParser } from "@langchain/core/output_parsers";
-import { PromptTemplate as PromptTemplate2 } from "@langchain/core/prompts";
-import { RunnableSequence as RunnableSequence2 } from "@langchain/core/runnables";
-import { ChatOpenAI as ChatOpenAI3 } from "@langchain/openai";
-import react from "@vitejs/plugin-react";
-import dotenv3 from "dotenv";
-import * as esbuild2 from "esbuild";
-import fs14 from "fs";
-import fsPromise3 from "fs/promises";
-import yaml2 from "js-yaml";
-import openBrowser from "open";
-import ora3 from "ora";
-import path7 from "path";
-import * as vite from "vite";
-import commonjs from "vite-plugin-commonjs";
-import { nodePolyfills } from "vite-plugin-node-polyfills";
-import tsconfigPaths from "vite-tsconfig-paths";
-
-// pkgs/@akanjs/cli/src/application/appilcation.interface.tsx
-import { Box as Box3, render, Text as Text3 } from "ink";
-import React3, { useEffect as useEffect4, useState as useState4 } from "react";
+// pkgs/@akanjs/cli/src/application/application.interface.tsx
+import { Box as Box2, render, Text as Text2, useApp } from "ink";
+import React2, { useEffect as useEffect3, useState as useState3 } from "react";
 
-// pkgs/@akanjs/cli/ui/ScrollList.tsx
+// pkgs/@akanjs/cli/ui/MultiScrollList.tsx
 import { Box, Newline, Text, useInput } from "ink";
 import React, { useEffect as useEffect2, useState as useState2 } from "react";
-var ScrollList = ({ list, ...props }) => {
-  const [renderLogs, setRenderLogs] = useState2(list);
+var HEADER_HEIGHT = 1;
+var FOOTER_HEIGHT = 5;
+var BORDER_HEIGHT = 2;
+var MultiScrollList = ({ logList, maxLength = 100 }) => {
   const [width, height] = useStdoutDimensions();
+  const [focusLog, setFocusLog] = useState2([]);
+  const [lengthMap, setLengthMap] = useState2(/* @__PURE__ */ new Map());
   const [scrollPos, setScrollPos] = useState2(0);
+  const [tabIndex, setTabIndex] = useState2(0);
   const [isRunning, setIsRunning] = useState2(false);
-  const [boxHeight, setBoxHeight] = useState2(height - 3);
+  const [boxHeight, setBoxHeight] = useState2(height - HEADER_HEIGHT - FOOTER_HEIGHT - BORDER_HEIGHT);
+  const getLimitedLogs = (logs) => {
+    return logs.length > maxLength ? logs.slice(logs.length - maxLength) : logs;
+  };
   useInput((input6, key) => {
-    if (key.escape) {
-      setIsRunning(false);
+    if (key.tab) {
+      setTabIndex((prev) => (prev + 1) % logList.length);
       setScrollPos(0);
-    }
-    if (input6 === " " && isRunning) {
       setIsRunning(false);
-      setScrollPos(0);
-    }
-    if (key.downArrow && scrollPos > 0) {
-      if (key.shift) {
-        setScrollPos(scrollPos - 10);
-      } else {
-        setScrollPos(scrollPos - 1);
-      }
-    }
-    if (key.upArrow && scrollPos < list.length - boxHeight) {
-      if (key.shift) {
-        setScrollPos(scrollPos + 10);
-      } else {
-        setScrollPos(scrollPos + 1);
-      }
-    }
-  });
-  useEffect2(() => {
-    if (isRunning) {
-      setScrollPos(scrollPos + 1);
-      return;
-    }
-    if (list.length > boxHeight) {
-      setRenderLogs(list.slice(list.length - boxHeight, list.length));
-    } else {
-      setRenderLogs(list);
-    }
-  }, [list, isRunning]);
-  useEffect2(() => {
-    setBoxHeight(Math.floor(height * 0.9));
-  }, [height]);
-  useEffect2(() => {
-    if (scrollPos > 0) {
-      setRenderLogs(list.slice(list.length - boxHeight - scrollPos, list.length - scrollPos));
-      setIsRunning(true);
-    } else {
-      setRenderLogs(list.slice(list.length - boxHeight, list.length));
-      setIsRunning(false);
-    }
-  }, [scrollPos]);
-  return /* @__PURE__ */ React.createElement(Box, { ...props, width, height: "100%", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { borderStyle: "round", width, height: height - 3 }, /* @__PURE__ */ React.createElement(Newline, null), /* @__PURE__ */ React.createElement(Text, null, isRunning ? /* @__PURE__ */ React.createElement(React.Fragment, null, renderLogs.slice(0, renderLogs.length - 1).map((log, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { key: index }, log), /* @__PURE__ */ React.createElement(Newline, null))), /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "scrolling... + ", scrollPos)) : /* @__PURE__ */ React.createElement(React.Fragment, null, renderLogs.map((log, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { key: index }, log), /* @__PURE__ */ React.createElement(Newline, null)))))), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "You can use the following shortcuts:", /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "up"), " and ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "down"), " to scroll.", " ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "shift"), " to scroll faster.", /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "escape"), " to stop scrolling.")));
-};
-
-// pkgs/@akanjs/cli/ui/MultiScrollList.tsx
-import { Box as Box2, Newline as Newline2, Text as Text2, useInput as useInput2 } from "ink";
-import React2, { useEffect as useEffect3, useState as useState3 } from "react";
-var MultiScrollList = ({ logList }) => {
-  const [width, height] = useStdoutDimensions();
-  const [renderMultiLogs, setRenderMultiLogs] = useState3(
-    Array.from({ length: logList.length }, () => [])
-  );
-  const [lengthMap, setLengthMap] = useState3(/* @__PURE__ */ new Map());
-  const [scrollPos, setScrollPos] = useState3(0);
-  const [tabIndex, setTabIndex] = useState3(null);
-  const [isRunning, setIsRunning] = useState3(false);
-  const [boxHeight, setBoxHeight] = useState3(height - 7);
-  useInput2((input6, key) => {
-    if (key.tab) {
-      if (tabIndex === null) {
-        setTabIndex(0);
-      } else {
-        setTabIndex((prev) => (prev + 1) % logList.length);
-        setIsRunning(false);
-      }
     }
     if (key.escape) {
       setScrollPos(0);
-      if (tabIndex !== null)
-        setTabIndex(null);
       setIsRunning(false);
     }
     if (input6 === " ") {
@@ -3651,230 +3571,277 @@ var MultiScrollList = ({ logList }) => {
         setScrollPos(newScrollPos);
       }
     }
-    if (key.upArrow && tabIndex !== null && scrollPos < logList[tabIndex].logs.length - boxHeight) {
-      if (key.shift) {
-        const newScrollPos = scrollPos + 10;
-        if (newScrollPos > logList[tabIndex].logs.length - boxHeight) {
-          setScrollPos(logList[tabIndex].logs.length - boxHeight);
+    if (key.upArrow && scrollPos < logList[tabIndex].logs.length - boxHeight) {
+      const limitedLogs = getLimitedLogs(logList[tabIndex].logs);
+      if (scrollPos < limitedLogs.length - boxHeight) {
+        if (key.shift) {
+          const newScrollPos = scrollPos + 10;
+          if (newScrollPos > limitedLogs.length - boxHeight) {
+            setScrollPos(limitedLogs.length - boxHeight);
+          } else {
+            setScrollPos(newScrollPos);
+          }
         } else {
-          setScrollPos(newScrollPos);
+          setScrollPos(scrollPos + 1);
         }
-      } else {
-        setScrollPos(scrollPos + 1);
+        if (!isRunning)
+          setIsRunning(true);
       }
-      if (!isRunning)
-        setIsRunning(true);
     }
   });
-  useEffect3(() => {
+  useEffect2(() => {
     const getLogsToRender = (logs, index) => {
+      const limitedLogs = getLimitedLogs(logs);
       if (scrollPos > 0 && tabIndex === index) {
-        return logs.slice(logs.length - boxHeight - scrollPos, logs.length - scrollPos);
-      } else if (logs.length > boxHeight) {
-        return logs.slice(logs.length - boxHeight, logs.length);
+        return limitedLogs.slice(limitedLogs.length - boxHeight - scrollPos, limitedLogs.length - scrollPos);
+      } else if (limitedLogs.length > boxHeight) {
+        return limitedLogs.slice(limitedLogs.length - boxHeight, limitedLogs.length);
       } else {
-        return logs;
+        return limitedLogs;
       }
     };
     if (isRunning) {
-      if (tabIndex !== null && lengthMap.has(tabIndex)) {
+      if (lengthMap.has(tabIndex)) {
         const tabLength = lengthMap.get(tabIndex);
-        if (tabLength && tabLength < logList[tabIndex].logs.length) {
+        const limitedLogsLength = Math.min(logList[tabIndex].logs.length, maxLength);
+        if (tabLength && tabLength < limitedLogsLength) {
           setScrollPos(scrollPos + 1);
-          lengthMap.set(tabIndex, logList[tabIndex].logs.length);
+          lengthMap.set(tabIndex, limitedLogsLength);
         }
       }
-      setRenderMultiLogs((prev) => {
-        const newState = [...prev];
-        logList.forEach((logData, index) => {
-          newState[index] = getLogsToRender(logData.logs, index);
-        });
-        return newState;
-      });
+      setFocusLog(getLogsToRender(logList[tabIndex].logs, tabIndex));
     } else {
-      setRenderMultiLogs((prev) => {
-        const newState = [...prev];
-        logList.forEach((logData, index) => {
-          lengthMap.set(index, logData.logs.length);
-          newState[index] = getLogsToRender(logData.logs, index);
-        });
-        return newState;
-      });
+      setFocusLog(getLogsToRender(logList[tabIndex].logs, tabIndex));
     }
-  }, [logList, isRunning, scrollPos, tabIndex, boxHeight]);
-  useEffect3(() => {
-    setBoxHeight(height - 7);
+  }, [logList, isRunning, scrollPos, tabIndex, boxHeight, maxLength]);
+  useEffect2(() => {
+    setBoxHeight(height - HEADER_HEIGHT - FOOTER_HEIGHT - BORDER_HEIGHT);
   }, [height]);
-  useEffect3(() => {
-    setLengthMap(new Map(logList.map((log, index) => [index, log.logs.length])));
-  }, []);
-  return /* @__PURE__ */ React2.createElement(Box2, { width, height, flexDirection: "column" }, /* @__PURE__ */ React2.createElement(Box2, { width, height: "100%" }, renderMultiLogs.map((logData, index) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Box2, { width, height: "100%", flexDirection: "column", key: index }, /* @__PURE__ */ React2.createElement(Box2, null, /* @__PURE__ */ React2.createElement(Text2, { color: logList[index].color }, logList[index].title)), /* @__PURE__ */ React2.createElement(
-    Box2,
+  useEffect2(() => {
+    setLengthMap(new Map(logList.map((log, index) => [index, Math.min(log.logs.length, maxLength)])));
+  }, [logList, maxLength]);
+  return /* @__PURE__ */ React.createElement(Box, { width, height, flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { width, height: "80%", flexDirection: "row" }, /* @__PURE__ */ React.createElement(Box, { width: 30, height: "100%", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, null, "List ", tabIndex + 1, "/", logList.length)), /* @__PURE__ */ React.createElement(Box, { borderStyle: "round", borderColor: "blackBright", width: "100%", height: "100%", flexDirection: "column" }, logList.map((log, index) => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: index === tabIndex ? "green" : "white" }, /* @__PURE__ */ React.createElement(Text, null, "\u25CF"), "\xA0", log.title.length > 25 ? log.title.slice(0, 25) + "..." : log.title));
+  }))), /* @__PURE__ */ React.createElement(Box, { width, height: boxHeight + 3, flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, null, logList[tabIndex].title), /* @__PURE__ */ React.createElement(
+    Box,
     {
-      flexWrap: "wrap",
-      height,
-      borderStyle: index === tabIndex ? "double" : "round",
-      borderDimColor: index !== tabIndex,
-      borderColor: index === tabIndex && isRunning ? "green" : logList[index].color
+      borderStyle: isRunning ? "double" : "round",
+      flexDirection: "column",
+      borderColor: logList[tabIndex].color,
+      width: "100%",
+      height: "100%"
     },
-    /* @__PURE__ */ React2.createElement(Text2, null, isRunning && tabIndex === index ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, logData.slice(0, logData.length - 1).map((log, index2) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Text2, { key: index2 }, log), /* @__PURE__ */ React2.createElement(Newline2, null))), /* @__PURE__ */ React2.createElement(Text2, { backgroundColor: "green" }, "scrolling... +", scrollPos)) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, logData.map((data, index2) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Text2, { key: index2 }, data), /* @__PURE__ */ React2.createElement(Newline2, null)))))
-  ))))), /* @__PURE__ */ React2.createElement(Box2, { width, height: "auto" }, /* @__PURE__ */ React2.createElement(Text2, { dimColor: true }, /* @__PURE__ */ React2.createElement(Text2, null, "You can use the following shortcuts:"), /* @__PURE__ */ React2.createElement(Newline2, null), "* ", /* @__PURE__ */ React2.createElement(Text2, { backgroundColor: "green" }, "tab"), " to switch tab.", /* @__PURE__ */ React2.createElement(Newline2, null), "* ", /* @__PURE__ */ React2.createElement(Text2, { backgroundColor: "green" }, "space"), " to scroll.", /* @__PURE__ */ React2.createElement(Newline2, null), "* ", /* @__PURE__ */ React2.createElement(Text2, { backgroundColor: "green" }, "up"), " and ", /* @__PURE__ */ React2.createElement(Text2, { backgroundColor: "green" }, "down"), " to scroll.", " ", /* @__PURE__ */ React2.createElement(Text2, { backgroundColor: "green" }, "shift"), " to scroll faster.", /* @__PURE__ */ React2.createElement(Newline2, null), "* ", /* @__PURE__ */ React2.createElement(Text2, { backgroundColor: "green" }, "escape"), " to stop scrolling.")));
+    scrollPos > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, focusLog.slice(0, focusLog.length - 1).map((log, index) => /* @__PURE__ */ React.createElement(Text, { key: index }, log)), /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "Scrolling... +", scrollPos)) : focusLog.map((log, index) => /* @__PURE__ */ React.createElement(Text, { key: index }, log))
+  ))), /* @__PURE__ */ React.createElement(Box, { width }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, /* @__PURE__ */ React.createElement(Text, null, "You can use the following shortcuts:"), /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "tab"), " to switch tab.", /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "up"), " and ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "down"), " to scroll.", " ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "shift"), " to scroll faster.", /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "space"), " to scroll.", /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "escape"), " to stop scrolling.")));
 };
 
-// pkgs/@akanjs/cli/src/application/appilcation.interface.tsx
-var Backend = ({ app, env }) => {
-  const [logs, setLogs] = useState4([]);
+// pkgs/@akanjs/cli/src/application/application.interface.tsx
+var Backend = ({ appName, childProcess, onExit }) => {
+  const [logs, setLogs] = useState3([]);
   const [width, height] = useStdoutDimensions();
-  useEffect4(() => {
-    const proc = app.dist.spawnSync("node", ["--watch", "main.js"], {
-      env,
-      stdio: "pipe",
-      cwd: `${app.dist.cwdPath}/backend`
-    });
-    proc.stdout?.on("data", (data) => {
+  useEffect3(() => {
+    childProcess.stdout?.on("data", (data) => {
       const newOutput = data.toString().split("\n");
       setLogs((prevLogs) => [...prevLogs, ...newOutput]);
     });
-    proc.stderr?.on("data", (data) => {
+    childProcess.stderr?.on("data", (data) => {
       const newOutput = data.toString().split("\n");
       setLogs((prevLogs) => [...prevLogs, ...newOutput]);
     });
     return () => {
-      proc.kill();
+      childProcess.kill();
+      onExit();
     };
   }, []);
-  return /* @__PURE__ */ React3.createElement(Box3, { width, height }, /* @__PURE__ */ React3.createElement(Text3, { bold: true }, "Akan.JS Backend"));
+  return /* @__PURE__ */ React2.createElement(Box2, { width, height }, /* @__PURE__ */ React2.createElement(Text2, { bold: true }, "Akan.JS Backend"));
 };
-var Frontend = ({ app, env }) => {
-  const [logs, setLogs] = useState4([]);
+var Frontend = ({ appName, childProcess, onExit }) => {
+  const [logs, setLogs] = useState3([]);
   const [width, height] = useStdoutDimensions();
-  useEffect4(() => {
-    const proc = app.spawnSync("npx", ["next", "dev", "-p", "4200"], {
-      env,
-      stdio: ["ignore", "pipe", "pipe"],
-      detached: true
-    });
-    proc.stdout?.on("data", (data) => {
+  useEffect3(() => {
+    childProcess.stdout?.on("data", (data) => {
       const newOutput = data.toString().split("\n");
       setLogs((prevLogs) => [...prevLogs, ...newOutput]);
     });
-    proc.stderr?.on("data", (data) => {
+    childProcess.stderr?.on("data", (data) => {
       const newOutput = data.toString().split("\n");
       setLogs((prevLogs) => [...prevLogs, ...newOutput]);
     });
     return () => {
-      proc.kill();
+      childProcess.kill();
+      onExit();
     };
   }, []);
-  return /* @__PURE__ */ React3.createElement(Box3, { width, height, flexDirection: "column" }, /* @__PURE__ */ React3.createElement(Text3, { bold: true }, "Akan.JS Frontend"), logs.map((log) => /* @__PURE__ */ React3.createElement(Text3, { key: log }, log)));
+  return /* @__PURE__ */ React2.createElement(Box2, { width, height, flexDirection: "column" }, /* @__PURE__ */ React2.createElement(Text2, { bold: true }, appName, " Frontend"), logs.map((log) => /* @__PURE__ */ React2.createElement(Text2, { key: log }, log)));
 };
-var Csr = ({
-  app,
-  onLoad
-}) => {
-  const [logs, setLogs] = useState4([]);
+var Csr = ({ app, event, onExit }) => {
+  const [logs, setLogs] = useState3([]);
   const [width, height] = useStdoutDimensions();
-  useEffect4(() => {
-    void onLoad({
-      onLog: (log) => {
-        setLogs((prevLogs) => [...prevLogs, log]);
-      }
+  const [test, setTest] = useState3(false);
+  useEffect3(() => {
+    event.on("info", (msg) => {
+      setLogs((prevLogs) => [...prevLogs, msg]);
+    });
+    event.on("warn", (msg) => {
+      setLogs((prevLogs) => [...prevLogs, msg]);
+    });
+    event.on("warnOnce", (msg) => {
+      setLogs((prevLogs) => [...prevLogs, msg]);
+    });
+    event.on("error", (msg) => {
+      setLogs((prevLogs) => [...prevLogs, msg]);
+    });
+    event.on("clearScreen", (type) => {
+      setLogs((prevLogs) => [...prevLogs, type]);
     });
   }, []);
-  return /* @__PURE__ */ React3.createElement(Box3, { width, height, flexDirection: "column" }, /* @__PURE__ */ React3.createElement(Text3, { bold: true }, "Akan.JS CSR"), /* @__PURE__ */ React3.createElement(ScrollList, { list: logs }));
+  return /* @__PURE__ */ React2.createElement(Box2, { width, height, flexDirection: "column" }, /* @__PURE__ */ React2.createElement(Text2, null, test ? "true" : "false"), /* @__PURE__ */ React2.createElement(Text2, { bold: true }, "Akan.JS CSR"), /* @__PURE__ */ React2.createElement(Text2, null, logs));
 };
-var Start = ({
-  app,
-  backendEnv,
-  frontendEnv,
-  onLoadCsr
-}) => {
+var Start = ({ appName, bcp, fcp, csr, onExit, maxLength = 100 }) => {
   const [width, height] = useStdoutDimensions();
-  const [csrLogs, setCsrLogs] = useState4([]);
-  const [backendLogs, setBackendLogs] = useState4([]);
-  const [frontendLogs, setFrontendLogs] = useState4([]);
-  useEffect4(() => {
-    const backend = app.dist.spawnSync("node", ["--watch", "backend/main.js"], {
-      stdio: ["ignore", "pipe", "pipe"],
-      // stdin은 무시
-      env: backendEnv,
-      detached: true
+  const [csrLogs, setCsrLogs] = useState3([]);
+  const [backendLogs, setBackendLogs] = useState3([]);
+  const [frontendLogs, setFrontendLogs] = useState3([]);
+  const { exit } = useApp();
+  const filterLogData = (data) => {
+    return typeof data === "string" ? data.split(/\r?\n/).filter((line) => line !== "") : data.toString().split(/\r?\n/).filter((line) => line !== "");
+  };
+  const saveLog = (type, data, setLog) => {
+    const newOutput = filterLogData(data);
+    const logs = newOutput.map((line) => ({ type, content: line }));
+    setLog((currentLogs) => {
+      if (currentLogs.length >= maxLength) {
+        return [...currentLogs.slice(logs.length, maxLength), ...logs];
+      } else if (currentLogs.length < maxLength && currentLogs.length + logs.length > maxLength) {
+        return [...currentLogs.slice(Math.abs(maxLength - currentLogs.length - logs.length), maxLength), ...logs];
+      } else
+        return [...currentLogs, ...logs];
     });
-    const frontend = app.spawnSync("npx", ["next", "dev", "-p", "4200"], {
-      stdio: ["ignore", "pipe", "pipe"],
-      // stdin은 무시
-      env: frontendEnv,
-      detached: true
+  };
+  useEffect3(() => {
+    bcp.stdout?.on("data", (data) => {
+      saveLog("stdout", data, setBackendLogs);
     });
-    backend.stdout?.on("data", (data) => {
-      const newOutput = data.toString().split("\n");
-      setBackendLogs((currentLogs) => [
-        ...currentLogs,
-        ...newOutput.map((line) => ({ type: "stdout", content: line }))
-      ]);
+    bcp.stderr?.on("data", (data) => {
+      saveLog("stderr", data, setBackendLogs);
     });
-    backend.stderr?.on("data", (data) => {
-      const newOutput = data.toString().split("\n");
-      setBackendLogs((currentLogs) => [
-        ...currentLogs,
-        ...newOutput.map((line) => ({ type: "stderr", content: line }))
-      ]);
+    fcp.stdout?.on("data", (data) => {
+      saveLog("stdout", data, setFrontendLogs);
     });
-    frontend.stdout?.on("data", (data) => {
-      const newOutput = data.toString().split("\n");
-      setFrontendLogs((currentLogs) => [
-        ...currentLogs,
-        ...newOutput.map((line) => ({ type: "stdout", content: line }))
-      ]);
+    fcp.stderr?.on("data", (data) => {
+      saveLog("stderr", data, setFrontendLogs);
     });
-    frontend.stderr?.on("data", (data) => {
-      const newOutput = data.toString().split("\n");
-      setFrontendLogs((currentLogs) => [
-        ...currentLogs,
-        ...newOutput.map((line) => ({ type: "stderr", content: line }))
-      ]);
+    csr.on("info", (msg) => {
+      saveLog("info", msg, setCsrLogs);
     });
-    void onLoadCsr({
-      onLog: (log) => {
-        setCsrLogs((prevLogs) => [...prevLogs, { type: "stdout", content: log }]);
-      }
+    csr.on("warn", (msg) => {
+      saveLog("warn", msg, setCsrLogs);
+    });
+    csr.on("error", (msg) => {
+      saveLog("error", msg, setCsrLogs);
+    });
+    csr.on("clearScreen", (type) => {
+      saveLog("clearScreen", type, setCsrLogs);
     });
     return () => {
-      backend.kill();
-      frontend.kill();
+      bcp.kill();
+      fcp.kill();
+      bcp.stdin?.end();
+      fcp.stdin?.end();
+      csr.removeAllListeners();
+      void (async () => {
+        await onExit();
+        exit();
+        process.exit(0);
+      })();
     };
   }, []);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Box3, { borderColor: "#ff493b", height, width, flexDirection: "row" }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Box2, { borderColor: "#ff493b", height, width, flexDirection: "row" }, /* @__PURE__ */ React2.createElement(
     MultiScrollList,
     {
       logList: [
         {
-          title: `${app.name} frontend`,
+          title: `${appName} frontend`,
           logs: frontendLogs.map((log) => log.content),
           color: "#ff493b"
         },
         {
-          title: `${app.name} backend`,
+          title: `${appName} backend`,
           logs: backendLogs.map((log) => log.content),
           color: "#e535ab"
         },
         {
-          title: `${app.name} react`,
+          title: `${appName} react`,
           logs: csrLogs.map((log) => log.content),
           color: "#7cc5d9"
         }
-      ]
+      ],
+      maxLength
     }
   )));
 };
 var Interface = {
-  Csr: (app, onLoad) => render(/* @__PURE__ */ React3.createElement(Csr, { app, onLoad })),
-  Backend: (app, env) => render(/* @__PURE__ */ React3.createElement(Backend, { app, env })),
-  Frontend: (app, env) => render(/* @__PURE__ */ React3.createElement(Frontend, { app, env })),
-  Start: (app, backendEnv, frontendEnv, onLoadCsr) => render(/* @__PURE__ */ React3.createElement(Start, { app, backendEnv, frontendEnv, onLoadCsr }))
+  /**
+   * Akan CSR 실행 컴포넌트
+   *
+   * @param app 앱 정보
+   * @param event CSR 이벤트 발생기
+   * @param onExit 종료 함수
+   */
+  Csr: (app, event, onExit) => renderManager(/* @__PURE__ */ React2.createElement(Csr, { app, event, onExit })),
+  /**
+   * Akan Backend 실행 컴포넌트
+   *
+   * @param appName 앱 이름
+   * @param childProcess 백엔드 차일드 프로세스
+   * @param onExit 종료 함수
+   */
+  Backend: (appName, childProcess, onExit) => renderManager(/* @__PURE__ */ React2.createElement(Backend, { appName, childProcess, onExit })),
+  /**
+   * Akan Frontend 실행 컴포넌트
+   *
+   * @param appName 앱 이름
+   * @param childProcess 프론트엔드 차일드 프로세스
+   * @param onExit 종료 함수
+   */
+  Frontend: (appName, childProcess, onExit) => renderManager(/* @__PURE__ */ React2.createElement(Frontend, { appName, childProcess, onExit })),
+  /**
+   * Akan application 통합 실행 컴포넌트 (백엔드, 프론트엔드, React(CSR))
+   *
+   * @param maxLength 로그 최대 길이
+   * @param appName 앱 이름
+   * @param bcp 백엔드 차일드 프로세스
+   * @param fcp 프론트엔드 차일드 프로세스
+   * @param csr CSR 이벤트 발생기
+   * @param onExit 종료 함수
+   */
+  Start: (appName, bcp, fcp, csr, onExit) => renderManager(/* @__PURE__ */ React2.createElement(Start, { appName, bcp, fcp, csr, onExit }))
+};
+var renderManager = (component) => {
+  const renderFn = render(component);
+  return renderFn;
 };
 
 // pkgs/@akanjs/cli/src/application/application.runner.ts
+import EventEmitter from "node:events";
+import { confirm as confirm2, input as input4, select as select5 } from "@inquirer/prompts";
+import { StringOutputParser } from "@langchain/core/output_parsers";
+import { PromptTemplate as PromptTemplate2 } from "@langchain/core/prompts";
+import { RunnableSequence as RunnableSequence2 } from "@langchain/core/runnables";
+import { ChatOpenAI as ChatOpenAI3 } from "@langchain/openai";
+import react from "@vitejs/plugin-react";
+import dotenv3 from "dotenv";
+import * as esbuild2 from "esbuild";
+import fs14 from "fs";
+import fsPromise3 from "fs/promises";
+import yaml2 from "js-yaml";
+import openBrowser from "open";
+import ora3 from "ora";
+import path7 from "path";
+import * as vite from "vite";
+import commonjs from "vite-plugin-commonjs";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import tsconfigPaths from "vite-tsconfig-paths";
 var ApplicationRunner = class {
   async createApplication(appName, workspace) {
     await workspace.applyTemplate({
@@ -3902,34 +3869,6 @@ var ApplicationRunner = class {
     await app.syncAssets(scanResult.akanConfig.libs);
     return scanResult;
   }
-  async start(app) {
-    const { env: frontendEnv } = await this.#prepareCommand(app, "start", "frontend");
-    const { env: backendEnv } = await this.#prepareCommand(app, "start", "backend");
-    Interface.Start(app, backendEnv, frontendEnv, async ({ onLog }) => {
-      const config = await this.#getViteConfig(app, "start", {
-        customLogger: {
-          info: (msg) => {
-            onLog(msg);
-          },
-          warn: (msg) => {
-          },
-          warnOnce: (msg) => {
-          },
-          error: (msg) => {
-            onLog(msg);
-          },
-          clearScreen: (type) => {
-          },
-          hasErrorLogged: (error) => {
-            return false;
-          },
-          hasWarned: false
-        }
-      });
-      const server = await vite.createServer(config);
-      await server.listen(4201);
-    });
-  }
   async getScriptFilename(app) {
     if (!app.exists("scripts")) {
       app.mkdir("scripts");
@@ -4009,7 +3948,7 @@ var ApplicationRunner = class {
     app.dist.writeJson("backend/package.json", appPackageJson);
     app.dist.writeFile(path7.join(app.dist.cwdPath, "backend", "Dockerfile"), akanConfig.backend.docker.content);
   }
-  async startBackend(app, { open: open2 = false, onStart } = {}) {
+  async startBackend(app, { open: open2 = false, onStart, withInk = false } = {}) {
     const { env } = await this.#prepareCommand(app, "start", "backend");
     const ctx = await esbuild2.context({
       write: true,
@@ -4026,7 +3965,11 @@ var ApplicationRunner = class {
     onStart?.();
     if (open2)
       setTimeout(() => openBrowser("http://localhost:8080/backend/graphql"), 3e3);
-    await app.dist.spawn("node", ["--watch", "main.js"], { env, stdio: "inherit", cwd: `${app.dist.cwdPath}/backend` });
+    return app.dist.spawnSync("node", ["--watch", "main.js"], {
+      env,
+      stdio: withInk ? ["ignore", "pipe", "pipe"] : "inherit",
+      cwd: `${app.dist.cwdPath}/backend`
+    });
   }
   async buildFrontend(app, { spawnOptions } = {}) {
     const { env } = await this.#prepareCommand(app, "build", "frontend");
@@ -4060,12 +4003,20 @@ var ApplicationRunner = class {
     ]);
     app.dist.writeFile("frontend/Dockerfile", akanConfig.frontend.docker.content);
   }
-  async startFrontend(app, { open: open2 = false, turbo = true, onStart } = {}) {
+  async startFrontend(app, {
+    open: open2 = false,
+    turbo = true,
+    onStart,
+    withInk = false
+  } = {}) {
     const { env } = await this.#prepareCommand(app, "start", "frontend");
     if (open2)
       setTimeout(() => openBrowser("http://localhost:4200"), 3e3);
     onStart?.();
-    await app.spawn("npx", ["next", "dev", "-p", "4200", ...turbo ? ["--turbo"] : []], { env, stdio: "inherit" });
+    return app.spawnSync("npx", ["next", "dev", "-p", "4200", ...turbo ? ["--turbo"] : []], {
+      env,
+      stdio: withInk ? ["ignore", "pipe", "pipe"] : "inherit"
+    });
   }
   async #getViteConfig(app, command, viteConfig = {}) {
     const { env } = await this.#prepareCommand(app, command, "csr");
@@ -4153,38 +4104,41 @@ var ApplicationRunner = class {
     const config = await this.#getViteConfig(app, "build");
     await vite.build(config);
   }
-  startCsr(app, { open: open2 = false, onStart } = {}) {
-    Interface.Csr(app, async ({ onLog }) => {
-      const config = await this.#getViteConfig(app, "start", {
+  async startCsr(app, { open: open2 = false, onStart, withInk = false } = {}) {
+    const eventEmitter = new EventEmitter();
+    const config = await this.#getViteConfig(
+      app,
+      "start",
+      withInk ? {
         customLogger: {
           info: (msg) => {
-            onLog(msg);
+            eventEmitter.emit("info", msg);
           },
           warn: (msg) => {
-            onLog(msg);
+            eventEmitter.emit("warn", msg);
           },
           warnOnce: (msg) => {
-            onLog(msg);
+            eventEmitter.emit("warnOnce", msg);
           },
           error: (msg) => {
-            onLog(msg);
+            eventEmitter.emit("error", msg);
           },
           clearScreen: (type) => {
-            onLog(type);
+            eventEmitter.emit("clearScreen", type);
           },
           hasErrorLogged: (error) => {
             return false;
           },
           hasWarned: false
         }
-      });
-      const env = this.#prepareCommand(app, "start", "csr");
-      const server = await vite.createServer(config);
-      await server.listen(4201);
-    });
+      } : {}
+    );
+    const server = await vite.createServer(config);
+    await server.listen(4201);
     onStart?.();
     if (open2)
       setTimeout(() => openBrowser("http://localhost:4201"), 3e3);
+    return { server, eventEmitter };
   }
   async buildIos(app) {
     const capacitorApp = await new CapacitorApp(app).init();
@@ -4478,7 +4432,16 @@ var ApplicationScript = class {
     await this.syncApplication(app);
     if (app.workspace.getBaseDevEnv().env === "local")
       await this.dbup(app.workspace);
-    await this.#runner.start(app);
+    const backend = await this.startBackend(app, { open: open2, withInk: true });
+    const frontend = await this.startFrontend(app, { open: open2, withInk: true });
+    const { server: csrServer, eventEmitter: csr } = await this.startCsr(app, { open: open2, withInk: true });
+    Interface.Start(app.name, backend, frontend, csr, async () => {
+      await csrServer.close();
+      backend.kill();
+      frontend.kill();
+      csr.removeAllListeners();
+      process.exit(0);
+    });
   }
   async buildBackend(app, { sync = true } = {}) {
     if (sync)
@@ -4487,7 +4450,12 @@ var ApplicationScript = class {
     await this.#runner.buildBackend(app);
     spinner.succeed(`Backend built in dist/apps/${app.name}/backend`);
   }
-  async startBackend(app, { open: open2 = false, dbup = true, sync = true } = {}) {
+  async startBackend(app, {
+    open: open2 = false,
+    dbup = true,
+    sync = true,
+    withInk = false
+  } = {}) {
     if (app.getEnv() === "local" && dbup) {
       await this.dbup(app.workspace);
       process.on("SIGINT", async () => {
@@ -4498,12 +4466,14 @@ var ApplicationScript = class {
     if (sync)
       await this.syncApplication(app);
     const spinner = app.spinning("Preparing backend...");
-    await this.#runner.startBackend(app, {
+    const childProcess = await this.#runner.startBackend(app, {
       open: open2,
       onStart: () => {
         spinner.succeed(`Backend prepared, ready to start`);
-      }
+      },
+      withInk
     });
+    return childProcess;
   }
   async buildFrontend(app, { sync = true, standalone = false } = {}) {
     if (sync)
@@ -4516,17 +4486,24 @@ var ApplicationScript = class {
       spinner.succeed(`Frontend built in dist/apps/${app.name}/frontend`);
     }
   }
-  async startFrontend(app, { open: open2 = false, turbo = false, sync = true } = {}) {
+  async startFrontend(app, {
+    open: open2 = false,
+    turbo = false,
+    sync = true,
+    withInk = false
+  } = {}) {
     if (sync)
       await this.syncApplication(app);
     const spinner = app.spinning("Preparing frontend...");
-    await this.#runner.startFrontend(app, {
+    const childProcess = await this.#runner.startFrontend(app, {
       open: open2,
       turbo,
       onStart: () => {
         spinner.succeed(`Frontend prepared, ready to start`);
-      }
+      },
+      withInk
     });
+    return childProcess;
   }
   async buildCsr(app, { sync = true } = {}) {
     if (sync)
@@ -4535,14 +4512,16 @@ var ApplicationScript = class {
     await this.#runner.buildCsr(app);
     spinner.succeed(`Successfully built in dist/apps/${app.name}/csr`);
   }
-  async startCsr(app, { open: open2 = false, sync = true } = {}) {
+  async startCsr(app, { open: open2 = false, sync = true, withInk = false } = {}) {
     if (sync)
       await this.syncApplication(app);
-    this.#runner.startCsr(app, {
+    const { eventEmitter, server } = await this.#runner.startCsr(app, {
       open: open2,
       onStart: () => {
-      }
+      },
+      withInk
     });
+    return { eventEmitter, server };
   }
   async buildIos(app, { sync = true } = {}) {
     if (sync)