@curenorway/kode-cli 1.5.0 → 1.6.0

package/dist/{chunk-XBDIENFY.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.
 
 `;
@@ -672,6 +676,191 @@ Use both MCPs together for powerful workflows:
 2. Use **cure-kode MCP** to add custom JavaScript behavior to those pages
 3. Deploy scripts with \`kode_deploy\`, then verify in Webflow Designer
 
+## \u{1F9E0} Smart Workflow Guide
+
+**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 |
+|-----------|--------------|
+| JS for CMS items (blog posts, products, etc.) | Use Webflow MCP \u2192 \`collections_list\`, \`collection_items\` to understand schema |
+| JS for page interactions (modals, tabs, etc.) | Use Cure Kode MCP \u2192 \`kode_fetch_html_smart\` or \`kode_get_page_context\` |
+| 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: The Complete Workflow
+
+\`\`\`
+1. DISCOVER: What elements/data am I working with?
+   - Webflow MCP: Site structure, CMS schemas, page list
+   - Cure Kode MCP: kode_get_page_context for CSS selectors and DOM structure
+
+2. CHECK: Are there existing scripts that do something similar?
+   - Cure Kode MCP: kode_list_scripts, kode_get_script
+
+3. PLAN: What selectors/APIs will my script need?
+   - Document in context.md using kode_update_context
+
+4. IMPLEMENT: Write the JavaScript
+   - Use kode_create_script or kode_update_script
+
+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
+
+**Pattern A: CMS-dependent JavaScript**
+\`\`\`
+User: "Add filtering to the blog posts"
+
+AI Workflow:
+1. Webflow MCP \u2192 collections_list \u2192 find "Blog Posts" collection
+2. Webflow MCP \u2192 collection_get \u2192 understand fields (category, tags, date)
+3. Cure Kode MCP \u2192 kode_get_page_context("/blog") \u2192 get CSS selectors for blog items
+4. Write JS that uses the discovered selectors and field names
+5. Deploy to staging, test, promote
+\`\`\`
+
+**Pattern B: Interactive Component**
+\`\`\`
+User: "Add an accordion to the FAQ section"
+
+AI Workflow:
+1. Cure Kode MCP \u2192 kode_get_page_context("/faq") \u2192 find FAQ section structure
+2. Check: Is it CMS-powered? If yes \u2192 Webflow MCP for collection schema
+3. Write JS using the exact CSS selectors from page context
+4. Deploy and test
+\`\`\`
+
+**Pattern C: Site-wide Feature**
+\`\`\`
+User: "Add a cookie consent banner"
+
+AI Workflow:
+1. Cure Kode MCP \u2192 kode_list_scripts \u2192 check for existing consent scripts
+2. Create as GLOBAL script with autoLoad: true
+3. No page-specific context needed - runs on all pages
+4. Deploy to staging, verify on multiple pages, promote
+\`\`\`
+
+### Key Principles
+
+1. **Never guess selectors** - Always use \`kode_get_page_context\` or \`kode_fetch_html_smart\`
+2. **Never assume CMS structure** - Always query Webflow MCP for collection schemas
+3. **Check before creating** - Use \`kode_list_scripts\` to avoid duplicates
+4. **Document discoveries** - Update \`context.md\` with findings for future sessions
+5. **Staging first** - Always deploy to staging before production
+
+### When You're Stuck
+
+If you can't find the right selectors or understand the structure:
+1. Ask the user to open the page in browser and describe what they see
+2. Use \`kode_fetch_html_smart\` with the specific URL
+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!
+
 `;
 }
 
@@ -824,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...";
@@ -973,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-XBDIENFY.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-XBDIENFY.js";
+} from "./chunk-GKNPODOV.js";
 export {
   KodeApiClient,
   KodeApiError,

package/package.json

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