create-safest-tools 0.6.1 → 0.7.0

package/template/console/registry/IntegrationVerification.tsx

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { workflowEvents } from "../workflows/events";
+import type { IntegrationVerificationList, IntegrationVerification as Check } from "../../shared/integration-progress";
+import { dateTime } from "../lib/format";
+import { errorMessage, postJson, requestJson } from "../lib/http";
+import { dispatchOpenReport } from "../reports/events";
+import { settingsEvents } from "../settings/events";
+import { registryEvents } from "./events";
+import "./integration-verification.css";
+
+const stateLabel: Record<Check['state'],string> = { awaiting_case:"Waiting for a fresh report",in_progress:"Check in progress",blocked:"Needs attention",stale:"Configuration changed",verified:"Selected outcome verified" };
+export function IntegrationVerification() {
+  const shell = useSyncExternalStore(subscribeToShell, getShellSnapshot, getShellSnapshot);
+  const [data,setData] = useState<IntegrationVerificationList|null>(null), [error,setError] = useState(''), [busy,setBusy] = useState(false);
+  const [integration,setIntegration] = useState(''), [form,setForm] = useState(''), [queue,setQueue] = useState(''), [decision,setDecision] = useState('');
+  const [activeId,setActiveId] = useState(''), [candidate,setCandidate] = useState('');
+  const generation = useRef(0);
+  const load = useCallback(async()=>{const version=++generation.current;setBusy(true);setError('');try {const result=await requestJson<IntegrationVerificationList>('/v1/admin/integration-verifications');if(version===generation.current)setData(result);}catch(cause){if(version===generation.current)setError(errorMessage(cause,'Verification could not refresh.'));}finally{if(version===generation.current)setBusy(false);}},[]);
+  useEffect(()=>{if(shell.currentView==='components')void load();return()=>{generation.current++;};},[load,shell.currentView]);
+  useEffect(()=>{const refresh=()=>void load();window.addEventListener(registryEvents.changed,refresh);window.addEventListener(settingsEvents.channelsChanged,refresh);window.addEventListener(workflowEvents.changed,refresh);return()=>{window.removeEventListener(registryEvents.changed,refresh);window.removeEventListener(settingsEvents.channelsChanged,refresh);window.removeEventListener(workflowEvents.changed,refresh);};},[load]);
+  const choices=data?.choices;
+  const selectedIntegration=choices?.integrations.find(item=>item.id===integration);
+  const selectedPlaybook=choices?.playbooks.find(item=>item.queueId===queue);
+  const selectedForm=selectedIntegration?.formVersionId||form;
+  const active=data?.runs.find(item=>item.id===activeId)||data?.runs[0];
+  useEffect(()=>{setCandidate('');},[active?.id]);
+  useEffect(()=>{if(choices?.integrations.length===1&&!integration)setIntegration(choices.integrations[0]!.id);if(choices?.playbooks.length===1&&!queue)setQueue(choices.playbooks[0]!.queueId);},[choices,integration,queue]);
+  const save = async(path:string,body:unknown)=>{const version=++generation.current;setBusy(true);setError('');try {const result=await postJson<Check>(path,body);if(version!==generation.current)return;setActiveId(result.id);setData(previous=>previous?{...previous,runs:[result,...previous.runs.filter(item=>item.id!==result.id)].slice(0,5)}:previous);}catch(cause){if(version===generation.current)setError(errorMessage(cause,'The check could not be saved.'));}finally{if(version===generation.current)setBusy(false);}};
+  return <section className="integration-verification surface" aria-label="Verify a customer connection">
+    <div className="surface-head"><div><h2>Verify one complete customer journey</h2><p>Follow one fresh case from your reporting channel to a confirmed outcome using the current configuration.</p></div><button type="button" className="secondary" disabled={busy} onClick={()=>void load()}>{busy?'Checking…':'Refresh verification'}</button></div>
+    <form className="verification-start" onSubmit={event=>{event.preventDefault();void save('/v1/admin/integration-verifications',{integration_id:integration,form_version_id:selectedForm,queue_id:queue,decision_code:decision});}}>
+      <label>Reporting integration<select value={integration} onChange={event=>{setIntegration(event.target.value);setForm('');}} required disabled={busy}><option value="">Choose an integration</option>{choices?.integrations.map(item=><option key={item.id} value={item.id}>{item.name}</option>)}</select></label>
+      <label>Reporting form<select value={selectedForm} onChange={event=>setForm(event.target.value)} required disabled={busy||Boolean(selectedIntegration?.formVersionId)}><option value="">Choose a form</option>{choices?.forms.filter(item=>!selectedIntegration?.formVersionId||item.id===selectedIntegration.formVersionId).map(item=><option key={item.id} value={item.id}>{item.name}</option>)}</select></label>
+      <label>Queue and active playbook<select value={queue} onChange={event=>{setQueue(event.target.value);setDecision('');}} required disabled={busy}><option value="">Choose a queue</option>{choices?.playbooks.map(item=><option key={item.queueId} value={item.queueId}>{item.queueName} · {item.name}</option>)}</select></label>
+      <label>Outcome to verify<select value={decision} onChange={event=>setDecision(event.target.value)} required disabled={busy||!selectedPlaybook}><option value="">Choose an outcome</option>{selectedPlaybook?.decisionCodes.map(code=><option key={code} value={code}>{code.replaceAll('_',' ')}</option>)}</select></label>
+      <p className="form-help">Use a safe test account and target. Starting a check changes no customer data. The case you submit afterward follows normal action approvals and participant delivery.</p>
+      <button className="primary" type="submit" disabled={busy||!integration||!selectedForm||!queue||!decision}>Start a new verification</button>
+    </form>
+    {data&&!choices?.integrations.length?<p className="case-guidance">Set up a reporting integration before starting a check.</p>:null}
+    {data&&!choices?.playbooks.length?<p className="case-guidance">Publish and activate a primary playbook for an accessible queue first.</p>:null}
+    {data&&data.runs.length>1?<label className="verification-history">Recent checks<select value={active?.id||''} onChange={event=>setActiveId(event.target.value)}>{data.runs.map(run=><option key={run.id} value={run.id}>{run.integrationName} · {run.decisionCode.replaceAll('_',' ')} · {dateTime(run.startedAt)}</option>)}</select></label>:null}
+    {active?<article className="verification-run" aria-label="Current verification" aria-busy={busy}>
+      <div className="verification-summary"><h3>{active.integrationName} · {active.decisionCode.replaceAll('_',' ')}</h3><strong className={`verification-state verification-state-${error?'blocked':active.state}`} role="status">{error?'Verification unavailable':stateLabel[active.state]}</strong><p>{active.formName} → {active.queueName} → {active.playbookName}</p><small>Started {dateTime(active.startedAt)}</small></div>
+      {active.localSandbox?<p className="case-guidance">Local sandbox check. These records do not verify production providers or delivery.</p>:null}
+      {active.state==='stale'?<p className="case-guidance">The configuration changed since this check started. Start a new verification, then submit another fresh report. These results cannot verify the current setup.</p>:null}
+      {active.report?<button className="secondary" type="button" onClick={()=>dispatchOpenReport(active.report!.id)}>Open case {active.report.reference}</button>:null}
+      {active.state==='awaiting_case'?<div className="verification-bind"><p>Submit a report through <strong>{active.integrationName}</strong> using <strong>{active.formName}</strong>, with an example that should reach <strong>{active.queueName}</strong> and the selected outcome. Refresh after the report reaches its playbook.</p>{active.candidates.length?<><label>Fresh report to follow<select value={candidate} onChange={event=>setCandidate(event.target.value)} disabled={busy}><option value="">Choose the report you submitted</option>{active.candidates.map(item=><option key={item.id} value={item.id}>{item.reference} · {dateTime(item.receivedAt)}</option>)}</select></label><button type="button" disabled={busy||!candidate} onClick={()=>void save(`/v1/admin/integration-verifications/${active.id}/bind`,{report_id:candidate})}>Follow this case</button></>:<p className="form-help">No matching fresh case has reached this queue yet. If a report is missing, check its routing in Cases. Earlier reports cannot verify this check.</p>}</div>:null}
+      <ol className="verification-evidence">{active.stages.map(item=><li key={item.key} data-state={item.state}><div><strong>{item.title}</strong><span>{item.state==='complete'?'Confirmed':item.state==='not_required'?'Not required':item.state==='blocked'?'Needs attention':'Waiting'}</span></div><p>{item.detail}</p></li>)}</ol>
+      <p className="form-help">This check covers this integration, form, queue, playbook and selected outcome only. Verify other customer action paths separately. Status is rechecked against current configuration whenever you refresh.</p>
+    </article>:null}
+    {error?<p role="alert" className="error">{error} {data?'Refresh before relying on previously displayed results.':''}</p>:null}
+  </section>;
+}

