@kontourai/survey 0.7.2 → 0.8.0

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

@@ -654,7 +654,7 @@ function renderReviewFocus(state, presentationAdapter) {
       <dl class="focus-evidence">
         ${fieldItem("Target", presentation.targetLabel)}
         ${fieldItem("Proposed source", proposed.source.sourceRef)}
-        ${fieldItem("Proposed excerpt", proposed.locator?.excerpt ?? "none", "excerpt")}
+        ${fieldItemClamped("Proposed excerpt", proposed.locator?.excerpt ?? "none", "excerpt")}
       </dl>
     </section>
   `;
@@ -782,13 +782,18 @@ function renderCanonicalClaim(preview) {
     ]);
 }
 function renderReviewEvent(preview) {
-    return renderPreviewSection("Review event", "surface-review-event", [
-        ["Actor", preview.reviewEvent?.actor ?? "unknown"],
-        ["Reviewed at", preview.reviewEvent?.reviewedAt ?? "not recorded"],
-        ["Status", preview.reviewEvent?.status ?? "pending"],
-        ["Rationale", preview.reviewEvent?.rationale ?? "No reviewer rationale provided."],
-        ["Outcome", preview.reviewEvent?.reviewOutcomeId ?? "not provided"],
-    ]);
+    return `
+    <section class="preview-section" data-testid="surface-review-event">
+      <h3>${escapeHtml("Review event")}</h3>
+      <dl class="field-stack compact">
+        ${fieldItem("Actor", preview.reviewEvent?.actor ?? "unknown")}
+        ${fieldItem("Reviewed at", preview.reviewEvent?.reviewedAt ?? "not recorded")}
+        ${fieldItem("Status", preview.reviewEvent?.status ?? "pending")}
+        ${fieldItem("Rationale", preview.reviewEvent?.rationale ?? "No reviewer rationale provided.", "rationale-clamp")}
+        ${fieldItem("Outcome", preview.reviewEvent?.reviewOutcomeId ?? "not provided")}
+      </dl>
+    </section>
+  `;
 }
 function renderIntegrityPosture(preview) {
     return renderPreviewSection("Integrity posture", "surface-integrity-posture", [
@@ -806,32 +811,68 @@ function renderAuthorityTrace(preview) {
     ], preview.authorityTrace.status === "empty" ? " is-neutral" : "");
 }
 function renderCandidateHistory(preview) {
-    const rows = preview.candidateHistory.length === 0
-        ? [["History", "No unselected candidates."]]
-        : preview.candidateHistory.flatMap((candidate) => [
-            ["History", candidate.historyLabel],
-            ["Value", candidate.value],
-        ]);
-    const references = preview.candidateHistory.flatMap((candidate) => [
-        ["Candidate ID", candidate.candidateId],
-    ]);
-    return renderPreviewSection("Unselected candidate history", "surface-candidate-history", rows, undefined, references);
+    if (preview.candidateHistory.length === 0) {
+        return renderPreviewSection("Unselected candidate history", "surface-candidate-history", [["History", "No unselected candidates."]], undefined, []);
+    }
+    const VISIBLE_COUNT = 3;
+    const total = preview.candidateHistory.length;
+    const visibleCandidates = preview.candidateHistory.slice(0, VISIBLE_COUNT);
+    const overflowCandidates = preview.candidateHistory.slice(VISIBLE_COUNT);
+    const renderHistoryRows = (candidates) => candidates.flatMap((candidate) => [
+        fieldItem("History", candidate.historyLabel),
+        fieldItem("Value", candidate.value),
+    ]).join("");
+    const referenceRows = preview.candidateHistory.map((candidate) => fieldItem("Candidate ID", candidate.candidateId)).join("");
+    const overflowHtml = overflowCandidates.length > 0
+        ? `<div class="history-overflow">${renderHistoryRows(overflowCandidates)}</div>`
+        : "";
+    const expanderHtml = overflowCandidates.length > 0
+        ? `<button class="history-expand-btn" type="button" data-history-expand aria-expanded="false">
+         <span class="expand-label">view all (${total})</span>
+         <span class="collapse-label">show less</span>
+       </button>`
+        : "";
+    return `
+    <section class="preview-section" data-testid="surface-candidate-history">
+      <h3>${escapeHtml("Unselected candidate history")}</h3>
+      <div class="history-expander${overflowCandidates.length > 0 ? "" : ""}" data-history-expander>
+        <dl class="field-stack compact">
+          ${renderHistoryRows(visibleCandidates)}
+          ${overflowHtml}
+        </dl>
+        ${expanderHtml}
+      </div>
+      ${preview.candidateHistory.length > 0 ? `<details class="reference-details">
+        <summary>IDs and trace links</summary>
+        <dl class="field-stack compact">${referenceRows}</dl>
+      </details>` : ""}
+    </section>
+  `;
 }
 function renderSourceEvidence(preview) {
-    const rows = [
-        ["Source URL", preview.sourceEvidence.sourceRef],
-        ["Excerpt", preview.sourceEvidence.excerpt],
-        ["Extractor", preview.sourceEvidence.extractor],
-        ["Observed", preview.sourceEvidence.observedAt],
-    ];
-    const references = [
+    // Excerpt uses a 3-line clamp wrapper with a toggle button.
+    const clampedExcerptHtml = fieldItemClamped("Excerpt", preview.sourceEvidence.excerpt, "excerpt");
+    // Build source evidence section with clamped excerpt inline
+    return `
+    <section class="preview-section" data-testid="surface-source-evidence">
+      <h3>${escapeHtml("Source evidence")}</h3>
+      <dl class="field-stack compact">
+        ${fieldItem("Source URL", preview.sourceEvidence.sourceRef)}
+        ${clampedExcerptHtml}
+        ${fieldItem("Extractor", preview.sourceEvidence.extractor)}
+        ${fieldItem("Observed", preview.sourceEvidence.observedAt)}
+        ${preview.sourceEvidence.sourceAuthority ? [
+        fieldItem("Source authority class", preview.sourceEvidence.sourceAuthority.authorityClass),
+        fieldItem("Declared by", preview.sourceEvidence.sourceAuthority.declaredBy),
+        fieldItem("Authority scope", preview.sourceEvidence.sourceAuthority.scope),
+    ].join("") : ""}
+      </dl>
+      ${renderReferenceDetails([
         ["Source ID", preview.sourceEvidence.sourceId],
         ["Extraction ID", preview.sourceEvidence.extractionId],
-    ];
-    if (preview.sourceEvidence.sourceAuthority) {
-        rows.push(["Source authority class", preview.sourceEvidence.sourceAuthority.authorityClass], ["Declared by", preview.sourceEvidence.sourceAuthority.declaredBy], ["Authority scope", preview.sourceEvidence.sourceAuthority.scope]);
-    }
-    return renderPreviewSection("Source evidence", "surface-source-evidence", rows);
+    ])}
+    </section>
+  `;
 }
 function renderPreviewSection(title, testId, rows, extraClass = "", references = []) {
     return `
