reviewzy 0.1.0 → 0.3.0

package/src/dashboard/static/dashboard.css

@@ -2,170 +2,232 @@
    reviewzy — dashboard page styles
    ============================================================ */
 
-/* ---- Page shell (navbar shell per cloudy-ui) ---- */
+/* The one override that retunes the column: the navbar's card and inner
+   column, the page width and this shell all read it. */
+:root { --page-w: 1400px; }
+
+/* ---- Page shell (navbar shell) ---- */
 .app-shell { min-height: 100vh; display: flex; flex-direction: column; }
-.main { padding: var(--space-10) var(--space-12); max-width: 1400px; margin: 0 auto; width: 100%; }
+.main { padding: var(--space-10) var(--space-8); max-width: var(--page-w); margin: 0 auto; width: 100%; }
 
-/* ---- Page header: the eyebrow / title / lede triplet ---- */
-.page-header { margin-bottom: var(--space-8); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
-.page-eyebrow { color: var(--accent); margin-bottom: var(--space-2); }
-.page-title { font: 550 var(--text-2xl)/1.15 var(--font-sans); color: var(--text); letter-spacing: -0.02em; margin-bottom: var(--space-3); }
-.page-lede { font-size: var(--text-base); color: var(--text-dim); max-width: 540px; }
+/* ---- Page header: the eyebrow / title / lede triplet (login/editor pages) ---- */
+.page-eyebrow { color: var(--accent-text); margin-bottom: var(--space-2); }
+.page-lede { font-size: var(--t-3); color: var(--text-3); max-width: 540px; }
 
 /* ---- Filter form ---- */
-.filters { display: grid; grid-template-columns: minmax(0, 2fr) 200px 200px auto; gap: var(--space-3); align-items: end; margin-bottom: var(--space-8); }
+.filters { display: grid; grid-template-columns: minmax(0, 2fr) 200px 200px; gap: var(--space-3); align-items: end; margin-bottom: var(--space-8); }
 @media (max-width: 768px) { .filters { grid-template-columns: 1fr; } }
 
 /* ---- Entries region ---- */
 /* The loading strip is hidden until htmx marks the request in flight (hx-indicator adds the
    .htmx-request class); it sits beside the swap target, so a swap never removes it. */
-#entries-loading { display: none; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); padding: var(--space-2) 0; }
+#entries-loading { display: none; align-items: center; gap: var(--space-2); font-size: var(--t-2); color: var(--text-3); padding: var(--space-2) 0; }
 #entries-loading.htmx-request { display: flex; }
-/* The spinner reuses the @keyframes spin components.css ships for .btn-loading. */
-.spinner {
-  width: 12px; height: 12px;
-  border: 2px solid var(--line-strong);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-  flex-shrink: 0;
-}
 
 /* ---- Partial state ---- */
 .partial-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
-.partial-count { font-size: var(--text-sm); color: var(--text-dim); }
+.partial-count { font-size: var(--t-2); color: var(--text-3); }
 
 /* ---- Project groups ---- */
 .project-group { margin-bottom: var(--space-10); }
 .project-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
-.project-name { font: 500 var(--text-lg)/1.2 var(--font-mono); color: var(--text); letter-spacing: -0.01em; }
+.project-name { font: 500 var(--t-5)/1.2 var(--font-mono); color: var(--text); letter-spacing: -0.01em; }
 .batch { margin-bottom: var(--space-6); }
 .batch-header { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
-.batch-id { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--text-faint); }
+.batch-meta { font: 400 var(--t-2)/1 var(--font-sans); color: var(--text-4); }
 
 /* ---- Entry table cells ----
-   Paths, anchors, and constraint summaries are machine data, so they set the mono face;
-   long values ellipsize in place and keep the full value in the title attribute. */
-.cell-file { max-width: 380px; }
-.cell-anchor { max-width: 320px; }
-.cell-text { max-width: 560px; }
-.file-path, .anchor-text {
-  display: block;
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  line-height: 1.4;
-  color: var(--text-muted);
+   The table lays out fixed with a colgroup so the title column takes the remainder and the row
+   never overflows; select, status, file, and actions are the fixed columns. The status pill has
+   its own column, so the title truncates at one consistent point and the pill stays tight. */
+.col-select { width: 48px; }
+.col-status { width: 106px; }
+.col-file { width: 200px; }
+.col-actions { width: 120px; }
+.entry-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.entry-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  font: 400 var(--t-3)/1.4 var(--font-sans);
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.entry-text {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+.entry-filer {
+  flex-shrink: 0;
+  font-size: var(--t-2);
+  color: var(--text-4);
+  white-space: nowrap;
+}
+.cell-file {
+  font-family: var(--font-mono);
+  font-size: var(--t-2);
+  color: var(--text-4);
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
-.cell-filedby { color: var(--text-dim); white-space: nowrap; }
-.constraint-summary { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; }
 
 /* ---- Row actions and batch approve ----
    A control mid-request ignores further activations: htmx marks the requesting element with
    .htmx-request while the request is in flight, and pointer-events drops the duplicate click a
    double-click would otherwise fire. */
 .htmx-request { pointer-events: none; }
-.cell-select { width: 44px; }
-.cell-select input[type="checkbox"] { accent-color: var(--accent); }
-.cell-actions { white-space: nowrap; }
-.cell-actions .btn + .btn { margin-left: var(--space-2); }
-.batch-bar { display: flex; align-items: center; margin-bottom: var(--space-4); }
+.cell-actions { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1); }
+.table-wrap tbody td.cell-actions { padding-left: var(--space-1); padding-right: var(--space-1); }
+.batch-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--space-4);
+  /* Sticks just below the navbar so the approve button stays reachable while rows scroll
+     under it; the background and z-index stop table rows from showing through the bar. */
+  position: sticky;
+  top: var(--navbar-h);
+  z-index: 10;
+  padding: var(--space-2) 0;
+  background: var(--bg);
+}
+.batch-header .checkbox-label { align-self: center; }
+/* ---- Collapsible project sections and batches ----
+   The chevron points down expanded and turns when collapsed; the state is applied by dashboard.js
+   from localStorage, so the server ships everything open and the viewer's choice re-applies. */
+.collapse-toggle { align-self: center; }
+.collapse-toggle svg { transition: transform var(--dur-tint) var(--ease); }
+.collapse-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+.project-header .collapse-toggle, .batch-header .collapse-toggle { margin-left: auto; }
 .notice-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
 
-/* ---- Diff view: the anchored snippet vs the entry's text, mono on sunken, anchor line distinct ---- */
+/* ---- Diff view: the anchored snippet vs the entry's text, mono on the well, anchor distinct ---- */
 .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-8); }
 @media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr; } }
 .diff-code {
-  font: 400 var(--text-sm)/1.6 var(--font-mono);
-  background: var(--bg-sunken);
+  font: 400 var(--t-2)/1.6 var(--font-mono);
+  background: var(--well);
   border: 1px solid var(--line);
-  border-radius: var(--radius);
+  border-radius: var(--r-1);
   padding: var(--space-4);
   white-space: pre-wrap;
   word-break: break-word;
-  color: var(--text-muted);
+  color: var(--text-2);
   margin: 0;
 }
 .diff-line { display: block; }
 .diff-anchor {
-  background: var(--accent-soft);
+  background: var(--accent-quiet);
   border-left: 2px solid var(--accent);
   color: var(--text);
   padding-left: var(--space-2);
 }
 
