@rune-kit/rune 2.2.4 → 2.2.6

package/compiler/adapters/openclaw.js

@@ -100,6 +100,69 @@ export default {
     };
   },
 
+  /**
+   * Generate README.md for ClawHub listing page
+   *
+   * @param {object[]} skills - parsed skill objects
+   * @param {object} pluginJson - Rune's .claude-plugin/plugin.json
+   * @returns {string} markdown content
+   */
+  generateReadme(skills, pluginJson) {
+    const version = pluginJson.version || '0.0.0';
+    const l1 = skills.filter((s) => s.layer === 'L1').map((s) => s.name);
+    const l2 = skills.filter((s) => s.layer === 'L2').map((s) => s.name);
+    const l3 = skills.filter((s) => s.layer === 'L3').map((s) => s.name);
+
+    return `# Rune
+
+> Less skills. Deeper connections.
+
+**${skills.length}-skill mesh** for AI coding assistants — 5-layer architecture, 200+ connections, 14 extension packs.
+
+## Install
+
+\`\`\`
+clawhub install rune-kit
+\`\`\`
+
+Or via npm:
+
+\`\`\`
+npx @rune-kit/rune init
+\`\`\`
+
+## What is Rune?
+
+Rune is a **mesh** — skills call each other bidirectionally, forming resilient workflows. If one skill fails, the mesh routes around it.
+
+Use \`rune:cook\` for any code task, \`rune:team\` for parallel work, \`rune:launch\` for deploy, \`rune:rescue\` for legacy code.
+
+## Architecture
+
+| Layer | Role | Skills |
+|-------|------|--------|
+| L0 | Router | skill-router |
+| L1 | Orchestrators | ${l1.join(', ')} |
+| L2 | Workflow Hubs | ${l2.join(', ')} |
+| L3 | Utilities | ${l3.join(', ')} |
+| L4 | Extensions | 14 domain packs |
+
+## Extension Packs (L4)
+
+ui · backend · devops · mobile · security · trading · saas · ecommerce · ai-ml · gamedev · content · analytics · chrome-ext · zalo
+
+## Links
+
+- **Source**: [github.com/rune-kit/rune](https://github.com/rune-kit/rune)
+- **Docs**: [rune-kit.github.io/rune](https://rune-kit.github.io/rune)
+- **Guides**: [rune-kit.github.io/rune/guides](https://rune-kit.github.io/rune/guides)
+
+## License
+
+MIT — v${version}
+`;
+  },
+
   /**
    * Generate src/index.ts entry point with register(api) pattern
    *

package/compiler/emitter.js

@@ -256,6 +256,16 @@ export async function buildAll({ runeRoot, outputRoot, adapter, disabledSkills =
     const entryPoint = adapter.generateEntryPoint(parsedSkills, routerContent);
     await writeFile(path.join(srcDir, 'index.ts'), entryPoint, 'utf-8');
     stats.files.push('src/index.ts');
+
+    // Write README.md + SKILL.md for ClawHub listing page
+    if (adapter.generateReadme) {
+      const readme = adapter.generateReadme(parsedSkills, pluginJson);
+      await writeFile(path.join(openclawRoot, 'README.md'), readme, 'utf-8');
+      stats.files.push('README.md');
+      // SKILL.md required by clawhub publish
+      await writeFile(path.join(openclawRoot, 'SKILL.md'), readme, 'utf-8');
+      stats.files.push('SKILL.md');
+    }
   }
 
   return stats;

package/docs/EXTENSION-TEMPLATE.md

@@ -77,6 +77,9 @@ Brief description.
 Calls → [L3 utility]: [when/why]
 Called By ← [L2 hub]: [when/why]
 Called By ← [L1 orchestrator]: [when auto-detected]
+Feeds Into → [skill]: [what artifact] → [how consumed]
+Fed By ← [skill]: [what artifact] ← [what this pack needs]
+Feedback Loop ↻ [skill-a] ↔ [skill-b]: [what gets refined bidirectionally]
 ```
 
 ## Tech Stack Support (if applicable)
@@ -97,11 +100,26 @@ Called By ← [L1 orchestrator]: [when auto-detected]
 |---|---|---|
 | [domain-specific failure] | HIGH/MEDIUM | [how to avoid] |
 
+## Self-Validation
+
+Per-skill quality checks that run before reporting "done". Domain-specific — not covered by centralized completion-gate.
+
+```
+SELF-VALIDATION (per skill):
+skill-1:
+  - [ ] [domain-specific quality check]
+  - [ ] [output format compliance]
+skill-2:
+  - [ ] [domain-specific quality check]
+  - [ ] [completeness check]
+```
+
 ## Done When
 
 - [Verifiable condition 1]
 - [Verifiable condition 2]
 - [Structured output emitted]
+- Self-Validation: all per-skill checks passed
 
 ## Cost Profile
 

package/docs/SKILL-TEMPLATE.md

@@ -28,6 +28,22 @@ One paragraph describing the skill's role in the Rune ecosystem.
 
 - `skill-name` (L1|L2): condition when called
 
+## Data Flow
+
+Data relationships capture how skill outputs become inputs for other skills — without direct invocation. Unlike Calls/Called By (control flow), data flow tracks artifacts that persist and get consumed asynchronously.
+
+### Feeds Into →
+
+- `skill-name` (L2): [what artifact] → [how it's consumed]
+
+### Fed By ←
+
+- `skill-name` (L2): [what artifact] ← [what this skill needs from it]
+
+### Feedback Loops ↻
+
+- `skill-a` ↔ `skill-b`: [what gets refined bidirectionally and why]
+
 ## Workflow
 
 Step-by-step execution flow.
@@ -61,11 +77,26 @@ Known failure modes for this skill. Check these before declaring done.
 |---|---|---|
 | [what goes wrong] | CRITICAL/HIGH/MEDIUM/LOW | [how to avoid it] |
 
+## Self-Validation
+
+Domain-specific quality checks that run BEFORE this skill reports "done". These are embedded in the skill itself — not centralized like completion-gate. Each check is specific to what THIS skill produces.
+
+```
+SELF-VALIDATION (run before emitting output):
+- [ ] [check 1 — what to verify about this skill's output]
+- [ ] [check 2 — domain-specific quality criterion]
+- [ ] [check 3 — format/completeness check]
+IF ANY check fails → fix before reporting done. Do NOT defer to completion-gate.
+```
+
+Why: Completion-gate validates claims generically. Self-Validation catches domain-specific quality issues that only THIS skill understands (e.g., test skill checks assertion count, plan skill checks dependency ordering, review skill checks all files were read).
+
 ## Done When
 
 - [condition 1 — specific, verifiable]
 - [condition 2]
 - [condition 3 — structured report emitted]
+- Self-Validation checklist: all checks passed
 
 ## Cost Profile
 

package/docs/guides/index.html

@@ -379,18 +379,38 @@
       cursor: pointer; display: flex; align-items: center; justify-content: center;
       font-size: 16px; transition: all var(--transition); flex-shrink: 0;
     }
-    .theme-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
+    .theme-toggle:hover, .lang-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
+    .lang-toggle {
+      background: none; border: 1px solid var(--border); color: var(--text-secondary);
+      width: 34px; height: 34px; border-radius: var(--radius-sm);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      font-size: 16px; transition: all var(--transition); flex-shrink: 0;
+    }
+    /* Google Translate — hide ALL injected elements */
     .goog-te-banner-frame { display: none !important; }
