create-safest-tools 0.6.0 → 0.7.0

package/template/console/appeals/AppealWorkspace.tsx

@@ -4,6 +4,12 @@ import { PageHeader } from "../components/PageHeader";
 import { dispatchAppealDecision, dispatchAppealRefresh, dispatchClaimAppeal, dispatchCloseAppeal, dispatchOpenAppeal } from "./events";
 import { getAppealWorkspaceSnapshot, subscribeToAppealWorkspace } from "./store";
 import type { AppealOutcome, AppealRecord } from "./types";
+import { RecordAppealDialog } from "./RecordAppealDialog";
+import { dispatchOpenReport } from "../reports/events";
+import { getAppealWorkspaceSnapshot as getCurrentAppeals } from "./store";
+import { useAppealDraftGuard } from "./useAppealDraftGuard";
+import { AppealFollowup } from "./AppealFollowup";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
 
 function AppealRow({ appeal }: { appeal: AppealRecord }) {
   return (
@@ -17,23 +23,25 @@ function AppealRow({ appeal }: { appeal: AppealRecord }) {
 }
 
 export function AppealWorkspace() {
+  const [recording, setRecording] = useState(false);
   const snapshot = useSyncExternalStore(subscribeToAppealWorkspace, getAppealWorkspaceSnapshot, getAppealWorkspaceSnapshot);
   return (
     <div className="page-stack" data-react-slice="appeal-workspace">
       <PageHeader titleId="appeals-title" title="Appeals" description="Review contested decisions with a separate human owner.">
-        <div className="surface-buttons"><button className="secondary" type="button" disabled={snapshot.refreshing || !snapshot.canReview} onClick={dispatchAppealRefresh}>{snapshot.refreshing ? "Refreshing…" : "Refresh"}</button></div>
+        <div className="surface-buttons">{snapshot.canReview ? <button className="primary" type="button" onClick={() => setRecording(true)}>Record participant appeal</button> : null}<button className="secondary" type="button" disabled={snapshot.refreshing || !snapshot.canReview} onClick={dispatchAppealRefresh}>{snapshot.refreshing ? "Refreshing…" : "Refresh"}</button></div>
       </PageHeader>
       <section className="surface appeals-surface" aria-labelledby="appeals-title">
         <div className="appeal-list" aria-busy={snapshot.loading || snapshot.refreshing}>
           {snapshot.loading ? <div className="skeleton-block" role="status" aria-label="Loading appeals" /> : snapshot.appeals.length ? snapshot.appeals.map((appeal) => <AppealRow appeal={appeal} key={appeal.id} />) : <div className="empty"><span aria-hidden="true">✓</span><h3>No appeals in this view</h3><p>New appeals will appear here when a participant contests a decision.</p></div>}
         </div>
         <p className="error surface-error" role="alert">{snapshot.error}</p>
-      </section>
+      </section><RecordAppealDialog open={recording} onClose={() => setRecording(false)} />
     </div>
   );
 }
 
 export function AppealDialog() {
+  const shell=useSyncExternalStore(subscribeToShell,getShellSnapshot,getShellSnapshot);
   const snapshot = useSyncExternalStore(subscribeToAppealWorkspace, getAppealWorkspaceSnapshot, getAppealWorkspaceSnapshot);
   const dialogRef = useRef<HTMLDialogElement>(null);
   const rationaleRef = useRef<HTMLTextAreaElement>(null);
@@ -43,7 +51,15 @@ export function AppealDialog() {
   const appeal = snapshot.detail.appeal;
   const activeClaim = Boolean(appeal?.reviewerId && appeal.claimExpiresAt && Date.parse(appeal.claimExpiresAt) > Date.parse(snapshot.generatedAt));
   const mine = Boolean(activeClaim && appeal?.reviewerId === snapshot.actorId);
-  const disabled = !mine || snapshot.detail.pendingAction === "decision";
+  const complete = Boolean(appeal && !["submitted", "human_review"].includes(appeal.state));
+  const disabled = complete || !mine || !shell.session?.permissions.decideAppeals || Boolean(snapshot.detail.pendingAction);
+  useAppealDraftGuard(Boolean(snapshot.detail.appealId), !complete && Boolean(rationale || participantNotice || outcome !== "upheld"), Boolean(snapshot.detail.pendingAction));
+  useEffect(()=>{
+    if(!snapshot.detail.appealId)return;
+    const timer=window.setInterval(()=>{if(!document.hidden&&!getCurrentAppeals().detail.pendingAction)dispatchAppealRefresh();},10000);
+    return()=>window.clearInterval(timer);
+  },[snapshot.detail.appealId]);
+  const openOriginal=()=>{dispatchCloseAppeal();if(!getCurrentAppeals().detail.appealId&&appeal?.reportId)dispatchOpenReport(appeal.reportId);};
 
   useEffect(() => {
     const dialog = dialogRef.current;
@@ -66,7 +82,20 @@ export function AppealDialog() {
   return (
     <dialog ref={dialogRef} className="detail-dialog appeal-dialog" aria-labelledby="appeal-reference" onCancel={(event) => { event.preventDefault(); dispatchCloseAppeal(); }} data-react-slice="appeal-dialog">
       <div className="detail-head"><div><h2 id="appeal-reference">{appeal ? `${appeal.reportReference} appeal` : "Appeal"}</h2><p>{appeal ? readable(appeal.state) : "Loading appeal…"}</p></div><button className="icon-button" type="button" aria-label="Close appeal" onClick={dispatchCloseAppeal}>×</button></div>
-      {appeal ? <><p>{appeal.reason}</p><div className="claim-bar"><p>{mine ? "This appeal is claimed by you." : activeClaim ? "Another reviewer currently owns this appeal." : "Appeals require a separate human reviewer."}</p>{!activeClaim && snapshot.canReview ? <button className="primary" type="button" disabled={snapshot.detail.pendingAction === "claim"} onClick={dispatchClaimAppeal}>{snapshot.detail.pendingAction === "claim" ? "Claiming…" : "Claim appeal"}</button> : null}</div><form onSubmit={submit}><label>Outcome<select value={outcome} disabled={disabled} onChange={(event) => setOutcome(event.currentTarget.value as AppealOutcome)}><option value="upheld">Uphold</option><option value="modified">Modify</option><option value="reversed">Reverse</option></select></label><label>Internal rationale<textarea ref={rationaleRef} maxLength={8000} required disabled={disabled} value={rationale} onChange={(event) => setRationale(event.currentTarget.value)} /></label><label>Participant notice<textarea maxLength={4000} required disabled={disabled} value={participantNotice} onChange={(event) => setParticipantNotice(event.currentTarget.value)} /></label><button className="primary" type="submit" disabled={disabled}>{snapshot.detail.pendingAction === "decision" ? "Recording…" : "Record appeal decision"}</button></form></> : null}
+      {appeal ? <>
+        <section className="case-guidance"><h3>Participant’s challenge</h3><p>{appeal.reason}</p></section>
+        {appeal.originalDecisionCode ? <section className="surface"><h3>Original decision</h3><p>{readable(appeal.originalDecisionCode)} · {appeal.originalPolicyCode}</p><p>{appeal.originalRationale}</p>{appeal.reportId ? <button type="button" className="secondary" onClick={openOriginal}>Open original report</button> : null}</section> : null}
+        {complete ? <AppealFollowup key={appeal.id} appeal={appeal} actorId={shell.session?.permissions.decideAppeals?snapshot.actorId:""} /> : <>
+          <div className="claim-bar"><p>{mine ? "This appeal is claimed by you." : activeClaim ? "Another reviewer currently owns this appeal." : "Appeals require a separate human reviewer."}</p>{!activeClaim && snapshot.canReview ? <button className="primary" type="button" disabled={snapshot.detail.pendingAction === "claim"} onClick={dispatchClaimAppeal}>{snapshot.detail.pendingAction === "claim" ? "Claiming…" : "Claim appeal"}</button> : null}</div>
+          <form onSubmit={submit}><label>Outcome<select value={outcome} disabled={disabled} onChange={event=>setOutcome(event.currentTarget.value as AppealOutcome)}><option value="upheld">Uphold</option><option value="modified">Modify</option><option value="reversed">Reverse</option></select></label>
+            {outcome!=="upheld"?<p>A changed verdict may require a correction in the customer application. The original action remains recorded; verify any correction in the follow-up after submitting.</p>:null}
+            <label>Internal rationale<textarea ref={rationaleRef} maxLength={8000} required disabled={disabled} value={rationale} onChange={event=>setRationale(event.currentTarget.value)} /></label>
+            <label>Participant notice<textarea maxLength={4000} required disabled={disabled} value={participantNotice} onChange={event=>setParticipantNotice(event.currentTarget.value)} /></label>
+            <p>This notice is sent only to the participant who appealed. Keep other participants’ identities and internal notes out of it.</p>
+            <button className="primary" type="submit" disabled={disabled}>{snapshot.detail.pendingAction === "decision" ? "Recording…" : "Record appeal decision"}</button>
+          </form>
+        </>}
+      </> : null}
       <p className="error" role="alert">{snapshot.detail.error}</p>
     </dialog>
   );

package/template/console/appeals/RecordAppealDialog.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useId, useRef, useState, type FormEvent } from "react";
+import { errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import { dispatchReportRefresh } from "../reports/events";
+import { dispatchAppealRefresh } from "./events";
+
+export function RecordAppealDialog({ open, onClose, reportReference = "", onRecorded }: { open: boolean; onClose: () => void; reportReference?: string; onRecorded?: () => void }) {
+  const titleId = useId();
+  const ref = useRef<HTMLDialogElement>(null);
+  const key = useRef(crypto.randomUUID());
+  const [reference, setReference] = useState("");
+  const [audience, setAudience] = useState("reporter");
+  const [reason, setReason] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    if (open) { key.current = crypto.randomUUID(); setReference(reportReference); setReason(""); setAudience("reporter"); setError(""); ref.current?.showModal(); }
+    else ref.current?.close();
+  }, [open, reportReference]);
+  const dirty = Boolean(reason || audience !== "reporter" || reference !== reportReference);
+  const close = () => { if (!pending && (!dirty || window.confirm("Discard this unsent appeal?"))) onClose(); };
+  useEffect(() => {
+    const unload = (event: BeforeUnloadEvent) => { if (open && (dirty || pending)) { event.preventDefault(); event.returnValue = ""; } };
+    window.addEventListener("beforeunload",unload); return () => window.removeEventListener("beforeunload",unload);
+  },[open,dirty,pending]);
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault(); if (pending) return; setPending(true); setError("");
+    try {
+      await requestJson("/v1/admin/appeals", { method: "POST", headers: { ...mutationHeaders(), "idempotency-key": key.current }, body: JSON.stringify({ report_reference: reference, audience, reason }) });
+      dispatchAppealRefresh(); dispatchReportRefresh(); onRecorded?.(); onClose();
+    } catch (cause) { setError(errorMessage(cause, "The appeal could not be recorded.")); }
+    finally { setPending(false); }
+  };
+  return <dialog ref={ref} className="editor-dialog" aria-labelledby={titleId} onKeyDown={event=>event.stopPropagation()} onCancel={(event) => { event.preventDefault(); event.stopPropagation(); close(); }}>
+    <div className="detail-head"><div><h2 id={titleId}>Record participant appeal</h2><p>Record a contest received from a participant by email or your support channel. A separate reviewer will assess the original decision.</p></div><button type="button" className="icon-button" disabled={pending} aria-label="Close appeal form" onClick={close}>×</button></div>
+    <form className="editor-form" onSubmit={(event) => void submit(event)}>
+      <label>Report reference<input required readOnly={Boolean(reportReference)} maxLength={100} placeholder="RPT-…" disabled={pending} value={reference} onChange={(event) => setReference(event.currentTarget.value)} /></label>
+      <label>Participant<select value={audience} disabled={pending} onChange={(event) => setAudience(event.currentTarget.value)}><option value="reporter">Reporter</option><option value="affected_user">Affected user</option></select></label>
+      <label>Reason for appeal<textarea required minLength={3} maxLength={8000} disabled={pending} value={reason} onChange={(event) => setReason(event.currentTarget.value)} /></label>
+      <p className="error" role="alert">{error}</p><div className="editor-footer"><button type="button" className="secondary" disabled={pending} onClick={close}>Cancel</button><button type="submit" className="primary" disabled={pending}>{pending ? "Recording…" : "Record appeal"}</button></div>
+    </form>
+  </dialog>;
+}

package/template/console/appeals/appeal-corrections.css

@@ -0,0 +1,29 @@
+.appeal-dialog > .detail-head { background: var(--paper, #fff); }
+.appeal-correction-card { border: 1px solid var(--line, #d8dfdc); border-radius: 12px; padding: 16px; margin-block: 16px; min-width: 0; }
+.appeal-correction-form { display: grid; gap: 16px; min-width: 0; }
+.appeal-correction-form label:not(.appeal-correction-approval) { display: grid; gap: 6px; font-size: .875rem; }
+.appeal-correction-form input:not([type="checkbox"]), .appeal-correction-form select, .appeal-correction-form textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; min-height: 44px; }
+.appeal-correction-form textarea { min-height: 96px; }
+.appeal-correction-approval { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; }
+.appeal-correction-approval input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
+.appeal-correction-card dd, .appeal-operation-reference { overflow-wrap: anywhere; }
+.appeal-operation-reference { font-size: 0.875rem; }
+.appeal-correction-progress h5 { font-size: 1rem; margin-block: 16px 8px; }
+@media (max-width: 600px) { .appeal-correction-card { padding: 12px; } .appeal-correction-form button { width: 100%; min-height: 44px; white-space: normal; } }
+
+/* Target identifiers need the full card width. A shared two-column dl otherwise
+   lets a long URL consume one column and squeezes the owner into a few letters. */
+.appeal-correction-card .appeal-target-summary { min-width: 0; margin-block: 16px; }
+.appeal-correction-card .appeal-target-fields { display: block; margin: 0; }
+.appeal-correction-card .appeal-target-fields > div { display: block; min-width: 0; margin-block: 0 12px; }
+.appeal-correction-card .appeal-target-fields dt { display: block; float: none; font-size: .8125rem; color: var(--muted, #5c6862); margin: 0 0 4px; }
+.appeal-correction-card .appeal-target-fields dd { display: block; margin: 0; min-width: 0; max-width: 100%; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; word-break: normal; }
+.appeal-target-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; margin-block: 12px; }
+.appeal-target-link a { display: inline-flex; align-items: center; min-height: 44px; }
+.appeal-target-link > span { color: var(--muted, #5c6862); font-size: .8125rem; overflow-wrap: anywhere; min-width: 0; }
+.appeal-target-facts summary, .appeal-operation-details summary { display: list-item; min-height: 44px; padding-block: 10px; margin-inline-start: 1.1em; box-sizing: border-box; cursor: pointer; }
+.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; }

package/template/console/appeals/controller.ts

@@ -1,4 +1,4 @@
-import { errorMessage, requestJson } from "../lib/http";
+import { ApiRequestError, errorMessage, requestJson } from "../lib/http";
 import { dispatchReportRefresh } from "../reports/events";
 import { getShellSnapshot, subscribeToShell } from "../shell/store";
 import { appealEvents } from "./events";
@@ -19,7 +19,11 @@ const initialSnapshot = (): AppealWorkspaceSnapshot => ({
 });
 
 let actorId = "";
+let accessSignature = "";
 let started = false;
+let listVersion = 0;
+let detailVersion = 0;
+let decisionRetry: {appealId:string;actorId:string;key:string} | null = null;
 
 function permissions(snapshot: AppealWorkspaceSnapshot): AppealWorkspaceSnapshot {
   const session = getShellSnapshot().session;
@@ -27,6 +31,7 @@ function permissions(snapshot: AppealWorkspaceSnapshot): AppealWorkspaceSnapshot
 }
 
 async function loadAppeals(): Promise<void> {
+  const version = ++listVersion;
   const session = getShellSnapshot().session;
   if (!session?.permissions.reviewAppeals) {
     setAppealWorkspaceSnapshot(permissions({ ...initialSnapshot(), loading: false }));
@@ -36,26 +41,39 @@ async function loadAppeals(): Promise<void> {
   setAppealWorkspaceSnapshot(permissions({ ...current, error: "", refreshing: !current.loading }));
   try {
     const result = await requestJson<AppealListResponse>("/v1/admin/appeals?limit=100");
+    if (version !== listVersion || session.actor.id !== getShellSnapshot().session?.actor.id) return;
     setAppealWorkspaceSnapshot((snapshot) => {
       const appeals = result.appeals || [];
       const selected = snapshot.detail.appealId ? appeals.find((appeal) => appeal.id === snapshot.detail.appealId) || null : null;
-      return permissions({ ...snapshot, appeals, detail: selected ? { ...snapshot.detail, appeal: selected } : snapshot.detail });
+      return permissions({ ...snapshot, appeals, detail: selected ? { ...snapshot.detail, appeal: {...snapshot.detail.appeal,...selected} } : snapshot.detail });
     });
   } catch (cause) {
-    setAppealWorkspaceSnapshot((snapshot) => ({ ...snapshot, error: errorMessage(cause, "Appeals could not be loaded.") }));
+    if (version === listVersion) setAppealWorkspaceSnapshot((snapshot) => ({ ...snapshot, error: errorMessage(cause, "Appeals could not be loaded.") }));
   } finally {
-    setAppealWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, loading: false, refreshing: false }));
+    if (version === listVersion) setAppealWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, loading: false, refreshing: false }));
   }
 }
 
-function openAppeal(appealId: string): void {
+async function openAppeal(appealId: string, refresh = false): Promise<void> {
+  const current=getAppealWorkspaceSnapshot();
+  if (!current.canReview) return;
+  if (current.detail.appealId && current.detail.appealId !== appealId && !window.dispatchEvent(new Event(appealEvents.beforeClose,{cancelable:true}))) return;
+  const version=++detailVersion;
   setAppealWorkspaceSnapshot((snapshot) => {
     const appeal = snapshot.appeals.find((candidate) => candidate.id === appealId) || null;
-    return appeal ? permissions({ ...snapshot, detail: { appealId, appeal, error: "", pendingAction: null } }) : snapshot;
+    return refresh ? snapshot : permissions({ ...snapshot, detail: { appealId, appeal: snapshot.detail.appealId===appealId?snapshot.detail.appeal:appeal, error: "", pendingAction: null } });
   });
+  try {
+    const result = await requestJson<{ appeal: AppealRecord }>(`/v1/admin/appeals/${encodeURIComponent(appealId)}`);
+    if(version===detailVersion) setAppealWorkspaceSnapshot((snapshot) => snapshot.detail.appealId === appealId ? { ...snapshot, detail: { ...snapshot.detail, appeal: result.appeal } } : snapshot);
+  } catch (cause) {
+    if(version===detailVersion) setAppealWorkspaceSnapshot((snapshot) => snapshot.detail.appealId === appealId ? { ...snapshot, detail: { ...snapshot.detail, ...(cause instanceof ApiRequestError && [401,403,404].includes(cause.status)?{appeal:null}:{}), error: errorMessage(cause, "Appeal details could not be loaded.") } } : snapshot);
+  }
 }
 
-function closeAppeal(): void {
+function closeAppeal(committed = false): void {
+  if (!committed && !window.dispatchEvent(new Event(appealEvents.beforeClose,{cancelable:true}))) return;
+  detailVersion++;
   setAppealWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, detail: { appealId: null, appeal: null, error: "", pendingAction: null } }));
 }
 
@@ -67,6 +85,7 @@ async function claimAppeal(): Promise<void> {
   try {
     await requestJson(`/v1/admin/appeals/${encodeURIComponent(appeal.id)}/claim`, { method: "POST" });
     await loadAppeals();
+    await openAppeal(appeal.id);
   } catch (cause) {
     setAppealWorkspaceSnapshot((current) => ({ ...current, detail: { ...current.detail, error: errorMessage(cause, "The appeal could not be claimed.") } }));
   } finally {
@@ -78,8 +97,9 @@ async function recordDecision(input: AppealDecisionInput): Promise<void> {
   const snapshot = getAppealWorkspaceSnapshot();
   const appeal = snapshot.detail.appeal;
   const activeClaim = Boolean(appeal && appeal.reviewerId === snapshot.actorId && appeal.claimExpiresAt && Date.parse(appeal.claimExpiresAt) > Date.now());
-  if (!appeal || !snapshot.canReview || snapshot.detail.pendingAction || !activeClaim) return;
-  const idempotencyKey = crypto.randomUUID();
+  if (!appeal || !getShellSnapshot().session?.permissions.decideAppeals || snapshot.detail.pendingAction || !activeClaim) return;
+  if (!decisionRetry || decisionRetry.appealId!==appeal.id || decisionRetry.actorId!==snapshot.actorId) decisionRetry={appealId:appeal.id,actorId:snapshot.actorId,key:crypto.randomUUID()};
+  const idempotencyKey = decisionRetry.key;
   setAppealWorkspaceSnapshot({ ...snapshot, detail: { ...snapshot.detail, error: "", pendingAction: "decision" } });
   try {
     await requestJson(`/v1/admin/appeals/${encodeURIComponent(appeal.id)}/decision`, {
@@ -87,10 +107,13 @@ async function recordDecision(input: AppealDecisionInput): Promise<void> {
       headers: { "content-type": "application/json", "idempotency-key": idempotencyKey },
       body: JSON.stringify({ idempotency_key: idempotencyKey, outcome: input.outcome, rationale: input.rationale, participant_notice: input.participantNotice }),
     });
-    closeAppeal();
+    decisionRetry=null;
+    if (getAppealWorkspaceSnapshot().detail.appealId!==appeal.id || getShellSnapshot().session?.actor.id!==snapshot.actorId) return;
+    closeAppeal(true);
     await loadAppeals();
     dispatchReportRefresh();
   } catch (cause) {
+    if (cause instanceof ApiRequestError && cause.status>=400 && cause.status<500) decisionRetry=null;
     setAppealWorkspaceSnapshot((current) => ({ ...current, detail: { ...current.detail, error: errorMessage(cause, "The appeal decision could not be recorded.") } }));
   } finally {
     setAppealWorkspaceSnapshot((current) => permissions({ ...current, detail: { ...current.detail, pendingAction: null } }));
@@ -103,19 +126,22 @@ export function startAppealController(): void {
   subscribeToShell(() => {
     const session = getShellSnapshot().session;
     const nextActorId = session?.actor.id || "";
-    if (nextActorId === actorId) {
+    const nextAccessSignature = JSON.stringify({permissions:session?.permissions,queueScope:session?.queueScope});
+    if (nextActorId === actorId && nextAccessSignature === accessSignature) {
       setAppealWorkspaceSnapshot((snapshot) => permissions(snapshot));
       return;
     }
     actorId = nextActorId;
+    accessSignature = nextAccessSignature;
+    listVersion++; detailVersion++; decisionRetry=null;
     setAppealWorkspaceSnapshot(initialSnapshot());
     if (session) void loadAppeals();
   });
-  window.addEventListener(appealEvents.refresh, () => { void loadAppeals(); });
+  window.addEventListener(appealEvents.refresh, () => { void loadAppeals(); const id=getAppealWorkspaceSnapshot().detail.appealId; if(id)void openAppeal(id,true); });
   window.addEventListener(appealEvents.open, (event) => {
-    if (event instanceof CustomEvent && typeof event.detail?.appealId === "string") openAppeal(event.detail.appealId);
+    if (event instanceof CustomEvent && typeof event.detail?.appealId === "string") void openAppeal(event.detail.appealId);
   });
-  window.addEventListener(appealEvents.close, closeAppeal);
+  window.addEventListener(appealEvents.close, () => closeAppeal());
   window.addEventListener(appealEvents.claim, () => { void claimAppeal(); });
   window.addEventListener(appealEvents.decision, (event) => {
     if (!(event instanceof CustomEvent) || !event.detail || !["upheld", "modified", "reversed"].includes(event.detail.outcome)) return;

package/template/console/appeals/events.ts

@@ -5,6 +5,7 @@ export const appealEvents = {
   refresh: "safest:appeals:refresh",
   open: "safest:appeals:open",
   close: "safest:appeals:close",
+  beforeClose: "safest:appeals:before-close",
   claim: "safest:appeals:claim",
   decision: "safest:appeals:decision",
 } as const;

package/template/console/appeals/types.ts

@@ -3,6 +3,12 @@ export type AppealPendingAction = "claim" | "decision" | null;
 
 export interface AppealRecord {
   id: string;
+  reportId?: string;
+  originalDecisionCode?: string;
+  originalPolicyCode?: string;
+  originalRationale?: string;
+  originalMakerId?: string;
+  decisions?: Array<{ id: string; outcome: string; rationale: string; reviewerId: string; completionState: string; correctionRequired: number; correctionReference: string | null; correctionNote: string | null; correctionConfirmedAt: string | null; correctionConfirmedBy: string | null; noticeState: string | null }>;
   reportReference: string;
   appellantAudience: string;
   submittedAt: string;

package/template/console/appeals/useAppealDraftGuard.ts

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { appealEvents } from "./events";
+
+export function useAppealDraftGuard(open:boolean,dirty:boolean,pending:boolean) {
+  useEffect(()=>{
+    if(!open)return;
+    const close=(event:Event)=>{if(pending || (dirty&&!window.confirm("Discard your unsent appeal changes?")))event.preventDefault();};
+    const unload=(event:BeforeUnloadEvent)=>{if(dirty||pending){event.preventDefault();event.returnValue="";}};
+    window.addEventListener(appealEvents.beforeClose,close); window.addEventListener("beforeunload",unload);
+    return()=>{window.removeEventListener(appealEvents.beforeClose,close);window.removeEventListener("beforeunload",unload);};
+  },[open,dirty,pending]);
+}

package/template/console/assistant/AssistantWorkspace.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useSyncExternalStore, type FormEvent, type KeyboardEvent } from "react";
 import { PageHeader } from "../components/PageHeader";
 import { relativeTime } from "../lib/format";
-import { errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import { ApiRequestError, errorMessage, mutationHeaders, requestJson } from "../lib/http";
 import { dispatchOpenReport } from "../reports/events";
 import { dispatchNavigation } from "../shell/events";
 import { getShellSnapshot, subscribeToShell } from "../shell/store";
@@ -9,7 +9,7 @@ import type { AssistantHistory, AssistantMessage, AssistantSessionResponse } fro
 
 const prompts = [
   "How many phishing reports were resolved yesterday?",
-  "List unresolved workflow failures and show their current state.",
+  "Find spam",
 ] as const;
 const roleNames: Record<string, string> = { reviewer: "Analyst", appeal_reviewer: "Appeal analyst", administrator: "Administrator", owner: "Infrastructure owner", auditor: "Auditor" };
 const readable = (value: string): string => value.replaceAll("_", " ").replace(/^./u, (letter) => letter.toUpperCase());
@@ -28,14 +28,33 @@ export function AssistantWorkspace() {
   const [error, setError] = useState("");
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const messagesRef = useRef<HTMLDivElement>(null);
+  const sendingRef = useRef(false);
   const canUse = shell.session?.permissions.useAssistant === true;
 
   useEffect(() => {
+    let current = true;
     setSessionId("");
     setHistory(null);
     setDraft("");
     setError("");
-  }, [shell.session?.actor.id]);
+    setPending("");
+    const actor = shell.session?.actor.id;
+    if (!actor || !canUse) return;
+    const key = `safest-assistant:${actor}`;
+    let saved = "";
+    try { saved = sessionStorage.getItem(key) || ""; } catch { /* Browser storage may be disabled. */ }
+    if (!saved) return;
+    setPending("new");
+    void requestJson<AssistantHistory>(`/v1/admin/assistant/sessions/${encodeURIComponent(saved)}`).then((result) => {
+      if (current) { setSessionId(saved); setHistory(result); }
+    }).catch((cause) => {
+      if (!current) return;
+      if (cause instanceof ApiRequestError && [404, 409].includes(cause.status)) {
+        try { sessionStorage.removeItem(key); } catch { /* Storage is optional. */ }
+      } else setError(errorMessage(cause, "Your conversation could not be restored. Refresh to try again."));
+    }).finally(() => { if (current) setPending(""); });
+    return () => { current = false; };
+  }, [shell.session?.actor.id, canUse]);
 
   useEffect(() => {
     const focus = (): void => { requestAnimationFrame(() => inputRef.current?.focus()); };
@@ -55,6 +74,7 @@ export function AssistantWorkspace() {
     try {
       const result = await requestJson<AssistantSessionResponse>("/v1/admin/assistant/sessions", { method: "POST", headers: mutationHeaders(false) });
       setSessionId(result.sessionId);
+      try { sessionStorage.setItem(`safest-assistant:${shell.session?.actor.id}`, result.sessionId); } catch { /* Conversation remains usable without browser storage. */ }
       setHistory({ session: { id: result.sessionId, timezone: result.timezone, expiresAt: result.expiresAt }, messages: [], toolCalls: [] });
       setDraft("");
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -70,10 +90,11 @@ export function AssistantWorkspace() {
   const send = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
     event.preventDefault();
     const body = draft.trim();
-    if (!body || !canUse) return;
+    if (!body || !canUse || sendingRef.current || pending) return;
+    sendingRef.current = true;
     let activeSessionId = sessionId;
     if (!activeSessionId) activeSessionId = await createConversation() ?? "";
-    if (!activeSessionId) return;
+    if (!activeSessionId) { sendingRef.current = false; return; }
     const optimistic: AssistantMessage = { id: crypto.randomUUID(), role: "user", body, citations: [], createdAt: new Date().toISOString() };
     setDraft("");
     setPending("send");
@@ -91,6 +112,7 @@ export function AssistantWorkspace() {
       setDraft(body);
       setError(errorMessage(cause, "Safest could not answer that question."));
     } finally {
+      sendingRef.current = false;
       setPending("");
     }
   };
@@ -103,6 +125,7 @@ export function AssistantWorkspace() {
   const onComposerKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
+      if (sendingRef.current || pending) return;
       event.currentTarget.form?.requestSubmit();
     }
   };