npm - create-openclaw-bot - Versions diffs - 5.5.0 → 5.6.0 - Mend

create-openclaw-bot 5.5.0 → 5.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/README.md +18 -17
package/README.vi.md +18 -17
package/{cli.js → dist/cli.js} +295 -224
package/dist/setup/shared/install-gen.js +485 -0
package/{setup/shared/scaffold-gen.js → dist/setup/shared/workspace-gen.js} +247 -25
package/{setup.js → dist/setup.js} +771 -1158
package/package.json +10 -7
package/.github/workflows/check-openclaw-update.yml +0 -106
package/CHANGELOG.md +0 -602
package/CHANGELOG.vi.md +0 -588
package/docs/SETUP.md +0 -532
package/docs/SETUP.vi.md +0 -439
package/docs/ai-providers.md +0 -144
package/docs/ai-providers.vi.md +0 -144
package/docs/browser-automation-guide.md +0 -207
package/docs/faq.md +0 -63
package/docs/faq.vi.md +0 -63
package/docs/hardware-guide.md +0 -55
package/docs/hardware-guide.vi.md +0 -55
package/docs/install-docker.md +0 -161
package/docs/install-docker.vi.md +0 -161
package/docs/install-native.md +0 -96
package/docs/install-native.vi.md +0 -96
package/docs/preview.png +0 -0
package/docs/skills-plugins-guide.md +0 -126
package/index.html +0 -589
package/old_v510.js +0 -0
package/setup/shared/runtime-gen.js +0 -710
package/style.css +0 -1653
package/upgrade.ps1 +0 -90
package/upgrade.sh +0 -93
/package/{setup → dist/setup}/data/channels.js +0 -0
/package/{setup → dist/setup}/data/header.js +0 -0
/package/{setup → dist/setup}/data/index.js +0 -0
/package/{setup → dist/setup}/data/plugins.js +0 -0
/package/{setup → dist/setup}/data/providers.js +0 -0
/package/{setup → dist/setup}/data/skills.js +0 -0
/package/{setup → dist/setup}/shared/common-gen.js +0 -0
/package/{setup → dist/setup}/shared/docker-gen.js +0 -0

package/index.html DELETED Viewed