-    body { top: 0 !important; }
-    .goog-te-gadget > span { display: none !important; }
-    .goog-te-gadget { font-size: 0; line-height: 0; }
-    .goog-te-combo {
-      background: var(--bg-card); color: var(--text-secondary);
-      border: 1px solid var(--border); border-radius: var(--radius-sm);
-      padding: 5px 8px; font-family: var(--font-body); font-size: 12px;
-      cursor: pointer; outline: none;
+    body { top: 0 !important; position: static !important; }
+    .skiptranslate { display: none !important; height: 0 !important; overflow: hidden !important; }
+    .goog-te-spinner-pos, .goog-te-balloon-frame, #goog-gt-tt, .goog-te-ftab-frame { display: none !important; }
+    .goog-text-highlight { background: none !important; box-shadow: none !important; }
+    font[style] > font { vertical-align: unset !important; }
+    #_gt_dummy { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
+    /* Language dropdown */
+    .lang-dropdown { position: relative; }
+    .lang-menu {
+      position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
+      background: var(--bg-card); border: 1px solid var(--border);
+      border-radius: var(--radius-md); padding: 4px; min-width: 140px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+      display: flex; flex-direction: column;
+    }
+    .lang-menu[hidden] { display: none; }
+    .lang-menu button {
+      background: none; border: none; color: var(--text-secondary);
+      padding: 7px 12px; font-family: var(--font-body); font-size: 13px;
+      text-align: left; cursor: pointer; border-radius: var(--radius-sm);
+      transition: all var(--transition);
     }
-    .goog-te-combo:hover { border-color: var(--accent); }
+    .lang-menu button:hover { background: var(--bg-elevated); color: var(--text-primary); }
 
     /* ─── RESPONSIVE ─── */
     @media (max-width: 900px) {
@@ -431,9 +451,28 @@
         <a href="../">Home</a>
         <a href="./" class="active">Guides</a>
         <a href="../#pricing">Pricing</a>
-        <div class="nav-controls">
+        <div class="nav-controls notranslate" translate="no">
           <button class="theme-toggle" id="theme-toggle" aria-label="Toggle light/dark mode" title="Toggle theme">&#9790;</button>
-          <div id="google_translate_element"></div>
+          <div class="lang-dropdown" id="lang-dropdown">
+            <button class="lang-toggle" id="lang-btn" aria-label="Translate page" title="Translate page">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z"/></svg>
+            </button>
+            <div class="lang-menu notranslate" id="lang-menu" translate="no" hidden>
+              <button data-lang="">English</button>
+              <button data-lang="vi">Tiếng Việt</button>
+              <button data-lang="ja">日本語</button>
+              <button data-lang="ko">한국어</button>
+              <button data-lang="zh-CN">中文(简)</button>
+              <button data-lang="zh-TW">中文(繁)</button>
+              <button data-lang="fr">Français</button>
+              <button data-lang="de">Deutsch</button>
+              <button data-lang="es">Español</button>
+              <button data-lang="pt">Português</button>
+              <button data-lang="ru">Русский</button>
+              <button data-lang="th">ไทย</button>
+              <button data-lang="id">Bahasa</button>
+            </div>
+          </div>
         </div>
         <a href="https://github.com/rune-kit/rune" class="btn btn-ghost btn-sm" target="_blank" rel="noopener">GitHub</a>
       </div>
@@ -1370,18 +1409,42 @@
     })();
   </script>
 
