ui: embed reanimator chart viewer

web/static/css/style.css

@@ -17,6 +17,18 @@ header {
     padding: 1rem 2rem;
 }
 
+.app-header-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem 2rem;
+    flex-wrap: wrap;
+}
+
+.app-header-brand {
+    min-width: 0;
+}
+
 header h1 {
     font-size: 1.5rem;
     font-weight: 600;
@@ -33,9 +45,34 @@ header p {
     opacity: 0.7;
 }
 
+.header-log-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.header-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.header-actions button {
+    border: none;
+    border-radius: 6px;
+    padding: 0.55rem 0.9rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
 main {
-    max-width: 1400px;
-    margin: 2rem auto;
+    width: 100%;
+    max-width: none;
+    margin: 1rem 0 2rem;
     padding: 0 1rem;
 }
 
@@ -109,6 +146,10 @@ main {
     color: #2c3e50;
 }
 
+#data-section {
+    margin: 0 -1rem;
+}
+
 .api-form-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
@@ -437,18 +478,6 @@ main {
 }
 
 /* File Info */
-.file-info {
-    background: #fff;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 1rem 1.5rem;
-    margin-bottom: 1.5rem;
-    display: flex;
-    gap: 2rem;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
 .parser-badge, .file-name {
     display: flex;
     align-items: center;
@@ -476,6 +505,28 @@ main {
     border-color: #81c784;
 }
 
+.result-panel {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    margin-bottom: 0;
+}
+
+.audit-viewer-shell {
+    min-height: 60vh;
+    margin: 0;
+}
+
+.audit-viewer-frame {
+    width: 100%;
+    min-height: 60vh;
+    border: none;
+    border-radius: 0;
+    background: #fff;
+    display: block;
+}
+
 /* Tabs */
 .tabs {
     display: flex;

web/static/js/app.js

@@ -5,8 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
     initApiSource();
     initUpload();
     initConvertMode();
-    initTabs();
-    initFilters();
+    initAuditViewer();
     loadParsersInfo();
     loadSupportedFileTypes();
 });
@@ -27,6 +26,30 @@ let isAutoUpdatingApiPort = false;
 let apiProbeResult = null;
 let apiPowerDecisionTimer = null;
 
+function initAuditViewer() {
+    const frame = document.getElementById('audit-viewer-frame');
+    if (!frame) {
+        return;
+    }
+
+    frame.addEventListener('load', () => {
+        resizeAuditViewerFrame();
+        try {
+            const win = frame.contentWindow;
+            if (win) {
+                win.setTimeout(resizeAuditViewerFrame, 50);
+                win.setTimeout(resizeAuditViewerFrame, 250);
+            }
+        } catch (err) {
+            console.error('Failed to schedule viewer resize:', err);
+        }
+    });
+
+    window.addEventListener('resize', () => {
+        resizeAuditViewerFrame();
+    });
+}
+
 function initSourceType() {
     const sourceButtons = document.querySelectorAll('.source-switch-btn');
     sourceButtons.forEach(button => {
@@ -1191,6 +1214,7 @@ let allSerials = [];
 let allParseErrors = [];
 
 let currentVendor = '';
+let auditViewerNonce = 0;
 
 // Load data from API
 async function loadData(vendor, filename) {
@@ -1198,16 +1222,9 @@ async function loadData(vendor, filename) {
     document.getElementById('upload-section').classList.add('hidden');
     document.getElementById('data-section').classList.remove('hidden');
     document.getElementById('clear-btn').classList.remove('hidden');
-
-    // Update parser name and filename
-    const parserName = document.getElementById('parser-name');
-    const fileNameElem = document.getElementById('file-name');
-    if (parserName && currentVendor) {
-        parserName.textContent = currentVendor;
-    }
-    if (fileNameElem && filename) {
-        fileNameElem.textContent = filename;
-    }
+    document.getElementById('header-raw-btn').classList.remove('hidden');
+    document.getElementById('header-reanimator-btn').classList.remove('hidden');
+    document.getElementById('header-log-meta').classList.remove('hidden');
 
     // Update vendor badge if exists (legacy support)
     const vendorBadge = document.getElementById('vendor-badge');
@@ -1216,14 +1233,40 @@ async function loadData(vendor, filename) {
         vendorBadge.classList.remove('hidden');
     }
 
-    await Promise.all([
-        loadConfig(),
-        loadFirmware(),
-        loadSensors(),
-        loadSerials(),
-        loadEvents(),
-        loadParseErrors()
-    ]);
+    loadAuditViewer();
+}
+
+function loadAuditViewer() {
+    const frame = document.getElementById('audit-viewer-frame');
+    if (!frame) {
+        return;
+    }
+    auditViewerNonce += 1;
+    frame.style.height = '60vh';
+    frame.src = `/chart/current?ts=${auditViewerNonce}`;
+}
+
+function resizeAuditViewerFrame() {
+    const frame = document.getElementById('audit-viewer-frame');
+    if (!frame) {
+        return;
+    }
+
+    try {
+        const doc = frame.contentDocument || (frame.contentWindow && frame.contentWindow.document);
+        if (!doc || !doc.documentElement || !doc.body) {
+            return;
+        }
+
+        const nextHeight = Math.max(
+            doc.documentElement.scrollHeight,
+            doc.body.scrollHeight,
+            640
+        );
+        frame.style.height = `${nextHeight}px`;
+    } catch (err) {
+        console.error('Failed to resize audit viewer frame:', err);
+    }
 }
 
 async function loadConfig() {
@@ -1936,11 +1979,19 @@ async function clearData() {
         document.getElementById('upload-section').classList.remove('hidden');
         document.getElementById('data-section').classList.add('hidden');
         document.getElementById('clear-btn').classList.add('hidden');
+        document.getElementById('header-raw-btn').classList.add('hidden');
+        document.getElementById('header-reanimator-btn').classList.add('hidden');
+        document.getElementById('header-log-meta').classList.add('hidden');
         document.getElementById('upload-status').textContent = '';
         allSensors = [];
         allEvents = [];
         allSerials = [];
         allParseErrors = [];
+        currentVendor = '';
+        const frame = document.getElementById('audit-viewer-frame');
+        if (frame) {
+            frame.src = 'about:blank';
+        }
     } catch (err) {
         console.error('Failed to clear data:', err);
     }