create-openclaw-bot 5.9.0 → 5.10.0

package/README.md

@@ -7,7 +7,7 @@
 *Run one command → open the dashboard → your bot is live. Windows · macOS · Linux · VPS, on Docker or native.*
 
 <p align="center">
-  <a href="https://github.com/tuanminhhole/openclaw-setup/releases"><img src="https://img.shields.io/badge/RELEASE-v5.9.0-0EA5E9?style=for-the-badge" alt="Version 5.9.0" /></a>
+  <a href="https://github.com/tuanminhhole/openclaw-setup/releases"><img src="https://img.shields.io/badge/RELEASE-v5.10.0-0EA5E9?style=for-the-badge" alt="Version 5.10.0" /></a>
   <a href="https://github.com/tuanminhhole/openclaw-setup?tab=MIT-1-ov-file"><img src="https://img.shields.io/badge/LICENSE-MIT-success?style=for-the-badge" alt="MIT License" /></a>
   <a href="https://www.npmjs.com/package/create-openclaw-bot"><img src="https://img.shields.io/npm/v/create-openclaw-bot?style=for-the-badge&label=CLI&color=2563EB&logo=npm&logoColor=white" alt="NPM Version" /></a>
   <a href="https://github.com/tuanminhhole/openclaw-setup/stargazers"><img src="https://img.shields.io/github/stars/tuanminhhole/openclaw-setup?style=for-the-badge&color=eab308&logo=github&logoColor=white" alt="GitHub Stars" /></a>
@@ -27,7 +27,7 @@
 
 ---
 
-## 🆕 What's New in v5.9.0
+## 🆕 What's New in v5.10.0
 
 - 🧠 **TencentDB Agent Memory — 1-click install**: New memory plugin in the UI. A 4-tier (L0–L3) layered-memory + context-compression engine that keeps long sessions coherent and **cuts token usage by up to ~61%**. Fully local (SQLite), no API key, Docker-ready.
 - ⚡ **Token-lean defaults for every new bot**: Ships with context pruning (cache-TTL) + `safeguard` compaction — **cheaper & sharper long conversations** with zero tuning.

package/README.vi.md

@@ -7,7 +7,7 @@
 *Chạy một lệnh → mở dashboard → bot lên sóng. Windows · macOS · Linux · VPS, chạy Docker hoặc native.*
 
 <p align="center">
-  <a href="https://github.com/tuanminhhole/openclaw-setup/releases"><img src="https://img.shields.io/badge/RELEASE-v5.9.0-0EA5E9?style=for-the-badge" alt="Version 5.9.0" /></a>
+  <a href="https://github.com/tuanminhhole/openclaw-setup/releases"><img src="https://img.shields.io/badge/RELEASE-v5.10.0-0EA5E9?style=for-the-badge" alt="Version 5.10.0" /></a>
   <a href="https://github.com/tuanminhhole/openclaw-setup?tab=MIT-1-ov-file"><img src="https://img.shields.io/badge/LICENSE-MIT-success?style=for-the-badge" alt="MIT License" /></a>
   <a href="https://www.npmjs.com/package/create-openclaw-bot"><img src="https://img.shields.io/npm/v/create-openclaw-bot?style=for-the-badge&label=CLI&color=2563EB&logo=npm&logoColor=white" alt="NPM Version" /></a>
   <a href="https://github.com/tuanminhhole/openclaw-setup/stargazers"><img src="https://img.shields.io/github/stars/tuanminhhole/openclaw-setup?style=for-the-badge&color=eab308&logo=github&logoColor=white" alt="GitHub Stars" /></a>
@@ -27,7 +27,7 @@
 
 ---
 
-## 🆕 Có gì mới trong v5.9.0
+## 🆕 Có gì mới trong v5.10.0
 
 - 🧠 **TencentDB Agent Memory — cài 1 chạm**: Plugin bộ nhớ mới ngay trên UI. Bộ nhớ phân tầng 4 lớp (L0–L3) + nén ngữ cảnh, giữ session dài mạch lạc và **tiết kiệm tới ~61% token**. Chạy local hoàn toàn (SQLite), không cần API key, sẵn sàng cho Docker.
 - ⚡ **Cấu hình tiết kiệm token mặc định cho mọi bot mới**: Tự có context pruning (cache-TTL) + compaction `safeguard` — **hội thoại dài rẻ hơn & sắc nét hơn**, không cần chỉnh tay.

package/dist/server/local-server.js

