create-safest-tools 0.6.0 → 0.7.0

package/template/public/console/release.json

@@ -0,0 +1 @@
+{"release":"a5f252eca115ed4eac3c"}

package/template/public/console/workspace-features.css

@@ -0,0 +1,2 @@
+.appeal-dialog>.detail-head{background:var(--paper,#fff)}.appeal-correction-card{border:1px solid var(--line,#d8dfdc);border-radius:12px;min-width:0;margin-block:16px;padding:16px}.appeal-correction-form{gap:16px;min-width:0;display:grid}.appeal-correction-form label:not(.appeal-correction-approval){gap:6px;font-size:.875rem;display:grid}.appeal-correction-form input:not([type=checkbox]),.appeal-correction-form select,.appeal-correction-form textarea{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:44px;font-size:1rem}.appeal-correction-form textarea{min-height:96px}.appeal-correction-approval{align-items:flex-start;gap:10px;font-weight:400;display:flex}.appeal-correction-approval input{flex:0 0 20px;width:20px;height:20px;margin-top:2px}.appeal-correction-card dd,.appeal-operation-reference{overflow-wrap:anywhere}.appeal-operation-reference{font-size:.875rem}.appeal-correction-progress h5{margin-block:16px 8px;font-size:1rem}@media (width<=600px){.appeal-correction-card{padding:12px}.appeal-correction-form button{white-space:normal;width:100%;min-height:44px}}.appeal-correction-card .appeal-target-summary{min-width:0;margin-block:16px}.appeal-correction-card .appeal-target-fields{margin:0;display:block}.appeal-correction-card .appeal-target-fields>div{min-width:0;margin-block:0 12px;display:block}.appeal-correction-card .appeal-target-fields dt{float:none;color:var(--muted,#5c6862);margin:0 0 4px;font-size:.8125rem;display:block}.appeal-correction-card .appeal-target-fields dd{overflow-wrap:anywhere;word-break:normal;min-width:0;max-width:100%;margin:0;font-size:.9375rem;line-height:1.5;display:block}.appeal-target-link{flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0;margin-block:12px;display:flex}.appeal-target-link a{align-items:center;min-height:44px;display:inline-flex}.appeal-target-link>span{color:var(--muted,#5c6862);overflow-wrap:anywhere;min-width:0;font-size:.8125rem}.appeal-target-facts summary,.appeal-operation-details summary{box-sizing:border-box;cursor:pointer;min-height:44px;margin-inline-start:1.1em;padding-block:10px;display:list-item}.appeal-target-facts[open] summary{margin-bottom:8px}.appeal-correction-action{margin-top:20px;font-size:1rem}.appeal-operation-details{margin-block:8px;font-size:.875rem}.appeal-operation-details p{margin-block:4px 12px}.case-escalations{min-width:0;margin-block:1rem;padding:1.25rem}.case-escalations .surface-head{flex-wrap:wrap;gap:1rem;margin-bottom:1rem;padding:0 0 1rem}.case-escalations p{color:var(--muted,#5c6862);line-height:1.5}.case-escalation-list{gap:1rem;display:grid}.case-escalation-item{border:1px solid var(--line,#d8dfda);overflow-wrap:anywhere;border-radius:.75rem;min-width:0;padding:1rem}.case-escalation-item-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex}.case-escalation-item h3{margin:0;font-size:1rem}.case-escalation-item-head p{margin:.3rem 0 0;font-size:.875rem}.case-escalation-item dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;display:grid}.case-escalation-item dt{color:var(--muted,#5c6862);font-size:.8rem}.case-escalation-item dd{margin:.2rem 0 0;font-size:.9rem}.case-escalation-buttons{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.case-escalation-buttons button{white-space:normal;min-height:44px}.case-escalation-warning{border-inline-start:3px solid #af7820;padding-inline-start:.75rem}.case-escalation-settings{border:1px solid var(--line,#d8dfda);border-radius:.75rem;margin-block:1rem;padding:1rem}.case-escalation-settings label{gap:.35rem;min-width:0;font-size:.875rem;display:grid}.case-escalation-setting-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-block:.75rem;display:grid}.case-escalation-settings select,.case-escalation-settings input,.case-escalation-settings textarea{width:100%;min-width:0;min-height:44px;font-size:1rem}.case-escalation-status{background:var(--brand-soft,#e8f1e9);border-radius:.5rem;padding:.75rem}@media (width<=560px){.case-escalations{padding:1rem}.case-escalation-setting-grid{grid-template-columns:minmax(0,1fr)}.case-escalation-buttons{align-items:stretch}.case-escalation-buttons button{flex:auto}}.integration-verification{min-width:0;padding:24px}.integration-verification>.surface-head{margin-bottom:20px;padding:0 0 20px}.verification-start{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.verification-start label,.verification-bind label,.verification-history{gap:8px;min-width:0;font-size:.875rem;font-weight:600;display:grid}.verification-start select,.verification-bind select,.verification-history select{width:100%;min-width:0;min-height:44px;font-size:1rem}.verification-start .form-help{grid-column:1/-1;margin:0}.verification-start button{justify-self:start}.verification-history,.verification-run{margin-top:24px}.verification-run{border-top:1px solid var(--border,#d8e0da);padding-top:20px}.verification-summary h3,.verification-summary p{overflow-wrap:anywhere;margin:0 0 8px}.verification-summary small{margin-bottom:16px;display:block}.verification-state{border:1px solid;border-radius:6px;margin:4px 0 12px;padding:4px 8px;display:inline-block}.verification-state-verified{color:#235a43}.verification-state-blocked,.verification-state-stale{color:#8a391c}.verification-bind{gap:12px;margin:16px 0;display:grid}.verification-bind p{margin:0}.verification-bind button{justify-self:start}.verification-evidence{gap:12px;margin:20px 0;padding:0;list-style:none;display:grid}.verification-evidence li{border:1px solid var(--border,#d8e0da);border-radius:8px;padding:14px}.verification-evidence li>div{flex-wrap:wrap;justify-content:space-between;gap:8px 16px;display:flex}.verification-evidence li span{font-size:.875em}.verification-evidence li p{overflow-wrap:anywhere;margin:8px 0 0}.verification-evidence li[data-state=complete]{border-left:4px solid #377457}.verification-evidence li[data-state=blocked]{border-left:4px solid #a64a25}@media (width<=600px){.integration-verification{padding:16px}.integration-verification>.surface-head{flex-direction:column;align-items:stretch;gap:16px}.verification-start{grid-template-columns:minmax(0,1fr)}.verification-start button,.verification-bind button{width:100%}.verification-evidence li{padding:12px}}
+/*$vite$:1*/

package/template/public/embed/embed.css

@@ -137,3 +137,6 @@ body.compact .form-actions button { flex: 1; }
   .reference-card strong { width: calc(100% - 80px); }
 }
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
+
+.participant-case-link { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 16px; border: 1px solid currentColor; border-radius: 10px; color: inherit; font-weight: 700; text-underline-offset: 3px; }
+.participant-case-link:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

package/template/public/embed/embed.js

@@ -364,6 +364,11 @@ async function submitReport() {
     elements.receipt_copy.textContent = state.mode === "anonymous"
       ? `We’ll send updates to ${elements.reporter_email.value.trim().toLowerCase()}. You can close this window now.`
       : "You can close this window now. Updates will be sent through the application’s notification channel.";
+    try {
+      const url = new URL(result.participant_url);
+      if (url.origin === location.origin && url.pathname === "/participant" && !url.search && /^#access=[a-f0-9]{64}$/.test(url.hash)) elements.participant_case.href = url.href;
+    } catch { /* A replay can recover access through the configured participant channel. */ }
+    if (!result.participant_url) elements.participant_case.textContent = "Get a private case link";
     elements.success_view.focus();
     post({ type: "safest-resolve:submitted", reference: result.reference || "", mode: state.mode });
   } catch (error) {
@@ -404,5 +409,18 @@ globalThis.addEventListener("message", (event) => {
   if (message.type === "safest-resolve:context-error") showFormError(typeof message.message === "string" ? message.message : "Secure reporting context was unavailable.");
 });
 
-new ResizeObserver(() => post({ type: "safest-resolve:resize", height: document.documentElement.scrollHeight })).observe(elements.report_card);
+// Measure outside ResizeObserver delivery: the parent updates this frame's
+// height in response, and WebKit can otherwise report a resize feedback loop.
+let resizeFrame = 0;
+let reportedHeight = -1;
+new ResizeObserver(() => {
+  if (resizeFrame) return;
+  resizeFrame = requestAnimationFrame(() => {
+    resizeFrame = 0;
+    const height = document.documentElement.scrollHeight;
+    if (height === reportedHeight) return;
+    reportedHeight = height;
+    post({ type: "safest-resolve:resize", height });
+  });
+}).observe(elements.report_card);
 void loadConfig();

package/template/public/embed/index.html

@@ -84,6 +84,8 @@
         <p id="receipt-copy">You can close this window now. Updates will be sent through the application’s notification channel.</p>
         <div class="reference-card"><span>Your reference</span><strong id="receipt-reference"></strong><button id="copy-reference" type="button">Copy</button></div>
         <p class="notification-reminder"><span aria-hidden="true">●</span> Keep the reference in case the safety team asks for it.</p>
+        <p><a id="participant-case" class="participant-case-link" href="/participant" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer">Open your case</a></p>
+        <p class="notification-reminder">Your private case link lets you send more information or request an independent review. Keep it private.</p>
         <button id="finish-report" class="primary finish-button" type="button">Done</button>
       </section>
     </main>

package/template/public/index.html

@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <meta name="safest-release" content="a5f252eca115ed4eac3c" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Review reports, record decisions, send updates, and follow application actions and appeals on Cloudflare." />
@@ -9,7 +10,9 @@
     <title>Safest Resolve — Reports and workflows</title>
     <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
     <link rel="manifest" href="./manifest.webmanifest" />
-    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="./styles.css?v=b18e3c241c3d5c5b9f42" />
+    <link rel="stylesheet" href="./workspace.css?v=2b40869062cdbab843d4" />
+    <link rel="stylesheet" href="./console/workspace-features.css?v=a8eb659dcde4ef39f5a9" />
   </head>
   <body class="auth-resolving">
     <svg class="svg-defs" aria-hidden="true">
@@ -73,7 +76,7 @@
 
         <div class="content">
           <section id="command" class="command-view" data-view="command">
-            <div id="command-centre-root"><div class="skeleton-block" role="status" aria-label="Loading Command centre"></div></div>
+            <div id="command-centre-root"><div class="skeleton-block" role="status" aria-label="Loading Today"></div></div>
           </section>
 
           <section id="reports" class="queue-view" data-view="reports">
@@ -96,7 +99,7 @@
 
           <section id="profile" class="view-stack" data-view="profile" hidden><div id="profile-workspace-root"><div class="skeleton-block" role="status" aria-label="Loading profile"></div></div></section>
 
-          <section id="analytics" class="view-stack" data-view="analytics" hidden><div id="analytics-workspace-root"><div class="skeleton-block" role="status" aria-label="Loading reports and outcomes"></div></div></section>
+          <section id="analytics" class="view-stack" data-view="analytics" hidden><div id="analytics-workspace-root"><div class="skeleton-block" role="status" aria-label="Loading Insights"></div></div></section>
 
           <section id="appeals" class="view-stack" data-view="appeals" hidden><div id="appeal-workspace-root"><div class="skeleton-block" role="status" aria-label="Loading appeals"></div></div></section>
 
@@ -124,8 +127,8 @@
     <div id="quality-dialog-root"></div>
 
     <div id="operations-dialog-root"></div>
-    <script src="./customer-brand.js"></script>
-    <script src="./widget.js"></script>
-    <script src="./console/auth-shell.js" type="module"></script>
+    <script src="./customer-brand.js?v=fd02f0d24c8c8fd84cb7"></script>
+    <script src="./widget.js?v=7c87ca444a26368f65ec"></script>
+    <script src="./console/auth-shell.js?v=112db577467f923be438" type="module"></script>
   </body>
 </html>

package/template/public/participant.css

@@ -0,0 +1,2 @@
+:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17251f;background:#f5f7f5;font-size:16px;line-height:1.55;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}.site-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px max(20px,env(safe-area-inset-left));border-bottom:1px solid #d6dfd8;background:white}.brand{font-weight:700}main{max-width:760px;margin:28px auto;padding:0 20px}section{background:#fff;border:1px solid #d6dfd8;border-radius:16px;padding:28px;margin-bottom:20px}h1{font-size:clamp(1.5rem,5vw,2rem);line-height:1.2;margin:8px 0 16px}h2{font-size:1.25rem;line-height:1.3;margin:0 0 12px}p{margin:12px 0}.eyebrow,.muted,time{color:#526259}.eyebrow{font-size:.85rem;overflow-wrap:anywhere}label{display:block;margin:18px 0 6px;font-weight:600}input,textarea,button{font:inherit}input,textarea{display:block;width:100%;border:1px solid #899a8e;background:white;color:#17251f;border-radius:8px;padding:12px}textarea{resize:vertical;min-height:140px}button{border:1px solid #174e38;background:#174e38;color:white;border-radius:8px;padding:12px 18px;min-height:44px;cursor:pointer;font-weight:650}form button{margin-top:16px}.secondary{background:white;color:#174e38}button:disabled{opacity:.6;cursor:wait}:focus-visible{outline:3px solid #357cd0;outline-offset:3px}.status{display:inline-block;border-radius:20px;background:#e5efe8;color:#174e38;padding:5px 12px;font-weight:600}.message,.appeal{border-left:3px solid #bccdc1;padding:4px 16px;margin:20px 0}.message.inbound{border-left-color:#327757}.message p,.appeal p{white-space:pre-wrap;overflow-wrap:anywhere}.message strong{display:block}time{font-size:.85rem}.notice,#feedback{border-radius:8px;background:#e9f0ec;padding:14px 16px}#feedback:empty{display:none}#feedback.error{background:#fff0e7;color:#792b10}footer{max-width:760px;margin:24px auto;padding:0 20px 32px;color:#526259;font-size:.875rem}@media(max-width:540px){.site-header{padding:14px 16px;align-items:flex-start}.site-header button{font-size:.8rem;padding:8px 10px;max-width:150px}main{margin-top:18px;padding:0 12px}section{padding:20px 16px;border-radius:12px}form button{width:100%}}
+.section-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}.section-actions h2{margin:0}.section-actions button{font-size:.9rem}#older-messages{margin-bottom:8px}

package/template/public/participant.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><meta name="referrer" content="no-referrer"><title>Your safety case</title><link rel="stylesheet" href="/participant.css"><script src="/participant.js" defer></script></head>
+<body><header class="site-header"><span class="brand">Your safety case</span><button id="sign-out" class="secondary" hidden>Close private session</button></header>
+<main><p id="feedback" role="status" aria-live="polite">Opening your private case…</p>
+<section id="access" hidden aria-labelledby="access-title"><h1 id="access-title">Return to your case</h1><p>Your case link is private. A report reference by itself cannot open a case.</p>
+<h2>Request a new private link</h2><p>Use the reference and email you originally gave the safety team.</p>
+<form id="recovery-form"><label for="reference">Report reference</label><input id="reference" name="reference" required maxlength="100" autocomplete="off" placeholder="RPT-…"><label for="email">Email on the case</label><input id="email" name="email" type="email" required maxlength="254" autocomplete="email"><button type="submit">Send a new link</button></form>
+<p class="muted">For a report linked to your account with the service, return through that signed-in account to request a fresh case link. If you reported anonymously without an email, we cannot verify ownership using your reference alone. Use a still-open private session or contact the service where you reported the issue. Do not post your private link publicly.</p></section>
+<div id="case" hidden><section aria-labelledby="case-title"><p class="eyebrow" id="case-reference"></p><h1 id="case-title">Your conversation with the safety team</h1><p><span id="case-status" class="status"></span></p><p id="audience-description" class="muted"></p><p id="anonymous-warning" class="notice" hidden>This browser session lasts up to seven days. There is no email on this case for access recovery. Keep this session open; closing it or clearing your browser data can permanently remove your access.</p></section>
+<section aria-labelledby="messages-title"><div class="section-actions"><h2 id="messages-title">Conversation</h2><button id="refresh-case" class="secondary">Check for updates</button></div><button id="older-messages" class="secondary" hidden>Load older messages</button><div id="messages"></div></section>
+<section aria-labelledby="reply-title"><h2 id="reply-title">Add information or ask a question</h2><p>This goes to the safety team. Asking a question does not submit an appeal.</p><form id="reply-form"><label for="reply">Your message</label><textarea id="reply" name="reply" rows="5" required minlength="3" maxlength="8000"></textarea><p id="reply-pending" class="notice" hidden>We could not confirm whether your message arrived. Retry the same message to check safely.</p><button type="submit">Send to safety team</button></form></section>
+<section id="appeal-section" aria-labelledby="appeal-title"><h2 id="appeal-title">Request an independent appeal</h2><div id="appeals"></div><p id="appeal-unavailable" class="muted"></p><form id="appeal-form" hidden><p>Explain why you disagree with the decision and what should be reconsidered. A different reviewer must review your appeal. You can submit one appeal per decision.</p><label for="appeal-reason">Why are you appealing?</label><textarea id="appeal-reason" name="reason" rows="5" required minlength="3" maxlength="8000"></textarea><p id="appeal-pending" class="notice" hidden>We could not confirm whether your appeal arrived. Retry the same request to check safely.</p><button type="submit">Submit appeal</button></form></section></div>
+</main><footer>Only your conversation is shown here. The safety team keeps other participants’ information private. <a href="/participant#recover">Request a new access link</a></footer></body></html>

package/template/public/participant.js

@@ -0,0 +1,111 @@
+(() => {
+  'use strict';
+  const get = id => document.getElementById(id);
+  const token = new URLSearchParams(location.hash.slice(1)).get('access');
+  const recovering = location.hash === '#recover';
+  const invitationRequested = Boolean(location.hash) && !recovering;
+  // Remove the bearer before any application fetch, rendering, or user navigation.
+  if (location.hash) history.replaceState(null, '', location.pathname);
+  let csrf = ''; let current = null; let viewEpoch = 0;
+  const pending = { reply: null, appeal: null };
+  const retryAt = { reply: 0, appeal: 0 };
+  const messageHistory = new Map();
+  let olderCursor = null;
+  function feedback(message, error = false) { get('feedback').textContent = message; get('feedback').classList.toggle('error', error); }
+  async function api(path, options = {}) {
+    const response = await fetch(`/v1/participant/${path}`, { ...options, credentials: 'same-origin', cache: 'no-store', headers: { 'content-type': 'application/json', 'x-csrf-token': csrf, ...options.headers } });
+    const data = await response.json();
+    if (!response.ok) { const error = new Error(data.error?.message || 'The request could not be completed. Your text is still here.'); error.status = response.status; error.code = data.error?.code; error.retryAfterSeconds = data.error?.details?.retryAfterSeconds; throw error; }
+    return data;
+  }
+  function draftKey(kind) { return `safest-participant:${current?.reference}:${current?.audience}:${kind}`; }
+  function saveDraft(kind) { if (!current) return; try { sessionStorage.setItem(draftKey(kind), JSON.stringify({ text: get(kind === 'reply' ? 'reply' : 'appeal-reason').value, pending: pending[kind], retryAt: retryAt[kind] })); } catch {} }
+  function restoreDraft(kind) { pending[kind] = null; retryAt[kind] = 0; get(kind === 'reply' ? 'reply' : 'appeal-reason').value = ''; try { const saved = JSON.parse(sessionStorage.getItem(draftKey(kind)) || 'null'); if (saved) { get(kind === 'reply' ? 'reply' : 'appeal-reason').value = saved.text || ''; pending[kind] = saved.pending || null; retryAt[kind] = Number(saved.retryAt) || 0; } } catch {} updatePending(kind); }
+  function updatePending(kind) { get(`${kind}-pending`).hidden = !pending[kind]; get(kind === 'reply' ? 'reply' : 'appeal-reason').readOnly = Boolean(pending[kind]); }
+  function paragraph(text) { const p = document.createElement('p'); p.textContent = text; return p; }
+  function date(value) { return new Date(value).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' }); }
+  function showAccess(message) {
+    viewEpoch += 1;
+    current = null; csrf = ''; olderCursor = null; messageHistory.clear();
+    get('messages').replaceChildren(); get('appeals').replaceChildren();
+    for (const id of ['case-reference', 'case-status', 'audience-description']) get(id).textContent = '';
+    for (const kind of ['reply', 'appeal']) { pending[kind] = null; retryAt[kind] = 0; get(kind === 'reply' ? 'reply' : 'appeal-reason').value = ''; updatePending(kind); updateRateWait(kind); }
+    get('access').hidden = false; get('case').hidden = true; get('sign-out').hidden = true; feedback(message, Boolean(message));
+  }
+  // Opening a different fragment on the same /participant document does not
+  // restart scripts. Clear the old case immediately and perform a fresh exchange.
+  addEventListener('hashchange', () => { if (location.hash) { showAccess('Opening your private case…'); location.reload(); } });
+  function renderMessages() {
+    const messages = [...messageHistory.values()].sort((left, right) => left.createdAt < right.createdAt ? -1 : left.createdAt > right.createdAt ? 1 : left.id < right.id ? -1 : left.id > right.id ? 1 : 0);
+    get('messages').replaceChildren(...messages.map(message => { const article = document.createElement('article'); article.className = `message ${message.direction}`; article.dataset.messageId = message.id; const who = document.createElement('strong'); who.textContent = message.direction === 'inbound' ? 'You' : 'Safety team'; const time = document.createElement('time'); time.dateTime = message.createdAt; time.textContent = date(message.createdAt); article.append(who, time, paragraph(message.body)); return article; }));
+    if (!messages.length) get('messages').append(paragraph('Your case is with the safety team. Their updates and your replies will appear here.'));
+    get('older-messages').hidden = !olderCursor;
+  }
+  function renderCase(data) {
+    const first = !current || current.reference !== data.reference || current.audience !== data.audience;
+    current = data; get('access').hidden = true; get('case').hidden = false; get('sign-out').hidden = false;
+    get('case-reference').textContent = data.reference; get('case-status').textContent = data.status;
+    get('audience-description').textContent = data.audience === 'reporter' ? 'You reported this issue. Your messages are shared with the safety team.' : 'This report involves you. Your messages are shared with the safety team.';
+    get('anonymous-warning').hidden = data.recoveryAvailable;
+    get('anonymous-warning').textContent = data.customerReentryAvailable
+      ? 'There is no email on this case. To return later, request a fresh case link through your signed-in account with the service where you reported the issue.'
+      : 'This browser session lasts up to seven days. There is no email on this case for access recovery. Keep this session open; closing it or clearing your browser data can permanently remove your access.';
+    if (first) messageHistory.clear();
+    // Preserve already loaded older messages while refreshing the latest page.
+    // With no overlap, restart paging at the newest page to fill the gap safely.
+    const overlaps = data.messages.some(message => messageHistory.has(message.id));
+    if (first || !overlaps) olderCursor = data.olderMessagesCursor;
+    for (const message of data.messages) messageHistory.set(message.id, message);
+    renderMessages();
+    const labels = { submitted: 'Appeal received', human_review: 'Under independent review', upheld: 'Decision upheld', modified: 'Decision modified', reversed: 'Decision reversed' };
+    get('appeals').replaceChildren(...data.appeals.map(appeal => { const article = document.createElement('article'); article.className = 'appeal'; const heading = document.createElement('strong'); heading.textContent = labels[appeal.state] || 'Appeal in progress'; article.append(heading, paragraph(appeal.reason)); if (appeal.completionState === 'waiting') article.append(paragraph('The appeal has been reviewed. The safety team is still completing the required follow-up.')); return article; }));
+    get('appeal-form').hidden = !data.canAppeal; get('appeal-unavailable').textContent = data.canAppeal ? '' : data.appeals.length ? 'Your appeal is recorded above. You can add information using the message form.' : 'You can request an appeal here after a decision has been recorded.';
+    if (first) { restoreDraft('reply'); restoreDraft('appeal'); }
+  }
+  async function refresh() { const epoch = viewEpoch; const result = await api('case'); if (epoch !== viewEpoch) return; csrf = result.csrfToken; renderCase(result.case); }
+  get('older-messages').addEventListener('click', async () => {
+    if (!olderCursor) return;
+    const button = get('older-messages'); button.disabled = true;
+    const reference = current?.reference; const audience = current?.audience;
+    const previousFirst = get('messages').firstElementChild;
+    const anchorId = previousFirst?.dataset.messageId;
+    const anchorTop = previousFirst?.getBoundingClientRect().top;
+    try {
+      const result = await api(`messages?before=${encodeURIComponent(olderCursor)}`);
+      if (current?.reference !== reference || current?.audience !== audience) return;
+      for (const message of result.messages) messageHistory.set(message.id, message);
+      olderCursor = result.olderMessagesCursor; renderMessages();
+      const anchor = [...get('messages').children].find(element => element.dataset.messageId === anchorId);
+      if (anchor && typeof anchorTop === 'number') scrollBy(0, anchor.getBoundingClientRect().top - anchorTop);
+    } catch (error) { feedback(error.message, true); } finally { button.disabled = false; }
+  });
+  get('refresh-case').addEventListener('click', async () => { const button = get('refresh-case'); button.disabled = true; try { await refresh(); feedback('Your conversation is up to date.'); } catch (error) { feedback(error.message, true); } finally { button.disabled = false; } });
+  function updateRateWait(kind) {
+    const button = get(`${kind}-form`).querySelector('button');
+    const remaining = Math.max(0, Math.ceil((retryAt[kind] - Date.now()) / 1000));
+    if (remaining) { button.disabled = true; button.dataset.rateWait = 'true'; button.textContent = `Try again in ${Math.floor(remaining / 60)}:${String(remaining % 60).padStart(2, '0')}`; }
+    else if (button.dataset.rateWait) { delete button.dataset.rateWait; button.disabled = false; button.textContent = kind === 'reply' ? 'Send to safety team' : 'Submit appeal'; }
+  }
+  setInterval(() => { for (const kind of ['reply', 'appeal']) updateRateWait(kind); }, 1000);
+  for (const kind of ['reply', 'appeal']) {
+    const field = get(kind === 'reply' ? 'reply' : 'appeal-reason'); field.addEventListener('input', () => saveDraft(kind));
+    get(`${kind}-form`).addEventListener('submit', async event => {
+      event.preventDefault(); if (retryAt[kind] > Date.now()) return; const button = event.currentTarget.querySelector('button'); button.disabled = true;
+      if (!pending[kind]) pending[kind] = { key: crypto.randomUUID(), body: kind === 'reply' ? { body: field.value.trim() } : { reason: field.value.trim(), decisionId: current.appealDecisionId } };
+      saveDraft(kind); updatePending(kind);
+      try {
+        await api(kind === 'reply' ? 'messages' : 'appeals', { method: 'POST', headers: { 'idempotency-key': pending[kind].key }, body: JSON.stringify(pending[kind].body) });
+        pending[kind] = null; field.value = ''; saveDraft(kind); updatePending(kind);
+        await refresh(); feedback(kind === 'reply' ? 'Your message was received by the safety team.' : 'Your appeal was received. An independent reviewer will review it.'); get('feedback').scrollIntoView({ block: 'nearest' });
+      } catch (error) {
+        if (error.status && error.status < 500 && error.status !== 408) { pending[kind] = null; saveDraft(kind); updatePending(kind); }
+        if (error.status === 409) { try { await refresh(); } catch {} }
+        if (error.status === 429 && Number.isFinite(error.retryAfterSeconds)) { retryAt[kind] = Date.now() + error.retryAfterSeconds * 1000; saveDraft(kind); updateRateWait(kind); }
+        feedback(error.message, true);
+      } finally { button.disabled = retryAt[kind] > Date.now(); }
+    });
+  }
+  get('recovery-form').addEventListener('submit', async event => { event.preventDefault(); const button = event.currentTarget.querySelector('button'); button.disabled = true; try { const result = await api('recovery', { method: 'POST', body: JSON.stringify({ reference: get('reference').value, email: get('email').value }) }); feedback(result.message); } catch (error) { feedback(error.message, true); } finally { button.disabled = false; } });
+  get('sign-out').addEventListener('click', async () => { if (!current?.recoveryAvailable && !current?.customerReentryAvailable && !confirm('There is no email for access recovery. Closing this session may permanently remove your access. Close it?')) return; try { await api('session', { method: 'DELETE' }); for (const kind of ['reply', 'appeal']) try { sessionStorage.removeItem(draftKey(kind)); } catch {} current = null; showAccess('Your private session is closed.'); } catch (error) { feedback(error.message, true); } });
+  (async () => { if (recovering) { showAccess('Request a new link using the email on your case.'); return; } try { if (invitationRequested) { const result = await api('exchange', { method: 'POST', body: JSON.stringify({ token: token || '' }) }); csrf = result.csrfToken; } await refresh(); feedback(''); } catch (error) { showAccess(invitationRequested ? error.message : 'Open the private link from your report receipt or safety team email, or request a new one below.'); } })();
+})();

package/template/public/public-report.js

@@ -4,6 +4,8 @@ const formError = document.querySelector("#form-error");
 const idempotencyKey = crypto.randomUUID();
 let config;
 let turnstileToken = "";
+let turnstileId = null;
+let submitting = false;
 
 function option(value, label) {
   const element = document.createElement("option");
@@ -120,6 +122,7 @@ try {
   const result = await response.json().catch(() => ({}));
   if (!response.ok) throw new Error(result?.error?.message || "Public reporting is unavailable.");
   config = result;
+  if (config.reporter_notifications_available === false) throw new Error("Reporting is temporarily unavailable. Please contact the service owner or try again later.");
   globalThis.SafestBrand?.applyBrand(config.brand, { title: config.form.title || "Report a safety concern" });
   document.querySelector("#title").textContent = config.form.title;
   document.querySelector("#description").textContent = config.form.description;
@@ -128,7 +131,7 @@ try {
   document.querySelector("#reason").replaceChildren(...config.form.reasons.map((reason) => option(reason.code, reason.label)));
   document.querySelector("#answer-fields").replaceChildren(...(config.form.fields || []).map(renderField));
   const turnstile = await waitForTurnstile();
-  turnstile.render("#turnstile-widget", {
+  turnstileId = turnstile.render("#turnstile-widget", {
     sitekey: config.turnstile_site_key,
     action: "report_submit",
     callback: (token) => { turnstileToken = token; },
@@ -142,6 +145,7 @@ try {
 
 form.addEventListener("submit", async (event) => {
   event.preventDefault();
+  if (submitting) return;
   formError.textContent = "";
   const button = form.querySelector("button");
   if (!turnstileToken) {
@@ -154,6 +158,8 @@ form.addEventListener("submit", async (event) => {
   const evidenceUrl = document.querySelector("#evidence-url").value.trim();
   const timestamp = new Date().toISOString();
   button.disabled = true;
+  submitting = true;
+  button.textContent = "Submitting…";
   try {
     const response = await fetch("/v1/reports/public", {
       method: "POST",
@@ -176,9 +182,23 @@ form.addEventListener("submit", async (event) => {
     form.hidden = true;
     document.querySelector("#receipt-reference").textContent = `Keep reference ${result.reference} for your records.`;
     document.querySelector("#receipt-notification").textContent = `Updates will be sent to ${document.querySelector("#reporter-email").value.trim().toLowerCase()}.`;
+    const caseLink = document.querySelector("#participant-case");
+    try {
+      const url = new URL(result.participant_url);
+      if (url.origin === location.origin && url.pathname === "/participant" && !url.search && /^#access=[a-f0-9]{64}$/.test(url.hash)) caseLink.href = url.href;
+    } catch { /* The access page offers email recovery when no new link was issued. */ }
+    if (!result.participant_url) caseLink.textContent = "Get a private case link";
     document.querySelector("#receipt").hidden = false;
+    const receipt = document.querySelector("#receipt h2");
+    receipt.tabIndex = -1;
+    receipt.focus();
   } catch (error) {
     formError.textContent = error instanceof Error ? error.message : "The report could not be accepted.";
     button.disabled = false;
+    button.textContent = "Submit report";
+    turnstileToken = "";
+    if (turnstileId !== null) globalThis.turnstile?.reset(turnstileId);
+  } finally {
+    submitting = false;
   }
 });

package/template/public/report/index.html

@@ -29,7 +29,7 @@
           <button class="primary" type="submit">Submit report</button>
           <p id="form-error" class="error" role="alert"></p>
         </form>
-        <div id="receipt" class="receipt" hidden><h2>Report received</h2><p id="receipt-reference"></p><p id="receipt-notification"></p></div>
+        <div id="receipt" class="receipt" hidden><h2>Report received</h2><p id="receipt-reference"></p><p id="receipt-notification"></p><p><a id="participant-case" href="/participant" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer">Open your case</a></p><p>Use your private case link to send more information or request an independent review. Keep it private.</p></div>
         <p id="setup-error" class="error" role="alert"></p>
       </article>
     </main>