added a scrollbox for each app logs

vscode-appdaemon/media/logExplorer.css

@@ -12,3 +12,4 @@
 .last-log{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 summary{display:grid;grid-template-columns:auto minmax(0,1fr) repeat(3,max-content);align-items:center;column-gap:10px;row-gap:5px}
 summary .last-log{grid-column:1/-1;min-width:0}
+.rows{max-height:min(45vh,420px);overflow-y:auto;scrollbar-gutter:stable;overflow-anchor:none}

vscode-appdaemon/media/logExplorer.js

@@ -16,6 +16,7 @@
     let entries = [], latest, appliedMessage, displayZone = 'Europe/Berlin', paused = false, selected = saved.selected, mode = saved.mode || 'graph', origin = saved.origin || saved.selected;
     const expanded = new Set(saved.expanded || []);
     const visibleEventGroups = new Map();
+    const logScrollPositions = new Map();
     const recentEvents = new Set();
     const recentApps = new Set();
     const appFlashTokens = new Map();
@@ -138,6 +139,16 @@
         });
     }
     function renderApps() {
+        const appList = $('apps').parentElement;
+        const appListTop = appList.scrollTop;
+        document.querySelectorAll('#apps details[data-app]').forEach(detail => {
+            const rows = detail.querySelector('.rows');
+            if (!rows) return;
+            logScrollPositions.set(detail.dataset.app, {
+                top: rows.scrollTop,
+                follow: rows.scrollHeight - rows.clientHeight - rows.scrollTop <= 24
+            });
+        });
         visibleEventGroups.clear();
         const container = $('apps'); container.replaceChildren();
         const groups = new Map();
@@ -195,15 +206,23 @@
                     ? (entries.find(e => e.app === app && e.initialization_id === unit.id && e.kind === 'initialization_started') || unit.entries[0]).time
                     : unit.entries[0].time;
                 units.sort((a, b) => startTime(a) - startTime(b));
+                if (units.length > 150) rows.append(node('div', `${units.length - 150} older rows/groups: narrow the time range or search.`, 'more'));
                 units.slice(-150).forEach(unit => {
                     appendEventRows(rows, unit.entries, unit.id ? `initialization:${unit.id}` : undefined);
                 });
-                if (units.length > 150) rows.append(node('div', `${units.length - 150} older rows/groups: narrow the time range or search.`, 'more'));
                 detail.append(rows);
+                const position = logScrollPositions.get(app);
+                rows.scrollTop = !position || position.follow ? rows.scrollHeight : position.top;
             }
-            detail.addEventListener('toggle', event => { if (event.target !== detail) return; detail.open ? expanded.add(app) : expanded.delete(app); save(); fill(); });
-            fill(); container.append(detail);
+            detail.addEventListener('toggle', event => {
+                if (event.target !== detail) return;
+                if (detail.open) expanded.add(app);
+                else { expanded.delete(app); logScrollPositions.delete(app); }
+                save(); fill();
+            });
+            container.append(detail); fill();
         });
+        appList.scrollTop = appListTop;
     }
     function renderDetail() {
         $('graph-mode').setAttribute('aria-pressed', String(mode === 'graph'));