@constela/cli 0.5.43 → 0.5.49

package/README.md

@@ -230,6 +230,55 @@ constela start --port 8080
 
 The server binds to `0.0.0.0` by default for deployment compatibility.
 
+### constela suggest
+
+AI を使って DSL ファイルを分析し、改善提案を取得します。
+
+```bash
+constela suggest <input> [options]
+```
+
+**Arguments:**
+- `<input>` - 分析対象の JSON ファイル
+
+**Options:**
+- `--aspect <type>` - 分析観点: accessibility, performance, security, ux (default: accessibility)
+- `--provider <name>` - AI プロバイダー: anthropic, openai (default: anthropic)
+- `--json` - JSON 形式で出力
+
+**環境変数:**
+- `ANTHROPIC_API_KEY` - Anthropic プロバイダー使用時
+- `OPENAI_API_KEY` - OpenAI プロバイダー使用時
+
+**Examples:**
+
+```bash
+# アクセシビリティの分析
+constela suggest app.json --aspect accessibility
+
+# セキュリティの分析（OpenAI 使用）
+constela suggest app.json --aspect security --provider openai
+
+# JSON 出力
+constela suggest app.json --aspect ux --json
+```
+
+**Output:**
+
+```
+=== Suggestions for app.json (accessibility) ===
+
+[HIGH] Missing aria-label on button
+   Recommendation: Add aria-label="Submit form" to the button element
+   Location: view.children[0].props
+
+[MED] Low color contrast in text
+   Recommendation: Increase contrast ratio to meet WCAG AA standards
+   Location: view.children[2].props.style
+
+Total: 2 suggestion(s)
+```
+
 ## Project Structure
 
 The CLI expects the following project structure:

package/dist/index.js

@@ -23,16 +23,17 @@ var colors = {
   yellow: (s) => `\x1B[33m${s}\x1B[0m`,
   reset: "\x1B[0m"
 };
