create-safest-tools 0.6.0 → 0.7.0

package/template/console/configuration/ConfigurationBuilders.tsx

@@ -0,0 +1,101 @@
+import type { JsonObject, JsonValue, QueueSummary } from "./types";
+
+interface BuilderProps { value: JsonObject; onChange: (value: JsonObject) => void; disabled: boolean }
+const objects = (value: JsonValue | undefined): JsonObject[] => Array.isArray(value) ? value.filter((item): item is JsonObject => Boolean(item) && typeof item === "object" && !Array.isArray(item)) : [];
+const string = (value: JsonValue | undefined): string => value == null ? "" : String(value);
+
+function QueueChoice({ label, help, value, queues, onChange, disabled, humanOnly = false }: {
+  label: string; help: string; value: string; queues: QueueSummary[]; onChange: (value: string) => void; disabled: boolean; humanOnly?: boolean;
+}) {
+  const choices = queues.filter(queue => queue.id === value || queue.status === "active" && (!humanOnly || queue.activePolicy?.managementMode === "human"));
+  return <label>{label}<small>{help}</small><select aria-label={label} required disabled={disabled} value={value} onChange={event => onChange(event.currentTarget.value)}>
+    <option value="" disabled>Choose a queue</option>
+    {value && !choices.some(queue => queue.id === value) ? <option value={value}>{value} · unavailable</option> : null}
+    {choices.map(queue => <option value={queue.id} key={queue.id}>{queue.name}{queue.status === "active" ? "" : ` · ${queue.status}`}</option>)}
+  </select></label>;
+}
+
+const fields = [["reason_code", "Report reason"], ["source", "Report source"], ["target_type", "Content type"], ["priority", "Case priority"], ["safeguard.requires_human", "Human review required"]];
+const operators = [["eq", "is"], ["neq", "is not"], ["in", "is one of"], ["not_in", "is not one of"], ["contains", "contains"], ["exists", "has a value"], ["gt", "is greater than"], ["gte", "is at least"], ["lt", "is less than"], ["lte", "is at most"]];
+
+function Condition({ value, onChange, onRemove, disabled, index }: { value: JsonObject; onChange: (value: JsonObject) => void; onRemove: () => void; disabled: boolean; index: number }) {
+  const field = string(value.field), operator = string(value.operator);
+  const list = operator === "in" || operator === "not_in";
+  const numeric = typeof value.value === "number" || Array.isArray(value.value) && value.value.some(item => typeof item === "number") || field === "priority" || ["gt", "gte", "lt", "lte"].includes(operator);
+  const boolean = typeof value.value === "boolean" || Array.isArray(value.value) && value.value.some(item => typeof item === "boolean") || field === "safeguard.requires_human";
+  const changeOperator = (next: string) => {
+    const { value: previous, ...rest } = value;
+    const initial = boolean ? true : numeric ? 0 : "";
+    onChange(next === "exists" ? { ...rest, operator: next } : { ...rest, operator: next, value: next === "in" || next === "not_in" ? Array.isArray(previous) ? previous : [previous ?? initial] : Array.isArray(previous) ? previous[0] ?? initial : previous ?? initial });
+  };
+  return <div className="routing-condition" role="group" aria-label={`Condition ${index + 1}`}>
+    <label>Field<select aria-label={`Condition ${index + 1} field`} value={fields.some(([key]) => key === field) ? field : "custom"} disabled={disabled} onChange={event => {
+      const next = event.currentTarget.value;
+      const initial = next === "priority" ? 0 : next === "safeguard.requires_human" ? true : "";
+      onChange({ ...value, field: next === "custom" ? "answer.details" : next, ...(operator === "exists" ? {} : { value: list ? [initial] : initial }) });
+    }}>{fields.map(([key, label]) => <option value={key} key={key}>{label}</option>)}<option value="custom">Answer, trusted fact, or enrichment</option></select></label>
+    {!fields.some(([key]) => key === field) ? <label>Field name<input aria-label={`Condition ${index + 1} field name`} value={field} disabled={disabled} required onChange={event => onChange({ ...value, field: event.currentTarget.value })} /></label> : null}
+    <label>Comparison<select aria-label={`Condition ${index + 1} comparison`} value={operator} disabled={disabled} onChange={event => changeOperator(event.currentTarget.value)}>{operators.map(([key, label]) => <option key={key} value={key}>{label}</option>)}</select></label>
+    {operator === "exists" ? null : boolean ? <label>{list ? "Values" : "Value"}<select required aria-label={`Condition ${index + 1} value`} value={list ? [true, false].filter(item => Array.isArray(value.value) && value.value.includes(item)).join(",") : String(value.value)} disabled={disabled} onChange={event => onChange({ ...value, value: list ? event.currentTarget.value.split(",").map(item => item === "true") : event.currentTarget.value === "true" })}><option value="" disabled>Choose a value</option><option value="true">Yes</option><option value="false">No</option>{list ? <option value="true,false">Yes or no</option> : null}</select></label> : <label>{list ? "Values, separated by commas" : "Value"}<input aria-label={`Condition ${index + 1} value`} type={numeric && !list ? "number" : "text"} step="any" pattern={numeric && list ? "-?\\d+(?:\\.\\d+)?(?:\\s*,\\s*-?\\d+(?:\\.\\d+)?)*" : undefined} disabled={disabled} required value={Array.isArray(value.value) ? value.value.join(", ") : string(value.value)} onChange={event => {
+      const input = event.currentTarget.value;
+      onChange({ ...value, value: list ? input.split(",").map(item => item.trim()).map(item => numeric && item !== "" && Number.isFinite(Number(item)) ? Number(item) : item) : numeric && input !== "" ? Number(input) : input });
+    }} /></label>}
+    <button type="button" className="secondary" disabled={disabled} aria-label={`Remove condition ${index + 1}`} onClick={onRemove}>Remove</button>
+  </div>;
+}
+
+export function RoutingBuilder({ value, onChange, queues, disabled }: BuilderProps & { queues: QueueSummary[] }) {
+  const rules = objects(value.rules).sort((a, b) => Number(b.priority) - Number(a.priority) || string(a.id).localeCompare(string(b.id)));
+  const update = (index: number, next: JsonObject) => onChange({ ...value, rules: rules.map((rule, i) => i === index ? next : rule) });
+  const reorder = (index: number, destination: number) => {
+    const next = [...rules];
+    next.splice(destination, 0, next.splice(index, 1)[0]!);
+    onChange({ ...value, rules: next.map((rule, i) => ({ ...rule, priority: 100_000 - i })) });
+  };
+  return <div className="configuration-builder">
+    <section className="configuration-section"><h3>Where should cases go?</h3><p>Choose who handles new cases and who handles cases that need a safety review.</p>
+      <QueueChoice label="Default queue" help="Receives cases that do not match a rule below." value={string(value.default_queue_id)} queues={queues} onChange={next => onChange({ ...value, default_queue_id: next })} disabled={disabled} />
+      <QueueChoice label="Safety review queue" help="Human reviewers handle cases flagged by safeguards, before any routing rule or AI." value={string(value.safeguard_queue_id)} queues={queues} humanOnly onChange={next => onChange({ ...value, safeguard_queue_id: next })} disabled={disabled} />
+    </section>
+    <section className="configuration-section"><div className="configuration-section-heading"><div><h3>Routing rules</h3><p>Checked from top to bottom. The first matching rule chooses the queue.</p></div><button className="secondary" type="button" disabled={disabled || rules.length >= 100} onClick={() => onChange({ ...value, rules: [...rules, { id: `rule-${crypto.randomUUID()}`, priority: 0, queue_id: value.default_queue_id || "", match: "all", conditions: [{ field: "reason_code", operator: "eq", value: "" }] }].map((rule, i) => ({ ...rule, priority: 100_000 - i })) })}>Add rule</button></div>
+      {!rules.length ? <p className="configuration-empty">All cases go to the default queue, unless a safeguard requires human review.</p> : rules.map((rule, index) => <fieldset className="routing-rule" key={string(rule.id)}><legend>Rule {index + 1}</legend>
+        <div className="configuration-rule-actions"><button type="button" className="secondary" aria-label={`Move rule ${index + 1} up`} disabled={disabled || index === 0} onClick={() => reorder(index, index - 1)}>Move up</button><button type="button" className="secondary" aria-label={`Move rule ${index + 1} down`} disabled={disabled || index === rules.length - 1} onClick={() => reorder(index, index + 1)}>Move down</button><button type="button" className="secondary" disabled={disabled} aria-label={`Remove rule ${index + 1}`} onClick={() => onChange({ ...value, rules: rules.filter((_, i) => i !== index) })}>Remove rule</button></div>
+        <label>Match<select aria-label={`Rule ${index + 1} match`} value={string(rule.match)} disabled={disabled} onChange={event => update(index, { ...rule, match: event.currentTarget.value })}><option value="all">All of these conditions</option><option value="any">Any of these conditions</option></select></label>
+        {objects(rule.conditions).map((condition, i) => <Condition key={i} index={i} value={condition} disabled={disabled} onChange={next => update(index, { ...rule, conditions: objects(rule.conditions).map((item, j) => i === j ? next : item) })} onRemove={() => update(index, { ...rule, conditions: objects(rule.conditions).filter((_, j) => i !== j) })} />)}
+        {!objects(rule.conditions).length ? <p>This rule matches {rule.match === "all" ? "every case" : "no cases"}.</p> : null}
+        <button className="secondary" type="button" disabled={disabled || objects(rule.conditions).length >= 50} onClick={() => update(index, { ...rule, conditions: [...objects(rule.conditions), { field: "reason_code", operator: "eq", value: "" }] })}>Add condition</button>
+        <QueueChoice label={`Rule ${index + 1} queue`} help="Send matching cases to this queue." queues={queues} value={string(rule.queue_id)} disabled={disabled} onChange={next => update(index, { ...rule, queue_id: next })} />
+      </fieldset>)}
+    </section>
+    {objects(value.fixtures).length || objects(value.intake_enrichments).length ? <p className="configuration-retained">{objects(value.fixtures).length} saved routing examples and {objects(value.intake_enrichments).length} intake enrichments are retained. Use Advanced configuration to inspect them.</p> : null}
+  </div>;
+}
+
+export function PolicyBuilder({ value, onChange, disabled }: BuilderProps) {
+  const rules = objects(value.rules);
+  return <div className="configuration-builder"><label>Policy title<input required minLength={3} maxLength={160} disabled={disabled} value={string(value.title)} onChange={event => onChange({ ...value, title: event.currentTarget.value })} /></label>
+    <section className="configuration-section"><h3>Decision rules</h3><p>Give reviewers clear rules to apply when deciding a case.</p>
+      {rules.map((rule, index) => <fieldset key={index}><legend>Rule {index + 1}</legend><label>Rule title<input aria-label={`Rule ${index + 1} title`} required minLength={3} maxLength={200} disabled={disabled} value={string(rule.title)} onChange={event => onChange({ ...value, rules: rules.map((item, i) => i === index ? { ...item, title: event.currentTarget.value } : item) })} /></label>
+        <label>Guidance for reviewers<textarea aria-label={`Rule ${index + 1} guidance`} rows={3} disabled={disabled} value={string(rule.description)} onChange={event => onChange({ ...value, rules: rules.map((item, i) => i === index ? { ...item, description: event.currentTarget.value } : item) })} /></label>
+        <button className="secondary" type="button" disabled={disabled || rules.length === 1} onClick={() => onChange({ ...value, rules: rules.filter((_, i) => i !== index) })}>Remove rule {index + 1}</button></fieldset>)}
+      <button className="secondary" type="button" disabled={disabled || rules.length >= 500} onClick={() => onChange({ ...value, rules: [...rules, { code: `rule-${crypto.randomUUID()}`, title: "" }] })}>Add rule</button>
+    </section></div>;
+}
+
+export function MessageBuilder({ value, onChange, disabled }: BuilderProps) {
+  const variables = value.variables_schema && typeof value.variables_schema === "object" && !Array.isArray(value.variables_schema) ? value.variables_schema : {};
+  const setBody = (body: string) => {
+    const next = { ...variables };
+    for (const match of body.matchAll(/\{\{\s*([A-Za-z][A-Za-z0-9_]*)\s*\}\}/gu)) if (!(match[1]! in next)) next[match[1]!] = { type: "string" };
+    onChange({ ...value, body_template: body, variables_schema: next });
+  };
+  return <div className="configuration-builder"><div className="form-grid">
+    <label>Send to<select disabled={disabled} value={string(value.audience)} onChange={event => onChange({ ...value, audience: event.currentTarget.value })}><option value="reporter">Person who reported</option><option value="affected_user">Person affected by the decision</option></select></label>
+    <label>When to use<select disabled={disabled} value={string(value.purpose)} onChange={event => onChange({ ...value, purpose: event.currentTarget.value })}><option value="follow_up">Request more information</option><option value="outcome">Share the case outcome</option><option value="affected_user_notice">Explain an action taken</option><option value="appeal_outcome">Share the appeal outcome</option></select></label>
+  </div><label>Language<small>Language code, such as en, fr, or en-GB.</small><input required pattern="[a-z]{2,3}(?:-[A-Z]{2})?" maxLength={6} disabled={disabled} value={string(value.locale)} onChange={event => onChange({ ...value, locale: event.currentTarget.value })} /></label>
+    <label>Message<textarea required rows={6} maxLength={10000} disabled={disabled} value={string(value.body_template)} onChange={event => setBody(event.currentTarget.value)} /></label>
+    <div className="message-variable-buttons"><span>Insert a detail:</span>{[...new Set(["report_reference", ...Object.keys(variables)])].map(name => <button className="secondary" type="button" disabled={disabled} key={name} onClick={() => setBody(`${string(value.body_template)} {{${name}}}`)}>{name.replaceAll("_", " ")}</button>)}</div>
+    <label className="checkbox"><input type="checkbox" disabled={disabled} checked={value.automation_allowed === true} onChange={event => onChange({ ...value, automation_allowed: event.currentTarget.checked })} /><span>Allow this template in automated messages</span></label>
+    <section className="message-preview" aria-label="Message preview"><h3>Preview</h3><p>{string(value.body_template).replace(/\{\{\s*([A-Za-z][A-Za-z0-9_]*)\s*\}\}/gu, (_, name: string) => name === "report_reference" ? "RPT-EXAMPLE" : `[${name.replaceAll("_", " ")}]`) || "Your message will appear here."}</p><small>Example details are replaced with the recipient’s case details when sent.</small></section>
+  </div>;
+}

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; } }