-  <!-- Google Translate (free, no API key) -->
+  <!-- Language Switcher (Google Translate via cookie) -->
   <script>
-    function googleTranslateElementInit() {
-      new google.translate.TranslateElement({
-        pageLanguage: 'en',
-        includedLanguages: 'vi,ja,ko,zh-CN,zh-TW,fr,de,es,pt,ru,ar,hi,th,id',
-        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
-        autoDisplay: false
-      }, 'google_translate_element');
-    }
+    (() => {
+      const btn = document.getElementById('lang-btn');
+      const menu = document.getElementById('lang-menu');
+      const wrap = document.getElementById('lang-dropdown');
+
+      btn.addEventListener('click', () => {
+        const open = !menu.hidden;
+        menu.hidden = open;
+        btn.setAttribute('aria-expanded', String(!open));
+      });
+
+      document.addEventListener('click', (e) => {
+        if (!wrap.contains(e.target)) menu.hidden = true;
+      });
+
+      menu.addEventListener('click', (e) => {
+        const lang = e.target.dataset.lang;
+        if (lang === undefined) return;
+        menu.hidden = true;
+        if (!lang) {
+          document.cookie = 'googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
+          document.cookie = 'googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.' + location.hostname;
+          location.reload();
+          return;
+        }
+        document.cookie = 'googtrans=/en/' + lang + '; path=/';
+        document.cookie = 'googtrans=/en/' + lang + '; path=/; domain=.' + location.hostname;
+        location.reload();
+      });
+    })();
   </script>
   <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+  <script>function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', autoDisplay: false }, '_gt_dummy'); }</script>
+  <div id="_gt_dummy" style="display:none"></div>
 
 </body>
 </html>

package/docs/index.html

@@ -26,14 +26,15 @@
         <a href="#architecture">Architecture</a>
         <a href="#workflows">Workflows</a>
         <a href="guides/">Guides</a>
