create-safest-tools 0.6.1 → 0.7.0

package/template/console/reports/CaseReviewTasks.tsx

@@ -0,0 +1,148 @@
+import { useEditingAccess } from "./use-editing-access";
+import { readPrivateDraft, savePrivateDraft, removePrivateDraft } from "./private-drafts";
+import { useEffect, useId, useRef, useState, useSyncExternalStore, type FormEvent } from "react";
+import { dateTime, readable } from "../lib/format";
+import { ApiRequestError, errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { dispatchOpenReport, reportEvents } from "./events";
+import type { ReportDetailRecord, ReportDestination } from "./types";
+
+type Task = {
+  id: string; runId: string; state: string; taskType: string; assignedOperatorId: string | null;
+  claimExpiresAt: string | null; dueAt: string | null; actionProposalId: string | null;
+  context: Record<string, unknown>;
+  responseSchema: { properties?: { decision_code?: { enum?: string[] } } };
+};
+
+function ReviewTask({ task, report, actorId, canApprove, canDecide, onChanged }: {
+  task: Task; report: ReportDetailRecord; actorId: string; canApprove: boolean; canDecide: boolean; onChanged: (message: string) => void;
+}) {
+  const fieldId = useId();
+  const approval = Boolean(task.actionProposalId);
+  const options = task.responseSchema?.properties?.decision_code?.enum ?? [];
+  const [savedDraft] = useState(() => readPrivateDraft(actorId, `task:${task.id}`));
+  const [decision, setDecision] = useState(savedDraft?.taskDecision || "");
+  const [rationale, setRationale] = useState(savedDraft?.rationale || "");
+  const [evidence, setEvidence] = useState<string[]>(savedDraft?.evidence || []);
+  const [findings, setFindings] = useState<string[]>(savedDraft?.findings || []);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  const activeRequest = useRef(false);
+  const savedRequest = useRef<{ fingerprint: string; key: string } | null>(null);
+  const dirty = Boolean(decision || rationale || evidence.length || findings.length);
+  const activeAccess = useEditingAccess(task.claimExpiresAt);
+  const mine = task.state === "claimed" && task.assignedOperatorId === actorId && activeAccess;
+  const claimable = task.state === "open" || (task.state === "claimed" && !activeAccess);
+  const canSubmit = approval ? canApprove : canDecide;
+  const title = approval ? "Approve the customer action" : typeof task.context.title === "string" ? task.context.title : "Review the case";
+  const instructions = typeof task.context.instructions === "string" ? task.context.instructions : report.reviewerInstructions;
+  const toggle = (items: string[], value: string, checked: boolean) => checked ? [...new Set([...items, value])] : items.filter(item => item !== value);
+
+  useEffect(() => {
+    savePrivateDraft(actorId,`task:${task.id}`, { message:"",awaitReporter:false,decisionCode:"",policyCode:"",rationale,reporterNotice:"",affectedNotice:"",actionCode:"",evidence,taskDecision:decision,findings });
+  }, [actorId,task.id,rationale,evidence,decision,findings]);
+  useEffect(() => {
+    const leaving = (event: Event) => { if (activeRequest.current) event.preventDefault(); };
+    window.addEventListener(reportEvents.beforeClose, leaving);
+    return () => window.removeEventListener(reportEvents.beforeClose, leaving);
+  }, []);
+
+  const claim = async (release = false) => {
+    if (activeRequest.current) return;
+    activeRequest.current = true; setPending(true); setError("");
+    try {
+      await requestJson(`/v1/admin/tasks/${encodeURIComponent(task.id)}/claim`, { method: release ? "DELETE" : "POST", headers: mutationHeaders(false) });
+      onChanged(release ? "Task editing access released. Your private draft is saved in this tab." : "Task editing access is active. Choose an outcome and explain your reasoning.");
+    } catch (cause) { setError(errorMessage(cause, "The review claim could not be changed.")); }
+    finally { activeRequest.current = false; setPending(false); }
+  };
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!mine || activeRequest.current || !decision || !rationale.trim()) return;
+    const response = approval ? { decision, reason: rationale.trim() } : { decision_code: decision, rationale: rationale.trim(), evidence_references: evidence, finding_ids: findings };
+    const fingerprint = JSON.stringify({ taskId: task.id, response });
+    if (savedRequest.current?.fingerprint !== fingerprint) savedRequest.current = { fingerprint, key: crypto.randomUUID() };
+    activeRequest.current = true; setPending(true); setError("");
+    try {
+      await requestJson(`/v1/admin/tasks/${encodeURIComponent(task.id)}/respond`, { method: "POST", headers: { "content-type": "application/json", "idempotency-key": savedRequest.current.key }, body: JSON.stringify({ response }) });
+      removePrivateDraft(actorId,`task:${task.id}`); setDecision(""); setRationale(""); setEvidence([]); setFindings([]); savedRequest.current = null;
+      onChanged(approval ? "Approval recorded. The playbook will verify the customer action before completing the outcome." : "Review submitted. The playbook is continuing from your saved response.");
+    } catch (cause) { setError(cause instanceof ApiRequestError ? cause.message : "The connection was interrupted. Your response is still here. Retry to check the same submission."); }
+    finally { activeRequest.current = false; setPending(false); }
+  };
+
+  return <article className="case-review-task" data-task-id={task.id} tabIndex={-1} aria-label={title}>
+    <div className="case-review-heading"><div><h4>{title}</h4>{task.dueAt ? <small>Due {dateTime(task.dueAt)}</small> : null}</div><span className="badge">{mine ? "Your review" : readable(task.state)}</span></div>
+    {instructions ? <p className="case-review-instructions">{instructions}</p> : null}
+    {approval ? <div className="case-action-preview"><strong>{readable(String(task.context.action_code || "Customer action"))}</strong><p>Review the exact target and payload before approving.</p><dl><dt>Target</dt><dd><pre tabIndex={0} aria-label="Proposed action target">{JSON.stringify(task.context.target, null, 2)}</pre></dd><dt>Action details</dt><dd><pre tabIndex={0} aria-label="Proposed action details">{JSON.stringify(task.context.payload, null, 2)}</pre></dd></dl></div> : null}
+    {mine ? <p className="form-help">Editing access lasts until {dateTime(task.claimExpiresAt || "")}. Your case ownership stays unchanged. <button type="button" className="text-button" disabled={pending} onClick={() => void claim(true)}>Release task access</button></p> : claimable ? <button className="primary" type="button" disabled={pending || !canSubmit} onClick={() => void claim()}>{pending ? "Starting…" : "Start task"}</button> : <p className="form-help">Another reviewer holds this task. You can continue reading the case.</p>}
+    {approval || options.length ? <form onSubmit={event => void submit(event)}><fieldset disabled={!mine || pending || !canSubmit}><legend>{approval ? "Your approval" : "Your review"}</legend>
+      <div className="case-review-field"><label htmlFor={`${fieldId}-outcome`}>{approval ? "Action approval" : "Review outcome"}</label><select id={`${fieldId}-outcome`} required value={decision} onChange={event => setDecision(event.currentTarget.value)}><option value="">Choose an outcome</option>{(approval ? ["approved", "rejected"] : options).map(code => <option value={code} key={code}>{readable(code)}</option>)}</select></div>
+      <div className="case-review-field"><label htmlFor={`${fieldId}-rationale`}>{approval ? "Approval reason" : "Review rationale"}</label><textarea id={`${fieldId}-rationale`} required maxLength={approval ? 1000 : 2000} value={rationale} onChange={event => setRationale(event.currentTarget.value)} placeholder="Explain what the evidence establishes and how the policy applies." /></div>
+      {!approval ? <div className="case-review-sources"><strong>Sources supporting this decision</strong><p className="form-help">Select only the evidence you considered. Missing information should remain explicit in your rationale.</p>{(report.evidence ?? []).map(item => <label className="checkbox" key={item.reference}><input type="checkbox" checked={evidence.includes(item.reference)} onChange={event => setEvidence(toggle(evidence, item.reference, event.currentTarget.checked))} /><span>{item.reference} · {readable(item.availability)}</span></label>)}{(report.findings ?? []).filter(item => item.id && item.runId === task.runId && item.status === "available").map(item => <label className="checkbox" key={item.id}><input type="checkbox" checked={findings.includes(item.id!)} onChange={event => setFindings(toggle(findings, item.id!, event.currentTarget.checked))} /><span>{item.summary} · {item.componentKey || "Case finding"}</span></label>)}{!report.evidence?.length && !report.findings?.length ? <p>No evidence sources have been recorded yet.</p> : null}</div> : null}
+      <button className="primary" type="submit">{pending ? "Submitting…" : approval ? "Submit action approval" : "Submit review and continue"}</button>
+    </fieldset></form> : <p className="error">This task uses a response form that is not supported in the case workspace yet. Ask an administrator to inspect the published task.</p>}
+    {!canSubmit ? <p className="form-help">{approval ? "Your role can read this task but cannot approve customer actions." : "Your role can read this task but cannot submit a case decision."}</p> : null}
+    {dirty ? <p className="private-draft-status">Private task draft saved in this tab.</p> : null}
+    {error ? <p className="error" role="alert">{error}</p> : null}
+  </article>;
+}
+
+export function CaseReviewTasks({ report, onOutcome, destination }: { report: ReportDetailRecord; onOutcome: () => void; destination?: ReportDestination }) {
+  const shell = useSyncExternalStore(subscribeToShell, getShellSnapshot, getShellSnapshot);
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [notice, setNotice] = useState("");
+  const [epoch, setEpoch] = useState(0);
+  const sectionRef = useRef<HTMLElement>(null);
+  const focusedRequest = useRef(0);
+  useEffect(() => {
+    if (loading || destination?.section !== "review" || !destination.taskId || focusedRequest.current === destination.request) return;
+    const frame = requestAnimationFrame(() => {
+      const target = [...(sectionRef.current?.querySelectorAll<HTMLElement>("[data-task-id]") || [])]
+        .find(element => element.dataset.taskId === destination.taskId);
+      if (!target || !target.getClientRects().length) return;
+      focusedRequest.current = destination.request;
+      target.focus({ preventScroll: true });
+      const content = target.closest<HTMLElement>(".report-detail-content");
+      if (content) {
+        const tabs = content.querySelector(".case-section-tabs")?.getBoundingClientRect().height || 0;
+        content.scrollTop += target.getBoundingClientRect().top - content.getBoundingClientRect().top - tabs - 12;
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [destination, loading, tasks]);
+  const canReview = shell.session?.permissions.reviewTasks === true;
+  useEffect(() => {
+    if (!canReview) { setLoading(false); return; }
+    let active = true; let inFlight = false;
+    const refresh = async () => {
+      if (inFlight || document.visibilityState === "hidden") return;
+      inFlight = true;
+      try {
+        const result = await requestJson<{ tasks: Task[] }>(`/v1/admin/tasks?report_id=${encodeURIComponent(report.id)}&limit=100`);
+        if (active) { setTasks(result.tasks); setError(""); if (!result.tasks.some(task => ["open", "claimed"].includes(task.state))) dispatchOpenReport(report.id); }
+      } catch (cause) { if (active) setError(errorMessage(cause, "Review tasks could not be loaded.")); }
+      finally { inFlight = false; if (active) setLoading(false); }
+    };
+    void refresh(); const timer = setInterval(() => void refresh(), 5000);
+    return () => { active = false; clearInterval(timer); };
+  }, [report.id, canReview, epoch]);
+  const changed = (message: string) => { setNotice(message); setEpoch(value => value + 1); dispatchOpenReport(report.id); };
+  const open = tasks.filter(task => ["open", "claimed"].includes(task.state));
+  const actions = (report.workflowActions || []).filter(action => action.recordKind === "proposal");
+  const unresolved = actions.some(action => action.state !== "applied");
+  const failed = actions.some(action => action.state === "failed" && action.terminal);
+  const waitingNotices = (report.notices || []).some(notice => notice.decisionId && notice.deliveryState !== "delivered");
+  const terminal = report.workflowRuns?.some(run => run.runKind === "primary" && ["succeeded","failed","terminated","repair_required"].includes(run.state));
+  const completed = ["resolved_by_human","resolved_by_ai","closed","appealed"].includes(report.state);
+  return <section ref={sectionRef} className="case-next-step" aria-label="Playbook next step"><div className="case-review-heading"><div><h3>Next step</h3><p>This case follows its published playbook. Complete the current task to continue.</p></div><button className="secondary" type="button" onClick={() => { setEpoch(value => value + 1); dispatchOpenReport(report.id); }}>Refresh progress</button></div>
+    {!canReview ? <p>Your role can read this case. A reviewer with access to its queue must complete the next task.</p> : loading ? <p role="status">Loading the current review…</p> : open.length ? open.map(task => <ReviewTask key={task.id} task={task} report={report} actorId={shell.session!.actor.id} canApprove={shell.session?.permissions.approveActions === true} canDecide={shell.session?.permissions.decideReports === true} onChanged={changed} />) : completed ? <p>The review is recorded. <button type="button" className="text-button" onClick={onOutcome}>Inspect the outcome</button></p>
+      : unresolved ? <p>{failed ? "A customer action needs recovery. The case remains open." : "The playbook is waiting for customer action confirmation."} <button type="button" className="text-button" onClick={onOutcome}>Review customer actions</button></p>
+      : waitingNotices ? <p>Participant notice delivery is still outstanding. <button type="button" className="text-button" onClick={onOutcome}>Review participant notices</button></p>
+      : terminal ? <p>The playbook stopped without a completed outcome. Review its outcome and delivery history before continuing. <button type="button" className="text-button" onClick={onOutcome}>Inspect unresolved work</button></p>
+      : <p>The playbook is continuing. Its next review or approval will appear here.</p>}
+    {notice ? <p role="status">{notice}</p> : null}{error ? <p className="error" role="alert">{error} Use Refresh progress to try again.</p> : null}
+  </section>;
+}

package/template/console/reports/InvestigationBrief.tsx

@@ -0,0 +1,29 @@
+import { readable } from "../lib/format";
+import type { FindingRecord } from "./types";
+const strings=(value:unknown):string[]=>Array.isArray(value)?value.filter((item):item is string=>typeof item==="string"):[];
+const object=(value:unknown):Record<string,unknown>=>value && typeof value==="object" && !Array.isArray(value)?value as Record<string,unknown>:{};
+function gapLabel(value:string) {
+  if(value.includes("budget"))return "The configured investigation budget was reached.";
+  if(value.includes("step_limit") || value.includes("proposal_missing"))return "The investigation reached its limit without a complete proposal.";
+  if(value.includes("time_limit"))return "The investigation timed out before it could complete.";
+  if(value.includes("tool_denied"))return "A requested tool was outside this playbook’s permitted scope.";
+  if(value.startsWith("investigation_") || value.startsWith("agent_"))return "The investigation could not validate a complete proposal. Review the available evidence directly.";
+  return value;
+}
+export function InvestigationBrief({findings,onEvidence}:{findings:FindingRecord[];onEvidence?:()=>void}) {
+  const investigation=[...findings].reverse().find(finding=>finding.findingType==="case-investigation");
+  if(!investigation)return null;
+  const data=object(investigation.data),execution=object(data.investigation);
+  const gaps=strings(data.missing_information),uncertainty=strings(data.uncertainty),citations=strings(data.citations);
+  const sources=Array.isArray(execution.sources)?execution.sources.map(object):[];
+  return <section className="investigation-brief" aria-label="Investigation brief">
+    <div className="investigation-brief-heading"><h3>Investigation brief</h3><span className="badge">{data.result_code==="needs_information"?"Needs more information":"Ready for review"}</span></div>
+    <p>{typeof data.summary==="string"?data.summary:investigation.summary}</p>
+    <p className="form-help">This is a proposal. Check the cited sources and apply your policy before deciding.</p>
+    {execution.fixture===true?<p className="investigation-fixture">Local test model — this result validates workflow behavior only.</p>:null}
+    {gaps.length?<div><h4>Missing information</h4><ul>{gaps.map((gap,index)=><li key={index}>{gapLabel(gap)}</li>)}</ul></div>:null}
+    {uncertainty.length?<div><h4>Uncertainty</h4><ul>{uncertainty.map((item,index)=><li key={index}>{gapLabel(item)}</li>)}</ul></div>:null}
+    <div><h4>Sources considered</h4>{citations.length?<ul>{citations.map(id=>{const finding=findings.find(f=>f.id===id);const source=sources.find(s=>s.id===id);return <li key={id}>{finding?.summary || (typeof source?.label==="string"?readable(source.label):"Case intake")}<small>{id}</small></li>;})}</ul>:<p>No source was validated for this proposal.</p>}{onEvidence && citations.length?<button className="secondary" type="button" onClick={onEvidence}>Review cited evidence</button>:null}</div>
+    <details><summary>Investigation activity</summary><p>{Number(execution.steps)||0} model steps · {Number(execution.tool_calls)||0} tool calls</p>{Array.isArray(execution.trace)?<ol>{execution.trace.map(object).map((entry,index)=><li key={index}>{readable(String(entry.tool))} · {readable(String(entry.status))}</li>)}</ol>:null}<p>{typeof execution.provider==="string"?readable(execution.provider):"Configured provider"} · {String(execution.model||"Configured model")}</p></details>
+  </section>;
+}

package/template/console/reports/ReportDrawer.tsx

@@ -1,17 +1,25 @@
-import { useEffect, useMemo, useState, useSyncExternalStore, type FormEvent } from "react";
+import { useEditingAccess } from "./use-editing-access";
+import { CaseOwnership } from "./CaseOwnership";
+import { readPrivateDraft, savePrivateDraft } from "./private-drafts";
+import { CaseNotices } from "./CaseNotices";
+import { CaseAppeals, RelatedReports } from "./CaseContinuity";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type FormEvent } from "react";
 import { AnalystAvatar } from "../components/AnalystIdentity";
 import { dateTime, readable, relativeTime, safeCustomerUrl } from "../lib/format";
+import { CaseActions } from "./CaseActions";
+import { CaseReviewTasks } from "./CaseReviewTasks";
+import { InvestigationBrief } from "./InvestigationBrief";
 import { EnrichmentFindings } from "./EnrichmentFindings";
 import {
-  dispatchClaimReport,
+  reportEvents,
+  dispatchOpenReport,
   dispatchCloseReport,
   dispatchHumanDecision,
-  dispatchReleaseReport,
   dispatchReporterMessage,
 } from "./events";
 import { otherReviewersOnReport, reportPresenceLabel } from "./presence-presentation";
 import { getReportWorkspaceSnapshot, subscribeToReportWorkspace } from "./store";
-import type { PresenceAnalyst, ReportAnswer, ReportDetailRecord, TimelineEvent } from "./types";
+import type { PresenceAnalyst, ReportAnswer, ReportDetailRecord, ReportDestination, TimelineEvent } from "./types";
 
 function Fact({ label, children }: { label: string; children: React.ReactNode }) {
   return <><dt>{label}</dt><dd>{children || "—"}</dd></>;
@@ -114,23 +122,24 @@ const decisionOptions = [
   { value: "duplicate", label: "Duplicate report" },
 ] as const;
 
-function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports, messageReporters, decideReports, readEvidence, pendingAction, messageMutationVersion, statusMessage, error }: {
+function DetailContent({ report, actorId, actionCodes, messageReporters, decideReports, readEvidence, pendingAction, messageMutationVersion, reviewRequest, destination }: {
+  reviewRequest: number;
+  destination?: ReportDestination;
   report: ReportDetailRecord;
   actorId: string;
-  generatedAt: string;
   actionCodes: string[];
-  claimReports: boolean;
   messageReporters: boolean;
   decideReports: boolean;
   readEvidence: boolean;
-  pendingAction: "claim" | "release" | "message" | "decision" | null;
+  pendingAction: "claim" | "release" | "transfer" | "message" | "decision" | null;
   messageMutationVersion: number;
-  statusMessage: string;
-  error: string;
 }) {
   const evidence = report.evidence ?? [];
   const answers = report.answers ?? [];
   const messages = report.messages ?? [];
+  const [audience, setAudience] = useState("reporter");
+  const conversation = messages.filter(item => (item.audience || "reporter") === audience);
+  const customerFacts = Object.entries(report.customerFacts || {});
   const workflowRuns = report.workflowRuns ?? [];
   const timeline = report.timeline ?? [];
   const caseTimeline = timeline.filter((item) => {
@@ -145,41 +154,55 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
   const decisions = report.decisions ?? [];
   const aiRuns = report.aiRuns ?? [];
   const rules = report.policyRules ?? [];
-  const [selectedEvidence, setSelectedEvidence] = useState<Set<string>>(() => new Set(evidence.map((item) => item.reference)));
-  const [message, setMessage] = useState("");
-  const [awaitReporter, setAwaitReporter] = useState(true);
-  const [decisionCode, setDecisionCode] = useState("no_violation_found");
-  const [policyCode, setPolicyCode] = useState(rules[0]?.code ?? "");
-  const [rationale, setRationale] = useState("");
-  const [reporterNotice, setReporterNotice] = useState("");
-  const [affectedNotice, setAffectedNotice] = useState("");
-  const [actionCode, setActionCode] = useState("");
+  const [caseTab, setCaseTab] = useState("overview");
+  const tabsRef = useRef<HTMLDivElement>(null);
+  const selectTab = (tab: string) => {
+    setCaseTab(tab);
+    requestAnimationFrame(() => tabsRef.current?.closest(".report-detail-content")?.scrollTo({ top: 0, behavior: "auto" }));
+  };
+  const [savedDraft] = useState(() => readPrivateDraft(actorId, report.id));
+  const [selectedEvidence, setSelectedEvidence] = useState<Set<string>>(() => new Set(savedDraft?.evidence ?? evidence.map((item) => item.reference)));
+  const [message, setMessage] = useState(savedDraft?.message ?? (""));
+  const [awaitReporter, setAwaitReporter] = useState(savedDraft?.awaitReporter ?? (true));
+  const [decisionCode, setDecisionCode] = useState(savedDraft?.decisionCode ?? ("no_violation_found"));
+  const [policyCode, setPolicyCode] = useState(savedDraft?.policyCode ?? (rules[0]?.code ?? ""));
+  const [rationale, setRationale] = useState(savedDraft?.rationale ?? (""));
+  const [reporterNotice, setReporterNotice] = useState(savedDraft?.reporterNotice ?? (""));
+  const [affectedNotice, setAffectedNotice] = useState(savedDraft?.affectedNotice ?? (""));
+  const [actionCode, setActionCode] = useState(savedDraft?.actionCode ?? (""));
 
+  useEffect(() => { if (reviewRequest) selectTab("review"); }, [reviewRequest]);
+  useEffect(() => {
+    if (!destination) return;
+    selectTab(destination.section);
+    const frame = requestAnimationFrame(() => {
+      tabsRef.current?.querySelector<HTMLButtonElement>(`#case-tab-${destination.section}`)?.focus({ preventScroll: true });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [destination]);
+  const sentVersion = useRef(messageMutationVersion);
+  useEffect(() => {
+    if (sentVersion.current !== messageMutationVersion) { setMessage(""); sentVersion.current = messageMutationVersion; }
+  }, [messageMutationVersion]);
+  const hasDraft = Boolean(message || rationale || reporterNotice || affectedNotice || actionCode);
+  useEffect(() => {
+    savePrivateDraft(actorId, report.id, { message,awaitReporter,decisionCode,policyCode,rationale,reporterNotice,affectedNotice,actionCode,evidence:[...selectedEvidence] });
+  }, [actorId,report.id,message,awaitReporter,decisionCode,policyCode,rationale,reporterNotice,affectedNotice,actionCode,selectedEvidence]);
   useEffect(() => {
-    setSelectedEvidence(new Set(evidence.map((item) => item.reference)));
-    setMessage("");
-    setAwaitReporter(true);
-    setDecisionCode("no_violation_found");
-    setPolicyCode(rules[0]?.code ?? "");
-    setRationale("");
-    setReporterNotice("");
-    setAffectedNotice("");
-    setActionCode("");
-  }, [report.id]);
-  useEffect(() => setMessage(""), [messageMutationVersion]);
+    const leaving = (event: Event) => { if (pendingAction) event.preventDefault(); };
+    window.addEventListener(reportEvents.beforeClose, leaving);
+    return () => window.removeEventListener(reportEvents.beforeClose, leaving);
+  }, [pendingAction]);
+
 
   const deliveries = useMemo(() => [
     ...(report.actions ?? []).map((action) => ({ id: `action-${action.id ?? action.actionCode}`, title: `Application action · ${readable(action.actionCode)}`, state: action.status, detail: `${action.attemptCount} attempt${action.attemptCount === 1 ? "" : "s"}${action.errorCode ? ` · ${readable(action.errorCode)}` : ""}` })),
-    ...(report.notices ?? []).map((notice) => ({ id: `notice-${notice.id ?? notice.audience}`, title: `${readable(notice.audience)} notice`, state: notice.deliveryState, detail: `Updated ${relativeTime(notice.updatedAt)}` })),
-    ...(report.workflowActions ?? []).filter((action) => action.recordKind === "proposal").map((action) => ({ id: `workflow-${action.id ?? action.actionCode}`, title: `Workflow action · ${readable(action.actionCode)}`, state: action.state, detail: `${readable(action.authorityMode || action.recordKind || "proposal")} · ${action.attemptCount || 0} attempt${action.attemptCount === 1 ? "" : "s"}${action.errorCode ? ` · ${readable(action.errorCode)}` : ""}` })),
   ], [report]);
   const customerUrl = safeCustomerUrl(report.customerUrl);
-  const activeClaim = Boolean(report.claim && Date.parse(report.claim.expiresAt) > Date.parse(generatedAt));
+  const activeClaim = useEditingAccess(report.claim?.expiresAt);
   const mine = Boolean(activeClaim && report.claim?.reviewerId === actorId);
-  const claimable = claimReports && ["human_review", "awaiting_reporter", "human_review_requested"].includes(report.state);
   const canMessage = mine && messageReporters;
   const canDecide = mine && decideReports && rules.length > 0;
-  const changingClaim = pendingAction === "claim" || pendingAction === "release";
 
   const sendMessage = (event: FormEvent<HTMLFormElement>): void => {
     event.preventDefault();
@@ -190,10 +213,14 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
     dispatchHumanDecision({ decisionCode, policyCode, rationale, evidenceReferences: [...selectedEvidence], reporterNotice, affectedUserNotice: affectedNotice, actionCode });
   };
 
-  return (
-    <>
-      <div className="detail-grid">
-        <section className="report-submission"><h3>Reporter submission</h3><dl className="submission-meta">
+  const tabs = [["overview","Overview"],["evidence","Evidence"],["review","Review"],["messages","Messages"],["outcome","Outcome"],["activity","Activity"]];
+  const primaryRun = workflowRuns.find(run => run.runKind === "primary");
+  const missingFindings = findings.filter(finding => ["unavailable","invalid","stale"].includes(finding.status || "") || Boolean(finding.expiresAt && Date.parse(finding.expiresAt) < Date.now()));
+  const unconfirmedActions = (report.workflowActions || []).filter(action => action.recordKind === "proposal" && action.state !== "applied").length + (report.actions || []).filter(action => !["accepted","already_applied"].includes(action.status)).length;
+  const deliveryProblems = (report.notices || []).filter(notice => ["failed","suppressed"].includes(notice.deliveryState)).length;
+  const taskReview = report.playbookManaged || Boolean(destination?.taskId);
+  const panels: Record<string, React.ReactNode> = {
+    overview: <><div className="case-context-grid"><section className="report-submission"><h3>Reporter submission</h3><dl className="submission-meta">
           <Fact label="Form">{report.formTitle || report.formVersionId || "Unknown form"}</Fact>
           <Fact label="Channel">{readable(report.source || "unknown")}</Fact>
           <Fact label="Submitted">{dateTime(report.submittedAt || report.receivedAt)}</Fact>
@@ -209,49 +236,64 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
           <Fact label="Customer content">{customerUrl ? <a className="text-button" href={customerUrl} target="_blank" rel="noopener noreferrer" referrerPolicy="no-referrer">Open in customer application ↗</a> : "Not provided"}</Fact>
           <Fact label="Owner reference">{report.ownerReference || "—"}</Fact>
           <Fact label="Reporter reference">{report.reporterReference || "—"}</Fact>
-          <Fact label="Adjudication policy">{report.policyTitle || "Policy"} · {report.policyVersionId || "unavailable"}</Fact>
-          <Fact label="Queue policy version">{report.queuePolicyVersionId || "—"}</Fact>
+          <Fact label="Adjudication policy">{report.policyTitle || "Policy unavailable"}</Fact>
           <Fact label="Reviewer policy">{report.reviewerInstructions || "—"}</Fact>
           <Fact label="Received">{dateTime(report.receivedAt)}</Fact>
-        </dl></section>
+        </dl></section></div><section className="case-guidance"><h3>Customer context</h3><p>Context supplied at intake is separate from the reporter’s account and retrieved evidence.</p>{customerFacts.length ? <dl className="case-customer-facts">{customerFacts.map(([key,value]) => <div key={key}><dt>{readable(key)}</dt><dd>{typeof value === "boolean" ? value ? "Yes" : "No" : typeof value === "object" ? JSON.stringify(value) : String(value ?? "Not provided")}</dd></div>)}</dl> : <p>No customer context is available in this view.</p>}</section><section className="case-guidance"><h3>What to do next</h3><p>{decisions.length ? unconfirmedActions ? "A decision is recorded. Customer action confirmation is still outstanding." : deliveryProblems ? "A decision is recorded. Check the participant deliveries that need attention." : "Review the recorded outcome and its delivery history." : missingFindings.length ? "Some context is missing or expired. Review the evidence gaps before deciding." : "Read the allegation and available evidence, then complete the playbook’s next step."}</p><button type="button" className="primary" onClick={() => selectTab(decisions.length ? "outcome" : "evidence")}>{decisions.length ? "Inspect outcome" : "Review evidence"}</button></section><RelatedReports report={report} /></>,
+    evidence: <><div className="detail-grid">
         <section><h3>Evidence references considered</h3><div className="evidence-list">
           {evidence.length ? evidence.map((item) => <label className="evidence-item checkbox" key={item.reference}><input type="checkbox" checked={selectedEvidence.has(item.reference)} onChange={(event) => setSelectedEvidence((current) => { const next = new Set(current); if (event.currentTarget.checked) next.add(item.reference); else next.delete(item.reference); return next; })} /><span>{item.reference} · {readable(item.kind)} · {readable(item.availability)}</span></label>) : <EmptyLine>No evidence references were recorded.</EmptyLine>}
-        </div></section>
-      </div>
-
-      <EnrichmentFindings findings={findings} workflowRuns={workflowRuns} permitted={readEvidence} />
-
-      {workflowRuns.length || timeline.length ? <section className="case-activity-section"><div className="case-activity-heading"><div><h3>Case activity</h3><p>A clear record of reporter communication, review, and decisions.</p></div><span>{caseTimeline.length} event{caseTimeline.length === 1 ? "" : "s"}</span></div><div className="report-timeline">{caseTimeline.map((item, index) => <article className="timeline-event" key={item.id ?? `${item.eventType}-${item.createdAt}-${index}`}><span className={`timeline-marker ${item.eventType || "event"}`} aria-hidden="true" /><div><strong>{timelineTitle(item)}</strong><span>{timelineDetail(item)}</span><small>{dateTime(item.createdAt)} · {relativeTime(item.createdAt)} · {readable(item.actorType || "system")}</small></div></article>)}</div>{workflowRuns.length || technicalTimeline.length ? <details className="workflow-technical"><summary>Technical workflow details <span>{workflowRuns.length} workflow run{workflowRuns.length === 1 ? "" : "s"}</span></summary><div className="report-run-list">{workflowRuns.map((run) => <article className="report-run-record" key={run.id}><div><strong>{run.workflowName || run.workflowKey || `Workflow ${String(run.workflowVersionId || run.id).slice(0, 12)}`}</strong><small>{readable(run.runKind || "primary")} · {readable(run.authorityMode || "assist")} · immutable version {run.workflowVersion || String(run.workflowVersionId || "").slice(0, 12)}</small></div><span className={`badge${["failed", "repair_required"].includes(run.state) ? " urgent" : ""}`}>{readable(run.state)}</span></article>)}</div>{technicalTimeline.length ? <p className="technical-event-count">{technicalTimeline.length} low-level execution event{technicalTimeline.length === 1 ? "" : "s"} recorded in the audit trail.</p> : null}</details> : null}</section> : null}
-
-      <section><h3>Case messages</h3><div className="message-list">{messages.length ? messages.map((item, index) => <article className={`case-message ${item.direction}`} key={item.id ?? `${item.createdAt}-${index}`}><div>{item.body}</div><small>{readable(item.senderType)} · {dateTime(item.createdAt)} · {deliveryLabel(item.deliveryState)}{deliveryExplanation(item.deliveryState) ? ` — ${deliveryExplanation(item.deliveryState)}` : ""}</small></article>) : <EmptyLine>No case messages yet.</EmptyLine>}</div></section>
-
-      {decisions.length ? <section><h3>Decisions &amp; rationale</h3><div className="decision-record-list">{decisions.map((decision, index) => <article className="decision-record" key={decision.id ?? `${decision.createdAt}-${index}`}><div><strong>{readable(decision.decisionCode)}</strong><span className="badge">{decision.policyCode || "Policy decision"}</span></div><p>{decision.rationale || "No rationale recorded."}</p><small>{readable(decision.makerType)} · {dateTime(decision.createdAt)} · {(decision.evidenceReferences || []).length} evidence reference(s)</small></article>)}</div></section> : null}
-
-      {deliveries.length ? <section><h3>Decision and delivery</h3><div className="delivery-list">{deliveries.map((delivery) => <article key={delivery.id}><div><strong>{delivery.title}</strong><small>{delivery.detail}{deliveryExplanation(delivery.state) ? ` · ${deliveryExplanation(delivery.state)}` : ""}</small></div><span className={`badge${["failed", "rejected", "bounced", "suppressed"].includes(delivery.state) ? " urgent" : ""}`}>{deliveryLabel(delivery.state)}</span></article>)}</div></section> : null}
+        </div></section></div><EnrichmentFindings findings={findings} workflowRuns={workflowRuns} permitted={readEvidence} /><button className="primary case-continue" type="button" onClick={() => selectTab("review")}>Continue to review</button></>,
+    review: <>{readEvidence ? <InvestigationBrief findings={findings} onEvidence={() => selectTab("evidence")} /> : null}{taskReview ? <CaseReviewTasks key={report.id} report={report} destination={destination} onOutcome={() => selectTab("outcome")} /> : null}<div className="detail-actions case-review-form">{!taskReview && ["human_review", "awaiting_reporter", "human_review_requested"].includes(report.state) ? <form onSubmit={recordDecision}><h3>Record a human decision</h3><label>Decision outcome<select value={decisionCode} onChange={(event) => setDecisionCode(event.currentTarget.value)} disabled={!canDecide || Boolean(pendingAction)} required>{decisionOptions.map((option) => <option value={option.value} key={option.value}>{option.label}</option>)}</select></label><label>Policy code<select value={policyCode} onChange={(event) => setPolicyCode(event.currentTarget.value)} disabled={!canDecide || Boolean(pendingAction)} required>{rules.map((rule) => <option value={rule.code} key={rule.code}>{rule.title ? `${rule.code} · ${rule.title}` : rule.code}</option>)}</select></label><label>Internal rationale<textarea maxLength={8000} value={rationale} onChange={(event) => setRationale(event.currentTarget.value)} disabled={!canDecide || Boolean(pendingAction)} required /></label><label>Reporter outcome<textarea maxLength={4000} value={reporterNotice} onChange={(event) => setReporterNotice(event.currentTarget.value)} disabled={!canDecide || Boolean(pendingAction)} required /></label><label>Affected-user notice <small>Optional; sent through a separate audience channel.</small><textarea maxLength={4000} value={affectedNotice} onChange={(event) => setAffectedNotice(event.currentTarget.value)} disabled={!canDecide || Boolean(pendingAction)} /></label>{actionCodes.length ? <label>Application action <small>Optional. Only deployment-allowlisted actions are shown.</small><select value={actionCode} onChange={(event) => setActionCode(event.currentTarget.value)} disabled={!canDecide || Boolean(pendingAction)}><option value="">No application action</option>{actionCodes.map((code) => <option value={code} key={code}>{readable(code)}</option>)}</select></label> : null}<button className="primary" type="submit" disabled={!canDecide || Boolean(pendingAction)}>{pendingAction === "decision" ? "Recording…" : "Complete human review"}</button></form> : null}</div>{!taskReview && !["human_review","awaiting_reporter","human_review_requested"].includes(report.state) ? <section className="case-guidance"><h3>No decision is waiting here</h3><p>Check Outcome for the recorded decision and Activity for the case’s progress.</p></section> : null}</>,
+    messages: <><section><h3>Case messages</h3><p>Choose an audience to read that conversation.</p><div className="case-audience-picker" role="group" aria-label="Conversation audience">{[["reporter","Reporter"],["affected_user","Affected person"],["internal","Internal team"]].map(([key,label]) => <button className="secondary" type="button" aria-pressed={audience === key} key={key} onClick={() => setAudience(key!)}>{label}</button>)}</div><div className="message-list">{conversation.length ? conversation.map((item, index) => <article className={`case-message ${item.direction}`} key={item.id ?? `${item.createdAt}-${index}`}><strong className="message-audience">{item.audience === "affected_user" ? "Affected person" : item.audience === "internal" ? "Internal team" : "Reporter"}</strong><div>{item.body}</div><small>{readable(item.senderType)} · {dateTime(item.createdAt)} · {deliveryLabel(item.deliveryState)}{deliveryExplanation(item.deliveryState) ? ` — ${deliveryExplanation(item.deliveryState)}` : ""}</small></article>) : <EmptyLine>No messages in this conversation yet.</EmptyLine>}</div></section><div className="detail-actions case-message-form">{audience === "reporter" ? <form onSubmit={sendMessage}><h3>Ask the reporter</h3><p className="form-help">The update is emailed when the reporter supplied an address. Otherwise, Resolve uses the configured signed customer notification channel.</p><label>Message<textarea maxLength={4000} required value={message} onChange={(event) => setMessage(event.currentTarget.value)} disabled={!canMessage || Boolean(pendingAction)} /></label><label className="checkbox"><input type="checkbox" checked={awaitReporter} onChange={(event) => setAwaitReporter(event.currentTarget.checked)} disabled={!canMessage || Boolean(pendingAction)} />Move to awaiting reporter</label><button className="secondary" type="submit" disabled={!canMessage || Boolean(pendingAction)}>{pendingAction === "message" ? "Queueing…" : "Send participant update"}</button></form> : <p>Outcome notices for this audience appear here when they are recorded. Participant delivery follows the case’s configured channels.</p>}</div></>,
+    outcome: <>{decisions.length ? <section><h3>Decisions &amp; rationale</h3><div className="decision-record-list">{decisions.map((decision, index) => <article className="decision-record" key={decision.id ?? `${decision.createdAt}-${index}`}><div><strong>{readable(decision.decisionCode)}</strong><span className="badge">{decision.policyCode || "Policy decision"}</span></div><p>{decision.rationale || "No rationale recorded."}</p><small>{readable(decision.makerType)} · {dateTime(decision.createdAt)} · {(decision.evidenceReferences || []).length} evidence reference(s)</small></article>)}</div></section> : null}{!decisions.length ? <section className="case-guidance"><h3>No decision recorded</h3><p>Complete the required review before proposing a customer action or sending an outcome.</p><button type="button" className="secondary" onClick={() => selectTab("review")}>Open review</button></section> : null}{(report.workflowActions || []).some(action => action.recordKind === "proposal") ? <CaseActions report={report} onReview={() => selectTab("review")} /> : null}<CaseAppeals report={report} />{report.notices?.length ? <CaseNotices report={report} /> : null}{deliveries.length ? <section><h3>Other application deliveries</h3><div className="delivery-list">{deliveries.map((delivery) => <article key={delivery.id}><div><strong>{delivery.title}</strong><small>{delivery.detail}{deliveryExplanation(delivery.state) ? ` · ${deliveryExplanation(delivery.state)}` : ""}</small></div><span className={`badge${["failed", "rejected", "bounced", "suppressed"].includes(delivery.state) ? " urgent" : ""}`}>{deliveryLabel(delivery.state)}</span></article>)}</div></section> : null}{decisions.length && !deliveries.length && !report.notices?.length && !report.workflowActions?.length ? <p>No customer actions or participant notices have been recorded for this decision.</p> : null}</>,
+    activity: <>{report.handoffs?.length ? <section className="case-handoff-history"><h3>Team handoffs</h3>{report.handoffs.map(item => <article key={item.id}><strong>{item.toReviewerId ? "Case transferred" : "Returned to queue"}</strong><p>{item.note}</p><small>{item.authorName} · {dateTime(item.createdAt)}</small></article>)}</section> : null}{workflowRuns.length || timeline.length ? <section className="case-activity-section"><div className="case-activity-heading"><div><h3>Case activity</h3><p>A clear record of reporter communication, review, and decisions.</p></div><span>{caseTimeline.length} event{caseTimeline.length === 1 ? "" : "s"}</span></div><div className="report-timeline">{caseTimeline.map((item, index) => <article className="timeline-event" key={item.id ?? `${item.eventType}-${item.createdAt}-${index}`}><span className={`timeline-marker ${item.eventType || "event"}`} aria-hidden="true" /><div><strong>{timelineTitle(item)}</strong><span>{timelineDetail(item)}</span><small>{dateTime(item.createdAt)} · {relativeTime(item.createdAt)} · {readable(item.actorType || "system")}</small></div></article>)}</div>{workflowRuns.length || technicalTimeline.length ? <details className="workflow-technical"><summary>Technical workflow details <span>{workflowRuns.length} workflow run{workflowRuns.length === 1 ? "" : "s"}</span></summary><div className="report-run-list">{workflowRuns.map((run) => <article className="report-run-record" key={run.id}><div><strong>{run.workflowName || run.workflowKey || `Workflow ${String(run.workflowVersionId || run.id).slice(0, 12)}`}</strong><small>{readable(run.runKind || "primary")} · {readable(run.authorityMode || "assist")} · immutable version {run.workflowVersion || String(run.workflowVersionId || "").slice(0, 12)}</small></div><span className={`badge${["failed", "repair_required"].includes(run.state) ? " urgent" : ""}`}>{readable(run.state)}</span></article>)}</div>{technicalTimeline.length ? <p className="technical-event-count">{technicalTimeline.length} low-level execution event{technicalTimeline.length === 1 ? "" : "s"} recorded in the audit trail.</p> : null}</details> : null}</section> : null} {aiRuns.length ? <section><h3>Bounded AI record</h3><div className="ai-run-list">{aiRuns.map((run, index) => <article key={run.id ?? `${run.model}-${index}`}><div><strong>{readable(run.mode)} · {readable(run.status)}</strong><small>{run.model} · {run.promptVersion} · {run.configVersionId}</small></div><p>{run.summary || readable(run.errorCode || "No validated result")}</p><small>{readable(run.outcome || "no outcome")} · {run.policyCode || "no policy"} · {run.estimatedCostMicrousd || 0} µUSD{run.uncertain ? " · escalated for uncertainty" : ""}</small></article>)}</div></section> : null}{!timeline.length && !workflowRuns.length ? <p>No activity has been loaded for this case.</p> : null}</>,
+  };
+  return <>
 
-      {aiRuns.length ? <section><h3>Bounded AI record</h3><div className="ai-run-list">{aiRuns.map((run, index) => <article key={run.id ?? `${run.model}-${index}`}><div><strong>{readable(run.mode)} · {readable(run.status)}</strong><small>{run.model} · {run.promptVersion} · {run.configVersionId}</small></div><p>{run.summary || readable(run.errorCode || "No validated result")}</p><small>{readable(run.outcome || "no outcome")} · {run.policyCode || "no policy"} · {run.estimatedCostMicrousd || 0} µUSD{run.uncertain ? " · escalated for uncertainty" : ""}</small></article>)}</div></section> : null}
+    {hasDraft ? <p className="private-draft-status" role="status">Private draft saved in this tab. It stays here if you return or transfer the case.</p> : null}
+    {report.handoffs?.[0] ? <details className="latest-handoff"><summary>Latest handoff · {report.handoffs[0].authorName}</summary><p>{report.handoffs[0].note}</p></details> : null}
+    {report.partialLoadErrors?.length ? <p className="error case-load-warning" role="alert">Some case information could not refresh: {report.partialLoadErrors.join(", ")}. Previously loaded information is shown where available. Use Refresh case to retry.</p> : null}
+    <div className="case-section-tabs" ref={tabsRef} role="tablist" aria-label="Case sections">{tabs.map(([key,label],index) => <button key={key} id={`case-tab-${key}`} role="tab" type="button" aria-selected={caseTab === key} aria-controls={`case-panel-${key}`} tabIndex={caseTab === key ? 0 : -1} onClick={() => selectTab(key!)} onKeyDown={event => {
+      const next = event.key === "ArrowRight" ? (index+1)%tabs.length : event.key === "ArrowLeft" ? (index+tabs.length-1)%tabs.length : event.key === "Home" ? 0 : event.key === "End" ? tabs.length-1 : null;
+      if (next === null) return;
+      event.preventDefault(); selectTab(tabs[next]![0]!); tabsRef.current?.querySelectorAll<HTMLButtonElement>('button[role="tab"]')[next]?.focus({ preventScroll:true });
+    }}>{label}</button>)}</div>
+    {caseTab === "overview" ? <section className="case-summary" aria-label="Case summary"><div><span className="context-label">Reported allegation</span><h3>{readable(report.reasonCode)} · {readable(report.targetType)}</h3><p>{report.targetReference}</p></div><div className="case-summary-facts"><span>{evidence.length} evidence reference{evidence.length === 1 ? "" : "s"}</span><span>{findings.length} retrieved finding{findings.length === 1 ? "" : "s"}</span><span>{primaryRun ? `${primaryRun.workflowName || primaryRun.workflowKey || "Playbook"} · version ${primaryRun.workflowVersion || "pinned"}` : "Direct human review"}</span></div>{!decisions.length ? <button className="secondary" type="button" onClick={() => selectTab("review")}>Open next step</button> : <button className="secondary" type="button" onClick={() => selectTab("outcome")}>{unconfirmedActions ? "Check action confirmation" : "View outcome"}</button>}</section> : null}
+    {tabs.map(([key]) => <div className="case-section-panel" id={`case-panel-${key}`} role="tabpanel" aria-labelledby={`case-tab-${key}`} key={key} hidden={caseTab !== key} tabIndex={0}>{panels[key!]}</div>)}
 
-      <div className="claim-bar"><p>{activeClaim && report.claim ? <><AnalystAvatar analyst={report.claim.analyst ?? { displayName: "Another reviewer" }} size="small" />{mine ? "You hold" : `${report.claim.analyst?.displayName || "Another reviewer"} holds`} this report until {new Date(report.claim.expiresAt).toLocaleTimeString()}.</> : "This report must be claimed before a reviewer changes it."}</p><div>{mine ? <button className="secondary" type="button" disabled={changingClaim} onClick={dispatchReleaseReport}>{pendingAction === "release" ? "Releasing…" : "Release"}</button> : null}{claimable && !activeClaim ? <button className="primary" type="button" disabled={changingClaim} onClick={dispatchClaimReport}>{pendingAction === "claim" ? "Claiming…" : "Claim report"}</button> : null}</div></div>
+  </>;
 
-      <div className="detail-actions">
-        <form onSubmit={sendMessage}><h3>Ask the reporter</h3><p className="form-help">The update is emailed when the reporter supplied an address. Otherwise, Resolve uses the configured signed customer notification channel.</p><label>Message<textarea maxLength={4000} required value={message} onChange={(event) => setMessage(event.currentTarget.value)} disabled={!canMessage || pendingAction === "message"} /></label><label className="checkbox"><input type="checkbox" checked={awaitReporter} onChange={(event) => setAwaitReporter(event.currentTarget.checked)} disabled={!canMessage || pendingAction === "message"} />Move to awaiting reporter</label><button className="secondary" type="submit" disabled={!canMessage || pendingAction === "message"}>{pendingAction === "message" ? "Queueing…" : "Send participant update"}</button></form>
-        <form onSubmit={recordDecision}><h3>Record a human decision</h3><label>Decision outcome<select value={decisionCode} onChange={(event) => setDecisionCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required>{decisionOptions.map((option) => <option value={option.value} key={option.value}>{option.label}</option>)}</select></label><label>Policy code<select value={policyCode} onChange={(event) => setPolicyCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required>{rules.map((rule) => <option value={rule.code} key={rule.code}>{rule.title ? `${rule.code} · ${rule.title}` : rule.code}</option>)}</select></label><label>Internal rationale<textarea maxLength={8000} value={rationale} onChange={(event) => setRationale(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Reporter outcome<textarea maxLength={4000} value={reporterNotice} onChange={(event) => setReporterNotice(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Affected-user notice <small>Optional; sent through a separate audience channel.</small><textarea maxLength={4000} value={affectedNotice} onChange={(event) => setAffectedNotice(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} /></label>{actionCodes.length ? <label>Application action <small>Optional. Only deployment-allowlisted actions are shown.</small><select value={actionCode} onChange={(event) => setActionCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"}><option value="">No application action</option>{actionCodes.map((code) => <option value={code} key={code}>{readable(code)}</option>)}</select></label> : null}<button className="primary" type="submit" disabled={!canDecide || pendingAction === "decision"}>{pendingAction === "decision" ? "Recording…" : "Complete human review"}</button></form>
-      </div>
-      <p className="mutation-status" role="status">{statusMessage}</p>
-      <p className="error" role="alert">{error}</p>
-    </>
-  );
 }
 
 export function ReportDrawer() {
   const snapshot = useSyncExternalStore(subscribeToReportWorkspace, getReportWorkspaceSnapshot, getReportWorkspaceSnapshot);
   const detail = snapshot.detail;
   const open = Boolean(detail.reportId);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const previous = document.activeElement;
+    const background = [...document.querySelectorAll<HTMLElement>("main, #workspace-shell-root")].map(element => ({ element, inert:element.inert }));
+    for (const item of background) item.element.inert=true;
+    dialogRef.current?.querySelector<HTMLElement>("h2")?.focus({ preventScroll:true });
+    return () => {
+      for (const item of background) item.element.inert=item.inert;
+      if (previous instanceof HTMLElement && previous.isConnected) previous.focus({ preventScroll:true });
+    };
+  }, [open]);
   const collaborators = detail.report ? otherReviewersOnReport(snapshot.presence, detail.report.id, snapshot.actorId) : [];
   return (
-    <dialog className="detail-dialog report-drawer" open={open} aria-labelledby="report-detail-title" onCancel={(event) => { event.preventDefault(); dispatchCloseReport(); }} data-react-slice="report-drawer">
-      <div className="detail-head"><div><h2 id="report-detail-title">{detail.report?.reference || "Report"}</h2><p>{detail.report ? `${readable(detail.report.state)} · ${readable(detail.report.queueId || "unassigned")}` : "Loading report…"}</p><ReportCollaborators analysts={collaborators} /></div><button className="icon-button" type="button" aria-label="Close report detail" onClick={dispatchCloseReport}>×</button></div>
-      <div className="report-detail-content">{detail.loading && !detail.report ? <div className="skeleton-block" role="status" aria-label="Loading report detail" /> : detail.report ? <DetailContent report={detail.report} actorId={snapshot.actorId} generatedAt={snapshot.generatedAt} actionCodes={snapshot.actionCodes} claimReports={snapshot.permissions.claimReports} messageReporters={snapshot.permissions.messageReporters} decideReports={snapshot.permissions.decideReports} readEvidence={snapshot.permissions.readEvidence} pendingAction={detail.pendingAction} messageMutationVersion={detail.messageMutationVersion} statusMessage={detail.statusMessage} error={detail.error} /> : detail.error ? <p className="error surface-error" role="alert">{detail.error}</p> : null}</div>
+    <dialog ref={dialogRef} onKeyDown={event => {
+      if (event.key !== "Tab" || (event.target instanceof Element && event.target.closest(".case-handoff-dialog"))) return;
+      const controls = [...(dialogRef.current?.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), a[href], [tabindex="0"]') || [])].filter(element => element.tabIndex >= 0 && element.getClientRects().length > 0);
+      const first=controls[0], last=controls.at(-1);
+      if (event.shiftKey && (document.activeElement === first || document.activeElement?.tagName === "H2")) { event.preventDefault(); last?.focus(); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
+    }} className="detail-dialog report-drawer" open={open} aria-labelledby="report-detail-title" aria-modal={open ? true : undefined} onCancel={(event) => { event.preventDefault(); dispatchCloseReport(); }} data-react-slice="report-drawer">
+      <div className="detail-head"><div><h2 id="report-detail-title" tabIndex={-1}>{detail.report?.reference || "Report"}</h2><p>{detail.report ? `${readable(detail.report.state)} · ${(snapshot.queues.find(queue => queue.id === detail.report!.queueId)?.name || readable(detail.report.queueId || "unassigned"))}` : "Loading report…"}</p><ReportCollaborators analysts={collaborators} /></div><div className="case-header-actions">{detail.reportId ? <button className="secondary case-refresh" type="button" aria-label="Refresh case" title="Refresh case" onClick={() => dispatchOpenReport(detail.reportId!)}><span aria-hidden="true">↻</span><span className="case-refresh-label">Refresh case</span></button> : null}<button className="icon-button" type="button" aria-label="Close report detail" onClick={dispatchCloseReport}>×</button></div></div>
+      {detail.report ? <CaseOwnership key={detail.report.id} snapshot={snapshot} /> : null}
+      <div className="report-detail-content">{detail.loading && !detail.report ? <div className="skeleton-block" role="status" aria-label="Loading report detail" /> : detail.report ? <DetailContent key={detail.report.id} reviewRequest={detail.reviewRequest || 0} destination={detail.destination} report={detail.report} actorId={snapshot.actorId} actionCodes={snapshot.actionCodes} messageReporters={snapshot.permissions.messageReporters} decideReports={snapshot.permissions.decideReports} readEvidence={snapshot.permissions.readEvidence} pendingAction={detail.pendingAction} messageMutationVersion={detail.messageMutationVersion} /> : detail.error ? <p className="error surface-error" role="alert">{detail.error}</p> : null}</div>
     </dialog>
   );
 }

package/template/console/reports/ReportWorkspace.tsx

@@ -1,3 +1,4 @@
+import { priorityName } from "../lib/priority";
 import { useEffect, useRef, useState, useSyncExternalStore, type ChangeEvent, type MouseEvent } from "react";
 import { AnalystAvatar, AnalystIdentity } from "../components/AnalystIdentity";
 import { PageHeader } from "../components/PageHeader";
@@ -7,12 +8,6 @@ import { orderedPresence, partitionPresence, presenceSummaryLabel, reviewersOnRe
 import { getReportWorkspaceSnapshot, subscribeToReportWorkspace } from "./store";
 import type { PresenceAnalyst, ReportFilters, ReportPriorityFilter, ReportSort, ReportSummary } from "./types";
 
-function priorityName(priority: number): "high" | "medium" | "low" {
-  if (priority >= 70) return "high";
-  if (priority >= 40) return "medium";
-  return "low";
-}
-
 function PresenceGroup({ label, analysts }: { label: string; analysts: PresenceAnalyst[] }) {
   if (!analysts.length) return null;
   return (
@@ -100,8 +95,8 @@ function Presence({ analysts }: { analysts: PresenceAnalyst[] }) {
 }
 
 function Owner({ report }: { report: ReportSummary }) {
-  if (!report.owner) return <span className="unclaimed">Unclaimed</span>;
-  return <AnalystIdentity analyst={report.owner} detail={report.owner.mine ? "You" : "Claimed"} />;
+  if (!report.owner) return <span className="unclaimed">Unassigned</span>;
+  return <AnalystIdentity analyst={report.owner} detail={report.owner.mine ? "You" : "Case owner"} />;
 }
 
 function ReportViewers({ analysts }: { analysts: PresenceAnalyst[] }) {
@@ -110,7 +105,7 @@ function ReportViewers({ analysts }: { analysts: PresenceAnalyst[] }) {
   const names = analysts.map((analyst) => analyst.displayName).join(", ");
   const label = `${analysts.length} reviewer${analysts.length === 1 ? "" : "s"} viewing this report: ${names}`;
   return (
-    <span className="report-row-viewers" aria-label={label} title={label}>
+    <span className="report-row-viewers" role="img" aria-label={label} title={label}>
       <span className="report-row-viewers-desktop" aria-hidden="true">
         <span className="presence-avatar-stack">
           {visible.map((analyst) => <AnalystAvatar analyst={analyst} size="small" key={analyst.actorId} />)}
@@ -150,19 +145,23 @@ export function ReportWorkspace() {
 
   return (
     <div data-react-slice="report-workspace">
-      <PageHeader title="Reports" description="Review incoming reports and assign ownership." accessory={<span className="live-label"><i />Live queue</span>}>
+      <PageHeader title="Cases" description="Understand what happened, review the evidence, and follow each outcome." accessory={<span className="live-label"><i />Live queue</span>}>
         <Presence analysts={snapshot.presence} />
       </PageHeader>
 
       <section className="surface report-surface" aria-labelledby="inbox-title">
+        <div className="ownership-filters" role="group" aria-label="Case ownership">
+          {([["", "All"], ["mine", "My work"], ["unassigned", "Unassigned"]] as const).map(([value, label]) => <button type="button" key={value} aria-pressed={(snapshot.filters.ownership || "") === value} onClick={() => dispatchReportFilters({ ...snapshot.filters, ownership: value, state: value === "mine" ? "" : "needs_review" })}>{label}</button>)}
+        </div>
         <h2 id="inbox-title" className="visually-hidden">Accepted reports</h2>
         <div className="surface-head">
           <div className="queue-toolbar">
             <label className="search-field"><span aria-hidden="true">⌕</span><input type="search" placeholder="Search reports" aria-label="Search reports" value={snapshot.filters.search} onChange={search} /></label>
             <label>Queue<select value={snapshot.filters.queueId} onChange={(event) => updateFilter("queueId", event.currentTarget.value)}><option value="">All queues</option>{snapshot.queues.map((queue) => <option value={queue.id} key={queue.id}>{queue.name}</option>)}</select></label>
-            <label>Priority<select value={snapshot.filters.priority} onChange={(event) => updateFilter("priority", event.currentTarget.value as ReportPriorityFilter)}><option value="">All priorities</option><option value="high">High</option><option value="medium">Medium</option><option value="low">Low</option></select></label>
+            <label>Priority<select value={snapshot.filters.priority} onChange={(event) => updateFilter("priority", event.currentTarget.value as ReportPriorityFilter)}><option value="">All priorities</option><option value="urgent">Urgent</option><option value="high">High</option><option value="medium">Medium</option><option value="low">Low</option></select></label>
             <label>Age<select value={snapshot.filters.age} onChange={(event) => updateFilter("age", event.currentTarget.value as ReportFilters["age"])}><option value="">Any age</option><option value="hour">Under 1 hour</option><option value="day">Under 24 hours</option><option value="older">Older than 24 hours</option></select></label>
-            <label>State<select value={snapshot.filters.state} onChange={(event) => updateFilter("state", event.currentTarget.value)}><option value="">All states</option><option value="received">Received</option><option value="human_review">Human review</option><option value="awaiting_reporter">Awaiting reporter</option><option value="resolved_by_human">Resolved by human</option></select></label>
+            <label>State<select value={snapshot.filters.state} onChange={(event) => updateFilter("state", event.currentTarget.value)}><option value="">All states</option><option value="needs_review">Needs review</option><option value="received">Received</option><option value="human_review">Human review</option><option value="awaiting_reporter">Awaiting reporter</option><option value="resolved_by_human">Resolved by human</option><option value="resolved_by_ai">Resolved by AI</option><option value="human_review_requested">Human review requested</option><option value="appealed">Appealed</option><option value="closed">Closed</option></select></label>
+            <label>Owner<select value={snapshot.filters.ownership || ""} onChange={(event) => updateFilter("ownership", event.currentTarget.value as ReportFilters["ownership"])}><option value="">All owners</option><option value="unassigned">Unassigned</option><option value="mine">Assigned to me</option></select></label>
             <label>Sort<select value={snapshot.filters.sort} onChange={(event) => updateFilter("sort", event.currentTarget.value as ReportSort)}><option value="oldest">Oldest first</option><option value="newest">Newest first</option><option value="priority">Priority first</option></select></label>
           </div>
           <button className="icon-button refresh-button" type="button" aria-label="Refresh reports" disabled={snapshot.refreshing} onClick={dispatchReportRefresh}>{snapshot.refreshing ? "…" : "↻"}</button>