tourfp 0.2.0 → 0.3.1

package/README.md

@@ -1,4 +1,4 @@
-# tour-guide
+# tourfp
 
 Bản thử nghiệm thư viện ghi và phát tour hướng dẫn trên giao diện web, không cần sửa mã nguồn của app.
 Phần tử được nhận diện bằng "dấu vân tay" nhiều tín hiệu (chữ, icon, thuộc tính, component cha, tiêu đề khối đứng trước)
@@ -8,12 +8,10 @@ Toàn bộ nằm trong một file: [`tourfp.js`](tourfp.js), không phụ thuộ
 
 ## Cài đặt
 
-Thư viện là một gói npm tên `tourfp`, chỉ gồm file `tourfp.js`, không có phụ thuộc và không cần bước build.
-
-Cài thẳng từ repo này (repo đang riêng tư, nên máy cài phải có quyền đọc repo):
+Thư viện là gói npm [`tourfp`](https://www.npmjs.com/package/tourfp), chỉ gồm file `tourfp.js`, không có phụ thuộc và không cần bước build.
 
 ```bash
-npm install github:ngquangdat/tour-guide
+npm install tourfp
 ```
 
 Rồi nạp vào app theo một trong hai cách:
@@ -28,22 +26,28 @@ Với Angular, nên khai báo trong `angular.json` để thư viện được n
 "scripts": ["node_modules/tourfp/tourfp.js"]
 ```
 
-Tuỳ chọn, đặt trước khi nạp thư viện:
+Hoặc không cần cài, nạp bằng một thẻ script qua CDN:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/tourfp@0.3.1/tourfp.js"></script>
+```
+
+Để dùng thử nhanh trên một trang đang mở (trang phải cho phép script từ `cdn.jsdelivr.net`), dán dòng này vào console:
 
 ```js
-window.TOURFP_SERVER = 'https://tour.example.com'; // máy chủ lưu tour, mặc định http://localhost:8000
-window.TOURFP_PLAYER = true;                       // chỉ phát, không hiện thanh ghi tour
+document.head.appendChild(Object.assign(document.createElement('script'), { src: 'https://cdn.jsdelivr.net/npm/tourfp@0.3.1/tourfp.js' }));
 ```
 
-Gói chưa được đưa lên npm. Khi đã phát hành, có thể cài bằng `npm install tourfp`, hoặc nạp bằng một thẻ script qua CDN:
+Tuỳ chọn, đặt trước khi nạp thư viện:
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/tourfp@0.2.0/tourfp.js"></script>
+```js
+window.TOURFP_SERVER = 'https://tour.example.com'; // máy chủ lưu tour, mặc định http://localhost:8000
+window.TOURFP_PLAYER = true;                       // chỉ phát, không hiện thanh ghi tour
 ```
 
 ## Dùng thử
 
-Dán nội dung `tourfp.js` vào console của trang, hoặc nạp bằng thẻ `<script>`. Một thanh điều khiển hiện ra ở góc dưới trái
+Sau khi nạp thư viện (xem Cài đặt), một thanh điều khiển hiện ra ở góc dưới trái
 (kéo đi chỗ khác được):
 
 - **● Ghi** — thao tác như bình thường, mỗi cú bấm thành một bước và vẫn chạy thật.
@@ -85,6 +89,7 @@ Mở <http://localhost:8000>:
 - **Chạy thử** — chép một đoạn mã gồm cả thư viện lẫn tour; mở màn bắt đầu của tour, dán vào console là tour phát ngay.
   Khi chạy thử, thanh ghi tour không hiện (chế độ chỉ phát); gọi `TourFP.showPanel()` nếu cần hiện lại.
 - **Xoá**, **Tải JSON**, và xem danh sách bước của từng tour.
+- **Sửa tên**: bấm vào tên một bước để đặt tên hiển thị cho bước đó (để trống thì dùng lại tên tự lấy từ giao diện); nút **Sửa tên tour** đổi tên và mô tả của tour. Tên đã đặt được dùng trong lời hướng dẫn khi phát và trong việc tìm tour của trợ lý.
 
 Cấu hình bằng biến môi trường: `TOURFP_TARGET` là trang web tour chạy trên đó (mặc định `https://tcinvest.tcbs.com.vn`),
 `TOURFP_DATA` là thư mục chứa file SQLite.
@@ -94,6 +99,54 @@ Khi thư viện được cài sẵn trong app và app cho phép gọi tới máy
 (mặc định `http://localhost:8000`). Trang TCInvest hiện chặn mọi kết nối ra ngoài danh sách cho phép của nó, nên với trang đó
 phải dùng cách dán JSON và dán mã chạy thử.
 
+### Trợ lý tìm tour
+
+Người dùng nói muốn tới màn hình nào, máy chủ tìm tour phù hợp trong danh sách và trả về hai cách đi:
+
+```bash
+curl -X POST http://localhost:8000/api/assist -H 'Content-Type: application/json' -d '{"query": "tôi muốn nộp tiền", "layout": "mobile"}'
+```
+
+Câu trả lời gồm `tour` (tour được chọn), `to_step` (dừng sau bước thứ mấy; mặc định là bước cuối, hoặc bước người dùng nêu như
+"tới bước 3"), `reason` (lý do, để hiện cho người dùng) và `options`:
+
+- `guide` — **Hướng dẫn từng bước**: chỉ từng thao tác, người dùng tự bấm.
+- `direct` — **Vào thẳng màn hình**: thư viện tự đưa tới nơi. Nếu bước cuối chuyển sang một trang khác thì vào thẳng trang đó
+  bằng đường dẫn; nếu không thì tự bấm các bước trên trang cuối. Gặp bước cần người dùng nhập, hoặc không tìm thấy đích,
+  nó chuyển sang hướng dẫn từng bước từ chỗ đó.
+
+Mỗi lựa chọn kèm `run_url` (mở trang với `?tourfp=<mã>&mode=<guide|direct>&to=<bước>`, dùng khi thư viện đã cài trong app) và
+`snippet_url` (mã chạy thử để dán vào console). Trên trang quản trị có ô **Trợ lý tìm tour** để thử ngay.
+
+Trong app đã cài thư viện và gọi được máy chủ, có thể dùng thẳng:
+
+```js
+TourFP.ask('tôi muốn nộp tiền');          // hỏi trợ lý rồi hiện hai lựa chọn cho người dùng
+TourFP.start({ mode: 'direct', to: 3 });  // chạy tour đang nạp: vào thẳng, dừng sau bước 3
+```
+
+Chế độ vào thẳng tự bấm thay người dùng. Với tour đi qua thao tác có hậu quả (đặt lệnh, xác nhận giao dịch), nên đặt `to` dừng
+trước các bước đó, hoặc chỉ đưa ra lựa chọn hướng dẫn từng bước.
+
+### Nối với mô hình AI
+
+Mặc định trợ lý tìm bằng so khớp từ khoá, không gọi AI. Bật AI bằng biến môi trường `TOURFP_AI`:
+
+| `TOURFP_AI` | Nối tới | Cần đặt thêm |
+|---|---|---|
+| `off` (mặc định) | Không gọi AI | |
+| `bedrock` | Amazon Bedrock, qua API Converse | `TOURFP_AI_MODEL`, `AWS_REGION`, thông tin đăng nhập AWS; cài `boto3` |
+| `litellm` | LiteLLM proxy, hoặc máy chủ nào nói giao thức `chat/completions` | `TOURFP_AI_MODEL`, `TOURFP_LITELLM_URL`, `TOURFP_LITELLM_KEY` (nếu proxy yêu cầu) |
+
+```bash
+TOURFP_AI=litellm TOURFP_AI_MODEL=<tên mô hình> TOURFP_LITELLM_URL=http://localhost:4000 uvicorn main:app --app-dir server --port 8000
+```
+
+Mô hình chỉ nhận tên tour, mô tả và nhãn của từng bước, cùng câu người dùng nhập; không nhận dấu vân tay. Câu trả lời của mô
+hình luôn được kiểm lại (tour phải có thật, số bước phải nằm trong tour). Khi mô hình lỗi hoặc trả lời sai dạng, trợ lý tự
+chuyển sang so khớp từ khoá và ghi lý do vào `ai_error`. Thêm một nhà cung cấp khác bằng cách viết một lớp có hàm
+`complete(system, user)` trong `server/ai.py`.
+
 Máy chủ không có đăng nhập; chỉ nên chạy trên `127.0.0.1`.
 
 ## Giới hạn hiện tại

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tourfp",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Ghi và phát tour hướng dẫn trên giao diện web bằng dấu vân tay phần tử, không cần sửa mã nguồn của app.",
   "main": "tourfp.js",
   "browser": "tourfp.js",
@@ -20,7 +20,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ngquangdat/tour-guide.git"
+    "url": "git+https://github.com/ngquangdat/tourfp.git"
   },
   "license": "UNLICENSED"
 }

