create-safest-tools 0.6.0 → 0.7.0

package/template/console/reports/ReportDrawer.tsx

@@ -1,15 +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 { 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></>;
@@ -19,6 +29,15 @@ function EmptyLine({ children }: { children: React.ReactNode }) {
   return <p className="detail-empty">{children}</p>;
 }
 
+function ReportCollaborators({ analysts }: { analysts: PresenceAnalyst[] }) {
+  if (!analysts.length) return null;
+  const label = reportPresenceLabel(analysts);
+  return <div className="report-collaborators" aria-label={label}>
+    <span className="presence-avatar-stack" aria-hidden="true">{analysts.slice(0, 3).map((analyst) => <AnalystAvatar analyst={analyst} size="small" key={analyst.actorId} />)}{analysts.length > 3 ? <span className="presence-overflow-avatar">+{analysts.length - 3}</span> : null}</span>
+    <span>{label}</span>
+  </div>;
+}
+
 function answerOptionLabel(answer: ReportAnswer, value: string): string {
   return answer.options?.find((option) => option.value === value)?.label || readable(value);
 }
@@ -103,22 +122,24 @@ const decisionOptions = [
   { value: "duplicate", label: "Duplicate report" },
 ] as const;
 
-function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports, messageReporters, decideReports, 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;
-  pendingAction: "claim" | "release" | "message" | "decision" | null;
+  readEvidence: boolean;
+  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) => {
@@ -133,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(() => {
-    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]);
+    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(() => {
+    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();
@@ -178,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>
@@ -197,48 +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>
-
-      {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>
-
-      {findings.length ? <section><h3>Component findings</h3><div className="finding-result-list">{findings.map((finding, index) => <article key={finding.id ?? `${finding.findingType}-${index}`}><div><strong>{finding.findingType}</strong><small>{finding.summary}{finding.componentVersionId ? ` · component ${finding.componentVersionId}` : ""}{finding.expiresAt ? ` · expires ${dateTime(finding.expiresAt)}` : ""}</small>{finding.data ? <pre>{JSON.stringify(finding.data, null, 2)}</pre> : null}</div><span className={`badge${finding.freshness !== "available" ? " urgent" : ""}`}>{readable(finding.freshness || finding.status)}</span></article>)}</div></section> : null}
-
-      {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></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} 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,39 +1,124 @@
-import { useSyncExternalStore, type ChangeEvent, type MouseEvent } from "react";
-import { AnalystIdentity } from "../components/AnalystIdentity";
+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";
 import { readable, relativeTime } from "../lib/format";
 import { dispatchOpenReport, dispatchReportFilters, dispatchReportRefresh } from "./events";
+import { orderedPresence, partitionPresence, presenceSummaryLabel, reviewersOnReport } from "./presence-presentation";
 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 (
+    <section className="presence-group" aria-label={label}>
+      <h3>{label}<span>{analysts.length}</span></h3>
+      <ul>{analysts.map((analyst) => (
+        <li key={analyst.actorId}>
+          <AnalystIdentity analyst={analyst} detail={analyst.activityLabel} />
+          <span className={`presence-dot ${analyst.activity}`} title={analyst.activityLabel} aria-hidden="true" />
+        </li>
+      ))}</ul>
+    </section>
+  );
 }
 
 function Presence({ analysts }: { analysts: PresenceAnalyst[] }) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLElement>(null);
+  const summaryRef = useRef<HTMLButtonElement>(null);
+  const ordered = orderedPresence(analysts);
+  const groups = partitionPresence(ordered);
+  const summary = presenceSummaryLabel(ordered);
+  const visibleAvatars = ordered.slice(0, 3);
+
+  useEffect(() => {
+    if (!open) return;
+    const closeFromOutside = (event: PointerEvent): void => {
+      if (event.target instanceof Node && !rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    const closeFromKeyboard = (event: KeyboardEvent): void => {
+      if (event.key !== "Escape") return;
+      setOpen(false);
+      requestAnimationFrame(() => summaryRef.current?.focus());
+    };
+    document.addEventListener("pointerdown", closeFromOutside);
+    document.addEventListener("keydown", closeFromKeyboard);
+    return () => {
+      document.removeEventListener("pointerdown", closeFromOutside);
+      document.removeEventListener("keydown", closeFromKeyboard);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!analysts.length) setOpen(false);
+  }, [analysts.length]);
+
+  const close = (): void => {
+    setOpen(false);
+    requestAnimationFrame(() => summaryRef.current?.focus());
+  };
+
   return (
-    <section className="active-analysts" aria-labelledby="active-analysts-title">
-      <div><strong id="active-analysts-title">Live now</strong><span>{analysts.length}</span></div>
-      <div className="active-analyst-list">
-        {analysts.length ? analysts.map((analyst) => (
-          <div className="active-analyst" key={analyst.actorId}>
-            <AnalystIdentity analyst={analyst} detail={analyst.activityLabel} />
-            <span className={`presence-dot ${analyst.activity}`} title={analyst.activityLabel} />
+    <section className={`active-analysts${open ? " open" : ""}`} ref={rootRef} aria-label="Reviewer presence">
+      {ordered.length ? <button
+        className="presence-summary"
+        type="button"
+        ref={summaryRef}
+        aria-expanded={open}
+        aria-controls="reviewer-presence-panel"
+        aria-label={`${summary}. Show reviewer activity.`}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <span className="presence-signal" aria-hidden="true" />
+        <strong>{summary}</strong>
+        <span className="presence-avatar-stack" aria-hidden="true">
+          {visibleAvatars.map((analyst) => <AnalystAvatar analyst={analyst} size="small" key={analyst.actorId} />)}
+          {ordered.length > visibleAvatars.length ? <span className="presence-overflow-avatar">+{ordered.length - visibleAvatars.length}</span> : null}
+        </span>
+        <span className="presence-chevron" aria-hidden="true" />
+      </button> : <div className="presence-summary presence-summary-empty"><span className="presence-signal" aria-hidden="true" /><strong>{summary}</strong></div>}
+
+      {open ? <>
+        <button className="presence-scrim" type="button" aria-label="Close reviewer activity" onClick={close} />
+        <div className="presence-panel" id="reviewer-presence-panel" role="dialog" aria-labelledby="reviewer-presence-title">
+          <span className="presence-sheet-handle" aria-hidden="true" />
+          <header><div><h2 id="reviewer-presence-title">{ordered.length} reviewer{ordered.length === 1 ? "" : "s"} online</h2><p>Live activity across the workspace.</p></div><button className="icon-button" type="button" aria-label="Close reviewer activity" onClick={close}>×</button></header>
+          <div className="presence-panel-body">
+            <PresenceGroup label="Reviewing reports" analysts={groups.reviewing} />
+            <PresenceGroup label="Elsewhere in the workspace" analysts={groups.elsewhere} />
           </div>
-        )) : <p className="active-analyst-empty">No active sessions</p>}
-      </div>
+        </div>
+      </> : null}
     </section>
   );
 }
 
 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 ReportRow({ report }: { report: ReportSummary }) {
+function ReportViewers({ analysts }: { analysts: PresenceAnalyst[] }) {
+  if (!analysts.length) return null;
+  const visible = analysts.slice(0, 3);
+  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" 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} />)}
+          {analysts.length > visible.length ? <span className="presence-overflow-avatar">+{analysts.length - visible.length}</span> : null}
+        </span>
+        <span>{analysts.length} viewing</span>
+      </span>
+      <span className="report-row-viewers-mobile" aria-hidden="true"><i />{analysts.length} viewing</span>
+    </span>
+  );
+}
+
+function ReportRow({ report, presence }: { report: ReportSummary; presence: PresenceAnalyst[] }) {
   const open = (): void => dispatchOpenReport(report.id);
   const openFromButton = (event: MouseEvent<HTMLButtonElement>): void => {
     event.stopPropagation();
@@ -42,7 +127,7 @@ function ReportRow({ report }: { report: ReportSummary }) {
   const priority = priorityName(report.priority);
   return (
     <tr onClick={open}>
-      <td><div className="report-identity"><span className="report-avatar" aria-hidden="true">{String(report.targetReference || report.reference).slice(0, 2).toUpperCase()}</span><span><button className="report-link" type="button" onClick={openFromButton}>{report.reference}</button><small>{report.targetType}: {report.targetReference} · {readable(report.reasonCode)}</small></span></div></td>
+      <td><div className="report-identity"><span className="report-avatar" aria-hidden="true">{String(report.targetReference || report.reference).slice(0, 2).toUpperCase()}</span><span className="report-primary-copy"><button className="report-link" type="button" onClick={openFromButton}>{report.reference}</button><small>{report.targetType}: {report.targetReference} · {readable(report.reasonCode)}</small><span className="report-mobile-meta"><span>{report.queueName}</span><span>{readable(report.state)}</span><span className={`priority-badge ${priority}`}>{readable(priority)}</span></span><ReportViewers analysts={reviewersOnReport(presence, report.id)} /></span></div></td>
       <td><strong>{report.queueName}</strong><small>{readable(report.state)}</small></td>
       <td><span className={`priority-badge ${priority}`}>{readable(priority)}</span></td>
       <td><strong>{relativeTime(report.receivedAt).replace(" ago", "")}</strong><small>{new Date(report.receivedAt).toLocaleString()}</small></td>
@@ -60,26 +145,30 @@ 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>
         </div>
         <div className="table-wrap" aria-busy={snapshot.loading || snapshot.refreshing}>
           <table><thead><tr><th>Report</th><th>Queue</th><th>Priority</th><th>Age</th><th>Owner</th></tr></thead><tbody>
-            {snapshot.loading ? <tr><td colSpan={5}><div className="skeleton-block" /></td></tr> : snapshot.reports.map((report) => <ReportRow report={report} key={report.id} />)}
+            {snapshot.loading ? <tr><td colSpan={5}><div className="skeleton-block" /></td></tr> : snapshot.reports.map((report) => <ReportRow report={report} presence={snapshot.presence} key={report.id} />)}
           </tbody></table>
           {!snapshot.loading && snapshot.reports.length === 0 ? <div className="empty"><span aria-hidden="true">✓</span><h3>No reports in this view</h3><p>New reports will appear here after intake and routing.</p></div> : null}
         </div>