@@ -1,589 +0,0 @@
-<!DOCTYPE html>
-<html lang="vi">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Setup your own free AI Bot on Telegram or Zalo in minutes with OpenClaw.">
-  <title>🦞 OpenClaw Setup — AI Bot Wizard</title>
-  <link rel="stylesheet" href="style.css">
-</head>
-<body>
-<div class="app-container">
-  <!-- ========== Header ========== -->
-  <header class="header">
-    <div class="header__logo" aria-hidden="true">🦞</div>
-    <h1 class="header__title">OpenClaw Setup</h1>
-    <p class="header__subtitle" data-vi="Tạo AI Bot miễn phí trên Telegram hoặc Zalo trong vài phút" data-en="Create your free AI Bot on Telegram or Zalo in minutes">Tạo AI Bot miễn phí trên Telegram hoặc Zalo trong vài phút</p>
-  </header>
-  <!-- ========== Progress Bar ========== -->
-  <nav class="progress-bar" aria-label="Setup progress">
-    <div class="progress-step progress-step--active" data-pstep="1" onclick="window.__navToStep && window.__navToStep(1)" style="cursor:pointer" title="Bước 1">
-      <span class="progress-step__circle">1</span>
-      <span class="progress-step__label" data-vi="Môi trường" data-en="Environment">Môi trường</span>
-    </div>
-    <div class="progress-line" data-after="1"></div>
-    <div class="progress-step" data-pstep="2" onclick="window.__navToStep && window.__navToStep(2)" style="cursor:pointer" title="Bước 2">
-      <span class="progress-step__circle">2</span>
-      <span class="progress-step__label" data-vi="Chọn kênh" data-en="Channel">Chọn kênh</span>
-    </div>
-    <div class="progress-line" data-after="2"></div>
-    <div class="progress-step" data-pstep="3" onclick="window.__navToStep && window.__navToStep(3)" style="cursor:pointer" title="Bước 3">
-      <span class="progress-step__circle">3</span>
-      <span class="progress-step__label" data-vi="Cấu hình Bot" data-en="Configure Bot">Cấu hình Bot</span>
-    </div>
-    <div class="progress-line" data-after="3"></div>
-    <div class="progress-step" data-pstep="4" onclick="window.__navToStep && window.__navToStep(4)" style="cursor:pointer" title="Bước 4">
-      <span class="progress-step__circle">4</span>
-      <span class="progress-step__label" data-vi="API Keys" data-en="API Keys">API Keys</span>
-    </div>
-    <div class="progress-line" data-after="4"></div>
-    <div class="progress-step" data-pstep="5" onclick="window.__navToStep && window.__navToStep(5)" style="cursor:pointer" title="Bước 5">
-      <span class="progress-step__circle">5</span>
-      <span class="progress-step__label" data-vi="Hoàn tất" data-en="Finish">Hoàn tất</span>
-    </div>
-  </nav>
-  <!-- ========== Steps Container ========== -->
-  <main class="steps-container">
-    <!-- ===== Step 1: Environment / Deploy Mode ===== -->
-    <section class="step step--active" data-step="1">
-      <!-- Header row: title + lang toggle -->
-      <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px;">
-        <div>
-          <h2 class="step__title" data-vi="Bạn đang dùng hệ điều hành nào?" data-en="What's your operating system?" style="margin-bottom: 4px;">Bạn đang dùng hệ điều hành nào?</h2>
-          <p class="step__description" style="margin: 0;" data-vi="Chọn môi trường để nhận script cài đặt phù hợp nhất." data-en="Choose your environment to get the most suitable setup script.">Chọn môi trường để nhận script cài đặt phù hợp nhất.</p>
-        </div>
-        <input type="hidden" id="cfg-language" value="vi">
-        <div class="lang-toggle" id="lang-toggle" style="flex-shrink: 0; margin-left: 16px;">
-          <button type="button" class="lang-toggle__btn lang-toggle__btn--active" data-lang="vi" onclick="window.__selectLang('vi')">
-            <span class="lang-toggle__flag" data-lang="vi"></span>
-            <span>VI</span>
-          </button>
-          <button type="button" class="lang-toggle__btn" data-lang="en" onclick="window.__selectLang('en')">
-            <span class="lang-toggle__flag" data-lang="en"></span>
-            <span>EN</span>
-          </button>
-        </div>
-      </div>
-      <!-- OS Selection: 4 horizontal cards -->
-      <div id="native-os-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px;">
-        <!-- Windows -->
-        <div class="channel-card channel-card--selected env-os-card" data-os="win" id="card-os-win" onclick="window.__selectOs('win')" style="cursor:pointer; padding: 18px 14px; text-align: center; position: relative;">
-          <div style="font-size: 36px; margin-bottom: 10px; line-height: 1;">🪟</div>
-          <div style="font-weight: 700; font-size: 15px; margin-bottom: 6px;">Windows</div>
-          <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 12px;" data-vi="10 / 11" data-en="10 / 11">10 / 11</div>
-          <span class="env-deploy-badge badge--official" style="font-size: 10.5px; padding: 3px 8px; border-radius: 20px; display: inline-block;" data-vi="🐳 Docker + .bat" data-en="🐳 Docker + .bat">🐳 Docker + .bat</span>
-        </div>
-        <!-- macOS -->
-        <div class="channel-card env-os-card" data-os="linux" id="card-os-linux" onclick="window.__selectOs('linux')" style="cursor:pointer; padding: 18px 14px; text-align: center; position: relative;">
-          <div style="font-size: 36px; margin-bottom: 10px; line-height: 1;">🍎</div>
-          <div style="font-weight: 700; font-size: 15px; margin-bottom: 6px;">macOS</div>
-          <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 12px;" data-vi="Ventura trở lên" data-en="Ventura and above">Ventura trở lên</div>
-          <span class="env-deploy-badge badge--official" style="font-size: 10.5px; padding: 3px 8px; border-radius: 20px; display: inline-block;" data-vi="🐳 Docker + .sh" data-en="🐳 Docker + .sh">🐳 Docker + .sh</span>
-        </div>
-        <!-- Ubuntu / VPS -->
-        <div class="channel-card env-os-card" data-os="vps" id="card-os-vps" onclick="window.__selectOs('vps')" style="cursor:pointer; padding: 18px 14px; text-align: center; position: relative;">
-          <div style="font-size: 36px; margin-bottom: 10px; line-height: 1;">🐧</div>
-          <div style="font-weight: 700; font-size: 15px; margin-bottom: 6px;">Ubuntu / VPS</div>
-          <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 12px;" data-vi="Server, cloud VPS" data-en="Server, cloud VPS">Server, cloud VPS</div>
-          <span class="env-deploy-badge badge--warning" style="font-size: 10.5px; padding: 3px 8px; border-radius: 20px; display: inline-block;" data-vi="💻 Native + PM2" data-en="💻 Native + PM2">💻 Native + PM2</span>
-        </div>
-        <!-- Linux Desktop -->
-        <div class="channel-card env-os-card" data-os="linux-desktop" id="card-os-linux-desktop" onclick="window.__selectOs('linux-desktop')" style="cursor:pointer; padding: 18px 14px; text-align: center; position: relative;">
-          <div style="font-size: 36px; margin-bottom: 10px; line-height: 1;">🖥️</div>
-          <div style="font-weight: 700; font-size: 15px; margin-bottom: 6px;" data-vi="Linux Desktop" data-en="Linux Desktop">Linux Desktop</div>
-          <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 12px;" data-vi="Ubuntu, Debian, Mint..." data-en="Ubuntu, Debian, Mint...">Ubuntu, Debian, Mint...</div>
-          <span class="env-deploy-badge badge--warning" style="font-size: 10.5px; padding: 3px 8px; border-radius: 20px; display: inline-block;" data-vi="💻 Native .sh" data-en="💻 Native .sh">💻 Native .sh</span>
-        </div>
-      </div>
-      <!-- Smart Advisory Panel (updates per OS selection) -->
-      <div id="env-advisory" style="margin-top: 16px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);">
-        <!-- Advisory content filled by JS -->
-        <div id="env-advisory-inner" style="padding: 14px 18px; display: flex; gap: 16px; align-items: flex-start;">
-          <div style="font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 2px;" id="env-adv-icon">🪟</div>
-          <div style="flex: 1; min-width: 0;">
-            <div style="font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--text-primary);" id="env-adv-title">Windows — Khuyên dùng Docker</div>
-            <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.6;" id="env-adv-desc">Bot chạy trong container isolation. Script <code>.bat</code> tự động cài Docker Desktop, pull model, build &amp; start — không cần thao tác thủ công.</div>
-          </div>
-          <div id="env-adv-badge" style="flex-shrink: 0; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); white-space: nowrap;">🐳 Docker</div>
-        </div>
-        <!-- Advanced override toggle -->
-        <div style="border-top: 1px solid rgba(255,255,255,0.06); padding: 10px 18px; display: flex; align-items: center; justify-content: space-between;">
-          <span style="font-size: 12px; color: var(--text-muted);" data-vi="Muốn thay đổi chế độ deploy?" data-en="Want to override deploy mode?">Muốn thay đổi chế độ deploy?</span>
-          <button onclick="window.__toggleDeployOverride()" style="background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 2px 0; font-weight: 500;" id="btn-deploy-toggle">
-            <span data-vi="Tuỳ chỉnh ▾" data-en="Customize ▾">Tuỳ chỉnh ▾</span>
-          </button>
-        </div>
-        <!-- Deploy override panel (hidden by default) -->
-        <div id="deploy-override-panel" style="display: none; border-top: 1px solid rgba(255,255,255,0.06); padding: 14px 18px;">
-          <p style="font-size: 12px; color: var(--text-muted); margin-bottom: 10px;" data-vi="Chọn chế độ deploy thủ công nếu bạn biết mình muốn gì:" data-en="Manually select deploy mode if you know what you want:">Chọn chế độ deploy thủ công nếu bạn biết mình muốn gì:</p>
-          <div id="deploy-mode-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-            <div class="channel-card" data-deploy="docker" id="card-deploy-docker" style="padding: 12px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;">
-              <span style="font-size: 22px;">🐳</span>
-              <div>
-                <div style="font-weight: 600; font-size: 13px;">Docker</div>
-                <div style="font-size: 11px; color: var(--text-muted);" data-vi="Container isolation" data-en="Container isolation">Container isolation</div>
-              </div>
-            </div>
-            <div class="channel-card" data-deploy="native" id="card-deploy-native" style="padding: 12px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;">
-              <span style="font-size: 22px;">💻</span>
-              <div>
-                <div style="font-weight: 600; font-size: 13px;" data-vi="Native" data-en="Native">Native</div>
-                <div style="font-size: 11px; color: var(--text-muted);" data-vi="Chạy thẳng trên máy" data-en="Run directly on machine">Chạy thẳng trên máy</div>
-              </div>
-            </div>
-          </div>
-          <!-- Docker notice -->
-          <div id="docker-install-notice" style="display: none; margin-top: 10px; padding: 10px 14px; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.2); border-radius: 8px; font-size: 12px; color: var(--text-secondary);">
-            🐳 <span data-vi="Script tự cài Docker Engine + Compose V2 nếu chưa có." data-en="Script auto-installs Docker Engine + Compose V2 if missing.">Script tự cài Docker Engine + Compose V2 nếu chưa có.</span>
-            <div id="docker-win-notice" style="display:none; margin-top: 6px; color: #ffc107;">
-              ⚠️ <span data-vi="Windows: yêu cầu khởi động lại sau khi cài Docker Desktop." data-en="Windows: restart required after Docker Desktop install.">Windows: yêu cầu khởi động lại sau khi cài Docker Desktop.</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- ===== Step 2: Choose Channel ===== -->
-    <section class="step" data-step="2">
-      <h2 class="step__title" data-vi="Chọn kênh chat cho Bot" data-en="Choose Chat Channel">Chọn kênh chat cho Bot</h2>
-      <p class="step__description" data-vi="Bot AI của bạn sẽ hoạt động trên nền tảng nào? Chọn 1 kênh bên dưới." data-en="Which platform will your AI Bot operate on? Choose a channel below.">Bot AI của bạn sẽ hoạt động trên nền tảng nào? Chọn 1 kênh bên dưới.</p>
-      <div class="channel-grid">
-        <div class="channel-card" data-channel="telegram" id="card-telegram">
-          <div class="channel-card__icon"><img src="https://thesvg.org/icons/telegram/default.svg" alt="Telegram" width="32" height="32"></div>
-          <h3 class="channel-card__name">Telegram</h3>
-          <p class="channel-card__desc" data-vi="Bot API chính thức. Hỗ trợ DM & nhóm. Phổ biến nhất." data-en="Official Bot API. Supports DMs & groups. Most popular.">Bot API chính thức. Hỗ trợ DM & nhóm. Phổ biến nhất.</p>
-          <span class="channel-card__badge badge--official">✅ Official</span>
-        </div>
-        <!-- Combo mode (Telegram + Zalo Personal) — tạm ngưng, sẽ mở lại sau khi nghiên cứu xong -->
-        <div class="channel-card" data-channel="telegram+zalo-personal" id="card-telegram-zalo-personal" style="display:none">
-          <div class="channel-card__icon" style="display:flex;gap:4px;align-items:center;">
-            <img src="https://thesvg.org/icons/telegram/default.svg" alt="Telegram" width="24" height="24">
-            <span style="font-size:12px;opacity:.5;">+</span>
-            <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Icon_of_Zalo.svg" alt="Zalo" width="24" height="24" style="opacity:0.9;">
-          </div>
-          <h3 class="channel-card__name" data-vi="Telegram + Zalo" data-en="Telegram + Zalo">Telegram + Zalo</h3>
-          <p class="channel-card__desc" data-vi="Bot hoạt động cùng lúc trên Telegram và Zalo Personal." data-en="Bot works simultaneously on Telegram and Zalo Personal.">Bot hoạt động cùng lúc trên Telegram và Zalo Personal.</p>
-          <span class="channel-card__badge badge--warning">⚡ Combo</span>
-        </div>
-        <div class="channel-card" data-channel="zalo-bot" id="card-zalo-bot">
-          <div class="channel-card__icon"><img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Icon_of_Zalo.svg" alt="Zalo" width="32" height="32"></div>
-          <h3 class="channel-card__name">Zalo Bot API</h3>
-          <p class="channel-card__desc" data-vi="Bot API chính thức Zalo. Chat 1:1. Phù hợp hỗ trợ khách hàng." data-en="Official Zalo Bot API. 1:1 Chat. Good for customer support.">Bot API chính thức Zalo. Chat 1:1. Phù hợp hỗ trợ khách hàng.</p>
-          <span class="channel-card__badge badge--official">✅ Official</span>
-        </div>
-        <div class="channel-card" data-channel="zalo-personal" id="card-zalo-personal">
-          <div class="channel-card__icon"><img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Icon_of_Zalo.svg" alt="Zalo" width="32" height="32" style="opacity: 0.9;"></div>
-          <h3 class="channel-card__name">Zalo Personal</h3>
-          <p class="channel-card__desc" data-vi="Dùng tài khoản Zalo cá nhân. Login bằng QR code." data-en="Use personal Zalo account. Login via QR code.">Dùng tài khoản Zalo cá nhân. Login bằng QR code.</p>
-          <span class="channel-card__badge badge--warning">⚠️ Unofficial</span>
-        </div>
-      </div>
-      <!-- Multi-bot selector (Telegram only) -->
-      <div id="multibot-panel" style="display:none; margin-top:24px; padding:20px 22px; border:1px solid rgba(99,102,241,0.3); border-radius:12px; background:linear-gradient(135deg,rgba(99,102,241,0.05),rgba(139,92,246,0.03));">
-        <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
-          <span style="font-size:22px;">🤖</span>
-          <div>
-            <div style="font-weight:700;font-size:15px;color:var(--text-primary);" data-vi="Muốn triển khai nhiều bot không?" data-en="Want to deploy multiple bots?">Muốn triển khai nhiều bot không?</div>
-            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;" data-vi="Các bot sẽ hoạt động như một phòng ban — mỗi bot có vai trò riêng." data-en="Bots work like a team department — each with a distinct role.">Các bot sẽ hoạt động như một phòng ban — mỗi bot có vai trò riêng.</div>
-          </div>
-        </div>
-        <!-- How it works -->
-        <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;">
-          <div style="flex:1;min-width:180px;padding:8px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:8px;font-size:12px;color:var(--text-secondary);">
-            <div style="font-weight:600;color:var(--text-primary);margin-bottom:4px;">🔇 Không có mention</div>
-            <span data-vi="Bot sẽ react 👍❤️🔥 vào tin nhắn nhưng không reply để tránh spam" data-en="Bots react 👍❤️🔥 to messages but stay silent to avoid spam">Bot sẽ react 👍❤️🔥 vào tin nhắn nhưng không reply để tránh spam</span>
-          </div>
-          <div style="flex:1;min-width:180px;padding:8px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:8px;font-size:12px;color:var(--text-secondary);">
-            <div style="font-weight:600;color:var(--text-primary);margin-bottom:4px;">📣 @mention / /slash</div>
-            <span data-vi="Chỉ bot được tag mới trả lời — như gọi đúng tên nhân viên trong phòng họp" data-en="Only the tagged bot responds — like calling an employee by name in a meeting">Chỉ bot được tag mới trả lời, như gọi đúng tên nhân viên trong phòng họp</span>
-          </div>
-          <div style="flex:1;min-width:180px;padding:8px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:8px;font-size:12px;color:var(--text-secondary);">
-            <div style="font-weight:600;color:var(--text-primary);margin-bottom:4px;">🗃️ Workspace chia sẻ</div>
-            <span data-vi="Các bot cùng chung thư mục workspace — có thể đọc file của nhau, phối hợp tác vụ" data-en="Bots share a workspace folder — can read each other's files, collaborate on tasks">Các bot cùng chung thư mục workspace, có thể đọc file của nhau, phối hợp tác vụ</span>
-          </div>
-        </div>
-        <!-- Bot count picker -->
-        <div>
-          <div style="font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:10px;" data-vi="Số lượng bot:" data-en="Number of bots:">Số lượng bot:</div>
-          <div style="display:flex;gap:8px;flex-wrap:wrap;" id="botcount-grid">
-            <button class="botcount-btn botcount-btn--active" data-count="1" onclick="window.__selectBotCount(1)" style="padding:8px 20px;border-radius:8px;border:1px solid rgba(99,102,241,0.5);background:rgba(99,102,241,0.15);color:var(--text-primary);font-weight:600;cursor:pointer;font-size:14px;">1 bot</button>
-            <button class="botcount-btn" data-count="2" onclick="window.__selectBotCount(2)" style="padding:8px 20px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:var(--text-secondary);font-weight:600;cursor:pointer;font-size:14px;">2 bot</button>
-            <button class="botcount-btn" data-count="3" onclick="window.__selectBotCount(3)" style="padding:8px 20px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:var(--text-secondary);font-weight:600;cursor:pointer;font-size:14px;">3 bot</button>
-            <button class="botcount-btn" data-count="4" onclick="window.__selectBotCount(4)" style="padding:8px 20px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:var(--text-secondary);font-weight:600;cursor:pointer;font-size:14px;">4 bot</button>
-            <button class="botcount-btn" data-count="5" onclick="window.__selectBotCount(5)" style="padding:8px 20px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:var(--text-secondary);font-weight:600;cursor:pointer;font-size:14px;">5 bot</button>
-          </div>
-        </div>
-        <!-- Multi-bot group option -->
-        <div id="multibot-group-option" style="display:none;margin-top:18px;">
-          <div style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;">
-            📱 <span data-vi="Telegram Group cho các bot" data-en="Telegram Group for the bots">Telegram Group cho các bot</span>
-          </div>
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
-            <!-- Card: Create later -->
-            <label id="group-card-create" for="group-opt-create" style="cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:rgba(16,185,129,0.08);border:1.5px solid rgba(16,185,129,0.5);border-radius:12px;transition:all .18s;position:relative;">
-              <input type="radio" name="group-option" value="create" id="group-opt-create" checked style="position:absolute;opacity:0;pointer-events:none;" onchange="window.__onGroupOptionChange()">
-              <div style="display:flex;align-items:center;gap:8px;">
-                <span style="font-size:20px;">✨</span>
-                <span style="font-size:13px;font-weight:600;color:var(--text-primary);" data-vi="Tôi sẽ tạo sau" data-en="I'll create later">Tôi sẽ tạo sau</span>
-              </div>
-              <p style="margin:0;font-size:11.5px;color:var(--text-secondary);line-height:1.5;" data-vi="Setup xong rồi tạo group, thêm từng bot vào là xong." data-en="Finish setup first, then create a group and add each bot.">Setup xong rồi tạo group, thêm từng bot vào là xong.</p>
-              <div id="group-card-create-check" style="position:absolute;top:10px;right:12px;width:16px;height:16px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;">
-                <svg width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M1.5 4.5L3.5 6.5L7.5 2.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-              </div>
-            </label>
-            <!-- Card: Already have group -->
-            <label id="group-card-existing" for="group-opt-existing" style="cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:rgba(255,255,255,0.03);border:1.5px solid rgba(255,255,255,0.1);border-radius:12px;transition:all .18s;position:relative;">
-              <input type="radio" name="group-option" value="existing" id="group-opt-existing" style="position:absolute;opacity:0;pointer-events:none;" onchange="window.__onGroupOptionChange()">
-              <div style="display:flex;align-items:center;gap:8px;">
-                <span style="font-size:20px;">🔗</span>
-                <span style="font-size:13px;font-weight:600;color:var(--text-primary);" data-vi="Đã có group" data-en="Already have a group">Đã có group</span>
-              </div>
-              <p style="margin:0;font-size:11.5px;color:var(--text-secondary);line-height:1.5;" data-vi="Nhập Group ID để bot tự join và nhận diện nhau." data-en="Enter the Group ID so bots can join and recognize each other.">Nhập Group ID để bot tự join và nhận diện nhau.</p>
-              <div id="group-card-existing-check" style="position:absolute;top:10px;right:12px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;">
-                <svg width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M1.5 4.5L3.5 6.5L7.5 2.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity=".3"/></svg>
-              </div>
-            </label>
-          </div>
-          <!-- Group ID input (shown when existing selected) -->
-          <div id="group-id-wrap" style="display:none;margin-top:12px;">
-            <div style="display:flex;gap:8px;align-items:stretch;">
-              <input type="text" id="cfg-group-id" class="form-input" placeholder="-1001234567890" style="font-family:monospace;font-size:13px;flex:1;" oninput="window.__saveGroupId(this.value)">
-              <a href="https://t.me/userinfobot" target="_blank" rel="noopener"
-                style="display:inline-flex;align-items:center;gap:6px;padding:0 14px;background:rgba(99,102,241,0.15);border:1.5px solid rgba(99,102,241,0.4);border-radius:8px;font-size:12px;font-weight:600;color:#a5b4fc;text-decoration:none;white-space:nowrap;transition:all .15s;"
-                onmouseover="this.style.background='rgba(99,102,241,0.28)';this.style.borderColor='rgba(99,102,241,0.7)'"
-                onmouseout="this.style.background='rgba(99,102,241,0.15)';this.style.borderColor='rgba(99,102,241,0.4)'">
-                <svg width="13" height="13" 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="m9 12 2 2 4-4"/></svg>
-                <span data-vi="Lấy Group ID" data-en="Get Group ID">Lấy Group ID</span>
-              </a>
-            </div>
-            <p class="form-group__hint" style="margin-top:6px;" id="group-id-hint">
-              <span data-vi="Hướng dẫn lấy Group ID: Vào thanh tìm kiếm trên Telegram → nhập @userinfobot → bấm nút Start để bắt đầu → chọn nút Group trên màn hình chat → chọn Group bạn muốn thêm bot vào → bot trả về Group ID." data-en="Search @userinfobot on Telegram → click Start → click Group → select the group you want to add the bot to → the bot will reply with the Group ID.">Hướng dẫn lấy Group ID: Vào thanh tìm kiếm trên Telegram → nhập @userinfobot → bấm nút Start để bắt đầu → chọn nút Group trên màn hình chat → chọn Group bạn muốn thêm bot vào → bot trả về Group ID.</span>
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- ===== Step 3: Bot Config ===== -->
-    <section class="step" data-step="3">
-      <h2 class="step__title"><span data-vi="Cấu hình Bot — " data-en="Configure Bot — ">Cấu hình Bot — </span><span id="selected-channel-label"></span></h2>
-      <p class="step__description" data-vi="Chọn AI model, đặt tên, tính cách và quy tắc cho Bot của bạn." data-en="Choose AI model, set name, persona and rules for your Bot.">Chọn AI model, đặt tên, tính cách và quy tắc cho Bot của bạn.</p>
-      <!-- Multi-bot tab switcher (hidden for single bot) -->
-      <div id="bot-tab-bar" style="display:block; margin-bottom:20px;">
-        <div id="multibot-tab-label" style="display:none; font-size:12px;color:var(--text-muted);margin-bottom:8px;" data-vi="Cấu hình từng bot — click vào tab để chuyển đổi:" data-en="Configure each bot — click a tab to switch:">Cấu hình từng bot — click vào tab để chuyển đổi:</div>
-        <div id="bot-tabs" style="display:none;gap:6px;flex-wrap:wrap;"></div>
-        <!-- Per-bot quick config -->
-        <div id="bot-tab-meta" style="margin-top:14px;padding:14px 16px;background:rgba(99,102,241,0.05);border:1px solid rgba(99,102,241,0.2);border-radius:10px;">
-          <div style="display:flex;gap:12px;flex-wrap:wrap;">
-            <div class="form-group" style="flex:1;min-width:160px;margin:0;">
-              <label class="form-group__label" data-vi="Tên bot này" data-en="This bot's name">Tên bot này <span style="color: var(--danger, #ef4444);">*</span></label>
-              <input type="text" class="form-input" id="cfg-bot-tab-name" placeholder="VD: Williams, Luna..." oninput="window.__saveBotTabName(this.value)" style="font-size:13px;">
-            </div>
-            <div class="form-group" id="slash-cmd-group" style="flex:1;min-width:160px;margin:0;">
-              <label class="form-group__label" data-vi="Slash command riêng" data-en="Dedicated slash command">Slash command riêng</label>
-              <input type="text" class="form-input" id="cfg-bot-tab-slash" placeholder="/research" oninput="window.__saveBotTabSlash(this.value)" style="font-size:13px;font-family:monospace;">
-              <p class="form-group__hint" data-vi="Nhập /slash_name để bot react." data-en="Enter /slash_name for bot to react.">Nhập /slash_name để bot react.</p>
-            </div>
-            <div class="form-group" style="flex:2;min-width:200px;margin:0;">
-              <label class="form-group__label" data-vi="Vai trò / Mô tả bot này" data-en="This bot's role / desc">Vai trò / Mô tả bot này</label>
-              <input type="text" class="form-input" id="cfg-bot-tab-desc" placeholder="VD: Trợ lý AI cá nhân" oninput="window.__saveBotTabDesc(this.value)" style="font-size:13px;">
-            </div>
-          </div>
-          <div style="margin-top:12px;">
-             <div class="form-group" style="margin:0;">
-                <label class="form-group__label" data-vi="Tính cách, Vibe & Quy tắc trả lời" data-en="Personality, Vibe & Rules">Tính cách, Vibe & Quy tắc trả lời</label>
-                <input type="text" class="form-input" id="cfg-bot-tab-persona" placeholder="VD: Gọn gàng, xưng hô lịch sự, thân thiện" oninput="window.__saveBotTabPersona(this.value)" style="font-size:13px;">
-                <p class="form-group__hint" data-vi="Quy định cách ứng xử của bot (lưu vào SOUL.md / AGENTS.md)." data-en="Defines how the bot behaves (saved to SOUL.md / AGENTS.md).">Quy định cách ứng xử của bot (lưu vào SOUL.md / AGENTS.md).</p>
-             </div>
-          </div>
-        </div>
-        <p class="form-group__hint" style="margin-top:8px;" data-vi="AI Provider, Model và cài đặt bên dưới được áp dụng cho toàn cục." data-en="AI Provider, Model and settings below apply system-wide.">AI Provider, Model và cài đặt bên dưới được áp dụng chung.</p>
-      </div>
-      <!-- ─── User Info (→ USER.md) ─── -->
-      <div class="form-group" style="margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.06);">
-        <label class="form-group__label" for="cfg-user-info" data-vi="👤 Thông tin về bạn và cách xưng hô với bạn (Vd: Tên bạn, sở thích, cách xưng hô)" data-en="👤 About You (so the bot replies better)">👤 Thông tin về bạn (Vd: Tên bạn, sở thích, cách xưng hô)</label>
-        <textarea class="form-textarea" id="cfg-user-info" placeholder="VD: Tuấn thích vọc code, múi giờ UTC+7. Xưng hô tui-bro, thích câu trả lời đi thẳng vào vấn đề, không thảo mai..." style="min-height: 90px;"></textarea>
-        <div class="prompt-notice">
-          <span class="prompt-notice__icon">👤</span>
-          <span class="prompt-notice__text" data-vi="Nội dung trên sẽ vào <code>USER.md</code> — bot dùng để cá nhân hóa cách trả lời cho bạn." data-en="This configures <code>USER.md</code> — used to personalize answers for you.">Nội dung trên sẽ vào <code>USER.md</code> — bot dùng để cá nhân hóa cách trả lời cho bạn.</span>
-        </div>
-      </div>
-      <div class="form-group">
-        <label class="form-group__label" data-vi="Nhà cung cấp AI" data-en="AI Provider">Nhà cung cấp AI</label>
-        <div class="provider-grid" id="provider-grid">
-          <!-- Rendered by JS -->
-        </div>
-      </div>
-      <!-- ─── 2. Model Selection + Language Toggle ─── -->
-      <div class="form-group">
-        <div class="model-header">
-          <label class="form-group__label" for="cfg-model">AI Model</label>
-        </div>
-        <select class="form-select" id="cfg-model">
-          <!-- Populated by JS based on provider -->
-        </select>
-      </div>
-      <!-- ─── Section divider ─── -->
-      <div class="section-divider">
-        <span class="section-divider__icon">🔐</span>
-        <span class="section-divider__text" data-vi="Quy tắc Bảo mật" data-en="Security Rules">Quy tắc Bảo mật</span>
-      </div>
-      <!-- ─── 5. Security Rules (editable) ─── -->
-      <div class="form-group">
-        <div class="security-rules-header">
-          <label class="form-group__label" data-vi="Quy tắc bảo mật mặc định" data-en="Default Security Rules">Quy tắc bảo mật mặc định</label>
-          <button type="button" class="btn-toggle-edit" id="btn-toggle-security" onclick="window.__toggleSecurityEdit()"><span data-vi="✏️ Sửa" data-en="✏️ Edit">✏️ Sửa</span></button>
-        </div>
-        <p class="form-group__hint" style="margin-bottom: 12px;" data-vi="OpenClaw tự áp dụng các quy tắc này. Bạn có thể sửa nếu cần." data-en="OpenClaw applies these rules by default. You can edit if needed.">OpenClaw tự áp dụng các quy tắc này. Bạn có thể sửa nếu cần.</p>
-        <textarea class="form-textarea security-textarea" id="cfg-security" readonly></textarea>
-        <div class="prompt-notice" style="background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(239,68,68,0.02)); border-color: rgba(239,68,68,0.15);">
-          <span class="prompt-notice__icon">🛡️</span>
-          <span class="prompt-notice__text" style="color: var(--text-secondary);" data-vi="<strong style='color: #f87171;'>Quan trọng:</strong> Các quy tắc này bảo vệ hệ thống, credentials, và ví crypto. Sửa cẩn thận — xóa quy tắc bảo mật có thể gây rủi ro." data-en="<strong style='color: #f87171;'>Important:</strong> These rules protect your system, credentials, and crypto wallets. Edit carefully — removing them causes risk."><strong style="color: #f87171;">Quan trọng:</strong> Các quy tắc này bảo vệ hệ thống, credentials, và ví crypto. Sửa cẩn thận — xóa quy tắc bảo mật có thể gây rủi ro.</span>
-        </div>
-      </div>
-      <!-- ─── Section divider ─── -->
-      <div class="section-divider">
-        <span class="section-divider__icon">🧩</span>
-        <span class="section-divider__text" data-vi="Mở rộng" data-en="Extensions">Mở rộng</span>
-      </div>
-      <!-- ─── 6. Skills (ClawHub) ─── -->
-      <div class="form-group">
-        <label class="form-group__label" data-vi="🧠 Skills — Kỹ năng mở rộng" data-en="🧠 Skills — Capabilities">🧠 Skills — Kỹ năng mở rộng</label>
-        <p class="form-group__hint" style="margin-bottom: 12px;" data-vi="Chọn skills để bot có thêm khả năng. Được cài từ <a href='https://clawhub.com' target='_blank' style='color: var(--claw-coral);'>ClawHub</a> registry." data-en="Choose skills to give your bot new superpowers. Installed from <a href='https://clawhub.com' target='_blank' style='color: var(--claw-coral);'>ClawHub</a> registry.">Chọn skills để bot có thêm khả năng. Được cài từ <a href="https://clawhub.com" target="_blank" style="color: var(--claw-coral);">ClawHub</a> registry.</p>
-        <div class="plugin-grid" id="plugin-grid">
-          <!-- Rendered by JS -->
-        </div>
-      </div>
-      <!-- ─── 7. Plugins (npm packages — extra channels) ─── -->
-      <div class="form-group">
-        <label class="form-group__label" data-vi="🔌 Plugins — Kênh & mở rộng thêm" data-en="🔌 Plugins — Channels & Addons">🔌 Plugins — Kênh & mở rộng thêm</label>
-        <p class="form-group__hint" style="margin-bottom: 12px;" data-vi="Thêm kênh chat hoặc tính năng runtime. Cài qua npm (<code>openclaw plugins install</code>)." data-en="Add chat channels or runtime features. Installed via npm (<code>openclaw plugins install</code>).">Thêm kênh chat hoặc tính năng runtime. Cài qua npm (<code>openclaw plugins install</code>).</p>
-        <div class="plugin-grid" id="extra-plugin-grid">
-          <!-- Rendered by JS -->
-        </div>
-      </div>
-    </section>
-    <!-- ===== Step 4: API Keys & Thư Mục ===== -->
-    <section class="step" data-step="4">
-      <h2 class="step__title" data-vi="Nhập API Keys & Thư mục" data-en="Enter API Keys & Folder">Nhập API Keys & Thư mục</h2>
-      <p class="step__description" style="margin-bottom: 4px;" data-vi="Nhập key trực tiếp + chọn nơi lưu project — wizard lo phần còn lại." data-en="Enter keys + choose project folder — the wizard handles the rest.">Nhập key trực tiếp + chọn nơi lưu project — wizard lo phần còn lại.</p>
-      <p style="font-size: 13px; color: var(--danger, #ef4444); margin-top: 0; margin-bottom: 20px;" data-vi="Các trường có dấu <span style='color:var(--danger,#ef4444)'>*</span> là bắt buộc điền." data-en="Fields marked with <span style='color:var(--danger,#ef4444)'>*</span> are required.">Các trường có dấu <span style="color:var(--danger,#ef4444)">*</span> là bắt buộc điền.</p>
-      <!-- Section 1: AI Provider (9Router / Direct API / Ollama) -->
-      <div id="key-section-provider" style="margin-bottom: 20px;"></div>
-      <!-- Section 2: Channel (Telegram / Zalo) -->
-      <div id="key-section-channel" style="margin-bottom: 20px;"></div>
-      <!-- Section 3: Skill env vars -->
-      <div id="key-section-skills"></div>
-      <!-- Project Path Input -->
-      <div class="form-group" style="margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06);">
-        <label class="form-group__label" data-vi="📁 Thư mục lưu trữ Bot <span style='color:var(--danger,#ef4444)'>*</span>" data-en="📁 Bot Directory <span style='color:var(--danger,#ef4444)'>*</span>">📁 Thư mục lưu trữ Bot <span style="color:var(--danger,#ef4444)">*</span></label>
-        <input type="text" class="form-input" id="cfg-project-path" value="D:\openclaw-setup" placeholder="VD: D:\openclaw-setup hoặc /home/user/openclaw-setup" style="font-family: monospace;">
-        <p class="form-group__hint" data-vi="Script sẽ tự động tạo thư mục này và sinh các file config bên trong." data-en="The script will auto-create this folder and generate config files inside.">Script sẽ tự động tạo thư mục này và sinh các file config bên trong.</p>
-      </div>
-      <div style="margin-top: 16px; padding: 10px 14px; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 8px; font-size: 12px; color: var(--text-secondary);">
-        🔒 <span data-vi="Keys chỉ lưu trên máy bạn — không gửi đi đâu. Wizard chạy 100% client-side." data-en="Keys stay on your machine — never sent anywhere. Wizard runs 100% client-side.">Keys chỉ lưu trên máy bạn — không gửi đi đâu. Wizard chạy 100% client-side.</span>
-      </div>
-      <!-- Hidden .env content for internal use -->
-      <pre id="env-content" style="display:none;"></pre>
-    </section>
-    <!-- ===== Step 5: Generated Output ===== -->
-    <section class="step" data-step="5">
-      <h2 id="step4-title" class="step__title" data-vi="🎉 Sẵn sàng! Tải script cài đặt" data-en="🎉 Ready! Download setup script">🎉 Sẵn sàng! Tải script cài đặt</h2>
-      <p id="step4-desc" class="step__description" data-vi="Script dưới đây đã được tạo sẵn theo cấu hình bạn đã chọn. Tải về và chạy — mọi thứ còn lại được xử lý tự động." data-en="The script below is generated from your choices. Download and run it — everything else is handled automatically.">Script dưới đây đã được tạo sẵn theo cấu hình bạn đã chọn. Tải về và chạy — mọi thứ còn lại được xử lý tự động.</p>
-      <!-- What the script does automatically -->
-      <div id="script-auto-steps" style="margin-bottom: 24px; padding: 14px 16px; background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.2); border-radius: 10px; font-size: 13px; color: var(--text-secondary);">
-        <div style="font-weight: 600; margin-bottom: 8px; color: var(--text-primary);">⚡ <span data-vi="Script sẽ tự động làm:" data-en="Script will automatically:">Script sẽ tự động làm:</span></div>
-        <div id="auto-steps-list"></div>
-      </div>
-      <div id="docker-output">
-        <!-- Option 1: Docker setup download (OS-adaptive) -->
-        <div class="output-section" style="padding: 24px; border: 2px solid rgba(16, 185, 129, 0.3); border-radius: 12px; background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(139,92,246,0.03)); margin-bottom: 20px;">
-          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
-            <span id="docker-dl-icon" style="font-size: 28px;">🪟</span>
-            <div>
-              <h3 class="output-section__title" style="margin: 0;" id="docker-dl-title" data-vi="Download Script Cài Đặt" data-en="Download Setup Script">Download Script Cài Đặt</h3>
-              <p style="font-size: 13px; color: var(--text-muted); margin: 4px 0 0;" id="docker-dl-desc" data-vi="Tải file → chạy → cài Docker, pull model và khởi động bot tự động" data-en="Download → run → auto-installs Docker, pulls model and starts bot">Tải file → chạy → cài Docker, pull model và khởi động bot tự động</p>
-            </div>
-          </div>
-          <div style="display: flex; justify-content: center; margin: 20px 0 8px;">
-            <button class="btn btn--primary" onclick="downloadAutoSetupBat()" style="font-size: 15px; padding: 14px 40px; border-radius: 8px;">
-              <span>📥 Download <span id="docker-dl-filename">setup-openclaw-docker-win.bat</span></span>
-            </button>
-          </div>
-          <div id="docker-dl-win-note" style="font-size: 12.5px; color: var(--warning, #ffc107); margin: 10px 0 8px; text-align: center; padding: 6px; background: rgba(255, 193, 7, 0.08); border-radius: 6px; border: 1px solid rgba(255, 193, 7, 0.2);">
-            ⚠️ <strong data-vi="Lưu ý quan trọng:" data-en="Important notice:">Lưu ý quan trọng:</strong>
-            <span data-vi="Click chuột phải vào file .bat → Properties → tick Unblock trước khi chạy!" data-en="Right-click the .bat file → Properties → check Unblock before running!">Click chuột phải vào file .bat → Properties → tick Unblock trước khi chạy!</span>
-          </div>
-          <div id="docker-dl-sh-note" style="display:none; font-size: 12.5px; color: var(--text-secondary); margin: 10px 0 8px; text-align: center; padding: 6px; background: rgba(255,255,255,0.04); border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);">
-            <span data-vi="Tải xong → chạy trong Terminal:" data-en="After download → run in Terminal:">Tải xong → chạy trong Terminal:</span>
-            <code id="docker-dl-sh-cmd" style="margin-left:6px; color: var(--claw-coral);">chmod +x setup-openclaw-docker-macos.sh && ./setup-openclaw-docker-macos.sh</code>
-          </div>
-        </div>
-        <!-- Option 2: Linux/macOS/VPS Terminal -->
-        <div class="output-section" style="padding: 24px; border: 2px solid rgba(255, 107, 53, 0.3); border-radius: 12px; background: linear-gradient(135deg, rgba(255,107,53,0.04), rgba(139,92,246,0.03)); margin-bottom: 20px;">
-          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
-            <span style="font-size: 28px;">💻</span>
-            <div>
-              <h3 class="output-section__title" style="margin: 0;" data-vi="Cách 2: NPX (macOS / Linux / Ubuntu / VPS)" data-en="Option 2: NPX (macOS / Linux / Ubuntu / VPS)">Cách 2: NPX (macOS / Linux / Ubuntu / VPS)</h3>
-              <p style="font-size: 13px; color: var(--text-muted); margin: 4px 0 0;" data-vi="Chạy lệnh bên dưới trong Terminal — script tự cài Docker, 9Router/Ollama và khởi động bot." data-en="Run the command below in Terminal — script installs Docker, 9Router/Ollama and starts bot.">Chạy lệnh bên dưới trong Terminal — script tự cài Docker, 9Router/Ollama và khởi động bot.</p>
-            </div>
-          </div>
-          <div class="code-block">
-            <div class="code-block__header">
-              <span class="code-block__filename">Terminal</span>
-              <button class="btn-copy" onclick="copyToClipboard(this, 'out-setup-npx')">📋 Copy</button>
-            </div>
-            <pre class="code-block__content" id="out-setup-npx" style="font-size: 15px; text-align: center; padding: 16px;">npx create-openclaw-bot</pre>
-          </div>
-          <p style="font-size: 12px; color: var(--text-muted); margin: 12px 0 0; text-align: center;" data-vi="Yêu cầu: Node.js 20+ — Script tự cài Docker Compose V2 và các thành phần cần thiết" data-en="Requires: Node.js 20+ — Script auto-installs Docker Compose V2 and required components">Yêu cầu: Node.js 20+ — Script tự cài Docker Compose V2 và các thành phần cần thiết</p>
-        </div>
-      </div>
-      <!-- Native Output (shown when deployMode === native) -->
-      <div id="native-output" style="display:none;">
-        <div class="output-section" style="padding: 24px; border: 2px solid rgba(139, 92, 246, 0.3); border-radius: 12px; background: linear-gradient(135deg, rgba(139,92,246,0.04), rgba(16,185,129,0.03)); margin-bottom: 20px;">
-          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
-            <span style="font-size: 28px;">💻</span>
-            <div>
-              <h3 class="output-section__title" style="margin: 0;" data-vi="Download Script Cài đặt" data-en="Download Setup Script">Download Script Cài đặt</h3>
-              <p style="font-size: 13px; color: var(--text-muted); margin: 4px 0 0;" id="native-instructions" data-vi="Tải file → chạy để cài OpenClaw trực tiếp trên máy (tự động cài 9Router/Ollama nếu đã chọn)" data-en="Download → run to install OpenClaw directly on your machine (auto-installs 9Router/Ollama if selected)">Tải file → chạy để cài OpenClaw trực tiếp trên máy (tự động cài 9Router/Ollama nếu đã chọn)</p>
-            </div>
-          </div>
-          <div style="display: flex; justify-content: center; margin: 20px 0 8px;">
-            <button class="btn btn--primary" onclick="downloadNativeScript()" style="font-size: 15px; padding: 14px 40px; border-radius: 8px;">
-              <span>📥 Download <span id="native-script-name">setup-openclaw-win.bat</span></span>
-            </button>
-          </div>
-          <div style="font-size: 12.5px; color: var(--warning, #ffc107); margin: 10px 0 8px; text-align: center; padding: 6px; background: rgba(255, 193, 7, 0.08); border-radius: 6px; border: 1px solid rgba(255, 193, 7, 0.2);">
-            ⚠️ <strong data-vi="Yêu cầu:" data-en="Requires:">Yêu cầu:</strong>
-            <span data-vi="Node.js 20+ phải được cài sẵn trên máy" data-en="Node.js 20+ must be installed on your machine">Node.js 20+ phải được cài sẵn trên máy</span>
-          </div>
-        </div>
-      </div>
-      <!-- ===== Post-setup notices (conditional) ===== -->
-      <!-- Multi-Bot Group Setup Notice (shown when botCount > 1) -->
-      <div id="multibot-output-notice" class="cred-section" style="display:none; margin-top:24px; border-color:rgba(99,102,241,0.3); padding:20px 22px; background:linear-gradient(135deg,rgba(99,102,241,0.05),rgba(139,92,246,0.03));">
-        <!-- Filled by JS: generateOutput() -->
-      </div>
-      <!-- Zalo Personal: Post-setup Docker Onboard Guide -->
-      <div id="zalo-onboard-notice" class="cred-section" style="display: none; margin-top: 24px; border-color: rgba(255, 193, 7, 0.3);">
-        <h3 class="cred-section__title" data-vi="📱 Login Zalo QR (1 Lần)" data-en="📱 Login Zalo QR (1 Lần)">📱 Login Zalo QR (1 Lần)</h3>
-        <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;" data-vi="Chạy lệnh bên dưới để mở quét mã QR cho Zalo:" data-en="Run this command to scan QR code for Zalo:">Chạy lệnh bên dưới để mở quét mã QR cho Zalo:</p>
-        <div class="code-block" style="margin-bottom: 12px;">
-          <div class="code-block__header">
-            <span class="code-block__filename" data-vi="Terminal" data-en="Terminal">Terminal</span>
-            <button class="btn-copy" onclick="copyToClipboard(this, 'out-zalo-onboard-cmd')">📋 Copy</button>
-          </div>
-          <pre class="code-block__content" id="out-zalo-onboard-cmd"></pre>
-        </div>
-        <div class="code-block" style="font-size: 13px; margin-bottom: 12px;">
-          <div class="code-block__header">
-            <span class="code-block__filename" data-vi="Cheat Sheet — Chọn các tùy chọn này" data-en="Cheat Sheet — Select these options">Cheat Sheet — Chọn các tùy chọn này</span>
-          </div>
-          <pre class="code-block__content" id="out-zalo-onboard-guide"></pre>
-        </div>
-      </div>
-      <!-- 9Router post-setup -->
-      <div id="9router-notice" class="cred-section" style="display: none; margin-top: 24px; border-color: rgba(0, 200, 150, 0.3);">
-        <h3 class="cred-section__title"><span data-vi="🔀 Kích hoạt 9Router" data-en="🔀 Activate 9Router">🔀 Kích hoạt 9Router</span></h3>
-        <div style="font-size: 14px; color: var(--text-secondary);">
-          <div class="cred-step" style="margin-bottom: 8px;">
-            <span class="cred-step__number">1</span>
-            <span class="cred-step__text"><span data-vi="Mở trình duyệt" data-en="Open browser">Mở trình duyệt</span> → <a href="http://localhost:20128/dashboard" target="_blank" style="color: var(--accent);">localhost:20128/dashboard</a></span>
-          </div>
-          <div class="cred-step" style="margin-bottom: 8px;">
-            <span class="cred-step__number">2</span>
-            <span class="cred-step__text" data-vi="Đăng nhập OAuth vào các AI provider (Google, Claude, GitHub...)" data-en="OAuth login to AI providers (Google, Claude, GitHub...)">Đăng nhập OAuth vào các AI provider (Google, Claude, GitHub...)</span>
-          </div>
-          <div class="cred-step">
-            <span class="cred-step__number">3</span>
-            <span class="cred-step__text" data-vi="Sao chép API key từ dashboard → đặt vào .env của bot (script đã chuẩn endpoint)" data-en="Copy API key from dashboard → paste into bot .env (script has already set the endpoint)">Sao chép API key từ dashboard → đặt vào .env của bot (script đã chuẩn endpoint)</span>
-          </div>
-        </div>
-      </div>
-      <!-- Browser notice -->
-      <div id="browser-notice" class="cred-section" style="display: none; margin-top: 24px; border-color: rgba(66, 133, 244, 0.3);">
-        <h3 class="cred-section__title"><span data-vi="🌐 Browser Automation — Bật Chrome Debug" data-en="🌐 Browser Automation — Enable Chrome Debug">🌐 Browser Automation — Bật Chrome Debug</span></h3>
-        <div style="font-size: 13px; color: var(--text-secondary);">
-          <div style="margin-bottom: 12px; padding: 10px 14px; background: rgba(66,133,244,0.06); border: 1px solid rgba(66,133,244,0.15); border-radius: 8px;">
-            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;"><span style="font-size: 18px;">🪟</span><strong data-vi="Windows" data-en="Windows">Windows</strong></div>
-            <span data-vi="Double-click file <code>start-chrome-debug.bat</code> trong thư mục project trước khi nhờ bot làm gì liên quan tới web." data-en="Double-click <code>start-chrome-debug.bat</code> in your project folder before asking bot to do web tasks.">Double-click file <code>start-chrome-debug.bat</code> trong thư mục project trước khi nhờ bot làm gì liên quan tới web.</span>
-          </div>
-          <div style="padding: 10px 14px; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.15); border-radius: 8px;">
-            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;"><span style="font-size: 18px;">🐧</span><strong data-vi="macOS / Linux" data-en="macOS / Linux">macOS / Linux</strong></div>
-            <span data-vi="Chạy <code>chmod +x start-chrome-debug.sh && ./start-chrome-debug.sh</code> trong terminal. Script tự detect Chrome trên macOS/Linux." data-en="Run <code>chmod +x start-chrome-debug.sh && ./start-chrome-debug.sh</code> in terminal. Script auto-detects Chrome on macOS/Linux.">Chạy <code>chmod +x start-chrome-debug.sh && ./start-chrome-debug.sh</code> trong terminal. Script tự detect Chrome trên macOS/Linux.</span>
-          </div>
-        </div>
-      </div>
-    </section>
-    </main>
-  <!-- ========== Navigation ========== -->
-  <div class="nav-buttons">
-    <button class="btn btn--ghost" id="btn-prev" style="visibility: hidden;">
-      <span data-vi="← Quay lại" data-en="← Go Back">← Quay lại</span>
-    </button>
-    <button class="btn btn--primary" id="btn-next">
-      <span id="btn-next-label" data-vi="Tiếp theo" data-en="Next">Tiếp theo</span> →
-    </button>
-  </div>
-</div>
-<script src="setup.js"></script>
-</body>
-</html>