feat: WolfNote capture produces clean professional sysadmin reports

Extracts structured data (tables, stats, text) from the current view
instead of dumping raw HTML. Output is a self-contained styled document
with dark theme, monospace font, section headers, metadata table, and
proper margins constrained to 800px max-width.

Author: Paul C

web/js/app.js

@@ -21279,16 +21279,106 @@ async function wolfnoteFromCurrentView() {
     if (!visible) return;
 
     const pageTitle = document.getElementById('page-title')?.textContent || 'WolfStack';
+    const hostname = document.getElementById('hostname-display')?.textContent || '';
     const timestamp = new Date().toLocaleString();
     const title = `${pageTitle} — ${timestamp}`;
 
-    // Clone the visible content and extract meaningful HTML
-    const clone = visible.cloneNode(true);
-    // Remove scripts, hidden elements, and buttons to clean up
-    clone.querySelectorAll('script, style, .modal-overlay, button, .btn').forEach(el => el.remove());
+    // Extract clean data from the page instead of raw HTML
+    const sections = [];
+
+    // Extract card contents — each .card is a section
+    visible.querySelectorAll('.card').forEach(card => {
+        const header = card.querySelector('.card-header h3, .card-header h4');
+        const heading = header ? header.textContent.trim() : '';
+
+        // Extract tables as clean HTML tables
+        const tables = card.querySelectorAll('table.data-table, table');
+        tables.forEach(tbl => {
+            const rows = [];
+            tbl.querySelectorAll('thead tr').forEach(tr => {
+                const cells = [];
+                tr.querySelectorAll('th').forEach(th => {
+                    const text = th.textContent.trim();
+                    if (text && text !== 'Actions') cells.push(`<th style="padding:8px 12px;text-align:left;border-bottom:2px solid #444;font-weight:600;font-size:13px;">${escapeHtml(text)}</th>`);
+                });
+                if (cells.length) rows.push(`<tr style="background:#2a2a3a;">${cells.join('')}</tr>`);
+            });
+            tbl.querySelectorAll('tbody tr').forEach(tr => {
+                const cells = [];
+                tr.querySelectorAll('td').forEach((td, i) => {
+                    // Skip the last column if it's Actions
+                    const headerRow = tbl.querySelector('thead tr');
+                    const ths = headerRow ? headerRow.querySelectorAll('th') : [];
+                    if (ths[i] && ths[i].textContent.trim() === 'Actions') return;
+                    const text = td.textContent.trim();
+                    cells.push(`<td style="padding:6px 12px;border-bottom:1px solid #333;font-size:13px;">${escapeHtml(text)}</td>`);
+                });
+                if (cells.length) rows.push(`<tr>${cells.join('')}</tr>`);
+            });
+            if (rows.length) {
+                sections.push({ heading, html: `<table style="width:100%;border-collapse:collapse;margin:8px 0 16px 0;">${rows.join('')}</table>` });
+            }
+        });
 
-    // Get the HTML content, wrapped with margins
-    const content = `<div style="margin: 16px 20px;"><h2>${escapeHtml(pageTitle)}</h2><p style="color:#888;font-size:12px;">Captured from WolfStack on ${escapeHtml(timestamp)}</p><hr style="border:none;border-top:1px solid #333;margin:12px 0;">${clone.innerHTML}</div>`;
+        // If no tables, extract key-value pairs and text content
+        if (tables.length === 0) {
+            const body = card.querySelector('.card-body');
+            if (body) {
+                // Look for stat items, grid items, or just text
+                const items = [];
+                body.querySelectorAll('.stat-item, [class*="stat"], [class*="metric"]').forEach(el => {
+                    const label = el.querySelector('.stat-label, [class*="label"]');
+                    const value = el.querySelector('.stat-value, [class*="value"]');
+                    if (label && value) items.push(`<li><strong>${escapeHtml(label.textContent.trim())}</strong>: ${escapeHtml(value.textContent.trim())}</li>`);
+                });
+                if (items.length) {
+                    sections.push({ heading, html: `<ul style="margin:8px 0 16px 0;padding-left:20px;line-height:1.8;">${items.join('')}</ul>` });
+                } else {
+                    // Fallback: extract visible text content
+                    const text = body.innerText.trim();
+                    if (text && text.length > 5) {
+                        sections.push({ heading, html: `<p style="margin:8px 0 16px 0;line-height:1.7;white-space:pre-wrap;">${escapeHtml(text.substring(0, 3000))}</p>` });
+                    }
+                }
+            }
+        }
+    });
+
+    // If no cards found, extract raw text as fallback
+    if (sections.length === 0) {
+        const text = visible.innerText.trim();
+        if (text) sections.push({ heading: '', html: `<p style="line-height:1.7;white-space:pre-wrap;">${escapeHtml(text.substring(0, 5000))}</p>` });
+    }
+
+    // Build a professional sysadmin report document
+    const sectionCount = sections.length;
+    const body = sections.map((s, i) =>
+        (s.heading ? `<h3 style="margin:28px 0 10px 0;font-size:15px;font-weight:600;color:#e2e8f0;letter-spacing:0.3px;text-transform:uppercase;border-left:3px solid #6366f1;padding-left:12px;">${escapeHtml(s.heading)}</h3>` : '') + s.html +
+        (i < sectionCount - 1 ? '<div style="border-bottom:1px solid #1e293b;margin:16px 0;"></div>' : '')
+    ).join('');
+
+    const content = `<div style="max-width:800px;margin:0 auto;padding:36px 44px;font-family:'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#cbd5e1;background:#0f172a;border-radius:12px;line-height:1.6;border:1px solid #1e293b;">
+    <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
+        <div style="width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;">&#128058;</div>
+        <div>
+            <h1 style="margin:0;font-size:20px;font-weight:700;color:#f1f5f9;letter-spacing:-0.3px;">WolfStack &mdash; ${escapeHtml(pageTitle)}</h1>
+            <p style="margin:2px 0 0 0;font-size:12px;color:#64748b;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">Infrastructure Report${hostname ? ' &mdash; ' + escapeHtml(hostname) : ''}</p>
+        </div>
+    </div>
+    <table style="width:100%;border-collapse:collapse;margin:0 0 24px 0;font-size:12px;color:#94a3b8;">
+        <tr>
+            <td style="padding:6px 0;border-bottom:1px solid #1e293b;"><strong style="color:#cbd5e1;">Generated</strong></td>
+            <td style="padding:6px 0;border-bottom:1px solid #1e293b;">${escapeHtml(timestamp)}</td>
+            <td style="padding:6px 0;border-bottom:1px solid #1e293b;"><strong style="color:#cbd5e1;">View</strong></td>
+            <td style="padding:6px 0;border-bottom:1px solid #1e293b;">${escapeHtml(pageTitle)}</td>
+        </tr>
+    </table>
+    ${body}
+    <div style="margin-top:32px;padding-top:16px;border-top:1px solid #1e293b;display:flex;justify-content:space-between;align-items:center;">
+        <span style="font-size:11px;color:#475569;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">This report was auto-generated by WolfStack. Data reflects the state at the time of capture.</span>
+        <span style="font-size:11px;color:#6366f1;font-weight:600;">wolfstack.org</span>
+    </div>
+</div>`;
 
     try {
         const resp = await fetch('/api/wolfnote/notes', {