feat(tutorial): add serial tab gate to hello_verify step

The hello_verify step now requires the user to switch to the Serial
terminal tab before proceeding. This guides users to the correct
panel where they can observe the injection output.

- Add gate function checking tabBtnRaw has 'active' class
- Add gate_hello_verify / gate_hello_verify_ok i18n keys (en, zh-CN, zh-TW)
- Update tests: replace 'no gate' assertion with gate enabled/passed tests

Author: FASTSHIFT

Tools/WebServer/static/js/features/tutorial.js

@@ -77,6 +77,12 @@ const TUTORIAL_STEPS = [
     id: 'hello_verify',
     sidebar: null,
     highlight: '#panelContainer',
+    gate: () => {
+      const rawBtn = document.getElementById('tabBtnRaw');
+      return rawBtn && rawBtn.classList.contains('active');
+    },
+    gateHint: 'tutorial.gate_hello_verify',
+    gateOk: 'tutorial.gate_hello_verify_ok',
   },
   {
     id: 'hello_unpatch',

Tools/WebServer/static/js/locales/en.js

@@ -519,6 +519,10 @@ window.i18nResources['en'] = {
       gate_hello_inject: '⏳ Please select a slot and click the inject button.',
       gate_hello_inject_ok: '✅ Injection successful!',
 
+      gate_hello_verify:
+        '⏳ Please switch to the Serial terminal tab to continue.',
+      gate_hello_verify_ok: '✅ Serial terminal active!',
+
       hello_verify_title: 'Verify Injection',
       hello_verify_desc:
         'Send the hello command in the serial terminal to verify the injection effect.',

Tools/WebServer/static/js/locales/zh-CN.js

@@ -475,6 +475,9 @@ window.i18nResources['zh-CN'] = {
       gate_hello_inject: '⏳ 请选择槽位后点击「注入」按钮。',
       gate_hello_inject_ok: '✅ 注入成功！',
 
+      gate_hello_verify: '⏳ 请切换到「串口」终端标签页。',
+      gate_hello_verify_ok: '✅ 已切换到串口终端！',
+
       hello_verify_title: '验证注入效果',
       hello_verify_desc: '在串口终端发送 hello 命令，验证注入是否生效。',
       hello_verify_send_cmd: '发送命令',

Tools/WebServer/static/js/locales/zh-TW.js

@@ -477,6 +477,9 @@ window.i18nResources['zh-TW'] = {
       gate_hello_inject: '⏳ 請選擇槽位後點擊「注入」按鈕。',
       gate_hello_inject_ok: '✅ 注入成功！',
 
+      gate_hello_verify: '⏳ 請切換到「串口」終端標籤頁。',
+      gate_hello_verify_ok: '✅ 已切換到串口終端！',
+
       hello_verify_title: '驗證注入效果',
       hello_verify_desc: '在串口終端傳送 hello 命令，驗證注入是否生效。',
       hello_verify_send_cmd: '傳送命令',

Tools/WebServer/tests/js/test_tutorial.js

@@ -666,10 +666,26 @@ module.exports = function (w) {
       assertEqual(count, 2);
     });
 
-    it('hello_verify step has no gate (next button enabled)', () => {
+    it('hello_verify step has gate requiring serial tab', () => {
       resetMocks();
       clearTutorialStorage();
       setupTutorialDOM();
+      // tabBtnRaw exists but is NOT active
+      const rawBtn = createMockElement('tabBtnRaw');
+      mockElements['tabBtnRaw'] = rawBtn;
+      w.startTutorial();
+      w.tutorialGoTo(10); // hello_verify
+      const nextBtn = getElement('tutorialNextBtn');
+      assertTrue(nextBtn.disabled);
+    });
+
+    it('hello_verify gate passes when serial tab is active', () => {
+      resetMocks();
+      clearTutorialStorage();
+      setupTutorialDOM();
+      const rawBtn = createMockElement('tabBtnRaw');
+      rawBtn.classList.add('active');
+      mockElements['tabBtnRaw'] = rawBtn;
       w.startTutorial();
       w.tutorialGoTo(10); // hello_verify
       const nextBtn = getElement('tutorialNextBtn');