+        <a href="#mesh">Mesh</a>
         <a href="#pricing">Pricing</a>
-        <div class="nav-controls">
+        <div class="nav-controls notranslate" translate="no">
           <button class="theme-toggle" id="theme-toggle" aria-label="Toggle light/dark mode" title="Toggle theme">&#9790;</button>
           <div class="lang-dropdown" id="lang-dropdown">
             <button class="lang-toggle" id="lang-btn" aria-label="Translate page" title="Translate page">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z"/></svg>
             </button>
-            <div class="lang-menu" id="lang-menu" hidden>
+            <div class="lang-menu notranslate" id="lang-menu" translate="no" hidden>
               <button data-lang="">English</button>
               <button data-lang="vi">Tiếng Việt</button>
               <button data-lang="ja">日本語</button>
@@ -322,6 +323,173 @@ claude plugin install rune</code></pre>
     </div>
   </section>
 
+  <!-- HOW THE MESH WORKS -->
+  <section class="section" id="mesh">
+    <div class="container">
+      <h2>How the Mesh Works</h2>
+      <p class="section-sub">Skills don't run in isolation. They call each other, forming resilient workflows that adapt when things go wrong.</p>
+
+      <!-- Mesh Diagram -->
+      <div class="mesh-diagram">
+        <div class="mesh-tier mesh-tier-free">
+          <div class="mesh-tier-header">
+            <span class="mesh-tier-badge mesh-badge-free">FREE</span>
+            <strong>Core Mesh</strong>
+            <span class="mesh-tier-stats">58 skills &bull; 200+ connections</span>
+          </div>
+          <div class="mesh-layers">
+            <div class="mesh-layer">
+              <span class="mesh-layer-label">L0</span>
+              <div class="mesh-nodes">
+                <span class="mesh-node mesh-node-router" title="Routes every action to the right skill">skill-router</span>
+              </div>
+            </div>
+            <div class="mesh-layer">
+              <span class="mesh-layer-label">L1</span>
+              <div class="mesh-nodes">
+                <span class="mesh-node" title="Feature orchestrator &mdash; 70% of tasks flow through cook">cook</span>
+                <span class="mesh-node">team</span>
+                <span class="mesh-node">scaffold</span>
+                <span class="mesh-node">launch</span>
+                <span class="mesh-node">rescue</span>
+              </div>
+            </div>
+            <div class="mesh-layer">
+              <span class="mesh-layer-label">L2</span>
+              <div class="mesh-nodes">
+                <span class="mesh-node">plan</span>
+                <span class="mesh-node">ba</span>
+                <span class="mesh-node">debug</span>
+                <span class="mesh-node">fix</span>
+                <span class="mesh-node">test</span>
+                <span class="mesh-node">review</span>
+                <span class="mesh-node">sentinel</span>
+                <span class="mesh-node">deploy</span>
+                <span class="mesh-node mesh-node-more">+19 more</span>
+              </div>
+            </div>
+            <div class="mesh-layer">
+              <span class="mesh-layer-label">L3</span>
+              <div class="mesh-nodes">
+                <span class="mesh-node">scout</span>
+                <span class="mesh-node">research</span>
+                <span class="mesh-node">verification</span>
+                <span class="mesh-node">git</span>
+                <span class="mesh-node">docs</span>
+                <span class="mesh-node mesh-node-more">+20 more</span>
+              </div>
+            </div>
+            <div class="mesh-layer">
+              <span class="mesh-layer-label">L4</span>
+              <div class="mesh-nodes">
+                <span class="mesh-node">@rune/ui</span>
+                <span class="mesh-node">@rune/backend</span>
+                <span class="mesh-node">@rune/saas</span>
+                <span class="mesh-node">@rune/mobile</span>
+                <span class="mesh-node mesh-node-more">+10 packs</span>
+              </div>
+            </div>
+          </div>
+          <div class="mesh-flow-example">
+            <span class="mesh-flow-label">Example flow:</span>
+            <code class="mesh-flow">cook &rarr; plan &rarr; test <span class="mesh-flow-fail">&#10007;</span> &rarr; debug &rarr; fix &rarr; test <span class="mesh-flow-pass">&#10003;</span> &rarr; review &rarr; sentinel &rarr; git</code>
+          </div>
+        </div>
+
+        <!-- Connection arrows -->
+        <div class="mesh-arrows">
+          <div class="mesh-arrow-line"></div>
+          <div class="mesh-arrow-labels">
+            <span class="mesh-arrow-label">+57 new connections</span>
+            <span class="mesh-arrow-desc">Pro skills plug into cook, team, ba, sentinel, git, research</span>
+          </div>
+        </div>
+
+        <div class="mesh-tier mesh-tier-pro">
+          <div class="mesh-tier-header">
+            <span class="mesh-tier-badge mesh-badge-pro">PRO $49</span>
+            <strong>Department Skills</strong>
+            <span class="mesh-tier-stats">+25 skills &bull; +57 connections into core</span>
+          </div>
+          <div class="mesh-nodes mesh-nodes-grid">
+            <div class="mesh-pack">
+              <strong>Product</strong>
+              <span>PRDs, roadmaps, KPIs, release comms</span>
+            </div>
+            <div class="mesh-pack">
+              <strong>Sales</strong>
+              <span>Pipeline, outreach, account research</span>
+            </div>
+            <div class="mesh-pack">
+              <strong>Data Science</strong>
+              <span>SQL exploration, dashboards, ML eval</span>
+            </div>
+            <div class="mesh-pack">
+              <strong>Support</strong>
+              <span>Ticket triage, KB, escalation</span>
+            </div>
+          </div>
+          <p class="mesh-tier-note">Pro packs register as <code>Called By &larr; cook</code> &mdash; activated by the same orchestrator as core skills. No configuration needed.</p>
+        </div>
+
+        <!-- Connection arrows -->
+        <div class="mesh-arrows">
+          <div class="mesh-arrow-line mesh-arrow-line-biz"></div>
+          <div class="mesh-arrow-labels">
+            <span class="mesh-arrow-label">+54 connections + 13 cross-tier</span>
+            <span class="mesh-arrow-desc">Business calls Pro data: finance uses sales pipeline, legal uses product specs</span>
+          </div>
+        </div>
+
+        <div class="mesh-tier mesh-tier-biz">
+          <div class="mesh-tier-header">
+            <span class="mesh-tier-badge mesh-badge-biz">BUSINESS $149</span>
+            <strong>Enterprise Skills</strong>
+            <span class="mesh-tier-stats">+26 skills &bull; includes all Pro skills</span>
+          </div>
+          <div class="mesh-nodes mesh-nodes-grid">
+            <div class="mesh-pack">
+              <strong>Finance</strong>
+              <span>Budget from <em>sales pipeline</em> + <em>product roadmap</em></span>
+            </div>
+            <div class="mesh-pack">
+              <strong>Legal</strong>
+              <span>Compliance via <em>product specs</em> + <em>support KB</em></span>
+            </div>
+            <div class="mesh-pack">
+              <strong>HR</strong>
+              <span>Recruiting, onboarding, role design</span>
+            </div>
+            <div class="mesh-pack">
+              <strong>Enterprise Search</strong>
+              <span>Cross-department knowledge from <em>support KB</em> + <em>product docs</em></span>
+            </div>
+          </div>
+          <p class="mesh-tier-note">Business includes Pro because it depends on Pro data. Finance can&rsquo;t forecast without sales pipeline. Legal can&rsquo;t audit without product specs. That&rsquo;s why they&rsquo;re bundled.</p>
+        </div>
+      </div>
+
+      <!-- Key Points -->
+      <div class="mesh-points">
+        <div class="mesh-point">
+          <div class="mesh-point-icon">&#9670;</div>
+          <h3>Free is complete</h3>
+          <p>The full development workflow &mdash; plan, build, test, review, deploy &mdash; runs entirely on Free. You never hit a paywall while coding.</p>
+        </div>
+        <div class="mesh-point">
+          <div class="mesh-point-icon">&#9726;</div>
+          <h3>Pro extends, not replaces</h3>
+          <p>Pro skills plug into the existing mesh via <code>cook</code> and <code>team</code>. Same orchestrator, same quality gates, new department capabilities.</p>
+        </div>
+        <div class="mesh-point">
+          <div class="mesh-point-icon">&#9726;</div>
+          <h3>Business needs Pro</h3>
+          <p>Finance pulls from sales pipeline. Legal checks product specs. Enterprise search indexes support KB. That&rsquo;s 13 cross-tier connections &mdash; and why Business includes Pro.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- PRICING -->
   <section class="section section-dark" id="pricing">
     <div class="container">
