@kontourai/survey 0.5.2 → 0.6.0

package/dist/src/review-workbench/review-workbench.js

@@ -449,9 +449,12 @@ function renderReviewQueueSessionHtml(session, events, presentationAdapter) {
     return `
     <section class="workbench-shell" aria-label="Survey review workbench">
       ${renderWorkbenchHeader(state, presentationAdapter)}
+      ${renderMobileQueueBar(session, state, presentationAdapter)}
       ${renderActiveReviewStrip(session, state, presentationAdapter)}
       <div class="queue-layout">
-        <aside class="queue-panel" aria-label="Review queue">
+        <div class="queue-drawer-backdrop" data-testid="queue-drawer-backdrop" aria-hidden="true"></div>
+        <aside class="queue-panel" aria-label="Review queue" role="dialog" aria-modal="false" id="queue-panel">
+          <button class="queue-drawer-close" type="button" data-testid="queue-drawer-close" aria-label="Close queue panel">&#x2715;</button>
           ${renderQueueRows(session, presentationAdapter)}
           ${renderSessionSummary(session)}
           ${renderSessionAudit(session, sessionExport)}
@@ -465,6 +468,28 @@ function renderReviewQueueSessionHtml(session, events, presentationAdapter) {
     </section>
   `;
 }
+function renderMobileQueueBar(session, state, presentationAdapter) {
+    const activeIndex = session.items.findIndex((item) => item.metadata.name === session.activeItemName);
+    const position = activeIndex >= 0 ? activeIndex + 1 : 1;
+    const resolved = Object.keys(session.decisionsByItemName).length;
+    const presentation = buildReviewItemPresentation(state.item, presentationAdapter);
+    return `
+    <div class="mobile-queue-bar" data-testid="mobile-queue-bar" aria-label="Queue progress">
+      <div class="mobile-queue-progress">
+        <span class="field-label">Queue · ${resolved} of ${session.items.length} resolved</span>
+        <span class="mobile-queue-item-label">${escapeHtml(presentation.targetLabel)}</span>
+      </div>
+      <button
+        class="mobile-queue-open"
+        type="button"
+        data-testid="mobile-queue-open"
+        aria-controls="queue-panel"
+        aria-expanded="false"
+        aria-label="Open review queue"
+      >Queue</button>
+    </div>
+  `;
+}
 function renderSessionAudit(session, sessionExport) {
     const lastEvents = sessionExport.events.slice(-6);
     const replayed = replayReviewSessionEvents({
@@ -585,17 +610,13 @@ function renderActiveReviewStrip(session, state, presentationAdapter) {
   `;
 }
 function renderWorkbenchHeader(state, presentationAdapter) {
-    const current = candidateByRole(state.item, "current");
-    const proposed = candidateByRole(state.item, "proposed");
     const presentation = buildReviewItemPresentation(state.item, presentationAdapter);
-    const currentPresentation = buildReviewCandidatePresentation(state.item, current, presentationAdapter, presentation.targetLabel);
-    const proposedPresentation = buildReviewCandidatePresentation(state.item, proposed, presentationAdapter, presentation.targetLabel);
     return `
     <header class="topbar">
       <div>
         <p class="eyebrow">${escapeHtml(String(state.item.metadata.producer?.displayName ?? "Survey"))}</p>
         <h1>Review candidate update</h1>
-        <p class="review-question">For <strong>${escapeHtml(presentation.targetLabel)}</strong>, decide whether <strong>${escapeHtml(proposedPresentation.valueText)}</strong> should replace <strong>${escapeHtml(currentPresentation.valueText)}</strong>.</p>
+        <p class="review-target-label" data-testid="review-target-label"><strong>${escapeHtml(presentation.targetLabel)}</strong></p>
       </div>
       <dl class="meta-grid">
         ${metaItem("Item", state.item.metadata.name)}
@@ -719,32 +740,31 @@ function renderSurfacePreview(state, presentationAdapter) {
 }
 function renderPendingSurfacePreview() {
     return `
-    <section class="surface-preview" data-testid="surface-preview" aria-label="Surface preview">
-      <div class="surface-head">
-        <h2>Surface preview</h2>
+    <details class="surface-preview" data-testid="surface-preview" aria-label="Surface preview">
+      <summary class="surface-summary">
+        <span class="surface-summary-label">Surface preview</span>
         <span class="state-label">pending</span>
-      </div>
-      <p class="preview-disclaimer">Choose a review decision to preview the source and review posture that would project toward Surface. Survey does not validate real-world truth.</p>
-    </section>
+      </summary>
+      <p class="preview-disclaimer">Choose a review decision to preview the source and review posture that would project toward Surface.</p>
+    </details>
   `;
 }
 function renderPopulatedSurfacePreview(preview) {
     return `
-    <section class="surface-preview" data-testid="surface-preview" aria-label="Surface preview">
-      <div class="surface-head">
-        <h2>Surface preview</h2>
+    <details class="surface-preview" data-testid="surface-preview" aria-label="Surface preview">
+      <summary class="surface-summary">
+        <span class="surface-summary-label">Surface preview</span>
         <span class="state-label">local preview</span>
-      </div>
-      <p class="preview-disclaimer" data-testid="surface-preview-disclaimer">${escapeHtml(preview.postureDisclaimer)}</p>
+      </summary>
       <div class="preview-section-grid">
         ${renderSurfacePreviewSections(preview)}
       </div>
-    </section>
+      <p class="preview-disclaimer preview-disclaimer-footer" data-testid="surface-preview-disclaimer">${escapeHtml(preview.postureDisclaimer)}</p>
+    </details>
   `;
 }
 function renderSurfacePreviewSections(preview) {
     return [
-        renderCanonicalClaim(preview),
         renderCandidateHistory(preview),
         renderSourceEvidence(preview),
         renderReviewEvent(preview),
@@ -942,11 +962,13 @@ function renderCurrentState(root, session, controller, presentationAdapter) {
     bindQueueRows(root, (itemName) => {
         controller.selectQueueItem(itemName);
         controller.renderCurrentState();
+        closeQueueDrawer(root);
     });
     bindNextUnresolved(root, () => {
         controller.goToNextUnresolved();
         controller.renderCurrentState();
     });
+    bindQueueDrawer(root);
 }
 function queueSessionFromStartState(startState) {
     if ("items" in startState) {
@@ -993,6 +1015,48 @@ function bindNextUnresolved(root, goToNextUnresolved) {
         });
     });
 }
+function bindQueueDrawer(root) {
+    const openButton = root.querySelector("[data-testid='mobile-queue-open']");
+    const closeButton = root.querySelector("[data-testid='queue-drawer-close']");
+    const backdrop = root.querySelector("[data-testid='queue-drawer-backdrop']");
+    const panel = root.querySelector("#queue-panel");
+    openButton?.addEventListener("click", () => openQueueDrawer(root));
+    closeButton?.addEventListener("click", () => closeQueueDrawer(root));
+    backdrop?.addEventListener("click", () => closeQueueDrawer(root));
+    if (typeof root.addEventListener === "function") {
+        root.addEventListener("keydown", (event) => {
+            if (event.key === "Escape" && panel?.classList.contains("is-open")) {
+                closeQueueDrawer(root);
+            }
+        });
+    }
+}
+function openQueueDrawer(root) {
+    const panel = root.querySelector("#queue-panel");
+    const backdrop = root.querySelector("[data-testid='queue-drawer-backdrop']");
+    const openButton = root.querySelector("[data-testid='mobile-queue-open']");
+    if (!panel) {
+        return;
+    }
+    panel.classList.add("is-open");
+    panel.setAttribute("aria-modal", "true");
+    backdrop?.classList.add("is-visible");
+    openButton?.setAttribute("aria-expanded", "true");
+    panel.querySelector("button, [tabindex]")?.focus();
+}
+function closeQueueDrawer(root) {
+    const panel = root.querySelector("#queue-panel");
+    const backdrop = root.querySelector("[data-testid='queue-drawer-backdrop']");
+    const openButton = root.querySelector("[data-testid='mobile-queue-open']");
+    if (!panel) {
+        return;
+    }
+    panel.classList.remove("is-open");
+    panel.setAttribute("aria-modal", "false");
+    backdrop?.classList.remove("is-visible");
+    openButton?.setAttribute("aria-expanded", "false");
+    openButton?.focus();
+}
 function scrollActiveReviewIntoView(root) {
     if (typeof window === "undefined" || !window.matchMedia("(max-width: 980px)").matches) {
         return;

package/dist/src/review-workbench/review-workbench.standalone.css

@@ -169,6 +169,17 @@ h1 {
   font-size: 0.95em;
 }
 
+.review-target-label {
+  margin-top: 4px;
+}
+
+.review-target-label strong {
+  color: var(--paper);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 13px;
+  font-weight: 600;
+}
+
 .meta-grid {
   display: none;
   grid-template-columns: repeat(4, minmax(110px, 1fr));
@@ -223,6 +234,52 @@ h1 {
   display: none;
 }
 
+/* ---- Mobile queue progress bar (mobile only) -------------------------- */
+
+.mobile-queue-bar {
+  display: none;
+}
+
+/* ---- Queue drawer backdrop -------------------------------------------- */
+
+.queue-drawer-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(2px);
+  opacity: 0;
+  transition: opacity 0.22s ease;
+  pointer-events: none;
+}
+
+.queue-drawer-backdrop.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ---- Queue drawer close button (mobile only) -------------------------- */
+
+.queue-drawer-close {
+  display: none;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: rgba(8, 12, 18, 0.8);
+  color: var(--paper-faint);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
 .queue-list,
 .session-summary,
 .session-audit {
@@ -894,6 +951,53 @@ textarea:focus {
   gap: 11px;
 }
 
+/* When surface-preview is a <details> element */
+details.surface-preview {
+  display: block;
+}
+
+details.surface-preview[open] {
+  display: grid;
+  gap: 11px;
+}
+
+.surface-summary {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  list-style: none;
+  padding: 0;
+}
+
+.surface-summary::-webkit-details-marker {
+  display: none;
+}
+
+.surface-summary::before {
+  content: none;
+}
+
+.surface-summary-label {
+  font-family: "Fraunces", Georgia, serif;
+  font-weight: 600;
+  font-size: 16px;
+  letter-spacing: -0.01em;
+  color: var(--paper);
+}
+
+.surface-summary-label::before {
+  content: "› ";
+  color: var(--accent);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 13px;
+}
+
+details.surface-preview[open] .surface-summary-label::before {
+  content: "⌄ ";
+}
+
 .surface-head {
   display: flex;
   gap: 12px;
@@ -916,6 +1020,13 @@ textarea:focus {
   line-height: 1.5;
 }
 
+.preview-disclaimer-footer {
+  margin-top: 4px;
+  border-left-color: var(--line);
+  font-size: 11.5px;
+  color: var(--paper-faint);
+}
+
 .preview-section-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1058,7 +1169,6 @@ pre {
 
 @media (max-width: 980px) {
   .topbar,
-  .queue-layout,
   .focus-evidence,
   .candidate-grid {
     grid-template-columns: 1fr;
@@ -1073,9 +1183,8 @@ pre {
   }
 
   .queue-layout {
-    grid-template-areas:
-      "content"
-      "queue";
+    display: block;
+    position: relative;
   }
 
   .active-review-strip {
@@ -1136,8 +1245,85 @@ pre {
     font-size: 11px;
   }
 
-  .queue-panel {
-    grid-area: queue;
+  .queue-drawer-backdrop {
+    display: block;
+  }
+
+  .queue-drawer-close {
+    display: flex;
+  }
+
+  .mobile-queue-bar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+    border: 1px solid var(--line-strong);
+    border-left: 3px solid var(--accent);
+    border-radius: var(--radius);
+    padding: 11px 14px;
+    margin-bottom: 14px;
+    background:
+      linear-gradient(90deg, rgba(92, 224, 198, 0.08), transparent 46%),
+      linear-gradient(180deg, var(--ink-800), var(--ink-850));
+    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .mobile-queue-progress {
+    display: grid;
+    gap: 3px;
+    min-width: 0;
+  }
+
+  .mobile-queue-item-label {
+    font-family: "IBM Plex Mono", ui-monospace, monospace;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--paper);
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .mobile-queue-open {
+    flex-shrink: 0;
+    min-height: 34px;
+    padding: 0 14px;
+    border: 1px solid var(--line-strong);
+    border-radius: 999px;
+    background: rgba(92, 224, 198, 0.08);
+    color: var(--accent);
+    cursor: pointer;
+    font-family: "IBM Plex Mono", ui-monospace, monospace;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    transition: background 0.16s ease, border-color 0.16s ease;
+  }
+
+  .mobile-queue-open:hover {
+    background: rgba(92, 224, 198, 0.16);
+    border-color: var(--accent);
+  }
+
+  /* Higher specificity than the @container stacked-layout fallback below:
+     on a narrow viewport the drawer must win even inside a narrow container. */
+  .queue-layout .queue-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(320px, 90vw);
+    z-index: 50;
+    overflow-y: auto;
+    overflow-x: hidden;
+    transform: translateX(-105%);
+    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
+    border-radius: 0 var(--radius) var(--radius) 0;
+    padding-top: 50px;
+  }
+
+  .queue-layout .queue-panel.is-open {
+    transform: translateX(0);
   }
 
   .content-grid {
@@ -1148,10 +1334,6 @@ pre {
     display: none;
   }
 
-  .queue-panel {
-    position: static;
-  }
-
   .content-grid,
   .review-main,
   .candidate-grid,
@@ -1331,11 +1513,11 @@ pre {
   }
 
   .focus-value strong {
-    font-size: clamp(22px, 10vw, 32px);
+    font-size: clamp(16px, 5cqi, 22px);
   }
 
   .candidate-value .field-value {
-    font-size: clamp(21px, 9vw, 30px);
+    font-size: clamp(15px, 4.5cqi, 20px);
     line-height: 1.12;
   }
 
@@ -1440,7 +1622,7 @@ pre {
 
   .focus-value strong {
     margin-top: 6px;
-    font-size: 24px;
+    font-size: 18px;
     line-height: 1.05;
   }
 
@@ -1449,6 +1631,6 @@ pre {
   }
 
   .candidate-value .field-value {
-    font-size: 20px;
+    font-size: 17px;
   }
 }