@akanjs/cli 0.0.89 → 0.0.91

package/index.js

@@ -58,8 +58,8 @@ var createTunnel = async ({ app, environment, port = 27017 }) => {
 };
 
 // pkgs/@akanjs/devkit/src/getCredentials.ts
-var import_fs = __toESM(require("fs"), 1);
-var import_js_yaml = __toESM(require("js-yaml"), 1);
+var import_fs = __toESM(require("fs"));
+var import_js_yaml = __toESM(require("js-yaml"));
 var getCredentials = (app, environment) => {
   const secret = import_js_yaml.default.load(
     import_fs.default.readFileSync(`${app.workspace.workspaceRoot}/infra/app/values/${app.name}-secret.yaml`, "utf-8")
@@ -68,9 +68,9 @@ var getCredentials = (app, environment) => {
 };
 
 // pkgs/@akanjs/devkit/src/uploadRelease.ts
-var import_axios = __toESM(require("axios"), 1);
-var import_form_data = __toESM(require("form-data"), 1);
-var import_fs2 = __toESM(require("fs"), 1);
+var import_axios = __toESM(require("axios"));
+var import_form_data = __toESM(require("form-data"));
+var import_fs2 = __toESM(require("fs"));
 var uploadRelease = async (projectName, {
   workspaceRoot,
   environment,
@@ -119,58 +119,96 @@ var uploadRelease = async (projectName, {
 };
 
 // pkgs/@akanjs/devkit/src/getModelFileData.ts
-var import_fs3 = __toESM(require("fs"), 1);
-var getModelFileData = (modulePath, modelName) => {
-  const moduleType = modulePath.startsWith("apps") ? "app" : "lib";
-  const moduleName = modulePath.split("/")[1];
-  const constantFilePath = `${modulePath}/lib/${modelName}/${modelName}.constant.ts`;
-  const unitFilePath = `${modulePath}/lib/${modelName}/${modelName}.Unit.tsx`;
-  const viewFilePath = `${modulePath}/lib/${modelName}/${modelName}.View.tsx`;
-  const constantFileStr = import_fs3.default.readFileSync(constantFilePath, "utf8");
-  const unitFileStr = import_fs3.default.readFileSync(unitFilePath, "utf8");
-  const viewFileStr = import_fs3.default.readFileSync(viewFilePath, "utf8");
-  const constantFileLines = constantFileStr.split("\n");
-  const importLibNames = constantFileLines.filter((line) => line.startsWith("import { cnst as ")).map((line) => line.split("cnst as ")[1].split(" ")[0]);
-  const importLocalPaths = constantFileLines.filter((line) => line.startsWith("import { ") && line.includes('from "../')).map((line) => line.split("from ")[1].split('"')[1]);
-  const importModelNames = importLocalPaths.map((path7) => path7.split("/")[1]).filter((name) => !name.startsWith("_"));
-  const hasImportScalar = !!importLocalPaths.map((path7) => path7.split("/")[1]).filter((name) => name.startsWith("_")).length;
-  return {
-    moduleType,
-    moduleName,
-    modelName,
-    constantFilePath,
-    unitFilePath,
-    viewFilePath,
-    importModelNames,
-    hasImportScalar,
-    importLibNames,
-    constantFileStr,
-    unitFileStr,
-    viewFileStr
-  };
-};
+var import_fs3 = __toESM(require("fs"));
 
 // pkgs/@akanjs/devkit/src/getRelatedCnsts.ts
-var import_fs4 = __toESM(require("fs"), 1);
-var import_ora = __toESM(require("ora"), 1);
-var ts = __toESM(require("typescript"), 1);
-var getRelatedCnsts = (constantFilePath) => {
-  const tsConfigPath = `./tsconfig.json`;
+var fs4 = __toESM(require("fs"));
+var import_ora = __toESM(require("ora"));
+var ts = __toESM(require("typescript"));
+var parseTsConfig = (tsConfigPath = "./tsconfig.json") => {
   const configFile = ts.readConfigFile(tsConfigPath, (path7) => {
     return ts.sys.readFile(path7);
   });
-  const parsedConfig = ts.parseJsonConfigFileContent(
+  return ts.parseJsonConfigFileContent(
     configFile.config,
     ts.sys,
-    import_fs4.default.realpathSync(tsConfigPath).replace(/[^/\\]+$/, "")
+    fs4.realpathSync(tsConfigPath).replace(/[^/\\]+$/, "")
   );
+};
+var collectImportedFiles = (constantFilePath, parsedConfig) => {
+  const allFilesToAnalyze = /* @__PURE__ */ new Set([constantFilePath]);
+  const analyzedFiles = /* @__PURE__ */ new Set();
+  const spinner = (0, import_ora.default)("Collecting related files...");
+  spinner.start();
+  function collectImported(filePath) {
+    if (analyzedFiles.has(filePath))
+      return;
+    analyzedFiles.add(filePath);
+    const tempProgram = ts.createProgram([filePath], parsedConfig.options);
+    const source = tempProgram.getSourceFile(filePath);
+    if (!source)
+      return;
+    function collectImports(node) {
+      if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) {
+        const importPath = node.moduleSpecifier.text;
+        if (importPath.startsWith(".")) {
+          const resolved = ts.resolveModuleName(importPath, filePath, parsedConfig.options, ts.sys).resolvedModule?.resolvedFileName;
+          if (resolved && !allFilesToAnalyze.has(resolved)) {
+            allFilesToAnalyze.add(resolved);
+            collectImported(resolved);
+          }
+        }
+      }
+      ts.forEachChild(node, collectImports);
+    }
+    collectImports(source);
+  }
+  collectImported(constantFilePath);
+  spinner.succeed(`Found ${allFilesToAnalyze.size} related files.`);
+  return {
+    allFilesToAnalyze,
+    analyzedFiles
+  };
+};
+var createTsProgram = (filePaths, options) => {
+  const spinner = (0, import_ora.default)("Creating TypeScript program for all files...");
+  spinner.start();
+  const program2 = ts.createProgram(Array.from(filePaths), options);
+  const checker = program2.getTypeChecker();
+  spinner.succeed("TypeScript program created.");
+  return {
+    program: program2,
+    checker
+  };
+};
+var createSymbolCache = (checker) => {
+  const symbolCache = /* @__PURE__ */ new Map();
+  return (node) => {
+    const cacheKey = `${node.getSourceFile().fileName}:${node.pos}:${node.end}`;
+    if (!symbolCache.has(cacheKey)) {
+      symbolCache.set(cacheKey, checker.getSymbolAtLocation(node));
+    }
+    return symbolCache.get(cacheKey);
+  };
+};
+var analyzeProperties = (filesToAnalyze, program2, checker) => {
   const propertyMap = /* @__PURE__ */ new Map();
-  function findPropertyOriginAll(filePath) {
-    const program2 = ts.createProgram([filePath], parsedConfig.options);
-    const checker = program2.getTypeChecker();
+  const analyzedFiles = /* @__PURE__ */ new Set();
+  const sourceLineCache = /* @__PURE__ */ new Map();
+  const getCachedSymbol = createSymbolCache(checker);
+  const spinner = (0, import_ora.default)("Analyzing property relationships...");
+  spinner.start();
+  function analyzeFileProperties(filePath) {
+    if (analyzedFiles.has(filePath))
+      return;
+    analyzedFiles.add(filePath);
     const source = program2.getSourceFile(filePath);
     if (!source)
-      return null;
+      return;
+    if (!sourceLineCache.has(filePath)) {
+      sourceLineCache.set(filePath, source.getFullText().split("\n"));
+    }
+    const sourceLines = sourceLineCache.get(filePath);
     function visit(node) {
       if (!source)
         return;
@@ -178,37 +216,38 @@ var getRelatedCnsts = (constantFilePath) => {
         const left = node.expression;
         const right = node.name;
         const { line } = ts.getLineAndCharacterOfPosition(source, node.getStart());
-        const sourceLines = source.getFullText().split("\n");
-        if (ts.isIdentifier(left) && sourceLines.length && (sourceLines[line].includes(`@Field.Prop(() => ${left.text}.${right.text}`) || sourceLines[line].includes(`base.Filter(${left.text}.${right.text},`))) {
-          const symbol = checker.getSymbolAtLocation(right);
+        if (ts.isIdentifier(left) && sourceLines && sourceLines.length > line && (sourceLines[line].includes(`@Field.Prop(() => ${left.text}.${right.text}`) || sourceLines[line].includes(`base.Filter(${left.text}.${right.text},`))) {
+          const symbol = getCachedSymbol(right);
           if (symbol?.declarations && symbol.declarations.length > 0) {
             const key = symbol.declarations[0].getSourceFile().fileName.split("/").pop()?.split(".")[0] ?? "";
             const property = propertyMap.get(key);
             const isScalar = symbol.declarations[0].getSourceFile().fileName.includes("_");
-            const filePath2 = symbol.declarations[0].getSourceFile().fileName.replace(`${ts.sys.getCurrentDirectory()}/`, "");
+            const symbolFilePath = symbol.declarations[0].getSourceFile().fileName.replace(`${ts.sys.getCurrentDirectory()}/`, "");
             if (property) {
               propertyMap.set(`${left.text}.${right.text}`, {
-                filePath: filePath2,
+                filePath: symbolFilePath,
                 isLibModule: true,
                 isImport: false,
                 libName: left.text,
+                source: fs4.readFileSync(symbolFilePath, "utf-8"),
                 isScalar
               });
-            } else
+            } else {
               propertyMap.set(key, {
-                filePath: filePath2,
+                filePath: symbolFilePath,
                 isLibModule: true,
                 isImport: false,
                 libName: left.text,
-                isScalar
+                isScalar,
+                source: fs4.readFileSync(symbolFilePath, "utf-8")
               });
-            findPropertyOriginAll(filePath2);
+            }
           }
         }
-      } else if (ts.isImportDeclaration(node)) {
-        const importPath = node.moduleSpecifier.getText().slice(1, -1);
+      } else if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) {
+        const importPath = node.moduleSpecifier.text;
         if (importPath.startsWith(".")) {
-          const resolved = ts.resolveModuleName(importPath, filePath, parsedConfig.options, ts.sys).resolvedModule?.resolvedFileName;
+          const resolved = ts.resolveModuleName(importPath, filePath, program2.getCompilerOptions(), ts.sys).resolvedModule?.resolvedFileName;
           const moduleName = importPath.split("/").pop()?.split(".")[0] ?? "";
           const property = propertyMap.get(moduleName);
           const isScalar = importPath.includes("_");
@@ -217,87 +256,38 @@ var getRelatedCnsts = (constantFilePath) => {
               filePath: resolved,
               isLibModule: false,
               isImport: true,
-              isScalar
+              isScalar,
+              source: fs4.readFileSync(resolved, "utf-8")
             });
-            findPropertyOriginAll(resolved);
           }
         }
       }
       ts.forEachChild(node, visit);
     }
     visit(source);
-    return propertyMap;
   }
-  function findPropertyOrigin(filePath, aliasName, libName) {
-    const program2 = ts.createProgram([filePath], parsedConfig.options);
-    const checker = program2.getTypeChecker();
-    const source = program2.getSourceFile(filePath);
-    const propertyMap2 = /* @__PURE__ */ new Map();
-    if (!source)
-      return null;
-    function visit(node) {
-      if (ts.isPropertyAccessExpression(node)) {
-        const left = node.expression;
-        const right = node.name;
-        if (ts.isIdentifier(left) && left.text === aliasName && right.text === libName) {
-          const symbol = checker.getSymbolAtLocation(right);
-          if (symbol?.declarations && symbol.declarations.length > 0) {
-            return symbol.declarations[0].getSourceFile().fileName;
-          }
-        }
-      }
-      return ts.forEachChild(node, visit) || null;
-    }
-    return visit(source);
+  for (const filePath of filesToAnalyze) {
+    analyzeFileProperties(filePath);
   }
-  const spinner = (0, import_ora.default)("Finding property origin...");
-  spinner.start();
-  const paths = findPropertyOriginAll(constantFilePath);
-  spinner.succeed("property origin found.");
-  return { paths };
+  spinner.succeed(`Analysis complete. Found ${propertyMap.size} properties.`);
+  return propertyMap;
+};
+var getRelatedCnsts = (constantFilePath) => {
+  const parsedConfig = parseTsConfig();
+  const { allFilesToAnalyze } = collectImportedFiles(constantFilePath, parsedConfig);
+  const { program: program2, checker } = createTsProgram(allFilesToAnalyze, parsedConfig.options);
+  const propertyMap = analyzeProperties(allFilesToAnalyze, program2, checker);
+  return Array.from(propertyMap.entries()).map(([key, value]) => ({ key, ...value }));
 };
 
 // pkgs/@akanjs/devkit/src/selectModel.ts
 var import_prompts = require("@inquirer/prompts");
-var import_fs5 = __toESM(require("fs"), 1);
+var import_fs4 = __toESM(require("fs"));
 
 // pkgs/@akanjs/devkit/src/streamAi.ts
 var import_prompts2 = require("@langchain/core/prompts");
 var import_runnables = require("@langchain/core/runnables");
 var import_openai = require("@langchain/openai");
-var streamAi = async (question, callback = (chunk) => {
-  process.stdout.write(chunk);
-}) => {
-  const createStreamingModel = (apiKey = process.env.DEEPSEEK_API_KEY) => {
-    if (!apiKey)
-      throw new Error(`process.env.DEEPSEEK_API_KEY is not set`);
-    return new import_openai.ChatOpenAI({
-      modelName: "deepseek-reasoner",
-      temperature: 0.7,
-      streaming: true,
-      // Enable streaming
-      configuration: { baseURL: "https://api.deepseek.com/v1", apiKey }
-    });
-  };
-  const createProcessingChain = () => {
-    return import_runnables.RunnableSequence.from([import_prompts2.PromptTemplate.fromTemplate(`Answer concisely: {question}`), createStreamingModel()]);
-  };
-  try {
-    const chain = createProcessingChain();
-    const stream = await chain.stream({ question });
-    let fullResponse = "";
-    for await (const chunk of stream) {
-      const content = chunk.content;
-      if (typeof content === "string") {
-        fullResponse += content;
-        callback(content);
-      }
-    }
-    return { content: fullResponse };
-  } catch (error) {
-    throw new Error("Failed to stream response");
-  }
-};
 
 // pkgs/@akanjs/common/isDayjs.ts
 var import_dayjs = require("dayjs");
@@ -483,7 +473,7 @@ var sleep = async (ms) => {
 };
 
 // pkgs/@akanjs/config/src/akanConfig.ts
-var import_fs6 = __toESM(require("fs"));
+var import_fs5 = __toESM(require("fs"));
 var import_path2 = __toESM(require("path"));
 
 // pkgs/@akanjs/config/src/nextConfig.ts
@@ -698,7 +688,7 @@ CMD ["npm", "start"]`,
 };
 var getAppConfig = async (appRoot, props) => {
   const akanConfigPath = import_path2.default.join(appRoot, "akan.config.ts");
-  if (!import_fs6.default.existsSync(akanConfigPath))
+  if (!import_fs5.default.existsSync(akanConfigPath))
     throw new Error(`application akan.config.ts is not found ${appRoot}`);
   const configImp = (await import(`${appRoot}/akan.config.ts`)).default;
   const config = typeof configImp === "function" ? configImp(props) : configImp;
@@ -718,7 +708,7 @@ var makeLibConfig = (config, props) => {
 };
 var getLibConfig = async (libRoot, props) => {
   const akanConfigPath = import_path2.default.join(libRoot, "akan.config.ts");
-  if (!import_fs6.default.existsSync(akanConfigPath))
+  if (!import_fs5.default.existsSync(akanConfigPath))
     throw new Error(`library akan.config.ts is not found ${libRoot}`);
   const configImp = (await import(`${libRoot}/akan.config.ts`)).default;
   const config = typeof configImp === "function" ? configImp(props) : configImp;
@@ -764,15 +754,15 @@ var getDefaultFileScan = () => ({
 
 // pkgs/@akanjs/devkit/src/executors.ts
 var import_child_process = require("child_process");
-var import_dotenv = __toESM(require("dotenv"), 1);
-var import_fs7 = __toESM(require("fs"), 1);
-var import_promises = __toESM(require("fs/promises"), 1);
-var import_path3 = __toESM(require("path"), 1);
+var import_dotenv = __toESM(require("dotenv"));
+var import_fs6 = __toESM(require("fs"));
+var import_promises = __toESM(require("fs/promises"));
+var import_path3 = __toESM(require("path"));
 
 // pkgs/@akanjs/devkit/src/dependencyScanner.ts
-var fs7 = __toESM(require("fs"), 1);
-var path3 = __toESM(require("path"), 1);
-var ts2 = __toESM(require("typescript"), 1);
+var fs7 = __toESM(require("fs"));
+var path3 = __toESM(require("path"));
+var ts2 = __toESM(require("typescript"));
 var TypeScriptDependencyScanner = class {
   constructor(directory) {
     this.directory = directory;
@@ -923,8 +913,8 @@ var Executor = class {
   constructor(name, cwdPath) {
     this.logger = new Logger(name);
     this.cwdPath = cwdPath;
-    if (!import_fs7.default.existsSync(cwdPath))
-      import_fs7.default.mkdirSync(cwdPath, { recursive: true });
+    if (!import_fs6.default.existsSync(cwdPath))
+      import_fs6.default.mkdirSync(cwdPath, { recursive: true });
   }
   exec(command, options = {}) {
     const proc = (0, import_child_process.exec)(command, { cwd: this.cwdPath, ...options });
@@ -983,31 +973,31 @@ var Executor = class {
   }
   mkdir(dirPath) {
     const writePath = this.#getPath(dirPath);
-    if (!import_fs7.default.existsSync(writePath))
-      import_fs7.default.mkdirSync(writePath, { recursive: true });
+    if (!import_fs6.default.existsSync(writePath))
+      import_fs6.default.mkdirSync(writePath, { recursive: true });
     this.logger.verbose(`Make directory ${writePath}`);
     return this;
   }
   exists(filePath) {
     const readPath = this.#getPath(filePath);
-    return import_fs7.default.existsSync(readPath);
+    return import_fs6.default.existsSync(readPath);
   }
   writeFile(filePath, content, { overwrite = true } = {}) {
     const writePath = this.#getPath(filePath);
     const dir = import_path3.default.dirname(writePath);
-    if (!import_fs7.default.existsSync(dir))
-      import_fs7.default.mkdirSync(dir, { recursive: true });
+    if (!import_fs6.default.existsSync(dir))
+      import_fs6.default.mkdirSync(dir, { recursive: true });
     const contentStr = typeof content === "string" ? content : JSON.stringify(content, null, 2);
-    if (import_fs7.default.existsSync(writePath)) {
-      const currentContent = import_fs7.default.readFileSync(writePath, "utf8");
+    if (import_fs6.default.existsSync(writePath)) {
+      const currentContent = import_fs6.default.readFileSync(writePath, "utf8");
       if (currentContent === contentStr || !overwrite)
         this.logger.verbose(`File ${writePath} is unchanged`);
       else {
-        import_fs7.default.writeFileSync(writePath, contentStr, "utf8");
+        import_fs6.default.writeFileSync(writePath, contentStr, "utf8");
         this.logger.verbose(`File ${writePath} is changed`);
       }
     } else {
-      import_fs7.default.writeFileSync(writePath, contentStr, "utf8");
+      import_fs6.default.writeFileSync(writePath, contentStr, "utf8");
       this.logger.verbose(`File ${writePath} is created`);
     }
     return this;
@@ -1023,11 +1013,11 @@ var Executor = class {
   }
   readFile(filePath) {
     const readPath = this.#getPath(filePath);
-    return import_fs7.default.readFileSync(readPath, "utf8");
+    return import_fs6.default.readFileSync(readPath, "utf8");
   }
   readJson(filePath) {
     const readPath = this.#getPath(filePath);
-    return JSON.parse(import_fs7.default.readFileSync(readPath, "utf8"));
+    return JSON.parse(import_fs6.default.readFileSync(readPath, "utf8"));
   }
   async cp(srcPath, destPath) {
     const src = this.#getPath(srcPath);
@@ -1096,7 +1086,7 @@ var Executor = class {
     overwrite = true
   }) {
     const templatePath = `${__dirname}/src/templates${template ? `/${template}` : ""}`.replace(".ts", ".js");
-    if (import_fs7.default.statSync(templatePath).isFile()) {
+    if (import_fs6.default.statSync(templatePath).isFile()) {
       const filename = import_path3.default.basename(templatePath);
       await this.#applyTemplateFile(
         { templatePath, targetPath: import_path3.default.join(basePath2, filename), scanResult, overwrite },
@@ -1107,7 +1097,7 @@ var Executor = class {
       await Promise.all(
         subdirs.map(async (subdir) => {
           const subpath = import_path3.default.join(templatePath, subdir);
-          if (import_fs7.default.statSync(subpath).isFile())
+          if (import_fs6.default.statSync(subpath).isFile())
             await this.#applyTemplateFile(
               { templatePath: subpath, targetPath: import_path3.default.join(basePath2, subdir), scanResult, overwrite },
               dict
@@ -1204,6 +1194,26 @@ var WorkspaceExecutor = class _WorkspaceExecutor extends Executor {
     this.writeJson("tsconfig.json", rootTsConfig);
     return this;
   }
+  async getDirInModule(basePath2, name) {
+    const AVOID_DIRS = ["__lib", "__scalar", `_${name}`];
+    const getDirs = async (dirname, maxDepth = 3, results = [], prefix = "") => {
+      const dirs = await import_promises.default.readdir(dirname);
+      await Promise.all(
+        dirs.map(async (dir) => {
+          if (AVOID_DIRS.includes(dir))
+            return;
+          const dirPath = import_path3.default.join(dirname, dir);
+          if (import_fs6.default.lstatSync(dirPath).isDirectory()) {
+            results.push(`${name}/${prefix}${dir}`);
+            if (maxDepth > 0)
+              await getDirs(dirPath, maxDepth - 1, results, `${prefix}${dir}/`);
+          }
+        })
+      );
+      return results;
+    };
+    return await getDirs(basePath2);
+  }
   async commit(message, { init = false, add = true } = {}) {
     if (init)
       await this.exec(`git init --quiet`);
@@ -1220,8 +1230,8 @@ var WorkspaceExecutor = class _WorkspaceExecutor extends Executor {
           if (AVOID_DIRS.includes(dir))
             return;
           const dirPath = import_path3.default.join(dirname, dir);
-          if (import_fs7.default.lstatSync(dirPath).isDirectory()) {
-            const hasTargetFile = import_fs7.default.existsSync(import_path3.default.join(dirPath, targetFilename));
+          if (import_fs6.default.lstatSync(dirPath).isDirectory()) {
+            const hasTargetFile = import_fs6.default.existsSync(import_path3.default.join(dirPath, targetFilename));
             if (hasTargetFile)
               results.push(`${prefix}${dir}`);
             if (maxDepth > 0)
@@ -1241,6 +1251,14 @@ var WorkspaceExecutor = class _WorkspaceExecutor extends Executor {
     ];
     return scalarConstantExampleFiles;
   }
+  async getViewFiles() {
+    const [appNames, libNames] = await this.getSyss();
+    const viewExampleFiles = [
+      ...(await Promise.all(appNames.map((appName) => AppExecutor.from(this, appName).getViewsSourceCode()))).flat(),
+      ...(await Promise.all(libNames.map((libName) => LibExecutor.from(this, libName).getViewsSourceCode()))).flat()
+    ];
+    return viewExampleFiles;
+  }
 };
 var SysExecutor = class extends Executor {
   workspace;
@@ -1255,6 +1273,10 @@ var SysExecutor = class extends Executor {
   async getConfig(command) {
     return this.type === "app" ? await getAppConfig(this.cwdPath, { ...this.workspace.getBaseDevEnv(), type: "app", name: this.name, command }) : await getLibConfig(this.cwdPath, { ...this.workspace.getBaseDevEnv(), type: "lib", name: this.name, command });
   }
+  async getModules() {
+    const path7 = this.type === "app" ? `apps/${this.name}/lib` : `libs/${this.name}/lib`;
+    return await this.workspace.getDirInModule(path7, this.name);
+  }
   async scan({
     tsconfig = this.getTsConfig(`${this.cwdPath}/tsconfig.json`),
     akanConfig
@@ -1279,11 +1301,11 @@ var SysExecutor = class extends Executor {
       const pathSplitLength = path7.split("/").length;
       return tsconfig.compilerOptions.paths[path7][0].split("/").slice(1, 1 + pathSplitLength).join("/");
     }).filter((libName) => libName !== this.name);
-    if (!import_fs7.default.existsSync(`${this.cwdPath}/lib/__scalar`))
-      import_fs7.default.mkdirSync(`${this.cwdPath}/lib/__scalar`, { recursive: true });
+    if (!import_fs6.default.existsSync(`${this.cwdPath}/lib/__scalar`))
+      import_fs6.default.mkdirSync(`${this.cwdPath}/lib/__scalar`, { recursive: true });
     const files = getDefaultFileScan();
     const dirnames = (await import_promises.default.readdir(`${this.cwdPath}/lib`)).filter(
-      (name) => import_fs7.default.lstatSync(`${this.cwdPath}/lib/${name}`).isDirectory()
+      (name) => import_fs6.default.lstatSync(`${this.cwdPath}/lib/${name}`).isDirectory()
     );
     const databaseDirs = dirnames.filter((name) => !name.startsWith("_"));
     const serviceDirs = dirnames.filter((name) => name.startsWith("_") && !name.startsWith("__"));
@@ -1411,20 +1433,42 @@ var SysExecutor = class extends Executor {
     return { filepath, content };
   }
   async getDatabaseModules() {
-    const databaseModules = (await import_promises.default.readdir(`${this.cwdPath}/lib`)).filter((name) => !name.startsWith("_") && !name.startsWith("__") && !name.endsWith(".ts")).filter((name) => import_fs7.default.existsSync(`${this.cwdPath}/lib/${name}/${name}.constant.ts`));
+    const databaseModules = (await import_promises.default.readdir(`${this.cwdPath}/lib`)).filter((name) => !name.startsWith("_") && !name.startsWith("__") && !name.endsWith(".ts")).filter((name) => import_fs6.default.existsSync(`${this.cwdPath}/lib/${name}/${name}.constant.ts`));
     return databaseModules;
   }
   async getServiceModules() {
-    const serviceModules = (await import_promises.default.readdir(`${this.cwdPath}/lib`)).filter((name) => name.startsWith("_") && !name.startsWith("__")).filter((name) => import_fs7.default.existsSync(`${this.cwdPath}/lib/${name}/${name}.service.ts`));
+    const serviceModules = (await import_promises.default.readdir(`${this.cwdPath}/lib`)).filter((name) => name.startsWith("_") && !name.startsWith("__")).filter((name) => import_fs6.default.existsSync(`${this.cwdPath}/lib/${name}/${name}.service.ts`));
     return serviceModules;
   }
   async getScalarModules() {
-    const scalarModules = (await import_promises.default.readdir(`${this.cwdPath}/lib/__scalar`)).filter((name) => !name.startsWith("_")).filter((name) => import_fs7.default.existsSync(`${this.cwdPath}/lib/__scalar/${name}/${name}.constant.ts`));
+    const scalarModules = (await import_promises.default.readdir(`${this.cwdPath}/lib/__scalar`)).filter((name) => !name.startsWith("_")).filter((name) => import_fs6.default.existsSync(`${this.cwdPath}/lib/__scalar/${name}/${name}.constant.ts`));
     return scalarModules;
   }
-  async getViewModules() {
-    const viewModules = (await import_promises.default.readdir(`${this.cwdPath}/lib`)).filter((name) => !name.startsWith("_") && !name.startsWith("__") && !name.endsWith(".ts")).filter((name) => import_fs7.default.existsSync(`${this.cwdPath}/lib/${name}/${name}.View.tsx`));
-    return viewModules;
+  async getViewComponents() {
+    const viewComponents = (await import_promises.default.readdir(`${this.cwdPath}/lib`)).filter((name) => !name.startsWith("_") && !name.startsWith("__") && !name.endsWith(".ts")).filter((name) => import_fs6.default.existsSync(`${this.cwdPath}/lib/${name}/${name}.View.tsx`));
+    return viewComponents;
+  }
+  async getUnitComponents() {
+    const unitComponents = (await import_promises.default.readdir(`${this.cwdPath}/lib`)).filter((name) => name.startsWith("_") && !name.startsWith("__")).filter((name) => import_fs6.default.existsSync(`${this.cwdPath}/lib/${name}/${name}.Unit.tsx`));
+    return unitComponents;
+  }
+  async getTemplateComponents() {
+    const templateComponents = (await import_promises.default.readdir(`${this.cwdPath}/lib`)).filter((name) => name.startsWith("_") && !name.startsWith("__")).filter((name) => import_fs6.default.existsSync(`${this.cwdPath}/lib/${name}/${name}.Template.tsx`));
+    return templateComponents;
+  }
+  async getViewsSourceCode() {
+    const viewComponents = await this.getViewComponents();
+    return viewComponents.map((viewComponent) => this.getLocalFile(`lib/${viewComponent}/${viewComponent}.View.tsx`));
+  }
+  async getUnitsSourceCode() {
+    const unitComponents = await this.getUnitComponents();
+    return unitComponents.map((unitComponent) => this.getLocalFile(`lib/${unitComponent}/${unitComponent}.Unit.tsx`));
+  }
+  async getTemplatesSourceCode() {
+    const templateComponents = await this.getTemplateComponents();
+    return templateComponents.map(
+      (templateComponent) => this.getLocalFile(`lib/${templateComponent}/${templateComponent}.Template.tsx`)
+    );
   }
   async getScalarConstantFiles() {
     const scalarModules = await this.getScalarModules();
@@ -1464,9 +1508,9 @@ var AppExecutor = class _AppExecutor extends SysExecutor {
   }
   async syncAssets(libDeps) {
     const projectPublicLibPath = `${this.cwdPath}/public/libs`;
-    if (import_fs7.default.existsSync(projectPublicLibPath))
+    if (import_fs6.default.existsSync(projectPublicLibPath))
       await import_promises.default.rm(projectPublicLibPath, { recursive: true });
-    const targetDeps = libDeps.filter((dep) => import_fs7.default.existsSync(`${this.workspace.workspaceRoot}/libs/${dep}/public`));
+    const targetDeps = libDeps.filter((dep) => import_fs6.default.existsSync(`${this.workspace.workspaceRoot}/libs/${dep}/public`));
     await Promise.all(targetDeps.map((dep) => import_promises.default.mkdir(`${projectPublicLibPath}/${dep}`, { recursive: true })));
     await Promise.all(
       targetDeps.map(
@@ -1546,21 +1590,21 @@ var akanCloudHost = process.env.NEXT_PUBLIC_OPERATION_MODE === "local" ? "http:/
 var akanCloudBackendUrl = `${akanCloudHost}${process.env.NEXT_PUBLIC_OPERATION_MODE === "local" ? ":8080" : ""}/backend`;
 var akanCloudClientUrl = `${akanCloudHost}${process.env.NEXT_PUBLIC_OPERATION_MODE === "local" ? ":4200" : ""}`;
 var defaultHostConfig = {};
-var defaultAkanGlobalConfig = {};
+var defaultAkanGlobalConfig = { cloudHost: {}, llm: null };
 
 // pkgs/@akanjs/devkit/src/auth.ts
-var import_fs8 = __toESM(require("fs"), 1);
+var import_fs7 = __toESM(require("fs"));
 var getAkanGlobalConfig = () => {
-  const akanConfig = import_fs8.default.existsSync(configPath) ? JSON.parse(import_fs8.default.readFileSync(configPath, "utf8")) : defaultAkanGlobalConfig;
+  const akanConfig = import_fs7.default.existsSync(configPath) ? JSON.parse(import_fs7.default.readFileSync(configPath, "utf8")) : defaultAkanGlobalConfig;
   return akanConfig;
 };
 var setAkanGlobalConfig = (akanConfig) => {
-  import_fs8.default.mkdirSync(basePath, { recursive: true });
-  import_fs8.default.writeFileSync(configPath, JSON.stringify(akanConfig, null, 2));
+  import_fs7.default.mkdirSync(basePath, { recursive: true });
+  import_fs7.default.writeFileSync(configPath, JSON.stringify(akanConfig, null, 2));
 };
 var getHostConfig = (host = akanCloudHost) => {
   const akanConfig = getAkanGlobalConfig();
-  return akanConfig[host] ?? defaultHostConfig;
+  return akanConfig.cloudHost[host] ?? defaultHostConfig;
 };
 var setHostConfig = (host = akanCloudHost, config = {}) => {
   const akanConfig = getAkanGlobalConfig();
@@ -1579,7 +1623,7 @@ var getSelf = async (token) => {
 
 // pkgs/@akanjs/devkit/src/capacitorApp.ts
 var import_project = require("@trapezedev/project");
-var import_fs9 = __toESM(require("fs"), 1);
+var import_fs8 = __toESM(require("fs"));
 var CapacitorApp = class {
   constructor(app) {
     this.app = app;
@@ -1605,7 +1649,7 @@ var CapacitorApp = class {
     await this.project.commit();
   }
   async releaseIos() {
-    const isAdded = import_fs9.default.existsSync(`${this.app.cwdPath}/ios/App/Podfile`);
+    const isAdded = import_fs8.default.existsSync(`${this.app.cwdPath}/ios/App/Podfile`);
     if (!isAdded) {
       await this.app.spawn("npx cap add ios");
       await this.app.spawn("npx @capacitor/assets generate");
@@ -1614,7 +1658,7 @@ var CapacitorApp = class {
     await this.app.spawn("cross-env", ["APP_OPERATION_MODE=release", "npx", "cap", "sync", "ios"]);
   }
   async releaseAndroid() {
-    const isAdded = import_fs9.default.existsSync(`${this.app.cwdPath}/android/app/build.gradle`);
+    const isAdded = import_fs8.default.existsSync(`${this.app.cwdPath}/android/app/build.gradle`);
     if (!isAdded) {
       await this.app.spawn("npx cap add android");
       await this.app.spawn("npx @capacitor/assets generate");
@@ -1855,7 +1899,7 @@ var Target = {
 // pkgs/@akanjs/devkit/src/commandDecorators/command.ts
 var import_prompts3 = require("@inquirer/prompts");
 var import_commander = require("commander");
-var import_fs10 = __toESM(require("fs"), 1);
+var import_fs9 = __toESM(require("fs"));
 var camelToKebabCase = (str) => str.replace(/([A-Z])/g, "-$1").toLowerCase();
 var handleOption = (programCommand, argMeta) => {
   const {
@@ -1902,7 +1946,7 @@ var getOptionValue = async (argMeta, opt) => {
     const message = ask ?? `Do you want to set ${name}? ${desc ? ` (${desc})` : ""}: `;
     return await (0, import_prompts3.confirm)({ message });
   } else {
-    const message = ask ?? `Enter the ${name} value${example ? ` (example: ${example})` : ""}: `;
+    const message = ask ? `${ask}: ` : `Enter the ${name} value${example ? ` (example: ${example})` : ""}: `;
     if (argMeta.argsOption.nullable)
       return await (0, import_prompts3.input)({ message });
     else
@@ -1951,8 +1995,8 @@ var getArgumentValue = async (argMeta, value, workspace) => {
     throw new Error(`Invalid system type: ${argMeta.type}`);
 };
 var runCommands = async (...commands) => {
-  const hasPackageJson = import_fs10.default.existsSync(`${__dirname}/package.json`);
-  const version = hasPackageJson ? JSON.parse(import_fs10.default.readFileSync(`${__dirname}/package.json`, "utf8")).version : "0.0.1";
+  const hasPackageJson = import_fs9.default.existsSync(`${__dirname}/package.json`);
+  const version = hasPackageJson ? JSON.parse(import_fs9.default.readFileSync(`${__dirname}/package.json`, "utf8")).version : "0.0.1";
   import_commander.program.version(version).description("Akan CLI");
   for (const command of commands) {
     const targetMetas = getTargetMetas(command);
@@ -2002,15 +2046,64 @@ var runCommands = async (...commands) => {
 var import_prompts4 = require("@inquirer/prompts");
 var import_messages = require("@langchain/core/messages");
 var import_openai2 = require("@langchain/openai");
+var import_chalk = __toESM(require("chalk"));
 var MAX_ASK_TRY = 300;
+var supportedLlmModels = ["deepseek-chat", "deepseek-reasoner"];
 var AiSession = class _AiSession {
-  static #chat = new import_openai2.ChatOpenAI({
-    modelName: "deepseek-chat",
-    temperature: 0.7,
-    streaming: true,
-    // Enable streaming
-    configuration: { baseURL: "https://api.deepseek.com/v1", apiKey: process.env.DEEPSEEK_API_KEY }
-  });
+  static #chat = null;
+  static async init({ temperature = 0.7, useExisting = true } = {}) {
+    if (useExisting) {
+      const llmConfig2 = this.getLlmConfig();
+      if (llmConfig2)
+        return this.#setChatModel(llmConfig2.model, llmConfig2.apiKey);
+    }
+    const llmConfig = await this.#requestLlmConfig();
+    const { model, apiKey } = llmConfig;
+    await this.#validateApiKey(model, apiKey);
+    return this.#setChatModel(model, apiKey, { temperature }).setLlmConfig({ model, apiKey });
+  }
+  static #setChatModel(model, apiKey, { temperature = 0.7 } = {}) {
+    this.#chat = new import_openai2.ChatOpenAI({
+      modelName: model,
+      temperature,
+      streaming: true,
+      configuration: { baseURL: "https://api.deepseek.com/v1", apiKey }
+    });
+    return this;
+  }
+  static getLlmConfig() {
+    const akanConfig = getAkanGlobalConfig();
+    return akanConfig.llm ?? null;
+  }
+  static setLlmConfig(llmConfig) {
+    const akanConfig = getAkanGlobalConfig();
+    akanConfig.llm = llmConfig;
+    setAkanGlobalConfig(akanConfig);
+    return this;
+  }
+  static async #requestLlmConfig() {
+    const model = await (0, import_prompts4.select)({ message: "Select a LLM model", choices: supportedLlmModels });
+    const apiKey = await (0, import_prompts4.input)({ message: "Enter your API key" });
+    return { model, apiKey };
+  }
+  static async #validateApiKey(modelName, apiKey) {
+    const chat = new import_openai2.ChatOpenAI({
+      modelName,
+      temperature: 0,
+      configuration: { baseURL: "https://api.deepseek.com/v1", apiKey }
+    });
+    try {
+      await chat.invoke("Hi, and just say 'ok'");
+      return true;
+    } catch (error) {
+      Logger.rawLog(
+        import_chalk.default.red(
+          `LLM API key is invalid. Please check your API key and try again. You can set it again by running "akan set-llm" or reset by running "akan reset-llm"`
+        )
+      );
+      throw error;
+    }
+  }
   messageHistory = [];
   constructor(messageHistory = []) {
     this.messageHistory = messageHistory;
@@ -2020,6 +2113,8 @@ var AiSession = class _AiSession {
       Logger.raw(chunk);
     }
   } = {}) {
+    if (!_AiSession.#chat)
+      throw new Error("Please initialize the AI session first");
     try {
       const humanMessage = new import_messages.HumanMessage(question);
       this.messageHistory.push(humanMessage);
@@ -2032,6 +2127,8 @@ var AiSession = class _AiSession {
           onChunk(content);
         }
       }
+      fullResponse += "\n";
+      onChunk("\n");
       this.messageHistory.push(new import_messages.AIMessage(fullResponse));
       return { content: fullResponse, messageHistory: this.messageHistory };
     } catch (error) {
@@ -2060,8 +2157,8 @@ var AiSession = class _AiSession {
     return this.#getTypescriptCode(content);
   }
   #getTypescriptCode(content) {
-    const code = /```typescript([\s\S]*?)```/.exec(content);
-    return code ? code[1] : content;
+    const code = /```(typescript|tsx)([\s\S]*?)```/.exec(content);
+    return code ? code[2] : content;
   }
 };
 
@@ -2074,11 +2171,15 @@ var LibraryRunner = class {
     const scanResult = await lib.scan({ akanConfig });
     return scanResult;
   }
+  async createLibrary(libName, workspace) {
+  }
+  async removeLibrary(lib) {
+    await lib.workspace.exec(`rm -rf libs/${lib.name}`);
+    lib.log(`Library ${lib.name} removed`);
+  }
   async installLibrary(workspace, libName) {
     workspace.log(`Installing ${libName} library as git subtree...`);
-    await workspace.exec(
-      `git subtree add --quiet --prefix=libs/${libName} git@github.com:akan-team/${libName}.git main`
-    );
+    await workspace.exec(`git subtree add --prefix=libs/${libName} git@github.com:akan-team/${libName}.git main`);
     await workspace.cp(`libs/${libName}/env/env.server.example.ts`, `libs/${libName}/env/env.server.testing.ts`);
     workspace.setTsPaths("lib", libName);
     await workspace.commit(`Add ${libName} library`);
@@ -2112,13 +2213,13 @@ var LibraryRunner = class {
   }
   async pushLibrary(lib, branch) {
     await lib.workspace.exec(
-      `git subtree push --quiet --prefix=libs/${lib.name} git@github.com:akan-team/${lib.name}.git ${branch}`
+      `git subtree push --prefix=libs/${lib.name} git@github.com:akan-team/${lib.name}.git ${branch}`
     );
     lib.logger.log(`${lib.name} library pushed to ${branch} branch`);
   }
   async pullLibrary(lib, branch) {
     await lib.workspace.exec(
-      `git subtree pull --quiet --prefix=libs/${lib.name} git@github.com:akan-team/${lib.name}.git ${branch}`
+      `git subtree pull --prefix=libs/${lib.name} git@github.com:akan-team/${lib.name}.git ${branch}`
     );
     lib.logger.log(`${lib.name} library pulled from ${branch} branch`);
   }
@@ -2165,6 +2266,12 @@ var LibraryScript = class {
     for (const libName of scanResult.akanConfig.libs)
       await this.syncLibrary(LibExecutor.from(lib.workspace, libName), { recursive: false });
   }
+  async createLibrary(libName, workspace) {
+    await this.#runner.createLibrary(libName, workspace);
+  }
+  async removeLibrary(lib) {
+    await this.#runner.removeLibrary(lib);
+  }
   async installLibrary(workspace, libName) {
     const lib = await this.#runner.installLibrary(workspace, libName);
     workspace.log(`${libName} library installed`);
@@ -2191,7 +2298,7 @@ var import_openai3 = require("@langchain/openai");
 var import_plugin_react = __toESM(require("@vitejs/plugin-react"));
 var import_dotenv3 = __toESM(require("dotenv"));
 var esbuild = __toESM(require("esbuild"));
-var import_fs12 = __toESM(require("fs"));
+var import_fs10 = __toESM(require("fs"));
 var import_promises2 = __toESM(require("fs/promises"));
 var import_js_yaml2 = __toESM(require("js-yaml"));
 var import_open = __toESM(require("open"));
@@ -2202,8 +2309,9 @@ var import_vite_plugin_node_polyfills = require("vite-plugin-node-polyfills");
 var import_vite_tsconfig_paths = __toESM(require("vite-tsconfig-paths"));
 
 // pkgs/@akanjs/cli/src/module/module.prompt.ts
-var import_fs11 = __toESM(require("fs"));
-var frameworkDescription = `\uB098\uB294 \uC880 \uB354 \uD6A8\uC728\uC801\uC73C\uB85C \uCF54\uB529\uC744 \uD558\uAE30 \uC704\uD574\uC11C \uC790\uCCB4 \uD504\uB808\uC784\uC6CC\uD06C\uB97C \uC81C\uC791\uD588\uC5B4. \uADF8\uB798\uC11C \uC6B0\uB9AC \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uC124\uBA85\uC744 \uD574\uC904\uD14C\uB2C8\uAE4C \uC798 \uC774\uD574\uD558\uB3C4\uB85D \uD574. \uC6B0\uB9AC \uD504\uB808\uC784\uC6CC\uD06C\uB294 next.js 13\uACFC nest.js, capacitor.js, nx, mongoDB \uAE30\uBC18\uC758 \uD504\uB860\uD2B8\uC5D4\uB4DC, \uC571, \uBC31\uC5D4\uB4DC \uD1B5\uD569 \uD504\uB808\uC784\uC6CC\uD06C\uC57C. \uADF8\uB798\uC11C \uBC31\uC5D4\uB4DC, \uD504\uB860\uD2B8\uC5D4\uB4DC, DB Schema\uC5D0 \uB300\uD55C \uCF54\uB4DC\uAC00 \uBAA8\uB450 \uD55C \uD3F4\uB354 \uC548\uC5D0 \uC788\uC5B4. \uADF8\uB798\uC11C \uC790\uBC14\uC2A4\uD06C\uB9BD\uD2B8, \uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8, \uADF8\uB9AC\uACE0 \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uC774\uD574\uB9CC \uC788\uB2E4\uBA74 \uAD6C\uBD84\uC9D3\uC9C0 \uC54A\uACE0 \uC0AC\uC6A9\uD560 \uC218 \uC788\uB2E4\uB294 \uC7A5\uC810\uC774 \uC788\uC5B4. 
+var frameworkDescription = `
+\uB098\uB294 \uC880 \uB354 \uD6A8\uC728\uC801\uC73C\uB85C \uCF54\uB529\uC744 \uD558\uAE30 \uC704\uD574\uC11C \uC790\uCCB4 \uD504\uB808\uC784\uC6CC\uD06C\uB97C \uC81C\uC791\uD588\uC5B4.
+\uADF8\uB798\uC11C \uC6B0\uB9AC \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uC124\uBA85\uC744 \uD574\uC904\uD14C\uB2C8\uAE4C \uC798 \uC774\uD574\uD558\uB3C4\uB85D \uD574. \uC6B0\uB9AC \uD504\uB808\uC784\uC6CC\uD06C\uB294 next.js 13\uACFC nest.js, capacitor.js, nx, mongoDB \uAE30\uBC18\uC758 \uD504\uB860\uD2B8\uC5D4\uB4DC, \uC571, \uBC31\uC5D4\uB4DC \uD1B5\uD569 \uD504\uB808\uC784\uC6CC\uD06C\uC57C. \uADF8\uB798\uC11C \uBC31\uC5D4\uB4DC, \uD504\uB860\uD2B8\uC5D4\uB4DC, DB Schema\uC5D0 \uB300\uD55C \uCF54\uB4DC\uAC00 \uBAA8\uB450 \uD55C \uD3F4\uB354 \uC548\uC5D0 \uC788\uC5B4. \uADF8\uB798\uC11C \uC790\uBC14\uC2A4\uD06C\uB9BD\uD2B8, \uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8, \uADF8\uB9AC\uACE0 \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uC774\uD574\uB9CC \uC788\uB2E4\uBA74 \uAD6C\uBD84\uC9D3\uC9C0 \uC54A\uACE0 \uC0AC\uC6A9\uD560 \uC218 \uC788\uB2E4\uB294 \uC7A5\uC810\uC774 \uC788\uC5B4. 
 
 \uAC00\uC7A5 \uC678\uBD80\uC758 \uAD6C\uC870\uB294
 - app
@@ -2721,6 +2829,433 @@ export const General = ({ className, \${dict.model}, self }: \${dict.Model}ViewP
 
 \uC77C\uB2E8 \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uC124\uBA85\uC740 \uC774 \uC815\uB3C4\uB85C \uD558\uACE0 \uC774 \uC815\uBCF4\uB4E4\uC744 \uAE30\uBC18\uC73C\uB85C \uB0B4\uAC00 \uC6D0\uD558\uB294 \uC694\uAD6C\uB97C \uB4E4\uC5B4\uC918.
 `;
+var moduleDesription = `
+
+The project follows a modular architecture with clear separation of concerns. Each module in lib/<model>/ represents a domain
+entity with a standardized file structure that promotes consistency and maintainability.
+
+## Core Components
+
+### <Model>.View.tsx
+Presentation-only components that render data without managing state. 
+It works as a server component, They accept model data as props and display it according to specific layouts.
+These components focus purely on how data looks to the user. 
+only use the full model.
+This component is only viewing the component. So don't use click event or other interaction events.
+If you need interaction, possible to wrapping the component with the <Model>.Zone.tsx component.
+But useable the Link component for navigation.
+Components created in Model.View.tsx should primarily be made to show the entire detailed data of the model rather than showing only partial data of the model.
+
+
+### <Model>.Template.tsx
+Reusable layout patterns with integrated state management. It works as a client component, These components provide consistent UI patterns and handle data
+binding, often using store hooks to access application state.
+
+### <Model>.Unit.tsx
+Small, self-contained UI components representing individual model instances. It works as a server component, They're designed for rendering single items in
+lists or grids, displaying model data in compact formats. only use the light model.
+
+### <Model>.Zone.tsx
+Top-level container components that orchestrate other components. It works as a client component, They compose views, templates, and units into complete UI
+sections while managing data flow to child components.
+
+### <Model>.Util.tsx
+Specialized components and utility functions specific to a model, It works as a client component, providing both UI components and helper functions for
+model-specific functionality.
+
+## Data Management
+
+### <model>.signal.ts
+Defines API endpoints with type safety using decorators for GraphQL queries and mutations, creating a type-safe bridge between
+frontend and backend.
+
+### <model>.store.ts
+Manages client-side state with typed actions and state, handling UI state, form state, and cached data.
+
+### <model>.service.ts
+Implements server-side business logic with dependency injection, handling data processing and complex operations.
+
+### <model>.constant.ts
+Defines type definitions and model schemas using decorators to structure model fields, validation, and relationships.
+
+### <model>.dictionary.ts
+Provides internationalization and label definitions for model properties and operations.
+
+### <model>.document.ts
+Defines database schema and model operations with decorators for database interaction.
+
+## Data Flow
+The architecture follows a clear data flow pattern:
+- Server-side: Document \u2192 Service \u2192 Signal \u2192 API
+- Client-side: API \u2192 Store \u2192 Components (Zone \u2192 Template/View/Unit)
+
+This modular structure enables rapid development while maintaining consistency, type safety, and testability throughout the
+application.
+`;
+var utilUiDescription = `
+  This UI kit is an internally developed UI kit within the Akan.js framework. 
+  The libs/util/ui directory contains a comprehensive React component library designed for modern web applications. 
+  This framework provides a complete set of production-ready, reusable UI components with consistent styling, type safety, and advanced functionality.
+
+  - Every component must be used exactly as described in the documentation.
+  - Do not add any additional props to the components.
+  - Must use the written props exactly.
+  - Only the components explicitly listed in the documentation are available\u2014no additional components exist beyond those specified.
+
+
+
+  Architecture & Foundation
+
+  Core Technologies:
+  - Built on React 18+ with TypeScript for strict type safety
+  - Styled with Tailwind CSS and DaisyUI for consistent design system
+  - Implements modern React patterns including hooks, context providers, and portals
+  - Full internationalization (i18n) support for multilingual applications
+  - Responsive-first design with mobile optimization
+
+  Design Principles:
+  - Composable component architecture with predictable APIs
+  - Accessibility (a11y) compliance throughout
+  - Performance optimization with lazy loading and code splitting
+  - Consistent error handling and validation patterns
+  - Session storage integration for form state persistence
+
+  Component Categories
+
+  Core Input Components
+
+  Essential form controls with advanced validation and user experience features:
+  - Button - Async-aware button with automatic loading/success/error states
+  - Input - Comprehensive input system with real-time validation, multiple variants (Text, Password, Email, Number, Checkbox), and
+   session caching
+  - Select - Advanced dropdown with search, multi-select, and custom rendering
+  - DatePicker - Date/time selection with range support and custom formatting
+  - CodeInput - PIN/verification code input with auto-focus management
+  - Upload - File upload system with drag-drop, progress tracking, image cropping, and multiple file support
+
+  Data Display Components
+
+  Components for presenting and organizing information:
+  - Chart - Visualization suite (Bar, Line, Pie, Doughnut) built on Chart.js
+  - Avatar - User profile images with intelligent fallbacks
+  - ChatBubble - Chat interface with message grouping and timestamps
+  - Empty - Customizable empty state displays
+  - QRCode - QR code generation with click-to-open functionality
+
+  Layout & Navigation System
+
+  Comprehensive layout framework for application structure:
+  - Layout - Complete layout system with Header (auto-hide), Sider (collapsible), Navbar (portal-based), BottomTab (with badges),
+  and container components
+  - Modal/Dialog - Composable dialog system with backdrop, animations, and gesture support
+  - BottomSheet - Mobile-optimized bottom sheet with drag gestures
+  - Menu - Navigation menus with horizontal/vertical modes and submenu support
+  - Tab - Tabbed interfaces with lazy loading and scroll management
+  - ScreenNavigator - Gesture-based screen navigation with spring animations
+
+  Interactive Components
+
+  Advanced user interaction components:
+  - Pagination - Smart page navigation with ellipsis and responsive design
+  - InfiniteScroll - Automatic content loading with intersection observer
+  - DndKit - Drag and drop functionality with provider pattern
+  - Radio - Radio button groups with custom styling
+  - ToggleSelect - Button-based selection with single/multi-select modes
+  - Share - Native share API with copy fallback
+
+  Utility & Feedback Components
+
+  Supporting components for enhanced user experience:
+  - Loading - Comprehensive loading states (Area, Button, Input, Skeleton, Spin, ProgressBar) with animations
+  - Link - Adaptive navigation links with SSR/CSR compatibility
+  - MapView - Map integration supporting both Google Maps and Pigeon Maps with markers and overlays
+  - Image - Optimized image component with blur placeholders and SSR support
+  - Portal - Teleportation component for rendering outside component tree
+
+  Advanced Features
+
+  State Management Integration
+
+  - Context-driven architecture for complex components
+  - Signal-based real-time communication components
+  - Session storage integration for form persistence
+  - Theme-aware styling with automatic adaptation
+
+  Performance Optimizations
+
+  - Lazy loading support for heavy components
+  - Code splitting at component level
+  - Optimized re-rendering with React.memo patterns
+  - Intersection Observer for scroll-based interactions
+
+  Developer Experience
+
+  - Comprehensive TypeScript interfaces for all props
+  - Consistent naming conventions and API patterns
+  - Built-in error boundaries and fallback handling
+  - Extensive JSDoc documentation
+  - Hot reload support for development
+
+  Accessibility & Internationalization
+
+  - ARIA attributes and keyboard navigation support
+  - Screen reader compatibility
+  - RTL (right-to-left) language support
+  - Localized date/time formatting
+  - Color contrast compliance
+
+  Usage Patterns
+
+  The library follows a consistent component composition pattern where complex components are built from smaller, focused
+  subcomponents. For example:
+
+  - Chart.Bar, Chart.Line for different visualization types
+  - Dialog.Modal, Dialog.Title, Dialog.Content for composable modals
+  - Layout.Header, Layout.Sider, Layout.Navbar for layout construction
+  - Upload.File, Upload.Image, Upload.Images for different upload scenarios
+
+  This design enables maximum flexibility while maintaining consistency across the application. Components are designed to work
+  seamlessly together, sharing common styling patterns, validation systems, and state management approaches.
+
+  The library serves as a comprehensive foundation for building modern, accessible, and performant web applications with a focus
+  on developer productivity and end-user experience.
+
+ Avatar
+  - Displays user profile images with automatic fallback to user icon
+  - Props: className?: string, icon?: ReactNode, src?: string
+
+  Button
+  - Enhanced button with automatic loading states and error handling
+  - Props: onClick: (e, {onError}) => Promise<Result>, onSuccess?: (result) => void, className?, children, standard button props
+
+  Input
+  - Comprehensive input system with real-time validation and caching
+  - Props: value: string, validate: (value) => boolean | string, onChange?, nullable?, inputStyleType?: "bordered" | "borderless" 
+  | "underline", icon?, cacheKey?
+  - Variants: Input.TextArea, Input.Password, Input.Email, Input.Number, Input.Checkbox
+
+  Select
+  - Advanced dropdown with search and multi-select capabilities
+  - Props: value: T | T[], options: {label, value}[], multiple?, searchable?, onChange, onSearch?, renderOption?, renderSelected?
+
+  DatePicker
+  - Date/time picker with range selection support
+  - Props: value?: Dayjs, onChange, showTime?, format?, disabledDate?
+  - Variants: DatePicker.RangePicker, DatePicker.TimePicker
+
+  CodeInput
+  - PIN/code input with individual character boxes
+  - Props: maxNum: number, value: string, onChange, unitStyle?: "box" | "underline", autoComplete?
+
+  Display Components
+
+  Table
+  - Feature-rich data table with pagination and responsive design
+  - Props: columns: Column[], dataSource: any[], loading?, pagination?, onRow?, rowClassName?
+
+  Modal
+  - Dialog modal with backdrop and action buttons
+  - Props: open: boolean, onCancel, title?, action?, confirmClose?
+  - Variants: Modal.Window
+
+  Image
+  - Optimized image component with blur placeholder and SSR support
+  - Props: src?, file?: ProtoFile, abstractData?, alt?, standard Next.js Image props
+
+  ChatBubble
+  - Chat message bubble with avatar and timestamp
+  - Props: avatar?, hasPrev?, hasNext?, isMe?, name?, at?: Dayjs, children
+
+  Empty
+  - Empty state placeholder with customizable message
+  - Props: description?, minHeight?, children?
+
+  QRCode
+  - QR code generator with click-to-open functionality
+  - Props: href: string, className?
+
+  Layout Components
+
+  BottomSheet
+  - Only mobile bottom sheet with drag gestures
+  - Props: open: boolean, onCancel, type: "full" | "half", children
+
+  Layout
+  Layout - Complete layout framework with responsive design
+  - Layout.Header - Top header with auto-hide functionality
+    - Props: className?: string, type?: "static" | "hide", children?: any, height?: number
+    - Features: Auto-hide on scroll, fixed positioning
+  - Layout.Sider - Collapsible sidebar
+    - Props: className?: string, bgClassName?: string, children?: any
+    - Features: Drawer-based with toggle functionality
+  - Layout.Navbar - Navigation bar with portal content
+    - Props: className?: string, children?: ReactNode, height?: 
+
+  Menu
+  - Navigation menu with horizontal/vertical modes and submenu support
+  - Props: items: MenuItem[], mode?: "horizontal" | "inline", selectedKeys?, onClick?, inlineCollapsed?
+
+
+  Tab 
+  - Tabbed interface system
+    - Tab.Provider - Tab context provider
+      - Props: className?: string, defaultMenu?: string | null, children?: any
+    - Tab.Menu - Tab menu item
+      - Props: className?: string, activeClassName?: string, disabledClassName?: string, disabled?: boolean, menu: string, children:
+    any, scrollToTop?: boolean, tooltip?: string
+    - Tab.Panel - Tab content panel
+      - Props: className?: string, menu: string, children?: any, loading?: "eager" | "lazy" | "every"
+      - Features: Lazy loading support
+
+  ScreenNavigator 
+  - Gesture-based screen navigation
+  - ScreenNavigator.Provider - Navigation context provider
+    - Props: setMenu?: (menu: string) => void, children: ReactNode, menus: string[]
+    - Features: Gesture-based navigation, spring animations
+  - ScreenNavigator.Screen - Individual screen container
+    - Props: children: ReactNode, className?: string
+  - ScreenNavigator.NavbarItem - Navigation bar item
+    - Props: menu: string, children: ReactNode, className?: string    
+
+  Upload 
+  - File upload system with multiple modes
+    - Upload 
+    - Basic file upload with drag & drop
+    - Props: onChange?: (fileList: FileList) => void; multiple?: boolean; accept?: string; className?: string; uploadClassName?: string; children: React.ReactNode; disabled?: boolean;
+    - Upload.File 
+      - Single file upload with preview
+      - Props: multiple?: boolean; file: ProtoFile | null; render?: (file: ProtoFile) => React.ReactNode; onChange?: (e: File | FileList) => void | Promise<void>; onRemove?: (e: any) => void; children?: React.ReactNode; disabled?: boolean; maxCount?: number; className?: string; uploadClassName?: string; accept?: string;
+    - Upload.FileList 
+      - Multiple files with table view and progress tracking
+      - Props: multiple?: boolean; fileList: ProtoFile[]; render?: (file: ProtoFile) => React.ReactNode; onChange?: (e: File | FileList) => void | Promise<void>; onRemove?: (e: any) => void; children?: React.ReactNode; disabled?: boolean; maxCount?: number; className?: string; uploadClassName?: string; accept?: string;
+    - Upload.Image 
+      - Image upload with integrated cropping functionality
+      - Props: multiple?: boolean; file: ProtoFile | null; render?: (file: ProtoFile) => React.ReactNode; onChange?: (e: File | FileList) => void | Promise<void>; onRemove?: (e: any) => void; children?: React.ReactNode; disabled?: boolean; maxCount?: number; className?: string; uploadClassName?: string; accept?: string;
+    - Upload.Images 
+      - Multiple image upload with gallery preview
+      - Props: multiple?: boolean; fileList: ProtoFile[]; render?: (file: ProtoFile) => React.ReactNode; onChange?: (e: File | FileList) => void | Promise<void>; onRemove?: (e: any) => void; children?: React.ReactNode; disabled?: boolean; maxCount?: number; className?: string; uploadClassName?: string; accept?: string;
+
+  DndKit 
+  - Drag and drop functionality built on @dnd-kit
+    - DndKit.Provider 
+      - DnD context provider
+      - Props: className?: string + all DndContextProps
+    - DndKit.DraggableUnit 
+      - Draggable item wrapper
+      - Props: id: string, children: ReactNode, className?: string, onClick?: () => void | Promise<void>
+    - DndKit.DroppableColumn 
+      - Drop target column
+      - Props: id: string, items: T[], className?: string, children: ReactNode, onOver?: (id, items, event) => void, onEnd?: (id, 
+        item, event) => void
+
+  MapView 
+  - Map integration with multiple providers
+    - MapView.Map 
+    - Main map container with theme awareness
+    - Props: className?: string, onLoad?: () => void, onClick?: (coordinate) => void, onRightClick?: (coordinate) => void,
+  onMouseMove?: (coordinate) => void, children: any
+  - MapView.Marker 
+    - Map marker component
+    - Props: coordinate: cnst.Coordinate, zIndex?: number, children?: any
+  - MapView.Google 
+    - Google Maps implementation
+    - Props: id?: string, className?: string, mapKey: string, onClick/onRightClick?: (coordinate) => void, center?: 
+      cnst.Coordinate, onChangeCenter?: (coordinate) => void, zoom?: number, onChangeZoom?: (zoom) => void, bounds?: {minLat, maxLat, 
+      minLng, maxLng}, onLoad?: () => void, onMouseMove?: (coordinate, event) => void, options?: google.maps.MapOptions, children: any
+  - MapView.Pigeon 
+    - Pigeon Maps implementation (lightweight alternative)
+    - Props: id?: string, className?: string, onLoad?: () => void, onClick/onRightClick?: (coordinate) => void, center?: 
+      cnst.Coordinate, onChangeCenter?: (coordinate) => void, zoom?: number, onChangeZoom?: (zoom) => void, bounds?: {minLat, maxLat, 
+      minLng, maxLng}, onChangeBounds?: (bounds) => void, mouseEvents?: boolean, onMouseMove?: (coordinate) => void, mapTiler?: (x, y,
+      z, dpr) => string, children?: any, zoomControlStyle?: CSSProperties
+
+
+  Pagination
+  - Page navigation with smart ellipsis and responsive design
+  - Props: currentPage: number, total: number, onPageSelect, itemsPerPage: number
+
+  Radio
+  - Radio button group with custom styling support
+  - Props: value, children: ReactElement[], onChange, disabled?
+
+  ToggleSelect
+  - Button-based selection with single/multi-select modes
+  - Props: items, value, validate, onChange, nullable
+  - Variants: ToggleSelect.Multi
+
+  Share
+  - Native share API with copy fallback
+  - Props: title: string, url: string, children
+
+  Specialized Component Groups
+
+  Chart 
+  - Visualization components built on Chart.js and react-chartjs-2
+    - Chart.Bar - Bar chart component
+      - Props: data: ChartData<"bar">, options?: ChartOptions<"bar">
+      - Features: Responsive layout, legend display, title configuration
+    - Chart.Line - Line chart component
+      - Props: data: ChartData<"line">, options?: ChartOptions<"line">
+      - Features: Line-specific Chart.js configuration with curve interpolation
+    - Chart.Pie - Pie chart component
+      - Props: data: ChartData<"pie">, options?: ChartOptions<"pie">
+      - Features: ArcElement rendering, responsive design
+    - Chart.Doughnut - Doughnut chart component
+      - Props: data: ChartData<"doughnut">, options?: ChartOptions<"doughnut">
+      - Features: Similar to pie but with center cutout
+
+   Dialog 
+   - Composable modal dialog system built on Radix UI
+    - Dialog.Provider - Dialog context provider
+      - Props: className?: string, open?: boolean, defaultOpen?: boolean, children?: any
+    - Dialog.Modal - Main modal container
+      - Props: className?: string, bodyClassName?: string, confirmClose?: boolean, children?: any, onCancel?: () => void
+      - Features: Drag gestures, spring animations, responsive design, close confirmation
+    - Dialog.Title - Modal title component
+      - Props: children?: ReactNode
+    - Dialog.Content - Modal content area
+      - Props: className?: string, children?: ReactNode
+    - Dialog.Action - Modal action buttons container
+      - Props: children?: ReactNode
+    - Dialog.Trigger - Modal trigger element
+      - Props: className?: string, children?: any
+
+    Link 
+    - Adaptive navigation system
+      - Link 
+        - Main adaptive link (auto-switches between CSR/Next.js based on render mode)
+        - Link.Back - Back navigation link
+          - Props: className?: string, children?: any
+          - Features: Browser history integration
+        - Link.Close - Window close link
+          - Props: Similar to Back but closes window
+        - Link.CsrLink & Link.NextLink - Environment-specific implementations with active state support
+
+
+   Loading 
+  - Loading states for different UI elements
+    - Loading.Area - Full-screen loading overlay with animated dots
+    - Loading.Button - Button loading skeleton
+      - Props: className?: string, active?: boolean, style?: CSSProperties
+    - Loading.Input - Input loading skeleton
+    - Loading.Skeleton - Multi-line content skeleton with pulse animation
+    - Loading.Spin - Custom loading spinner
+      - Props: indicator?: ReactNode, isCenter?: boolean
+    - Loading.ProgressBar - Animated progress bar
+      - Props: className?: string, value: number, max: number
+      - Features: React Spring animations
+
+  Key Framework Features
+  
+  - TypeScript support with strict typing
+  - Responsive design with mobile-first approach
+  - Internationalization (i18n) integration
+  - Session storage caching for form inputs
+  - Accessibility compliance
+  - Consistent DaisyUI/Tailwind CSS styling
+  - Modern React patterns (hooks, context, providers)
+  - Error handling and validation systems
+  `;
 var frameworkAbstract = `
 Intro
 - Build an all-stack application at once.
@@ -2740,7 +3275,66 @@ Procedure
 - No Spaghetti Components anymore, build your page with domain-driven components
 - write one page, use SSR on Next.js and build Android&iOS CSR app with beautiful page transitions!
 - built-in ai code generation, tell about business, the logic is generated.
+
+
 `;
+var eslintDescription = `
+Core ESLint Extensions
+
+  Base Configurations:
+  - eslint:recommended - Standard ESLint recommended rules
+  - next & next/core-web-vitals - Next.js specific linting rules
+  - @typescript-eslint/recommended-type-checked - TypeScript recommended rules with type checking
+  - @typescript-eslint/strict-type-checked - Strict TypeScript type checking rules
+  - @typescript-eslint/stylistic-type-checked - TypeScript stylistic rules with type checking
+
+  Third-Party Plugins
+
+  1. eslint-plugin-unused-imports
+  - Automatically detects and warns about unused imports
+  - Helps keep code clean by removing unnecessary import statements
+
+  2. eslint-plugin-simple-import-sort
+  - Automatically sorts import statements in a consistent order
+  - Enforces clean import organization throughout the codebase
+
+  Custom Plugin: @akanjs/lint
+
+  1. useClientByFile
+  - Enforces proper "use client" directive usage in Next.js App Router
+  - Server files must NOT have "use client" directive
+  - Client files MUST have "use client" directive at the top
+
+  2. noImportClientFunctions
+  - Prevents server files from importing client-side functions
+  - Ensures proper separation between server and client code
+
+  3. nonScalarPropsRestricted
+  - Prevents non-scalar props (functions) in server components
+  - Specifically targets page.tsx and layout.tsx files
+  - Allows exceptions for specific props like "loader", "render", and "of"
+
+  4. noImportExternalLibrary
+  - Restricts external library imports in pure import/re-export files
+  - Only allows imports from the same app scope (@appName/...)
+  - Promotes clean architecture and prevents dependency leakage
+
+  Key Rule Configurations
+
+  Disabled Rules:
+  - no-console: "error" - Prevents console statements in production code
+  - Various TypeScript strict rules are disabled for flexibility
+  - React and Next.js specific rules are relaxed for development ease
+
+  Import Management:
+  - unused-imports/no-unused-imports: "warn" - Warns about unused imports
+  - simple-import-sort/imports: "warn" - Enforces import sorting
+  - import/first: "warn" - Ensures imports come first
+  - import/newline-after-import: "warn" - Enforces newline after imports
+
+  This configuration creates a robust linting setup that enforces Next.js App Router best practices, maintains clean code
+  organization, and ensures proper server/client code separation.
+  `;
 var scalarConstantDescription = `
 Purpose and Structure
 
@@ -3095,10 +3689,10 @@ ${frameworkAbstract}
 2. <model>.constant.ts \uD30C\uC77C\uC5D0 \uB300\uD55C \uAC1C\uC694
 ${scalarConstantDescription}
 
-3. <model.constant.ts \uD30C\uC77C\uC758 Enum \uC791\uC131\uBC95
+3. <model>.constant.ts \uD30C\uC77C\uC758 Enum \uC791\uC131\uBC95
 ${howToSetEnumInModelConstant}
 
-4. <model.constant.ts \uD30C\uC77C\uC758 Field \uC791\uC131\uBC95
+4. <model>.constant.ts \uD30C\uC77C\uC758 Field \uC791\uC131\uBC95
 ${howToSetFieldInModelConstant}
 
 5. \uD604\uC7AC \uD504\uB85C\uC81D\uD2B8 \uB0B4 \uB2E4\uB978 constant.ts \uD30C\uC77C\uB4E4\uC5D0 \uB300\uD55C \uC608\uC2DC
@@ -3123,6 +3717,87 @@ Target filename: ${modelName}.constant.ts
 \`\`\`
 ${boilerplate}
 \`\`\`
+`;
+var requestView = ({
+  sysName,
+  modelName,
+  ModelName,
+  boilerplate,
+  constant,
+  properties,
+  exampleFiles
+}) => `
+  
+
+1. Akan.js \uD504\uB808\uC784\uC6CC\uD06C\uC5D0 \uB300\uD55C \uAC1C\uC694
+${frameworkAbstract}
+
+2. Akan.js\uD504\uB808\uC784\uC6CC\uD06C \uB370\uC774\uD130 \uAE30\uBC18 \uBAA8\uB4C8\uC5D0 \uB300\uD55C \uAC1C\uC694
+${moduleDesription}
+
+3. Akan.js eslint \uC124\uC815\uC5D0 \uB300\uD55C \uAC1C\uC694
+${eslintDescription}
+
+4. util/ui \uB0B4 ui\uD0B7\uC5D0 \uB300\uD55C \uAC1C\uC694
+${utilUiDescription}
+
+
+
+5. ${ModelName}.constant.ts \uD30C\uC77C\uC5D0 \uB300\uD55C \uC815\uBCF4
+${constant}
+
+6. ${modelName}\uC5D0\uC11C \uC885\uC18D\uB418\uB294 \uB2E4\uB978 \uBAA8\uB378\uB4E4\uC758 \uD0C0\uC785 \uC815\uC758
+${properties.map(
+  (property) => `
+  \`\`\`
+  ${property.key}.constant.ts
+  
+
+  ${property.source}
+  \`\`\`
+  `
+).join("\n\n")}
+
+
+  7. \uC608\uC2DC \uD30C\uC77C\uB4E4
+  ${exampleFiles.map(
+  (example) => `
+    Example filename: ${example.filepath}
+    \`\`\`
+    ${example.content}
+    \`\`\`
+  `
+).join("\n\n")}
+
+
+
+Application name: ${sysName}
+Model name: ${modelName}
+Target filename: ${ModelName}.View.tsx
+
+
+\uB108\uB294 Akan.js\uB77C\uB294 \uC0AC\uB0B4 \uD504\uB808\uC784\uC6CC\uD06C\uB85C Typescript \uAE30\uBC18 \uD504\uB85C\uADF8\uB7A8\uC744 \uC791\uC131\uD558\uB294 \uC2DC\uB2C8\uC5B4 \uAC1C\uBC1C\uC790\uC57C.
+\uADF8 \uC911\uC5D0\uC11C\uB3C4 \uD504\uB860\uD2B8\uC5D4\uB4DC \uAC1C\uBC1C\uC790.  
+\uB9CC\uC57D\uC5D0 \uC544\uC774\uCF58 \uC0AC\uC6A9\uC774 \uD544\uC694\uD558\uBA74 react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC\uC5D0\uC11C \uC801\uD569\uD55C \uC544\uC774\uCF58\uC744 \uCC3E\uC544\uC11C \uC0AC\uC6A9\uD574\uC918.
+\uB610, \uC0C9\uC0C1\uC744 \uC0AC\uC6A9\uD558\uB824\uACE0 \uD558\uBA74 \uD558\uB4DC\uCF54\uB529\uB41C \uC0C9\uC0C1(bg-red)\uC774 \uC544\uB2CC \uD14C\uB9C8 \uC0C9\uC0C1(bg-primary)\uC744 \uC0AC\uC6A9\uD574\uC11C \uC791\uC131\uD574\uC918.
+\uADF8\uB9AC\uACE0 optional\uD55C \uD544\uB4DC\uB294 field && <div>... \uAC00 \uC544\uB2CC, field ? <div>... : null \uD615\uD0DC\uB85C \uC791\uC131\uD574\uC918.
+css\uB77C\uC774\uBE0C\uB7EC\uB9AC\uB294 DaisyUI\uB97C \uAE30\uBC18\uC73C\uB85C \uC791\uC131\uD574\uC8FC\uB294\uB370, btn, input, badge\uC640 \uAC19\uC740 \uB2E8\uC21C\uD55C \uAE30\uBCF8 css\uB294 \uC0AC\uC6A9\uD574\uB3C4 \uAD1C\uCC2E\uC544. \uADF8\uB7F0\uB370 card, hero\uAC19\uC774 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uC0AC\uC6A9\uD558\uBA74 \uC548\uB3FC.
+\uBAA8\uB378\uC5D0 \uB300\uD574\uC11C object destructuring\uC740 \uD558\uC9C0\uB9D0\uACE0 ${modelName}.field \uD615\uD0DC\uB85C \uC811\uADFC\uD558\uACE0, \uD0C0\uC785\uC5D0 \uC5D0\uB7EC\uB294 \uC808\uB300\uB85C \uBC1C\uC0DD\uD558\uC9C0 \uC54A\uB3C4\uB85D ${modelName}.constant.ts\uC5D0 \uC791\uC131\uB418\uC788\uB294 \uC2A4\uD0A4\uB9C8\uB97C \uBCF4\uACE0 \uC791\uC131\uD574.
+\uC870\uAC74\uBD80 className\uC774 \uD544\uC694\uD55C \uACBD\uC6B0\uC5D0\uB294 clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB97C \uC0AC\uC6A9\uD574\uC57C\uB3FC.
+\uBAA8\uB4E0 \uBAA8\uB378 \uD544\uB4DC\uC5D0 \uC811\uADFC\uD558\uAE30 \uC804\uC5D0, \uAC01 \uC2A4\uD0A4\uB9C8\uC758 \uC2E4\uC81C \uD544\uB4DC \uB9AC\uC2A4\uD2B8\uB97C \uC791\uC131\uD558\uACE0 \uAC80\uD1A0\uD574. \uD2B9\uD788 \uC911\uCCA9\uB41C \uAC1D\uCCB4( ex) XXX.XXX.XXX )\uC5D0 \uC811\uADFC\uD560 \uB54C\uB294 \uB354\uC6B1 \uC8FC\uC758\uD574.
+\uB610\uD55C ${modelName}\uACFC \uC885\uC18D\uC131\uC774 \uC788\uB294 \uB2E4\uB978 \uBAA8\uB378\uB4E4\uC758 \uD0C0\uC785\uB4E4\uB3C4 \uBAA8\uB450 \uC704\uBC30\uD558\uC9C0\uB9D0\uACE0 \uC798 \uD30C\uC545\uD558\uACE0 \uC791\uC131\uD574.
+\uC704\uC5D0\uC11C \uC124\uBA85\uD55C \uBAA8\uB4E0 \uB8F0\uACFC \uC124\uBA85, \uD0C0\uC785\uC744 \uC808\uB300\uB85C \uC704\uBC30\uD558\uC9C0\uB9D0\uACE0 \uC798 \uD30C\uC545\uD558\uACE0 \uC791\uC131\uD574.(\uAC01 \uB370\uC774\uD130\uC758 \uD0C0\uC785, \uCEF4\uD3EC\uB10C\uD2B8\uC758 props\uB4F1...)
+\uC124\uBA85\uD55C \uB0B4\uC6A9 \uC774\uC678\uC5D0 \uB0B4\uC6A9\uC73C\uB85C \uB2C8\uAC00 \uCD94\uC0C1\uD574\uC11C \uC4F0\uC9C0\uB9D0\uACE0 \uC704\uC5D0 \uBA85\uC2DC\uB418\uC788\uB294 \uB8F0 \uC548\uC5D0\uC11C\uB9CC \uC791\uC131\uD574. \uC788\uC9C0\uB3C4 \uC54A\uC740 \uAC83\uB4E4 \uB9CC\uB4E4\uC5B4\uC11C \uCD94\uC0C1\uD654 \uC2DC\uCF1C\uC11C \uC790\uAFB8 \uC4F0\uB294 \uC77C\uC740 \uC808\uB300\uB85C \uD558\uC9C0\uB9C8.
+\uD2B9\uD788\uB098 \uBC29\uAE08 \uB9D0\uD55C \uC774 \uC704 \uB450 \uBB38\uC7A5\uC740 \uC808\uB300\uC801\uC73C\uB85C \uC9C0\uCF1C\uC57C \uD560 \uB8F0\uC774\uC57C \uC791\uC131\uD560 \uB54C \uD56D\uC0C1 \uC9C0\uD0A4\uACE0 \uB530\uB77C.
+${ModelName}.View.tsx \uCF54\uB4DC\uB97C \uC791\uC131\uD574\uC918. \uC77C\uBC18\uC801\uC73C\uB85C \uC0AC\uC6A9\uD560 \uC218 \uC788\uB294 \uB514\uC790\uC778\uC758 \uCEF4\uD3EC\uB10C\uD2B8\uB97C 4\uAC1C \uC815\uB3C4 \uB9CC\uB4E4\uC5B4\uC918. (ex card, table...) 
+\uC608\uC2DC \uB4E4\uC5B4\uC92C\uB2E4\uACE0 \uC608\uC2DC\uB9CC \uB9CC\uB4E4\uC9C0 \uB9D0\uACE0 \uB2C8 \uC0DD\uAC01\uC5D0 \uC77C\uBC18\uC801\uC73C\uB85C \uC0AC\uC6A9\uD55C\uB2E4 \uD558\uB294 \uCEF4\uD3EC\uB10C\uD2B8\uB85C \uC0DD\uAC01\uD574\uC11C \uB9CC\uB4E4\uC5B4.
+
+Target filename: ${ModelName}.View.tsx
+  \`\`\`
+  
+  \`\`\`
+
+ 
 `;
 
 // pkgs/@akanjs/cli/src/application/application.prompt.ts
@@ -3174,6 +3849,10 @@ var ApplicationRunner = class {
     workspace.setTsPaths("app", appName);
     return AppExecutor.from(workspace, appName);
   }
+  async removeApplication(app) {
+    await app.workspace.exec(`rm -rf apps/${app.name}`);
+    app.log(`Application ${app.name} removed`);
+  }
   async scanSync(app) {
     const akanConfig = await getAppConfig(app.cwdPath, {
       ...app.workspace.getBaseDevEnv(),
@@ -3281,11 +3960,11 @@ var ApplicationRunner = class {
     ]);
     app.dist.writeFile("frontend/Dockerfile", akanConfig.frontend.dockerfile);
   }
-  async serveFrontend(app, { open: open2 = false } = {}) {
+  async serveFrontend(app, { open: open2 = false, turbo = true } = {}) {
     const { env } = await this.#prepareCommand(app, "serve", "frontend");
     if (open2)
       setTimeout(() => (0, import_open.default)("http://localhost:4200"), 3e3);
-    await app.spawn("npx", ["next", "dev", "-p", "4200"], { env });
+    await app.spawn("npx", ["next", "dev", "-p", "4200", ...turbo ? ["--turbo"] : []], { env });
   }
   async #getViteConfig(app) {
     const { env } = await this.#prepareCommand(app, "build", "csr");
@@ -3366,7 +4045,7 @@ var ApplicationRunner = class {
       setTimeout(() => (0, import_open.default)("http://localhost:4201"), 3e3);
   }
   async #prepareIos(app) {
-    const isAdded = import_fs12.default.existsSync(`${app.cwdPath}/ios/App/Podfile`);
+    const isAdded = import_fs10.default.existsSync(`${app.cwdPath}/ios/App/Podfile`);
     if (!isAdded) {
       await app.spawn("npx", ["cap", "add", "ios"]);
       await app.spawn("npx", ["@capacitor/assets", "generate"]);
@@ -3401,7 +4080,7 @@ var ApplicationRunner = class {
     await capacitorApp.releaseIos();
   }
   async #prepareAndroid(app) {
-    const isAdded = import_fs12.default.existsSync(`${app.cwdPath}/android/app/build.gradle`);
+    const isAdded = import_fs10.default.existsSync(`${app.cwdPath}/android/app/build.gradle`);
     if (!isAdded) {
       await app.spawn("npx", ["cap", "add", "android"]);
       await app.spawn("npx", ["@capacitor/assets", "generate"]);
@@ -3483,14 +4162,14 @@ var ApplicationRunner = class {
     const buildRoot = `${app.workspace.workspaceRoot}/releases/builds/${app.name}`;
     const appVersionInfo = import_js_yaml2.default.load(app.readFile("config.yaml"));
     const platformVersion = appVersionInfo.platforms.android.versionName;
-    if (import_fs12.default.existsSync(buildRoot))
+    if (import_fs10.default.existsSync(buildRoot))
       await import_promises2.default.rm(buildRoot, { recursive: true, force: true });
     await import_promises2.default.mkdir(buildRoot, { recursive: true });
-    if (rebuild || !import_fs12.default.existsSync(`${app.dist.cwdPath}/backend`))
+    if (rebuild || !import_fs10.default.existsSync(`${app.dist.cwdPath}/backend`))
       await this.buildBackend(app);
-    if (rebuild || !import_fs12.default.existsSync(`${app.dist.cwdPath}/frontend`))
+    if (rebuild || !import_fs10.default.existsSync(`${app.dist.cwdPath}/frontend`))
       await this.buildFrontend(app);
-    if (rebuild || !import_fs12.default.existsSync(`${app.dist.cwdPath}/csr`))
+    if (rebuild || !import_fs10.default.existsSync(`${app.dist.cwdPath}/csr`))
       await this.buildCsr(app);
     const buildVersion = `${platformVersion}-${buildNum}`;
     const buildPath = `${buildRoot}/${buildVersion}`;
@@ -3505,7 +4184,7 @@ var ApplicationRunner = class {
       buildRoot,
       "./"
     ]);
-    if (import_fs12.default.existsSync(`${app.dist.cwdPath}/csr`)) {
+    if (import_fs10.default.existsSync(`${app.dist.cwdPath}/csr`)) {
       await import_promises2.default.cp(`${app.dist.cwdPath}/csr`, "./csr", { recursive: true });
       await app.workspace.spawn("zip", [
         "-r",
@@ -3515,7 +4194,7 @@ var ApplicationRunner = class {
       await import_promises2.default.rm("./csr", { recursive: true, force: true });
     }
     const sourceRoot = `${app.workspace.workspaceRoot}/releases/sources/${app.name}`;
-    if (import_fs12.default.existsSync(sourceRoot)) {
+    if (import_fs10.default.existsSync(sourceRoot)) {
       const MAX_RETRY = 3;
       for (let i = 0; i < MAX_RETRY; i++) {
         try {
@@ -3535,7 +4214,7 @@ var ApplicationRunner = class {
     await Promise.all(
       [".next", "ios", "android", "public/libs"].map(async (path7) => {
         const targetPath = `${sourceRoot}/apps/${app.name}/${path7}`;
-        if (import_fs12.default.existsSync(targetPath))
+        if (import_fs10.default.existsSync(targetPath))
           await import_promises2.default.rm(targetPath, { recursive: true, force: true });
       })
     );
@@ -3563,8 +4242,8 @@ var ApplicationRunner = class {
         []
       )
     ]);
-    import_fs12.default.writeFileSync(`${sourceRoot}/tsconfig.json`, JSON.stringify(tsconfig, null, 2));
-    import_fs12.default.writeFileSync(
+    import_fs10.default.writeFileSync(`${sourceRoot}/tsconfig.json`, JSON.stringify(tsconfig, null, 2));
+    import_fs10.default.writeFileSync(
       `${sourceRoot}/README.md`,
       `# ${app.name}
   \uBCF8 \uD504\uB85C\uC81D\uD2B8\uC758 \uC18C\uC2A4\uCF54\uB4DC \uBC0F \uAD00\uB828\uC790\uB8CC\uB294 \uBAA8\uB450 \uBE44\uBC00\uC815\uBCF4\uB85C \uAD00\uB9AC\uB429\uB2C8\uB2E4.
@@ -3670,6 +4349,9 @@ var ApplicationScript = class {
     if (serve)
       await this.serve(app, { open: true });
   }
+  async removeApplication(app) {
+    await this.#runner.removeApplication(app);
+  }
   async scanApplication(app, verbose = false) {
     const scanResult = await this.#runner.scanSync(app);
     if (verbose)
@@ -3685,7 +4367,7 @@ var ApplicationScript = class {
   }
   async build(app) {
     await this.syncApplication(app);
-    await Promise.all([this.buildBackend(app), this.buildFrontend(app)]);
+    await Promise.all([this.buildBackend(app, { sync: false }), this.buildFrontend(app, { sync: false })]);
   }
   async serve(app, { open: open2 = false } = {}) {
     await this.syncApplication(app);
@@ -3706,10 +4388,10 @@ var ApplicationScript = class {
       await this.syncApplication(app);
     await this.#runner.buildFrontend(app);
   }
-  async serveFrontend(app, { open: open2 = false, sync = true } = {}) {
+  async serveFrontend(app, { open: open2 = false, turbo = false, sync = true } = {}) {
     if (sync)
       await this.syncApplication(app);
-    await this.#runner.serveFrontend(app, { open: open2 });
+    await this.#runner.serveFrontend(app, { open: open2, turbo });
   }
   async buildCsr(app, { sync = true } = {}) {
     if (sync)
@@ -3800,7 +4482,8 @@ var ApplicationCommand = class {
   async createApplication(name, serve, workspace) {
     await this.applicationScript.createApplication(name, workspace, { serve });
   }
-  async removeApplication(app, workspace) {
+  async removeApplication(app) {
+    await this.applicationScript.removeApplication(app);
   }
   async scanApplication(app) {
     await this.applicationScript.scanApplication(app, true);
@@ -3829,8 +4512,8 @@ var ApplicationCommand = class {
   async serveBackend(app, open2) {
     await this.applicationScript.serveBackend(app, { open: open2 });
   }
-  async serveFrontend(app, open2) {
-    await this.applicationScript.serveFrontend(app, { open: open2 });
+  async serveFrontend(app, open2, turbo) {
+    await this.applicationScript.serveFrontend(app, { open: open2, turbo });
   }
   async serveCsr(app, open2) {
     await this.applicationScript.serveCsr(app, { open: open2 });
@@ -3880,8 +4563,7 @@ __decorateClass([
 ], ApplicationCommand.prototype, "createApplication", 1);
 __decorateClass([
   Target.Public(),
-  __decorateParam(0, App()),
-  __decorateParam(1, Workspace())
+  __decorateParam(0, App())
 ], ApplicationCommand.prototype, "removeApplication", 1);
 __decorateClass([
   Target.Public(),
@@ -3924,7 +4606,8 @@ __decorateClass([
 __decorateClass([
   Target.Public({ short: true }),
   __decorateParam(0, App()),
-  __decorateParam(1, Option("open", { type: "boolean", desc: "open web browser", default: false }))
+  __decorateParam(1, Option("open", { type: "boolean", desc: "open web browser", default: false })),
+  __decorateParam(2, Option("turbo", { type: "boolean", desc: "turbo", default: false }))
 ], ApplicationCommand.prototype, "serveFrontend", 1);
 __decorateClass([
   Target.Public({ short: true }),
@@ -4012,7 +4695,7 @@ ApplicationCommand = __decorateClass([
 // pkgs/@akanjs/cli/src/package/package.runner.ts
 var esbuild2 = __toESM(require("esbuild"));
 var import_esbuild_plugin_d = require("esbuild-plugin-d.ts");
-var import_fs13 = __toESM(require("fs"));
+var import_fs11 = __toESM(require("fs"));
 var import_promises3 = __toESM(require("fs/promises"));
 var PackageRunner = class {
   async version(workspace) {
@@ -4027,6 +4710,10 @@ var PackageRunner = class {
       dict: { pkgName, PkgName: capitalize(pkgName) }
     });
   }
+  async removePackage(pkg) {
+    await pkg.workspace.exec(`rm -rf pkgs/${pkg.name}`);
+    pkg.log(`Package ${pkg.name} removed`);
+  }
   async scanSync(pkg) {
     const scanResult = await pkg.scan();
     return scanResult;
@@ -4034,7 +4721,7 @@ var PackageRunner = class {
   async buildPackage(pkg) {
     const rootPackageJson = pkg.workspace.readJson("package.json");
     const pkgJson = pkg.readJson("package.json");
-    if (import_fs13.default.existsSync(pkg.dist.cwdPath))
+    if (import_fs11.default.existsSync(pkg.dist.cwdPath))
       await pkg.workspace.exec(`rm -rf ${pkg.dist.cwdPath}`);
     let buildResult;
     if (pkg.name === "@akanjs/config") {
@@ -4152,6 +4839,9 @@ var PackageScript = class {
   async createPackage(workspace, pkgName) {
     await this.#runner.createPackage(workspace, pkgName);
   }
+  async removePackage(pkg) {
+    await this.#runner.removePackage(pkg);
+  }
   async scanPackage(pkg) {
     const scanResult = await this.#runner.scanSync(pkg);
     pkg.logger.rawLog(JSON.stringify(scanResult, null, 2));
@@ -4163,7 +4853,7 @@ var PackageScript = class {
 
 // pkgs/@akanjs/cli/src/cloud/cloud.runner.ts
 var import_prompts7 = require("@inquirer/prompts");
-var import_chalk = __toESM(require("chalk"));
+var import_chalk2 = __toESM(require("chalk"));
 var import_latest_version = __toESM(require("latest-version"));
 var import_open2 = __toESM(require("open"));
 var QRcode = __toESM(require("qrcode"));
@@ -4173,17 +4863,17 @@ var CloudRunner = class {
     const config = getHostConfig();
     const self = config.auth ? await getSelf(config.auth.token) : null;
     if (self) {
-      Logger.rawLog(import_chalk.default.green(`
+      Logger.rawLog(import_chalk2.default.green(`
 \u2713 Already logged in akan cloud as ${self.nickname}
 `));
       return true;
     }
     const remoteId = (0, import_uuid.v4)();
     const signinUrl = `${akanCloudClientUrl}/signin?remoteId=${remoteId}`;
-    Logger.rawLog(import_chalk.default.bold(`
-${import_chalk.default.green("\u27A4")} Authentication Required`));
-    Logger.rawLog(import_chalk.default.dim("Please visit or click the following URL:"));
-    Logger.rawLog(import_chalk.default.cyan.underline(signinUrl) + "\n");
+    Logger.rawLog(import_chalk2.default.bold(`
+${import_chalk2.default.green("\u27A4")} Authentication Required`));
+    Logger.rawLog(import_chalk2.default.dim("Please visit or click the following URL:"));
+    Logger.rawLog(import_chalk2.default.cyan.underline(signinUrl) + "\n");
     try {
       const qrcode = await new Promise((resolve, reject) => {
         QRcode.toString(signinUrl, { type: "terminal", small: true }, (err, data) => {
@@ -4194,11 +4884,11 @@ ${import_chalk.default.green("\u27A4")} Authentication Required`));
       });
       Logger.rawLog(qrcode);
       await (0, import_open2.default)(signinUrl);
-      Logger.rawLog(import_chalk.default.dim("Opening browser..."));
+      Logger.rawLog(import_chalk2.default.dim("Opening browser..."));
     } catch {
-      Logger.rawLog(import_chalk.default.yellow("Could not open browser. Please visit the URL manually."));
+      Logger.rawLog(import_chalk2.default.yellow("Could not open browser. Please visit the URL manually."));
     }
-    Logger.rawLog(import_chalk.default.dim("Waiting for authentication..."));
+    Logger.rawLog(import_chalk2.default.dim("Waiting for authentication..."));
     const MAX_RETRY = 300;
     for (let i = 0; i < MAX_RETRY; i++) {
       const res = await fetch(`${akanCloudBackendUrl}/user/getRemoteAuthToken/${remoteId}`);
@@ -4206,30 +4896,38 @@ ${import_chalk.default.green("\u27A4")} Authentication Required`));
       const self2 = jwt ? await getSelf(jwt) : null;
       if (jwt && self2) {
         setHostConfig(akanCloudHost, { auth: { token: jwt, self: self2 } });
-        Logger.rawLog(import_chalk.default.green(`\r\u2713 Authentication successful!`));
-        Logger.rawLog(import_chalk.default.green.bold(`
+        Logger.rawLog(import_chalk2.default.green(`\r\u2713 Authentication successful!`));
+        Logger.rawLog(import_chalk2.default.green.bold(`
 \u2728 Welcome aboard, ${self2.nickname}!`));
-        Logger.rawLog(import_chalk.default.dim("You're now ready to use Akan CLI!\n"));
+        Logger.rawLog(import_chalk2.default.dim("You're now ready to use Akan CLI!\n"));
         return true;
       }
       await sleep(2e3);
     }
-    throw new Error(import_chalk.default.red("\u2716 Authentication timed out after 10 minutes. Please try again."));
+    throw new Error(import_chalk2.default.red("\u2716 Authentication timed out after 10 minutes. Please try again."));
   }
   logout() {
     const config = getHostConfig();
     if (config.auth) {
       setHostConfig(akanCloudHost, {});
-      Logger.rawLog(import_chalk.default.magenta.bold(`
+      Logger.rawLog(import_chalk2.default.magenta.bold(`
 \u{1F44B} Goodbye, ${config.auth.self.nickname}!`));
-      Logger.rawLog(import_chalk.default.dim("\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n"));
-      Logger.rawLog(import_chalk.default.cyan("You have been successfully logged out."));
-      Logger.rawLog(import_chalk.default.dim("Thank you for using Akan CLI. Come back soon! \u{1F31F}\n"));
+      Logger.rawLog(import_chalk2.default.dim("\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n"));
+      Logger.rawLog(import_chalk2.default.cyan("You have been successfully logged out."));
+      Logger.rawLog(import_chalk2.default.dim("Thank you for using Akan CLI. Come back soon! \u{1F31F}\n"));
     } else {
-      Logger.rawLog(import_chalk.default.yellow.bold("\n\u26A0\uFE0F  No active session found"));
-      Logger.rawLog(import_chalk.default.dim("You were not logged in to begin with\n"));
+      Logger.rawLog(import_chalk2.default.yellow.bold("\n\u26A0\uFE0F  No active session found"));
+      Logger.rawLog(import_chalk2.default.dim("You were not logged in to begin with\n"));
     }
   }
+  async setLlm() {
+    await AiSession.init({ useExisting: true });
+    Logger.rawLog(import_chalk2.default.green("LLM model set successfully"));
+  }
+  resetLlm() {
+    AiSession.setLlmConfig(null);
+    Logger.rawLog(import_chalk2.default.green("LLM model reset successfully"));
+  }
   async getAkanPkgs(workspace) {
     const pkgs = await workspace.getPkgs();
     const akanPkgs = pkgs.filter((pkg) => pkg.startsWith("@akanjs/"));
@@ -4251,20 +4949,7 @@ ${import_chalk.default.green("\u27A4")} Authentication Required`));
       const newPackageJsonStr = JSON.stringify({ ...packageJson, version: nextVersion }, null, 2);
       workspace.writeFile(`pkgs/${library}/package.json`, newPackageJsonStr);
       const distPackageJson = workspace.readJson(`dist/pkgs/${library}/package.json`);
-      const newDistPackageJson = {
-        ...distPackageJson,
-        // ...(distPackageJson.dependencies
-        //   ? {
-        //       dependencies: Object.fromEntries(
-        //         Object.entries(distPackageJson.dependencies).map(([key, value]) => [
-        //           key,
-        //           value.startsWith("^") ? value : `^${value}`,
-        //         ])
-        //       ),
-        //     }
-        //   : {}),
-        version: nextVersion
-      };
+      const newDistPackageJson = { ...distPackageJson, version: nextVersion };
       workspace.writeJson(`dist/pkgs/${library}/package.json`, newDistPackageJson);
     }
     const isDeployConfirmed = await (0, import_prompts7.confirm)({
@@ -4295,6 +4980,17 @@ var CloudScript = class {
   logout() {
     this.#runner.logout();
   }
+  async setLlm() {
+    await this.#runner.setLlm();
+  }
+  resetLlm() {
+    this.#runner.resetLlm();
+  }
+  async ask(question) {
+    await AiSession.init();
+    const session = new AiSession();
+    await session.ask(question);
+  }
   async deployAkan(workspace) {
     const akanPkgs = await this.#runner.getAkanPkgs(workspace);
     await Promise.all(
@@ -4313,6 +5009,15 @@ var CloudCommand = class {
   logout() {
     this.cloudScript.logout();
   }
+  async setLlm() {
+    await this.cloudScript.setLlm();
+  }
+  resetLlm() {
+    this.cloudScript.resetLlm();
+  }
+  async ask(question) {
+    await this.cloudScript.ask(question);
+  }
   async deployAkan(workspace) {
     await this.cloudScript.deployAkan(workspace);
   }
@@ -4323,6 +5028,16 @@ __decorateClass([
 __decorateClass([
   Target.Public()
 ], CloudCommand.prototype, "logout", 1);
+__decorateClass([
+  Target.Public()
+], CloudCommand.prototype, "setLlm", 1);
+__decorateClass([
+  Target.Public()
+], CloudCommand.prototype, "resetLlm", 1);
+__decorateClass([
+  Target.Public(),
+  __decorateParam(0, Option("question", { ask: "question to ask" }))
+], CloudCommand.prototype, "ask", 1);
 __decorateClass([
   Target.Public({ devOnly: true }),
   __decorateParam(0, Workspace())
@@ -4335,8 +5050,10 @@ CloudCommand = __decorateClass([
 var LibraryCommand = class {
   libraryScript = new LibraryScript();
   async createLibrary(name, workspace) {
+    await this.libraryScript.createLibrary(name, workspace);
   }
-  async removeLibrary(lib, workspace) {
+  async removeLibrary(lib) {
+    await this.libraryScript.removeLibrary(lib);
   }
   async scanLibrary(lib) {
     await this.libraryScript.scanLibrary(lib, true);
@@ -4360,8 +5077,7 @@ __decorateClass([
 ], LibraryCommand.prototype, "createLibrary", 1);
 __decorateClass([
   Target.Public(),
-  __decorateParam(0, Lib()),
-  __decorateParam(1, Workspace())
+  __decorateParam(0, Lib())
 ], LibraryCommand.prototype, "removeLibrary", 1);
 __decorateClass([
   Target.Public(),
@@ -4390,8 +5106,11 @@ LibraryCommand = __decorateClass([
   Commands()
 ], LibraryCommand);
 
+// pkgs/@akanjs/cli/src/module/module.script.ts
+var import_prompts8 = require("@inquirer/prompts");
+var import_fs12 = __toESM(require("fs"));
+
 // pkgs/@akanjs/cli/src/module/module.runner.ts
-var import_fs14 = __toESM(require("fs"));
 var ModuleRunner = class {
   async createModule(workspace, sysType, sysName, moduleName, description) {
   }
@@ -4469,56 +5188,64 @@ var ModuleRunner = class {
       }
     };
   }
-  async createUnit(sys2, modelName) {
-    const modelFileData = getModelFileData(sys2.cwdPath, modelName);
-    const { paths } = getRelatedCnsts(modelFileData.constantFilePath);
-    const names = { model: modelName, Model: capitalize(modelName), LightModel: `Light${capitalize(modelName)}` };
-    const prompt = `
-    
-\uB108\uB294 React, Typescript, TailwindCSS\uB97C \uAE30\uBC18\uC73C\uB85C \uCF54\uB529\uD558\uB294 \uD504\uB860\uD2B8\uC5D4\uB4DC \uAC1C\uBC1C\uC790\uC57C.
-${names.Model}\uC774\uB77C\uB294 \uB3C4\uBA54\uC778\uC5D0 \uB300\uD574\uC11C ${names.LightModel} \uC2A4\uD0A4\uB9C8\uB97C \uB300\uC0C1\uC73C\uB85C react component\uB97C \uB514\uC790\uC778\uD558\uB824\uACE0 \uD574. \uC544\uB798\uB294 \uD604\uC7AC \uBCF4\uC77C\uB7EC\uD50C\uB808\uC774\uD2B8 \uD615\uD0DC\uC758 \uCEF4\uD3EC\uB10C\uD2B8\uC57C.
-
-\`\`\`
-${modelFileData.unitFileStr}
-\`\`\`
-
-${names.LightModel}\uC740 \uB2E4\uC74C\uACFC \uAC19\uC774 ${names.Model} \uC2A4\uD0A4\uB9C8\uC5D0\uC11C \uC77C\uBD80 \uD544\uB4DC\uB97C \uCD94\uCD9C\uD574\uC11C lightweight fetch\uB41C \uD615\uD0DC\uB85C \uC124\uACC4\uB418\uC5B4\uC788\uC5B4.
-\`\`\`
-${modelFileData.constantFileStr}
-\`\`\`
-
-  \uC544\uB798\uB294 \uD604\uC7AC \uC2A4\uD0A4\uB9C8\uC640 \uC5F0\uAD00\uB41C \uC2A4\uD0A4\uB9C8 \uD30C\uC77C\uB4E4\uC774\uC57C. \uC2A4\uD0A4\uB9C8 \uD30C\uC77C\uB4E4\uC758 \uCF54\uB4DC\uB4E4\uC744 \uBCF4\uACE0 \uC11C\uB85C \uC5B4\uB5BB\uAC8C \uC5F0\uACC4 \uB418\uC5B4\uC788\uB294\uC9C0 \uC774\uD574\uD558\uB3C4\uB85D \uD574.
-${paths ? new Array(paths.size).fill(0).map((_, index) => {
-      const key = Array.from(paths.keys())[index];
-      const filePath = paths.get(key)?.filePath;
-      if (!filePath)
-        throw new Error("filePath is undefined");
-      return `${key}
-\`\`\`${import_fs14.default.readFileSync(filePath, "utf8")}\`\`\`\`
-
-`;
-    }) : ""}
-
-\uCD94\uAC00\uB85C, \uB9CC\uC57D\uC5D0 \uC544\uC774\uCF58 \uC0AC\uC6A9\uC774 \uD544\uC694\uD558\uBA74 react-icons/bi \uB77C\uC774\uBE0C\uB7EC\uB9AC\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC918.
-\uB610, \uC0C9\uC0C1\uC744 \uC0AC\uC6A9\uD558\uB824\uACE0 \uD558\uBA74 \uD558\uB4DC\uCF54\uB529\uB41C \uC0C9\uC0C1(bg-red)\uC774 \uC544\uB2CC \uD14C\uB9C8 \uC0C9\uC0C1(bg-primary)\uC744 \uC0AC\uC6A9\uD574\uC11C \uC791\uC131\uD574\uC918.
-\uADF8\uB9AC\uACE0 optional\uD55C \uD544\uB4DC\uB294 field && <div>... \uAC00 \uC544\uB2CC, field ? <div>... : null \uD615\uD0DC\uB85C \uC791\uC131\uD574\uC918.
-css\uB77C\uC774\uBE0C\uB7EC\uB9AC\uB294 DaisyUI\uB97C \uAE30\uBC18\uC73C\uB85C \uC791\uC131\uD574\uC8FC\uB294\uB370, btn, input, badge\uC640 \uAC19\uC740 \uB2E8\uC21C\uD55C \uAE30\uBCF8 css\uB294 \uC0AC\uC6A9\uD574\uB3C4 \uAD1C\uCC2E\uC544. \uADF8\uB7F0\uB370 card, hero\uAC19\uC774 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uC0AC\uC6A9\uD558\uBA74 \uC548\uB3FC.
-\uC870\uAC74\uBD80 className\uC774 \uD544\uC694\uD55C \uACBD\uC6B0\uC5D0\uB294 clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB97C \uC0AC\uC6A9\uD574\uC11C \uC791\uC131\uD574\uC57C\uD574.
-\uBAA8\uB378\uC5D0 \uB300\uD574\uC11C object destructuring\uC740 \uD558\uC9C0\uB9D0\uACE0 ${modelName}.field \uD615\uD0DC\uB85C \uC811\uADFC\uD558\uAC8C \uCF54\uB4DC\uB97C \uC791\uC131\uD574\uC57C\uD574.
-
-${names.Model}.Unit.Card\uC758 \uB9AC\uC561\uD2B8 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uB514\uC790\uC778\uD574\uC11C \uC791\uC131\uD574\uC918.
-`;
-    try {
-      import_fs14.default.writeFileSync("./local/prompt.txt", prompt);
-      const { content } = await streamAi(prompt, (chunk) => {
-        process.stdout.write(chunk);
-      });
-      import_fs14.default.writeFileSync("./local/result.txt", content);
-    } catch (error) {
-    }
-  }
-  async createView(sys2, modelName) {
-  }
+  //   async createUnit(sys: App | Lib, modelName: string) {
+  //     const modelFileData = getModelFileData(sys.cwdPath, modelName);
+  //     const { paths } = getRelatedCnsts(modelFileData.constantFilePath);
+  //     const names = { model: modelName, Model: capitalize(modelName), LightModel: `Light${capitalize(modelName)}` };
+  //     const prompt = `
+  // 너는 React, Typescript, TailwindCSS를 기반으로 코딩하는 프론트엔드 개발자야.
+  // ${names.Model}이라는 도메인에 대해서 ${names.LightModel} 스키마를 대상으로 react component를 디자인하려고 해. 아래는 현재 보일러플레이트 형태의 컴포넌트야.
+  // \`\`\`
+  // ${modelFileData.unitFileStr}
+  // \`\`\`
+  // ${names.LightModel}은 다음과 같이 ${names.Model} 스키마에서 일부 필드를 추출해서 lightweight fetch된 형태로 설계되어있어.
+  // \`\`\`
+  // ${modelFileData.constantFileStr}
+  // \`\`\`
+  //   아래는 현재 스키마와 연관된 스키마 파일들이야. 스키마 파일들의 코드들을 보고 서로 어떻게 연계 되어있는지 이해하도록 해.
+  // ${
+  //   paths
+  //     ? new Array(paths.size).fill(0).map((_, index) => {
+  //         //순서대로 paths key 추출
+  //         const key = Array.from(paths.keys())[index];
+  //         const filePath = paths.get(key)?.filePath;
+  //         if (!filePath) throw new Error("filePath is undefined");
+  //         return `${key}\n\`\`\`${fs.readFileSync(filePath, "utf8")}\`\`\`\`\n\n`;
+  //       })
+  //     : ""
+  // }
+  // 추가로, 만약에 아이콘 사용이 필요하면 react-icons/bi 라이브러리에서 사용해줘.
+  // 또, 색상을 사용하려고 하면 하드코딩된 색상(bg-red)이 아닌 테마 색상(bg-primary)을 사용해서 작성해줘.
+  // 그리고 optional한 필드는 field && <div>... 가 아닌, field ? <div>... : null 형태로 작성해줘.
+  // css라이브러리는 DaisyUI를 기반으로 작성해주는데, btn, input, badge와 같은 단순한 기본 css는 사용해도 괜찮아. 그런데 card, hero같이 복잡한 컴포넌트는 사용하면 안돼.
+  // 조건부 className이 필요한 경우에는 clsx 라이브러리를 사용해서 작성해야해.
+  // 모델에 대해서 object destructuring은 하지말고 ${modelName}.field 형태로 접근하게 코드를 작성해야해.
+  // ${names.Model}.Unit.Card의 리액트 컴포넌트를 디자인해서 작성해줘.
+  // `;
+  //     try {
+  //       fs.writeFileSync("./local/prompt.txt", prompt);
+  //       const { content } = await streamAi(prompt, (chunk) => {
+  //         process.stdout.write(chunk);
+  //       });
+  //       fs.writeFileSync("./local/result.txt", content);
+  //     } catch (error) {
+  //       // console.error("Application error:", error);
+  //     }
+  //   }
+  // async createView(sys: App | Lib, modelName: string) {
+  //   const modelFileData = getModelFileData(sys.cwdPath, modelName);
+  //   // const modelFileData = getModelFileData(sys.cwdPath, modelName);
+  //   // const { paths } = getRelatedCnsts(modelFileData.constantFilePath);
+  //   // const names = { model: modelName, Model: capitalize(modelName), LightModel: `Light${capitalize(modelName)}` };
+  //   // const prompt = prompt.requestView({
+  //   //   sysName: sys.name,
+  //   //   modelName,
+  //   //   modelDesc: modelFileData.modelDesc,
+  //   //   modelSchemaDesign: modelFileData.modelSchemaDesign,
+  //   //   boilerplate: modelFileData.viewFileStr,
+  //   //   paths,
+  //   // });
+  // }
 };
 
 // pkgs/@akanjs/cli/src/module/module.script.ts
@@ -4563,38 +5290,67 @@ var ModuleScript = class {
   }
   async createTest(workspace, name) {
   }
-  async createUnit(workspace, type, appOrLibName, modelName) {
-    const sys2 = type === "app" ? AppExecutor.from(workspace, appOrLibName) : LibExecutor.from(workspace, appOrLibName);
-    await this.#runner.createUnit(sys2, modelName);
+  async createUnit(sys2) {
+    const libs = await sys2.getModules();
+    const unitExampleFiles = await sys2.getUnitsSourceCode();
+    const lib = await (0, import_prompts8.select)({
+      message: "Select the lib",
+      choices: libs
+    }).catch((e) => {
+      Logger.error("canceled");
+      return null;
+    });
+    if (!lib)
+      return;
+    const name = lib.split("/").pop();
+    if (!name)
+      return;
+    const Name = capitalize(name);
+    const relatedCnsts = getRelatedCnsts(`${sys2.cwdPath}/lib/${name}/${name}.constant.ts`);
+    const constant = import_fs12.default.readFileSync(`${sys2.cwdPath}/lib/${name}/${name}.constant.ts`, "utf-8");
+    const session = new AiSession();
+    const promptRst = requestView({
+      sysName: sys2.name,
+      modelName: name,
+      ModelName: Name,
+      constant,
+      properties: relatedCnsts.map((r) => ({ key: r.key, source: r.source })),
+      exampleFiles: randomPicks(unitExampleFiles, Math.min(10, unitExampleFiles.length))
+    });
+    const content = await session.editTypescript(promptRst);
+    import_fs12.default.writeFileSync(`${sys2.cwdPath}/prompt.txt`, promptRst);
+    import_fs12.default.writeFileSync(`${sys2.cwdPath}/result.txt`, content);
   }
   async createView(sys2) {
-    const [appNames, libNames] = await sys2.workspace.getSyss();
-    const viewExampleFiles = [
-      ...(await Promise.all(
-        appNames.map(async (appName) => {
-          const app = AppExecutor.from(sys2.workspace, appName);
-          const viewModules = await app.getViewModules();
-          return await Promise.all(
-            viewModules.map((viewModule) => ({
-              path: `${appName}/${viewModule}/${viewModule}.View.tsx`,
-              content: app.readFile(`lib/${viewModule}/${viewModule}.View.tsx`)
-            }))
-          );
-        })
-      )).flat(),
-      ...(await Promise.all(
-        libNames.map(async (libName) => {
-          const lib = LibExecutor.from(sys2.workspace, libName);
-          const viewModules = await lib.getViewModules();
-          return await Promise.all(
-            viewModules.map((viewModule) => ({
-              path: `${libName}/${viewModule}/${viewModule}.View.tsx`,
-              content: lib.readFile(`lib/${viewModule}/${viewModule}.View.tsx`)
-            }))
-          );
-        })
-      )).flat()
-    ];
+    const libs = await sys2.getModules();
+    const lib = await (0, import_prompts8.select)({
+      message: "Select the lib",
+      choices: libs
+    }).catch((e) => {
+      Logger.error("canceled");
+      return null;
+    });
+    if (!lib)
+      return;
+    const name = lib.split("/").pop();
+    if (!name)
+      return;
+    const viewExampleFiles = (await sys2.getViewsSourceCode()).filter((f) => f.filepath.includes(`${name}.View.tsx`));
+    const Name = capitalize(name);
+    const relatedCnsts = getRelatedCnsts(`${sys2.cwdPath}/lib/${name}/${name}.constant.ts`);
+    const constant = import_fs12.default.readFileSync(`${sys2.cwdPath}/lib/${name}/${name}.constant.ts`, "utf-8");
+    const session = new AiSession();
+    const promptRst = requestView({
+      sysName: sys2.name,
+      modelName: name,
+      ModelName: Name,
+      constant,
+      properties: relatedCnsts.map((r) => ({ key: r.key, source: r.source })),
+      exampleFiles: randomPicks(viewExampleFiles, Math.min(20, viewExampleFiles.length))
+    });
+    const content = await session.editTypescript(promptRst);
+    import_fs12.default.writeFileSync(`${sys2.cwdPath}/prompt.txt`, promptRst);
+    import_fs12.default.writeFileSync(`${sys2.cwdPath}/result.txt`, content);
   }
 };
 
@@ -4677,7 +5433,8 @@ var PackageCommand = class {
   async createPackage(name, workspace) {
     await this.packageScript.createPackage(workspace, name);
   }
-  async removePackage(name, workspace) {
+  async removePackage(pkg) {
+    await this.packageScript.removePackage(pkg);
   }
   async scanPackage(pkg) {
     await this.packageScript.scanPackage(pkg);
@@ -4697,8 +5454,7 @@ __decorateClass([
 ], PackageCommand.prototype, "createPackage", 1);
 __decorateClass([
   Target.Public(),
-  __decorateParam(0, Option("name", { desc: "name of package" })),
-  __decorateParam(1, Workspace())
+  __decorateParam(0, Pkg())
 ], PackageCommand.prototype, "removePackage", 1);
 __decorateClass([
   Target.Public(),
@@ -4712,13 +5468,13 @@ PackageCommand = __decorateClass([
   Commands()
 ], PackageCommand);
 
-// pkgs/@akanjs/cli/src/package/page/page.runner.ts
+// pkgs/@akanjs/cli/src/page/page.runner.ts
 var PageRunner = class {
   async createPage(app, name) {
   }
 };
 
-// pkgs/@akanjs/cli/src/package/page/page.script.ts
+// pkgs/@akanjs/cli/src/page/page.script.ts
 var PageScript = class {
   #runner = new PageRunner();
   async createPage(app, name) {
@@ -4726,7 +5482,7 @@ var PageScript = class {
   }
 };
 
-// pkgs/@akanjs/cli/src/package/page/page.command.ts
+// pkgs/@akanjs/cli/src/page/page.command.ts
 var PageCommand = class {
   pageScript = new PageScript();
   async createPage(app, name) {
@@ -4868,8 +5624,8 @@ var WorkspaceCommand = class {
 };
 __decorateClass([
   Target.Public(),
-  __decorateParam(0, Option("name", { desc: "name of workspace" })),
-  __decorateParam(1, Option("app", { desc: "application name" })),
+  __decorateParam(0, Option("name", { desc: "what is the name of your organization?" })),
+  __decorateParam(1, Option("app", { desc: "describe your first application to create." })),
   __decorateParam(2, Option("dir", { desc: "directory of workspace", default: process.env.USE_AKANJS_PKGS === "true" ? "local" : "." }))
 ], WorkspaceCommand.prototype, "createWorkspace", 1);
 __decorateClass([
@@ -4891,7 +5647,6 @@ void runCommands(
   PageCommand,
   CloudCommand
 );
-//!Field.Prop 거르기가 빡세네.
 //! Temp
 //! zip 명령어는 압축시 폴더 경로를 무시하는 게 안됨
 //! 두 가지 방법이 있음
@@ -4900,3 +5655,4 @@ void runCommands(
 //! execSync를 가져오기 싫으니 일단 2번 방법으로 해보자
 //! add path in tsconfig.json
 //! Temporary fix for barrel library
+//! 파일을 {name}.View.tsx에 저장.