create-safest-tools 0.6.0 → 0.7.0

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

package/template/console/registry/IntegrationVerification.tsx

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

package/template/console/registry/RegistryDetailsDialog.tsx

@@ -124,7 +124,7 @@ export function RegistryDetailsDialog({ item, kind, canManage, onClose, onChange
   useEffect(() => {
     if (!item) return;
     let active = true;
-    setLoading(true); setError(""); setDetail(null); setDependencies(null); setValidation(null); setConfirmArchive(false);
+    setLoading(true); setPending(""); setError(""); setDetail(null); setDependencies(null); setValidation(null); setConfirmArchive(false);
     void Promise.all([
       requestJson<RegistryDetailResponse>(`/v1/admin/${route}/${encodeURIComponent(item.id)}`),
       requestJson<RegistryDependenciesResponse>(`/v1/admin/${route}/${encodeURIComponent(item.id)}/dependencies`),
@@ -239,7 +239,7 @@ export function RegistryDetailsDialog({ item, kind, canManage, onClose, onChange
               <button className="danger-link" type="button" disabled={Boolean(pending) || dependencyList.length > 0} onClick={() => setConfirmArchive(true)}>Archive {kind === "component" ? "tool" : "connection"}</button>
             </div>
             {dependencyList.length ? <p className="registry-blocked-copy">Archive is unavailable until the dependencies above are retired or moved to another version.</p> : null}
-            {confirmArchive ? <div className="registry-archive-confirm" role="alert"><div><strong>Archive {item.name}?</strong><p>It will disappear from normal lists and cannot be restored. Version and audit records will remain.</p></div><div><button className="secondary" type="button" disabled={Boolean(pending)} onClick={() => setConfirmArchive(false)}>Cancel</button><button className="danger" type="button" disabled={Boolean(pending)} onClick={() => void setLifecycle("archive")}>{pending === "archive" ? "Archiving…" : "Archive permanently"}</button></div></div> : null}
+            {confirmArchive ? <div className="registry-archive-confirm" role="alert"><div><strong>Archive {item.name}?</strong><p>It will disappear from normal lists and cannot be restored. Version and audit records will remain.</p></div><div><button className="secondary" type="button" disabled={Boolean(pending)} onClick={() => setConfirmArchive(false)}>Cancel</button><button className="danger-action" type="button" disabled={Boolean(pending)} onClick={() => void setLifecycle("archive")}>{pending === "archive" ? "Archiving…" : "Archive permanently"}</button></div></div> : null}
           </section> : null}
         </>}
         <p className="error" role="alert">{error}</p>

package/template/console/registry/RegistryDialog.tsx

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

package/template/console/registry/RegistryWorkspace.tsx

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

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

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