create-openclaw-bot 5.8.17 → 5.8.19

package/dist/web/app.js

@@ -31,12 +31,25 @@ function staticChoiceCard(item) {
   </div>`;
 }
 
-async function api(path, opts) {
-  const res = await fetch(path, opts && opts.body ? { ...opts, headers: { 'content-type': 'application/json' }, body: JSON.stringify(opts.body) } : opts);
-  if (!res.ok) throw new Error((await res.json()).error || res.statusText);
-  return res.json();
-}
-function runtimeBadge(label, kind='') { return `<span class="mini-pill ${kind?`mini-pill--${kind}`:''}">${escapeHtml(label)}</span>`; }
+async function api(path, opts) {
+  const res = await fetch(path, opts && opts.body ? { ...opts, headers: { 'content-type': 'application/json' }, body: JSON.stringify(opts.body) } : opts);
+  if (!res.ok) throw new Error((await res.json()).error || res.statusText);
+  return res.json();
+}
+function activeProjectDir() {
+  return state.selectedProjectDir || state.install?.projectDir || '';
+}
+function projectQuery(extra = {}) {
+  const params = new URLSearchParams();
+  const projectDir = activeProjectDir();
+  if (projectDir) params.set('projectDir', projectDir);
+  Object.entries(extra).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && value !== '') params.set(key, value);
+  });
+  const query = params.toString();
+  return query ? `?${query}` : '';
+}
+function runtimeBadge(label, kind='') { return `<span class="mini-pill ${kind?`mini-pill--${kind}`:''}">${escapeHtml(label)}</span>`; }
 async function withButtonLoading(btn, task) {
   if (!btn || btn.classList.contains('is-loading')) return;
   const prevDisabled = btn.disabled;
@@ -268,7 +281,18 @@ async function pickFolderPathShared() {
     const picked = await api('/api/project/pick-folder', { method: 'POST', body: {} });
     const projectDir = String(picked.projectDir || '').trim();
     if (projectDir) return { projectDir };
-  } catch {}
+  } catch (err) {
+    return new Promise((resolve) => {
+      openPathModal({
+        title: t('Nhập đường dẫn project', 'Enter project path'),
+        message: t('Vui lòng nhập đường dẫn tuyệt đối đến thư mục project (ví dụ: /Users/mac/my-bot)', 'Please enter the absolute path to your project directory (e.g. /Users/mac/my-bot)'),
+        value: state.install?.projectDir || '',
+        placeholder: state.os === 'macos' ? '/Users/your-name/my-bot' : '/home/your-name/my-bot',
+        onConfirm: (val) => resolve({ projectDir: val }),
+        onCancel: () => resolve(null)
+      });
+    });
+  }
   return null;
 }
 
@@ -409,7 +433,7 @@ function renderFilesPanel() {
   // Re-wire only file-panel-specific handlers
   panel.querySelectorAll('[data-select-file]').forEach(btn => btn.onclick = () => { state.selectedFile = btn.dataset.selectFile; renderFilesPanel(); });
   panel.querySelectorAll('[data-toggle-dir]').forEach(btn => btn.onclick = () => { const p = btn.dataset.toggleDir; state.openDirs[p] = !(state.openDirs[p] ?? true); renderFilesPanel(); });
-  panel.querySelectorAll('.save').forEach(btn => btn.onclick = () => withButtonLoading(btn, async () => { const name = btn.dataset.file; await api('/api/bot/files/'+encodeURIComponent(name), { method: 'PUT', body: { content: document.querySelector(`[data-editor="${CSS.escape(name)}"]`).value } }); showToast(t('Đã lưu', 'Saved'), t('Đã lưu tệp tin: ', 'Saved file: ') + fileBaseName(name), 'success'); btn.innerHTML=`${actionIcon('save')} ${ui('saved')}`; setTimeout(()=>btn.innerHTML=`${actionIcon('save')} ${ui('save')}`,1200); }));
+  panel.querySelectorAll('.save').forEach(btn => btn.onclick = () => withButtonLoading(btn, async () => { const name = btn.dataset.file; await api('/api/bot/files/'+encodeURIComponent(name), { method: 'PUT', body: { projectDir: activeProjectDir(), content: document.querySelector(`[data-editor="${CSS.escape(name)}"]`).value } }); showToast(t('Đã lưu', 'Saved'), t('Đã lưu tệp tin: ', 'Saved file: ') + fileBaseName(name), 'success'); btn.innerHTML=`${actionIcon('save')} ${ui('saved')}`; setTimeout(()=>btn.innerHTML=`${actionIcon('save')} ${ui('save')}`,1200); }));
 }
 
 function renderSkillsPanel() {
@@ -428,7 +452,7 @@ function wireSkillsHandlers(scope = document) {
     state.featureLoading[key] = true;
     renderSkillsPanel();
     try {
-      await api('/api/features/toggle', { method:'POST', body:{ kind, id, enabled, agentId: currentBotId() } });
+      await api('/api/features/toggle', { method:'POST', body:{ projectDir: activeProjectDir(), kind, id, enabled, agentId: currentBotId() } });
       await loadFeatureFlags(true);
       if (kind === 'skill') await loadFiles(true);
     } finally {
@@ -442,7 +466,7 @@ function wireSkillsHandlers(scope = document) {
     state.featureLoading[key] = true;
     renderSkillsPanel();
     try {
-      await api('/api/features/install', { method:'POST', body:{ kind, id, agentId: currentBotId() } });
+      await api('/api/features/install', { method:'POST', body:{ projectDir: activeProjectDir(), kind, id, agentId: currentBotId() } });
       await loadFeatureFlags(true);
       await loadFiles(true);
       const label = kind === 'skill' ? t('kỹ năng: ', 'skill: ') : t('plugin: ', 'plugin: ');
@@ -898,7 +922,7 @@ function wireTab() {
     state.zaloLoginLines = [t('Đang chuẩn bị quét mã Zalo...', 'Preparing Zalo QR login...')];
     render();
     try {
-      await api('/api/zalo/login', { method: 'POST', body: { agentId: state.activeBotId } });
+      await api('/api/zalo/login', { method: 'POST', body: { projectDir: activeProjectDir(), agentId: state.activeBotId } });
     } catch (err) {
       state.zaloLoginOpen = false;
       state.confirmModal = { title: t('Lỗi đăng nhập','Login error'), message: err.message, okText: t('Đóng','Close'), onConfirm: () => {} };
@@ -941,6 +965,7 @@ function wireTab() {
       state.activeBotId = '';
       state.selectedFile = '';
       state.files = [];
+      await loadSystem(true);
       await loadStatus(true);
       // Auto-switch to the first channel that has bots in the new project
       autoSwitchBotChannel();
@@ -970,12 +995,18 @@ function wireTab() {
   }));
 document.querySelectorAll('[data-project-pick-folder]').forEach(btn => btn.onclick = () => withButtonLoading(btn, async () => {
     const result = await pickFolderPathShared();
-    if (!result) throw new Error(t('Ch?a ch?n th? m?c','No folder selected'));
-    state.projectConnectMessage = `OK ${t('?? k?t n?i','Connected')}: ${result.projectDir}`;
+    if (!result) throw new Error(t('Chưa chọn thư mục','No folder selected'));
+    await api('/api/project/connect', { method: 'POST', body: { projectDir: result.projectDir } });
+    state.projectConnectMessage = `OK ${t('Đã kết nối','Connected')}: ${result.projectDir}`;
     showToast(t('Đã kết nối', 'Connected'), t('Kết nối thành công project: ', 'Successfully connected project: ') + fileBaseName(result.projectDir), 'success');
     state.selectedProjectDir = result.projectDir;
     state.pendingProjectDir = '';
+    state.activeBotId = '';
+    state.selectedFile = '';
+    state.files = [];
+    await loadSystem(true);
     await loadStatus(true);
+    autoSwitchBotChannel();
     await loadFiles(true);
     await loadFeatureFlags(true);
     state.tab = 'bot';
@@ -998,12 +1029,12 @@ document.querySelectorAll('[data-project-pick-folder]').forEach(btn => btn.oncli
     }
   }));
   document.querySelectorAll('[data-update-app]').forEach(btn => btn.onclick = () => withButtonLoading(btn, async () => {
-    await api('/api/runtime/update', { method: 'POST', body: { target: 'openclaw' } });
+    await api('/api/runtime/update', { method: 'POST', body: { projectDir: activeProjectDir(), target: 'openclaw' } });
     await loadSystem();
     await loadStatus();
   }));
   document.querySelectorAll('[data-update-router]').forEach(btn => btn.onclick = () => withButtonLoading(btn, async () => {
-    await api('/api/runtime/update', { method: 'POST', body: { target: '9router' } });
+    await api('/api/runtime/update', { method: 'POST', body: { projectDir: activeProjectDir(), target: '9router' } });
     await loadSystem();
     await loadStatus();
   }));document.querySelectorAll('[data-project-remove]').forEach(btn => btn.onclick = (ev) => {
@@ -1052,7 +1083,7 @@ document.querySelectorAll('[data-project-pick-folder]').forEach(btn => btn.oncli
       okText: t('Xóa bot','Delete bot'),
       onConfirm: async () => {
         try {
-          await api('/api/bot/'+encodeURIComponent(id), { method: 'DELETE' });
+          await api('/api/bot/'+encodeURIComponent(id) + projectQuery(), { method: 'DELETE' });
           state.confirmModal = null;
           showToast(t('Đã xóa bot', 'Bot deleted'), `${t('Đã xóa bot','Bot deleted')}: ${id}`, 'success');
           if (state.activeBotId === id) { state.activeBotId = ''; state.selectedFile = ''; state.files = []; }
@@ -1088,7 +1119,7 @@ document.querySelectorAll('[data-project-pick-folder]').forEach(btn => btn.oncli
     const submitBtn = ev.currentTarget.querySelector('button[type="submit"]');
     withButtonLoading(submitBtn, async () => {
       const nineRouterApiKey = ev.currentTarget.querySelector('[name="nineRouterApiKey"]')?.value || '';
-      await api('/api/bot/credentials', { method: 'PUT', body: { nineRouterApiKey } });
+      await api('/api/bot/credentials', { method: 'PUT', body: { projectDir: activeProjectDir(), nineRouterApiKey } });
       const msg = ev.currentTarget.querySelector('[data-cred-msg]');
       if (msg) msg.textContent = t('Đã lưu','Saved');
       await loadStatus();
@@ -1152,6 +1183,8 @@ document.querySelectorAll('[data-project-pick-folder]').forEach(btn => btn.oncli
     if (action === 'ok') {
       const value = document.getElementById('path-modal-input')?.value?.trim() || '';
       if (value && typeof modal.onConfirm === 'function') modal.onConfirm(value);
+    } else {
+      if (typeof modal.onCancel === 'function') modal.onCancel();
     }
     state.pathModal = null;
     render();
@@ -1161,9 +1194,10 @@ document.querySelectorAll('[data-project-pick-folder]').forEach(btn => btn.oncli
     const submitBtn = ev.currentTarget.querySelector('button[type="submit"]');
     if (submitBtn?.classList.contains('is-loading')) return;
     await withButtonLoading(submitBtn, async () => {
-    const fd = new FormData(ev.currentTarget);
-    const body = Object.fromEntries(fd.entries());
-    body.channel = state.botChannel || 'telegram';
+    const fd = new FormData(ev.currentTarget);
+    const body = Object.fromEntries(fd.entries());
+    body.projectDir = activeProjectDir();
+    body.channel = state.botChannel || 'telegram';
     if (body.channel === 'zalo-personal') {
       state.botModalOpen = false;
       state.zaloLoginOpen = true;
@@ -1207,14 +1241,21 @@ document.querySelectorAll('[data-project-pick-folder]').forEach(btn => btn.oncli
     }
     });
   });
-  document.querySelectorAll('.save').forEach(btn => btn.onclick = () => withButtonLoading(btn, async () => { const name = btn.dataset.file; await api('/api/bot/files/'+encodeURIComponent(name), { method: 'PUT', body: { content: document.querySelector(`[data-editor="${CSS.escape(name)}"]`).value } }); showToast(t('Đã lưu', 'Saved'), t('Đã lưu tệp tin: ', 'Saved file: ') + fileBaseName(name), 'success'); btn.innerHTML=`${actionIcon('save')} ${ui('saved')}`; setTimeout(()=>btn.innerHTML=`${actionIcon('save')} ${ui('save')}`,1200); }));
+  document.querySelectorAll('.save').forEach(btn => btn.onclick = () => withButtonLoading(btn, async () => { const name = btn.dataset.file; await api('/api/bot/files/'+encodeURIComponent(name), { method: 'PUT', body: { projectDir: activeProjectDir(), content: document.querySelector(`[data-editor="${CSS.escape(name)}"]`).value } }); showToast(t('Đã lưu', 'Saved'), t('Đã lưu tệp tin: ', 'Saved file: ') + fileBaseName(name), 'success'); btn.innerHTML=`${actionIcon('save')} ${ui('saved')}`; setTimeout(()=>btn.innerHTML=`${actionIcon('save')} ${ui('save')}`,1200); }));
   wireSkillsHandlers(document);
 }
 
 function escapeHtml(s='') { return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
-function fileBaseName(s='') { return String(s).split(/[\\/]/).pop() || s; }
-async function loadSystem(silent=false){ state.system = await api('/api/system'); if (!silent) render(); }
-async function loadStatus(silent=false){ state.install = await api('/api/bot/status'); if (!state.selectedProjectDir && state.install?.projectDir) state.selectedProjectDir = state.install.projectDir; if (!silent) render(); }
+function fileBaseName(s='') { const clean = String(s).replace(/[\\/]+$/, ''); return clean.split(/[\\/]/).pop() || s; }
+async function loadSystem(silent=false){ state.system = await api('/api/system'); if (!silent) render(); }
+async function loadStatus(silent=false){
+  const requestedProjectDir = activeProjectDir();
+  const install = await api('/api/bot/status' + projectQuery());
+  if (requestedProjectDir && install?.projectDir && install.projectDir !== requestedProjectDir) return;
+  state.install = install;
+  if (!state.selectedProjectDir && state.install?.projectDir) state.selectedProjectDir = state.install.projectDir;
+  if (!silent) render();
+}
 function autoSwitchBotChannel() {
   const bots = state.install?.bots || [];
   const ch = state.botChannel || 'telegram';
@@ -1235,14 +1276,14 @@ function currentBotId() {
   }
   return state.activeBotId || '';
 }
-async function loadFiles(silent=false){
-  const botId = currentBotId();
-  if (!botId) { state.files = []; if (!silent) render(); return; }
-  state.files = (await api('/api/bot/files' + (botId ? `?agentId=${encodeURIComponent(botId)}` : ''))).files;
-  if (!silent) render();
-}
-async function loadCatalog(silent=false){ state.catalog = await api('/api/catalog'); if (!silent) render(); }
-async function loadFeatureFlags(silent=false){ const botId=currentBotId(); const data = (await api('/api/features' + (botId ? `?agentId=${encodeURIComponent(botId)}` : ''))) || {}; state.featureFlags = data.flags || {}; state.featureInstalled = data.installed || {}; state.featureVersions = data.versions || {}; if (!silent) render(); }
+async function loadFiles(silent=false){
+  const botId = currentBotId();
+  if (!botId) { state.files = []; if (!silent) render(); return; }
+  state.files = (await api('/api/bot/files' + projectQuery({ agentId: botId }))).files;
+  if (!silent) render();
+}
+async function loadCatalog(silent=false){ state.catalog = await api('/api/catalog'); if (!silent) render(); }
+async function loadFeatureFlags(silent=false){ const botId=currentBotId(); const data = (await api('/api/features' + projectQuery({ agentId: botId }))) || {}; state.featureFlags = data.flags || {}; state.featureInstalled = data.installed || {}; state.featureVersions = data.versions || {}; if (!silent) render(); }
 function appendLogLine(line) {
   if (line.includes('Setup Wizard updated successfully! Please restart the installer.')) {
     showToast(t('Đang khởi động lại UI', 'Restarting Setup UI'), t('Hệ thống đang tự khởi động lại để áp dụng phiên bản mới...', 'The system is restarting to apply the new version...'), 'info', 12000);

package/package.json

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