@curenorway/kode-cli 1.5.1 → 1.6.0

package/dist/{chunk-Z3QNIDBJ.js → chunk-GKNPODOV.js}

@@ -446,6 +446,10 @@ The \`.mcp.json\` file enables AI tools:
 - Modify site structure, CMS collections, pages, and more
 - Requires the Webflow MCP Bridge App running in Designer (press E \u2192 Apps)
 
+**playwright MCP**: Testing and runtime HTML inspection
+- \`browser_navigate\`, \`browser_snapshot\`, \`browser_click\`, \`browser_console_messages\`
+- Use to verify scripts work correctly AFTER deploying to staging
+
 Restart Claude Code after \`kode init\` to load MCP servers.
 
 `;
@@ -676,6 +680,14 @@ Use both MCPs together for powerful workflows:
 
 **IMPORTANT**: Before writing ANY JavaScript, always gather context first. Follow this decision tree:
 
+### The Three MCPs
+
+| MCP | Purpose | When to Use |
+|-----|---------|-------------|
+| **Cure Kode** | Script management, static HTML, deployment | Writing & deploying scripts |
+| **Webflow** | Site structure, CMS, pages, assets | Understanding data & structure |
+| **Playwright** | Runtime HTML, testing, screenshots | Verifying scripts work correctly |
+
 ### Step 1: Understand the Task
 
 | Task Type | First Action |
@@ -685,8 +697,9 @@ Use both MCPs together for powerful workflows:
 | JS for forms | Use Webflow MCP \u2192 get form structure, then Cure Kode for custom validation |
 | JS for navigation/menus | Use Webflow MCP \u2192 \`pages_list\` to get site structure |
 | JS for dynamic content | Check BOTH - Webflow for data structure, Cure Kode for existing scripts |
+| Debugging existing JS | Use Playwright MCP \u2192 \`browser_navigate\` + \`browser_console_messages\` |
 
-### Step 2: Discovery Workflow
+### Step 2: The Complete Workflow
 
 \`\`\`
 1. DISCOVER: What elements/data am I working with?
@@ -702,8 +715,19 @@ Use both MCPs together for powerful workflows:
 4. IMPLEMENT: Write the JavaScript
    - Use kode_create_script or kode_update_script
 
-5. DEPLOY: Test on staging first
-   - kode_deploy (staging), verify, then kode_promote (production)
+5. DEPLOY: Push to staging
+   - kode_deploy (staging)
+
+6. VERIFY: Test that it works! \u2B05\uFE0F CRITICAL STEP
+   - Playwright MCP: browser_navigate to staging URL
+   - Playwright MCP: browser_snapshot to see runtime DOM
+   - Playwright MCP: browser_console_messages to check for errors
+   - Playwright MCP: browser_click / browser_fill to test interactions
+   - If issues found \u2192 fix and redeploy
+
+7. PROMOTE: Go live
+   - kode_promote (production)
+   - Optionally verify production with Playwright
 \`\`\`
 
 ### Step 3: Common Patterns
@@ -758,6 +782,85 @@ If you can't find the right selectors or understand the structure:
 3. Check if there's cached context in \`kode_list_pages_context\`
 4. Ask the user to refresh context: \`kode html <url> --save --force\`
 
+## \u{1F3AD} Playwright MCP (Testing & Verification)
+
+Playwright MCP is **always included** because testing is essential. Use it to:
+- Get **runtime HTML** (after JavaScript has executed)
+- **Test interactions** (clicks, form fills, hovers)
+- **Debug issues** (console logs, network errors)
+- **Take screenshots** for visual verification
+
+### Playwright MCP Tools
+
+| Tool | Purpose | Example Use |
+|------|---------|-------------|
+| \`browser_navigate\` | Go to a URL | Navigate to staging site |
+| \`browser_snapshot\` | Get accessibility tree (runtime DOM) | See what elements exist after JS runs |
+| \`browser_click\` | Click an element | Test button clicks, menu opens |
+| \`browser_fill\` | Type into input | Test form interactions |
+| \`browser_select\` | Select dropdown option | Test select inputs |
+| \`browser_hover\` | Hover over element | Test hover states |
+| \`browser_screenshot\` | Take screenshot | Visual verification |
+| \`browser_console_messages\` | Get console output | Check for JS errors |
+| \`browser_network_requests\` | See network activity | Debug API calls |
+
+### Static vs Runtime HTML
+
+| Method | What You Get | When to Use |
+|--------|--------------|-------------|
+| \`kode_fetch_html_smart\` | Static HTML (before JS) | Understanding page structure |
+| \`browser_snapshot\` | Runtime DOM (after JS) | Verifying JS worked correctly |
+
+**Example**: If your script adds a class \`.is-active\` to elements, \`kode_fetch_html_smart\` won't show it, but \`browser_snapshot\` will!
+
+### Testing Patterns
+
+**Pattern: Verify Script Deployed Correctly**
+\`\`\`
+1. browser_navigate \u2192 staging URL
+2. browser_snapshot \u2192 check if expected elements/classes exist
+3. browser_console_messages \u2192 ensure no JS errors
+\`\`\`
+
+**Pattern: Test Click Interaction**
+\`\`\`
+1. browser_navigate \u2192 page URL
+2. browser_click \u2192 target element (e.g., ".accordion-trigger")
+3. browser_snapshot \u2192 verify state changed (e.g., ".accordion-content" visible)
+\`\`\`
+
+**Pattern: Test Form Validation**
+\`\`\`
+1. browser_navigate \u2192 form page
+2. browser_fill \u2192 input invalid data
+3. browser_click \u2192 submit button
+4. browser_snapshot \u2192 verify error message appears
+\`\`\`
+
+**Pattern: Debug Why Script Isn't Working**
+\`\`\`
+1. browser_navigate \u2192 problem page
+2. browser_console_messages \u2192 look for errors
+3. browser_snapshot \u2192 check if elements exist
+4. Compare with kode_fetch_html_smart \u2192 is JS even loading?
+\`\`\`
+
+### Testing Checklist
+
+Before promoting to production, verify:
+- [ ] No console errors (\`browser_console_messages\`)
+- [ ] Expected DOM changes visible (\`browser_snapshot\`)
+- [ ] Interactions work (\`browser_click\`, \`browser_fill\`)
+- [ ] Works on key pages (test multiple URLs)
+
+### Staging vs Production URLs
+
+The staging URL for testing is typically:
+- \`https://[site-slug].webflow.io\` (Webflow staging)
+- Or check \`kode_site_info\` for configured staging domain
+
+Always test on staging before promoting to production!
+
 `;
 }
 