package/template/console/registry/RegistryDetailsDialog.tsx

@@ -239,7 +239,7 @@ export function RegistryDetailsDialog({ item, kind, canManage, onClose, onChange
               <button className="danger-link" type="button" disabled={Boolean(pending) || dependencyList.length > 0} onClick={() => setConfirmArchive(true)}>Archive {kind === "component" ? "tool" : "connection"}</button>
             </div>
             {dependencyList.length ? <p className="registry-blocked-copy">Archive is unavailable until the dependencies above are retired or moved to another version.</p> : null}
-            {confirmArchive ? <div className="registry-archive-confirm" role="alert"><div><strong>Archive {item.name}?</strong><p>It will disappear from normal lists and cannot be restored. Version and audit records will remain.</p></div><div><button className="secondary" type="button" disabled={Boolean(pending)} onClick={() => setConfirmArchive(false)}>Cancel</button><button className="danger" type="button" disabled={Boolean(pending)} onClick={() => void setLifecycle("archive")}>{pending === "archive" ? "Archiving…" : "Archive permanently"}</button></div></div> : null}
+            {confirmArchive ? <div className="registry-archive-confirm" role="alert"><div><strong>Archive {item.name}?</strong><p>It will disappear from normal lists and cannot be restored. Version and audit records will remain.</p></div><div><button className="secondary" type="button" disabled={Boolean(pending)} onClick={() => setConfirmArchive(false)}>Cancel</button><button className="danger-action" type="button" disabled={Boolean(pending)} onClick={() => void setLifecycle("archive")}>{pending === "archive" ? "Archiving…" : "Archive permanently"}</button></div></div> : null}
           </section> : null}
         </>}
         <p className="error" role="alert">{error}</p>

package/template/console/registry/RegistryDialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type FormEvent } from "react";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type FormEvent, type MouseEvent } from "react";
 import { errorMessage, mutationHeaders, requestJson } from "../lib/http";
 import { getShellSnapshot, subscribeToShell } from "../shell/store";
 import { announceRegistryChanged, registryEvents } from "./events";
