@curenorway/kode-cli 1.5.1 → 1.7.0

package/dist/{chunk-Z3QNIDBJ.js → chunk-KAYIHS2T.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,400 @@ 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!
+
+## \u{1F4F1} Mobile Testing
+
+**50%+ of web traffic is mobile!** Always test on mobile viewports.
+
+### Playwright Viewport Testing
+
+\`\`\`
+1. browser_navigate \u2192 page URL
+2. browser_resize \u2192 { width: 375, height: 812 } (iPhone)
+3. browser_snapshot \u2192 check mobile layout
+4. browser_click \u2192 test touch interactions
+\`\`\`
+
+### Common Mobile Viewports
+
+| Device | Width | Height |
+|--------|-------|--------|
+| iPhone SE | 375 | 667 |
+| iPhone 14 | 390 | 844 |
+| iPhone 14 Pro Max | 430 | 932 |
+| iPad | 768 | 1024 |
+| Android (common) | 360 | 800 |
+
+### Mobile-Specific Issues to Check
+
+- [ ] Touch targets large enough (44x44px minimum)
+- [ ] No horizontal scroll
+- [ ] Text readable without zooming
+- [ ] Modals/dropdowns work on touch
+- [ ] Hover states have touch alternatives
+
+### Testing Pattern
+
+\`\`\`
+// Test on desktop first
+browser_navigate(url)
+browser_snapshot \u2192 verify desktop
+
+// Then test mobile
+browser_resize({ width: 375, height: 812 })
+browser_snapshot \u2192 verify mobile layout
+browser_click(".mobile-menu-btn") \u2192 test mobile nav
+\`\`\`
+
+## \u{1F4DA} External Libraries
+
+Need GSAP, Swiper, Lodash, or other libraries? Here's how to manage them.
+
+### Pattern 1: CDN Script Loader (Recommended)
+
+Create a global "libraries" script that loads dependencies:
+
+\`\`\`javascript
+// Script: libraries.js (Global, autoLoad: true)
+// This loads FIRST and makes libraries available to other scripts
+
+window.CureLibs = window.CureLibs || {};
+
+// Load a library from CDN
+function loadLib(name, url, globalVar) {
+  return new Promise((resolve, reject) => {
+    if (window[globalVar]) {
+      resolve(window[globalVar]);
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = url;
+    script.onload = () => {
+      window.CureLibs[name] = window[globalVar];
+      resolve(window[globalVar]);
+    };
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}
+
+// Pre-load common libraries (add what you need)
+window.CureLibs.load = {
+  gsap: () => loadLib('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js', 'gsap'),
+  scrollTrigger: () => loadLib('ScrollTrigger', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js', 'ScrollTrigger'),
+  swiper: () => loadLib('Swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', 'Swiper'),
+  lottie: () => loadLib('lottie', 'https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js', 'lottie'),
+  anime: () => loadLib('anime', 'https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js', 'anime'),
+  lodash: () => loadLib('_', 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js', '_'),
+};
+
+// Also load CSS for libraries that need it
+function loadCSS(url) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = url;
+  document.head.appendChild(link);
+}
+
+window.CureLibs.loadCSS = loadCSS;
+\`\`\`
+
+### Pattern 2: Using Libraries in Scripts
+
+\`\`\`javascript
+// Script: hero-animations.js (depends on GSAP)
+
+(async function() {
+  // Wait for library to load
+  const gsap = await window.CureLibs.load.gsap();
+  await window.CureLibs.load.scrollTrigger();
+
+  // Register plugin
+  gsap.registerPlugin(ScrollTrigger);
+
+  // Now use GSAP
+  gsap.from('.hero-title', {
+    y: 100,
+    opacity: 0,
+    duration: 1,
+    scrollTrigger: {
+      trigger: '.hero-section',
+      start: 'top 80%',
+    }
+  });
+})();
+\`\`\`
+
+### Pattern 3: Swiper Slider Example
+
+\`\`\`javascript
+// Script: testimonial-slider.js
+
+(async function() {
+  // Load Swiper JS and CSS
+  const Swiper = await window.CureLibs.load.swiper();
+  window.CureLibs.loadCSS('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
+
+  // Wait for CSS to load
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Initialize Swiper
+  new Swiper('.testimonial-slider', {
+    slidesPerView: 1,
+    spaceBetween: 30,
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+    },
+    breakpoints: {
+      768: { slidesPerView: 2 },
+      1024: { slidesPerView: 3 },
+    }
+  });
+})();
+\`\`\`
+
+### Popular Libraries CDN URLs
+
+| Library | CDN URL |
+|---------|---------|
+| GSAP | \`https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js\` |
+| ScrollTrigger | \`https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js\` |
+| Swiper | \`https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js\` |
+| Lottie | \`https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js\` |
+| Anime.js | \`https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js\` |
+| Lodash | \`https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js\` |
+| Alpine.js | \`https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\` |
+| Chart.js | \`https://cdn.jsdelivr.net/npm/chart.js\` |
+
+### Library Management Best Practices
+
+1. **Create a central libraries.js script** - Load ALL external deps from one place
+2. **Use async/await pattern** - Ensure libraries load before using them
+3. **Don't duplicate loading** - Check if library already exists
+4. **Version pin CDN URLs** - Avoid unexpected breaking changes
+5. **Load CSS when needed** - Some libraries (Swiper) need CSS too
+
+## \u{1F517} Script Dependencies & Load Order
+
+Scripts sometimes depend on each other. Here's how to manage that.
+
+### Understanding Load Order
+
+| Scope | autoLoad | When it Loads |
+|-------|----------|---------------|
+| Global | true | Immediately, inlined in init.js |
+| Global | false | On-demand via \`CK.loadScript()\` |
+| Page | true | When URL matches page pattern |
+| Page | false | On-demand via \`CK.loadScript()\` |
+
+**Global autoLoad scripts load FIRST**, in the order they appear in the script list.
+
+### Dependency Pattern
+
+\`\`\`javascript
+// Script: libraries.js (Global, autoLoad: true, position: FIRST)
+// Loads external libraries
+
+// Script: utils.js (Global, autoLoad: true, position: SECOND)
+// Depends on libraries.js, provides shared utilities
+
+// Script: hero-animations.js (Page-specific for /home)
+// Depends on both libraries.js and utils.js
+(async function() {
+  // Libraries are already loaded (global autoLoad runs first)
+  const gsap = await window.CureLibs.load.gsap();
+
+  // Utils are available
+  const elements = window.CureUtils.queryAll('.hero-title');
+
+  // Now animate
+  gsap.from(elements, { opacity: 0 });
+})();
+\`\`\`
+
+### Manual Loading for Complex Dependencies
+
+\`\`\`javascript
+// If you need explicit control, use CK.loadScript()
+async function initComplexFeature() {
+  // Load dependencies in order
+  await CK.loadScript('libraries');
+  await CK.loadScript('utils');
+  await CK.loadScript('complex-feature');
+}
+
+// Trigger when needed
+document.querySelector('.trigger-btn').addEventListener('click', initComplexFeature);
+\`\`\`
+
+### Avoiding Conflicts with Webflow
+
+Webflow has its own JS (Webflow.js, IX2 interactions). To avoid conflicts:
+
+1. **Wrap in IIFE** - Isolate your code
+   \`\`\`javascript
+   (function() {
+     // Your code here, isolated from global scope
+   })();
+   \`\`\`
+
+2. **Use unique prefixes** - \`CureSlider\` not \`Slider\`
+
+3. **Check before init** - Don't re-init Webflow components
+   \`\`\`javascript
+   if (!element.hasAttribute('data-cure-initialized')) {
+     // Initialize
+     element.setAttribute('data-cure-initialized', 'true');
+   }
+   \`\`\`
+
+4. **Respect Webflow events**
+   \`\`\`javascript
+   // Wait for Webflow to be ready
+   window.Webflow && window.Webflow.push(function() {
+     // Your code runs after Webflow initializes
+   });
+   \`\`\`
+
+## \u23EA Rollback & Version Recovery
+
+Things go wrong. Here's how to recover quickly.
+
+### Checking Version History
+
+Use \`kode_get_script\` to see version info, or check the Cure Kode UI.
+
+### Quick Rollback Pattern
+
+\`\`\`
+1. Identify the broken script
+2. kode_get_script \u2192 get current (broken) version
+3. Check version history in Cure Kode UI
+4. Copy the previous working version
+5. kode_update_script \u2192 paste the working code
+6. kode_deploy \u2192 push fix to staging
+7. Verify with Playwright
+8. kode_promote \u2192 restore production
+\`\`\`
+
+### Emergency Production Fix
+
+If production is broken RIGHT NOW:
+
+\`\`\`
+Option A: Quick disable
+- kode_update_script \u2192 set autoLoad: false
+- kode_deploy + kode_promote
+- Script stops loading immediately
+
+Option B: Empty script
+- kode_update_script \u2192 replace with: // temporarily disabled
+- kode_deploy + kode_promote
+
+Option C: Full rollback
+- Get previous version from history
+- kode_update_script with old code
+- kode_deploy + kode_promote
+\`\`\`
+
+### Prevention: Before Major Changes
+
+1. **Note the current working state** in context.md
+2. **Test thoroughly on staging** with Playwright
+3. **Deploy during low-traffic hours** if risky
+4. **Have rollback plan ready** before promoting
+
+### Debugging Production Issues
+
+\`\`\`
+1. browser_navigate \u2192 production URL
+2. browser_console_messages \u2192 look for errors
+3. Compare with staging \u2192 same error?
+4. If staging works but production doesn't:
+   - Check if promotion completed
+   - Check for caching issues (hard refresh)
+   - Check for environment differences
+\`\`\`
+
 `;
 }
 
@@ -910,6 +1328,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 +1481,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-KAYIHS2T.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-KAYIHS2T.js";
 export {
   KodeApiClient,
   KodeApiError,

package/package.json

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