ui: embed reanimator chart viewer

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);
     }