@@ -605,6 +605,136 @@ Timed out after ${opts.timeout}ms`.trim() : stderr });
   });
 }
 
+// ── Native process supervision (auto-restart) ───────────────────────────────
+// Docker containers get `restart: always` for free. For native installs we register the gateway
+// and 9router as OS services so they survive crashes and reboots, mirroring that guarantee:
+//   • macOS  → per-user launchd LaunchAgent (KeepAlive + RunAtLoad)
+//   • Linux  → systemd unit (system unit when root, else --user) with Restart=always
+//   • Windows / anything else → plain detached process (no supervision; unchanged behaviour)
+// Every step is best-effort: any failure falls back to startDetached, so a native install can
+// never end up worse off than before this feature existed.
+function escapeXml(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+function nativeServiceId(projectDir) { return slugify(basename(projectDir || 'openclaw')) || 'bot'; }
+function nativeServiceLabels(projectDir) {
+  const id = nativeServiceId(projectDir);
+  return {
+    '9router': { launchd: `com.openclaw.9router.${id}`, systemd: `openclaw-9router-${id}.service` },
+    sync: { launchd: `com.openclaw.sync.${id}`, systemd: `openclaw-sync-${id}.service` },
+    gateway: { launchd: `com.openclaw.gateway.${id}`, systemd: `openclaw-gateway-${id}.service` },
+  };
+}
+async function resolveAbsoluteBin(cmd) {
+  try {
+    const out = await runCapture(process.platform === 'win32' ? 'where' : 'which', [cmd], { shell: false, timeout: 5000 });
+    const first = String(out.stdout || '').split(/\r?\n/).map((s) => s.trim()).find(Boolean);
+    if (out.code === 0 && first) return first;
+  } catch {}
+  return resolveBinPath(cmd);
+}
+function systemdUserUnitDir() { return join(getRealHomedir(), '.config', 'systemd', 'user'); }
+function isRootUser() { return typeof process.getuid === 'function' && process.getuid() === 0; }
+
+/**
+ * Start one native process under OS supervision (auto-restart). Falls back to a plain detached
+ * process on Windows/unknown platforms or if the service tooling errors. Returns the method used:
+ * 'launchd' | 'systemd' | 'detached'.
+ */
+async function startNativeService({ projectDir, name, cmd, args, desc, env }) {
+  const labels = nativeServiceLabels(projectDir)[name];
+  const logDir = join(projectDir, '.openclaw', 'logs');
+  await fsp.mkdir(logDir, { recursive: true }).catch(() => {});
+  const serviceEnv = { PATH: process.env.PATH || '', HOME: getRealHomedir(), ...env };
+  try {
+    const absBin = await resolveAbsoluteBin(cmd);
+    if (process.platform === 'darwin') {
+      const agentsDir = join(getRealHomedir(), 'Library', 'LaunchAgents');
+      await fsp.mkdir(agentsDir, { recursive: true });
+      const progArgs = [absBin, ...args].map((a) => `      <string>${escapeXml(a)}</string>`).join('\n');
+      const envDict = Object.entries(serviceEnv).map(([k, v]) => `      <key>${escapeXml(k)}</key><string>${escapeXml(String(v))}</string>`).join('\n');
+      const plist = `<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0"><dict>
+  <key>Label</key><string>${labels.launchd}</string>
+  <key>ProgramArguments</key><array>
+${progArgs}
+  </array>
+  <key>WorkingDirectory</key><string>${escapeXml(projectDir)}</string>
+  <key>EnvironmentVariables</key><dict>
+${envDict}
+  </dict>
+  <key>RunAtLoad</key><true/>
+  <key>KeepAlive</key><true/>
+  <key>StandardOutPath</key><string>${escapeXml(join(logDir, name + '.out.log'))}</string>
+  <key>StandardErrorPath</key><string>${escapeXml(join(logDir, name + '.err.log'))}</string>
+</dict></plist>`;
+      const plistPath = join(agentsDir, `${labels.launchd}.plist`);
+      await fsp.writeFile(plistPath, plist, 'utf8');
+      await run('launchctl', ['unload', plistPath], {}).catch(() => {});
+      await run('launchctl', ['load', '-w', plistPath], {});
+      sendLog(`[native] launchd service ${labels.launchd} loaded (auto-restart)`);
+      return 'launchd';
+    }
+    if (process.platform === 'linux') {
+      const root = isRootUser();
+      const unitDir = root ? '/etc/systemd/system' : systemdUserUnitDir();
+      await fsp.mkdir(unitDir, { recursive: true });
+      const sc = (a) => run('systemctl', root ? a : ['--user', ...a], {});
+      const envLines = Object.entries(serviceEnv).map(([k, v]) => `Environment="${k}=${String(v).replace(/\n/g, ' ')}"`).join('\n');
+      const execStart = [absBin, ...args].map((a) => (/[\s"']/.test(a) ? JSON.stringify(a) : a)).join(' ');
+      const unit = `[Unit]
+Description=${desc}
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+WorkingDirectory=${projectDir}
+${envLines}
+ExecStart=${execStart}
+Restart=always
+RestartSec=3
+
+[Install]
+WantedBy=${root ? 'multi-user.target' : 'default.target'}
+`;
+      await fsp.writeFile(join(unitDir, labels.systemd), unit, 'utf8');
+      await sc(['daemon-reload']);
+      await sc(['enable', '--now', labels.systemd]);
+      sendLog(`[native] systemd ${root ? 'system' : 'user'} service ${labels.systemd} enabled (Restart=always)`);
+      return 'systemd';
+    }
+  } catch (e) {
+    sendLog(`[native] ${name} service setup failed (${e.message}); falling back to detached process`);
+  }
+  const pid = startDetached(cmd, args, { cwd: projectDir, env });
+  if (name === 'gateway') state.botPid = pid;
+  return 'detached';
+}
+
+/** Remove any launchd/systemd services registered for a native project (used on delete). */
+async function removeNativeAutostart(projectDir) {
+  const labels = nativeServiceLabels(projectDir);
+  try {
+    if (process.platform === 'darwin') {
+      const agentsDir = join(getRealHomedir(), 'Library', 'LaunchAgents');
+      for (const k of ['9router', 'sync', 'gateway']) {
+        const p = join(agentsDir, `${labels[k].launchd}.plist`);
+        if (existsSync(p)) { await run('launchctl', ['unload', p], {}).catch(() => {}); await fsp.unlink(p).catch(() => {}); }
+      }
+    } else if (process.platform === 'linux') {
+      const root = isRootUser();
+      const unitDir = root ? '/etc/systemd/system' : systemdUserUnitDir();
+      const sc = (a) => run('systemctl', root ? a : ['--user', ...a], {}).catch(() => {});
+      let changed = false;
+      for (const k of ['9router', 'sync', 'gateway']) {
+        const u = join(unitDir, labels[k].systemd);
+        if (existsSync(u)) { await sc(['disable', '--now', labels[k].systemd]); await fsp.unlink(u).catch(() => {}); changed = true; }
+      }
+      if (changed) await sc(['daemon-reload']);
+    }
+  } catch (e) { sendLog(`[native] autostart teardown skipped: ${e.message}`); }
+}
+
 function safeJoin(root, name) {
   const clean = normalize(String(name || '')).replace(/^([/\\])+/, '');
   if (!clean || clean.includes('..')) throw httpError(400, 'Invalid file path');
@@ -1445,7 +1575,9 @@ async function createBotInProject(projectDir, body = {}, runtime = {}) {
   cfg.agents.list.push({
     id: agentId,
     name: botName,
-    workspace: `/home/node/project/.openclaw/${workspaceDir}`,
+    // Relative workspace path — resolves against the process cwd (project root) in both docker
+    // and native. See buildOpenclawJson() for the full rationale.
+    workspace: `.openclaw/${workspaceDir}`,
     agentDir: `agents/${agentId}/agent`,
     model: { primary: model === '9router/smart-route' || model === 'openai/smart-route' ? DEFAULT_MODEL : model, fallbacks: [] },
   });
@@ -2436,17 +2568,62 @@ async function installCore({ osChoice, mode, projectDir, gatewayPort = 18789, ro
       await applyResolved9RouterApiKey(projectDir).catch(() => {});
       await recreateDockerBot(projectDir).catch(() => {});
     } else {
+      const nineRouterDataDir = join(projectDir, '.9router');
+      const nineRouterDbPath = join(nineRouterDataDir, 'db', 'data.sqlite');
       const runtimeEnv = {
         OPENCLAW_HOME: join(projectDir, '.openclaw'),
         OPENCLAW_STATE_DIR: join(projectDir, '.openclaw'),
-        DATA_DIR: join(projectDir, '.9router'),
+        DATA_DIR: nineRouterDataDir,
         OPENCLAW_GATEWAY_PORT: String(gatewayPort),
         OPENCLAW_PORT: String(gatewayPort),
+        // Parity with the docker runtime env (docker-gen.js) so the gateway and browser plugin
+        // behave the same natively: allow the private-network control-UI websocket and tell the
+        // browser plugin which host OS it is running on.
+        OPENCLAW_ALLOW_INSECURE_PRIVATE_WS: '1',
+        OPENCLAW_SETUP_OS: osChoice || '',
+        OPENCLAW_BROWSER_HOST_OS: osChoice || '',
       };
       await run('openclaw', ['gateway', 'stop'], { cwd: projectDir, env: runtimeEnv }).catch(() => {});
-      startDetached('9router', ['-n', '-l', '-H', '127.0.0.1', '-p', String(routerPort), '--skip-update'], { cwd: projectDir, env: runtimeEnv });
-      state.botPid = startDetached('openclaw', ['gateway', 'run'], { cwd: projectDir, env: runtimeEnv });
-      sendLog(`Native gateway started in background (pid=${state.botPid || 'unknown'})`);
+      // 9router binds loopback in native mode on purpose: openclaw runs on the SAME host and
+      // reaches it via localhost (see get9RouterBaseUrl), so there is no reason to expose the LLM
+      // proxy on 0.0.0.0 — even on a VPS that would be an open relay. Only the gateway is exposed.
+      // Start 9router first (auto-restart supervised), then sync, then the gateway — so the gateway
+      // boots after 9router is reachable and after the API key has been written to its config.
+      const routerMethod = await startNativeService({
+        projectDir, name: '9router', cmd: '9router', desc: `OpenClaw 9router (${nativeServiceId(projectDir)})`,
+        args: ['-n', '-l', '-H', '127.0.0.1', '-p', String(routerPort), '--skip-update'], env: runtimeEnv,
+      });
+      // Smart-route auto-sync: the docker sidecar runs a script that disables 9router's login
+      // requirement and builds the default `smart-route` combo from the active providers. Native
+      // mode skipped this, so the default model had no backing models. Reuse the exact docker
+      // script with the native DB path (passed via env to stay cross-platform / shell-safe).
+      try {
+        const artifacts = buildDockerArtifacts({ is9Router: true, osChoice, openClawNpmSpec: OPENCLAW_NPM_SPEC, gatewayPort, routerPort });
+        if (artifacts.syncScript) {
+          await fsp.mkdir(nineRouterDataDir, { recursive: true });
+          const syncPath = join(nineRouterDataDir, 'sync.js');
+          await fsp.writeFile(syncPath, artifacts.syncScript, 'utf8');
+          // Run the sync under supervision too (managed service) so it is torn down cleanly on
+          // delete instead of leaking an orphaned `node sync.js` process.
+          await startNativeService({
+            projectDir, name: 'sync', cmd: process.execPath, args: [syncPath],
+            desc: `OpenClaw 9router smart-route sync (${nativeServiceId(projectDir)})`,
+            env: { ...runtimeEnv, NINEROUTER_DB_PATH: nineRouterDbPath, PORT: String(routerPort) },
+          });
+          sendLog('[native] 9router smart-route sync started');
+        }
+      } catch (e) {
+        sendLog(`[native] smart-route sync setup skipped: ${e.message}`);
+      }
+      // Give 9router a moment to boot + sync to disable its login gate, then resolve its API key
+      // into openclaw.json BEFORE the gateway starts (so the gateway reads it on first boot).
+      await new Promise((r) => setTimeout(r, 8000));
+      await applyResolved9RouterApiKey(projectDir).catch(() => {});
+      const gatewayMethod = await startNativeService({
+        projectDir, name: 'gateway', cmd: 'openclaw', desc: `OpenClaw gateway (${nativeServiceId(projectDir)})`,
+        args: ['gateway', 'run'], env: runtimeEnv,
+      });
+      sendLog(`Native runtime started — 9router via ${routerMethod}, gateway via ${gatewayMethod}${state.botPid ? ` (pid=${state.botPid})` : ''}`);
     }
     state.installed = true;
     sendLog('✅ Install completed');
@@ -2851,6 +3028,10 @@ async function deleteProjectFolder(projectDir, rootProjectDir) {
     });
     // Sleep 2.5 seconds to let Windows file system release overlays/locks
     await new Promise((resolve) => setTimeout(resolve, 2500));
+  } else {
+    // Native project: stop & remove any launchd/systemd auto-restart services so they don't keep
+    // respawning a deleted bot. No-op when no services were registered.
+    await removeNativeAutostart(resolved);
   }
 
   try {
@@ -4073,7 +4254,7 @@ export async function startLocalInstaller({ host = '127.0.0.1', preferredPort =
   printRemoteAccessHint(port).catch(() => {});
 }
 
-export { createBotInProject, updateBotInProject, deleteBotInProject, validateOpenclawConfig, startZaloUserLogin, readBotCredentials, resolveProject9RouterApiKey };
+export { createBotInProject, updateBotInProject, deleteBotInProject, validateOpenclawConfig, startZaloUserLogin, readBotCredentials, resolveProject9RouterApiKey, installCore, deleteProjectFolder, removeNativeAutostart };
 
 
 

package/dist/setup/shared/bot-config-gen.js

@@ -82,23 +82,29 @@
     const isLocal = !!provider.isLocal;
 
     // ── agents ────────────────────────────────────────────────────────────────
+    // Workspace is a RELATIVE path (resolved by OpenClaw against the process cwd, which is the
+    // project root in both modes: WORKDIR=/home/node/project in docker, cwd=projectDir natively).
+    // OpenClaw's resolveUserPath() keeps absolute paths as-is, so the old container-absolute
+    // "/home/node/project/.openclaw/…" pointed at a non-existent path on a native host (the bot's
+    // persona/memory/skills silently lived in the wrong place). `agentDir` is already relative and
+    // proven to resolve correctly in docker, so relative `workspace` is byte-identical for docker
+    // and finally correct for native. See workspaceRelForAgent() which accepts both forms.
     const agentsList = agentMetas.map((meta) => ({
       id: meta.agentId,
       ...(meta.name ? { name: meta.name } : {}),
-      workspace: `/home/node/project/.openclaw/${meta.workspaceDir || 'workspace-' + meta.agentId}`,
+      workspace: `.openclaw/${meta.workspaceDir || 'workspace-' + meta.agentId}`,
       agentDir: `agents/${meta.agentId}/agent`,
       model: { primary: model, fallbacks: [] },
     }));
 
     const cfg = {
-      // NOTE: do NOT seed `lastTouchedVersion` here. OPENCLAW_NPM_SPEC is a range/`latest`
-      // (e.g. `>=2026.6.10`), not a concrete version — writing it makes OpenClaw fail to parse
-      // it on boot and crash the container. OpenClaw stamps the correct
-      // `{ lastTouchedVersion, lastTouchedAt }` itself on first run.
-      meta: {
-        osChoice,
-        deployMode,
-      },
+      // NOTE: do NOT seed a `meta` block here. `meta` is owned by OpenClaw — it stamps
+      // `{ lastTouchedVersion, lastTouchedAt }` itself on first run and adds the block if
+      // missing. Writing our own fields into it (osChoice/deployMode), or seeding
+      // `lastTouchedVersion` from OPENCLAW_NPM_SPEC which is a range/`latest`
+      // (e.g. `>=2026.6.10`) not a concrete version, makes OpenClaw fail to parse the config
+      // on boot and crash the container. osChoice/deployMode are installer-only concerns and
+      // are persisted via the browser plugin's `config.hostOs` + in-memory state instead.
       agents: {
         defaults: {
           model: { primary: model, fallbacks: [] },

package/dist/setup/shared/docker-gen.js

@@ -18,103 +18,100 @@
   }
 
   function build9RouterSmartRouteSyncScript() {
+    // First-install auto-sync: đăng nhập 9router bằng MẬT KHẨU MẶC ĐỊNH 123456 (9router cấp),
+    // gom model của các provider đang active → tạo combo 'smart-route' MỘT LẦN rồi DỪNG.
+    // KHÔNG tự tắt Require login nữa (require login giữ ON, pass mặc định 123456, user đổi sau).
     const lines = [
       "const fs = require('fs');",
       "const INTERVAL = 30000;",
-      "const DB_PATH = '/root/.9router/db/data.sqlite';",
+      "const MAX_ATTEMPTS = 20; // ~10 phút; tạo combo lần đầu rồi dừng, không lặp vĩnh viễn",
+      "const DEFAULT_PASSWORD = '123456'; // mật khẩu mặc định 9router",
+      // Docker mounts the DB at /root/.9router; native installs pass NINEROUTER_DB_PATH so the
+      // same sync script works on the host without hardcoding the container path.
+      "const DB_PATH = process.env.NINEROUTER_DB_PATH || '/root/.9router/db/data.sqlite';",
       "const PORT = process.env.PORT || 20128;",
       "const COMBO_NAME = 'smart-route';",
       "const API_BASE = `http://localhost:${PORT}`;",
       "",
