create-safest-tools 0.6.0 → 0.7.0

package/template/console/reports/CaseActions.tsx

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

package/template/console/reports/CaseContinuity.tsx

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

package/template/console/reports/CaseNotices.tsx

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

package/template/console/reports/CaseOwnership.tsx

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

package/template/console/reports/CaseReviewTasks.tsx

@@ -0,0 +1,148 @@
+import { useEditingAccess } from "./use-editing-access";
+import { readPrivateDraft, savePrivateDraft, removePrivateDraft } from "./private-drafts";
+import { useEffect, useId, useRef, useState, useSyncExternalStore, type FormEvent } from "react";
+import { dateTime, readable } from "../lib/format";
+import { ApiRequestError, errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { dispatchOpenReport, reportEvents } from "./events";
+import type { ReportDetailRecord, ReportDestination } from "./types";
+
+type Task = {
+  id: string; runId: string; state: string; taskType: string; assignedOperatorId: string | null;
+  claimExpiresAt: string | null; dueAt: string | null; actionProposalId: string | null;
+  context: Record<string, unknown>;
+  responseSchema: { properties?: { decision_code?: { enum?: string[] } } };
+};
+
+function ReviewTask({ task, report, actorId, canApprove, canDecide, onChanged }: {
+  task: Task; report: ReportDetailRecord; actorId: string; canApprove: boolean; canDecide: boolean; onChanged: (message: string) => void;
+}) {
+  const fieldId = useId();
+  const approval = Boolean(task.actionProposalId);
+  const options = task.responseSchema?.properties?.decision_code?.enum ?? [];
+  const [savedDraft] = useState(() => readPrivateDraft(actorId, `task:${task.id}`));
+  const [decision, setDecision] = useState(savedDraft?.taskDecision || "");
+  const [rationale, setRationale] = useState(savedDraft?.rationale || "");
+  const [evidence, setEvidence] = useState<string[]>(savedDraft?.evidence || []);
+  const [findings, setFindings] = useState<string[]>(savedDraft?.findings || []);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  const activeRequest = useRef(false);
+  const savedRequest = useRef<{ fingerprint: string; key: string } | null>(null);
+  const dirty = Boolean(decision || rationale || evidence.length || findings.length);
+  const activeAccess = useEditingAccess(task.claimExpiresAt);
+  const mine = task.state === "claimed" && task.assignedOperatorId === actorId && activeAccess;
+  const claimable = task.state === "open" || (task.state === "claimed" && !activeAccess);
+  const canSubmit = approval ? canApprove : canDecide;
+  const title = approval ? "Approve the customer action" : typeof task.context.title === "string" ? task.context.title : "Review the case";
+  const instructions = typeof task.context.instructions === "string" ? task.context.instructions : report.reviewerInstructions;
+  const toggle = (items: string[], value: string, checked: boolean) => checked ? [...new Set([...items, value])] : items.filter(item => item !== value);
+
+  useEffect(() => {
+    savePrivateDraft(actorId,`task:${task.id}`, { message:"",awaitReporter:false,decisionCode:"",policyCode:"",rationale,reporterNotice:"",affectedNotice:"",actionCode:"",evidence,taskDecision:decision,findings });
+  }, [actorId,task.id,rationale,evidence,decision,findings]);
+  useEffect(() => {
+    const leaving = (event: Event) => { if (activeRequest.current) event.preventDefault(); };
+    window.addEventListener(reportEvents.beforeClose, leaving);
+    return () => window.removeEventListener(reportEvents.beforeClose, leaving);
+  }, []);
+
+  const claim = async (release = false) => {
+    if (activeRequest.current) return;
+    activeRequest.current = true; setPending(true); setError("");
+    try {
+      await requestJson(`/v1/admin/tasks/${encodeURIComponent(task.id)}/claim`, { method: release ? "DELETE" : "POST", headers: mutationHeaders(false) });
+      onChanged(release ? "Task editing access released. Your private draft is saved in this tab." : "Task editing access is active. Choose an outcome and explain your reasoning.");
+    } catch (cause) { setError(errorMessage(cause, "The review claim could not be changed.")); }
+    finally { activeRequest.current = false; setPending(false); }
+  };
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!mine || activeRequest.current || !decision || !rationale.trim()) return;
+    const response = approval ? { decision, reason: rationale.trim() } : { decision_code: decision, rationale: rationale.trim(), evidence_references: evidence, finding_ids: findings };
+    const fingerprint = JSON.stringify({ taskId: task.id, response });
+    if (savedRequest.current?.fingerprint !== fingerprint) savedRequest.current = { fingerprint, key: crypto.randomUUID() };
+    activeRequest.current = true; setPending(true); setError("");
+    try {
+      await requestJson(`/v1/admin/tasks/${encodeURIComponent(task.id)}/respond`, { method: "POST", headers: { "content-type": "application/json", "idempotency-key": savedRequest.current.key }, body: JSON.stringify({ response }) });
+      removePrivateDraft(actorId,`task:${task.id}`); setDecision(""); setRationale(""); setEvidence([]); setFindings([]); savedRequest.current = null;
+      onChanged(approval ? "Approval recorded. The playbook will verify the customer action before completing the outcome." : "Review submitted. The playbook is continuing from your saved response.");
+    } catch (cause) { setError(cause instanceof ApiRequestError ? cause.message : "The connection was interrupted. Your response is still here. Retry to check the same submission."); }
+    finally { activeRequest.current = false; setPending(false); }
+  };
+
+  return <article className="case-review-task" data-task-id={task.id} tabIndex={-1} aria-label={title}>
+    <div className="case-review-heading"><div><h4>{title}</h4>{task.dueAt ? <small>Due {dateTime(task.dueAt)}</small> : null}</div><span className="badge">{mine ? "Your review" : readable(task.state)}</span></div>
+    {instructions ? <p className="case-review-instructions">{instructions}</p> : null}
+    {approval ? <div className="case-action-preview"><strong>{readable(String(task.context.action_code || "Customer action"))}</strong><p>Review the exact target and payload before approving.</p><dl><dt>Target</dt><dd><pre tabIndex={0} aria-label="Proposed action target">{JSON.stringify(task.context.target, null, 2)}</pre></dd><dt>Action details</dt><dd><pre tabIndex={0} aria-label="Proposed action details">{JSON.stringify(task.context.payload, null, 2)}</pre></dd></dl></div> : null}
+    {mine ? <p className="form-help">Editing access lasts until {dateTime(task.claimExpiresAt || "")}. Your case ownership stays unchanged. <button type="button" className="text-button" disabled={pending} onClick={() => void claim(true)}>Release task access</button></p> : claimable ? <button className="primary" type="button" disabled={pending || !canSubmit} onClick={() => void claim()}>{pending ? "Starting…" : "Start task"}</button> : <p className="form-help">Another reviewer holds this task. You can continue reading the case.</p>}
+    {approval || options.length ? <form onSubmit={event => void submit(event)}><fieldset disabled={!mine || pending || !canSubmit}><legend>{approval ? "Your approval" : "Your review"}</legend>
+      <div className="case-review-field"><label htmlFor={`${fieldId}-outcome`}>{approval ? "Action approval" : "Review outcome"}</label><select id={`${fieldId}-outcome`} required value={decision} onChange={event => setDecision(event.currentTarget.value)}><option value="">Choose an outcome</option>{(approval ? ["approved", "rejected"] : options).map(code => <option value={code} key={code}>{readable(code)}</option>)}</select></div>
+      <div className="case-review-field"><label htmlFor={`${fieldId}-rationale`}>{approval ? "Approval reason" : "Review rationale"}</label><textarea id={`${fieldId}-rationale`} required maxLength={approval ? 1000 : 2000} value={rationale} onChange={event => setRationale(event.currentTarget.value)} placeholder="Explain what the evidence establishes and how the policy applies." /></div>
+      {!approval ? <div className="case-review-sources"><strong>Sources supporting this decision</strong><p className="form-help">Select only the evidence you considered. Missing information should remain explicit in your rationale.</p>{(report.evidence ?? []).map(item => <label className="checkbox" key={item.reference}><input type="checkbox" checked={evidence.includes(item.reference)} onChange={event => setEvidence(toggle(evidence, item.reference, event.currentTarget.checked))} /><span>{item.reference} · {readable(item.availability)}</span></label>)}{(report.findings ?? []).filter(item => item.id && item.runId === task.runId && item.status === "available").map(item => <label className="checkbox" key={item.id}><input type="checkbox" checked={findings.includes(item.id!)} onChange={event => setFindings(toggle(findings, item.id!, event.currentTarget.checked))} /><span>{item.summary} · {item.componentKey || "Case finding"}</span></label>)}{!report.evidence?.length && !report.findings?.length ? <p>No evidence sources have been recorded yet.</p> : null}</div> : null}
+      <button className="primary" type="submit">{pending ? "Submitting…" : approval ? "Submit action approval" : "Submit review and continue"}</button>
+    </fieldset></form> : <p className="error">This task uses a response form that is not supported in the case workspace yet. Ask an administrator to inspect the published task.</p>}
+    {!canSubmit ? <p className="form-help">{approval ? "Your role can read this task but cannot approve customer actions." : "Your role can read this task but cannot submit a case decision."}</p> : null}
+    {dirty ? <p className="private-draft-status">Private task draft saved in this tab.</p> : null}
+    {error ? <p className="error" role="alert">{error}</p> : null}
+  </article>;
+}
+
+export function CaseReviewTasks({ report, onOutcome, destination }: { report: ReportDetailRecord; onOutcome: () => void; destination?: ReportDestination }) {
+  const shell = useSyncExternalStore(subscribeToShell, getShellSnapshot, getShellSnapshot);
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [notice, setNotice] = useState("");
+  const [epoch, setEpoch] = useState(0);
+  const sectionRef = useRef<HTMLElement>(null);
+  const focusedRequest = useRef(0);
+  useEffect(() => {
+    if (loading || destination?.section !== "review" || !destination.taskId || focusedRequest.current === destination.request) return;
+    const frame = requestAnimationFrame(() => {
+      const target = [...(sectionRef.current?.querySelectorAll<HTMLElement>("[data-task-id]") || [])]
+        .find(element => element.dataset.taskId === destination.taskId);
+      if (!target || !target.getClientRects().length) return;
+      focusedRequest.current = destination.request;
+      target.focus({ preventScroll: true });
+      const content = target.closest<HTMLElement>(".report-detail-content");
+      if (content) {
+        const tabs = content.querySelector(".case-section-tabs")?.getBoundingClientRect().height || 0;
+        content.scrollTop += target.getBoundingClientRect().top - content.getBoundingClientRect().top - tabs - 12;
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [destination, loading, tasks]);
+  const canReview = shell.session?.permissions.reviewTasks === true;
+  useEffect(() => {
+    if (!canReview) { setLoading(false); return; }
+    let active = true; let inFlight = false;
+    const refresh = async () => {
+      if (inFlight || document.visibilityState === "hidden") return;
+      inFlight = true;
+      try {
+        const result = await requestJson<{ tasks: Task[] }>(`/v1/admin/tasks?report_id=${encodeURIComponent(report.id)}&limit=100`);
+        if (active) { setTasks(result.tasks); setError(""); if (!result.tasks.some(task => ["open", "claimed"].includes(task.state))) dispatchOpenReport(report.id); }
+      } catch (cause) { if (active) setError(errorMessage(cause, "Review tasks could not be loaded.")); }
+      finally { inFlight = false; if (active) setLoading(false); }
+    };
+    void refresh(); const timer = setInterval(() => void refresh(), 5000);
+    return () => { active = false; clearInterval(timer); };
+  }, [report.id, canReview, epoch]);
+  const changed = (message: string) => { setNotice(message); setEpoch(value => value + 1); dispatchOpenReport(report.id); };
+  const open = tasks.filter(task => ["open", "claimed"].includes(task.state));
+  const actions = (report.workflowActions || []).filter(action => action.recordKind === "proposal");
+  const unresolved = actions.some(action => action.state !== "applied");
+  const failed = actions.some(action => action.state === "failed" && action.terminal);
+  const waitingNotices = (report.notices || []).some(notice => notice.decisionId && notice.deliveryState !== "delivered");
+  const terminal = report.workflowRuns?.some(run => run.runKind === "primary" && ["succeeded","failed","terminated","repair_required"].includes(run.state));
+  const completed = ["resolved_by_human","resolved_by_ai","closed","appealed"].includes(report.state);
+  return <section ref={sectionRef} className="case-next-step" aria-label="Playbook next step"><div className="case-review-heading"><div><h3>Next step</h3><p>This case follows its published playbook. Complete the current task to continue.</p></div><button className="secondary" type="button" onClick={() => { setEpoch(value => value + 1); dispatchOpenReport(report.id); }}>Refresh progress</button></div>
+    {!canReview ? <p>Your role can read this case. A reviewer with access to its queue must complete the next task.</p> : loading ? <p role="status">Loading the current review…</p> : open.length ? open.map(task => <ReviewTask key={task.id} task={task} report={report} actorId={shell.session!.actor.id} canApprove={shell.session?.permissions.approveActions === true} canDecide={shell.session?.permissions.decideReports === true} onChanged={changed} />) : completed ? <p>The review is recorded. <button type="button" className="text-button" onClick={onOutcome}>Inspect the outcome</button></p>
+      : unresolved ? <p>{failed ? "A customer action needs recovery. The case remains open." : "The playbook is waiting for customer action confirmation."} <button type="button" className="text-button" onClick={onOutcome}>Review customer actions</button></p>
+      : waitingNotices ? <p>Participant notice delivery is still outstanding. <button type="button" className="text-button" onClick={onOutcome}>Review participant notices</button></p>
+      : terminal ? <p>The playbook stopped without a completed outcome. Review its outcome and delivery history before continuing. <button type="button" className="text-button" onClick={onOutcome}>Inspect unresolved work</button></p>
+      : <p>The playbook is continuing. Its next review or approval will appear here.</p>}
+    {notice ? <p role="status">{notice}</p> : null}{error ? <p className="error" role="alert">{error} Use Refresh progress to try again.</p> : null}
+  </section>;
+}

package/template/console/reports/EnrichmentFindings.tsx

@@ -0,0 +1,148 @@
+import { dateTime, readable } from "../lib/format";
+import type { FindingRecord, WorkflowRunRecord } from "./types";
+
+type DataRecord = Record<string, unknown>;
+
+function record(value: unknown): DataRecord {
+  return value && typeof value === "object" && !Array.isArray(value) ? value as DataRecord : {};
+}
+
+function records(value: unknown): DataRecord[] {
+  return Array.isArray(value) ? value.filter((item): item is DataRecord => Boolean(item && typeof item === "object" && !Array.isArray(item))) : [];
+}
+
+function text(value: unknown, fallback = ""): string {
+  return typeof value === "string" || typeof value === "number" ? String(value) : fallback;
+}
+
+function count(value: unknown): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+
+function accountAge(value: unknown): string {
+  const createdAt = Date.parse(text(value));
+  if (!Number.isFinite(createdAt) || createdAt > Date.now()) return "Unavailable";
+  const created = new Date(createdAt);
+  const now = new Date();
+  let months = (now.getUTCFullYear() - created.getUTCFullYear()) * 12 + now.getUTCMonth() - created.getUTCMonth();
+  if (now.getUTCDate() < created.getUTCDate()) months -= 1;
+  if (months < 1) {
+    const days = Math.floor((now.getTime() - created.getTime()) / 86_400_000);
+    return days < 1 ? "Today" : `${days} day${days === 1 ? "" : "s"}`;
+  }
+  const years = Math.floor(months / 12);
+  const remainingMonths = months % 12;
+  if (!years) return `${months} month${months === 1 ? "" : "s"}`;
+  return remainingMonths ? `${years}y ${remainingMonths}m` : `${years} year${years === 1 ? "" : "s"}`;
+}
+
+function findingTitle(finding: FindingRecord): string {
+  return readable(finding.componentKey || finding.findingType || "Enrichment result");
+}
+
+function findingState(finding: FindingRecord): string {
+  return finding.freshness || finding.status || "available";
+}
+
+function MessageResult({ message }: { message: DataRecord }) {
+  const media = record(message.media);
+  const reported = message.is_reported_message === true;
+  const body = text(message.body) || text(media.description) || (Object.keys(media).length ? "Media attachment" : "No message text");
+  const author = text(message.author_name) || readable(text(message.author_role, "participant"));
+  const timestamp = text(message.created_at);
+  const moderation = text(message.moderation_reason);
+  return (
+    <article className={`enrichment-message${reported ? " reported" : ""}`}>
+      <header><div><strong>{reported ? "Reported message" : author}</strong><span>{reported ? author : readable(text(message.author_role, "participant"))}</span></div><span>{timestamp ? dateTime(timestamp) : "Time unavailable"}</span></header>
+      <p>{body}</p>
+      <small>{readable(text(message.status, "available"))}{moderation ? ` · ${moderation}` : ""}{text(media.verdict) ? ` · Media: ${readable(text(media.verdict))}` : ""}</small>
+    </article>
+  );
+}
+
+function ConversationResult({ data }: { data: DataRecord }) {
+  const messages = records(data.messages);
+  if (!messages.length) return null;
+  const reported = messages.find((message) => message.is_reported_message === true);
+  const context = messages.filter((message) => message !== reported);
+  const preview = context.slice(Math.max(0, context.length - 5));
+  return (
+    <div className="enrichment-conversation">
+      {reported ? <div><h4>Reported message</h4><MessageResult message={reported} /></div> : null}
+      {preview.length ? <div><h4>{reported ? "Nearby conversation" : "Recent shared conversation"}</h4><div className="enrichment-message-list">{preview.map((message, index) => <MessageResult message={message} key={text(message.id, `message-${index}`)} />)}</div></div> : null}
+      {messages.length > preview.length + (reported ? 1 : 0) ? <details className="enrichment-expand"><summary>Review all {messages.length} collected messages</summary><div className="enrichment-message-list">{messages.map((message, index) => <MessageResult message={message} key={text(message.id, `all-message-${index}`)} />)}</div></details> : null}
+    </div>
+  );
+}
+
+function AccountResult({ account }: { account: DataRecord }) {
+  const totals = record(account.activity_totals);
+  const restrictions = record(account.active_restrictions);
+  const createdAt = text(account.created_at);
+  const restrictionParts = [
+    text(restrictions.banned_until) ? `Banned until ${dateTime(text(restrictions.banned_until))}` : "",
+    text(restrictions.posting_suspended_until) ? `Posting suspended until ${dateTime(text(restrictions.posting_suspended_until))}` : "",
+    count(restrictions.seconds_between_messages) > 0 ? `${count(restrictions.seconds_between_messages)}s posting interval` : "",
+  ].filter(Boolean);
+  return (
+    <article className="enrichment-account">
+      <header><div><strong>{text(account.display_name, "Unknown participant")}</strong><small>{readable(text(account.relationship, "participant"))} · {text(account.reference, "Reference unavailable")}</small></div><span>{readable(text(account.status, "unknown"))}</span></header>
+      <dl>
+        <div><dt>Account age</dt><dd>{accountAge(createdAt)}</dd></div>
+        <div><dt>Messages</dt><dd>{count(totals.messages)}</dd></div>
+        <div><dt>Moderated</dt><dd>{count(totals.moderated_messages)}</dd></div>
+        <div><dt>Media</dt><dd>{count(totals.media)}</dd></div>
+        <div><dt>Held media</dt><dd>{count(totals.held_media)}</dd></div>
+        <div><dt>Shared rooms</dt><dd>{count(totals.joined_rooms)}</dd></div>
+      </dl>
+      {createdAt ? <p className="enrichment-account-tenure">Joined {dateTime(createdAt)}</p> : null}
+      <p>{readable(text(account.role, "member"))} · {readable(text(account.age_band, "age unknown"))} · {readable(text(account.minor_protection, "standard protection"))}</p>
+      {restrictionParts.length ? <small className="enrichment-restriction">{restrictionParts.join(" · ")}</small> : null}
+      {text(account.moderation_reason) ? <small className="enrichment-restriction">Moderation reason: {text(account.moderation_reason)}</small> : null}
+    </article>
+  );
+}
+
+function AccountHistoryResult({ data }: { data: DataRecord }) {
+  const accounts = records(data.accounts);
+  const events = records(data.moderation_events);
+  if (!accounts.length && !events.length) return null;
+  return (
+    <div className="enrichment-history">
+      {accounts.length ? <div className="enrichment-account-list">{accounts.map((account, index) => <AccountResult account={account} key={text(account.reference, `account-${index}`)} />)}</div> : null}
+      {events.length ? <details className="enrichment-expand"><summary>{events.length} moderation event{events.length === 1 ? "" : "s"}</summary><div className="enrichment-event-list">{events.map((event, index) => <article key={text(event.id, `event-${index}`)}><strong>{readable(text(event.action, "Moderation event"))}</strong><span>{readable(text(event.target_type, "target"))} · {text(event.target_reference, "Reference unavailable")}</span>{text(event.reason) ? <p>{text(event.reason)}</p> : null}<small>{text(event.created_at) ? dateTime(text(event.created_at)) : "Time unavailable"}</small></article>)}</div></details> : null}
+    </div>
+  );
+}
+
+function Finding({ finding }: { finding: FindingRecord }) {
+  const data = record(finding.data);
+  const state = findingState(finding);
+  const hasConversation = records(data.messages).length > 0;
+  const hasHistory = records(data.accounts).length > 0 || records(data.moderation_events).length > 0;
+  return (
+    <article className="enrichment-finding">
+      <header><div><strong>{findingTitle(finding)}</strong><small>{finding.summary || "The enrichment completed without a summary."}</small></div><span className={`badge${state !== "available" ? " urgent" : ""}`}>{readable(state)}</span></header>
+      {hasConversation ? <ConversationResult data={data} /> : null}
+      {hasHistory ? <AccountHistoryResult data={data} /> : null}
+      <details className="enrichment-technical"><summary>Source and technical result</summary><dl><dt>Subject</dt><dd>{readable(finding.subjectType || "report")} · {finding.subjectReference || "Current report"}</dd><dt>Component</dt><dd>{finding.componentKey || finding.componentVersionId || "Unavailable"}{finding.componentVersion ? ` · version ${finding.componentVersion}` : ""}</dd><dt>Recorded</dt><dd>{finding.createdAt ? dateTime(finding.createdAt) : "Unavailable"}</dd></dl>{Object.keys(data).length ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>No structured output was retained.</p>}</details>
+    </article>
+  );
+}
+
+function EmptyEnrichment({ workflowRuns, permitted }: { workflowRuns: WorkflowRunRecord[]; permitted: boolean }) {
+  if (!permitted) return <div className="enrichment-empty"><strong>Enriched context is restricted</strong><p>Your role cannot read customer evidence or enrichment results.</p></div>;
+  const needsRepair = workflowRuns.some((run) => ["failed", "repair_required"].includes(run.state));
+  if (needsRepair) return <div className="enrichment-empty danger"><strong>Enrichment needs attention</strong><p>The workflow did not complete successfully. Open Technical workflow details to see its state.</p></div>;
+  if (workflowRuns.some((run) => run.state === "succeeded")) return <div className="enrichment-empty"><strong>No enrichment was produced</strong><p>The workflow completed without entering an enrichment step. This report did not contain the signed product identifiers required by that branch.</p></div>;
+  return <div className="enrichment-empty"><strong>No enrichment has run</strong><p>No completed workflow has attached customer context to this report yet.</p></div>;
+}
+
+export function EnrichmentFindings({ findings, workflowRuns, permitted }: { findings: FindingRecord[]; workflowRuns: WorkflowRunRecord[]; permitted: boolean }) {
+  return (
+    <section className="enrichment-section">
+      <div className="enrichment-heading"><div><h3>Enriched context</h3><p>Read-only customer data returned by the workflow’s enrichment tools and stored with this report.</p></div>{findings.length ? <span>{findings.length} result{findings.length === 1 ? "" : "s"}</span> : null}</div>
+      {findings.length ? <div className="enrichment-finding-list">{findings.map((finding, index) => <Finding finding={finding} key={finding.id ?? `${finding.findingType}-${index}`} />)}</div> : <EmptyEnrichment workflowRuns={workflowRuns} permitted={permitted} />}
+    </section>
+  );
+}

package/template/console/reports/InvestigationBrief.tsx

@@ -0,0 +1,29 @@
+import { readable } from "../lib/format";
+import type { FindingRecord } from "./types";
+const strings=(value:unknown):string[]=>Array.isArray(value)?value.filter((item):item is string=>typeof item==="string"):[];
+const object=(value:unknown):Record<string,unknown>=>value && typeof value==="object" && !Array.isArray(value)?value as Record<string,unknown>:{};
+function gapLabel(value:string) {
+  if(value.includes("budget"))return "The configured investigation budget was reached.";
+  if(value.includes("step_limit") || value.includes("proposal_missing"))return "The investigation reached its limit without a complete proposal.";
+  if(value.includes("time_limit"))return "The investigation timed out before it could complete.";
+  if(value.includes("tool_denied"))return "A requested tool was outside this playbook’s permitted scope.";
+  if(value.startsWith("investigation_") || value.startsWith("agent_"))return "The investigation could not validate a complete proposal. Review the available evidence directly.";
+  return value;
+}
+export function InvestigationBrief({findings,onEvidence}:{findings:FindingRecord[];onEvidence?:()=>void}) {
+  const investigation=[...findings].reverse().find(finding=>finding.findingType==="case-investigation");
+  if(!investigation)return null;
+  const data=object(investigation.data),execution=object(data.investigation);
+  const gaps=strings(data.missing_information),uncertainty=strings(data.uncertainty),citations=strings(data.citations);
+  const sources=Array.isArray(execution.sources)?execution.sources.map(object):[];
+  return <section className="investigation-brief" aria-label="Investigation brief">
+    <div className="investigation-brief-heading"><h3>Investigation brief</h3><span className="badge">{data.result_code==="needs_information"?"Needs more information":"Ready for review"}</span></div>
+    <p>{typeof data.summary==="string"?data.summary:investigation.summary}</p>
+    <p className="form-help">This is a proposal. Check the cited sources and apply your policy before deciding.</p>
+    {execution.fixture===true?<p className="investigation-fixture">Local test model — this result validates workflow behavior only.</p>:null}
+    {gaps.length?<div><h4>Missing information</h4><ul>{gaps.map((gap,index)=><li key={index}>{gapLabel(gap)}</li>)}</ul></div>:null}
+    {uncertainty.length?<div><h4>Uncertainty</h4><ul>{uncertainty.map((item,index)=><li key={index}>{gapLabel(item)}</li>)}</ul></div>:null}
+    <div><h4>Sources considered</h4>{citations.length?<ul>{citations.map(id=>{const finding=findings.find(f=>f.id===id);const source=sources.find(s=>s.id===id);return <li key={id}>{finding?.summary || (typeof source?.label==="string"?readable(source.label):"Case intake")}<small>{id}</small></li>;})}</ul>:<p>No source was validated for this proposal.</p>}{onEvidence && citations.length?<button className="secondary" type="button" onClick={onEvidence}>Review cited evidence</button>:null}</div>
+    <details><summary>Investigation activity</summary><p>{Number(execution.steps)||0} model steps · {Number(execution.tool_calls)||0} tool calls</p>{Array.isArray(execution.trace)?<ol>{execution.trace.map(object).map((entry,index)=><li key={index}>{readable(String(entry.tool))} · {readable(String(entry.status))}</li>)}</ol>:null}<p>{typeof execution.provider==="string"?readable(execution.provider):"Configured provider"} · {String(execution.model||"Configured model")}</p></details>
+  </section>;
+}