package/tourfp.js

@@ -1,11 +1,14 @@
-/* TourFP 0.2.0 — bản thử: ghi tour theo thao tác và khớp phần tử bằng "dấu vân tay".
+/* TourFP 0.3.1 — bản thử: ghi tour theo thao tác và khớp phần tử bằng "dấu vân tay".
  * - Không dùng class/id. Không phụ thuộc thư viện.
  * - Chữ lấy từ API (tên, tên kế hoạch…) và chữ số bị loại khỏi dấu vân tay.
  *   Để lọc được, file này phải được nạp TRƯỚC khi app gọi API (đặt trong <head>).
  * - Ghi: bấm bình thường = bước "thao tác" (cú bấm vẫn chạy, app chuyển màn như thật);
  *        Alt+bấm = bước "chỉ tô sáng" (cú bấm bị chặn).
  * - Phát: tô sáng đích, chờ người dùng tự bấm rồi mới sang bước sau; tự chờ màn mới hiện ra.
- * API: TourFP.capture(el) | TourFP.find(fp) | record() | stop() | play() | export() | load(steps) | destroy()
+ *   start({ mode: 'guide' | 'direct', to }) chạy tới bước thứ `to`: dẫn từng bước, hoặc thư viện tự đưa tới nơi.
+ * - Cấu hình (đặt trước khi nạp): window.TOURFP_SERVER = địa chỉ máy chủ lưu tour; window.TOURFP_PLAYER = true để ẩn thanh ghi.
+ * API: TourFP.record() | stop() | play() | start(opts) | load(steps) | export() | save() | run(id, opts) | ask(query)
+ *      | capture(el) | find(fp) | showPanel(on) | destroy()
  */
 (() => {
   if (typeof window === 'undefined' || typeof document === 'undefined') return; // được import ở phía máy chủ (SSR, công cụ build): không làm gì
@@ -75,7 +78,7 @@
     // chỉ cần vài mẩu đầu: với khối lớn (thẻ, bảng) đó là tiêu đề
     for (let n; (n = w.nextNode()) && nodes < 40 && out.length < 6;) {
       const v = n.nodeValue;
-      if (!v.trim() || (n.parentElement && n.parentElement.closest('svg,script,style'))) continue;
+      if (!v.trim() || (n.parentElement && n.parentElement.closest('svg,script,style,mat-icon,.material-icons'))) continue;
       nodes++;
       if (/\d/.test(v)) digits = true;
       for (const seg of v.split(/\d[\d.,%\/:-]*/)) { const s = norm(seg); if (s.length >= 2 && hasLetters(s)) { out.push(s.slice(0, 60)); num.push(/\d/.test(v)); } }
@@ -417,6 +420,7 @@
   const steps = []; // { kind: 'click' | 'hover' | 'input' | 'info', fp, note }
   let recording = false, playing = -1, raf = 0, target = null, token = 0, pending = null, lastCap = 0;
   let hoverEl = null, hoverT = 0, lastDown = 0, popups = [], advancing = false;
+  let directRun = 0, fullSteps = null, choice = null; // lượt "vào thẳng" đang chạy; bản đầy đủ của tour khi chỉ chạy tới bước x; hai lựa chọn đang chờ
   // khi đang ghi: menu bật ra do rê chuột (không phải do bấm) thì nhớ phần tử đang được rê lên
   const popMo = new MutationObserver(list => {
     // bỏ qua nếu vừa có cú bấm (trong 1,5 giây, hoặc từ lúc chuột vào phần tử đang rê): khi đó thứ bật ra là do bấm
@@ -467,7 +471,8 @@
   const tipText = mk('div', 'margin-bottom:4px;white-space:pre-line');
   const tipMeta = mk('div', 'margin-bottom:8px;font-size:11px;opacity:.55');
   const bNext = mk('button', btnCss + 'pointer-events:auto;background:#e5484d;', 'Tiếp'), bStop = mk('button', btnCss + 'pointer-events:auto;background:#ddd;color:#111;margin-left:6px', 'Dừng');
-  tip.append(tipText, tipMeta, bNext, bStop);
+  const bClose = mk('button', btnCss + 'pointer-events:auto;background:none;color:#666;margin-left:6px;display:none', 'Đóng');
+  tip.append(tipText, tipMeta, bNext, bStop, bClose);
   // chế độ chỉ phát (chạy thử từ trang quản trị, hoặc mở trang với ?tourfp=<mã>): không hiện thanh ghi tour
   const PLAYER = !!window.TOURFP_PLAYER || new URLSearchParams(location.search).has('tourfp');
   if (PLAYER) panel.style.display = 'none';
@@ -596,7 +601,11 @@
     setInfo(); cancelAnimationFrame(raf); loop();
   }
   function stop() { recording = false; pending = null; popMo.disconnect(); bRec.textContent = '● Ghi'; bRec.style.background = '#2a2f3a'; target = null; box.style.display = 'none'; cancelAnimationFrame(raf); setInfo(); }
-  function stopPlay(msg) { token++; playing = -1; atEnd = false; tip.style.display = 'none'; box.style.display = 'none'; target = null; cancelAnimationFrame(raf); setInfo(msg); }
+  function stopPlay(msg) {
+    token++; directRun++; playing = -1; atEnd = false; choice = null; bClose.style.display = 'none';
+    if (fullSteps) { steps.length = 0; steps.push(...fullSteps); fullSteps = null; }
+    tip.style.display = 'none'; box.style.display = 'none'; target = null; cancelAnimationFrame(raf); setInfo(msg);
+  }
 
   // chờ đến khi màn hình của bước hiện ra và tìm được đích
   // alt: dấu vân tay của bước kế; nếu màn hình đã ở trạng thái của bước kế thì bỏ qua bước này
@@ -632,7 +641,7 @@
   async function show(i) {
     if (i >= steps.length) return stopPlay(`Xong tour · ${steps.length} bước`);
     playing = i; target = null; advancing = false; box.style.display = 'none';
-    const st = steps[i], nx = steps[i + 1], name = nameOf(st.fp), head = `Bước ${i + 1}/${steps.length}`;
+    const st = steps[i], nx = steps[i + 1], name = st.title || nameOf(st.fp), head = `Bước ${i + 1}/${steps.length}`;
     // bước rê chuột mà đích của bước sau đã hiện sẵn thì không cần rê nữa
     if (st.kind === 'hover' && nx && find(nx.fp).el) return show(i + 1);
     box.style.borderColor = '#e5484d'; box.style.boxShadow = '0 0 0 9999px rgba(0,0,0,.5)';
@@ -727,6 +736,75 @@
     if (first >= 0) show(first); else goStart();
   }
 
+  // ---------- vào thẳng: thư viện tự làm các bước thay người dùng ----------
+  const sleep = ms => new Promise(r => setTimeout(r, ms));
+  const navTo = path => { history.pushState({}, '', path); dispatchEvent(new PopStateEvent('popstate', { state: null })); };
+  const pressEsc = () => document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', keyCode: 27, which: 27, bubbles: true }));
+  // giả lập rê chuột: sự kiện "enter" không nổi bọt nên bắn riêng cho phần tử và vài cấp cha của nó
+  function hoverOn(el) {
+    for (const t of ['pointerover', 'mouseover', 'mousemove']) el.dispatchEvent(new MouseEvent(t, { bubbles: true, cancelable: true, view: window }));
+    for (let p = el, i = 0; p && p !== document.body && i < 4; p = p.parentElement, i++) for (const t of ['pointerenter', 'mouseenter']) p.dispatchEvent(new MouseEvent(t, { bubbles: false, view: window }));
+  }
+  async function direct() {
+    if (recording) stop();
+    if (!steps.length) return setInfo('Chưa có bước nào');
+    const my = ++directRun, alive = () => my === directRun;
+    const n = steps.length, last = steps[n - 1];
+    token++; playing = -1; target = null; atEnd = false; box.style.display = 'none'; cancelAnimationFrame(raf);
+    tip.style.display = 'block'; tip.style.left = '12px'; tip.style.top = '12px';
+    const say = t => { rich(tipText, t); tipMeta.textContent = ''; setBtns(null, 'Dừng'); };
+    say('Đang đưa bạn tới màn hình…');
+    const finish = () => { say('Đã đưa bạn tới nơi.'); setBtns(null, null); setTimeout(() => { if (alive()) stopPlay('Đã tới nơi'); }, 1600); };
+
+    // 1) Bước cuối chuyển sang một trang khác và không mở hộp thoại: vào thẳng trang đó bằng đường dẫn.
+    const after = last.after;
+    if (after && !after.dialog && !after.step && after.path !== last.fp.ctx.path) {
+      if (topDialog()) pressEsc();
+      if (location.pathname !== after.path) navTo(after.path);
+      for (let t = 0; t < 15 && alive() && context().path !== after.path; t++) await sleep(200);
+      if (!alive()) return;
+      if (context().path !== after.path) return location.assign(after.path); // app không tự chuyển: tải thẳng trang đó
+      return finish();
+    }
+
+    // 2) Còn lại: chỉ làm "chặng cuối", tức các bước liền nhau cùng đường dẫn với bước cuối. Các trang trước đó bỏ qua.
+    let first = n - 1;
+    while (first > 0 && steps[first - 1].fp.ctx.path === last.fp.ctx.path) first--;
+    if (steps[first].fp.ctx.dialog) return play(); // chặng cuối bắt đầu trong một hộp thoại: không tới được bằng đường dẫn, quay về dẫn từng bước
+    const c = context();
+    let start = -1;
+    for (let i = first; i < n && start < 0; i++) if (sameCtx(steps[i].fp.ctx, c) && find(steps[i].fp).el) start = i; // đang đứng sẵn giữa chặng
+    if (start < 0) {
+      if (topDialog()) pressEsc();
+      if (location.pathname !== steps[first].fp.ctx.path) navTo(steps[first].fp.ctx.path);
+      start = first;
+    }
+    for (let i = start; i < n; i++) {
+      const st = steps[i];
+      if (st.kind === 'info') continue; // bước chỉ để xem, không có gì phải làm
+      say(`Đang đưa bạn tới màn hình… (${i + 1}/${n})`);
+      const r = await waitFind(st.fp, 6000, steps.slice(i + 1, i + 3).map((x, k) => ({ fp: x.fp, idx: i + 1 + k })));
+      if (!r || !alive()) return;
+      if (r.skipTo != null) { i = r.skipTo - 1; continue; } // bước này đã được làm sẵn
+      if (!r.el || st.kind === 'input') { directRun++; return show(i); } // không tự làm được (không thấy đích, hoặc cần người dùng nhập): dẫn từng bước từ đây
+      if (st.kind === 'hover') hoverOn(r.el);
+      else { r.el.scrollIntoView({ block: 'center', inline: 'nearest' }); r.el.click(); }
+      await sleep(350);
+      if (!alive()) return;
+    }
+    finish();
+  }
+
+  // Bắt đầu một lượt: mode 'guide' (dẫn từng bước, mặc định) hoặc 'direct' (vào thẳng); to = dừng sau bước thứ mấy (mặc định: hết tour).
+  function start(opts = {}) {
+    if (recording) stop();
+    if (!steps.length) return setInfo('Chưa có bước nào');
+    if (fullSteps) { steps.length = 0; steps.push(...fullSteps); fullSteps = null; }
+    const to = Math.min(Math.max(parseInt(opts.to, 10) || steps.length, 1), steps.length);
+    if (to < steps.length) { fullSteps = steps.slice(); steps.length = to; }
+    return opts.mode === 'direct' ? direct() : play();
+  }
+
   // ---------- máy chủ lưu tour (thư mục server/) ----------
   const SERVER = String(window.TOURFP_SERVER || 'http://localhost:8000').replace(/\/$/, '');
   // Chép vào clipboard NGAY trong cú bấm. Nhiều trang (kể cả TCInvest) từ chối quyền ghi clipboard kiểu mới,
@@ -768,20 +846,42 @@
     }
   }
   // tải một tour từ máy chủ theo mã rồi phát
-  async function run(id) {
+  async function run(id, opts = {}) {
     const r = await fetch(`${SERVER}/api/tours/${encodeURIComponent(id)}`);
     if (!r.ok) throw new Error('HTTP ' + r.status);
     const t = await r.json();
-    steps.length = 0; steps.push(...t.steps); setInfo();
-    play();
+    fullSteps = null; steps.length = 0; steps.push(...t.steps); setInfo();
+    start(opts);
+  }
+  // Hỏi trợ lý trên máy chủ "muốn tới màn hình nào", rồi cho người dùng chọn: dẫn từng bước hay vào thẳng.
+  async function ask(query) {
+    let a;
+    try {
+      const r = await fetch(SERVER + '/api/assist', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query, layout: context().layout }) });
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      a = await r.json();
+    } catch (e) {
+      a = { matched: false, reason: 'Không gọi được trợ lý.' };
+    }
+    stopPlay();
+    tip.style.display = 'block'; tip.style.left = '12px'; tip.style.top = '12px'; tipMeta.textContent = '';
+    bClose.style.display = '';
+    if (!a.matched) { rich(tipText, a.reason || 'Chưa tìm thấy tour phù hợp.'); setBtns(null, null); choice = {}; return a; }
+    rich(tipText, `«${a.tour.name}»` + (a.to_step < a.tour.step_count ? ` · tới bước ${a.to_step}/${a.tour.step_count}` : '') + '\n' + a.reason);
+    setBtns(a.options[0].label, a.options[1].label);
+    const go = mode => run(a.tour.id, { mode, to: a.to_step }).catch(() => { rich(tipText, 'Không tải được tour.'); });
+    choice = { guide: () => go('guide'), direct: () => go('direct') };
+    return a;
   }
   bSave.onclick = save;
   if (!PLAYER) probe(); // biết trước nên gửi hay chép, để cú bấm đầu tiên vào nút đã làm đúng việc
   bRec.onclick = () => (recording ? stop() : record());
   bPlay.onclick = play;