@@ -390,30 +558,43 @@ claude plugin install rune</code></pre>
             <li>All future Pro packs included</li>
           </ul>
           <button class="btn btn-pro" style="width:100%" onclick="openPayment('rune-pro')">Get Rune Pro &mdash; $49</button>
-          <p class="pricing-note">Pay once, use forever. No subscriptions.</p>
+          <p class="pricing-note pricing-guarantee">&#128176; 14-Day Money-Back Guarantee &mdash; no questions asked</p>
         </div>
 
         <!-- BUSINESS -->
         <div class="pricing-card pricing-biz">
           <div class="pricing-tier">
-            <span class="pricing-badge pricing-badge-biz">Enterprise</span>
+            <span class="pricing-badge pricing-badge-best">&#9733; BEST VALUE</span>
             <h3>Rune Business</h3>
             <div class="pricing-price">$149<span class="pricing-period"> lifetime</span></div>
           </div>
-          <p class="pricing-desc">Full department coverage for companies that need AI assistance across every business function.</p>
-          <p class="pricing-who">Best for: scaling companies, agencies, enterprises with cross-department AI workflows.</p>
+          <p class="pricing-desc">Full department coverage &mdash; every business function, one purchase.</p>
+
+          <!-- What's Included breakdown -->
+          <div class="includes-breakdown">
+            <p class="includes-label">What&rsquo;s Included:</p>
+            <div class="includes-box includes-box-pro">
+              <strong>Rune Pro</strong> <span class="includes-value">$49 value</span>
+              <ul>
+                <li>Product Management, Sales, Data Science, Support</li>
+                <li>Business memory layer + MCP connectors</li>
+              </ul>
+            </div>
+            <div class="includes-box includes-box-biz">
+              <strong>Rune Business</strong> <span class="includes-value">$100 value</span>
+              <ul>
+                <li>Finance Ops, Legal &amp; Compliance, HR &amp; Recruiting</li>
+                <li>Enterprise Search + Priority support</li>
+              </ul>
+            </div>
+          </div>
+
           <ul class="pricing-features">
