From 7fe1e5e0b3fa91028e7492714cc333287f17ce95 Mon Sep 17 00:00:00 2001
From: cbb <2625274797@qq.com>
Date: Sun, 18 Oct 2026 19:43:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(monitor):=20=E5=A4=B1=E8=B4=A5=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E5=81=9A=E9=86=92=E7=9B=AE=E2=80=94=E2=80=94=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8=E7=BA=A2=E8=89=B2=E6=A8=AA=E5=B9=85=EF=BC=88=E9=98=B6?=
 =?UTF-8?q?=E6=AE=B5=E5=90=8D=20+=20=E8=BF=94=E5=9B=9E=E7=A0=81=20+=20?=
 =?UTF-8?q?=E7=BB=88=E7=AB=AF=E9=87=8C=E6=9C=80=E5=90=8E=E4=B8=80=E8=A1=8C?=
 =?UTF-8?q?=E7=9C=9F=E5=AE=9E=E6=8A=A5=E9=94=99=EF=BC=8C=E5=A6=82=20OutOfM?=
 =?UTF-8?q?emory=20=E9=82=A3=E6=9D=A1=EF=BC=89+=20=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E8=A7=92=E8=83=B6=E5=9B=8A=E5=8F=98=E7=BA=A2=E3=80=8C=E5=A4=B1?=
 =?UTF-8?q?=E8=B4=A5=20=C2=B7=20=E5=81=9C=E5=9C=A8=E3=80=8C=E9=A2=84?=
 =?UTF-8?q?=E8=AE=AD=E7=BB=83=E3=80=8D=E8=BF=94=E5=9B=9E=E7=A0=81=201?=
 =?UTF-8?q?=E3=80=8D+=20=E6=AD=A5=E9=AA=A4=E6=9D=A1=E9=82=A3=E4=B8=80?=
 =?UTF-8?q?=E6=A0=BC=E7=BA=A2=E5=AD=97=E5=8A=A0=E7=B2=97=EF=BC=9B=E5=B9=B6?=
 =?UTF-8?q?=E8=A1=A5=E4=B8=89=E5=B1=82"=E6=B0=B8=E4=B8=8D=E7=A9=BA?=
 =?UTF-8?q?=E7=99=BD"=E4=BF=9D=E9=99=A9=EF=BC=9A=E6=AD=A3=E6=96=87?=
 =?UTF-8?q?=E8=84=9A=E6=9C=AC=E5=89=8D=E8=A3=85=E7=9C=8B=E9=97=A8=E7=8B=97?=
 =?UTF-8?q?=EF=BC=883=20=E7=A7=92=E6=B2=A1=E8=B7=91=E5=AE=8C=E5=B0=B1?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA"=E5=8D=A1=E7=89=87=E7=A9=BA=E7=99=BD?=
 =?UTF-8?q?=E4=B8=8D=E6=98=AF=E8=AE=AD=E7=BB=83=E5=87=BA=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?"=EF=BC=89=E3=80=81window.onerror=20=E6=98=BE=E7=A4=BA=E5=87=BA?=
 =?UTF-8?q?=E9=94=99=E6=96=87=E4=BB=B6=E4=B8=8E=E8=A1=8C=E5=8F=B7=E3=80=81?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E8=B0=83=E7=94=A8=20try/catch=20=E8=AE=A9?=
 =?UTF-8?q?=E5=8D=95=E4=B8=AA=E9=9D=A2=E6=9D=BF=E5=87=BA=E9=94=99=E4=B8=8D?=
 =?UTF-8?q?=E6=8B=96=E5=9E=AE=E6=95=B4=E9=A1=B5=EF=BC=9B=E5=90=8C=E6=97=B6?=
 =?UTF-8?q?=E4=BF=AE=E6=8E=89=E6=88=91=E4=B8=8A=E4=B8=80=E8=BD=AE=E5=86=99?=
 =?UTF-8?q?=E5=9D=8F=E7=9A=84=20JS=20=E5=AD=97=E7=AC=A6=E4=B8=B2=EF=BC=88P?=
 =?UTF-8?q?ython=20=E8=BD=AC=E4=B9=89=E6=8A=8A=20\n=20=E5=86=99=E6=88=90?=
 =?UTF-8?q?=E7=9C=9F=E5=AE=9E=E6=8D=A2=E8=A1=8C=20=E2=86=92=20=E6=95=B4?=
 =?UTF-8?q?=E4=B8=AA=E8=84=9A=E6=9C=AC=E4=B8=8D=E6=89=A7=E8=A1=8C=20?=
 =?UTF-8?q?=E2=86=92=20=E9=A1=B5=E9=9D=A2=E5=85=A8=E7=A9=BA=EF=BC=8C?=
 =?UTF-8?q?=E5=B0=B1=E6=98=AF=E7=94=A8=E6=88=B7=E7=9C=8B=E5=88=B0=E7=9A=84?=
 =?UTF-8?q?"=E5=A4=B1=E8=B4=A5=E6=97=B6=E4=BB=80=E4=B9=88=E9=83=BD?=
 =?UTF-8?q?=E4=B8=8D=E6=98=BE=E7=A4=BA"=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ml/monitor.html | 44 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/ml/monitor.html b/ml/monitor.html