-/* ---- Empty states ---- */
-.empty-state { text-align: center; padding: var(--space-12) var(--space-6); }
-.empty-icon { margin: 0 auto var(--space-4); width: 32px; height: 32px; color: var(--text-faint); display: flex; align-items: center; justify-content: center; }
-.empty-state h3 { font: 500 var(--text-lg)/1.3 var(--font-sans); color: var(--text); margin-bottom: var(--space-2); }
-.empty-state p { font-size: var(--text-sm); color: var(--text-dim); max-width: 420px; margin: 0 auto var(--space-4); }
+/* ---- Empty state actions: the shipped .empty-state lays out one button, this row holds two ---- */
+.empty-actions { display: flex; gap: var(--space-2); justify-content: center; }
 
 /* ---- Error box (cloned from #error-box by dashboard.js) ---- */
 .callout-content { min-width: 0; }
 .callout-actions { margin-top: var(--space-2); }
 
 /* ---- Entry editor ---- */
-/* The one live region: present in the DOM, absent from layout, and never focusable. */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-.editor-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
+/* The one live region, kept out of sight by the shipped .sr-only utility. */
+.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
 .editor-main { min-width: 0; }
 .editor-rail { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: var(--space-8); }
 @media (max-width: 900px) {
   .editor-grid { grid-template-columns: 1fr; }
   .editor-rail { position: static; }
 }