-      "function ensureSettings() {",
+      "// Đăng nhập bằng mật khẩu mặc định → lấy cookie auth_token để gọi API quản trị.",
+      "async function login() {",
       "  try {",
-      "    let db = null;",
-      "    try {",
-      "      const { DatabaseSync } = require('node:sqlite');",
-      "      db = new DatabaseSync(DB_PATH);",
-      "    } catch {",
-      "      let Database;",
-      "      try { Database = require('/usr/local/lib/node_modules/better-sqlite3'); } catch {",
-      "        try { Database = require('better-sqlite3'); } catch { return; }",
-      "      }",
-      "      db = Database(DB_PATH);",
-      "    }",
-      '    const existing = db.prepare("SELECT * FROM settings WHERE id = 1").get();',
-      "    if (!existing) {",
-      '      db.prepare("INSERT INTO settings (id, data) VALUES (1, ?)").run(JSON.stringify({ requireLogin: false }));',
-      "    } else {",
-      "      try {",
-      "        const data = JSON.parse(existing.data || '{}');",
-      "        if (data.requireLogin !== false) {",
-      "          data.requireLogin = false;",
-      '          db.prepare("UPDATE settings SET data = ? WHERE id = 1").run(JSON.stringify(data));',
-      "        }",
-      "      } catch {}",
-      "    }",
-      "    db.close();",
-      "  } catch (e) {}",
+      "    const r = await fetch(`${API_BASE}/api/auth/login`, {",
+      "      method: 'POST',",
+      "      headers: { 'Content-Type': 'application/json' },",
+      "      body: JSON.stringify({ password: DEFAULT_PASSWORD })",
+      "    });",
+      "    if (!r.ok) return '';",
+      "    const sc = r.headers.get('set-cookie') || '';",
+      "    const m = sc.match(/auth_token=[^;]+/);",
+      "    return m ? m[0] : '';",
+      "  } catch (e) { return ''; }",
       "}",
       "",