index 9a4e757..f3bc05a 100644
--- a/ml/monitor.html
+++ b/ml/monitor.html
@@ -56,6 +56,14 @@
   .step.done .ic { background: #34d39922; border-color: var(--ok); color: var(--ok); }
   .step.active .ic { background: #5aa9ff22; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px #5aa9ff1f; }
   .step.fail .ic { background: #f8717122; border-color: var(--bad); color: var(--bad); }
+  .step.fail .ds { color: var(--bad); font-weight: 650; font-size: 12px; }
+  .alert { border-radius: 12px; padding: 13px 16px; margin: 2px 0 0; border: 1px solid; }
+  .alert.bad { background: linear-gradient(180deg,#7f1d1d66,#450a0a55); border-color: #f8717199; box-shadow: 0 0 0 1px #f8717122, 0 8px 26px #00000066; }
+  .alert.warn { background: #78350f55; border-color: #fbbf2488; }
+  .alert .alerth { font-size: 17px; font-weight: 700; color: #ffe3e3; letter-spacing: .2px; }
+  .alert.warn .alerth { color: #ffeccd; }
+  .alert .alerterr { font: 500 12.5px/1.5 var(--mono); color: #ffb4b4; margin-top: 7px; word-break: break-all; }
+  .alert .alerttip { font-size: 12.5px; color: #f0d9d9cc; margin-top: 7px; }
   .step .nm { font-size: 12.5px; color: var(--text); white-space: nowrap; } .step .ds { font-size: 11px; color: var(--dim2); white-space: nowrap; }
   .step .ds.big { font-size: 14px; font-weight: 650; color: var(--accent); }
   .step.pending .nm { color: var(--dim); }
@@ -171,6 +179,7 @@
 </header>
 
 <main>
+  <div id="alert"></div>
   <section class="card"><h2><span>流水线</span><span class="r" id="stepnote"></span></h2><div class="steps" id="steps"></div></section>
 
   <section class="hero">
@@ -211,6 +220,27 @@
   <div class="acts"><button id="fCancel">取消</button><button id="fGo" class="primary">▶ 开始</button></div>
 </div></div>
 
+<script>
+/* 兜底：正文脚本一旦有语法错误或抛异常，整页会空白（2026-10-18 真踩过：一行字符串写断 → 页面什么都不显示）。
+   这段在正文之前跑，负责"坏也坏得看得见"：看门狗 + 全局错误显示。 */
+window.__boot = { ok: false };
+function __pageFail(msg) {
+  const m = document.querySelector('main') || document.body;
+  let d = document.getElementById('pagefail');
+  if (!d) {
+    d = document.createElement('div'); d.id = 'pagefail';
+    d.style.cssText = 'margin:10px 24px 0;padding:14px 16px;border-radius:12px;background:#7f1d1dcc;border:1px solid #f87171;' +
+                      'color:#ffe3e3;font:600 15px/1.6 system-ui;position:sticky;top:8px;z-index:99;box-shadow:0 8px 26px #00000088';
+    m.prepend(d);
+  }
+  d.textContent = msg;
+}
+window.addEventListener('error', e => __pageFail('页面脚本出错：' + (e.message || '未知错误') +
+  '（' + (e.filename || '').split('/').pop() + ':' + (e.lineno || '?') + '）— 面板可能不完整，但训练本身没受影响；按 F12 看 Console'));
+setTimeout(() => { if (!window.__boot.ok) __pageFail('页面脚本没有启动（多半是 ml/monitor.html 有语法错误）：卡片空白不是训练出问题。' +
+  'F12 → Console 看第一条报错，或把该文件回滚到上一个提交。'); }, 3000);
+</script>
+
 <script>
 'use strict';
 /* =====================================================================
@@ -488,8 +518,13 @@ async function poll() {
     if (DEMO) { setPill('demo', '示例数据'); if (!$('demobar')) $('pipe').closest('.hero').insertAdjacentHTML('beforebegin', `<div class="demobar" id="demobar">这是示例数据，不是你的训练。${location.protocol === 'file:' ? '直接双击 monitor.html 只能看示例；' : ''}看真实训练请双击 ml/console.bat（或 python -m ml.monitor --open）。</div>`); }
     else if (busy) setPill('live', `运行中 · ${P && P.current ? SM[P.current]?.n || P.current : '启动中'}`);
     else if (cur && Date.now() / 1000 - lastMtime < 120) setPill('live', `运行中 · ${ago(lastMtime)}更新`);
+    else if (P && P.plan && P.plan.some(k => P.stages[k] && P.stages[k].rc != null && P.stages[k].rc !== 0)) {
+      const k = P.plan.find(k => P.stages[k] && P.stages[k].rc != null && P.stages[k].rc !== 0), rc = P.stages[k].rc, nm = SM[k]?.n || k;
+      setPill(rc === -15 || rc === 143 ? 'stale' : 'dead', `${rc === -15 || rc === 143 ? '已停止' : '失败'} · 停在「${nm}」返回码 ${rc}`);
+    }
     else setPill('', '空闲');
-    renderStatus(lastStatus); renderPipe(lastStatus); renderJob();
+    try { renderStatus(lastStatus); renderPipe(lastStatus); renderJob(); }
+    catch (e) { __pageFail('渲染面板出错：' + e.message + ' —— 其余面板可能不更新；训练本身不受影响'); }
     await pollConsole();
   } catch (err) {
     setPill('dead', '连不上控制台（双击 ml/console.bat 或 python -m ml.monitor）'); console.error(err);
@@ -636,6 +671,12 @@ function renderPipe(s) {
     : allDone ? `<div class="now">状态<b class="ok">全部完成</b>共 ${plan.length} 步</div>`
     : failed ? `<div class="now">状态<b class="bad">停在「${SM[failed]?.n || failed}」</b>${(P.stages[failed].info || {}).timed_out || P.stages[failed].rc === 124 ? '超过时间上限，判定卡死' : P.stages[failed].rc === -15 || P.stages[failed].rc === 143 ? '已停止' : '失败，看终端输出'}</div>`
     : `<div class="now">状态<b>未在运行</b>已完成 ${doneN} / ${plan.length} 步</div>`;
+  const esc2 = x => String(x).replace(/&/g, '&amp;').replace(/</g, '&lt;');
+  const fr = failed && P.stages[failed], stopped = !!fr && (fr.rc === -15 || fr.rc === 143);
+  const timedOut = !!fr && ((fr.info || {}).timed_out || fr.rc === 124);
+  const why = !fr ? '' : stopped ? '已手动停止 —— 点「继续训练」从停下的地方接着跑' : timedOut ? '超过时间上限，判定卡死' : `失败（返回码 ${fr.rc}）`;
+  const lastErr = (() => { const t = $('term'); if (!t) return ''; const ls = (t.innerText || '').split(/\r?\n/).filter(x => /Error|error:|Traceback|不通过|失败|超过时间上限/.test(x)); return ls.length ? ls[ls.length - 1].slice(0, 300) : ''; })();
+  $('alert').innerHTML = failed ? `<div class="alert ${stopped ? 'warn' : 'bad'}"><div class="alerth">✕ 停在「${SM[failed]?.n || failed}」 · ${why}</div>${lastErr ? `<div class="alerterr">${esc2(lastErr)}</div>` : ''}<div class="alerttip">完整报错见下方「终端输出」；修好后点「继续训练」，已完成的步骤会自动跳过${stopped ? '、从停下的那一步接着跑' : ''}</div></div>` : '';
   $('pipe').innerHTML = `<h2><span>全流程</span><span class="r">${doneN} / ${plan.length} 步完成</span></h2>
     <div class="overall">${head}<div class="bigpct">${(100 * frac).toFixed(1)}<small>%</small></div></div>
     <div class="bar ${cur ? '' : 'idle'}"><div class="fill" style="width:${100 * frac}%"></div></div>
@@ -828,6 +869,7 @@ function demoApi() {
   fn.scenario = setup;
   return fn;
 }
+window.__boot.ok = true;      // 正文脚本跑到了最后一行，看门狗不用再报"脚本没启动"
 </script>
 </body>
 </html>