Grotti 3.5.0: Pagination, Logging, Deb-Paket, Makro-Doku, PLA-Match-Fix.

web/static/grotti.css

@@ -2510,21 +2510,22 @@ article.machine.flash { animation: flash 2s var(--ease); }
 .lib-info > summary { list-style: none; }
 .lib-info > summary::-webkit-details-marker { display: none; }
 .lib-info-pop {
-  position: absolute;
-  right: 0;
-  top: calc(100% + 0.25rem);
-  z-index: 20;
+  position: fixed;
+  z-index: 80;
   min-width: 11rem;
+  max-width: min(18rem, calc(100vw - 1rem));
   padding: 0.55rem 0.7rem;
   border-radius: 10px;
   border: 1px solid var(--line-strong);
-  background: #121217;
+  background: var(--card-2);
   box-shadow: var(--shadow);
   font-size: var(--t-xs);
-  color: var(--muted);
-  display: grid;
+  color: var(--ink);
+  display: none;
   gap: 0.2rem;
+  line-height: 1.35;
 }
+.lib-info[open] > .lib-info-pop { display: grid; }
 .picked-details { opacity: 0.9; }
 
 .flow-step { padding: 0.9rem 0 0.95rem; border-top: 1px solid var(--line); }
@@ -3644,8 +3645,29 @@ dialog::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
   margin-right: 0.35rem;
 }
 
+.pager {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  margin: 0.75rem 0 0;
+  padding: 0.35rem 0;
+}
+.pager[hidden] { display: none !important; }
+.pager-info {
+  font-size: 0.85rem;
+  color: var(--muted);
+  min-width: 7rem;
+  text-align: center;
+}
+.pager button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 @media print {
-  .sidebar, .mobile-nav, .conn-banner, .toast-host, .nav-toggle { display: none !important; }
+  .sidebar, .mobile-nav, .conn-banner, .toast-host, .nav-toggle, .pager { display: none !important; }
   .app-shell { display: block; }
   .app-main { margin: 0; }
   body { background: #fff; color: #111; }

web/static/ui.js

@@ -333,3 +333,47 @@ window.setConnectionBanner = setConnectionBanner;
 window.createPoller = createPoller;
 window.promptAbraeumen = promptAbraeumen;
 window.VERDICT_REASON_LABELS = VERDICT_REASON_LABELS;
+
+/** Listen-Pagination (clientseitig auf gefiltertem Array). */
+const DEFAULT_PAGE_SIZE = 40;
+
+function pageSlice(items, page, pageSize) {
+  const list = Array.isArray(items) ? items : [];
+  const size = Math.max(1, Number(pageSize) || DEFAULT_PAGE_SIZE);
+  const total = list.length;
+  const pages = Math.max(1, Math.ceil(total / size) || 1);
+  let p = Math.max(1, parseInt(page, 10) || 1);
+  if (p > pages) p = pages;
+  const start = (p - 1) * size;
+  return {
+    items: list.slice(start, start + size),
+    page: p,
+    pages,
+    total,
+    pageSize: size,
+    from: total ? start + 1 : 0,
+    to: Math.min(start + size, total),
+  };
+}
+
+function renderPager(el, state, onPage) {
+  if (!el) return;
+  const s = state || pageSlice([], 1);
+  if (s.total <= s.pageSize) {
+    el.hidden = true;
+    el.innerHTML = "";
+    return;
+  }
+  el.hidden = false;
+  el.className = "pager";
+  el.innerHTML =
+    '<button type="button" class="ghost pager-prev" ' + (s.page <= 1 ? "disabled" : "") + ">Zurück</button>" +
+    '<span class="pager-info">' + s.from + "–" + s.to + " von " + s.total + "</span>" +
+    '<button type="button" class="ghost pager-next" ' + (s.page >= s.pages ? "disabled" : "") + ">Weiter</button>";
+  el.querySelector(".pager-prev").onclick = () => onPage(s.page - 1);
+  el.querySelector(".pager-next").onclick = () => onPage(s.page + 1);
+}
+
+window.DEFAULT_PAGE_SIZE = DEFAULT_PAGE_SIZE;
+window.pageSlice = pageSlice;
+window.renderPager = renderPager;