@@ -80,12 +80,16 @@ export function RegistryDialog() {
   const [paths, setPaths] = useState("/");
   const [credential, setCredential] = useState<CredentialStrategy>("none");
   const [secretReference, setSecretReference] = useState("");
+  const [correctionEnabled, setCorrectionEnabled] = useState(false);
+  const [correctionCode, setCorrectionCode] = useState("");
+  const [correctsCodes, setCorrectsCodes] = useState("");
 
   const reset = (): void => {
     setStep(0); setName(""); setKey(""); setKeyEdited(false); setDescription(""); setPurpose("enrichment");
     setImplementation("external_api"); setReference("POST /"); setConnectionVersionId(""); setRisk("low");
     setInputFields("report.id, report.reason_code"); setClassifications("report_operational"); setInputSchema(inputSchemaDefault); setOutputSchema(outputSchemaDefault);
     setFixtureInput(fixtureInputDefault); setFixtureOutput(fixtureOutputDefault);
+    setCorrectionEnabled(false); setCorrectionCode(""); setCorrectsCodes("");
     setConnectionKind("external_api"); setTargetMode("url"); setBaseUrl(""); setServiceBinding(""); setMethods("POST"); setPaths("/"); setCredential("none"); setSecretReference(""); setError("");
   };
   const close = (): void => { if (!pending) { setKind(null); reset(); } };
@@ -127,11 +131,20 @@ export function RegistryDialog() {
 
   const selectPurpose = (next: ToolPurpose): void => {
     setPurpose(next);
+    if (next !== "action") setCorrectionEnabled(false);
     if (next === "enrichment") { setImplementation("external_api"); setReference("POST /"); setRisk("low"); }
     if (next === "action") { setImplementation("external_api"); setReference("POST /"); setRisk("high"); }
     if (next === "ai") { setImplementation("workers_ai"); setReference("@cf/meta/llama-3.1-8b-instruct"); setRisk("medium"); }
   };
 
+  const useCorrectionContract = (): void => {
+    setInputFields("reason, original_operation_id");
+    setInputSchema(JSON.stringify({ type: "object", properties: { reason: { type: "string", minLength: 1, maxLength: 2000 }, original_operation_id: { type: "string", minLength: 1 } }, required: ["reason", "original_operation_id"], additionalProperties: false }, null, 2));
+    setFixtureInput(JSON.stringify({ reason: "An independent appeal reversed the original decision.", original_operation_id: "example-original-operation" }, null, 2));
+    setOutputSchema(JSON.stringify({ type: "object", properties: { action_id: { type: "string" }, operation_id: { type: "string" }, payload_digest: { type: "string" }, status: { type: "string", enum: ["accepted", "applied", "failed"] } }, required: ["action_id", "operation_id", "payload_digest", "status"] }, null, 2));
+    setFixtureOutput(JSON.stringify({ action_id: "example-correction", operation_id: "example-correction-operation", payload_digest: `sha256:${"a".repeat(64)}`, status: "applied" }, null, 2));
+  };
+
   const changeImplementation = (next: ImplementationKind): void => {
     setImplementation(next); setConnectionVersionId("");
     if (["webhook", "external_api"].includes(next)) setReference("POST /");
@@ -156,6 +169,9 @@ export function RegistryDialog() {
       if (kind === "component") {
         if (!reference.trim()) { setError(`Enter the ${referenceLabel(implementation).toLowerCase()}.`); return false; }
         if (needsConnection && !connectionVersionId) { setError("Select the connection this tool should use."); return false; }
+        if (isAction && correctionEnabled && (!/^[a-z][a-z0-9_:-]{0,99}$/u.test(correctionCode) || !commaValues(correctsCodes).length || !commaValues(correctsCodes).every(code => /^[a-z][a-z0-9_:-]{0,99}$/u.test(code)))) {
+          setError("Enter the correction action code and the original action codes it can correct."); return false;
+        }
         if (!commaValues(inputFields).length || !commaValues(classifications).length) { setError("Add at least one allowed input field and data classification."); return false; }
         try {
           jsonObject(inputSchema, "Input schema"); jsonObject(outputSchema, "Output schema");
@@ -169,7 +185,12 @@ export function RegistryDialog() {
     return true;
   };
 
-  const next = (): void => { if (validateStep()) setStep((current) => Math.min(2, current + 1)); };
+  const next = (event: MouseEvent<HTMLButtonElement>): void => {
+    // Prevent the same click from submitting if React changes Continue into
+    // the submit button while rendering the final review step.
+    event.preventDefault();
+    if (validateStep()) setStep((current) => Math.min(2, current + 1));
+  };
   const back = (): void => { setError(""); setStep((current) => Math.max(0, current - 1)); };
 
   const submit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
@@ -200,7 +221,7 @@ export function RegistryDialog() {
               connection_version_id: needsConnection ? connectionVersionId : null, risk_class: risk,
               timeout_policy: { timeout_ms: 5000 }, retry_policy: { maximum_attempts: isAction ? 5 : 3, backoff: "exponential" },
               cache_policy: { enabled: !isAction }, concurrency_policy: { maximum_concurrency: 8 }, budget_policy: {},
-              approval_policy: isAction ? { mode: "human" } : {}, tool_manifest: [],
+              approval_policy: isAction ? { mode: "human", ...(correctionEnabled ? { correction: { action_code: correctionCode, corrects_action_codes: commaValues(correctsCodes) } } : {}) } : {}, tool_manifest: [],
               compatibility: { fixture_evidence: { fixtures: [{ name: "Contract example", input: jsonObject(fixtureInput, "Example input"), expected_output: jsonObject(fixtureOutput, "Example output"), expected_status: "succeeded", mode: "simulated" }] } },
             },
           }),
@@ -218,6 +239,15 @@ export function RegistryDialog() {
       <label>{referenceLabel(implementation)}<input value={reference} onChange={(event) => setReference(event.currentTarget.value)} /><small>{needsConnection ? "For example: POST /v1/enrich/report" : "An immutable runtime reference."}</small></label>
       {needsConnection ? <label className="wide-field">Connection<select value={connectionVersionId} onChange={(event) => setConnectionVersionId(event.currentTarget.value)}><option value="">Select a connection</option>{activeConnections.map((connection) => <option value={connection.activeVersionId || ""} key={connection.id}>{connection.name} · v{connection.version || 1}</option>)}</select>{!activeConnections.length ? <small>No active connections are available. Cancel this setup and add a connection first.</small> : <small>The tool pins this exact connection version for reproducibility.</small>}</label> : null}
       <label>Risk level<select value={risk} onChange={(event) => setRisk(event.currentTarget.value)}><option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option><option value="critical">Critical</option></select></label>
+      {isAction ? <label className="wide-field"><span><input type="checkbox" checked={correctionEnabled} onChange={event => {
+        setCorrectionEnabled(event.currentTarget.checked);
+        if (event.currentTarget.checked && inputSchema === inputSchemaDefault && outputSchema === outputSchemaDefault) useCorrectionContract();
+      }} /> Use for appeal corrections</span><small>Only an explicitly approved appeal correction can use this capability to correct an earlier customer action.</small></label> : null}
+      {isAction && correctionEnabled ? <>
+        <label>Correction action code<input value={correctionCode} maxLength={100} placeholder="restore_message" onChange={event => setCorrectionCode(event.currentTarget.value)} /><small>The action code accepted by your customer endpoint.</small></label>
+        <label>Original action codes<input value={correctsCodes} maxLength={1000} placeholder="hide_message" onChange={event => setCorrectsCodes(event.currentTarget.value)} /><small>Comma-separated codes this capability is allowed to correct.</small></label>
+        <div className="wide-field"><p>The correction pins the original operation automatically. Reviewers provide the reason and any additional typed fields in your contract.</p><button type="button" className="secondary" onClick={useCorrectionContract}>Use standard correction contract</button><small>Replaces the input/output schemas and examples with the reason, original operation and signed receipt contract.</small></div>
+      </> : null}
       <label>Data classifications<input value={classifications} onChange={(event) => setClassifications(event.currentTarget.value)} /><small>Comma-separated labels used for governance.</small></label>
       <label className="wide-field">Allowed report fields<input value={inputFields} onChange={(event) => setInputFields(event.currentTarget.value)} /><small>Only these report fields are disclosed when the tool runs.</small></label>
     </div>
@@ -243,7 +273,7 @@ export function RegistryDialog() {
         {kind === "component" && step === 1 ? <><div className="registry-step-heading"><h3>Configure the {purpose}</h3><p>Choose where it runs and disclose only the data it needs.</p></div>{componentSetup}</> : null}
         {kind === "connection" && step === 0 ? <><div className="registry-step-heading"><h3>Where should tools connect?</h3><p>A connection secures one destination. Multiple tools can reuse it.</p></div><div className="form-grid"><label>Name<input ref={nameRef} maxLength={160} value={name} onChange={(event) => { const value = event.currentTarget.value; setName(value); if (!keyEdited) setKey(slug(value)); }} /></label><label>Key<input maxLength={100} value={key} onChange={(event) => { setKeyEdited(true); setKey(event.currentTarget.value); }} /></label><label>Connection type<select value={connectionKind} onChange={(event) => setConnectionKind(event.currentTarget.value as ConnectionKind)}><option value="external_api">External API</option><option value="customer_worker">Customer Worker</option><option value="webhook">Webhook</option><option value="ai_provider">AI provider</option><option value="notification">Notification</option><option value="email">Email</option></select></label><label>Destination type<select value={targetMode} onChange={(event) => changeTargetMode(event.currentTarget.value as "url" | "service")}><option value="url">HTTPS endpoint</option><option value="service">Worker service binding</option></select></label>{targetMode === "url" ? <label className="wide-field">HTTPS origin<input type="url" placeholder="https://api.example.com" value={baseUrl} onChange={(event) => setBaseUrl(event.currentTarget.value)} /><small>Origin only; paths are allowlisted in the next step.</small></label> : <label className="wide-field">Service binding<input placeholder="CUSTOMER_API" value={serviceBinding} onChange={(event) => setServiceBinding(event.currentTarget.value)} /></label>}<label className="wide-field">Description<textarea maxLength={2000} value={description} onChange={(event) => setDescription(event.currentTarget.value)} /></label></div></> : null}
         {kind === "connection" && step === 1 ? <><div className="registry-step-heading"><h3>Limit access and configure authentication</h3><p>Use the least authority this connection needs.</p></div>{connectionSecurity}</> : null}
-        {step === 2 ? <><div className="registry-step-heading"><h3>Review and create</h3><p>Confirm the security boundary before publishing version 1.</p></div><section className="registry-review"><dl><div><dt>Name</dt><dd>{name}</dd></div><div><dt>Type</dt><dd>{kind === "component" ? purposeOptions.find((option) => option.value === purpose)?.title : connectionKind.replaceAll("_", " ")}</dd></div><div><dt>{kind === "component" ? "Authority" : "Destination"}</dt><dd>{kind === "component" ? isAction ? "Can change customer data · approval required" : "Read-only" : targetMode === "url" ? baseUrl : serviceBinding}</dd></div><div><dt>{kind === "component" ? "Runtime" : "Access"}</dt><dd>{kind === "component" ? needsConnection ? activeConnections.find((connection) => connection.activeVersionId === connectionVersionId)?.name || "No connection" : implementation.replaceAll("_", " ") : `${methods} · ${paths}`}</dd></div></dl>{kind === "connection" && needsSecret ? <div className="registry-secret-next"><strong>Install the credential after creation</strong><p>From the Resolve project directory, run this command and paste the secret value when Wrangler asks. The value is never entered in this UI.</p><code>npx wrangler secret put {secretReference}</code></div> : null}<div className="registry-review-note"><strong>What happens next</strong><p>{kind === "component" ? "Resolve publishes version 1 and runs its stored contract example. Add the tool to a workflow when you are ready." : `Resolve publishes the connection definition.${needsSecret ? " Install the Worker secret shown above, then" : " Then"} create a tool that uses it and send an explicit live test request from the connection details.`}</p></div></section></> : null}
+        {step === 2 ? <><div className="registry-step-heading"><h3>Review and create</h3><p>Confirm the security boundary before publishing version 1.</p></div><section className="registry-review"><dl><div><dt>Name</dt><dd>{name}</dd></div><div><dt>Type</dt><dd>{kind === "component" ? purposeOptions.find((option) => option.value === purpose)?.title : connectionKind.replaceAll("_", " ")}</dd></div><div><dt>{kind === "component" ? "Authority" : "Destination"}</dt><dd>{kind === "component" ? isAction ? "Can change customer data · approval required" : "Read-only" : targetMode === "url" ? baseUrl : serviceBinding}</dd></div><div><dt>{kind === "component" ? "Runtime" : "Access"}</dt><dd>{kind === "component" ? needsConnection ? activeConnections.find((connection) => connection.activeVersionId === connectionVersionId)?.name || "No connection" : implementation.replaceAll("_", " ") : `${methods} · ${paths}`}</dd></div>{kind === "component" && isAction && correctionEnabled ? <div><dt>Appeal correction</dt><dd>{correctionCode} corrects {commaValues(correctsCodes).join(", ")}</dd></div> : null}</dl>{kind === "connection" && needsSecret ? <div className="registry-secret-next"><strong>Install the credential after creation</strong><p>From the Resolve project directory, run this command and paste the secret value when Wrangler asks. The value is never entered in this UI.</p><code>npx wrangler secret put {secretReference}</code></div> : null}<div className="registry-review-note"><strong>What happens next</strong><p>{kind === "component" ? isAction && correctionEnabled ? "Resolve publishes version 1 and checks its stored contract example. Independent appeal reviewers can then approve this correction for the original action types listed above." : "Resolve publishes version 1 and runs its stored contract example. Add the tool to a workflow when you are ready." : `Resolve publishes the connection definition.${needsSecret ? " Install the Worker secret shown above, then" : " Then"} create a tool that uses it and send an explicit live test request from the connection details.`}</p></div></section></> : null}
       </div>
       <div className="editor-footer registry-wizard-footer"><p className="error" role="alert">{error}</p><div>{step === 0 ? <button className="secondary" type="button" disabled={pending} onClick={close}>Cancel</button> : <button className="secondary" type="button" disabled={pending} onClick={back}>Back</button>}{step < 2 ? <button className="primary" type="button" onClick={next}>Continue</button> : <button className="primary" type="submit" disabled={pending}>{pending ? "Creating…" : kind === "component" ? "Create tool" : "Add connection"}</button>}</div></div>
     </form>

package/template/console/registry/RegistryWorkspace.tsx

@@ -5,6 +5,7 @@ import { errorMessage, requestJson } from "../lib/http";
 import { getShellSnapshot, subscribeToShell } from "../shell/store";
 import { openRegistryEditor, registryEvents } from "./events";
 import { RegistryDetailsDialog } from "./RegistryDetailsDialog";
+import { IntegrationSetup } from "./IntegrationSetup";
 import type { ComponentListResponse, ComponentSummary, ConnectionListResponse, ConnectionSummary, RegistryKind } from "./types";
 
 type RegistryItem = ComponentSummary | ConnectionSummary;
@@ -38,8 +39,10 @@ function RegistryRow({ item, kind, onOpen }: { item: RegistryItem; kind: Registr
   const category = component ? toolCategory(component) : "";
   const iconClass = connection ? "connection" : category === "action" ? "action" : category === "ai" ? "agent" : "";
   const icon = connection ? "↗" : category === "action" ? "⚡" : category === "ai" ? "✦" : category === "message" ? "✉" : "＋";
-  const status = lifecycleLabel(item.status || "active");
-  const statusClass = item.status === "active" ? "available" : item.status === "archived" ? "archived" : "paused";
+  const status = connection && item.status === "active"
+    ? connection.healthState === "healthy" ? "Last call succeeded" : connection.healthState === "degraded" ? "Recent failures" : connection.healthState === "open_circuit" ? "Temporarily blocked" : connection.healthState === "paused" ? "Paused" : "Not verified yet"
+    : lifecycleLabel(item.status || "active");
+  const statusClass = item.status === "active" && (!connection || connection.healthState === "healthy") ? "available" : item.status === "archived" ? "archived" : "paused";
   const destination = connection?.baseUrl || connection?.serviceBindingName || "Destination not configured";
   return <article className="registry-resource-row">
     <span className={`object-icon ${iconClass}`} aria-hidden="true">{icon}</span>
@@ -109,12 +112,14 @@ export function RegistryWorkspace() {
   };
 
   return <div className="page-stack registry-workspace" data-react-slice="registry-workspace">
-    <PageHeader titleId="components-title" title="Tools & connections" description="Control what workflows can do, which data they can use, and where requests may go.">
+    <PageHeader titleId="components-title" title="Connections" description="Connect your customer application and define what Safest can read, request, and confirm.">
       <div className="surface-buttons"><button className="secondary" type="button" disabled={loading || refreshing} onClick={() => void load(true)}>{refreshing ? "Refreshing…" : "Refresh"}</button>{canCreate ? <button className="primary" type="button" onClick={() => openRegistryEditor(currentKind)}>{tab === "tools" ? "Create tool" : "Add connection"}</button> : null}</div>
     </PageHeader>
 
-    <section className="registry-model" aria-label="How workflows, tools, and connections work together">
-      <div><span>1</span><strong>Workflow</strong><small>Chooses when work runs</small></div><b aria-hidden="true">→</b><div><span>2</span><strong>Tool</strong><small>Reads context or takes an action</small></div><b aria-hidden="true">→</b><div><span>3</span><strong>Connection</strong><small>Secures access to a service</small></div><b aria-hidden="true">→</b><div><span>4</span><strong>Your service</strong><small>Returns data or applies a change</small></div>
+    {canManage?<IntegrationSetup onTools={kind=>{setTab("tools");setFilter(kind);setSearch("");document.querySelector(".registry-tabs-row")?.scrollIntoView({block:"start",behavior:"smooth"});}} />:null}
+
+    <section className="registry-model" aria-label="How playbooks use customer capabilities">
+      <div><span>1</span><strong>Playbook</strong><small>Defines the permitted work</small></div><b aria-hidden="true">→</b><div><span>2</span><strong>Tool</strong><small>Reads context or takes an action</small></div><b aria-hidden="true">→</b><div><span>3</span><strong>Connection</strong><small>Secures access to a service</small></div><b aria-hidden="true">→</b><div><span>4</span><strong>Your service</strong><small>Returns data or applies a change</small></div>
     </section>
 
     <div className="registry-tabs-row"><div className="segmented-tabs" role="tablist" aria-label="Tools and connections"><button className={tab === "tools" ? "active" : ""} type="button" role="tab" aria-selected={tab === "tools"} onClick={() => { setTab("tools"); setSearch(""); }}>Tools <span>{components.filter((item) => item.status !== "archived").length}</span></button><button className={tab === "connections" ? "active" : ""} type="button" role="tab" aria-selected={tab === "connections"} onClick={() => { setTab("connections"); setSearch(""); }}>Connections <span>{connections.filter((item) => item.status !== "archived").length}</span></button></div><p>{tab === "tools" ? "Reusable capabilities placed in workflows. Enrichments are read-only; actions require approval." : "Reusable, allowlisted routes to APIs and Workers. Credential values stay in Worker secrets."}</p></div>

package/template/console/registry/integration-verification.css

@@ -0,0 +1,25 @@
+.integration-verification { min-width: 0; padding: 24px; }
+.integration-verification > .surface-head { padding: 0 0 20px; margin-bottom: 20px; }
+.verification-start { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
+.verification-start label, .verification-bind label, .verification-history { display: grid; gap: 8px; min-width: 0; font-weight: 600; font-size: .875rem; }
+.verification-start select, .verification-bind select, .verification-history select { width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; }
+.verification-start .form-help { grid-column: 1 / -1; margin: 0; }
+.verification-start button { justify-self: start; }
+.verification-history, .verification-run { margin-top: 24px; }
+.verification-run { border-top: 1px solid var(--border, #d8e0da); padding-top: 20px; }
+.verification-summary h3, .verification-summary p { margin: 0 0 8px; overflow-wrap: anywhere; }
+.verification-summary small { display: block; margin-bottom: 16px; }
+.verification-state { display: inline-block; border: 1px solid currentColor; border-radius: 6px; padding: 4px 8px; margin: 4px 0 12px; }
+.verification-state-verified { color: #235a43; }
+.verification-state-blocked, .verification-state-stale { color: #8a391c; }
+.verification-bind { display: grid; gap: 12px; margin: 16px 0; }
+.verification-bind p { margin: 0; }
+.verification-bind button { justify-self: start; }
+.verification-evidence { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
+.verification-evidence li { border: 1px solid var(--border, #d8e0da); border-radius: 8px; padding: 14px; }
+.verification-evidence li > div { display: flex; gap: 8px 16px; justify-content: space-between; flex-wrap: wrap; }
+.verification-evidence li span { font-size: .875em; }
+.verification-evidence li p { margin: 8px 0 0; overflow-wrap: anywhere; }
+.verification-evidence li[data-state=complete] { border-left: 4px solid #377457; }
+.verification-evidence li[data-state=blocked] { border-left: 4px solid #a64a25; }
+@media(max-width: 600px) { .integration-verification { padding: 16px; } .integration-verification > .surface-head { align-items: stretch; flex-direction: column; gap: 16px; } .verification-start { grid-template-columns: minmax(0,1fr); } .verification-start button, .verification-bind button { width: 100%; } .verification-evidence li { padding: 12px; } }

package/template/console/reports/CaseActions.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { dateTime, readable } from "../lib/format";
+import { errorMessage, requestJson } from "../lib/http";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { dispatchOpenReport } from "./events";
+import type { ReportDetailRecord, WorkflowActionRecord } from "./types";
+
+type ActionDetail = { proposal: { target: unknown; payload: unknown; preconditions: unknown; receipt: unknown }; attempts: { id: string; attemptNumber: number; responseStatus: number | null; errorCode: string | null; startedAt: string }[] };
+function actionState(action: WorkflowActionRecord) {
+  if (action.confirmationState === "awaiting_confirmation") return "Awaiting customer confirmation";
+  if (action.confirmationState === "legacy_applied") return "Previously recorded as applied";
+  if (action.state === "applied") return "Customer confirmed completion";
+  if (action.errorCode === "action_confirmation_timed_out") return "Confirmation overdue";
+  if (action.state === "applying") return "Sending to customer";
+  if (action.state === "queued") return "Waiting to send";
+  if (action.state === "failed" && !action.terminal) return "Retry scheduled";
+  return readable(action.state);
+}
+function Action({ action, reportId, canRetry, canInspect, onReview }: { action: WorkflowActionRecord; reportId: string; canRetry: boolean; canInspect: boolean; onReview: () => void }) {
+  const [expanded, setExpanded] = useState(false);
+  const [detail, setDetail] = useState<ActionDetail | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  const [notice, setNotice] = useState("");
+  const [epoch, setEpoch] = useState(0);
+  const activeRequest = useRef(false);
+  const retryKey = useRef<string | null>(null);
+  useEffect(() => { if (action.state === "applied") { setNotice(""); retryKey.current = null; } }, [action.state]);
+  useEffect(() => {
+    if (!expanded || !action.id) return;
+    let active = true; setLoading(true);
+    void requestJson<ActionDetail>(`/v1/admin/actions/${encodeURIComponent(action.id)}`).then(result => {
+      if (active) { setDetail(result); setError(""); }
+    }).catch(cause => { if (active) setError(errorMessage(cause, "The action details could not be loaded.")); })
+      .finally(() => { if (active) setLoading(false); });
+    return () => { active = false; };
+  }, [expanded, action.id, action.state, action.attemptCount, epoch]);
+  const retry = async () => {
+    if (!action.id || !action.payloadDigest || activeRequest.current) return;
+    activeRequest.current = true; setPending(true); setError(""); retryKey.current ??= crypto.randomUUID();
+    try {
+      await requestJson(`/v1/admin/actions/${encodeURIComponent(action.id)}/retry`, {
+        method: "POST", headers: { "content-type": "application/json", "idempotency-key": retryKey.current },
+        body: JSON.stringify({ payload_digest: action.payloadDigest }),
+      });
+      setNotice("The same approved action is queued again. The case remains open until the customer confirms completion.");
+      retryKey.current = null; dispatchOpenReport(reportId); setEpoch(value => value + 1);
+    } catch (cause) { setError(errorMessage(cause, "The connection was interrupted. Retry to check the same request.")); }
+    finally { activeRequest.current = false; setPending(false); }
+  };
+  const state = action.confirmationState || action.state;
+  return <article className="case-customer-action">
+    <div className="case-review-heading"><h4>{action.capabilityName || readable(action.actionCode)}</h4><span className={`badge${action.state === "failed" && action.terminal ? " urgent" : ""}`}>{actionState(action)}</span></div>
+    {state === "awaiting_confirmation" ? <p>The customer accepted this request {dateTime(action.acceptedAt || "")}. Safest is waiting for completion until {dateTime(action.confirmationDeadlineAt || "")}. The action has not been confirmed.</p>
+      : state === "legacy_applied" ? <p>This action was recorded by an earlier runtime. A precise customer completion receipt is not available.</p>
+      : action.state === "applied" ? <p>The customer confirmed this exact action {dateTime(action.confirmedAt || "")}.</p>
+      : action.state === "approval_required" ? <p>Review the proposed target and action in the playbook’s approval task before anything is sent.</p>
+      : action.errorCode === "action_confirmation_timed_out" ? <p>The customer did not confirm completion before the deadline. Check its action status before retrying; Safest cannot yet verify the outcome.</p>
+      : action.state === "failed" ? <p>{action.terminal ? "This action needs attention." : "Safest will retry the same action automatically."} {readable(action.errorCode || "Customer action failed")}. The outcome remains unconfirmed.</p>
+      : <p>The action remains unconfirmed until the customer returns a completion receipt.</p>}
+    <p className="form-help">{action.attemptCount || 0} delivery attempt{action.attemptCount === 1 ? "" : "s"}{(action.deliveryCycle || 1) > 1 ? ` · Retry ${action.deliveryCycle! - 1}` : ""}</p>
+    {action.state === "approval_required" ? <button type="button" className="secondary" onClick={onReview}>Open action approval</button> : null}
+    {canInspect ? <details onToggle={event => setExpanded(event.currentTarget.open)}><summary>Inspect action and delivery history</summary>
+      {loading ? <p role="status">Loading action details…</p> : null}
+      {detail ? <><dl className="case-action-details"><dt>Customer target</dt><dd><pre tabIndex={0}>{JSON.stringify(detail.proposal.target, null, 2)}</pre></dd><dt>Approved action details</dt><dd><pre tabIndex={0}>{JSON.stringify(detail.proposal.payload, null, 2)}</pre></dd></dl>
+        {detail.attempts.length ? <ol>{detail.attempts.map(attempt => <li key={attempt.id}>Attempt {attempt.attemptNumber} · {dateTime(attempt.startedAt)} · {attempt.errorCode ? readable(attempt.errorCode) : attempt.responseStatus ? `HTTP ${attempt.responseStatus}` : "No response recorded"}</li>)}</ol> : <p>No customer requests have been sent.</p>}
+        {detail.proposal.receipt ? <details><summary>Customer receipt</summary><pre tabIndex={0}>{JSON.stringify(detail.proposal.receipt, null, 2)}</pre></details> : null}
+        {action.state === "failed" && action.terminal ? action.retryable && canRetry ? <button type="button" className="primary" disabled={pending} onClick={() => void retry()}>{pending ? "Queuing retry…" : "Retry the same approved action"}</button>
+          : <p className="form-help">{!canRetry ? "An operator with action recovery permission can review a retry." : "The existing authorization cannot be retried. Review the changed or expired proposal before authorizing further action."}</p> : null}
+      </> : !loading && !error ? <p>Action details are unavailable.</p> : null}
+    </details> : <p className="form-help">Detailed customer action data is restricted for your role.</p>}
+    {notice ? <p role="status">{notice}</p> : null}{error ? <p role="alert" className="error">{error} <button type="button" className="text-button" onClick={() => setEpoch(value => value + 1)}>Reload action details</button></p> : null}
+  </article>;
+}
+export function CaseActions({ report, onReview }: { report: ReportDetailRecord; onReview: () => void }) {
+  const shell = useSyncExternalStore(subscribeToShell, getShellSnapshot, getShellSnapshot);
+  return <section className="case-customer-actions" aria-label="Customer actions"><h3>Customer actions</h3><p>Approval permits an action. Customer confirmation establishes that it completed.</p>
+    {(report.workflowActions || []).filter(action => action.recordKind === "proposal").map(action => <Action key={action.id} action={action} reportId={report.id} canRetry={shell.session?.permissions.operateActions === true} canInspect={shell.session?.permissions.readSensitiveEvidence === true || shell.session?.permissions.approveActions === true} onReview={onReview} />)}
+  </section>;
+}

package/template/console/reports/CaseContinuity.tsx

@@ -0,0 +1,27 @@
+import { useState, useSyncExternalStore } from "react";
+import { RecordAppealDialog } from "../appeals/RecordAppealDialog";
+import { dispatchOpenAppeal } from "../appeals/events";
+import { dateTime, readable } from "../lib/format";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { dispatchCloseReport, dispatchOpenReport } from "./events";
+import { getReportWorkspaceSnapshot } from "./store";
+import type { ReportDetailRecord } from "./types";
+
+export function RelatedReports({report}:{report:ReportDetailRecord}) {
+  return <section className="case-guidance" aria-label="Related reports"><h3>Related reports</h3><p>Reports grouped by matching intake. Each keeps its own evidence, reviewer and outcome.</p>
+    {report.relatedReports?.length ? <ul className="case-related-list">{report.relatedReports.map(item=><li key={item.id}><div><strong>{item.reference}</strong><p>{readable(item.reasonCode)} · {readable(item.state)} · {item.queueName || "Unassigned"}</p><small>{dateTime(item.submittedAt)}</small></div><button className="secondary" type="button" onClick={()=>dispatchOpenReport(item.id)}>Open related case</button></li>)}</ul> : <p>No related reports are available in your case access.</p>}
+  </section>;
+}
+
+export function CaseAppeals({report}:{report:ReportDetailRecord}) {
+  const shell=useSyncExternalStore(subscribeToShell,getShellSnapshot,getShellSnapshot);
+  const canReview=shell.session?.permissions.reviewAppeals===true;
+  const [recording,setRecording]=useState(false);
+  const eligible=["resolved_by_human","resolved_by_ai","appealed","closed"].includes(report.state) && Boolean(report.decisions?.length);
+  const open=(id:string)=>{ dispatchCloseReport(); if(!getReportWorkspaceSnapshot().detail.reportId) dispatchOpenAppeal(id); };
+  return <section className="case-guidance" aria-label="Independent appeals"><h3>Independent appeals</h3><p>The original decision and customer action remain in this case. A different reviewer assesses each participant’s challenge.</p>
+    {report.appeals?.length ? <ul className="case-related-list">{report.appeals.map(appeal=><li key={appeal.id}><div><strong>{appeal.audience==="affected_user"?"Affected person":"Reporter"} appeal</strong><p>{readable(appeal.state)} · {dateTime(appeal.submittedAt)}</p>{appeal.completionState ? <small>{appeal.completionState==="completed"?"Follow-up complete":appeal.completionState==="legacy"?"Historical verdict":appeal.correctionRequired&&!appeal.correctionConfirmedAt?"Customer correction needs verification":"Participant delivery outstanding"}</small>:<small>Waiting for an independent review</small>}</div>{canReview?<button className="secondary" type="button" onClick={()=>open(appeal.id)}>Open appeal</button>:null}</li>)}</ul>:<p>No appeal has been recorded.</p>}
+    {canReview&&eligible?<button className="secondary" type="button" onClick={()=>setRecording(true)}>Record participant appeal</button>:null}
+    {recording ? <RecordAppealDialog open reportReference={report.reference} onClose={()=>setRecording(false)} onRecorded={()=>dispatchOpenReport(report.id)} /> : null}
+  </section>;
+}

package/template/console/reports/CaseNotices.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { dateTime, readable } from "../lib/format";
+import { ApiRequestError, errorMessage, requestJson } from "../lib/http";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { dispatchOpenReport } from "./events";
+import type { DeliveryNotice, ReportDetailRecord } from "./types";
+
+function Notice({ notice, report, canRetry }: { notice: DeliveryNotice; report: ReportDetailRecord; canRetry: boolean }) {
+  const [pending, setPending] = useState(false), [error, setError] = useState("");
+  const request = useRef<{ key: string; updatedAt: string } | null>(null);
+  const busy = useRef(false);
+  const body = report.messages?.find(message => message.id === notice.messageId)?.body;
+  const failed = ["failed", "suppressed"].includes(notice.deliveryState);
+  const retry = async () => {
+    if (busy.current || !notice.id) return;
+    busy.current = true; setPending(true); setError("");
+    request.current ??= {key: crypto.randomUUID(), updatedAt: notice.updatedAt};
+    try {
+      await requestJson(`/v1/admin/reports/${encodeURIComponent(report.id)}/notices/${encodeURIComponent(notice.id)}/retry`, {
+        method: "POST", headers: {"content-type": "application/json", "idempotency-key": request.current.key},
+        body: JSON.stringify({expected_updated_at: request.current.updatedAt}),
+      });
+      request.current = null; dispatchOpenReport(report.id);
+    } catch (cause) { if (cause instanceof ApiRequestError && cause.status < 500) {request.current = null; dispatchOpenReport(report.id);} setError(errorMessage(cause, "Delivery recovery was interrupted. Retry to check the same request.")); }
+    finally {busy.current = false; setPending(false);}
+  };
+  useEffect(() => { if (!failed) {request.current = null; setError("");} }, [failed]);
+  const audience = notice.audience === "affected_user" ? "Affected person" : "Reporter";
+  return <article className="case-notice"><div className="case-notice-heading"><h4>{audience} {notice.purpose === "appeal" ? "appeal outcome" : notice.decisionId ? "outcome" : "update"}</h4><span className={`badge${failed ? " urgent" : ""}`}>{notice.deliveryState === "delivered" ? "Handed to channel" : notice.deliveryState === "suppressed" ? "No eligible delivery" : notice.deliveryState === "failed" ? "Delivery needs attention" : "Waiting for handoff"}</span></div>
+    <p>{notice.channel === "email" ? "Email" : notice.channel === "customer_webhook" ? "Customer notification channel" : "No channel selected"} · {notice.attemptCount ?? 0} attempt{notice.attemptCount === 1 ? "" : "s"} · {dateTime(notice.updatedAt)}</p>
+    {notice.errorCode ? <p>{readable(notice.errorCode)}</p> : null}
+    <details><summary>Inspect {audience.toLowerCase()} notice</summary>{body ? <blockquote className="playbook-notice-preview">{body}</blockquote> : <p>The original message is unavailable in this view.</p>}{failed ? <><p>Retry preserves this audience and message. Automatic attempts remain in the delivery history.</p>{canRetry && body ? <button type="button" className="secondary" disabled={pending} onClick={() => void retry()}>{pending ? "Queuing delivery…" : "Retry original notice"}</button> : <p>An operator with participant messaging permission can review delivery recovery.</p>}</> : null}</details>
+    {error ? <p role="alert" className="error">{error}</p> : null}
+  </article>;
+}
+
+export function CaseNotices({ report }: { report: ReportDetailRecord }) {
+  const shell = useSyncExternalStore(subscribeToShell, getShellSnapshot, getShellSnapshot);
+  const waiting = report.notices?.some(notice => notice.deliveryState === "queued");
+  useEffect(() => {
+    if (!waiting) return;
+    const timer = setInterval(() => {if (document.visibilityState !== "hidden") dispatchOpenReport(report.id);}, 5000);
+    return () => clearInterval(timer);
+  }, [report.id, waiting]);
+  return <section aria-label="Participant deliveries"><h3>Participant deliveries</h3><p>A handoff confirms that the configured channel accepted the notice. It does not confirm that the participant read it.</p>
+    {report.notices?.map(notice => <Notice key={notice.id} notice={notice} report={report} canRetry={shell.session?.permissions.messageReporters === true} />)}
+  </section>;
+}

package/template/console/reports/CaseOwnership.tsx

@@ -0,0 +1,78 @@
+import { useEditingAccess } from "./use-editing-access";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { AnalystAvatar } from "../components/AnalystIdentity";
+import { errorMessage, requestJson } from "../lib/http";
+import { changeCaseOwner } from "./controller";
+import { dispatchClaimReport, dispatchOpenReport } from "./events";
+import type { ReportWorkspaceSnapshot } from "./types";
+
+export function CaseOwnership({ snapshot }: { snapshot: ReportWorkspaceSnapshot }) {
+  const report = snapshot.detail.report!;
+  const assignment = report.assignment;
+  const mine = assignment?.reviewerId === snapshot.actorId;
+  const activeAccess = useEditingAccess(report.claim?.expiresAt);
+  const editable = mine && activeAccess;
+  const open = ["human_review", "human_review_requested", "awaiting_reporter"].includes(report.state);
+  const busy = Boolean(snapshot.detail.pendingAction);
+  const [handoff, setHandoff] = useState<{ transfer: boolean; version: number } | null>(null);
+  const [note, setNote] = useState("");
+  const [recipient, setRecipient] = useState("");
+  const [reviewers, setReviewers] = useState<Array<{ id: string; displayName: string }>>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [retry, setRetry] = useState(0);
+  const dialog = useRef<HTMLDialogElement>(null);
+  useEffect(() => {
+    if (!handoff) return;
+    const previous = document.activeElement;
+    dialog.current?.showModal();
+    return () => { dialog.current?.close(); if (previous instanceof HTMLElement && previous.isConnected) previous.focus(); };
+  }, [Boolean(handoff)]);
+  useEffect(() => {
+    if (!handoff?.transfer) return;
+    let active = true; setLoading(true); setError("");
+    requestJson<{ reviewers: typeof reviewers }>(`/v1/admin/reports/${encodeURIComponent(report.id)}/ownership`)
+      .then(result => { if (active) setReviewers(result.reviewers.filter(person => person.id !== assignment?.reviewerId)); })
+      .catch(cause => { if (active) setError(errorMessage(cause,"Reviewers could not be loaded.")); })
+      .finally(() => { if (active) setLoading(false); });
+    return () => { active = false; };
+  }, [handoff?.transfer, report.id, retry]);
+  const ownerName = mine ? "You" : assignment?.analyst?.displayName || "Another reviewer";
+  return <>
+    <section className="case-ownership" aria-label="Case ownership">
+      <div className="case-owner-copy">
+        {assignment ? <AnalystAvatar analyst={assignment.analyst || { displayName:ownerName }} size="small" /> : <span className="case-owner-empty" aria-hidden="true">○</span>}
+        <div><strong>{assignment ? `Case owner: ${ownerName}` : open ? "Unassigned case" : "Review complete"}</strong>
+          <p>{!open ? "Open Outcome to see the result." : !assignment ? "Start review to take responsibility." : mine ? editable ? "Editing access renews while you review." : "Still yours. Resume editing to continue." : "You can read this case while its owner reviews it."}</p>
+        </div>
+      </div>
+      <div className="case-owner-actions">
+        {open && snapshot.permissions.claimReports && (!assignment || mine) ? <button type="button" className="primary" disabled={busy} onClick={() => editable ? dispatchOpenReport(report.id,true) : dispatchClaimReport()}>{snapshot.detail.pendingAction === "claim" ? "Starting…" : !assignment ? "Start review" : editable ? "Continue review" : "Resume editing"}</button> : null}
+        {open && assignment && snapshot.permissions.reassignReports && (mine || snapshot.permissions.manageConfiguration) ? <>
+          <button type="button" className="secondary" disabled={busy} onClick={() => { setError(""); setHandoff({ transfer:true,version:assignment.version }); }}>Transfer…</button>
+          <button type="button" className="text-button" disabled={busy} onClick={() => { setError(""); setHandoff({ transfer:false,version:assignment.version }); }}>Return to queue</button>
+        </> : null}
+      </div>
+      {snapshot.detail.error ? <p className="error" role="alert">{snapshot.detail.error}</p> : null}
+      {snapshot.detail.statusMessage ? <p className="case-owner-status" role="status">{snapshot.detail.statusMessage}</p> : null}
+    </section>
+    {handoff ? createPortal(<dialog ref={dialog} className="case-handoff-dialog" aria-labelledby="case-handoff-title" onCancel={event => { event.preventDefault(); if (!busy) setHandoff(null); }} onKeyDown={event => { if (event.key === "Escape") event.stopPropagation(); }}>
+      <form onSubmit={async event => {
+        event.preventDefault();
+        const changed = await changeCaseOwner({ reviewerId:handoff.transfer ? recipient : null, displayName:reviewers.find(person => person.id === recipient)?.displayName, version:handoff.version, note });
+        if (changed) { setHandoff(null); setNote(""); setRecipient(""); }
+      }}>
+        <h2 id="case-handoff-title">{handoff.transfer ? "Transfer case" : "Return case to queue"}</h2>
+        <p>{handoff.transfer ? "Choose who should take responsibility and tell them what to do next." : "Make this case available to another reviewer and explain what still needs attention."}</p>
+        {handoff.transfer ? <label>Transfer to<select required autoFocus value={recipient} disabled={busy || loading} onChange={event => setRecipient(event.currentTarget.value)}><option value="">{loading ? "Loading reviewers…" : "Choose a reviewer"}</option>{reviewers.map(person => <option key={person.id} value={person.id}>{person.displayName}</option>)}</select></label> : null}
+        {handoff.transfer && !loading && !error && !reviewers.length ? <p>No other eligible reviewers are available for this queue.</p> : null}
+        <label>Handoff note<textarea autoFocus={!handoff.transfer} required maxLength={4000} rows={5} value={note} disabled={busy} onChange={event => setNote(event.currentTarget.value)} placeholder="What have you checked? What should the next reviewer do?" /></label>
+        <p className="handoff-privacy">Only this note is shared with the team. Your unsent messages and decisions stay in your private draft. Unfinished playbook tasks you hold become available for a qualified reviewer.</p>
+        {error ? <p className="error" role="alert">{error} <button type="button" className="text-button" onClick={() => setRetry(value => value + 1)}>Retry</button></p> : null}
+        {snapshot.detail.error ? <p className="error" role="alert">{snapshot.detail.error}</p> : null}
+        <div className="handoff-actions"><button className="secondary" type="button" disabled={busy} onClick={() => setHandoff(null)}>Cancel</button><button className="primary" type="submit" disabled={busy || !note.trim() || (handoff.transfer && (!recipient || loading || Boolean(error)))}>{busy ? "Saving…" : handoff.transfer ? "Transfer case" : "Return to queue"}</button></div>
+      </form>
+    </dialog>, document.body) : null}
+  </>;
+}