+var noColors = {
+  red: (s) => s,
+  green: (s) => s,
+  yellow: (s) => s,
+  reset: ""
+};
 function getColors() {
   if (shouldUseColors()) {
     return colors;
   }
-  return {
-    red: (s) => s,
-    green: (s) => s,
-    yellow: (s) => s,
-    reset: ""
-  };
+  return noColors;
 }
 function countViewNodes(node) {
   let count = 1;
@@ -51,7 +52,7 @@ function countViewNodes(node) {
       }
       break;
     case "each":
-      count += countViewNodes(node.template);
+      count += countViewNodes(node.body);
       break;
     // text, markdown, code, slot nodes have no children
     default:
@@ -423,7 +424,7 @@ function outputResult(inputPath, result, options, c) {
 }
 async function compileCommand(inputPath, options) {
   const isJsonMode = options.json === true;
-  const c = isJsonMode ? { red: (s) => s, green: (s) => s, yellow: (s) => s, reset: "" } : getColors();
+  const c = isJsonMode ? noColors : getColors();
   const result = performCompilation(inputPath, options, c);
   outputResult(inputPath, result, options, c);
   if (!options.watch) {
@@ -470,16 +471,17 @@ var colors2 = {
   yellow: (s) => `\x1B[33m${s}\x1B[0m`,
   reset: "\x1B[0m"
 };
+var noColors2 = {
+  red: (s) => s,
+  green: (s) => s,
+  yellow: (s) => s,
+  reset: ""
+};
 function getColors2() {
   if (shouldUseColors2()) {
     return colors2;
   }
-  return {
-    red: (s) => s,
-    green: (s) => s,
-    yellow: (s) => s,
-    reset: ""
-  };
+  return noColors2;
 }
 function formatColoredError2(error, c) {
   const lines = [];
@@ -573,7 +575,7 @@ async function validateCommand(input, options) {
   const startTime = performance.now();
   const isJsonMode = options.json === true;
   const isAllMode = options.all === true;
-  const c = isJsonMode ? { red: (s) => s, green: (s) => s, yellow: (s) => s, reset: "" } : getColors2();
+  const c = isJsonMode ? noColors2 : getColors2();
   function exitWithResult(success, output) {
     if (isJsonMode && output) {
       outputJson2(output);
@@ -730,18 +732,19 @@ var colors3 = {
   dim: (s) => `\x1B[2m${s}\x1B[0m`,
   reset: "\x1B[0m"
 };
+var noColors3 = {
+  red: (s) => s,
+  green: (s) => s,
+  yellow: (s) => s,
+  cyan: (s) => s,
+  dim: (s) => s,
+  reset: ""
+};
 function getColors3() {
   if (shouldUseColors3()) {
     return colors3;
   }
-  return {
-    red: (s) => s,
-    green: (s) => s,
-    yellow: (s) => s,
-    cyan: (s) => s,
-    dim: (s) => s,
-    reset: ""
-  };
+  return noColors3;
 }
 function summarizeStep(step) {
   switch (step.do) {
@@ -772,13 +775,14 @@ function summarizeStep(step) {
   }
 }
 function summarizeAction(action) {
-  if (action.steps.length === 0) {
+  const firstStep = action.steps[0];
+  if (!firstStep) {
     return "(empty)";
   }
   if (action.steps.length === 1) {
-    return summarizeStep(action.steps[0]);
+    return summarizeStep(firstStep);
   }
-  return `${summarizeStep(action.steps[0])} + ${action.steps.length - 1} more`;
+  return `${summarizeStep(firstStep)} + ${action.steps.length - 1} more`;
 }
 function viewNodeToInfo(node) {
   const info = { kind: node.kind };
@@ -979,14 +983,7 @@ function formatViewSection(view, c) {
 }
 async function inspectCommand(input, options) {
   const isJsonMode = options.json === true;
-  const c = isJsonMode ? {
-    red: (s) => s,
-    green: (s) => s,
-    yellow: (s) => s,
-    cyan: (s) => s,
-    dim: (s) => s,
-    reset: ""
-  } : getColors3();
+  const c = isJsonMode ? noColors3 : getColors3();
   const showAll = !options.state && !options.actions && !options.components && !options.view;
   const showState = showAll || options.state === true;
   const showActions = showAll || options.actions === true;
@@ -1058,8 +1055,11 @@ async function inspectCommand(input, options) {
       sections.push(formatViewSection(program2.view, c));
     }
     for (let i = 0; i < sections.length; i++) {
-      for (const line of sections[i]) {
-        console.log(line);
+      const section = sections[i];
+      if (section) {
+        for (const line of section) {
+          console.log(line);
+        }
       }
       if (i < sections.length - 1) {
         console.log("");
@@ -1185,6 +1185,86 @@ Ready in ${elapsed}ms (Ctrl+Click to open)`);
   }
 }
 
+// src/commands/suggest.ts
+import { readFileSync as readFileSync4, existsSync } from "fs";
+import { resolve } from "path";
+import {
+  getProvider,
+  buildSuggestPrompt,
+  parseSuggestions,
+  SUGGEST_SYSTEM_PROMPT
+} from "@constela/ai";
+var VALID_ASPECTS = ["accessibility", "performance", "security", "ux"];
+var VALID_PROVIDERS = ["anthropic", "openai"];
+async function suggestCommand(input, options) {
+  try {
+    const inputPath = resolve(process.cwd(), input);
+    if (!existsSync(inputPath)) {
+      console.error("Error: File not found - " + inputPath);
+      process.exit(1);
+    }
+    const content = readFileSync4(inputPath, "utf-8");
+    let dsl;
+    try {
+      dsl = JSON.parse(content);
+    } catch {
+      console.error("Error: Invalid JSON in input file");
+      process.exit(1);
+    }
+    const aspect = options.aspect ?? "accessibility";
+    if (!VALID_ASPECTS.includes(aspect)) {
+      console.error("Error: Invalid aspect. Valid options: " + VALID_ASPECTS.join(", "));
+      process.exit(1);
+    }
+    const providerType = options.provider ?? "anthropic";
+    if (!VALID_PROVIDERS.includes(providerType)) {
+      console.error("Error: Invalid provider. Valid options: " + VALID_PROVIDERS.join(", "));
+      process.exit(1);
+    }
+    const apiKeyEnvVar = providerType === "anthropic" ? "ANTHROPIC_API_KEY" : "OPENAI_API_KEY";
+    if (!process.env[apiKeyEnvVar]) {
+      console.error("Error: " + apiKeyEnvVar + " environment variable is not set");
+      process.exit(1);
+    }
+    console.log("Analyzing " + input + " for " + aspect + " suggestions...");
+    const provider = getProvider(providerType);
+    const prompt = buildSuggestPrompt({ dsl, aspect });
+    const response = await provider.generate(prompt, {
+      systemPrompt: SUGGEST_SYSTEM_PROMPT
+    });
+    const suggestions = parseSuggestions(response.content);
+    if (options.json) {
+      console.log(JSON.stringify({ suggestions, aspect, file: input }, null, 2));
+    } else {
+      outputSuggestions(suggestions, aspect, input);
+    }
+  } catch (err) {
+    const error = err;
+    console.error("Error: " + error.message);
+    process.exit(1);
+  }
+}
+function outputSuggestions(suggestions, aspect, file) {
+  console.log("");
+  console.log("=== Suggestions for " + file + " (" + aspect + ") ===");
+  console.log("");
+  if (suggestions.length === 0) {
+    console.log("No suggestions found. Great job!");
+    return;
+  }
+  for (let i = 0; i < suggestions.length; i++) {
+    const s = suggestions[i];
+    const severityIcon = s.severity === "high" ? "[HIGH]" : s.severity === "medium" ? "[MED]" : "[LOW]";
+    console.log(severityIcon + " " + s.issue);
+    console.log("   Recommendation: " + s.recommendation);
+    if (s.location) {
+      console.log("   Location: " + s.location);
+    }
+    console.log("");
+  }
+  console.log("Total: " + suggestions.length + " suggestion(s)");
+}
+
 // src/index.ts
 var program = new Command();
 program.name("constela").description("Constela UI framework CLI").version("0.1.0");
@@ -1194,6 +1274,7 @@ program.command("inspect <input>").description("Inspect Constela program structu
 program.command("dev").description("Start development server").option("-p, --port <number>", "Port number (default: 3000)").option("--host <string>", "Host address").option("--routesDir <path>", "Routes directory").option("--publicDir <path>", "Public directory").option("--layoutsDir <path>", "Layouts directory").action(devCommand);
 program.command("build").description("Build for production").option("-o, --outDir <path>", "Output directory (default: dist)").option("--routesDir <path>", "Routes directory").option("--publicDir <path>", "Public directory").option("--layoutsDir <path>", "Layouts directory").action(buildCommand);
 program.command("start").description("Start production server").option("-p, --port <number>", "Port number (default: 3000)").action(startCommand);
+program.command("suggest <input>").description("Get AI-powered suggestions for Constela DSL").option("--aspect <type>", "Aspect to analyze: accessibility, performance, security, ux").option("--provider <name>", "AI provider: anthropic, openai (default: anthropic)").option("--json", "Output results as JSON").action(suggestCommand);
 if (process.argv.length <= 2) {
   program.outputHelp();
   process.exit(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/cli",
-  "version": "0.5.43",
+  "version": "0.5.49",
   "description": "CLI tools for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -19,9 +19,10 @@
   ],
   "dependencies": {
     "commander": "^12.0.0",
-    "@constela/core": "0.15.2",
-    "@constela/start": "1.8.21",
-    "@constela/compiler": "0.14.4"
+    "@constela/ai": "1.0.2",
+    "@constela/start": "1.8.27",
+    "@constela/compiler": "0.14.7",
+    "@constela/core": "0.16.2"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",