-      "const sync = async () => {",
-      "  try {",
-      "    if (!fs.existsSync(DB_PATH)) return;",
-      "",
-      "    let existingCombo = null;",
-      "    try {",
-      "      const resp = await fetch(`${API_BASE}/api/combos`);",
-      "      if (resp.status === 401) {",
-      "        ensureSettings();",
-      "        return;",
-      "      }",
-      "      const data = await resp.json();",
-      "      if (data.combos) {",
-      "        existingCombo = data.combos.find(c => c.name === COMBO_NAME);",
-      "      }",
-      "    } catch (e) { return; }",
+      "async function trySync() {",
+      "  if (!fs.existsSync(DB_PATH)) return false;",
+      "  const cookie = await login(); // mk mặc định 123456; nếu user đã đổi thì login fail",
+      "  const authHeaders = cookie ? { Cookie: cookie } : {};",
       "",
-      "    if (existingCombo) return;",
-      "",
-      "    let activeProviders = [];",
-      "    try {",
-      "      const resp = await fetch(`${API_BASE}/api/providers`);",
-      "      const data = await resp.json();",
-      "      const conns = data.connections || data.providerConnections || [];",
-      "      activeProviders = [...new Set(",
-      "        conns.filter(c => c && c.provider && c.isActive !== false && !c.disabled).map(c => c.provider)",
-      "      )];",
-      "    } catch (e) { return; }",
-      "",
-      "    if (!activeProviders.length) return;",
+      "  // Combo đã tồn tại? → coi như xong (chỉ tạo lần đầu).",
+      "  try {",
+      "    const r = await fetch(`${API_BASE}/api/combos`, { headers: authHeaders });",
+      "    if (r.status === 401) return false;",
+      "    const d = await r.json();",
+      "    if ((d.combos || []).some(c => c.name === COMBO_NAME)) return true;",
+      "  } catch (e) { return false; }",
       "",