-            <li><strong>Everything in Pro, plus:</strong></li>
-            <li>Finance Ops &mdash; invoicing, expense tracking, financial reporting</li>
-            <li>Legal &amp; Compliance &mdash; contract review, policy drafting, audit prep</li>
-            <li>HR &amp; Recruiting &mdash; job descriptions, candidate screening, onboarding</li>
-            <li>Enterprise Search &mdash; cross-system knowledge retrieval</li>
-            <li>Skill Forge included &mdash; build private skills (free in core, enhanced for teams)</li>
-            <li>Priority support &mdash; direct access to maintainers</li>
-            <li>All future Business packs included</li>
+            <li>All future Pro + Business packs included</li>
+            <li>Lifetime access &mdash; no subscriptions ever</li>
           </ul>
           <button class="btn btn-biz" style="width:100%" onclick="openPayment('rune-biz')">Get Rune Business &mdash; $149</button>
-          <p class="pricing-note">Pay once, use forever. No subscriptions.</p>
+          <p class="pricing-note pricing-guarantee">&#128176; 14-Day Money-Back Guarantee &mdash; no questions asked</p>
         </div>
       </div>
 
@@ -603,7 +784,7 @@ claude plugin install rune</code></pre>
         <p class="pay-subtitle">Choose your payment method</p>
         <div class="pay-options">
           <button class="pay-option" onclick="showVNPayment()">
-            <span class="pay-option-flag">&#127483;&#127475;</span>
+            <img src="https://flagcdn.com/w40/vn.png" width="32" height="21" alt="VN" style="border-radius:3px" />
             <div class="pay-option-info">
               <strong>Vietnam</strong>
               <span>Bank Transfer (VietQR)</span>
@@ -611,15 +792,15 @@ claude plugin install rune</code></pre>
             </div>
             <span class="pay-option-arrow">&rarr;</span>
           </button>