+/* The editor's title card header: the title falls back to the anchor text, which can be one long
+   unbroken string, so it wraps inside the card instead of overflowing or shoving the status pill. */
+.editor-title { min-width: 0; overflow-wrap: anywhere; }
+/* The entry text ships verbatim, often carrying markdown backticks and significant whitespace;
+   mono gives every glyph, space included, one full cell so both stay countable while editing. */
+#editor-text { font-family: var(--font-mono); }
+
+/* ---- Editor prev/next rails ----
+   One full-height fixed strip per side, below the navbar, so the previous and next entries are
+   a single click away while reading. The strip sits inside the page's inline padding, clear of content. */
+.editor-nav-btn {
+  position: fixed;
+  top: var(--navbar-h);
+  bottom: 0;
+  width: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-3);
+  text-decoration: none;
+  z-index: 40;
+  transition: background var(--dur-tint) var(--ease), color var(--dur-tint) var(--ease);
+}
+.editor-nav-prev { left: 0; }
+.editor-nav-next { right: 0; }
+.editor-nav-btn:hover { background: var(--surface-2); color: var(--text); }
+.editor-nav-btn.is-disabled { color: var(--text-4); opacity: 0.4; pointer-events: none; }
+.editor-nav-btn svg { width: 18px; height: 18px; }
+@media (max-width: 900px) { .editor-nav { display: none; } }
 #editor-region > .callout { margin-bottom: var(--space-4); }
 #editor-region > .btn { margin-top: var(--space-4); }
 .editor-actions { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
 /* The in-flight indicator for an approve or reject from the editor: htmx's own rules fade it in. */
-.editor-actions .htmx-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
+.editor-actions .htmx-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--t-2); color: var(--text-3); }
+
+/* The notes card: the agent's row reuses the constraint row shape; the human's textarea and its
+   save button sit below it. */
+.notes-field { margin-top: var(--space-2); }
+.notes-actions { margin-top: var(--space-2); display: flex; justify-content: flex-end; }
 
 /* Constraint panel: live count and placeholder checklist; the server owns the refusal. */
 .constraint-row { display: flex; gap: var(--space-3); padding: 6px 0; }
 .constraint-row + .constraint-row { border-top: 1px solid var(--line); }
-.constraint-label { flex-shrink: 0; font: 450 11px/1.4 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); width: 96px; padding-top: 2px; }
-.constraint-value { min-width: 0; color: var(--text-muted); font-size: var(--text-sm); }
-.char-count { color: var(--text-muted); font-size: var(--text-sm); }
+.constraint-label { flex-shrink: 0; font: 500 11px/1.4 var(--font-sans); letter-spacing: var(--caps); text-transform: uppercase; color: var(--text-3); width: 96px; padding-top: 2px; }
+.constraint-value { min-width: 0; color: var(--text-2); font-size: var(--t-2); }
+.char-count { color: var(--text-2); font-size: var(--t-2); }
 .char-count.over { color: var(--danger); }
 .placeholder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
 .placeholder-item { display: flex; align-items: center; gap: var(--space-2); }
-.placeholder-state { font-size: var(--text-xs); color: var(--text-dim); min-width: 52px; }
+.placeholder-state { font-size: var(--t-2); color: var(--text-3); min-width: 52px; }
 .placeholder-state.is-present { color: var(--success); }
-.placeholder-token { font: 400 var(--text-sm)/1 var(--font-mono); color: var(--text); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 6px; }
+
+/* The context card's secondary block: the provenance rows (hash, filer, stale note) collapsed
+   behind a summary, so the anchor and the agent-supplied context rows lead the card. */
+.context-secondary { margin-top: var(--space-3); }
+.context-secondary summary { cursor: pointer; font-size: var(--t-2); color: var(--text-3); }
+.context-secondary .info-table { margin-top: var(--space-2); }
+
+/* Repo row link: the brand icon beside the shortened owner/repo path, linking out to the host. */
+.repo-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
+.repo-link:hover { color: var(--accent-text); }
+.repo-icon { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; opacity: var(--icon-dim); }
+.placeholder-token { font: 400 var(--t-2)/1 var(--font-mono); color: var(--text); background: var(--well); border: 1px solid var(--line); border-radius: var(--r-1); padding: 2px 6px; }
+
+/* Entry images: one image per row at the card's width, a remove form below each, and the
+   one-file upload form closing the card. The file input flexes to whatever width remains. */
+.image-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
+.entry-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-1); }
+.image-skip { margin: 0; font-size: var(--t-2); color: var(--text-3); }
+.image-remove { margin-top: var(--space-1); }
+.image-upload { display: flex; gap: var(--space-2); align-items: center; }
+.image-upload .input { flex: 1; min-width: 0; }
 
 /* Revision history: newest first; the text clamps like the list's entry text. */
