create-safest-tools 0.3.1 → 0.4.1

package/template/console/reports/ReportDrawer.tsx

@@ -9,7 +9,7 @@ import {
   dispatchReporterMessage,
 } from "./events";
 import { getReportWorkspaceSnapshot, subscribeToReportWorkspace } from "./store";
-import type { ReportDetailRecord, TimelineEvent } from "./types";
+import type { ReportAnswer, ReportDetailRecord, TimelineEvent } from "./types";
 
 function Fact({ label, children }: { label: string; children: React.ReactNode }) {
   return <><dt>{label}</dt><dd>{children || "—"}</dd></>;
@@ -19,6 +19,40 @@ function EmptyLine({ children }: { children: React.ReactNode }) {
   return <p className="detail-empty">{children}</p>;
 }
 
+function answerOptionLabel(answer: ReportAnswer, value: string): string {
+  return answer.options?.find((option) => option.value === value)?.label || readable(value);
+}
+
+function AnswerValue({ answer }: { answer: ReportAnswer }) {
+  if (!answer.answered) return <span className="answer-empty">Not answered</span>;
+  if (typeof answer.value === "boolean") return <span>{answer.value ? "Yes" : "No"}</span>;
+  if (Array.isArray(answer.value)) {
+    const values = answer.value.map((value) => answerOptionLabel(answer, String(value)));
+    return <span>{values.length ? values.join(", ") : "None selected"}</span>;
+  }
+  if (answer.value === null || answer.value === undefined || answer.value === "") return <span className="answer-empty">Not answered</span>;
+  const value = String(answer.value);
+  if (answer.type === "select") return <span>{answerOptionLabel(answer, value)}</span>;
+  const url = answer.type === "url" ? safeCustomerUrl(value) : null;
+  return url
+    ? <a className="text-button" href={url} target="_blank" rel="noopener noreferrer" referrerPolicy="no-referrer">{value} ↗</a>
+    : <span className="answer-text">{value}</span>;
+}
+
+function deliveryLabel(state: string): string {
+  if (state === "suppressed") return "Not sent";
+  if (state === "queued" || state === "pending" || state === "sending" || state === "delivering") return "Queued";
+  return readable(state);
+}
+
+function deliveryExplanation(state: string): string {
+  if (state === "suppressed") return "No eligible participant delivery channel was available when this message was created.";
+  if (state === "queued" || state === "pending" || state === "sending" || state === "delivering") return "Waiting for the delivery worker.";
+  if (state === "delivered") return "Successfully handed to the configured delivery provider.";
+  if (state === "failed" || state === "rejected" || state === "bounced") return "Delivery needs attention in Operations.";
+  return "";
+}
+
 function timelineDetail(event: TimelineEvent): string {
   const details = event.details ?? {};
   const value = (key: string): string => typeof details[key] === "string" || typeof details[key] === "number" ? String(details[key]) : "";
@@ -38,7 +72,7 @@ function timelineMarker(eventType: string): string {
   return "•";
 }
 
-function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports, messageReporters, decideReports, pendingAction, messageMutationVersion, error }: {
+function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports, messageReporters, decideReports, pendingAction, messageMutationVersion, statusMessage, error }: {
   report: ReportDetailRecord;
   actorId: string;
   generatedAt: string;
@@ -48,9 +82,11 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
   decideReports: boolean;
   pendingAction: "claim" | "release" | "message" | "decision" | null;
   messageMutationVersion: number;
+  statusMessage: string;
   error: string;
 }) {
   const evidence = report.evidence ?? [];
+  const answers = report.answers ?? [];
   const messages = report.messages ?? [];
   const workflowRuns = report.workflowRuns ?? [];
   const timeline = report.timeline ?? [];
@@ -106,6 +142,14 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
   return (
     <>
       <div className="detail-grid">
+        <section className="report-submission"><h3>Reporter submission</h3><dl className="submission-meta">
+          <Fact label="Form">{report.formTitle || report.formVersionId || "Unknown form"}</Fact>
+          <Fact label="Channel">{readable(report.source || "unknown")}</Fact>
+          <Fact label="Submitted">{dateTime(report.submittedAt || report.receivedAt)}</Fact>
+          <Fact label="Language">{report.locale || "—"}</Fact>
+        </dl><div className="answer-list">
+          {answers.length ? answers.map((answer) => <article className="answer-record" key={answer.fieldKey}><div><strong>{answer.label || readable(answer.fieldKey)}</strong>{answer.required ? <small>Required question</small> : null}</div><AnswerValue answer={answer} /></article>) : <EmptyLine>This form did not contain additional questions.</EmptyLine>}
+        </div></section>
         <section><h3>Allegation and target</h3><dl>
           <Fact label="Allegation">{readable(report.reasonCode)}</Fact>
           <Fact label="Target type">{readable(report.targetType)}</Fact>
@@ -125,22 +169,23 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
 
       {workflowRuns.length || timeline.length ? <section><h3>Workflow &amp; case timeline</h3><div className="report-run-list">{workflowRuns.map((run) => <article className="report-run-record" key={run.id}><div><strong>{run.workflowName || run.workflowKey || `Workflow ${String(run.workflowVersionId || run.id).slice(0, 12)}`}</strong><small>{readable(run.runKind || "primary")} · {readable(run.authorityMode || "assist")} · immutable version {run.workflowVersion || String(run.workflowVersionId || "").slice(0, 12)}</small></div><span className={`badge${["failed", "repair_required"].includes(run.state) ? " urgent" : ""}`}>{readable(run.state)}</span></article>)}</div><div className="report-timeline">{timeline.map((item, index) => <article className="timeline-event" key={item.id ?? `${item.eventType}-${item.createdAt}-${index}`}><span className={`timeline-marker ${item.eventType || "event"}`}>{timelineMarker(item.eventType)}</span><div><strong>{readable(item.eventType || "activity")}</strong><span>{timelineDetail(item)}</span><small>{relativeTime(item.createdAt)} · {readable(item.actorType || "system")}</small></div></article>)}</div></section> : null}
 
-      <section><h3>Case messages</h3><div className="message-list">{messages.length ? messages.map((item, index) => <article className={`case-message ${item.direction}`} key={item.id ?? `${item.createdAt}-${index}`}><div>{item.body}</div><small>{readable(item.senderType)} · {dateTime(item.createdAt)} · {readable(item.deliveryState)}</small></article>) : <EmptyLine>No case messages yet.</EmptyLine>}</div></section>
+      <section><h3>Case messages</h3><div className="message-list">{messages.length ? messages.map((item, index) => <article className={`case-message ${item.direction}`} key={item.id ?? `${item.createdAt}-${index}`}><div>{item.body}</div><small>{readable(item.senderType)} · {dateTime(item.createdAt)} · {deliveryLabel(item.deliveryState)}{deliveryExplanation(item.deliveryState) ? ` — ${deliveryExplanation(item.deliveryState)}` : ""}</small></article>) : <EmptyLine>No case messages yet.</EmptyLine>}</div></section>
 
       {findings.length ? <section><h3>Component findings</h3><div className="finding-result-list">{findings.map((finding, index) => <article key={finding.id ?? `${finding.findingType}-${index}`}><div><strong>{finding.findingType}</strong><small>{finding.summary}{finding.componentVersionId ? ` · component ${finding.componentVersionId}` : ""}{finding.expiresAt ? ` · expires ${dateTime(finding.expiresAt)}` : ""}</small>{finding.data ? <pre>{JSON.stringify(finding.data, null, 2)}</pre> : null}</div><span className={`badge${finding.freshness !== "available" ? " urgent" : ""}`}>{readable(finding.freshness || finding.status)}</span></article>)}</div></section> : null}
 
       {decisions.length ? <section><h3>Decisions &amp; rationale</h3><div className="decision-record-list">{decisions.map((decision, index) => <article className="decision-record" key={decision.id ?? `${decision.createdAt}-${index}`}><div><strong>{readable(decision.decisionCode)}</strong><span className="badge">{decision.policyCode || "Policy decision"}</span></div><p>{decision.rationale || "No rationale recorded."}</p><small>{readable(decision.makerType)} · {dateTime(decision.createdAt)} · {(decision.evidenceReferences || []).length} evidence reference(s)</small></article>)}</div></section> : null}
 
-      {deliveries.length ? <section><h3>Decision and delivery</h3><div className="delivery-list">{deliveries.map((delivery) => <article key={delivery.id}><div><strong>{delivery.title}</strong><small>{delivery.detail}</small></div><span className={`badge${["failed", "rejected"].includes(delivery.state) ? " urgent" : ""}`}>{readable(delivery.state)}</span></article>)}</div></section> : null}
+      {deliveries.length ? <section><h3>Decision and delivery</h3><div className="delivery-list">{deliveries.map((delivery) => <article key={delivery.id}><div><strong>{delivery.title}</strong><small>{delivery.detail}{deliveryExplanation(delivery.state) ? ` · ${deliveryExplanation(delivery.state)}` : ""}</small></div><span className={`badge${["failed", "rejected", "bounced", "suppressed"].includes(delivery.state) ? " urgent" : ""}`}>{deliveryLabel(delivery.state)}</span></article>)}</div></section> : null}
 
       {aiRuns.length ? <section><h3>Bounded AI record</h3><div className="ai-run-list">{aiRuns.map((run, index) => <article key={run.id ?? `${run.model}-${index}`}><div><strong>{readable(run.mode)} · {readable(run.status)}</strong><small>{run.model} · {run.promptVersion} · {run.configVersionId}</small></div><p>{run.summary || readable(run.errorCode || "No validated result")}</p><small>{readable(run.outcome || "no outcome")} · {run.policyCode || "no policy"} · {run.estimatedCostMicrousd || 0} µUSD{run.uncertain ? " · escalated for uncertainty" : ""}</small></article>)}</div></section> : null}
 
       <div className="claim-bar"><p>{activeClaim && report.claim ? <><AnalystAvatar analyst={report.claim.analyst ?? { displayName: "Another reviewer" }} size="small" />{mine ? "You hold" : `${report.claim.analyst?.displayName || "Another reviewer"} holds`} this report until {new Date(report.claim.expiresAt).toLocaleTimeString()}.</> : "This report must be claimed before a reviewer changes it."}</p><div>{mine ? <button className="secondary" type="button" disabled={changingClaim} onClick={dispatchReleaseReport}>{pendingAction === "release" ? "Releasing…" : "Release"}</button> : null}{claimable && !activeClaim ? <button className="primary" type="button" disabled={changingClaim} onClick={dispatchClaimReport}>{pendingAction === "claim" ? "Claiming…" : "Claim report"}</button> : null}</div></div>
 
       <div className="detail-actions">
-        <form onSubmit={sendMessage}><h3>Ask the reporter</h3><label>Message<textarea maxLength={4000} required value={message} onChange={(event) => setMessage(event.currentTarget.value)} disabled={!canMessage || pendingAction === "message"} /></label><label className="checkbox"><input type="checkbox" checked={awaitReporter} onChange={(event) => setAwaitReporter(event.currentTarget.checked)} disabled={!canMessage || pendingAction === "message"} />Move to awaiting reporter</label><button className="secondary" type="submit" disabled={!canMessage || pendingAction === "message"}>{pendingAction === "message" ? "Sending…" : "Send participant update"}</button></form>
+        <form onSubmit={sendMessage}><h3>Ask the reporter</h3><p className="form-help">The update is emailed when the reporter supplied an address. Otherwise, Resolve uses the configured signed customer notification channel.</p><label>Message<textarea maxLength={4000} required value={message} onChange={(event) => setMessage(event.currentTarget.value)} disabled={!canMessage || pendingAction === "message"} /></label><label className="checkbox"><input type="checkbox" checked={awaitReporter} onChange={(event) => setAwaitReporter(event.currentTarget.checked)} disabled={!canMessage || pendingAction === "message"} />Move to awaiting reporter</label><button className="secondary" type="submit" disabled={!canMessage || pendingAction === "message"}>{pendingAction === "message" ? "Queueing…" : "Send participant update"}</button></form>
         <form onSubmit={recordDecision}><h3>Record a human decision</h3><label>Decision code<input value={decisionCode} onChange={(event) => setDecisionCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Policy code<select value={policyCode} onChange={(event) => setPolicyCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required>{rules.map((rule) => <option value={rule.code} key={rule.code}>{rule.title ? `${rule.code} · ${rule.title}` : rule.code}</option>)}</select></label><label>Internal rationale<textarea maxLength={8000} value={rationale} onChange={(event) => setRationale(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Reporter outcome<textarea maxLength={4000} value={reporterNotice} onChange={(event) => setReporterNotice(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} required /></label><label>Affected-user notice <small>Optional; sent through a separate audience channel.</small><textarea maxLength={4000} value={affectedNotice} onChange={(event) => setAffectedNotice(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"} /></label>{actionCodes.length ? <label>Application action <small>Optional. Only deployment-allowlisted actions are shown.</small><select value={actionCode} onChange={(event) => setActionCode(event.currentTarget.value)} disabled={!canDecide || pendingAction === "decision"}><option value="">No application action</option>{actionCodes.map((code) => <option value={code} key={code}>{readable(code)}</option>)}</select></label> : null}<button className="primary" type="submit" disabled={!canDecide || pendingAction === "decision"}>{pendingAction === "decision" ? "Recording…" : "Complete human review"}</button></form>
       </div>
+      <p className="mutation-status" role="status">{statusMessage}</p>
       <p className="error" role="alert">{error}</p>
     </>
   );
@@ -153,7 +198,7 @@ export function ReportDrawer() {
   return (
     <dialog className="detail-dialog report-drawer" open={open} aria-labelledby="report-detail-title" onCancel={(event) => { event.preventDefault(); dispatchCloseReport(); }} data-react-slice="report-drawer">
       <div className="detail-head"><div><h2 id="report-detail-title">{detail.report?.reference || "Report"}</h2><p>{detail.report ? `${readable(detail.report.state)} · ${readable(detail.report.queueId || "unassigned")}` : "Loading report…"}</p></div><button className="icon-button" type="button" aria-label="Close report detail" onClick={dispatchCloseReport}>×</button></div>
-      <div className="report-detail-content">{detail.loading && !detail.report ? <div className="skeleton-block" role="status" aria-label="Loading report detail" /> : detail.report ? <DetailContent report={detail.report} actorId={snapshot.actorId} generatedAt={snapshot.generatedAt} actionCodes={snapshot.actionCodes} claimReports={snapshot.permissions.claimReports} messageReporters={snapshot.permissions.messageReporters} decideReports={snapshot.permissions.decideReports} pendingAction={detail.pendingAction} messageMutationVersion={detail.messageMutationVersion} error={detail.error} /> : detail.error ? <p className="error surface-error" role="alert">{detail.error}</p> : null}</div>
+      <div className="report-detail-content">{detail.loading && !detail.report ? <div className="skeleton-block" role="status" aria-label="Loading report detail" /> : detail.report ? <DetailContent report={detail.report} actorId={snapshot.actorId} generatedAt={snapshot.generatedAt} actionCodes={snapshot.actionCodes} claimReports={snapshot.permissions.claimReports} messageReporters={snapshot.permissions.messageReporters} decideReports={snapshot.permissions.decideReports} pendingAction={detail.pendingAction} messageMutationVersion={detail.messageMutationVersion} statusMessage={detail.statusMessage} error={detail.error} /> : detail.error ? <p className="error surface-error" role="alert">{detail.error}</p> : null}</div>
     </dialog>
   );
 }

package/template/console/reports/controller.ts

@@ -62,7 +62,7 @@ const initialSnapshot = (): ReportWorkspaceSnapshot => ({
   presence: [],
   actionCodes: [],
   permissions: { claimReports: false, messageReporters: false, decideReports: false, readRuns: false },
-  detail: { reportId: null, loading: false, error: "", pendingAction: null, messageMutationVersion: 0, report: null },
+  detail: { reportId: null, loading: false, error: "", statusMessage: "", pendingAction: null, messageMutationVersion: 0, report: null },
 });
 
 let actorId = "";
@@ -223,6 +223,7 @@ async function openReport(reportId: string): Promise<void> {
       reportId,
       loading: true,
       error: "",
+      statusMessage: snapshot.detail.reportId === reportId ? snapshot.detail.statusMessage : "",
       report: snapshot.detail.report?.id === reportId ? snapshot.detail.report : null,
     },
   });
@@ -262,7 +263,7 @@ function closeReport(): void {
   detailRequestVersion += 1;
   const messageMutationVersion = getReportWorkspaceSnapshot().detail.messageMutationVersion;
   document.body.classList.remove("report-open");
-  publish({ detail: { reportId: null, loading: false, error: "", pendingAction: null, messageMutationVersion, report: null } });
+  publish({ detail: { reportId: null, loading: false, error: "", statusMessage: "", pendingAction: null, messageMutationVersion, report: null } });
   sendPresenceActivity();
 }
 
@@ -301,15 +302,20 @@ async function sendMessage(input: ReporterMessageInput): Promise<void> {
   const reportId = snapshot.detail.report?.id;
   if (!reportId || !snapshot.permissions.messageReporters || snapshot.detail.pendingAction) return;
   const idempotencyKey = crypto.randomUUID();
-  publish({ detail: { ...snapshot.detail, error: "", pendingAction: "message" } });
+  publish({ detail: { ...snapshot.detail, error: "", statusMessage: "", pendingAction: "message" } });
   try {
-    await requestJson(`/v1/admin/reports/${encodeURIComponent(reportId)}/messages`, {
+    const response = await requestJson<{ delivery_state?: string; delivery_channel?: string | null }>(`/v1/admin/reports/${encodeURIComponent(reportId)}/messages`, {
       method: "POST",
       headers: { "content-type": "application/json", "idempotency-key": idempotencyKey },
       body: JSON.stringify({ idempotency_key: idempotencyKey, body: input.body, await_reporter: input.awaitReporter }),
     });
     const version = getReportWorkspaceSnapshot().detail.messageMutationVersion + 1;
-    publish({ detail: { ...getReportWorkspaceSnapshot().detail, messageMutationVersion: version } });
+    const statusMessage = response.delivery_state === "queued"
+      ? response.delivery_channel === "email"
+        ? "Participant update queued for email delivery."
+        : "Participant update queued for the configured customer notification channel."
+      : "The update was saved but not sent because this report has no available participant delivery channel.";
+    publish({ detail: { ...getReportWorkspaceSnapshot().detail, messageMutationVersion: version, statusMessage } });
     await Promise.all([openReport(reportId), loadReports()]);
   } catch (cause) {
     publish({ detail: { ...getReportWorkspaceSnapshot().detail, error: errorMessage(cause, "The message could not be created.") } });

package/template/console/reports/store.ts

@@ -15,7 +15,7 @@ let snapshot: ReportWorkspaceSnapshot = {
   presence: [],
   actionCodes: [],
   permissions: { claimReports: false, messageReporters: false, decideReports: false, readRuns: false },
-  detail: { reportId: null, loading: false, error: "", pendingAction: null, messageMutationVersion: 0, report: null },
+  detail: { reportId: null, loading: false, error: "", statusMessage: "", pendingAction: null, messageMutationVersion: 0, report: null },
 };
 
 window.addEventListener(reportEvents.state, (event) => {

package/template/console/reports/types.ts

@@ -151,12 +151,33 @@ export interface ReportClaim {
   analyst?: AnalystIdentityData;
 }
 
+export interface ReportAnswerOption {
+  value: string;
+  label: string;
+}
+
+export interface ReportAnswer {
+  fieldKey: string;
+  label: string;
+  type: string;
+  required: boolean;
+  answered: boolean;
+  value: unknown;
+  options?: ReportAnswerOption[];
+}
+
 export interface ReportDetailRecord {
   id: string;
   reference: string;
   state: string;
   queueId?: string;
   reasonCode: string;
+  source?: string;
+  locale?: string;
+  submittedAt?: string;
+  formVersionId?: string;
+  formTitle?: string;
+  consentNotice?: string;
   targetType: string;
   targetReference: string;
   customerUrl?: string;
@@ -168,6 +189,7 @@ export interface ReportDetailRecord {
   reviewerInstructions?: string;
   receivedAt: string;
   policyRules?: PolicyRule[];
+  answers?: ReportAnswer[];
   evidence?: EvidenceReference[];
   messages?: CaseMessage[];
   workflowRuns?: WorkflowRunRecord[];
@@ -189,6 +211,7 @@ export interface ReportDetailSnapshot {
   error: string;
   pendingAction: ReportPendingAction;
   messageMutationVersion: number;
+  statusMessage: string;
   report: ReportDetailRecord | null;
 }
 

package/template/console/shell/WorkspaceShell.tsx

@@ -94,10 +94,6 @@ function Navigation({ session, currentView, reportCount, open, onClose }: {
             </Fragment>
           ))}
         </nav>
-        <div className="principle">
-          <span className="principle-dot" aria-hidden="true" />
-          <div><strong>Customer-owned records</strong><p>Reports and decisions stay in this deployment.</p></div>
-        </div>
       </aside>
       <button className="nav-scrim" type="button" aria-label="Close navigation" hidden={!open} onClick={onClose} />
     </>