-      "    let models = [];",
-      "    try {",
-      "      const resp = await fetch(`${API_BASE}/api/models`);",
-      "      const data = await resp.json();",
-      "      if (data.models && Array.isArray(data.models)) {",
-      "        models = data.models",
-      "          .filter(m => activeProviders.includes(m.provider))",
-      "          .filter(m => !/(embedding|image|tts|stt|audio|vision)/i.test(m.model))",
-      "          .map(m => m.fullModel);",
-      "      }",
-      "      models = [...new Set(models)];",
-      "    } catch (e) { return; }",
+      "  // Provider đang active.",
+      "  let activeProviders = [];",
+      "  try {",
+      "    const r = await fetch(`${API_BASE}/api/providers`, { headers: authHeaders });",
+      "    const d = await r.json();",
+      "    const conns = d.connections || d.providerConnections || [];",
+      "    activeProviders = [...new Set(",
+      "      conns.filter(c => c && c.provider && c.isActive !== false && !c.disabled).map(c => c.provider)",
+      "    )];",
+      "  } catch (e) { return false; }",
+      "  if (!activeProviders.length) return false;",
       "",
-      "    if (!models.length) return;",
+      "  // Model của provider active (bỏ embedding/image/tts/…).",
+      "  let models = [];",
+      "  try {",
+      "    const r = await fetch(`${API_BASE}/api/models`, { headers: authHeaders });",
+      "    const d = await r.json();",
+      "    if (Array.isArray(d.models)) {",
+      "      models = [...new Set(d.models",
+      "        .filter(m => activeProviders.includes(m.provider))",
+      "        .filter(m => !/(embedding|image|tts|stt|audio|vision)/i.test(m.model))",
+      "        .map(m => m.fullModel))];",
+      "    }",
+      "  } catch (e) { return false; }",
+      "  if (!models.length) return false;",
       "",
-      "    try {",
-      "      await fetch(`${API_BASE}/api/combos`, {",
-      "        method: 'POST',",
-      "        headers: { 'Content-Type': 'application/json' },",
-      "        body: JSON.stringify({ name: COMBO_NAME, models })",
-      "      });",
-      "      console.log('[sync-combo] Created smart-route with ' + models.length + ' models');",
-      "    } catch (e) {}",
-      "  } catch (e) {}",
-      "};",
+      "  // Tạo combo smart-route (lần đầu).",
+      "  try {",
+      "    await fetch(`${API_BASE}/api/combos`, {",
+      "      method: 'POST',",
+      "      headers: { 'Content-Type': 'application/json', ...authHeaders },",
+      "      body: JSON.stringify({ name: COMBO_NAME, models })",
+      "    });",
+      "    console.log('[sync-combo] Created smart-route with ' + models.length + ' models');",
+      "    return true;",
+      "  } catch (e) { return false; }",
+      "}",
       "",
-      "if (fs.existsSync(DB_PATH)) ensureSettings();",
-      "setTimeout(sync, 10000);",
-      "setInterval(sync, INTERVAL);",
+      "let attempts = 0;",
+      "let timer = null;",
+      "async function tick() {",
+      "  attempts++;",
+      "  let done = false;",
+      "  try { done = await trySync(); } catch (e) {}",
+      "  if (done || attempts >= MAX_ATTEMPTS) {",
+      "    if (timer) clearInterval(timer);",
+      "    console.log('[sync-combo] finished (attempts=' + attempts + ', done=' + done + ')');",
+      "  }",
+      "}",
+      "timer = setInterval(tick, INTERVAL);",
+      "setTimeout(tick, 10000);",
     ];
     return lines.join('\n');
   }
@@ -187,7 +184,7 @@ if(touched){console.log('[patch-9router] Applied Codex compatibility patch.');}e
       return [
       `npm install -g ` + nineRouterSpec,
       'node /tmp/patch-9router.js || true',
-      'node -e "const fs=require(\'fs\'),path=require(\'path\'); const DB_PATH=\'/root/.9router/db/data.sqlite\'; const dir=path.dirname(DB_PATH); if(!fs.existsSync(dir))fs.mkdirSync(dir,{recursive:true}); try{ const {DatabaseSync}=require(\'node:sqlite\'); const db=new DatabaseSync(DB_PATH); db.prepare(\'CREATE TABLE IF NOT EXISTS settings (id INTEGER PRIMARY KEY CHECK (id = 1), data TEXT NOT NULL)\').run(); const existing=db.prepare(\'SELECT * FROM settings WHERE id = 1\').get(); if(!existing){ db.prepare(\'INSERT INTO settings (id, data) VALUES (1, ?)\').run(JSON.stringify({requireLogin:false})); } db.close(); }catch(e){}" || true',
+      'node -e "const fs=require(\'fs\'),path=require(\'path\'); const DB_PATH=\'/root/.9router/db/data.sqlite\'; const dir=path.dirname(DB_PATH); if(!fs.existsSync(dir))fs.mkdirSync(dir,{recursive:true}); try{ const {DatabaseSync}=require(\'node:sqlite\'); const db=new DatabaseSync(DB_PATH); db.prepare(\'CREATE TABLE IF NOT EXISTS settings (id INTEGER PRIMARY KEY CHECK (id = 1), data TEXT NOT NULL)\').run(); const existing=db.prepare(\'SELECT * FROM settings WHERE id = 1\').get(); if(!existing){ db.prepare(\'INSERT INTO settings (id, data) VALUES (1, ?)\').run(JSON.stringify({requireLogin:true})); } db.close(); }catch(e){}" || true',
       'node /tmp/sync.js > /tmp/sync.log 2>&1 &',
       `exec 9router -n -l -H 0.0.0.0 -p ${port} --skip-update`
     ].join('\n');