-.history-empty { font-size: var(--text-sm); color: var(--text-faint); padding: var(--space-2) 0; }
+.history-empty { font-size: var(--t-2); color: var(--text-4); padding: var(--space-2) 0; }
 .revision-list { list-style: none; margin: 0; padding: 0; }
 .revision { padding: var(--space-3) 0; }
 .revision + .revision { border-top: 1px solid var(--line); }
 .revision-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
-.revision-time { font-size: var(--text-xs); color: var(--text-faint); }
+.revision-time { font-size: var(--t-2); color: var(--text-4); }
 .revision-head .btn { margin-left: auto; }
 .revision-text {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-size: var(--text-sm);
-  color: var(--text-muted);
+  font-size: var(--t-2);
+  color: var(--text-2);
 }
 
 /* ---- Login page: the navbar shell, then one centered card ---- */

package/src/dashboard/static/dashboard.js

@@ -1,35 +1,11 @@
-// reviewzy dashboard behaviors. Load after htmx.min.js.
+// reviewzy dashboard behaviors. Loads as a module after htmx.min.js.
+// The navbar's ink, its dock state and the table header label boxes come from ui.js;
+// initTables is re-run after every htmx swap so a freshly rendered table head gets its boxes.
+import { initTables } from "./ui.js";
+
 (() => {
   "use strict";
 
-  // --- Navbar ink (cloudy-ui navbar component) ---
-  // Positions the sliding underline under the active link; re-positions on resize without animating.
-  const navbarNav = document.getElementById("navbar-nav");
-  const navbarInk = document.getElementById("navbar-ink");
-
-  function positionNavbarInk() {
-    if (!navbarNav || !navbarInk) return;
-    const active = navbarNav.querySelector(".navbar-link.active");
-    if (!active) {
-      navbarInk.style.opacity = "0";
-      return;
-    }
-    const navRect = navbarNav.getBoundingClientRect();
-    const linkRect = active.getBoundingClientRect();
-    navbarInk.style.left = `${linkRect.left - navRect.left}px`;
-    navbarInk.style.width = `${linkRect.width}px`;
-    navbarInk.style.opacity = "1";
-  }
-
-  window.addEventListener("resize", () => {
-    navbarInk.style.transition = "none";
-    positionNavbarInk();
-    requestAnimationFrame(() => {
-      navbarInk.style.transition = "";
-    });
-  });
-  requestAnimationFrame(positionNavbarInk);
-
   // --- Filter errors ---
   // A failed filter request (HTTP error or network error) replaces the list with the error box
   // from the page's #error-box template; the retry button re-submits the filter form.
@@ -60,6 +36,34 @@
     form.addEventListener("htmx:sendError", showFilterError);
   }
 
+  // --- Filter auto-submit ---
+  // The Apply button is gone: changing a select or typing in the search fires the filter request
+  // itself. requestSubmit() reaches htmx's submit listener on the form; the debounce collapses a
+  // burst of keystrokes into one request. Only the change and input events below trigger a submit,
+  // and both fire on user action alone, so a programmatic value reset (which sets .value directly
+  // and emits no event) never re-fires.
+  function submitFilters() {
+    const target = document.getElementById("filters");
+    if (target && typeof target.requestSubmit === "function") {
+      target.requestSubmit();
+    }
+  }
+
+  let searchTimer;
+  function scheduleSearchSubmit() {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(submitFilters, 300);
+  }
+
+  if (form) {
+    const statusSelect = document.getElementById("status");
+    const projectSelect = document.getElementById("project");
+    const searchInput = document.getElementById("q");
+    statusSelect?.addEventListener("change", submitFilters);
+    projectSelect?.addEventListener("change", submitFilters);
+    searchInput?.addEventListener("input", scheduleSearchSubmit);
+  }
+
   // --- Style guide save errors ---
   // A failed save (HTTP error or network error) puts the error box from the page's
   // #style-guide-error-box template above the form; the retry button re-submits the save form.
@@ -166,4 +170,118 @@
     refreshEditorMetrics();
     textarea.focus();
   });