-          <a id="pay-sponsor-link" href="https://github.com/sponsors/rune-kit" target="_blank" rel="noopener" class="pay-option">
+          <button class="pay-option" onclick="showIntlPayment()">
             <span class="pay-option-flag">&#127760;</span>
             <div class="pay-option-info">
               <strong>International</strong>
-              <span>GitHub Sponsors (Stripe)</span>
+              <span>Card / PayPal (Polar)</span>
               <span class="pay-option-price" id="pay-price-intl">$49 USD</span>
             </div>
             <span class="pay-option-arrow">&rarr;</span>
-          </a>
+          </button>
         </div>
       </div>
 
@@ -646,7 +827,7 @@ claude plugin install rune</code></pre>
           <img id="pay-qr-img" alt="VietQR Payment" />
         </div>
         <div class="pay-details">
-          <div class="pay-detail-row"><span>Bank</span><strong>VPBank</strong></div>
+          <div class="pay-detail-row"><span>Bank</span><strong>TPBank</strong></div>
           <div class="pay-detail-row"><span>Account</span><strong class="pay-mono">04162263666</strong></div>
           <div class="pay-detail-row"><span>Amount</span><strong class="pay-mono" id="pay-detail-amount"></strong></div>
           <div class="pay-detail-row"><span>Content</span><strong class="pay-mono" id="pay-detail-code"></strong></div>
@@ -665,6 +846,21 @@ claude plugin install rune</code></pre>
         <p class="pay-hint">Check your email for the invitation to <code>rune-kit/rune-pro</code></p>
         <button class="btn btn-primary" style="width:100%;margin-top:20px" onclick="closePayment()">Done</button>
       </div>
+
+      <!-- Step 5: International — GitHub username + Polar checkout -->
+      <div id="pay-step-5" class="pay-step" hidden>
+        <button class="pay-close" onclick="closePayment()" aria-label="Close">&times;</button>
+        <button class="pay-back" onclick="showPayStep(1)" aria-label="Back">&larr; Back</button>
+        <h3 id="pay-title-5">Get Rune Pro</h3>
+        <p class="pay-subtitle" id="pay-amount-5">$49 USD</p>
+        <label class="pay-label" for="pay-intl-github">GitHub Username</label>
+        <input type="text" id="pay-intl-github" class="pay-input" placeholder="your-github-username" autocomplete="off" spellcheck="false" />
+        <label class="pay-label" for="pay-intl-email">Email <span style="color:var(--text-muted)">(for receipt)</span></label>
+        <input type="email" id="pay-intl-email" class="pay-input" placeholder="you@example.com" />
+        <p id="pay-intl-error" class="pay-error" hidden></p>
+        <button id="pay-intl-submit" class="btn btn-pro" style="width:100%;margin-top:16px" onclick="startPolarCheckout()">Pay with Card / PayPal</button>
+        <p class="pay-hint" style="margin-top:12px">You'll be redirected to Polar's secure checkout page</p>
+      </div>
     </div>
   </div>
 
@@ -675,24 +871,25 @@ claude plugin install rune</code></pre>
     (function initTheme() {
       const toggle = document.getElementById('theme-toggle');
       const stored = localStorage.getItem('rune-theme');
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const theme = stored || (prefersDark ? 'dark' : 'dark'); // default dark
+      const theme = stored || 'light'; // default light (warm cream)
 
-      if (theme === 'light') {
-        document.documentElement.setAttribute('data-theme', 'light');
+      if (theme === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        toggle.innerHTML = '&#9790;'; // moon
+      } else {
         toggle.innerHTML = '&#9728;'; // sun
       }
 
       toggle.addEventListener('click', () => {
-        const isLight = document.documentElement.getAttribute('data-theme') === 'light';
-        if (isLight) {
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        if (isDark) {
           document.documentElement.removeAttribute('data-theme');
-          toggle.innerHTML = '&#9790;'; // moon
-          localStorage.setItem('rune-theme', 'dark');
-        } else {
-          document.documentElement.setAttribute('data-theme', 'light');
           toggle.innerHTML = '&#9728;'; // sun
           localStorage.setItem('rune-theme', 'light');
+        } else {
+          document.documentElement.setAttribute('data-theme', 'dark');
+          toggle.innerHTML = '&#9790;'; // moon
+          localStorage.setItem('rune-theme', 'dark');
         }
       });
     })();