Monster Lab floating panel + page detection, Beast recommendation

- Monster Lab page detected via ss=ml
- Floating draggable panel replaces inline UI (was messing layout)
- Feed All + Happy Pills All buttons
- Class recommendation for first monster
- Drag-to-move via header grab

scripts/hv-unified.user.js

@@ -269,6 +269,7 @@ function detectPage() {
         'ss=rf': 'reforge',
         'ss=sf': 'soulfuse',
         'ss=ab': 'abilities',
+        'ss=ml': 'monster',
         'ss=it': 'invitems',
         'ss=se': 'settings',
         'ss=ss': 'spiritshop',
@@ -1805,38 +1806,101 @@ function enhanceTraining() {
     if (ta) ta.insertBefore(d, ta.firstChild);
 }
 
-// ── Monster Lab: feed all ──
+// ── Monster Lab: floating info panel + feed buttons ──
+
+let _mlDragOffset = { x: 0, y: 0 };
 
 function enhanceMonsterLab() {
+    // Create floating draggable panel
+    if (document.getElementById('hv-monster')) return;
+
+    const panel = document.createElement('div');
+    panel.id = 'hv-monster';
+    panel.style.cssText = css({
+        position: 'fixed',
+        top: '80px',
+        right: '4px',
+        zIndex: '9999',
+        background: '#111827',
+        color: '#d1d5db',
+        padding: '8px 10px',
+        borderRadius: '8px',
+        fontSize: '10px',
+        fontFamily: 'monospace',
+        maxWidth: '320px',
+        boxShadow: '0 0 15px rgba(0,0,0,0.6)',
+        border: '1px solid #374151',
+        cursor: 'move',
+        userSelect: 'none',
+    });
+
+    const body = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;cursor:move" id="hv-monster-header">
+        <b style="color:#fdcb00;font-size:11px">🧬 Monster Lab</b>
+        <span id="hv-monster-toggle" style="color:#888;font-size:14px;cursor:pointer">−</span>
+    </div>
+    <div id="hv-monster-body">
+        <div style="margin-bottom:6px;display:flex;gap:4px">
+            <input type="button" value="🍖 Feed All" style="padding:4px 10px;cursor:pointer;background:#2a5a2a;color:#fff;border:none;border-radius:3px;font-size:11px" id="hv-feed-all">
+            <input type="button" value="💊 Happy Pills All" style="padding:4px 10px;cursor:pointer;background:#5a3a2a;color:#fff;border:none;border-radius:3px;font-size:11px" id="hv-pill-all">
+        </div>
+        <div style="color:#9ca3af;font-size:9px;border-top:1px solid #374151;padding-top:4px">
+        New to ML? Pick a <b style="color:#fdcb00">Beast-class</b> (Dog/Cow/Pig) for STR/END crystals.<br>
+        <span style="color:#888">Click + drag header to move.</span>
+        </div>
+    </div>`;
+
+    panel.innerHTML = body;
+    document.body.appendChild(panel);
+
+    // ── Feed All ──
+    panel.querySelector('#hv-feed-all').onclick = () => {
         const m = document.getElementById('mainpane');
-    if (!m || document.getElementById('hv-lab-enhance')) return;
+        if (m) $$('input[value="Feed"]', m).forEach(b => b.click());
+    };
 
-    const r = document.createElement('div');
+    // ── Happy Pills All ──
-    r.id = 'hv-lab-enhance';
+    panel.querySelector('#hv-pill-all').onclick = () => {
-    r.style.cssText = 'margin:8px;padding:8px;display:flex;gap:8px';
+        const m = document.getElementById('mainpane');
-
+        if (m) {
-    const f = document.createElement('input');
-    f.type = 'button';
-    f.value = '🍖 Feed All';
-    f.style.cssText = 'padding:4px 10px;cursor:pointer;background:#2a5a2a;color:#fff;border:none;border-radius:3px;font-size:11px';
-    f.onclick = () => { $$('input[value="Feed"]', m).forEach(b => b.click()); };
-
-    const p = document.createElement('input');
-    p.type = 'button';
-    p.value = '💊 Happy Pills All';
-    p.style.cssText = 'padding:4px 10px;cursor:pointer;background:#5a3a2a;color:#fff;border:none;border-radius:3px;font-size:11px';
-    p.onclick = () => {
             const pills = $$('option', m).filter(o => (o.textContent || '').includes('Happy Pill'));
             if (pills.length > 0) {
                 pills[0].selected = true;
                 $$('input[value="Feed"]', m).forEach(b => b.click());
             }
+        }
     };
 
-    r.appendChild(f);
+    // ── Toggle ──
-    r.appendChild(p);
+    panel.querySelector('#hv-monster-toggle').onclick = () => {
-    const ta = m.querySelector('div');
+        const body = panel.querySelector('#hv-monster-body');
-    if (ta) ta.insertBefore(r, ta.firstChild);
+        const isHidden = body.style.display === 'none';
+        body.style.display = isHidden ? 'block' : 'none';
+        panel.querySelector('#hv-monster-toggle').textContent = isHidden ? '−' : '+';
+    };
+
+    // ── Make draggable ──
+    const header = panel.querySelector('#hv-monster-header');
+    if (header) {
+        header.addEventListener('mousedown', (e) => {
+            _mlDragOffset.x = e.clientX - panel.getBoundingClientRect().left;
+            _mlDragOffset.y = e.clientY - panel.getBoundingClientRect().top;
+            const onMove = (ev) => {
+                panel.style.left = (ev.clientX - _mlDragOffset.x) + 'px';
+                panel.style.right = 'auto';
+                panel.style.top = (ev.clientY - _mlDragOffset.y) + 'px';
+            };
+            const onUp = () => {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+    }
+
+    // Remove the old inline bar if it exists
+    const oldBar = document.getElementById('hv-lab-enhance');
+    if (oldBar) oldBar.remove();
 }
 
 // ── Config button (bottom-right) ──
@@ -2803,6 +2867,7 @@ function init() {
         if (STATE.page === 'character') showGuidancePanel();
         if (STATE.page === 'armory') enhanceArmory();
         if (STATE.page === 'abilities') enhanceAbilities();
+        if (STATE.page === 'monster') enhanceMonsterLab();
     }
 
     // Dawn initialization

scripts/latest.user.js

@@ -269,6 +269,7 @@ function detectPage() {
         'ss=rf': 'reforge',
         'ss=sf': 'soulfuse',
         'ss=ab': 'abilities',
+        'ss=ml': 'monster',
         'ss=it': 'invitems',
         'ss=se': 'settings',
         'ss=ss': 'spiritshop',
@@ -1805,38 +1806,101 @@ function enhanceTraining() {
     if (ta) ta.insertBefore(d, ta.firstChild);
 }
 
-// ── Monster Lab: feed all ──
+// ── Monster Lab: floating info panel + feed buttons ──
+
+let _mlDragOffset = { x: 0, y: 0 };
 
 function enhanceMonsterLab() {
+    // Create floating draggable panel
+    if (document.getElementById('hv-monster')) return;
+
+    const panel = document.createElement('div');
+    panel.id = 'hv-monster';
+    panel.style.cssText = css({
+        position: 'fixed',
+        top: '80px',
+        right: '4px',
+        zIndex: '9999',
+        background: '#111827',
+        color: '#d1d5db',
+        padding: '8px 10px',
+        borderRadius: '8px',
+        fontSize: '10px',
+        fontFamily: 'monospace',
+        maxWidth: '320px',
+        boxShadow: '0 0 15px rgba(0,0,0,0.6)',
+        border: '1px solid #374151',
+        cursor: 'move',
+        userSelect: 'none',
+    });
+
+    const body = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;cursor:move" id="hv-monster-header">
+        <b style="color:#fdcb00;font-size:11px">🧬 Monster Lab</b>
+        <span id="hv-monster-toggle" style="color:#888;font-size:14px;cursor:pointer">−</span>
+    </div>
+    <div id="hv-monster-body">
+        <div style="margin-bottom:6px;display:flex;gap:4px">
+            <input type="button" value="🍖 Feed All" style="padding:4px 10px;cursor:pointer;background:#2a5a2a;color:#fff;border:none;border-radius:3px;font-size:11px" id="hv-feed-all">
+            <input type="button" value="💊 Happy Pills All" style="padding:4px 10px;cursor:pointer;background:#5a3a2a;color:#fff;border:none;border-radius:3px;font-size:11px" id="hv-pill-all">
+        </div>
+        <div style="color:#9ca3af;font-size:9px;border-top:1px solid #374151;padding-top:4px">
+        New to ML? Pick a <b style="color:#fdcb00">Beast-class</b> (Dog/Cow/Pig) for STR/END crystals.<br>
+        <span style="color:#888">Click + drag header to move.</span>
+        </div>
+    </div>`;
+
+    panel.innerHTML = body;
+    document.body.appendChild(panel);
+
+    // ── Feed All ──
+    panel.querySelector('#hv-feed-all').onclick = () => {
         const m = document.getElementById('mainpane');
-    if (!m || document.getElementById('hv-lab-enhance')) return;
+        if (m) $$('input[value="Feed"]', m).forEach(b => b.click());
+    };
 
-    const r = document.createElement('div');
+    // ── Happy Pills All ──
-    r.id = 'hv-lab-enhance';
+    panel.querySelector('#hv-pill-all').onclick = () => {
-    r.style.cssText = 'margin:8px;padding:8px;display:flex;gap:8px';
+        const m = document.getElementById('mainpane');
-
+        if (m) {
-    const f = document.createElement('input');
-    f.type = 'button';
-    f.value = '🍖 Feed All';
-    f.style.cssText = 'padding:4px 10px;cursor:pointer;background:#2a5a2a;color:#fff;border:none;border-radius:3px;font-size:11px';
-    f.onclick = () => { $$('input[value="Feed"]', m).forEach(b => b.click()); };
-
-    const p = document.createElement('input');
-    p.type = 'button';
-    p.value = '💊 Happy Pills All';
-    p.style.cssText = 'padding:4px 10px;cursor:pointer;background:#5a3a2a;color:#fff;border:none;border-radius:3px;font-size:11px';
-    p.onclick = () => {
             const pills = $$('option', m).filter(o => (o.textContent || '').includes('Happy Pill'));
             if (pills.length > 0) {
                 pills[0].selected = true;
                 $$('input[value="Feed"]', m).forEach(b => b.click());
             }
+        }
     };
 
-    r.appendChild(f);
+    // ── Toggle ──
-    r.appendChild(p);
+    panel.querySelector('#hv-monster-toggle').onclick = () => {
-    const ta = m.querySelector('div');
+        const body = panel.querySelector('#hv-monster-body');
-    if (ta) ta.insertBefore(r, ta.firstChild);
+        const isHidden = body.style.display === 'none';
+        body.style.display = isHidden ? 'block' : 'none';
+        panel.querySelector('#hv-monster-toggle').textContent = isHidden ? '−' : '+';
+    };
+
+    // ── Make draggable ──
+    const header = panel.querySelector('#hv-monster-header');
+    if (header) {
+        header.addEventListener('mousedown', (e) => {
+            _mlDragOffset.x = e.clientX - panel.getBoundingClientRect().left;
+            _mlDragOffset.y = e.clientY - panel.getBoundingClientRect().top;
+            const onMove = (ev) => {
+                panel.style.left = (ev.clientX - _mlDragOffset.x) + 'px';
+                panel.style.right = 'auto';
+                panel.style.top = (ev.clientY - _mlDragOffset.y) + 'px';
+            };
+            const onUp = () => {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+    }
+
+    // Remove the old inline bar if it exists
+    const oldBar = document.getElementById('hv-lab-enhance');
+    if (oldBar) oldBar.remove();
 }
 
 // ── Config button (bottom-right) ──
@@ -2803,6 +2867,7 @@ function init() {
         if (STATE.page === 'character') showGuidancePanel();
         if (STATE.page === 'armory') enhanceArmory();
         if (STATE.page === 'abilities') enhanceAbilities();
+        if (STATE.page === 'monster') enhanceMonsterLab();
     }
 
     // Dawn initialization

src/init.js

@@ -26,6 +26,7 @@ function init() {
         if (STATE.page === 'character') showGuidancePanel();
         if (STATE.page === 'armory') enhanceArmory();
         if (STATE.page === 'abilities') enhanceAbilities();
+        if (STATE.page === 'monster') enhanceMonsterLab();
     }
 
     // Dawn initialization

src/out-of-battle.js

@@ -228,38 +228,101 @@ function enhanceTraining() {
     if (ta) ta.insertBefore(d, ta.firstChild);
 }
 
-// ── Monster Lab: feed all ──
+// ── Monster Lab: floating info panel + feed buttons ──
+
+let _mlDragOffset = { x: 0, y: 0 };
 
 function enhanceMonsterLab() {
+    // Create floating draggable panel
+    if (document.getElementById('hv-monster')) return;
+
+    const panel = document.createElement('div');
+    panel.id = 'hv-monster';
+    panel.style.cssText = css({
+        position: 'fixed',
+        top: '80px',
+        right: '4px',
+        zIndex: '9999',
+        background: '#111827',
+        color: '#d1d5db',
+        padding: '8px 10px',
+        borderRadius: '8px',
+        fontSize: '10px',
+        fontFamily: 'monospace',
+        maxWidth: '320px',
+        boxShadow: '0 0 15px rgba(0,0,0,0.6)',
+        border: '1px solid #374151',
+        cursor: 'move',
+        userSelect: 'none',
+    });
+
+    const body = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;cursor:move" id="hv-monster-header">
+        <b style="color:#fdcb00;font-size:11px">🧬 Monster Lab</b>
+        <span id="hv-monster-toggle" style="color:#888;font-size:14px;cursor:pointer">−</span>
+    </div>
+    <div id="hv-monster-body">
+        <div style="margin-bottom:6px;display:flex;gap:4px">
+            <input type="button" value="🍖 Feed All" style="padding:4px 10px;cursor:pointer;background:#2a5a2a;color:#fff;border:none;border-radius:3px;font-size:11px" id="hv-feed-all">
+            <input type="button" value="💊 Happy Pills All" style="padding:4px 10px;cursor:pointer;background:#5a3a2a;color:#fff;border:none;border-radius:3px;font-size:11px" id="hv-pill-all">
+        </div>
+        <div style="color:#9ca3af;font-size:9px;border-top:1px solid #374151;padding-top:4px">
+        New to ML? Pick a <b style="color:#fdcb00">Beast-class</b> (Dog/Cow/Pig) for STR/END crystals.<br>
+        <span style="color:#888">Click + drag header to move.</span>
+        </div>
+    </div>`;
+
+    panel.innerHTML = body;
+    document.body.appendChild(panel);
+
+    // ── Feed All ──
+    panel.querySelector('#hv-feed-all').onclick = () => {
         const m = document.getElementById('mainpane');
-    if (!m || document.getElementById('hv-lab-enhance')) return;
+        if (m) $$('input[value="Feed"]', m).forEach(b => b.click());
+    };
 
-    const r = document.createElement('div');
+    // ── Happy Pills All ──
-    r.id = 'hv-lab-enhance';
+    panel.querySelector('#hv-pill-all').onclick = () => {
-    r.style.cssText = 'margin:8px;padding:8px;display:flex;gap:8px';
+        const m = document.getElementById('mainpane');
-
+        if (m) {
-    const f = document.createElement('input');
-    f.type = 'button';
-    f.value = '🍖 Feed All';
-    f.style.cssText = 'padding:4px 10px;cursor:pointer;background:#2a5a2a;color:#fff;border:none;border-radius:3px;font-size:11px';
-    f.onclick = () => { $$('input[value="Feed"]', m).forEach(b => b.click()); };
-
-    const p = document.createElement('input');
-    p.type = 'button';
-    p.value = '💊 Happy Pills All';
-    p.style.cssText = 'padding:4px 10px;cursor:pointer;background:#5a3a2a;color:#fff;border:none;border-radius:3px;font-size:11px';
-    p.onclick = () => {
             const pills = $$('option', m).filter(o => (o.textContent || '').includes('Happy Pill'));
             if (pills.length > 0) {
                 pills[0].selected = true;
                 $$('input[value="Feed"]', m).forEach(b => b.click());
             }
+        }
     };
 
-    r.appendChild(f);
+    // ── Toggle ──
-    r.appendChild(p);
+    panel.querySelector('#hv-monster-toggle').onclick = () => {
-    const ta = m.querySelector('div');
+        const body = panel.querySelector('#hv-monster-body');
-    if (ta) ta.insertBefore(r, ta.firstChild);
+        const isHidden = body.style.display === 'none';
+        body.style.display = isHidden ? 'block' : 'none';
+        panel.querySelector('#hv-monster-toggle').textContent = isHidden ? '−' : '+';
+    };
+
+    // ── Make draggable ──
+    const header = panel.querySelector('#hv-monster-header');
+    if (header) {
+        header.addEventListener('mousedown', (e) => {
+            _mlDragOffset.x = e.clientX - panel.getBoundingClientRect().left;
+            _mlDragOffset.y = e.clientY - panel.getBoundingClientRect().top;
+            const onMove = (ev) => {
+                panel.style.left = (ev.clientX - _mlDragOffset.x) + 'px';
+                panel.style.right = 'auto';
+                panel.style.top = (ev.clientY - _mlDragOffset.y) + 'px';
+            };
+            const onUp = () => {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+    }
+
+    // Remove the old inline bar if it exists
+    const oldBar = document.getElementById('hv-lab-enhance');
+    if (oldBar) oldBar.remove();
 }
 
 // ── Config button (bottom-right) ──

src/page-detector.js

@@ -33,6 +33,7 @@ function detectPage() {
         'ss=rf': 'reforge',
         'ss=sf': 'soulfuse',
         'ss=ab': 'abilities',
+        'ss=ml': 'monster',
         'ss=it': 'invitems',
         'ss=se': 'settings',
         'ss=ss': 'spiritshop',