Give the Monitor tab the help panel the Scheduler already had

Plugin/unraid/pages/monitor.php

@@ -86,7 +86,12 @@
 // ═══════════════════════════════════════════════════════════════════════════════════════════════
 require_once dirname(__DIR__) . '/include/monitor.php';
 require_once dirname(__DIR__) . '/include/ai_chat.php';
+require_once dirname(__DIR__) . '/include/docs.php';
 if (vv_ai_ui_on()) vv_ai_chat_assets();
+
+// Live values for the `$VAR` markers in pages/readme/monitor-readme.md. Same arrangement the
+// Scheduler tab uses: the doc names a conf variable and the reader sees this host's value.
+$_vv_doc_vars = array_merge(vv_conf_vars(), ['SCRIPTS_DIR' => SCRIPTS_DIR]);
 ?>
 <style>
 @keyframes vvRsPulse {
@@ -348,6 +353,33 @@ if (vv_ai_ui_on()) vv_ai_chat_assets();
 
 </div>
 
+<!-- ── How to read this page ────────────────────────────────────────────────────
+     Rendered from pages/readme/monitor-readme.md, not maintained here. That file is also what
+     the AI tab retrieves, so the panel you read and the answer the assistant gives are the same
+     text and cannot drift.
+
+     Below the grid and collapsed by default: this page is watched, not read, and help that
+     pushed the cards down would be in the way every time you opened the tab for the reason you
+     usually open it. Two views of one file — the brief list is one line per card, "More info"
+     swaps in the full document for the parts that need explaining. -->
+<div class="vv-sug-block" data-save-key="monitor-howto" style="margin-top:12px;">
+  <div class="vv-sug-header" onclick="vvMonToggleHelp(this)">
+    <span class="vv-sug-chevron">▸</span>
+    <span class="vv-sug-title">How to read this page</span>
+    <button class="vv-more-btn" id="vv-mon-howto-more" type="button"
+            onclick="event.stopPropagation(); vvMonToggleMore(this)">More info</button>
+  </div>
+  <div class="vv-sug-body vv-info-body" style="display:none">
+    <ul class="vv-info-cols" id="vv-mon-howto-brief">
+      <?= vv_docs_brief('Plugin/unraid/pages/readme/monitor-readme.md', $_vv_doc_vars,
+                        fn($h) => is_string($h) && str_starts_with($h, 'Reference —')) ?>
+    </ul>
+    <div class="vv-doc" id="vv-mon-howto-full" style="display:none">
+      <?= vv_docs_render('Plugin/unraid/pages/readme/monitor-readme.md', $_vv_doc_vars) ?>
+    </div>
+  </div>
+</div>
+
 <script>
 // ── Shared helpers ────────────────────────────────────────────────────────────
 
@@ -2601,6 +2633,42 @@ document.addEventListener('click', () => {
 // Removed rather than left as an unreachable handler for the platform's three most destructive
 // operations. The endpoint stays; see its header for why it is kept unwired.
 
+// ── Help panel ───────────────────────────────────────────────────────────────
+// Collapse state and depth are both remembered. Which one you want is a preference, not a
+// per-visit decision — and on a page you leave open, re-collapsing help you deliberately opened
+// would be its own small annoyance.
+function vvMonToggleHelp(header) {
+  const body    = header.nextElementSibling;
+  const chevron = header.querySelector('.vv-sug-chevron');
+  const open    = body.style.display !== 'none';
+  body.style.display  = open ? 'none' : '';
+  chevron.textContent = open ? '▸' : '▾';
+  localStorage.setItem('vv-sug-monitor-howto', open ? '0' : '1');
+}
+
+function vvMonToggleMore(btn) {
+  const brief = document.getElementById('vv-mon-howto-brief');
+  const full  = document.getElementById('vv-mon-howto-full');
+  if (!brief || !full) return;
+  const showFull = full.style.display === 'none';
+  full.style.display  = showFull ? '' : 'none';
+  brief.style.display = showFull ? 'none' : '';
+  btn.textContent     = showFull ? 'Less' : 'More info';
+  btn.classList.toggle('vv-more-on', showFull);
+  localStorage.setItem('vv-mon-howto-more', showFull ? '1' : '0');
+}
+
+(function vvMonRestoreHelp() {
+  if (localStorage.getItem('vv-sug-monitor-howto') === '1') {
+    const h = document.querySelector('[data-save-key="monitor-howto"] .vv-sug-header');
+    if (h) vvMonToggleHelp(h);
+  }
+  if (localStorage.getItem('vv-mon-howto-more') === '1') {
+    const b = document.getElementById('vv-mon-howto-more');
+    if (b) vvMonToggleMore(b);
+  }
+})();
+
 // ── AI row ───────────────────────────────────────────────────────────────────
 // Constructed only when the row rendered. The card markup is behind vv_ai_ui_on(), so on any
 // other host these ids do not exist and the factories are never called — the row is absent