package/dist/web/app.js

@@ -405,6 +405,9 @@ function topbarActionsHtml() {
 
 function render() {
   applyPrefs();
+  // Expose the active tab on <body> so CSS can drop the redundant page-title header on the
+  // dashboard (the dashboard hero already carries its own title).
+  document.body.dataset.activeTab = state.tab;
   const tabs = [['dashboard',t('Dashboard','Dashboard')],['setup',ui('setup')],['bot',ui('bot')],['logs',ui('logs')]];
   
   let mainContainer = $('#app-main-content');
@@ -617,9 +620,9 @@ function dashboardView() {
           <h2>${t('Dashboard v\u1eadn h\u00e0nh', 'Operational Dashboard')}</h2>
           <p class="lead" style="margin-top:6px">${t('M\u1edf website, xem version, tr\u1ea1ng th\u00e1i, bot v\u00e0 project.', 'Open website, view versions, status, bots and projects.')}</p>
         </div>
-        <div class="dash-actions" style="flex-direction:column; align-items:stretch; gap:8px;">
-          <button class="primary icon-btn2" data-tab-jump="bot" type="button" style="justify-content:center; min-width:140px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"></path></svg>${t('Bot','Bot')}</button>
-          <button class="secondary icon-btn2" data-tab-jump="setup" type="button" style="justify-content:center; border-width:2px; min-width:140px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 0 0 4.561 21h14.878a2 2 0 0 0 1.94-1.515L22 17"></path></svg>${t('C\u00e0i \u0111\u1eb7t','Setup')}</button>
+        <div class="dash-actions" style="flex-direction:row; gap:10px;">
+          <button class="primary icon-btn2" data-tab-jump="bot" type="button" style="justify-content:center; flex:1; min-width:0;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"></path></svg>${t('Bot','Bot')}</button>
+          <button class="secondary icon-btn2" data-tab-jump="setup" type="button" style="justify-content:center; border-width:2px; flex:1; min-width:0;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 0 0 4.561 21h14.878a2 2 0 0 0 1.94-1.515L22 17"></path></svg>${t('C\u00e0i \u0111\u1eb7t','Setup')}</button>
         </div>
       </div>
       <div class="project-tabs" style="display:flex; gap:8px; flex-wrap:wrap; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06);">
@@ -627,7 +630,7 @@ function dashboardView() {
       </div>
     </section>
     
-    <section class="dash-layout" style="grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);">
+    <section class="dash-layout">
       <div style="display:flex; flex-direction:column; gap:18px;">
         <div class="dash-grid" style="grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start;">
           ${widgets.map(w => `<article class="card dash-metric"><span>${escapeHtml(w.label)}</span><strong style="font-size:22px; word-break:break-all;">${w.value}</strong><small>${escapeHtml(w.meta)}</small></article>`).join('')}
@@ -985,26 +988,31 @@ function botSkillsPanel() {
     const requiresInstall = group === 'plugin' || (group === 'skill' && (item.id === 'image-gen' || item.id === 'sticker-mention' || item.id === 'learning-memory'));
     const isInstalled = !requiresInstall || !!state.featureInstalled?.[key];
     
-    let actionsHtml = '';
+    const version = requiresInstall && isInstalled ? (state.featureVersions?.[key] || '') : '';
+    const versionBadge = version ? `<span class="plugin-version-badge" style="display:inline-block; font-size: 11px; background: rgba(66, 133, 244, 0.15); color: #4285F4; padding: 2px 6px; border-radius: 4px; font-weight: 600; border: 1px solid rgba(66,133,244,0.25); flex:0 0 auto;">v${escapeHtml(version)}</span>` : '';
+
+    // The on/off toggle stays inline with the title (one line, name truncates with ellipsis if
+    // long). The wider Open / Update / Install controls drop to their own row below the description.
+    let toggleHtml = '';
+    const secs = [];
     if (isInstalled) {
-      actionsHtml = `<div style="display:flex; align-items:center; gap:8px;">`;
+      toggleHtml = `<label class="feature-switch"><input type="checkbox" data-feature-toggle="${key}" ${flags[key] ? 'checked' : ''} ${loading ? 'disabled' : ''}/><span></span></label>`;
       if (item.openWebPort) {
-        actionsHtml += `<a class="secondary icon-btn2" href="${sameHostUrl('', item.openWebPort)}${item.openWebPath || ''}" target="_blank" rel="noopener" title="${t('Mở dashboard của plugin','Open the plugin dashboard')}" style="padding: 4px 8px; font-size: 11px; height: 28px; border-width: 1px;">${actionIcon('link')}<span>${t('Mở web','Open')}</span></a>`;
+        secs.push(`<a class="secondary icon-btn2" href="${sameHostUrl('', item.openWebPort)}${item.openWebPath || ''}" target="_blank" rel="noopener" title="${t('Mở dashboard của plugin','Open the plugin dashboard')}" style="padding: 4px 8px; font-size: 11px; height: 28px; border-width: 1px;">${actionIcon('link')}<span>${t('Mở web','Open')}</span></a>`);
       }
       if (requiresInstall) {
-        actionsHtml += `<button class="secondary icon-btn2 update-plugin-btn" type="button" data-feature-install="${key}" ${loading ? 'disabled' : ''} title="${t('Cập nhật lên bản mới nhất','Update to latest version')}" style="padding: 4px 8px; font-size: 11px; height: 28px; border-width: 1px; color:#ffb020; border-color: rgba(255,176,32,0.25); background: rgba(255,176,32,0.05);">${actionIcon('refresh')}<span>${t('Cập nhật','Update')}</span></button>`;
+        secs.push(`<button class="secondary icon-btn2 update-plugin-btn" type="button" data-feature-install="${key}" ${loading ? 'disabled' : ''} title="${t('Cập nhật lên bản mới nhất','Update to latest version')}" style="padding: 4px 8px; font-size: 11px; height: 28px; border-width: 1px; color:#ffb020; border-color: rgba(255,176,32,0.25); background: rgba(255,176,32,0.05);">${actionIcon('refresh')}<span>${t('Cập nhật','Update')}</span></button>`);
       }
-      actionsHtml += `<label class="feature-switch"><input type="checkbox" data-feature-toggle="${key}" ${flags[key] ? 'checked' : ''} ${loading ? 'disabled' : ''}/><span></span></label></div>`;
     } else {
-      actionsHtml = `<button class="secondary icon-btn2" type="button" data-feature-install="${key}" ${loading ? 'disabled' : ''}>${actionIcon('download')} ${ui('installVerb')}</button>`;
+      secs.push(`<button class="secondary icon-btn2" type="button" data-feature-install="${key}" ${loading ? 'disabled' : ''}>${actionIcon('download')} ${ui('installVerb')}</button>`);
     }
+    const secondaryHtml = secs.length ? `<div class="feature-actions">${secs.join('')}</div>` : '';
 
-    const version = requiresInstall && isInstalled ? (state.featureVersions?.[key] || '') : '';
-    const versionBadge = version ? `<span class="plugin-version-badge" style="display:inline-block; font-size: 11px; background: rgba(66, 133, 244, 0.15); color: #4285F4; padding: 2px 6px; border-radius: 4px; font-weight: 600; margin-left: 8px; border: 1px solid rgba(66,133,244,0.25);">v${escapeHtml(version)}</span>` : '';
-
-    return `<article class="card feature-card ${loading ? 'is-loading' : ''}"><div class="feature-head"><div><b>${escapeHtml(item.title)}${versionBadge}</b><p>${escapeHtml(item.desc)}</p></div>` + 
-      actionsHtml +
-      `</div>${loading ? '<div class="feature-progress"><i></i></div>' : ''}</article>`;
+    return `<article class="card feature-card ${loading ? 'is-loading' : ''}">` +
+      `<div class="feature-head"><div class="feature-title"><b class="feature-name">${escapeHtml(item.title)}</b>${versionBadge}</div>${toggleHtml}</div>` +
+      `<p class="feature-desc">${escapeHtml(item.desc)}</p>` +
+      secondaryHtml +
+      `${loading ? '<div class="feature-progress"><i></i></div>' : ''}</article>`;
   };
   return `
     <h4 class="feature-group">⚡ ${t('Skills','Skills')}</h4>

package/dist/web/styles.css

@@ -49,7 +49,7 @@ html[data-theme="light"] .topbar{background:rgba(255,255,255,.82);box-shadow:0 1
 .setup-copy{display:grid!important;grid-template-columns:minmax(240px,.78fr) 1fr;align-items:center!important;gap:22px!important;min-height:128px;padding:22px 24px!important;background:linear-gradient(135deg,rgba(18,201,255,.075),rgba(255,255,255,.035),rgba(124,58,237,.055))!important;border-color:rgba(96,165,250,.20)!important}.setup-copy h2{margin:12px 0 0;font-size:22px;letter-spacing:-.035em;line-height:1.15}.setup-copy .lead{margin:0;font-size:18px;line-height:1.55;max-width:560px;color:var(--body);font-weight:500}.mini-pill{border-color:rgba(18,201,255,.38)!important;background:rgba(18,201,255,.09)!important;color:var(--soft)!important}
 .setup-section,.card,.choice-card,.system-card,.terminal{backdrop-filter:blur(14px);background:linear-gradient(145deg,rgba(8,18,32,.72),rgba(5,8,14,.82))!important;border-color:var(--hair)!important}.choice-card:has(input:checked),.choice-card.is-selected{border-color:var(--primary)!important;background:linear-gradient(145deg,rgba(18,201,255,.13),rgba(8,18,32,.88))!important;box-shadow:0 0 0 1px rgba(18,201,255,.25) inset,0 24px 70px rgba(18,201,255,.10)!important}.choice-card:has(input:checked) .choice-card__meta i,.choice-card.is-selected .choice-card__meta i{border-color:var(--primary)!important;background:radial-gradient(circle,var(--primary) 0 42%,transparent 46%)!important;box-shadow:0 0 0 5px rgba(18,201,255,.14),0 0 28px rgba(18,201,255,.34)!important}.install-cta{background:linear-gradient(135deg,var(--primary),var(--soft) 48%,#0284c7)!important;color:#001018!important}.install-cta small{color:rgba(0,16,24,.72)!important}
 html[data-theme="light"] .setup-section,html[data-theme="light"] .card,html[data-theme="light"] .choice-card,html[data-theme="light"] .system-card,html[data-theme="light"] .terminal{background:rgba(255,255,255,.82)!important;color:var(--ink)!important}.choice-card__body small{color:var(--body)!important}
-@media(max-width:900px){.topbar{height:auto;align-items:stretch;flex-direction:column}.topbar__actions{width:100%;justify-content:space-between}.setup-copy{grid-template-columns:1fr!important}.setup-copy .lead{font-size:16px}}
+@media(max-width:900px){.topbar{height:auto}.setup-copy{grid-template-columns:1fr!important}.setup-copy .lead{font-size:16px}}
 
 
 /* OpenClaw red theme + overflow containment fix */
@@ -651,6 +651,10 @@ html[data-theme="light"] .donut-chart::before {
 .chart-info span{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}
 .chart-info strong{font-size:18px;letter-spacing:-0.02em;line-height:1.2}
 .chart-info small{color:var(--body);font-size:13px}
+.chart-info span,.chart-info strong,.chart-info small{overflow-wrap:anywhere}
+/* On narrow screens the chart cards sit 2-up (~162px each); stack the donut above the
+   text so the labels ("Installed Extensions", model id) get the full card width. */
+@media(max-width:760px){.chart-card{flex-direction:column;text-align:center;gap:10px;padding:14px}.chart-info{align-items:center}}
 
 /* Premium Toast Notification System */
 .toast-container {
@@ -1912,3 +1916,99 @@ main{transition:margin .2s}
 /* Tablet/mobile bot page: stop horizontal overflow so .channel-tabs scrolls instead of stretching the layout */
 .bot-page,.bot-top-row,.bot-main,.bot-main-content,.bot-projects-and-bots,.bot-side-col,.bot-list{min-width:0}
 @media(max-width:1180px){.bot-top-row{grid-template-columns:minmax(0,1fr)}}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   Mobile UX refinements (user feedback)
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* [Hero] Dashboard already shows its title inside the hero card — drop the duplicate
+   page-title header so it doesn't repeat "Dashboard vận hành" twice. */
+body[data-active-tab="dashboard"] .top{display:none}
+
+/* [Modals] While any modal is open, hide the fixed bottom nav so it can't cover the modal's
+   lower content (and footer buttons) on mobile. The backdrop owns the screen at that point. */
+body:has(.modal-backdrop) .bottom{display:none!important}
+/* Bot / Cài đặt hero buttons sit side-by-side — keep their labels on one line. */
+.dash-actions .icon-btn2{white-space:nowrap}
+
+@media(max-width:760px){
+  /* [Topbar] Keep search + theme + language on ONE row; theme becomes icon-only and the
+     language globe icon is dropped so the whole bar stays compact. */
+  .topbar{flex-direction:row!important;align-items:center!important;gap:8px;padding:8px 10px}
+  .topbar__actions{width:auto!important;flex-wrap:nowrap!important;justify-content:flex-end!important;gap:6px}
+  .topbar__actions .seg{padding:3px;gap:2px}
+  .topbar__actions .seg[aria-label="theme"] .seg__btn span{display:none}
+  .topbar__actions .seg[aria-label="theme"] .seg__btn{padding:8px 9px}
+  .topbar__actions .seg[aria-label="lang"]>span{display:none!important}
+  .topbar__actions .seg__btn{padding:6px 9px;font-size:11px}
+  .search input{font-size:13px}
+
+  /* [Connect project] The action buttons were absolutely positioned and overlapped the
+     path text. Put the card into normal flow with full-width buttons below the content.
+     The card used overflow:hidden + a fixed min-height and the list capped at 260px with an
+     inner scroll — all of which clipped the now-in-flow buttons. Let everything grow. */
+  .detected-projects{max-height:none!important;overflow:visible!important}
+  .detected-project{padding:12px!important;min-height:0!important;height:auto!important;overflow:visible!important}
+  .detected-project__actions{position:static!important;transform:none!important;width:100%;margin-top:4px}
+  .detected-project__actions .secondary{min-width:0!important;flex:1}
+  .detected-project b{font-size:14px}
+  .detected-project small{font-size:11px}
+  .detected-project__meta{gap:6px}
+
+  /* [Connect project header] Title was squeezed to a 3-line column on the left with the two
+     buttons crammed to the right. Stack it: full-width title on top, buttons full-width below. */
+  .card-head:has(.existing-project-actions){flex-direction:column;align-items:stretch;gap:10px}
+  .existing-project-actions{width:100%;flex-direction:column}
+  .existing-project-actions .icon-btn2{width:100%;justify-content:center}
+
+  /* [Donate modal] The QR cards went full-width (one per row) and filled the screen. Cap each
+     card so the QR is just big enough to scan comfortably, centered in the modal. */
+  .donate-grid article{max-width:248px;width:100%;margin:0 auto}
+
+  /* [Skills/plugins] Mobile: tighter padding + smaller text (see the global feature-card design
+     block below for the one-line name + inline toggle layout). */
+  .feature-card{padding:14px}
+  .feature-name{font-size:13.5px!important}
+  .feature-desc{font-size:12px!important}
+
+  /* [Maintenance row] Restart / Rebuild / Grant-disk were locked to a 34px height in one row,
+     so "Cấp quyền ổ đĩa" overflowed. Let them wrap and grow vertically. */
+  .bot-docker-actions{flex-wrap:wrap}
+  .bot-docker-actions button{height:auto!important;min-height:40px;white-space:normal;line-height:1.2;flex:1 1 92px}
+
+  /* [File tree] Give the tree a touch more room on mobile and let the editor breathe. */
+  .file-tree{max-height:300px!important}
+  .tree-editor{min-height:300px!important}
+}
+
+@media(max-width:520px){
+  /* [Setup OS/mode] Shrink the logo cards: keep them 2-up (compact, less scrolling) with
+     much smaller icons — just large enough to tap comfortably. */
+  .os-grid,.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
+  .logo-card{min-height:0!important;gap:8px!important;padding:12px 8px!important;border-radius:14px!important}
+  .logo-card .choice-card__icon{width:40px!important;height:40px!important;border-radius:11px!important}
+  .logo-card .choice-card__icon img{width:24px!important;height:24px!important}
+  .logo-card .choice-card__body strong{font-size:13px!important}
+  .logo-card .choice-card__body small{font-size:10px!important}
+}
+
+/* ── Feature (skill/plugin) card design ──────────────────────────────────────
+   Name + a compact native-style toggle sit on ONE line; the name truncates with an ellipsis
+   instead of ever wrapping to a second line. Description goes below, and the wider
+   Open / Update / Install controls (when present) get their own row. */
+/* min-width:0 lets the card (a grid item, default min-width:auto) shrink below its nowrap
+   content so the name can ellipsis-truncate instead of overflowing the row off-screen. */
+.feature-card{min-width:0}
+.feature-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
+.feature-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
+.feature-name{display:block;font-size:15px;font-weight:800;line-height:1.2;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.feature-desc{margin:8px 0 0;color:var(--body);font-size:13px;line-height:1.45}
+.feature-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
+/* Keep the Install / Update / Open buttons small & compact (in line with the toggle), so the
+   "Cài đặt" button isn't the default oversized size. */
+.feature-actions .secondary,.feature-actions .icon-btn2{height:28px;min-height:0;padding:4px 11px;font-size:11px;font-weight:700;border-radius:8px;border-width:1px}
+.feature-actions svg{width:13px;height:13px}
+/* Smaller, native-app style on/off toggle (was 52×30). */
+.feature-switch span{width:42px;height:24px}
+.feature-switch span:after{top:2px;left:2px;width:18px;height:18px}
+.feature-switch input:checked + span:after{left:22px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-openclaw-bot",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "description": "Interactive CLI installer for OpenClaw Bot",
   "main": "dist/cli.js",
   "bin": {