@@ -910,6 +1013,10 @@ config.json
         url: "https://mcp.webflow.com/sse"
       };
     }
+    mcpConfig.mcpServers["playwright"] = {
+      command: "npx",
+      args: ["-y", "@playwright/mcp@latest"]
+    };
     spinner.start("Generating AI context files...");
     writeFileSync3(mcpConfigPath, JSON.stringify(mcpConfig, null, 2) + "\n");
     spinner.text = "Generating AI context files...";
@@ -1059,6 +1166,9 @@ config.json
       console.log(chalk.dim("  webflow: ") + chalk.yellow("Not configured"));
       console.log(chalk.dim("    Run `kode init --force` to set up Webflow MCP later."));
     }
+    console.log();
+    console.log(chalk.dim("  playwright:"));
+    console.log(chalk.dim("    Test scripts, get runtime HTML (after JS runs), take screenshots."));
     if (claudeMdAction === "separate") {
       console.log(chalk.yellow("\n\u{1F4A1} Tip: Add this line to your CLAUDE.md to reference Kode instructions:"));
       console.log(chalk.dim("   See KODE.md for Cure Kode CDN management instructions."));

package/dist/cli.js

@@ -15,7 +15,7 @@ import {
   readPageContext,
   statusCommand,
   watchCommand
-} from "./chunk-Z3QNIDBJ.js";
+} from "./chunk-GKNPODOV.js";
 
 // src/cli.ts
 import { Command } from "commander";

package/dist/index.js

@@ -27,7 +27,7 @@ import {
   updateScriptPurpose,
   watchCommand,
   writeContext
-} from "./chunk-Z3QNIDBJ.js";
+} from "./chunk-GKNPODOV.js";
 export {
   KodeApiClient,
   KodeApiError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curenorway/kode-cli",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "CLI tool for Cure Kode - manage JS/CSS scripts for Webflow sites",
   "type": "module",
   "bin": {