create-safest-tools 0.2.0

package/template/console/reports/ReportDrawer.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useMemo, useState, useSyncExternalStore, type FormEvent } from "react";
+import { AnalystAvatar } from "../components/AnalystIdentity";
+import { dateTime, readable, relativeTime, safeCustomerUrl } from "../lib/format";
+import {
+  dispatchClaimReport,
+  dispatchCloseReport,
+  dispatchHumanDecision,
+  dispatchReleaseReport,
+  dispatchReporterMessage,
+} from "./events";
+import { getReportWorkspaceSnapshot, subscribeToReportWorkspace } from "./store";
+import type { ReportDetailRecord, TimelineEvent } from "./types";
+
+function Fact({ label, children }: { label: string; children: React.ReactNode }) {
+  return <><dt>{label}</dt><dd>{children || "—"}</dd></>;
+}
+
+function EmptyLine({ children }: { children: React.ReactNode }) {
+  return <p className="detail-empty">{children}</p>;
+}
+
+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]) : "";
+  if (event.eventType === "state_transition") return `${readable(value("from_state") || "received")} → ${readable(value("to_state") || event.code)}`;
+  if (event.eventType === "finding") return value("summary") || readable(event.code);
+  if (event.eventType === "action") return `${readable(value("action_code") || "action")} · ${readable(event.code)}`;
+  if (event.eventType === "message") return `${readable(value("audience") || "reporter")} · ${readable(value("delivery_state") || event.code)}`;
+  return `${readable(event.code)}${value("error_code") ? ` · ${readable(value("error_code"))}` : ""}`;
+}
+
+function timelineMarker(eventType: string): string {
+  if (eventType === "finding") return "⬡";
+  if (eventType === "workflow_run") return "⌘";
+  if (eventType === "decision") return "✓";
+  if (eventType === "message") return "↗";
+  if (eventType === "action") return "!";
+  return "•";
+}
+
+function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports, messageReporters, decideReports, pendingAction, messageMutationVersion, error }: {
+  report: ReportDetailRecord;
+  actorId: string;
+  generatedAt: string;
+  actionCodes: string[];
+  claimReports: boolean;
+  messageReporters: boolean;
+  decideReports: boolean;
+  pendingAction: "claim" | "release" | "message" | "decision" | null;
+  messageMutationVersion: number;
+  error: string;
+}) {
+  const evidence = report.evidence ?? [];
+  const messages = report.messages ?? [];
+  const workflowRuns = report.workflowRuns ?? [];
+  const timeline = report.timeline ?? [];
+  const findings = report.findings ?? [];
+  const decisions = report.decisions ?? [];
+  const aiRuns = report.aiRuns ?? [];
+  const rules = report.policyRules ?? [];
+  const [selectedEvidence, setSelectedEvidence] = useState<Set<string>>(() => new Set(evidence.map((item) => item.reference)));
+  const [message, setMessage] = useState("");
+  const [awaitReporter, setAwaitReporter] = useState(true);
+  const [decisionCode, setDecisionCode] = useState("no_violation_found");
+  const [policyCode, setPolicyCode] = useState(rules[0]?.code ?? "");
+  const [rationale, setRationale] = useState("");
+  const [reporterNotice, setReporterNotice] = useState("");
+  const [affectedNotice, setAffectedNotice] = useState("");
+  const [actionCode, setActionCode] = useState("");
+
+  useEffect(() => {
+    setSelectedEvidence(new Set(evidence.map((item) => item.reference)));
+    setMessage("");
+    setAwaitReporter(true);
+    setDecisionCode("no_violation_found");
+    setPolicyCode(rules[0]?.code ?? "");
+    setRationale("");
+    setReporterNotice("");
+    setAffectedNotice("");
+    setActionCode("");
+  }, [report.id]);
+  useEffect(() => setMessage(""), [messageMutationVersion]);
+
+  const deliveries = useMemo(() => [
+    ...(report.actions ?? []).map((action) => ({ id: `action-${action.id ?? action.actionCode}`, title: `Application action · ${readable(action.actionCode)}`, state: action.status, detail: `${action.attemptCount} attempt${action.attemptCount === 1 ? "" : "s"}${action.errorCode ? ` · ${readable(action.errorCode)}` : ""}` })),
+    ...(report.notices ?? []).map((notice) => ({ id: `notice-${notice.id ?? notice.audience}`, title: `${readable(notice.audience)} notice`, state: notice.deliveryState, detail: `Updated ${relativeTime(notice.updatedAt)}` })),
+    ...(report.workflowActions ?? []).filter((action) => action.recordKind === "proposal").map((action) => ({ id: `workflow-${action.id ?? action.actionCode}`, title: `Workflow action · ${readable(action.actionCode)}`, state: action.state, detail: `${readable(action.authorityMode || action.recordKind || "proposal")} · ${action.attemptCount || 0} attempt${action.attemptCount === 1 ? "" : "s"}${action.errorCode ? ` · ${readable(action.errorCode)}` : ""}` })),
+  ], [report]);
+  const customerUrl = safeCustomerUrl(report.customerUrl);
+  const activeClaim = Boolean(report.claim && Date.parse(report.claim.expiresAt) > Date.parse(generatedAt));
+  const mine = Boolean(activeClaim && report.claim?.reviewerId === actorId);
+  const claimable = claimReports && ["human_review", "awaiting_reporter", "human_review_requested"].includes(report.state);
+  const canMessage = mine && messageReporters;
+  const canDecide = mine && decideReports && rules.length > 0;
+  const changingClaim = pendingAction === "claim" || pendingAction === "release";
+
+  const sendMessage = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    dispatchReporterMessage({ body: message, awaitReporter });
+  };
+  const recordDecision = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    dispatchHumanDecision({ decisionCode, policyCode, rationale, evidenceReferences: [...selectedEvidence], reporterNotice, affectedUserNotice: affectedNotice, actionCode });
+  };
+
+  return (
+    <>
+      <div className="detail-grid">
+        <section><h3>Allegation and target</h3><dl>
+          <Fact label="Allegation">{readable(report.reasonCode)}</Fact>
+          <Fact label="Target type">{readable(report.targetType)}</Fact>
+          <Fact label="Target reference">{report.targetReference}</Fact>
+          <Fact label="Customer content">{customerUrl ? <a className="text-button" href={customerUrl} target="_blank" rel="noopener noreferrer" referrerPolicy="no-referrer">Open in customer application ↗</a> : "Not provided"}</Fact>
+          <Fact label="Owner reference">{report.ownerReference || "—"}</Fact>
+          <Fact label="Reporter reference">{report.reporterReference || "—"}</Fact>
+          <Fact label="Adjudication policy">{report.policyTitle || "Policy"} · {report.policyVersionId || "unavailable"}</Fact>
+          <Fact label="Queue policy version">{report.queuePolicyVersionId || "—"}</Fact>
+          <Fact label="Reviewer policy">{report.reviewerInstructions || "—"}</Fact>
+          <Fact label="Received">{dateTime(report.receivedAt)}</Fact>
+        </dl></section>
+        <section><h3>Evidence references considered</h3><div className="evidence-list">
+          {evidence.length ? evidence.map((item) => <label className="evidence-item checkbox" key={item.reference}><input type="checkbox" checked={selectedEvidence.has(item.reference)} onChange={(event) => setSelectedEvidence((current) => { const next = new Set(current); if (event.currentTarget.checked) next.add(item.reference); else next.delete(item.reference); return next; })} /><span>{item.reference} · {readable(item.kind)} · {readable(item.availability)}</span></label>) : <EmptyLine>No evidence references were recorded.</EmptyLine>}
+        </div></section>
+      </div>
+
+      {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>
+
+      {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}
+
+      {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={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="error" role="alert">{error}</p>
+    </>
+  );
+}
+
+export function ReportDrawer() {
+  const snapshot = useSyncExternalStore(subscribeToReportWorkspace, getReportWorkspaceSnapshot, getReportWorkspaceSnapshot);
+  const detail = snapshot.detail;
+  const open = Boolean(detail.reportId);
+  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>
+    </dialog>
+  );
+}

package/template/console/reports/ReportWorkspace.tsx

@@ -0,0 +1,90 @@
+import { useSyncExternalStore, type ChangeEvent, type MouseEvent } from "react";
+import { AnalystIdentity } from "../components/AnalystIdentity";
+import { PageHeader } from "../components/PageHeader";
+import { readable, relativeTime } from "../lib/format";
+import { dispatchOpenReport, dispatchReportFilters, dispatchReportRefresh } from "./events";
+import { getReportWorkspaceSnapshot, subscribeToReportWorkspace } from "./store";
+import type { PresenceAnalyst, ReportFilters, ReportPriorityFilter, ReportSort, ReportSummary } from "./types";
+
+function priorityName(priority: number): "high" | "medium" | "low" {
+  if (priority >= 70) return "high";
+  if (priority >= 40) return "medium";
+  return "low";
+}
+
+function Presence({ analysts }: { analysts: PresenceAnalyst[] }) {
+  return (
+    <section className="active-analysts" aria-labelledby="active-analysts-title">
+      <div><strong id="active-analysts-title">Live now</strong><span>{analysts.length}</span></div>
+      <div className="active-analyst-list">
+        {analysts.length ? analysts.map((analyst) => (
+          <div className="active-analyst" key={analyst.actorId}>
+            <AnalystIdentity analyst={analyst} detail={analyst.activityLabel} />
+            <span className={`presence-dot ${analyst.activity}`} title={analyst.activityLabel} />
+          </div>
+        )) : <p className="active-analyst-empty">No active sessions</p>}
+      </div>
+    </section>
+  );
+}
+
+function Owner({ report }: { report: ReportSummary }) {
+  if (!report.owner) return <span className="unclaimed">Unclaimed</span>;
+  return <AnalystIdentity analyst={report.owner} detail={report.owner.mine ? "You" : "Claimed"} />;
+}
+
+function ReportRow({ report }: { report: ReportSummary }) {
+  const open = (): void => dispatchOpenReport(report.id);
+  const openFromButton = (event: MouseEvent<HTMLButtonElement>): void => {
+    event.stopPropagation();
+    open();
+  };
+  const priority = priorityName(report.priority);
+  return (
+    <tr onClick={open}>
+      <td><div className="report-identity"><span className="report-avatar" aria-hidden="true">{String(report.targetReference || report.reference).slice(0, 2).toUpperCase()}</span><span><button className="report-link" type="button" onClick={openFromButton}>{report.reference}</button><small>{report.targetType}: {report.targetReference} · {readable(report.reasonCode)}</small></span></div></td>
+      <td><strong>{report.queueName}</strong><small>{readable(report.state)}</small></td>
+      <td><span className={`priority-badge ${priority}`}>{readable(priority)}</span></td>
+      <td><strong>{relativeTime(report.receivedAt).replace(" ago", "")}</strong><small>{new Date(report.receivedAt).toLocaleString()}</small></td>
+      <td><Owner report={report} /></td>
+    </tr>
+  );
+}
+
+export function ReportWorkspace() {
+  const snapshot = useSyncExternalStore(subscribeToReportWorkspace, getReportWorkspaceSnapshot, getReportWorkspaceSnapshot);
+  const updateFilter = <TKey extends keyof ReportFilters>(key: TKey, value: ReportFilters[TKey]): void => {
+    dispatchReportFilters({ ...snapshot.filters, [key]: value });
+  };
+  const search = (event: ChangeEvent<HTMLInputElement>): void => updateFilter("search", event.currentTarget.value);
+
+  return (
+    <div data-react-slice="report-workspace">
+      <PageHeader title="Reports" description="Review incoming reports and assign ownership." accessory={<span className="live-label"><i />Live queue</span>}>
+        <Presence analysts={snapshot.presence} />
+      </PageHeader>
+
+      <section className="surface report-surface" aria-labelledby="inbox-title">
+        <h2 id="inbox-title" className="visually-hidden">Accepted reports</h2>
+        <div className="surface-head">
+          <div className="queue-toolbar">
+            <label className="search-field"><span aria-hidden="true">⌕</span><input type="search" placeholder="Search reports" aria-label="Search reports" value={snapshot.filters.search} onChange={search} /></label>
+            <label>Queue<select value={snapshot.filters.queueId} onChange={(event) => updateFilter("queueId", event.currentTarget.value)}><option value="">All queues</option>{snapshot.queues.map((queue) => <option value={queue.id} key={queue.id}>{queue.name}</option>)}</select></label>
+            <label>Priority<select value={snapshot.filters.priority} onChange={(event) => updateFilter("priority", event.currentTarget.value as ReportPriorityFilter)}><option value="">All priorities</option><option value="high">High</option><option value="medium">Medium</option><option value="low">Low</option></select></label>
+            <label>Age<select value={snapshot.filters.age} onChange={(event) => updateFilter("age", event.currentTarget.value as ReportFilters["age"])}><option value="">Any age</option><option value="hour">Under 1 hour</option><option value="day">Under 24 hours</option><option value="older">Older than 24 hours</option></select></label>
+            <label>State<select value={snapshot.filters.state} onChange={(event) => updateFilter("state", event.currentTarget.value)}><option value="">All states</option><option value="received">Received</option><option value="human_review">Human review</option><option value="awaiting_reporter">Awaiting reporter</option><option value="resolved_by_human">Resolved by human</option></select></label>
+            <label>Sort<select value={snapshot.filters.sort} onChange={(event) => updateFilter("sort", event.currentTarget.value as ReportSort)}><option value="oldest">Oldest first</option><option value="newest">Newest first</option><option value="priority">Priority first</option></select></label>
+          </div>
+          <button className="icon-button refresh-button" type="button" aria-label="Refresh reports" disabled={snapshot.refreshing} onClick={dispatchReportRefresh}>{snapshot.refreshing ? "…" : "↻"}</button>
+        </div>
+        <div className="table-wrap" aria-busy={snapshot.loading || snapshot.refreshing}>
+          <table><thead><tr><th>Report</th><th>Queue</th><th>Priority</th><th>Age</th><th>Owner</th></tr></thead><tbody>
+            {snapshot.loading ? <tr><td colSpan={5}><div className="skeleton-block" /></td></tr> : snapshot.reports.map((report) => <ReportRow report={report} key={report.id} />)}
+          </tbody></table>
+          {!snapshot.loading && snapshot.reports.length === 0 ? <div className="empty"><span aria-hidden="true">✓</span><h3>No reports in this view</h3><p>New reports will appear here after intake and routing.</p></div> : null}
+        </div>
+        <p className="error surface-error" role="alert">{snapshot.error}</p>
+      </section>
+    </div>
+  );
+}