reviewzy 0.1.0 → 0.2.0

package/src/dashboard/static/dashboard.css

@@ -6,14 +6,16 @@
 .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%; }
 
-/* ---- Page header: the eyebrow / title / lede triplet ---- */
+/* ---- Page header: the eyebrow / title / lede triplet (login/editor pages) ---- */
 .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; }
+/* The entries header is just the title plus the total count, no eyebrow or lede. */
+.page-count { font-size: var(--text-sm); color: var(--text-dim); }
 
 /* ---- 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 ---- */
@@ -35,52 +37,141 @@
 .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); }
 
+/* ---- Screen-reader-only ---- */
+/* Present in the DOM and the accessibility tree, 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;
+}
+
 /* ---- 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; }
 .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(--text-xs)/1 var(--font-sans); color: var(--text-faint); }
 
 /* ---- 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: 450 var(--text-base)/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(--text-xs);
+  color: var(--text-faint);
+  white-space: nowrap;
+}
+.cell-file {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+  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); }
+/* The cloudy-ui custom checkbox: an appearance:none box on the sunk plane, accent-filled with a
+   clip-path check when checked. The select-all also takes a dash in its indeterminate state (a
+   partially selected batch), which the native accent-color box could not express. */
+.cell-select input[type="checkbox"],
+.batch-header .select-all {
+  width: 15px;
+  height: 15px;
+  appearance: none;
+  background: var(--bg-sunken);
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius) * 0.5);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+}
+.cell-select input[type="checkbox"]:hover,
+.batch-header .select-all:hover { border-color: var(--line-strong); }
+.cell-select input[type="checkbox"]:checked,
+.batch-header .select-all:checked,
+.cell-select input[type="checkbox"]:indeterminate,
+.batch-header .select-all:indeterminate {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.cell-select input[type="checkbox"]:checked::after,
+.batch-header .select-all:checked::after {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  background: var(--text-on-accent);
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+.cell-select input[type="checkbox"]:indeterminate::after,
+.batch-header .select-all:indeterminate::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  right: 3px;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  background: var(--text-on-accent);
+  border-radius: 1px;
+}
 .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); }
+.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 56px 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: 56px;
+  z-index: 10;
+  padding: var(--space-2) 0;
+  background: var(--bg);
+}
+.batch-header .select-all { 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-fast) 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 sunken, 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 {
@@ -107,37 +198,61 @@
 .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-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 shared .visually-hidden utility above. */
+.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 56px navbar, so the previous and next entries are
+   a single click away while reading. The strip sits inside the 48px page padding, clear of content. */
+.editor-nav-btn {
+  position: fixed;
+  top: 56px;
+  bottom: 0;
+  width: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  text-decoration: none;
+  z-index: 40;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+.editor-nav-prev { left: 0; }
+.editor-nav-next { right: 0; }
+.editor-nav-btn:hover { background: var(--bg-hover); color: var(--text); }
+.editor-nav-btn.is-disabled { color: var(--text-faint); 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); }
 
+/* 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); }
@@ -149,8 +264,28 @@
 .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.is-present { color: var(--success); }
+
+/* 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(--text-xs); color: var(--text-dim); }
+.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); }
+.repo-icon { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; opacity: 0.7; }
 .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; }
 
+/* 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(--radius); }
+.image-skip { margin: 0; font-size: var(--text-xs); color: var(--text-dim); }
+.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; }
 .revision-list { list-style: none; margin: 0; padding: 0; }

package/src/dashboard/static/dashboard.js

@@ -60,6 +60,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 +194,117 @@
     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);
 })();