coderio 1.0.1 → 1.0.2

package/README.md

@@ -54,12 +54,12 @@ https://github.com/user-attachments/assets/bd0c3f18-e98a-4050-bf22-46b198fadac2
 
 CodeRio can be seamlessly integrated into Cursor as a Skill. Simply input a prompt like **"Create a React project and restore this design with high fidelity,"** along with your output directory, Figma URL([Design Link](https://www.figma.com/design/c0UBII8lURfxZIY8W6tSDR/Top-16-Websites-of-2024---Awwwards--Community-?node-id=30-8264&t=FB3Hohq2nsH7ZFts-4)), and Token. The Agent will guide you step-by-step through the page generation process. For Landing Pages, it achieves **high-fidelity restoration**, accurately reproducing images and styles. It also automatically encapsulates reusable components (such as cards) and strictly adheres to **frontend development best practices**.
 
-
 https://github.com/user-attachments/assets/43817e97-ffd2-40e3-9d33-78ee55b2ec2d
 
 ## 🚀 Quick Start
 
 ### Option 1: CLI (Recommended 👍🏻)
+
 Best for one-click generation.
 
 #### 1. Prerequisites
@@ -79,62 +79,34 @@ npm install -g coderio
 pnpm add -g coderio
 ```
 
-> **Note for pnpm v9+ users**: If you see a warning about "Ignored build scripts", run:
->
-> ```bash
-> pnpm approve-builds
-> ```
->
-> This allows native dependencies (better-sqlite3) to compile properly.
+> **Note for pnpm v9+ users**: If you see a warning about "Ignored build scripts", run: `pnpm approve-builds` to allow native dependencies (better-sqlite3) to compile properly.
 >
 > **Note**: Validation features (e.g., `d2c --mode full`) require optional dependencies `playwright` and `sharp`. They are not bundled with coderio by default to keep installation lightweight. Please install them globally beforehand for smoother execution:
 >
 > ```bash
 > npm install -g playwright sharp
 > npx playwright install chromium
-> ``` 
+> ```
 
 #### 3. Configuration
 
-> **Important**: This tool requires an LLM with **multimodal (vision) capabilities** to analyze design screenshots.
-> We highly recommend using **`gemini-3-pro-preview`** for the best balance of performance and cost.
+> **Important**: Requires a **multimodal (vision)** model (Recommended: `gemini-3-pro-preview`).
 
-Create `~/.coderio/config.yaml` (Windows: `%USERPROFILE%\.coderio\config.yaml`) with:
+Create config file at `~/.coderio/config.yaml` (Windows: `%USERPROFILE%\.coderio\config.yaml`):
 
 ```yaml
 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
-```
-
-<details>
-<summary><strong>macOS / Linux One-click Command</strong></summary>
-
-```bash
-mkdir -p ~/.coderio
-cat > ~/.coderio/config.yaml << 'EOF'
-model:
-  provider: openai          # anthropic | openai | google
-  model: gemini-3-pro-preview
-  baseUrl: https://api.anthropic.com
-  apiKey: your-api-key-here
+    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
+    token: your-figma-token-here
 
 debug:
-  enabled: false
-EOF
+    enabled: false # set 'true', if you want to save model and request information
 ```
-</details>
 
 #### 4. Usage
 
@@ -163,10 +135,7 @@ pnpm dev
 
 #### 6. View Validation Report
 
-```bash
-# Open validation report in browser
-open coderio/<design-name_node-id>/process/validation/index.html
-```
+report path: coderio/<design-name_node-id>/process/validation/index.html
 
 #### 📖 All Commands
 
@@ -179,21 +148,22 @@ open coderio/<design-name_node-id>/process/validation/index.html
 | `images`          | -     | Download and process Figma assets                   |
 
 ### Option 2: Skill (Portable Embedded Workflow)
+
 Best for control and precision using AI Agents.
 
 **Prerequisites**:
 Copy the Skill file to your Cursor configuration directory:
-```bash
-mkdir -p ~/.cursor/skills/design-to-code
-cp docs/skills/SKILL.md ~/.cursor/skills/design-to-code/SKILL.md
-```
+
+Copy `skills\design-to-code` folder to `~\.cursor\skills` (Windows: `%USERPROFILE%\.cursor\skills`)
 
 **Using in Cursor**:
-1. Open Cursor Chat (`Cmd` + `L`).
+
+1. Open Cursor Chat.
 2. Type: **"Use design-to-code skill to convert this design: [Your Figma URL]"**
 3. The Agent will guide you step-by-step through protocol extraction and code generation.
 
 **Using in Claude Code**:
+
 1. Start Claude Code.
 2. Type: **"Read docs/skills/SKILL.md and perform design conversion: [Your Figma URL]"**
 

package/dist/cli.js

@@ -594,12 +594,17 @@ 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
    */
-  deleteWorkspace(workspace) {
+  deleteWorkspace(workspace, exclude = []) {
     try {
       if (fs2.existsSync(workspace.root)) {
         const entries = fs2.readdirSync(workspace.root);
         for (const entry of entries) {
+          if (exclude.includes(entry)) {
+            continue;
+          }
           const fullPath = path2.join(workspace.root, entry);
           fs2.rmSync(fullPath, { recursive: true, force: true });
         }
@@ -653,7 +658,7 @@ function saveDebugLog(requestInfo, responseInfo) {
     "------------response------------",
     JSON.stringify(responseInfo, null, 2)
   ].join("\n");
-  writeFile(workspaceManager.path?.debug ?? "", `fetch_${(/* @__PURE__ */ new Date()).toISOString()}.md`, debugContent);
+  writeFile(workspaceManager.path?.debug ?? "", `fetch_${(/* @__PURE__ */ new Date()).toISOString().replace(/:/g, "-")}.md`, debugContent);
 }
 async function get(url, config) {
   const response = await axios.get(url, config);
@@ -1418,10 +1423,13 @@ var FigmaTool = class {
     }
     const document2 = await fetchFigmaNode(fileId, nodeId, token);
     if (!document2 || !document2?.children?.length) {
-      return void 0;
+      throw new Error("Failed to fetch Figma document");
     }
     const images = await fetchFigmaImages(fileId, nodeId, token);
     const thumbnail = images?.[nodeId] || "";
+    if (!thumbnail) {
+      throw new Error("Failed to fetch Figma document thumbnail");
+    }
     document2.thumbnailUrl = thumbnail;
     const cleanedDocument = cleanFigma(document2);
     return cleanedDocument;
@@ -1553,7 +1561,7 @@ async function callModel(options) {
         "------------response------------",
         JSON.stringify(message.text, null, 2)
       ].join("\n");
-      writeFile(workspaceManager.path?.debug ?? "", `model_${(/* @__PURE__ */ new Date()).toISOString()}.md`, debugContent);
+      writeFile(workspaceManager.path?.debug ?? "", `model_${(/* @__PURE__ */ new Date()).toISOString().replace(/:/g, "-")}.md`, debugContent);
     }
     return message.text;
   } catch (error) {
@@ -2012,7 +2020,7 @@ var parseFigmaUrl = (url) => {
   if (!fileId || !nodeId) {
     throw new Error("Invalid Figma URL");
   }
-  return { fileId, name, nodeId, projectName: `${name}_${nodeId}` };
+  return { fileId, name, nodeId, projectName: `${name}_${nodeId.replace(/:/g, "_")}` };
 };
 
 // src/cli/d2p.ts
@@ -6333,6 +6341,14 @@ async function checkpointExists(checkpointer, threadId) {
     return false;
   }
 }
+async function clearCheckpoint(checkpointer, threadId) {
+  try {
+    await checkpointer.deleteThread(threadId);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    logger.printWarnLog(`Failed to clear checkpoint: ${errorMessage}`);
+  }
+}
 async function promptCheckpointChoice(checkpointer, threadId) {
   const hasCheckpoint = await checkpointExists(checkpointer, threadId);
   if (!hasCheckpoint) {
@@ -6341,6 +6357,9 @@ async function promptCheckpointChoice(checkpointer, threadId) {
   const choice = await promptUserChoice();
   return choice === "resume";
 }
+async function clearThreadCheckpoint(checkpointer, threadId) {
+  await clearCheckpoint(checkpointer, threadId);
+}
 function initializeSqliteSaver(dbPath) {
   const dbDir = path14.dirname(dbPath);
   if (!fs11.existsSync(dbDir)) {
@@ -6356,20 +6375,16 @@ async function design2code(url, mode) {
   const urlInfo = parseFigmaUrl(url);
   const threadId = urlInfo.projectName;
   const workspace = workspaceManager.initWorkspace(threadId);
-  let checkpointer = initializeSqliteSaver(workspace.db);
+  const checkpointer = initializeSqliteSaver(workspace.db);
   const resume = await promptCheckpointChoice(checkpointer, threadId);
   logger.printInfoLog(`Starting design-to-code process for: ${urlInfo.projectName}`);
   if (resume !== true) {
-    workspaceManager.deleteWorkspace(workspace);
+    workspaceManager.deleteWorkspace(workspace, ["checkpoint"]);
     logger.printInfoLog("Starting fresh...");
-    checkpointer = initializeSqliteSaver(workspace.db);
+    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 */;