create-safest-tools 0.6.1 → 0.7.0

package/template/console/configuration/ConfigurationDialog.tsx

@@ -4,6 +4,7 @@ import { getShellSnapshot, subscribeToShell } from "../shell/store";
 import { configurationActionPath, configurationDefault, configurationEndpoint, configurationKeySlug, configurationLabel } from "./api";
 import { announceConfigurationChanged, configurationEvents } from "./events";
 import { editableReportForm, FormBuilder, reportFormContent, type EditableReportForm } from "./FormBuilder";
+import { MessageBuilder, PolicyBuilder, RoutingBuilder } from "./ConfigurationBuilders";
 import type {
   ConfigurationDetailResponse,
   ConfigurationDraft,
@@ -15,6 +16,7 @@ import type {
   ConfigurationVersion,
   JsonObject,
   QueueListResponse,
+  QueueSummary,
 } from "./types";
 
 interface EditorRequest { type: ConfigurationType; key: string; exists: boolean }
@@ -51,10 +53,12 @@ export function ConfigurationDialog() {
   const [published, setPublished] = useState<ConfigurationVersion | null>(null);
   const [form, setForm] = useState<EditableReportForm>(() => editableReportForm(configurationDefault("form")));
   const [contentJson, setContentJson] = useState("{}");
+  const [queues, setQueues] = useState<QueueSummary[]>([]);
   const [baseline, setBaseline] = useState("");
   const [validation, setValidation] = useState<ConfigurationValidation | null>(null);
   const [validationMessage, setValidationMessage] = useState("");
   const [loading, setLoading] = useState(false);
+  const [loadFailed, setLoadFailed] = useState(false);
   const [action, setAction] = useState<"" | "save" | "validate" | "publish">("");
   const [error, setError] = useState("");
   const busy = loading || Boolean(action);
@@ -65,7 +69,7 @@ export function ConfigurationDialog() {
     catch { return null; }
   }, [contentJson, form, visualForm]);
   const serialized = currentContent ? JSON.stringify(currentContent) : "";
-  const dirty = Boolean(editor && !loading && (serialized !== baseline || (!keyLocked && key !== editor.key)));
+  const dirty = Boolean(editor && !loading && !loadFailed && (serialized !== baseline || (!keyLocked && key !== editor.key)));
 
   const clear = (): void => {
     setEditor(null); setKey(""); setKeyEdited(false); setKeyLocked(false); setDraft(null); setPublished(null);
@@ -90,16 +94,16 @@ export function ConfigurationDialog() {
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
-    if (editor && !dialog.open) { dialog.showModal(); requestAnimationFrame(() => keyRef.current?.focus()); }
+    if (editor && !dialog.open) { dialog.showModal(); }
     if (!editor && dialog.open) dialog.close();
   }, [editor]);
   useEffect(() => {
     if (!editor) return;
     let active = true;
     const load = async (): Promise<void> => {
-      setLoading(true); setError(""); setDraft(null); setPublished(null); setValidation(null); setValidationMessage(""); setBaseline("");
+      setLoading(true); setLoadFailed(false); setError(""); setDraft(null); setPublished(null); setValidation(null); setValidationMessage(""); setBaseline("");
       try {
-        const queueResponse = editor.type === "routing_rules" ? await requestJson<QueueListResponse>("/v1/admin/queues").catch(() => ({ queues: [] })) : { queues: [] };
+        const queueResponse = editor.type === "routing_rules" ? await requestJson<QueueListResponse>("/v1/admin/queues") : { queues: [] };
         const fallback = configurationDefault(editor.type, queueResponse.queues || []);
         let content = fallback;
         let nextDraft: ConfigurationDraft | null = null;
@@ -111,6 +115,7 @@ export function ConfigurationDialog() {
           content = nextDraft?.content || nextPublished?.content || fallback;
         }
         if (!active) return;
+        setQueues(queueResponse.queues || []);
         const resolvedKey = editor.type === "routing_rules" ? "default" : editor.key;
         setKey(resolvedKey); setKeyEdited(Boolean(resolvedKey)); setKeyLocked(editor.type === "routing_rules" || editor.exists);
         setDraft(nextDraft); setPublished(nextPublished); setContentJson(JSON.stringify(content, null, 2));
@@ -121,7 +126,7 @@ export function ConfigurationDialog() {
           setValidationMessage(nextDraft.validation.valid ? "Stored check passed." : `${nextDraft.validation.errors?.length || 0} stored problems.`);
         } else if (nextPublished) setValidationMessage(`Based on published version ${nextPublished.version}. Save to create an editable draft.`);
         else setValidationMessage("Not saved yet.");
-      } catch (cause) { if (active) setError(errorMessage(cause, "The configuration draft could not be opened.")); }
+      } catch (cause) { if (active) { setLoadFailed(true); setError(errorMessage(cause, "The configuration draft could not be opened.")); } }
       finally { if (active) setLoading(false); }
     };
     void load();
@@ -129,8 +134,9 @@ export function ConfigurationDialog() {
   }, [editor]);
 
   const save = async (): Promise<ConfigurationSaveResponse | null> => {
+    if (loadFailed || dialogRef.current?.querySelector("form")?.reportValidity() === false) return null;
     if (!editor || !currentContent) { setError("Configuration JSON must be a valid object."); return null; }
-    const resolvedKey = type === "routing_rules" ? "default" : key.trim();
+    const resolvedKey = type === "routing_rules" ? "default" : keyLocked ? key : configurationKeySlug(key, "");
     if (!resolvedKey) { setError("An internal name is required."); keyRef.current?.focus(); return null; }
     if (draft && serialized === baseline) return { draftId: draft.id, revision: draft.revision, validation: draft.validation };
     setAction("save"); setError("");
@@ -157,7 +163,7 @@ export function ConfigurationDialog() {
     if (!saved || !editor) return null;
     setAction("validate"); setError("");
     try {
-      const result = await requestJson<ConfigurationValidationResponse>(configurationActionPath(type, type === "routing_rules" ? "default" : key, "validate"), { method: "POST" });
+      const result = await requestJson<ConfigurationValidationResponse>(configurationActionPath(type, type === "routing_rules" ? "default" : keyLocked ? key : configurationKeySlug(key, ""), "validate"), { method: "POST" });
       setValidation(result.validation); setValidationMessage(result.validation.valid ? "Ready to publish." : "Changes needed.");
       setDraft((current) => current ? { ...current, validation: result.validation, validationStatus: result.validation.valid ? "valid" : "invalid" } : current);
       return { validation: result.validation, saved };
@@ -174,7 +180,7 @@ export function ConfigurationDialog() {
     if (!window.confirm("Publish this immutable configuration version for future reports and workflow runs?")) return;
     setAction("publish"); setError("");
     try {
-      const result = await requestJson<ConfigurationPublishResponse>(configurationActionPath(type, type === "routing_rules" ? "default" : key, "publish"), { method: "POST", headers: mutationHeaders(), body: JSON.stringify({ expected_revision: checked.saved.revision }) });
+      const result = await requestJson<ConfigurationPublishResponse>(configurationActionPath(type, type === "routing_rules" ? "default" : keyLocked ? key : configurationKeySlug(key, ""), "publish"), { method: "POST", headers: mutationHeaders(), body: JSON.stringify({ expected_revision: checked.saved.revision }) });
       setPublished({ id: result.versionId, version: result.version, content: currentContent || draft?.content || {}, publishedAt: new Date().toISOString() });
       setValidationMessage(`Published version ${result.version}. Future reports and workflow runs can use it; historical work does not change.`);
       announceConfigurationChanged();
@@ -186,14 +192,23 @@ export function ConfigurationDialog() {
     if (!keyLocked && !keyEdited && next.title !== form.title) setKey(configurationKeySlug(next.title, ""));
     setForm(next); setValidation(null); setValidationMessage("Unsaved changes.");
   };
+  const updateContent = (next: JsonObject): void => {
+    if (type === "policy" && !keyLocked && !keyEdited && next.title !== currentContent?.title) setKey(String(next.title || ""));
+    setContentJson(JSON.stringify(next, null, 2)); setValidation(null); setValidationMessage("Unsaved changes.");
+  };
   const title = `${editor?.exists ? "Edit" : "New"} ${configurationLabel(type).toLowerCase()}`;
-  const subtitle = loading ? "Loading configuration…" : `${key || "Unsaved draft"}${draft ? ` · Draft revision ${draft.revision}` : published ? ` · Based on published v${published.version}` : ""}`;
+  const subtitle = loading ? "Loading…" : draft ? "Draft · Changes are not live until published" : published ? `Published version ${published.version} · Create an updated version` : "Draft · Changes are not live until published";
   return <dialog ref={dialogRef} className="editor-dialog configuration-dialog" aria-labelledby="configuration-dialog-title" onCancel={(event) => { event.preventDefault(); close(); }} data-react-slice="configuration-dialog">
-    <div className="detail-head"><div><h2 id="configuration-dialog-title">{title}</h2><p>{subtitle}</p></div><button className="icon-button" type="button" aria-label="Close" disabled={busy} onClick={close}>×</button></div>
-    {loading ? <div className="configuration-dialog-loading"><div className="skeleton-block" role="status" aria-label="Loading configuration editor" /></div> : <form className="editor-form configuration-form" onSubmit={(event: FormEvent<HTMLFormElement>) => { event.preventDefault(); void save(); }}>
-      <label>Internal name <small>Used to identify this configuration in Safest.</small><input ref={keyRef} pattern="[a-z0-9]+(?:-[a-z0-9]+)*" required readOnly={keyLocked} disabled={busy} value={key} onChange={(event) => { setKeyEdited(true); setKey(event.currentTarget.value); }} /></label>
-      {visualForm ? <FormBuilder value={form} onChange={updateForm} disabled={busy} /> : <label>Configuration JSON<textarea className="code-input configuration-code" spellCheck={false} required disabled={busy} value={contentJson} onChange={(event) => { setContentJson(event.currentTarget.value); setValidation(null); setValidationMessage("Unsaved changes."); }} /></label>}
+    <div className="detail-head"><div><h2 id="configuration-dialog-title">{title}</h2><p>{subtitle}</p></div><button className="icon-button" autoFocus type="button" aria-label="Close" disabled={busy} onClick={close}>×</button></div>
+    {loading ? <div className="configuration-dialog-loading"><div className="skeleton-block" role="status" aria-label="Loading configuration editor" /></div> : loadFailed ? <div className="configuration-fields"><p className="error" role="alert">{error}</p><button className="secondary" type="button" onClick={() => setEditor(current => current ? { ...current } : current)}>Try again</button></div> : <form className="editor-form configuration-form" onSubmit={(event: FormEvent<HTMLFormElement>) => { event.preventDefault(); void save(); }}>
+      <div className="configuration-fields">
+      {!keyLocked ? <label>Configuration name<small>A name your team will recognise.</small><input ref={keyRef} required disabled={busy} value={key} onChange={(event) => { setKeyEdited(true); setKey(event.currentTarget.value); }} /></label> : null}
+      {visualForm ? <FormBuilder value={form} onChange={updateForm} disabled={busy} /> : <>
+        {currentContent ? type === "routing_rules" ? <RoutingBuilder value={currentContent} onChange={updateContent} disabled={busy} queues={queues} /> : type === "policy" ? <PolicyBuilder value={currentContent} onChange={updateContent} disabled={busy} /> : <MessageBuilder value={currentContent} onChange={updateContent} disabled={busy} /> : <p className="error" role="alert">Correct the advanced configuration to continue editing.</p>}
+        <details className="configuration-advanced"><summary>Advanced configuration</summary><p>For custom fields, saved routing examples, and intake enrichments. Changes here update the form above.</p><label>Configuration JSON<textarea className="code-input configuration-code" spellCheck={false} required disabled={busy} value={contentJson} onChange={(event) => { setContentJson(event.currentTarget.value); setValidation(null); setValidationMessage("Unsaved changes."); }} /></label></details>
+      </>}
       <ValidationSummary validation={validation} message={validationMessage} />
+      </div>
       <div className="editor-footer"><p className="error" role="alert">{error}</p><div><button className="secondary" type="button" disabled={busy} onClick={close}>Cancel</button><button className="secondary" type="submit" disabled={busy || !dirty}>{action === "save" ? "Saving…" : "Save draft"}</button><button className="secondary" type="button" disabled={busy} onClick={() => void validate()}>{action === "validate" ? "Checking…" : "Check"}</button><button className="primary" type="button" disabled={busy} onClick={() => void publish()}>{action === "publish" ? "Publishing…" : "Publish"}</button></div></div>
     </form>}
   </dialog>;

package/template/console/configuration/ConfigurationWorkspace.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { PageHeader } from "../components/PageHeader";
 import { readable, relativeTime } from "../lib/format";
 import { errorMessage, requestJson } from "../lib/http";
@@ -16,7 +16,7 @@ const tabs: Array<{ type: ConfigurationType; label: string }> = [
 
 function ConfigurationCard({ item, type }: { item: ConfigurationSummary; type: ConfigurationType }) {
   const updated = item.draft?.updatedAt || item.latestPublishedAt || "";
-  const title = item.configurationKey === "default" ? "Workspace routing" : readable(item.configurationKey);
+  const title = item.configurationKey === "default" ? "Workspace routing" : readable(item.configurationKey.replaceAll("-", " "));
   return <article className="object-card configuration-card">
     <div className="object-card-head"><span className="object-icon" aria-hidden="true">⌗</span><span className={`badge${item.draft?.validationStatus === "invalid" ? " urgent" : ""}`}>{item.draft ? "Draft" : "Published"}</span></div>
     <h3>{title}</h3><p>{item.draft ? `Revision ${item.draft.revision} · ${readable(item.draft.validationStatus)}` : "No unpublished changes."}</p>
@@ -33,19 +33,27 @@ export function ConfigurationWorkspace() {
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState("");
+  const requestId = useRef(0);
+  const selectType = (next: ConfigurationType): void => {
+    if (next === type) return;
+    requestId.current += 1;
+    setConfigurations([]); setError(""); setLoading(true); setType(next);
+  };
 
   const load = useCallback(async (refresh = false): Promise<void> => {
+    const id = ++requestId.current;
     if (!canManage) { setConfigurations([]); return; }
     if (refresh) setRefreshing(true); else setLoading(true);
     setError("");
     try {
       const result = await requestJson<ConfigurationListResponse>(`/v1/admin/${configurationEndpoint(type)}`);
+      if (id !== requestId.current) return;
       setConfigurations(result.configurations || []);
-    } catch (cause) { setError(errorMessage(cause, "Configuration could not be loaded.")); }
-    finally { setLoading(false); setRefreshing(false); }
+    } catch (cause) { if (id === requestId.current) setError(errorMessage(cause, "Configuration could not be loaded.")); }
+    finally { if (id === requestId.current) { setLoading(false); setRefreshing(false); } }
   }, [canManage, type]);
 
-  useEffect(() => { if (shell.currentView === "configuration") void load(); }, [shell.currentView, shell.session?.actor.id, load]);
+  useEffect(() => { if (shell.currentView === "configuration") void load(); return () => { requestId.current += 1; }; }, [shell.currentView, shell.session?.actor.id, load]);
   useEffect(() => {
     const changed = (): void => { if (shell.currentView === "configuration") void load(true); };
     window.addEventListener(configurationEvents.changed, changed);
@@ -56,10 +64,15 @@ export function ConfigurationWorkspace() {
   const create = (): void => openConfigurationEditor(type, type === "routing_rules" ? "default" : "", type === "routing_rules" && Boolean(routing));
   return <div className="page-stack" data-react-slice="configuration-workspace">
     <PageHeader titleId="configuration-title" title="Configuration" description="Manage intake forms, routing, policies, and messages.">
-      <div className="surface-buttons"><button className="secondary" type="button" disabled={loading || refreshing} onClick={() => void load(true)}>{refreshing ? "Refreshing…" : "Refresh"}</button><button className="primary" type="button" disabled={!canManage} onClick={create}>{type === "routing_rules" && routing ? "Open routing" : "Create draft"}</button></div>
+      <div className="surface-buttons"><button className="secondary" type="button" disabled={loading || refreshing} onClick={() => void load(true)}>{refreshing ? "Refreshing…" : "Refresh"}</button><button className="primary" type="button" disabled={!canManage || loading || refreshing} onClick={create}>{type === "routing_rules" && routing ? "Open routing" : "Create draft"}</button></div>
     </PageHeader>
-    <div className="segmented-tabs configuration-tabs" role="tablist" aria-label="Configuration type">{tabs.map((tab) => <button className={type === tab.type ? "active" : ""} type="button" role="tab" aria-selected={type === tab.type} onClick={() => setType(tab.type)} key={tab.type}>{tab.label}</button>)}</div>
-    {type === "routing_rules" ? <div className="safety-boundary routing-boundary"><strong>Safeguards run before AI.</strong><span>The router sees only approved fields and queues. Uncertain results go to General triage.</span></div> : null}
+    <div className="segmented-tabs configuration-tabs" role="tablist" aria-label="Configuration type">{tabs.map((tab, index) => <button className={type === tab.type ? "active" : ""} type="button" role="tab" aria-selected={type === tab.type} tabIndex={type === tab.type ? 0 : -1} onClick={() => selectType(tab.type)} 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 : -1;
+      if (next < 0) return;
+      event.preventDefault(); selectType(tabs[next]!.type);
+      event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('button[role="tab"]')[next]?.focus();
+    }} key={tab.type}>{tab.label}</button>)}</div>
+    {type === "routing_rules" ? <div className="safety-boundary routing-boundary"><strong>Safety review comes first.</strong><span>Safeguards send sensitive cases to human reviewers. Other cases follow your routing rules and default queue.</span></div> : null}
     <div className="object-grid configuration-list" aria-busy={loading || refreshing}>{loading ? <div className="skeleton-card" /> : configurations.length ? configurations.map((item) => <ConfigurationCard item={item} type={type} key={item.configurationKey} />) : error ? null : <div className="empty-product"><span aria-hidden="true">⌗</span><h2>No {configurationLabel(type).toLowerCase()} yet</h2><p>Create, check, and publish an immutable version.</p>{canManage ? <button className="primary" type="button" onClick={create}>Create draft</button> : null}</div>}</div>
     <p className="error surface-error" role="alert">{error}</p>
   </div>;

package/template/console/configuration/types.ts

@@ -75,5 +75,5 @@ export interface ReportFormContent {
   consent_notice: string;
 }
 
-export interface QueueSummary { id: string; name: string; status: string }
+export interface QueueSummary { id: string; name: string; status: string; activePolicy?: { managementMode: string } | null }
 export interface QueueListResponse { queues: QueueSummary[] }

package/template/console/lib/priority.ts

@@ -0,0 +1,13 @@
+export type Priority = "urgent" | "high" | "medium" | "low";
+
+export function priorityName(priority: number): Priority {
+  if (priority >= 80) return "urgent";
+  if (priority >= 60) return "high";
+  if (priority >= 40) return "medium";
+  return "low";
+}
+
+export function priorityLabel(priority: number): string {
+  const name = priorityName(priority);
+  return name[0].toUpperCase() + name.slice(1);
+}

package/template/console/operations/CaseEscalations.tsx

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useState, useSyncExternalStore, type FormEvent } from 'react';
+import { getShellSnapshot, subscribeToShell } from '../shell/store';
+import { errorMessage, mutationHeaders, requestJson } from '../lib/http';
+import { dispatchOpenReportSection } from '../reports/events';
+import { dispatchOpenAppeal } from '../appeals/events';
+import { dispatchNavigation } from '../shell/events';
+import type { CaseEscalationItem, CaseEscalationList, CaseEscalationPolicy, EscalationContact } from '../../shared/case-escalations';
+import './case-escalations.css';
+
+interface Settings { policies: CaseEscalationPolicy[]; contacts: EscalationContact[]; queues: { id:string;name:string }[] }
+interface RecoveryTask { id:string;state:string;queueId:string|null;taskType:string;context?:{title?:string;instructions?:string} }
+const stamp = (value: string) => new Date(value).toLocaleString(undefined,{month:'short',day:'numeric',hour:'numeric',minute:'2-digit'});
+function recover(item: CaseEscalationItem, recovery: CaseEscalationItem['recovery'][number]) {
+  if (recovery.type === 'people') dispatchNavigation('people');
+  else if (recovery.type === 'appeal') dispatchOpenAppeal(item.sourceId);
+  else if (item.reportId) dispatchOpenReportSection(item.reportId,recovery.section ?? 'overview',recovery.type === 'task' ? item.sourceId : undefined);
+}
+
+function TaskRecovery({ item,onClose,onChanged }: { item:CaseEscalationItem;onClose:()=>void;onChanged:()=>void }) {
+  const shell = useSyncExternalStore(subscribeToShell,getShellSnapshot,getShellSnapshot);
+  const [task,setTask] = useState<RecoveryTask|null>(null),[queues,setQueues] = useState<Settings['queues']>([]);
+  const [queue,setQueue] = useState(''),[reason,setReason] = useState(''),[action,setAction] = useState('reassign');
+  const [error,setError] = useState(''),[busy,setBusy] = useState(false);
+  const [retry,setRetry] = useState(0);
+  const canAssign = Boolean(shell.session?.permissions.assignTasks),canCancel = Boolean(shell.session?.permissions.operateRuns);
+  useEffect(() => {
+    const controller = new AbortController();setError('');
+    Promise.all([requestJson<{task:RecoveryTask}>(`/v1/admin/tasks/${encodeURIComponent(item.sourceId)}`,{signal:controller.signal}),canAssign ? requestJson<Settings>('/v1/admin/case-escalation-policies',{signal:controller.signal}) : Promise.resolve({queues:[]})])
+      .then(([result,settings]) => {if (!controller.signal.aborted) {setTask(result.task);setQueue(result.task.queueId ?? '');setQueues(settings.queues);setAction(canAssign ? 'reassign' : 'cancel');}})
+      .catch(cause => {if (!controller.signal.aborted) setError(errorMessage(cause,'The task could not be loaded.'));});
+    return () => controller.abort();
+  },[item.sourceId,canAssign,retry]);
+  async function submit(event:FormEvent) {
+    event.preventDefault();setBusy(true);setError('');
+    try {await requestJson(`/v1/admin/tasks/${encodeURIComponent(item.sourceId)}/${action}`,{method:'POST',headers:mutationHeaders(),body:JSON.stringify({reason, ...(action === 'reassign' ? {queue_id:queue} : {})})});onChanged();onClose();}
+    catch(cause) {setError(errorMessage(cause,'The task changed or could not be recovered.'));} finally {setBusy(false);}
+  }
+  return <form className="case-escalation-settings" aria-label="Task recovery" onSubmit={event => {void submit(event);}}>
+    <h3>{task?.context?.title ?? 'Recover playbook task'}</h3>{task?.context?.instructions ? <p>{task.context.instructions}</p> : null}
+    {task ? <><p>Current state: {task.state}. Reassignment releases current editing access. Cancellation ends this task and sends the playbook a cancellation event; it does not complete the case.</p><label>Recovery action<select value={action} disabled={busy} onChange={event => setAction(event.currentTarget.value)}>{canAssign ? <option value="reassign">Return to an eligible queue</option> : null}{canCancel ? <option value="cancel">Cancel this task</option> : null}</select></label>{action === 'reassign' ? <label>Destination queue<select required disabled={busy} value={queue} onChange={event => setQueue(event.currentTarget.value)}><option value="">Choose a queue</option>{queues.map(value => <option key={value.id} value={value.id}>{value.name}</option>)}</select></label> : null}<label>Recovery reason<textarea required minLength={3} maxLength={2000} rows={3} disabled={busy} value={reason} onChange={event => setReason(event.currentTarget.value)} /></label></> : !error ? <p role="status">Loading task…</p> : null}
+    {error ? <p className="error" role="alert">{error}{!task ? <button className="text-button" type="button" onClick={() => setRetry(value => value + 1)}>Retry loading task</button> : null}</p> : null}
+    <div className="case-escalation-buttons"><button type="button" className="secondary" disabled={busy} onClick={onClose}>Close task recovery</button><button type="submit" className="primary" disabled={busy || !task || !['open','claimed'].includes(task.state) || !reason.trim()}>{busy ? 'Saving…' : action === 'cancel' ? 'Cancel task with reason' : 'Reassign task with reason'}</button></div>
+  </form>;
+}
+
+function EscalationSettings({ onClose, onSaved }: { onClose: () => void; onSaved: () => void }) {
+  const [settings,setSettings] = useState<Settings | null>(null);
+  const [queue,setQueue] = useState('');
+  const [primary,setPrimary] = useState('');
+  const [backup,setBackup] = useState('');
+  const [acknowledgement,setAcknowledgement] = useState(60);
+  const [followUp,setFollowUp] = useState(240);
+  const [error,setError] = useState('');
+  const [busy,setBusy] = useState(false);
+  const [retry,setRetry] = useState(0);
+  useEffect(() => {
+    const controller = new AbortController();
+    requestJson<Settings>('/v1/admin/case-escalation-policies',{signal:controller.signal}).then(result => {setSettings(result);setError('');if (!result.policies.some(value => value.queueId === null) && result.queues[0]) setQueue(result.queues[0].id);}).catch(cause => {if (!controller.signal.aborted) setError(errorMessage(cause,'Recovery contacts could not be loaded.'));});
+    return () => controller.abort();
+  },[retry]);
+  useEffect(() => {
+    const policy = settings?.policies.find(value => value.queueId === (queue || null));
+    setPrimary(policy?.primaryOperatorId ?? '');setBackup(policy?.backupOperatorId ?? '');setAcknowledgement(policy?.acknowledgementMinutes ?? 60);setFollowUp(policy?.followUpMinutes ?? 240);
+  },[settings,queue]);
+  async function save(event: FormEvent) {
+    event.preventDefault();setBusy(true);setError('');
+    try {
+      const policy = settings?.policies.find(value => value.queueId === (queue || null));
+      await requestJson('/v1/admin/case-escalation-policies',{method:'PUT',headers:mutationHeaders(),body:JSON.stringify({queueId:queue || null,primaryOperatorId:primary || null,backupOperatorId:backup || null,acknowledgementMinutes:acknowledgement,followUpMinutes:followUp,revision:policy?.revision ?? 0})});
+      onSaved();onClose();
+    } catch(cause) {setError(errorMessage(cause,'Recovery contacts could not be saved.'));} finally {setBusy(false);}
+  }
+  return <form className="case-escalation-settings" aria-label="Recovery contacts" onSubmit={event => {void save(event);}}>
+    <h3>Recovery contacts and deadlines</h3><p>The coordinator arranges recovery. Case ownership and approval permissions stay with their current holders.</p>
+    {!settings && !error ? <p role="status">Loading recovery contacts…</p> : settings ? <>
+      <label>Queue<select value={queue} disabled={busy} onChange={event => setQueue(event.currentTarget.value)}>{settings.policies.some(value => value.queueId === null) ? <option value="">Installation default</option> : null}{settings.queues.map(value => <option key={value.id} value={value.id}>{value.name}</option>)}</select></label>
+      <div className="case-escalation-setting-grid">
+        <label>Primary contact<select value={primary} disabled={busy} onChange={event => setPrimary(event.currentTarget.value)}><option value="">Case owner, then eligible administrators</option>{settings.contacts.map(person => <option key={person.id} value={person.id}>{person.displayName}</option>)}</select></label>
+        <label>Backup contact<select value={backup} disabled={busy} onChange={event => setBackup(event.currentTarget.value)}><option value="">Eligible owners and administrators</option>{settings.contacts.filter(person => person.id !== primary).map(person => <option key={person.id} value={person.id}>{person.displayName}</option>)}</select></label>
+        <label>Acknowledge within (minutes)<input type="number" min={5} max={10080} required disabled={busy} value={acknowledgement} onChange={event => setAcknowledgement(Number(event.currentTarget.value))} /></label>
+        <label>Follow up within (minutes)<input type="number" min={5} max={10080} required disabled={busy} value={followUp} onChange={event => setFollowUp(Number(event.currentTarget.value))} /></label>
+      </div><p>If a target passes, the item escalates to the backup and stays open until its source is repaired. Named contacts must have access to the queue.</p>
+    </> : null}
+    {error ? <p role="alert" className="error">{error}{!settings ? <> <button type="button" className="text-button" onClick={() => setRetry(value => value + 1)}>Retry</button></> : null}</p> : null}
+    <div className="case-escalation-buttons"><button type="button" className="secondary" disabled={busy} onClick={onClose}>Cancel</button><button className="primary" type="submit" disabled={busy || !settings}>{busy ? 'Saving…' : 'Save recovery contacts'}</button></div>
+  </form>;
+}
+
+export function CaseEscalations({ compact = false }: { compact?: boolean }) {
+  const shell = useSyncExternalStore(subscribeToShell,getShellSnapshot,getShellSnapshot);
+  const active = shell.currentView === (compact ? 'command' : 'operations') && Boolean(shell.session?.permissions.readReports || shell.session?.permissions.readOperations);
+  const [data,setData] = useState<CaseEscalationList | null>(null);
+  const [error,setError] = useState('');
+  const [busy,setBusy] = useState('');
+  const [refreshing,setRefreshing] = useState(false);
+  const [settings,setSettings] = useState(false);
+  const [expanded,setExpanded] = useState(false);
+  const [status,setStatus] = useState('');
+  const [recoveryTask,setRecoveryTask] = useState<CaseEscalationItem|null>(null);
+  const load = useCallback(async (signal?: AbortSignal,cursor = '') => {
+    setRefreshing(true);
+    try {
+      const next = await requestJson<CaseEscalationList>(`/v1/admin/case-escalations${cursor ? `?cursor=${encodeURIComponent(cursor)}` : ''}`,{signal});
+      if (signal?.aborted) return;
+      setData(previous => cursor && previous ? {...next,items:[...previous.items,...next.items.filter(item => !previous.items.some(old => old.id === item.id))]} : next);setError('');
+    } catch(cause) {if (!signal?.aborted) setError(errorMessage(cause,'Recovery work could not be loaded.'));} finally {if (!signal?.aborted) setRefreshing(false);}
+  },[]);
+  useEffect(() => {
+    if (!active) return;
+    const controller = new AbortController();setData(null);setStatus('');void load(controller.signal);
+    const refresh = () => {if (document.visibilityState === 'visible') void load(controller.signal);};
+    const timer = window.setInterval(refresh,60_000);window.addEventListener('focus',refresh);
+    return () => {controller.abort();window.clearInterval(timer);window.removeEventListener('focus',refresh);setSettings(false);};
+  },[active,shell.session?.actor.id,load]);
+  if (!active) return null;
+  const items = compact && !expanded ? data?.items.slice(0,3) : data?.items;
+  async function acknowledge(item: CaseEscalationItem) {
+    setBusy(item.id);setStatus('');setError('');
+    try {
+      await requestJson(`/v1/admin/case-escalations/${encodeURIComponent(item.id)}/acknowledge`,{method:'POST',headers:mutationHeaders(),body:JSON.stringify({revision:item.revision})});
+      setStatus('You are responsible for recovery. Open the affected work below to repair the cause.');await load();
+    } catch(cause) {setError(errorMessage(cause,'Responsibility could not be recorded.'));} finally {setBusy('');}
+  }
+  return <section className="surface case-escalations" aria-label="Cases needing recovery" aria-busy={refreshing}>
+    <div className="surface-head"><div><h2>Cases needing recovery{data ? ` (${data.total})` : ''}</h2><p>{data ? `${data.unacknowledged} awaiting acknowledgement · ${data.escalated} escalated to backup` : 'Checking stalled cases and participant delivery.'}</p></div><div className="case-escalation-buttons"><button type="button" className="secondary" disabled={refreshing || Boolean(busy)} onClick={() => {void load();}}>Refresh recovery</button>{shell.session?.permissions.manageConfiguration ? <button type="button" className="text-button" onClick={() => setSettings(value => !value)}>Recovery contacts</button> : null}</div></div>
+    {settings ? <EscalationSettings onClose={() => setSettings(false)} onSaved={() => {setStatus('Recovery contacts saved.');void load();}} /> : null}
+    {status ? <p role="status" className="case-escalation-status">{status}</p> : null}
+    {error ? <p role="alert" className="error">{error} <button type="button" className="text-button" onClick={() => {void load();}}>Retry loading recovery</button></p> : null}
+    {!data && refreshing ? <p role="status">Loading recovery work…</p> : null}
+    {data && !data.total ? <p className="case-escalation-empty">No detected cases need recovery. Open work continues against its configured deadlines.</p> : null}
+    <div className="case-escalation-list">{items?.map(item => <article className="case-escalation-item" key={item.id} aria-label={`${item.title}${item.reportReference ? `: ${item.reportReference}` : ''}`}>
+      <div className="case-escalation-item-head"><div><h3>{item.title}</h3><p>{item.reportReference ?? (item.reportId ? 'Case reference unavailable' : 'Workspace task')}{item.queueName ? ` · ${item.queueName}` : ''}</p></div><span className={`badge${item.level ? ' urgent' : ''}`}>{item.state === 'acknowledged' ? 'Recovery in progress' : item.level ? 'Backup needed' : 'Needs acknowledgement'}</span></div>
+      <p>{item.description}</p>
+      <dl><div><dt>Responsible</dt><dd>{item.acknowledgedBy?.displayName ?? item.responsible?.displayName ?? 'Eligible owners and administrators'}</dd></div><div><dt>Backup</dt><dd>{item.backup?.displayName ?? 'Eligible owners and administrators'}</dd></div><div><dt>Source target</dt><dd>{stamp(item.sourceDueAt)}</dd></div><div><dt>{item.state === 'acknowledged' ? 'Follow up by' : 'Acknowledge by'}</dt><dd>{stamp(item.responseDueAt)}</dd></div></dl>
+      {item.contactWarning ? <p className="case-escalation-warning">{item.contactWarning}</p> : null}
+      {item.acknowledgedAt ? <p>Acknowledged {stamp(item.acknowledgedAt)}. This item clears when the underlying problem is repaired.</p> : null}
+      <div className="case-escalation-buttons">{item.canAcknowledge ? <button type="button" className="primary" disabled={Boolean(busy)} onClick={() => {void acknowledge(item);}}>{busy === item.id ? 'Recording…' : 'Take responsibility for recovery'}</button> : null}{item.recovery.map(link => <button key={link.type} className="secondary" type="button" onClick={() => link.type === 'task_recovery' ? setRecoveryTask(item) : recover(item,link)}>{link.label}</button>)}</div>
+      {recoveryTask?.id === item.id ? <TaskRecovery item={item} onClose={() => setRecoveryTask(null)} onChanged={() => {setStatus('Task recovery recorded. Its source will be checked again.');void load();}} /> : null}
+    </article>)}</div>
+    {compact && !expanded && (data?.total ?? 0) > 3 ? <button type="button" className="text-button" onClick={() => setExpanded(true)}>Show all recovery work</button> : data?.nextCursor ? <button type="button" className="secondary" disabled={refreshing} onClick={() => {void load(undefined,data.nextCursor!);}}>Load more recovery work</button> : null}
+  </section>;
+}

package/template/console/operations/OperationsWorkspace.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState, useSyncExternalStore, type FormEvent, type ReactNode } from "react";
 import { PageHeader } from "../components/PageHeader";
+import { CaseEscalations } from './CaseEscalations';
 import { readable, relativeTime } from "../lib/format";
 import {
   dispatchAcknowledgeOperationsIncident,
@@ -60,6 +61,7 @@ export function OperationsWorkspace() {
       <PageHeader titleId="operations-title" title="Operations" description="Review failed deliveries, exhausted retries, and other incidents.">
         <div className="surface-buttons"><button className="secondary" type="button" disabled={snapshot.refreshing || !snapshot.canRead} onClick={dispatchOperationsRefresh}>{snapshot.refreshing ? "Refreshing…" : "Refresh"}</button></div>
       </PageHeader>
+      <CaseEscalations />
       <section className="surface operations-surface" aria-labelledby="operations-title">
         <div className="operation-metrics" aria-busy={snapshot.loading || snapshot.refreshing}>
           <Metric label="Routing failures" value={snapshot.loading ? "—" : routingFailures} detail="Failed or dead-letter jobs" urgent={routingFailures > 0} />

package/template/console/operations/case-escalations.css

@@ -0,0 +1,20 @@
+.case-escalations { margin-block: 1rem; min-width: 0; padding: 1.25rem; }
+.case-escalations .surface-head { gap: 1rem; flex-wrap: wrap; padding: 0 0 1rem; margin-bottom: 1rem; }
+.case-escalations p { color: var(--muted, #5c6862); line-height: 1.5; }
+.case-escalation-list { display: grid; gap: 1rem; }
+.case-escalation-item { border: 1px solid var(--line, #d8dfda); border-radius: .75rem; padding: 1rem; min-width: 0; overflow-wrap: anywhere; }
+.case-escalation-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
+.case-escalation-item h3 { margin: 0; font-size: 1rem; }
+.case-escalation-item-head p { margin: .3rem 0 0; font-size: .875rem; }
+.case-escalation-item dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
+.case-escalation-item dt { font-size: .8rem; color: var(--muted, #5c6862); }
+.case-escalation-item dd { margin: .2rem 0 0; font-size: .9rem; }
+.case-escalation-buttons { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+.case-escalation-buttons button { min-height: 44px; white-space: normal; }
+.case-escalation-warning { border-inline-start: 3px solid #af7820; padding-inline-start: .75rem; }
+.case-escalation-settings { padding: 1rem; margin-block: 1rem; border: 1px solid var(--line, #d8dfda); border-radius: .75rem; }
+.case-escalation-settings label { display: grid; gap: .35rem; min-width: 0; font-size: .875rem; }
+.case-escalation-setting-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-block: .75rem; }
+.case-escalation-settings select,.case-escalation-settings input,.case-escalation-settings textarea { width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; }
+.case-escalation-status { padding: .75rem; background: var(--brand-soft, #e8f1e9); border-radius: .5rem; }
+@media (max-width: 560px) { .case-escalations { padding: 1rem; } .case-escalation-setting-grid { grid-template-columns: minmax(0,1fr); } .case-escalation-buttons { align-items: stretch; } .case-escalation-buttons button { flex: 1 1 auto; } }

package/template/console/people/PeopleWorkspace.tsx

@@ -4,6 +4,7 @@ import { PageHeader } from "../components/PageHeader";
 import { errorMessage, postJson, requestJson } from "../lib/http";
 import { relativeTime } from "../lib/format";
 import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { PersonAccessDialog } from "./PersonAccessDialog";
 import type { InvitationResponse, PasswordResetResponse, PeopleResponse, WorkspaceInvitation, WorkspacePerson } from "./types";
 
 const roleNames: Record<string, string> = { reviewer: "Analyst", appeal_reviewer: "Appeal analyst", administrator: "Administrator", owner: "Infrastructure owner", auditor: "Auditor" };
@@ -24,6 +25,8 @@ export function PeopleWorkspace() {
   const [error, setError] = useState("");
   const [inviteUrl, setInviteUrl] = useState("");
   const [resetMessage, setResetMessage] = useState("");
+  const [editing, setEditing] = useState<WorkspacePerson | null>(null);
+  const [copied, setCopied] = useState(false);
   const canManage = shell.session?.permissions.managePeople === true;
   const isOwner = shell.session?.roles.includes("owner") === true;
 
@@ -38,10 +41,10 @@ export function PeopleWorkspace() {
     finally { setLoading(false); }
   };
 
-  useEffect(() => { setLoading(true); setInviteUrl(""); setResetMessage(""); void load(); }, [shell.session?.actor.id, canManage]);
+  useEffect(() => { setLoading(true); setInviteUrl(""); setResetMessage(""); setEditing(null); void load(); }, [shell.session?.actor.id, canManage]);
 
   const invite = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
-    event.preventDefault(); setPending("invite"); setError(""); setInviteUrl("");
+    event.preventDefault(); setPending("invite"); setError(""); setInviteUrl(""); setCopied(false);
     try {
       const result = await postJson<InvitationResponse>("/v1/admin/people", { email, role });
       setInviteUrl(result.invitation.inviteUrl); setEmail(""); await load();
@@ -71,11 +74,12 @@ export function PeopleWorkspace() {
       </PageHeader>
       <section className="surface people-surface" aria-labelledby="people-title">
         <form className="invite-form" onSubmit={invite}><label>Email<input type="email" autoComplete="off" required value={email} onChange={(event) => setEmail(event.currentTarget.value)} /></label><label>Role<select value={role} onChange={(event) => setRole(event.currentTarget.value)}><option value="reviewer">Analyst</option><option value="appeal_reviewer">Appeal analyst</option><option value="auditor">Auditor</option>{isOwner ? <option value="administrator">Administrator</option> : null}</select></label><button className="primary" type="submit" disabled={pending === "invite"}>{pending === "invite" ? "Sending…" : "Send invitation"}</button></form>
-        {inviteUrl ? <div className="invite-result"><div><strong>Invitation sent</strong><small>The email contains this single-use link. You can also share it securely; it expires in seven days.</small></div><input value={inviteUrl} readOnly aria-label="Invitation link" /><button className="secondary" type="button" onClick={() => void copy(inviteUrl)}>Copy link</button></div> : null}
+        {inviteUrl ? <div className="invite-result"><div><strong>Invitation sent</strong><small>The email contains this single-use link. You can also share it securely; it expires in seven days.</small></div><input value={inviteUrl} readOnly aria-label="Invitation link" /><button className="secondary" type="button" onClick={() => { void copy(inviteUrl).then(() => setCopied(true)).catch(() => setError("Copy failed. Select the invitation link and copy it manually.")); }}>{copied ? "Copied" : "Copy link"}</button></div> : null}
         {resetMessage ? <p className="form-message" role="status">{resetMessage}</p> : null}
-        <div className="people-columns"><section><h2>Team</h2><div className="people-list" aria-busy={loading}>{loading ? <div className="skeleton-block" /> : people.length ? people.map((person) => { const privileged = person.roles.some((item) => item === "owner" || item === "administrator"); const canReset = isOwner || !privileged; return <article key={person.id}><AnalystIdentity analyst={{ displayName: person.displayName, avatarUrl: person.avatarUrl ?? null, avatarColor: "#315d4d" }} detail={person.email} /><span className="people-role">{person.roles.map(roleName).join(", ")}</span><small>{person.lastLoginAt ? `Last active ${relativeTime(person.lastLoginAt)}` : "Not signed in yet"}</small>{canReset ? <button className="secondary compact-button" type="button" disabled={pending === `reset:${person.id}`} onClick={() => void reset(person.id)}>{pending === `reset:${person.id}` ? "Sending…" : "Send password reset"}</button> : null}</article>; }) : <p className="people-empty">No team members found.</p>}</div></section><section><h2>Invitations</h2><div className="people-list">{invitations.length ? invitations.map((invitation) => <article key={invitation.id}><div><strong>{invitation.email}</strong><small>{roleName(invitation.role)} · {invitation.status}</small></div>{invitation.status === "pending" ? <button className="secondary compact-button" type="button" disabled={pending === `revoke:${invitation.id}`} onClick={() => void revoke(invitation.id)}>{pending === `revoke:${invitation.id}` ? "Revoking…" : "Revoke"}</button> : null}</article>) : <p className="people-empty">No pending invitations.</p>}</div></section></div>
+        <div className="people-columns"><section><h2>Team</h2><div className="people-list" aria-busy={loading}>{loading ? <div className="skeleton-block" /> : people.length ? people.map((person) => { const privileged = person.roles.some((item) => item === "owner" || item === "administrator"); const canReset = isOwner || !privileged; return <article key={person.id}><AnalystIdentity analyst={{ displayName: person.displayName, avatarUrl: person.avatarUrl ?? null, avatarColor: "#315d4d" }} detail={person.email} /><span className="people-role">{person.roles.map(roleName).join(", ")}{person.status === "suspended" ? " · Suspended" : ""}</span><small>{person.lastLoginAt ? `Last active ${relativeTime(person.lastLoginAt)}` : "Not signed in yet"}</small>{canReset ? <div className="people-actions"><button className="secondary compact-button" type="button" onClick={() => setEditing(person)}>Edit access</button><button className="secondary compact-button" type="button" disabled={pending === `reset:${person.id}`} onClick={() => void reset(person.id)}>{pending === `reset:${person.id}` ? "Sending…" : "Send password reset"}</button></div> : null}</article>; }) : <p className="people-empty">No team members found.</p>}</div></section><section><h2>Invitations</h2><div className="people-list">{invitations.length ? invitations.map((invitation) => <article key={invitation.id}><div><strong>{invitation.email}</strong><small>{roleName(invitation.role)} · {invitation.status}</small></div>{invitation.status === "pending" ? <button className="secondary compact-button" type="button" disabled={pending === `revoke:${invitation.id}`} onClick={() => void revoke(invitation.id)}>{pending === `revoke:${invitation.id}` ? "Revoking…" : "Revoke"}</button> : null}</article>) : <p className="people-empty">No pending invitations.</p>}</div></section></div>
         <p className="error surface-error" role="alert">{error}</p>
       </section>
+      <PersonAccessDialog person={editing} owner={isOwner} onClose={() => setEditing(null)} onSaved={() => { setResetMessage("Workspace access updated."); void load(); }} />
     </div>
   );
 }

package/template/console/people/PersonAccessDialog.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef, useState, type FormEvent } from "react";
+import { errorMessage, requestJson } from "../lib/http";
+import type { WorkspacePerson } from "./types";
+
+const roles = { reviewer: "Analyst", appeal_reviewer: "Appeal analyst", auditor: "Auditor", administrator: "Administrator", owner: "Infrastructure owner" };
+
+export function PersonAccessDialog({ person, owner, onClose, onSaved }: { person: WorkspacePerson | null; owner: boolean; onClose: () => void; onSaved: () => void }) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const [selected, setSelected] = useState<string[]>([]);
+  const [status, setStatus] = useState("active");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    setSelected(person?.roles || []); setStatus(person?.status || "active"); setError("");
+    if (person && !ref.current?.open) ref.current?.showModal();
+    if (!person && ref.current?.open) ref.current.close();
+  }, [person]);
+  const close = () => { if (!pending) onClose(); };
+  const save = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!person || pending) return;
+    if (!selected.length) { setError("Choose at least one role."); return; }
+    if (status === "suspended" && person.status !== "suspended" && !window.confirm(`Suspend ${person.displayName}? Their active sessions will be signed out.`)) return;
+    setPending(true); setError("");
+    try {
+      await requestJson(`/v1/admin/people/${encodeURIComponent(person.id)}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ roles: selected, status }) });
+      onSaved(); onClose();
+    } catch (cause) { setError(errorMessage(cause, "Access could not be updated.")); }
+    finally { setPending(false); }
+  };
+  return <dialog ref={ref} className="editor-dialog" aria-labelledby="person-access-title" onCancel={(event) => { event.preventDefault(); close(); }}>
+    <div className="detail-head"><div><h2 id="person-access-title">Edit access</h2><p>{person?.displayName} · {person?.email}</p></div><button type="button" className="icon-button" aria-label="Close access editor" disabled={pending} onClick={close}>×</button></div>
+    <form className="editor-form" onSubmit={(event) => void save(event)}>
+      <fieldset disabled={pending}><legend>Workspace roles</legend>{Object.entries(roles).filter(([role]) => owner || !["owner", "administrator"].includes(role)).map(([role, label]) => <label className="checkbox" key={role}><input type="checkbox" checked={selected.includes(role)} onChange={(event) => { const checked = event.currentTarget.checked; setSelected((current) => checked ? [...current, role] : current.filter((value) => value !== role)); }} />{label}</label>)}</fieldset>
+      <label>Account status<select disabled={pending} value={status} onChange={(event) => setStatus(event.currentTarget.value)}><option value="active">Active</option><option value="suspended">Suspended</option></select></label>
+      <p className="form-help">Suspending access signs out active sessions. Reactivating access lets this teammate sign in again.</p>
+      <p role="alert" className="error">{error}</p><div className="editor-footer"><button type="button" className="secondary" disabled={pending} onClick={close}>Cancel</button><button type="submit" className="primary" disabled={pending}>{pending ? "Saving…" : "Save access"}</button></div>
+    </form>
+  </dialog>;
+}

package/template/console/people/types.ts

@@ -4,6 +4,7 @@ export interface WorkspacePerson {
   email: string;
   avatarUrl?: string | null;
   roles: string[];
+  status: "active" | "suspended";
   lastLoginAt?: string | null;
 }
 

package/template/console/profile/ProfileWorkspace.tsx

@@ -116,7 +116,7 @@ export function ProfileWorkspace() {
       <section className="surface profile-surface" aria-labelledby="profile-title">
         {profile ? <div className="profile-layout">
           <div className="profile-photo-card">
-            <div className="profile-avatar-preview" aria-label="Current profile picture"><AnalystAvatar size="large" analyst={{ displayName: profile.displayName, avatarUrl: profile.avatarUrl ?? null, avatarColor: profile.profile?.avatarColor }} /></div>
+            <div className="profile-avatar-preview" role="img" aria-label="Current profile picture"><AnalystAvatar size="large" analyst={{ displayName: profile.displayName, avatarUrl: profile.avatarUrl ?? null, avatarColor: profile.profile?.avatarColor }} /></div>
             <label className={`secondary upload-button${pending ? " disabled" : ""}`} aria-disabled={Boolean(pending)}>{pending === "upload" ? "Uploading…" : "Choose picture"}<input type="file" accept="image/jpeg,image/png,image/webp" disabled={Boolean(pending)} onChange={(event) => void upload(event)} /></label>
             {profile.avatarUrl ? <button className="text-button" type="button" disabled={Boolean(pending)} onClick={() => void remove()}>{pending === "remove" ? "Removing…" : "Remove picture"}</button> : null}
             <small>JPEG, PNG, or WebP. Maximum 2 MB.</small>

package/template/console/registry/IntegrationSetup.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { dateTime } from "../lib/format";
+import { errorMessage, requestJson } from "../lib/http";
+import { dispatchOpenReport } from "../reports/events";
+import { openChannelDialog, settingsEvents } from "../settings/events";
+import { dispatchNavigation } from "../shell/events";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { registryEvents } from "./events";
+import { IntegrationVerification } from "./IntegrationVerification";
+import type { IntegrationProgress } from "../../shared/integration-progress";
+
+export function IntegrationSetup({onTools}:{onTools:(kind:"enrichment"|"action")=>void}) {
+  const shell=useSyncExternalStore(subscribeToShell,getShellSnapshot,getShellSnapshot);
+  const permissions=shell.session?.permissions??{};
+  const [progress,setProgress]=useState<IntegrationProgress|null>(null),[error,setError]=useState("");
+  const [loading,setLoading]=useState(false);const version=useRef(0);
+  const access=JSON.stringify({actor:shell.session?.actor.id,permissions,scope:shell.session?.queueScope});
+  const load=useCallback(async()=>{const request=++version.current;setLoading(true);setError("");try{const result=await requestJson<IntegrationProgress>("/v1/admin/integration-progress");if(request===version.current)setProgress(result);}catch(cause){if(request===version.current)setError(errorMessage(cause,"Setup evidence could not refresh."));}finally{if(request===version.current)setLoading(false);}},[]);
+  useEffect(()=>{version.current++;setProgress(null);if(permissions.manageComponents)void load();return()=>{version.current++;};},[access,load]);
+  useEffect(()=>{const refresh=()=>void load();window.addEventListener(registryEvents.changed,refresh);window.addEventListener(settingsEvents.channelsChanged,refresh);return()=>{window.removeEventListener(registryEvents.changed,refresh);window.removeEventListener(settingsEvents.channelsChanged,refresh);};},[load]);
+  const [expanded,setExpanded]=useState<string|null>("intake");
+  const config=progress?.configuration;
+  const configured=(count:number|null|undefined,label:string)=>count==null?"Configuration access required":`${count} ${label}`;
+  const stages=[
+    {key:"intake" as const,title:"Receive a report",description:"Start with a hosted form or product widget. Signed customer context keeps identity and content references tied to your application.",configuration:configured(config?.reportingRoutes,"configured reporting routes"),action:"Set up reporting",allowed:permissions.manageIntegrations,run:openChannelDialog},
+    {key:"context" as const,title:"Bring in the right context",description:"Publish read-only customer tools for the evidence your reviewers need. Declare the fields each playbook may request.",configuration:configured(config?.customerReads,"published customer reads"),action:"Choose read tools",allowed:true,run:()=>onTools("enrichment")},
+    {key:"action" as const,title:"Confirm the customer action",description:"Choose exact targets and approval rules. The case waits for your application to confirm the approved change.",configuration:configured(config?.customerActions,"published customer actions"),action:"Choose action tools",allowed:true,run:()=>onTools("action")},
+    {key:"notice" as const,title:"Reach each participant",description:"Write separate public outcomes for the reporter and affected person. A delivery handoff stays distinct from someone reading the notice.",configuration:config?.noticeChannel==null?"Configuration access required":config.noticeChannel?"Participant channel configured":"Participant channel needed",action:"Review notice setup",allowed:permissions.manageInstallation||permissions.manageIntegrations,run:()=>dispatchNavigation("settings")},
+    {key:"playbook" as const,title:"Run a complete case",description:"Publish and activate a tested playbook, then submit a fresh report through your customer channel. Follow it from review to the confirmed outcome.",configuration:configured(config?.activePlaybooks,"active playbook queue assignments"),action:"Open playbooks",allowed:permissions.manageWorkflows,run:()=>dispatchNavigation("workflows")},
+  ];
+  return <>{permissions.manageIntegrations&&permissions.manageWorkflows&&permissions.readReports&&permissions.readEvidence&&progress?.canReadCases===true?<IntegrationVerification key={access}/>:null}<section className="integration-setup surface" aria-label="Customer connection setup">
+    <div className="surface-head"><div><h2>Customer connection setup reference</h2><p>Start with reporting. Add customer context, approved actions and participant delivery as your playbook needs them.</p></div><button className="secondary" type="button" disabled={loading} onClick={()=>void load()}>{loading?"Checking records…":"Refresh historical evidence"}</button></div>
+    {progress?.localSandbox?<p className="case-guidance">Local sandbox records. Model fixtures and local customer receivers do not verify production model judgement or external delivery.</p>:null}
+    <ol className="integration-stages" aria-busy={loading}>{stages.map((stage,index)=>{const evidence=progress?.evidence[stage.key];const open=expanded===stage.key;return <li key={stage.key}>
+      <h3><button type="button" className="integration-stage-toggle" aria-expanded={open} aria-controls={`integration-stage-${stage.key}`} onClick={()=>setExpanded(open?null:stage.key)}><span className="integration-stage-number" aria-hidden="true">{index+1}</span><span>{stage.title}<small>{progress?stage.configuration:"Loading configuration…"}</small></span><span aria-hidden="true">{open?"−":"+"}</span></button></h3>
+      <div id={`integration-stage-${stage.key}`} hidden={!open} className="integration-stage-detail"><p>{stage.description}</p><div className="integration-stage-evidence">{evidence?<><strong>Historical case evidence</strong><button className="text-button" type="button" onClick={()=>dispatchOpenReport(evidence.reportId)}>{evidence.reference}</button><small>{dateTime(evidence.observedAt)}</small></>:<span>{progress?.canReadCases===false?"Case evidence is restricted for this role":progress?"No matching case evidence in your access yet":"Checking saved evidence…"}</span>}</div>{stage.allowed?<button className="secondary" type="button" onClick={stage.run}>{stage.action}</button>:<small>Ask your workspace administrator to complete this step.</small>}</div>
+    </li>;})}</ol>
+    <p className="form-help">These are saved configuration and case records, not a live health check. Run a fresh case after changes. Contract examples alone do not complete this journey.</p>
+    {error?<p className="error" role="alert">{error} {progress?"Previously loaded records remain visible.":""}</p>:null}
+  </section></>;
+}