-  bClr.onclick = () => { steps.length = 0; stopPlay(); };
-  bNext.onclick = () => { if (atEnd) { atEnd = false; goStart(); } else show(playing + 1); };
-  bStop.onclick = () => stopPlay();
+  bClr.onclick = () => { fullSteps = null; steps.length = 0; stopPlay(); };
+  const pick = k => { const f = choice[k]; choice = null; bClose.style.display = 'none'; if (f) f(); };
+  bNext.onclick = () => { if (choice) pick('guide'); else if (atEnd) { atEnd = false; goStart(); } else show(playing + 1); };
+  bStop.onclick = () => { if (choice) pick('direct'); else stopPlay(); };
+  bClose.onclick = () => stopPlay();
   const L = [['mousemove', onMove], ['pointerdown', onDown], ['mousedown', onUp], ['pointerup', onUp], ['mouseup', onUp], ['click', onClick]];
   for (const [n, h] of L) document.addEventListener(n, h, true);
 
@@ -793,13 +893,13 @@
   }
 
   window.TourFP = {
-    capture, captureAt: el => capture(clickableRoot(el)), isClickable, save, run,
+    capture, captureAt: el => capture(clickableRoot(el)), isClickable, save, run, start, direct, ask,
     showPanel: (on = true) => { panel.style.display = on ? 'flex' : 'none'; }, find, score, context, clickables, record, stop, play, destroy, steps,
     apiStats: () => ({ responses: api.responses, values: api.set.size }),
     isApiValue,
     state: () => ({ recording, playing, steps: steps.length, target: target ? nameOf(capture(target)) : null, tip: tip.style.display === 'block' ? tipText.textContent : '' }),
     export: () => JSON.stringify(steps, null, 2),
-    load: a => { steps.length = 0; steps.push(...a); setInfo(); },
+    load: a => { fullSteps = null; steps.length = 0; steps.push(...a); setInfo(); },
   };
 
   // vừa bị tải lại trang giữa lúc đưa về màn bắt đầu: nạp lại tour và phát tiếp (không điều hướng lần nữa)
@@ -812,7 +912,7 @@
     }
   } catch (_) { /* không đọc được thì bỏ qua */ }
 
-  // mở trang với ?tourfp=<mã>: tải tour đó từ máy chủ và phát luôn
-  const wanted = new URLSearchParams(location.search).get('tourfp');
-  if (wanted && !steps.length) run(wanted).catch(() => setInfo('Không tải được tour ' + wanted));
+  // mở trang với ?tourfp=<mã>[&mode=guide|direct][&to=<bước>]: tải tour đó từ máy chủ và chạy luôn
+  const qs = new URLSearchParams(location.search), wanted = qs.get('tourfp');
+  if (wanted && !steps.length) run(wanted, { mode: qs.get('mode'), to: qs.get('to') }).catch(() => setInfo('Không tải được tour ' + wanted));
 })();