@@ -969,6 +1010,8 @@ function renderCurrentState(root, session, controller, presentationAdapter) {
         controller.renderCurrentState();
     });
     bindQueueDrawer(root);
+    bindClampToggles(root);
+    bindHistoryExpanders(root);
 }
 function queueSessionFromStartState(startState) {
     if ("items" in startState) {
@@ -1015,6 +1058,29 @@ function bindNextUnresolved(root, goToNextUnresolved) {
         });
     });
 }
+function bindClampToggles(root) {
+    root.querySelectorAll("[data-clamp-toggle]").forEach((button) => {
+        button.addEventListener("click", () => {
+            const clampContainer = button.closest("[data-clamp]");
+            if (!clampContainer)
+                return;
+            const expanded = clampContainer.classList.toggle("is-expanded");
+            button.setAttribute("aria-expanded", String(expanded));
+            button.textContent = expanded ? "less" : "more";
+        });
+    });
+}
+function bindHistoryExpanders(root) {
+    root.querySelectorAll("[data-history-expand]").forEach((button) => {
+        button.addEventListener("click", () => {
+            const expander = button.closest("[data-history-expander]");
+            if (!expander)
+                return;
+            const expanded = expander.classList.toggle("is-expanded");
+            button.setAttribute("aria-expanded", String(expanded));
+        });
+    });
+}
 function bindQueueDrawer(root) {
     const openButton = root.querySelector("[data-testid='mobile-queue-open']");
     const closeButton = root.querySelector("[data-testid='queue-drawer-close']");
@@ -1081,7 +1147,12 @@ function refreshDecisionOutputs(root, state, renderCurrentState, presentationAda
     }
     const wrapper = document.createElement("div");
     wrapper.innerHTML = renderSurfacePreview(state, presentationAdapter);
-    preview.replaceWith(wrapper.firstElementChild);
+    const newPreview = wrapper.firstElementChild;
+    preview.replaceWith(newPreview);
+    if (newPreview && typeof newPreview.querySelectorAll === "function") {
+        bindClampToggles(newPreview);
+        bindHistoryExpanders(newPreview);
+    }
 }
 function refreshSessionAudit(root, session, sessionExport, renderCurrentState) {
     const audit = root.querySelector("[data-testid='session-audit']");
@@ -1125,7 +1196,7 @@ function renderCandidateCard(candidate, state, presentationAdapter) {
       <dl class="field-stack">
         ${fieldItem("Source URL", presentation.sourceText)}
         ${fieldItem("Locator", candidate.locator?.locator ?? candidate.locator?.scheme ?? "none")}
-        ${fieldItem("Excerpt", candidate.locator?.excerpt ?? "none", "excerpt")}
+        ${fieldItemClamped("Excerpt", candidate.locator?.excerpt ?? "none", "excerpt")}
         ${fieldItem("Extraction confidence", confidence === undefined ? "unknown" : formatConfidence(confidence))}
         ${fieldItem("Extractor", candidate.extraction.extractor ?? "unknown")}
       </dl>
@@ -1153,6 +1224,17 @@ function metaItem(label, value) {
     </div>
   `;
 }
+function fieldItemClamped(label, value, extraClass = "") {
+    return `
+    <div class="field ${extraClass}">
+      <dt class="field-label">${escapeHtml(label)}</dt>
+      <div class="excerpt-clamp" data-clamp>
+        <dd class="field-value">${escapeHtml(value)}</dd>
+        <button class="clamp-toggle" type="button" data-clamp-toggle aria-expanded="false">more</button>
+      </div>
+    </div>
+  `;
+}
 function fieldItem(label, value, extraClass = "") {
     return `
     <div class="field ${extraClass}">