+
+  // --- Batch select-all and live selection count ---
+  // The list region is swapped wholesale on every filter and action round, so no listener bound to
+  // a checkbox or the button survives a swap: change events are delegated on document, and one pass
+  // after each swap recomputes the select-all states and the approve button's count. All of it is
+  // progressive enhancement — without JS the approve button keeps its static label, stays enabled,
+  // and the native form still submits the checked rows.
+  const DRAFT_SELECTOR = 'input[type="checkbox"][name="id"]';
+  const SELECT_ALL_SELECTOR = 'input[type="checkbox"].select-all';
+
+  function selectionCount() {
+    return document.querySelectorAll(`#batch-form ${DRAFT_SELECTOR}:checked`).length;
+  }
+
+  function updateApproveButton() {
+    const button = document.querySelector('#batch-form .batch-bar button[type="submit"]');
+    if (!button) return;
+    const count = selectionCount();
+    button.textContent = count === 0 ? "Approve selected" : `Approve ${count}`;
+    button.disabled = count === 0;
+  }
+
+  function updateSelectAll(selectAll) {
+    const batch = selectAll.closest(".batch");
+    if (!batch) return;
+    const drafts = batch.querySelectorAll(DRAFT_SELECTOR);
+    const checked = batch.querySelectorAll(`${DRAFT_SELECTOR}:checked`).length;
+    selectAll.checked = drafts.length > 0 && checked === drafts.length;
+    selectAll.indeterminate = checked > 0 && checked < drafts.length;
+  }
+
+  function refreshSelection() {
+    for (const selectAll of document.querySelectorAll(SELECT_ALL_SELECTOR)) {
+      updateSelectAll(selectAll);
+    }
+    updateApproveButton();
+  }
+
+  document.addEventListener("change", (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    if (!target) return;
+    if (target.matches(SELECT_ALL_SELECTOR)) {
+      const batch = target.closest(".batch");
+      if (batch) {
+        for (const draft of batch.querySelectorAll(DRAFT_SELECTOR)) {
+          draft.checked = target.checked;
+        }
+      }
+    }
+    refreshSelection();
+  });
+
+  document.addEventListener("htmx:afterSwap", refreshSelection);
+
+  // --- Collapsible project sections and batches ---
+  // The server renders every section and batch open; JS collapses the ones this viewer collapsed
+  // before, from localStorage, and persists each toggle. Re-applied after every swap because a
+  // filter or action round replaces the whole list region. Without JS the toggles stay inert and
+  // everything stays open.
+  const COLLAPSE_STORAGE = "reviewzy.list-collapsed";
+
+  function readCollapsed() {
+    try {
+      const raw = localStorage.getItem(COLLAPSE_STORAGE);
+      const parsed = raw ? JSON.parse(raw) : {};
+      // A parsed array is not a key map: property sets on it would survive only until the next
+      // JSON.stringify, which drops them, so persistence would silently stop.
+      return typeof parsed === "object" && parsed !== null && !Array.isArray(parsed) ? parsed : {};
+    } catch {
+      return {};
+    }
+  }
+
+  function persistCollapsed(key, collapsed) {
+    const map = readCollapsed();
+    if (collapsed) {
+      map[key] = true;
+    } else {
+      delete map[key];
+    }
+    try {
+      localStorage.setItem(COLLAPSE_STORAGE, JSON.stringify(map));
+    } catch {
+      // Storage can be unavailable (private windows); the toggle still works for the page.
+    }
+  }
+
+  function applyCollapseState() {
+    const collapsed = readCollapsed();
+    for (const toggle of document.querySelectorAll("[data-collapse-toggle]")) {
+      const key = toggle.dataset.collapseKey ?? "";
+      const target = document.getElementById(toggle.dataset.collapseTarget ?? "");
+      if (!target) continue;
+      const hidden = collapsed[key] === true;
+      target.hidden = hidden;
+      toggle.setAttribute("aria-expanded", String(!hidden));
+    }
+  }
+
+  document.addEventListener("click", (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    const toggle = target ? target.closest("[data-collapse-toggle]") : null;
+    if (!toggle) return;
+    const el = document.getElementById(toggle.dataset.collapseTarget ?? "");
+    if (!el) return;
+    const hide = !el.hidden;
+    el.hidden = hide;
+    toggle.setAttribute("aria-expanded", String(!hide));
+    persistCollapsed(toggle.dataset.collapseKey ?? "", hide);
+  });
+
+  applyCollapseState();
+  document.addEventListener("htmx:afterSwap", applyCollapseState);
+  document.addEventListener("htmx:afterSwap", initTables);
 })();