coderio 1.0.2 → 1.0.3-alpha.1

package/README.md

@@ -147,7 +147,94 @@ report path: coderio/<design-name_node-id>/process/validation/index.html
 | `validate`        | `val` | Run validation on generated code                    |
 | `images`          | -     | Download and process Figma assets                   |
 
-### Option 2: Skill (Portable Embedded Workflow)
+### Option 2: Docker
+
+Best for portable environments without Node.js installation.
+
+#### 1. Prerequisites
+
+- [Docker](https://docs.docker.com/get-docker/)
+- [Figma Personal Access Token](https://www.figma.com/developers/api#access-tokens)
+- LLM API Key ([Anthropic](https://console.anthropic.com/) | [OpenAI](https://platform.openai.com/) | [Google](https://aistudio.google.com/))
+
+> **For Windows Users:** The commands below use bash syntax (heredoc, `${PWD}`, `--network=host`, etc.) which are not compatible with CMD or PowerShell. Please use **WSL2** to run them:
+>
+> 1. Install [WSL2](https://learn.microsoft.com/en-us/windows/wsl/install) and a Linux distribution (e.g. Ubuntu)
+> 2. Install [Docker Desktop](https://docs.docker.com/desktop/install/windows-install/) and enable **WSL2 integration** in Settings → Resources → WSL Integration
+> 3. Open a WSL2 terminal (run `wsl` in CMD/PowerShell, or open Ubuntu from the Start menu)
+> 4. Run all the following commands inside the WSL2 terminal
+
+#### 2. Installation
+
+```bash
+docker pull crpi-p4hwwrt00km3axuk.cn-shanghai.personal.cr.aliyuncs.com/coderio/coderio
+```
+
+#### 3. Configuration
+
+Create a working directory and `config.yaml`:
+
+```bash
+mkdir -p ./coderio-app && cd ./coderio-app
+cat > config.yaml << 'EOF'
+model:
+  provider: openai          # anthropic | openai | google
+  model: gemini-3-pro-preview
+  baseUrl: https://api.anthropic.com
+  apiKey: your-api-key-here
+
+figma:
+  token: your-figma-token-here
+
+debug:
+  enabled: false
+EOF
+```
+
+#### 4. Usage
+
+```bash
+docker run -ti --rm \
+  --network=host \
+  -v ${PWD}:/app \
+  -v ./config.yaml:/root/.coderio/config.yaml \
+  crpi-p4hwwrt00km3axuk.cn-shanghai.personal.cr.aliyuncs.com/coderio/coderio bash
+```
+
+Once inside the container, use CodeRio commands:
+
+```bash
+# Convert Figma design to code (default mode: code only)
+coderio d2c -s 'https://www.figma.com/design/your-file-id/...'
+
+# Full mode: Generate code + visual validation + auto-refinement
+coderio d2c -s 'https://www.figma.com/design/your-file-id/...' -m full
+```
+
+#### 5. Run Your Project
+
+```bash
+# Navigate to generated project
+cd coderio/<design-name_node-id>/my-app
+
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# 🎉 Open http://localhost:5173
+```
+
+#### 6. View Validation Report
+
+Generated files are mounted to your host machine. Open the validation report in your browser:
+
+```
+./coderio/<design-name_node-id>/process/validation/index.html
+```
+
+### Option 3: Skill (Portable Embedded Workflow)
 
 Best for control and precision using AI Agents.
 

package/dist/cli.js

@@ -475,7 +475,7 @@ var AGENT_CONTEXT_WINDOW_TOKENS = 128e3;
 
 // src/cli/init.ts
 function registerCommands(program) {
-  const version = false ? "0.0.1" : "1.0.1";
+  const version = false ? "0.0.1" : "1.0.3-alpha.1";
   program.name(CLI_NAME).description(`${CLI_NAME} - Convert Figma designs to code`).version(version, "-v, -V, --version", "Output the version number").showHelpAfterError();
 }
 
@@ -595,20 +595,36 @@ var Workspace = class {
   /**
    * Delete all files and directories inside the workspace
    * @param workspace - The workspace structure
-   * @param exclude - Optional list of file/directory names to exclude from deletion
+   * @param preserve - Optional list of relative paths (from workspace root) to preserve from deletion
    */
-  deleteWorkspace(workspace, exclude = []) {
+  deleteWorkspace(workspace, preserve = []) {
     try {
-      if (fs2.existsSync(workspace.root)) {
-        const entries = fs2.readdirSync(workspace.root);
+      if (!fs2.existsSync(workspace.root)) return;
+      const preserveFiles = new Set(preserve.map((p) => path2.normalize(p)));
+      const preserveDirs = /* @__PURE__ */ new Set();
+      for (const p of preserveFiles) {
+        let dir = path2.dirname(p);
+        while (dir !== ".") {
+          preserveDirs.add(dir);
+          dir = path2.dirname(dir);
+        }
+      }
+      const deleteRecursive = (dirPath, relativeTo = "") => {
+        const entries = fs2.readdirSync(dirPath);
         for (const entry of entries) {
-          if (exclude.includes(entry)) {
+          const fullPath = path2.join(dirPath, entry);
+          const relPath = relativeTo ? path2.join(relativeTo, entry) : entry;
+          if (preserveFiles.has(relPath)) {
             continue;
           }
-          const fullPath = path2.join(workspace.root, entry);
-          fs2.rmSync(fullPath, { recursive: true, force: true });
+          if (preserveDirs.has(relPath)) {
+            deleteRecursive(fullPath, relPath);
+          } else {
+            fs2.rmSync(fullPath, { recursive: true, force: true });
+          }
         }
-      }
+      };
+      deleteRecursive(workspace.root);
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : String(error);
       logger.printWarnLog(`Failed to delete workspace: ${errorMessage}`);
@@ -5714,21 +5730,45 @@ var FILE_NAMING_CONVENTION = `
       - NEVER use PascalCase or other names for filenames (e.g., DO NOT use \`MainFrame.tsx\` or \`Button.tsx\`).`;
 var OUTPUT_FORMAT = `
   <output_format>
-    If only one file (TSX) is needed:
+    **CRITICAL - Output Format Requirements:**
+    
+    **CASE 1: Single File (TSX only)**
+    - Return code wrapped in triple backticks with language identifier
+    - NO file name header needed
+    - Example:
     \`\`\`tsx
-    // code...
+    export default function Component() {
+      return <div>...</div>;
+    }
     \`\`\`
 
-    If multiple files are needed (e.g., TSX + Styles):
+    **CASE 2: Multiple Files (TSX + Styles)**
+    - **REQUIRED**: Each file MUST start with EXACTLY \`## \` (two hash symbols + one space) followed by filename
+    - **REQUIRED**: Filename must be complete with extension (e.g., \`index.tsx\`, \`index.module.css\`)
+    - **FORBIDDEN**: Do NOT use single \`#\`, do NOT omit filename, do NOT use other markers
+    - Follow this exact structure:
+    
     ## index.tsx
     \`\`\`tsx
-    // code...
+    export default function Component() {
+      return <div>...</div>;
+    }
     \`\`\`
 
     ## index.module.[css|less|scss]
     \`\`\`[css|less|scss]
-    // styles...
+    .container {
+      /* styles */
+    }
     \`\`\`
+    
+    **VALIDATION CHECKLIST (for multiple files):**
+    \u2713 Each file section starts with \`## \` (two hashes + space)
+    \u2713 Filename includes full extension
+    \u2713 Code wrapped in triple backticks with language
+    \u2717 DO NOT use \`# filename\` (single hash)
+    \u2717 DO NOT omit file headers
+    \u2717 DO NOT use other separators
   </output_format>`;
 function generateChildrenPropsInstructions(modes) {
   const instructions = [];
@@ -6379,12 +6419,16 @@ async function design2code(url, mode) {
   const resume = await promptCheckpointChoice(checkpointer, threadId);
   logger.printInfoLog(`Starting design-to-code process for: ${urlInfo.projectName}`);
   if (resume !== true) {
-    workspaceManager.deleteWorkspace(workspace, ["checkpoint"]);
+    workspaceManager.deleteWorkspace(workspace, ["checkpoint/coderio-cli.db"]);
     logger.printInfoLog("Starting fresh...");
     await clearThreadCheckpoint(checkpointer, threadId);
   } else {
     logger.printInfoLog("Resuming from cache...");
   }
+  await callModel({
+    question: "\u8BF7\u4ECB\u7ECD\u4F60\u81EA\u5DF1\uFF0C\u4F60\u662F\u4EC0\u4E48\u6A21\u578B",
+    streaming: false
+  });
   const graph = new StateGraph(GraphStateAnnotation).addNode("initial" /* INITIAL */, initialProject).addNode("process" /* PROCESS */, generateProtocol).addNode("code" /* CODE */, generateCode).addNode("validation" /* VALIDATION */, runValidation).addEdge(START, "initial" /* INITIAL */).addEdge("initial" /* INITIAL */, "process" /* PROCESS */).addEdge("process" /* PROCESS */, "code" /* CODE */).addEdge("code" /* CODE */, "validation" /* VALIDATION */).addEdge("validation" /* VALIDATION */, END).compile({ checkpointer });
   const config = { configurable: { thread_id: threadId } };
   const validationMode = mode ?? "full" /* Full */;