create-safest-tools 0.2.0

package/template/console/quality/events.ts

@@ -0,0 +1,34 @@
+import type { QualityReviewInput, QualityWorkspaceSnapshot } from "./types";
+
+export const qualityEvents = {
+  state: "safest:quality:state",
+  refresh: "safest:quality:refresh",
+  open: "safest:quality:open",
+  close: "safest:quality:close",
+  claim: "safest:quality:claim",
+  review: "safest:quality:review",
+} as const;
+
+function dispatch<TDetail>(type: string, detail?: TDetail): void {
+  window.dispatchEvent(detail === undefined ? new Event(type) : new CustomEvent(type, { detail }));
+}
+
+export function dispatchQualityRefresh(): void { dispatch(qualityEvents.refresh); }
+export function dispatchOpenQualitySample(sampleId: string): void { dispatch(qualityEvents.open, { sampleId }); }
+export function dispatchCloseQualitySample(): void { dispatch(qualityEvents.close); }
+export function dispatchClaimQualitySample(): void { dispatch(qualityEvents.claim); }
+export function dispatchQualityReview(input: QualityReviewInput): void { dispatch(qualityEvents.review, input); }
+
+export function isQualityWorkspaceSnapshot(value: unknown): value is QualityWorkspaceSnapshot {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as Partial<QualityWorkspaceSnapshot>;
+  return typeof candidate.loading === "boolean"
+    && typeof candidate.refreshing === "boolean"
+    && typeof candidate.error === "string"
+    && typeof candidate.actorId === "string"
+    && typeof candidate.generatedAt === "string"
+    && typeof candidate.canRead === "boolean"
+    && typeof candidate.canDecide === "boolean"
+    && Array.isArray(candidate.samples)
+    && typeof candidate.detail === "object";
+}

package/template/console/quality/store.ts

@@ -0,0 +1,36 @@
+import { isQualityWorkspaceSnapshot, qualityEvents } from "./events";
+import type { QualityWorkspaceSnapshot } from "./types";
+
+const subscribers = new Set<() => void>();
+
+let snapshot: QualityWorkspaceSnapshot = {
+  loading: true,
+  refreshing: false,
+  error: "",
+  actorId: "",
+  generatedAt: new Date().toISOString(),
+  canRead: false,
+  canDecide: false,
+  samples: [],
+  detail: { sampleId: null, loading: false, error: "", pendingAction: null, record: null },
+};
+
+window.addEventListener(qualityEvents.state, (event) => {
+  if (!(event instanceof CustomEvent) || !isQualityWorkspaceSnapshot(event.detail)) return;
+  snapshot = event.detail;
+  for (const subscriber of subscribers) subscriber();
+});
+
+export function getQualityWorkspaceSnapshot(): QualityWorkspaceSnapshot {
+  return snapshot;
+}
+
+export function setQualityWorkspaceSnapshot(next: QualityWorkspaceSnapshot | ((current: QualityWorkspaceSnapshot) => QualityWorkspaceSnapshot)): void {
+  snapshot = typeof next === "function" ? next(snapshot) : next;
+  for (const subscriber of subscribers) subscriber();
+}
+
+export function subscribeToQualityWorkspace(callback: () => void): () => void {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+}

package/template/console/quality/types.ts

@@ -0,0 +1,70 @@
+export type QualityIssueCode = "" | "incorrect_outcome" | "incorrect_policy_code" | "unsupported_evidence" | "unsafe_or_inaccurate_message" | "should_have_escalated" | "other";
+export type QualityPendingAction = "claim" | "review" | null;
+
+export interface QualitySampleSummary {
+  id: string;
+  reportReference: string;
+  sampleReason: string;
+  aiOutcome?: string;
+  aiRunStatus: string;
+  selectedAt: string;
+  state: string;
+  agrees: boolean | null;
+  claimedBy?: string | null;
+  claimExpiresAt?: string | null;
+}
+
+export interface QualitySampleDetail extends QualitySampleSummary {
+  configVersionId: string;
+  model: string;
+  promptVersion: string;
+  policyVersionId: string;
+  aiPolicyCode?: string | null;
+  messageTemplateId?: string | null;
+  aiEvidenceReferences?: string[];
+  rawOutput: unknown;
+  qualityReviewerId?: string | null;
+  issueCodes?: string[];
+  correctedOutcomeCode?: string | null;
+  correctedPolicyCode?: string | null;
+  qualityNotes?: string | null;
+}
+
+export interface QualityReportDetail {
+  reasonCode: string;
+  targetType: string;
+  targetReference: string;
+  answers: Array<{ fieldKey: string; value: unknown }>;
+  decisions: Array<{ makerType: string; decisionCode: string; policyCode?: string }>;
+}
+
+export interface QualityDetailRecord {
+  sample: QualitySampleDetail;
+  report: QualityReportDetail;
+}
+
+export interface QualityWorkspaceSnapshot {
+  loading: boolean;
+  refreshing: boolean;
+  error: string;
+  actorId: string;
+  generatedAt: string;
+  canRead: boolean;
+  canDecide: boolean;
+  samples: QualitySampleSummary[];
+  detail: {
+    sampleId: string | null;
+    loading: boolean;
+    error: string;
+    pendingAction: QualityPendingAction;
+    record: QualityDetailRecord | null;
+  };
+}
+
+export interface QualityReviewInput {
+  agrees: boolean;
+  issueCode: QualityIssueCode;
+  correctedOutcomeCode: string;
+  correctedPolicyCode: string;
+  notes: string;
+}

package/template/console/queues/QueueEditor.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useRef, useState, useSyncExternalStore, type FormEvent } from "react";
+import { dispatchCloseQueueEditor, dispatchPublishQueue } from "./events";
+import { getQueueWorkspaceSnapshot, subscribeToQueueWorkspace } from "./store";
+import type { QueueManagementMode, QueuePolicyInput, QueueRecord, QueueRolloutMode } from "./types";
+
+const AI_FIELDS = [
+  ["target.type", "Target type"],
+  ["answers.details", "Report details"],
+  ["evidence.references", "Evidence references"],
+  ["enrichments", "Completed enrichments"],
+] as const;
+const AI_TEMPLATES = [
+  ["ai-more-context-v1", "Ask for more context"],
+  ["ai-no-violation-v1", "No violation"],
+  ["ai-out-of-scope-v1", "Out of scope"],
+] as const;
+
+interface QueueDraft {
+  name: string;
+  key: string;
+  description: string;
+  managementMode: QueueManagementMode;
+  rolloutMode: QueueRolloutMode;
+  fallbackQueueId: string;
+  priority: string;
+  responseSlaMinutes: string;
+  resolutionSlaMinutes: string;
+  claimTtlMinutes: string;
+  reviewerInstructions: string;
+  policyVersionId: string;
+  aiInstructions: string;
+  model: string;
+  confidenceThreshold: string;
+  maxFollowUpTurns: string;
+  allowedOutcomes: string;
+  allowedFields: string[];
+  allowedTemplateIds: string[];
+  dailyReportBudget: string;
+  dailyCostBudgetMicrousd: string;
+  inputCostMicrousdPerMillion: string;
+  outputCostMicrousdPerMillion: string;
+  qualitySampleRate: string;
+  maxWaitHours: string;
+  minimumShadowRuns: string;
+  minimumQualityReviews: string;
+  maximumFailureRate: string;
+  maximumDisagreementRate: string;
+}
+
+function selectedValues(select: HTMLSelectElement): string[] {
+  return [...select.selectedOptions].map((option) => option.value);
+}
+
+function commaList(value: string): string[] {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+
+function queueDraft(queue: QueueRecord | null): QueueDraft {
+  const policy = queue?.activePolicy;
+  const bounds = policy?.aiBounds;
+  return {
+    name: queue?.name ?? "",
+    key: queue?.key ?? "",
+    description: queue?.description ?? "",
+    managementMode: policy?.managementMode ?? "human",
+    rolloutMode: policy?.rolloutMode ?? "off",
+    fallbackQueueId: policy?.fallbackQueueId ?? "",
+    priority: String(policy?.priority ?? 50),
+    responseSlaMinutes: policy?.responseSlaMinutes == null ? "" : String(policy.responseSlaMinutes),
+    resolutionSlaMinutes: policy?.resolutionSlaMinutes == null ? "" : String(policy.resolutionSlaMinutes),
+    claimTtlMinutes: String(policy?.claimTtlMinutes ?? 15),
+    reviewerInstructions: policy?.reviewerInstructions ?? "Review the allegation and referenced evidence against the published customer policy. Record the evidence considered and rationale.",
+    policyVersionId: bounds?.policyVersionId ?? "general-policy-v1",
+    aiInstructions: policy?.aiInstructions ?? "",
+    model: bounds?.model ?? "@cf/meta/llama-3.1-8b-instruct-fast",
+    confidenceThreshold: String(bounds?.confidenceThreshold ?? 0.85),
+    maxFollowUpTurns: String(bounds?.maxFollowUpTurns ?? 0),
+    allowedOutcomes: (bounds?.allowedOutcomes ?? ["no_violation_found", "out_of_scope", "insufficient_information", "escalate_to_human"]).join(", "),
+    allowedFields: bounds?.allowedFields ?? AI_FIELDS.map(([value]) => value),
+    allowedTemplateIds: bounds?.allowedTemplateIds ?? AI_TEMPLATES.map(([value]) => value),
+    dailyReportBudget: String(bounds?.dailyReportBudget ?? 100),
+    dailyCostBudgetMicrousd: String(bounds?.dailyCostBudgetMicrousd ?? 1_000_000),
+    inputCostMicrousdPerMillion: String(bounds?.inputCostMicrousdPerMillion ?? 0),
+    outputCostMicrousdPerMillion: String(bounds?.outputCostMicrousdPerMillion ?? 0),
+    qualitySampleRate: String(bounds?.qualitySampleRate ?? 0.1),
+    maxWaitHours: String(bounds?.maxWaitHours ?? 168),
+    minimumShadowRuns: String(bounds?.minimumShadowRuns ?? 25),
+    minimumQualityReviews: String(bounds?.minimumQualityReviews ?? 10),
+    maximumFailureRate: String(bounds?.maximumFailureRate ?? 0.1),
+    maximumDisagreementRate: String(bounds?.maximumDisagreementRate ?? 0.1),
+  };
+}
+
+export function QueueEditor() {
+  const snapshot = useSyncExternalStore(subscribeToQueueWorkspace, getQueueWorkspaceSnapshot, getQueueWorkspaceSnapshot);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const queue = snapshot.queues.find((candidate) => candidate.id === snapshot.editor.queueId) ?? null;
+  const [draft, setDraft] = useState<QueueDraft>(() => queueDraft(queue));
+  const humanQueues = snapshot.queues.filter((candidate) => candidate.id !== queue?.id && candidate.status === "active" && candidate.activePolicy?.managementMode === "human");
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (snapshot.editor.open && !dialog.open) {
+      dialog.showModal();
+      nameRef.current?.focus();
+    }
+    if (!snapshot.editor.open && dialog.open) dialog.close();
+  }, [snapshot.editor.open]);
+  useEffect(() => {
+    if (snapshot.editor.open) setDraft(queueDraft(queue));
+  }, [snapshot.editor.open, snapshot.editor.queueId]);
+
+  const update = <TKey extends keyof QueueDraft>(key: TKey, value: QueueDraft[TKey]): void => setDraft((current) => ({ ...current, [key]: value }));
+  const changeMode = (mode: QueueManagementMode): void => setDraft((current) => ({ ...current, managementMode: mode, rolloutMode: mode === "human" ? "off" : current.rolloutMode }));
+  const updateName = (name: string): void => setDraft((current) => ({
+    ...current,
+    name,
+    key: queue ? current.key : name.toLowerCase().trim().replace(/[^a-z0-9]+/gu, "-").replace(/^-|-$/gu, "").slice(0, 80),
+  }));
+  const submit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    const human = draft.managementMode === "human";
+    const policy: QueuePolicyInput = {
+      managementMode: draft.managementMode,
+      rolloutMode: human ? "off" : draft.rolloutMode,
+      priority: Number(draft.priority),
+      responseSlaMinutes: draft.responseSlaMinutes ? Number(draft.responseSlaMinutes) : null,
+      resolutionSlaMinutes: draft.resolutionSlaMinutes ? Number(draft.resolutionSlaMinutes) : null,
+      claimTtlMinutes: Number(draft.claimTtlMinutes),
+      fallbackQueueId: draft.fallbackQueueId || null,
+      reviewerInstructions: draft.reviewerInstructions,
+      aiInstructions: human ? null : draft.aiInstructions,
+      aiBounds: {
+        allowedOutcomes: commaList(draft.allowedOutcomes),
+        confidenceThreshold: Number(draft.confidenceThreshold),
+        maxFollowUpTurns: Number(draft.maxFollowUpTurns),
+        model: draft.model,
+        policyVersionId: draft.policyVersionId,
+        allowedFields: draft.allowedFields,
+        allowedTemplateIds: draft.allowedTemplateIds,
+        dailyReportBudget: Number(draft.dailyReportBudget),
+        dailyCostBudgetMicrousd: Number(draft.dailyCostBudgetMicrousd),
+        inputCostMicrousdPerMillion: Number(draft.inputCostMicrousdPerMillion),
+        outputCostMicrousdPerMillion: Number(draft.outputCostMicrousdPerMillion),
+        qualitySampleRate: Number(draft.qualitySampleRate),
+        maxWaitHours: Number(draft.maxWaitHours),
+        minimumShadowRuns: Number(draft.minimumShadowRuns),
+        minimumQualityReviews: Number(draft.minimumQualityReviews),
+        maximumFailureRate: Number(draft.maximumFailureRate),
+        maximumDisagreementRate: Number(draft.maximumDisagreementRate),
+      },
+    };
+    dispatchPublishQueue({ queueId: queue?.id ?? null, key: draft.key, name: draft.name, description: draft.description, policy });
+  };
+  const disabled = snapshot.queuePending;
+  const human = draft.managementMode === "human";
+  const version = queue ? `Publishing policy version ${(queue.activePolicy?.version ?? 0) + 1}; prior versions remain immutable.` : "New queue and policy version 1";
+
+  return (
+    <dialog ref={dialogRef} className="detail-dialog queue-dialog" aria-labelledby="queue-editor-title" onCancel={(event) => { event.preventDefault(); dispatchCloseQueueEditor(); }} data-react-slice="queue-editor">
+      <div className="detail-head"><div><h2 id="queue-editor-title">{queue?.name ?? "Create queue"}</h2><p>{version}</p></div><button className="icon-button" type="button" aria-label="Close queue editor" onClick={dispatchCloseQueueEditor}>×</button></div>
+      <form className="queue-form" onSubmit={submit} aria-busy={disabled}>
+        <section className="queue-form-section"><div><h3>Queue details</h3></div><label>Name<input ref={nameRef} maxLength={100} required disabled={disabled} value={draft.name} onChange={(event) => updateName(event.currentTarget.value)} /></label><label>Key<input maxLength={80} pattern="[a-z0-9]+(?:-[a-z0-9]+)*" required disabled={disabled || Boolean(queue)} value={draft.key} onChange={(event) => update("key", event.currentTarget.value)} /></label><label className="wide-field">Description<textarea maxLength={1000} disabled={disabled} value={draft.description} onChange={(event) => update("description", event.currentTarget.value)} /></label></section>
+        <section className="queue-form-section"><div><h3>Mode and rollout</h3></div><label>Managed by<select disabled={disabled} value={draft.managementMode} onChange={(event) => changeMode(event.currentTarget.value as QueueManagementMode)}><option value="human">Human</option><option value="ai">AI</option><option value="hybrid">Hybrid</option></select></label><label>AI rollout<select disabled={disabled || human} value={human ? "off" : draft.rolloutMode} onChange={(event) => update("rolloutMode", event.currentTarget.value as QueueRolloutMode)}><option value="off">Off</option><option value="shadow">Shadow</option><option value="assist">Assist</option><option value="autonomous">Autonomous</option></select></label><label>Human fallback<select disabled={disabled} value={draft.fallbackQueueId} onChange={(event) => update("fallbackQueueId", event.currentTarget.value)}><option value="">None</option>{humanQueues.map((candidate) => <option value={candidate.id} key={candidate.id}>{candidate.name}</option>)}</select></label><label>Priority<input type="number" min="0" max="100" required disabled={disabled} value={draft.priority} onChange={(event) => update("priority", event.currentTarget.value)} /></label><label>Response SLA (minutes)<input type="number" min="1" max="525600" disabled={disabled} value={draft.responseSlaMinutes} onChange={(event) => update("responseSlaMinutes", event.currentTarget.value)} /></label><label>Resolution SLA (minutes)<input type="number" min="1" max="525600" disabled={disabled} value={draft.resolutionSlaMinutes} onChange={(event) => update("resolutionSlaMinutes", event.currentTarget.value)} /></label><label>Claim TTL (minutes)<input type="number" min="1" max="1440" required disabled={disabled} value={draft.claimTtlMinutes} onChange={(event) => update("claimTtlMinutes", event.currentTarget.value)} /></label></section>
+        <section className="queue-form-section policy-copy-section"><div><h3>Reviewer instructions</h3></div><label>Adjudication policy version<input required disabled={disabled} value={draft.policyVersionId} onChange={(event) => update("policyVersionId", event.currentTarget.value)} /></label><label className="wide-field">Instructions<textarea maxLength={10000} required disabled={disabled} value={draft.reviewerInstructions} onChange={(event) => update("reviewerInstructions", event.currentTarget.value)} /></label></section>
+        <section className="queue-form-section policy-copy-section" hidden={human}><div><h3>AI criteria and instructions</h3></div><label className="wide-field">AI instructions<textarea maxLength={10000} required={!human} disabled={disabled} value={draft.aiInstructions} onChange={(event) => update("aiInstructions", event.currentTarget.value)} /></label><label>Workers AI model<input required disabled={disabled} value={draft.model} onChange={(event) => update("model", event.currentTarget.value)} /></label><label>Confidence threshold<input type="number" min="0" max="1" step="0.01" disabled={disabled} value={draft.confidenceThreshold} onChange={(event) => update("confidenceThreshold", event.currentTarget.value)} /></label><label>Maximum follow-up turns<input type="number" min="0" max="10" disabled={disabled} value={draft.maxFollowUpTurns} onChange={(event) => update("maxFollowUpTurns", event.currentTarget.value)} /></label><label className="wide-field">Allowed outcome codes <small>Comma-separated bounded result types.</small><input disabled={disabled} value={draft.allowedOutcomes} onChange={(event) => update("allowedOutcomes", event.currentTarget.value)} /></label><label>Fields shared with case AI<select multiple size={4} disabled={disabled} value={draft.allowedFields} onChange={(event) => update("allowedFields", selectedValues(event.currentTarget))}>{AI_FIELDS.map(([value, label]) => <option value={value} key={value}>{label}</option>)}</select></label><label>Approved reporter templates<select multiple size={3} disabled={disabled} value={draft.allowedTemplateIds} onChange={(event) => update("allowedTemplateIds", selectedValues(event.currentTarget))}>{AI_TEMPLATES.map(([value, label]) => <option value={value} key={value}>{label}</option>)}</select></label><label>Daily report budget<input type="number" min="0" max="1000000" disabled={disabled} value={draft.dailyReportBudget} onChange={(event) => update("dailyReportBudget", event.currentTarget.value)} /></label><label>Daily cost budget (µUSD)<input type="number" min="0" max="1000000000" disabled={disabled} value={draft.dailyCostBudgetMicrousd} onChange={(event) => update("dailyCostBudgetMicrousd", event.currentTarget.value)} /></label><label>Input price (µUSD / 1M units)<input type="number" min="0" max="1000000000" disabled={disabled} value={draft.inputCostMicrousdPerMillion} onChange={(event) => update("inputCostMicrousdPerMillion", event.currentTarget.value)} /></label><label>Output price (µUSD / 1M units)<input type="number" min="0" max="1000000000" disabled={disabled} value={draft.outputCostMicrousdPerMillion} onChange={(event) => update("outputCostMicrousdPerMillion", event.currentTarget.value)} /></label><label>Human quality sample<input type="number" min="0" max="1" step="0.01" disabled={disabled} value={draft.qualitySampleRate} onChange={(event) => update("qualitySampleRate", event.currentTarget.value)} /></label><label>Maximum wait (hours)<input type="number" min="1" max="720" disabled={disabled} value={draft.maxWaitHours} onChange={(event) => update("maxWaitHours", event.currentTarget.value)} /></label><label>Required shadow runs<input type="number" min="1" max="100000" disabled={disabled} value={draft.minimumShadowRuns} onChange={(event) => update("minimumShadowRuns", event.currentTarget.value)} /></label><label>Required quality reviews<input type="number" min="0" max="100000" disabled={disabled} value={draft.minimumQualityReviews} onChange={(event) => update("minimumQualityReviews", event.currentTarget.value)} /></label><label>Maximum failure rate<input type="number" min="0" max="1" step="0.01" disabled={disabled} value={draft.maximumFailureRate} onChange={(event) => update("maximumFailureRate", event.currentTarget.value)} /></label><label>Maximum disagreement rate<input type="number" min="0" max="1" step="0.01" disabled={disabled} value={draft.maximumDisagreementRate} onChange={(event) => update("maximumDisagreementRate", event.currentTarget.value)} /></label><p className="queue-safety-copy wide-field">Customer application actions remain human-approved in the first release. Protected, uncertain, failed, contested, and out-of-bound reports move to a human.</p></section>
+        <div className="queue-form-footer"><p className="error" role="alert">{snapshot.editor.error}</p><div><button className="secondary" type="button" disabled={disabled} onClick={dispatchCloseQueueEditor}>Cancel</button><button className="primary" type="submit" disabled={disabled}>{disabled ? "Publishing…" : queue ? "Publish policy version" : "Create and publish"}</button></div></div>
+      </form>
+    </dialog>
+  );
+}

package/template/console/queues/QueueWorkspace.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useState, useSyncExternalStore, type FormEvent } from "react";
+import { readable } from "../lib/format";
+import { PageHeader } from "../components/PageHeader";
+import { dispatchCreateQueue, dispatchEditQueue, dispatchPublishRouting } from "./events";
+import { getQueueWorkspaceSnapshot, subscribeToQueueWorkspace } from "./store";
+import type { QueueRecord, RoutingAgentConfiguration, RoutingAgentInput, RoutingRolloutMode } from "./types";
+
+const ROUTING_FIELDS = [
+  ["reason_code", "Reason code"],
+  ["source", "Source"],
+  ["target_type", "Target type"],
+  ["answers.details", "Report details"],
+  ["trusted_facts", "Signed trusted facts"],
+] as const;
+
+const DEFAULT_ROUTING_INSTRUCTIONS = "Choose only among the assigned eligible queues. Route uncertainty or protected cases to a human. Do not decide the report.";
+
+function selectedValues(select: HTMLSelectElement): string[] {
+  return [...select.selectedOptions].map((option) => option.value);
+}
+
+function routingDraft(configuration: RoutingAgentConfiguration | null, queues: QueueRecord[]): RoutingAgentInput {
+  const active = queues.filter((queue) => queue.status === "active");
+  const human = active.filter((queue) => queue.activePolicy?.managementMode === "human");
+  return {
+    rolloutMode: configuration?.rolloutMode ?? "off",
+    model: configuration?.model ?? "@cf/meta/llama-3.1-8b-instruct-fast",
+    confidenceThreshold: configuration?.confidenceThreshold ?? 0.85,
+    safeguardQueueId: configuration?.safeguardQueueId ?? human[0]?.id ?? "",
+    defaultQueueId: configuration?.defaultQueueId ?? human[0]?.id ?? "",
+    instructions: configuration?.instructions ?? DEFAULT_ROUTING_INSTRUCTIONS,
+    candidateQueueIds: configuration?.candidateQueueIds ?? active.map((queue) => queue.id),
+    allowedFields: configuration?.allowedFields ?? ROUTING_FIELDS.map(([value]) => value),
+  };
+}
+
+function RoutingAgentForm({ configuration, queues, loading, error, pending, canManage }: {
+  configuration: RoutingAgentConfiguration | null;
+  queues: QueueRecord[];
+  loading: boolean;
+  error: string;
+  pending: boolean;
+  canManage: boolean;
+}) {
+  const [draft, setDraft] = useState<RoutingAgentInput>(() => routingDraft(configuration, queues));
+  const activeQueues = queues.filter((queue) => queue.status === "active");
+  const humanQueues = activeQueues.filter((queue) => queue.activePolicy?.managementMode === "human");
+
+  useEffect(() => setDraft(routingDraft(configuration, queues)), [configuration?.version, queues]);
+  const update = <TKey extends keyof RoutingAgentInput>(key: TKey, value: RoutingAgentInput[TKey]): void => {
+    setDraft((current) => ({ ...current, [key]: value }));
+  };
+  const submit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    dispatchPublishRouting(draft);
+  };
+  const disabled = !canManage || loading || pending;
+
+  return (
+    <form className="routing-agent-form" onSubmit={submit} aria-busy={loading || pending}>
+      <div className="routing-agent-head">
+        <div><h3>Routing agent</h3><p>Routes only to approved queues. Safeguards and human fallback always take priority.</p></div>
+        <span className="badge">{loading ? "Loading" : configuration ? `Version ${configuration.version} · ${readable(configuration.rolloutMode)}` : "Not configured"}</span>
+      </div>
+      <label>Rollout<select value={draft.rolloutMode} disabled={disabled} onChange={(event) => update("rolloutMode", event.currentTarget.value as RoutingRolloutMode)}><option value="off">Off</option><option value="shadow">Shadow</option><option value="active">Active</option></select></label>
+      <label>Workers AI model<input value={draft.model} required disabled={disabled} onChange={(event) => update("model", event.currentTarget.value)} /></label>
+      <label>Confidence threshold<input type="number" min="0" max="1" step="0.01" value={draft.confidenceThreshold} required disabled={disabled} onChange={(event) => update("confidenceThreshold", Number(event.currentTarget.value))} /></label>
+      <label>Safeguard queue<select value={draft.safeguardQueueId} required disabled={disabled} onChange={(event) => update("safeguardQueueId", event.currentTarget.value)}><option value="" disabled>Select a human queue</option>{humanQueues.map((queue) => <option value={queue.id} key={queue.id}>{queue.name}</option>)}</select></label>
+      <label>Default human queue<select value={draft.defaultQueueId} required disabled={disabled} onChange={(event) => update("defaultQueueId", event.currentTarget.value)}><option value="" disabled>Select a human queue</option>{humanQueues.map((queue) => <option value={queue.id} key={queue.id}>{queue.name}</option>)}</select></label>
+      <label>Candidate queues<select multiple size={4} value={draft.candidateQueueIds} required disabled={disabled} onChange={(event) => update("candidateQueueIds", selectedValues(event.currentTarget))}>{activeQueues.map((queue) => <option value={queue.id} key={queue.id}>{queue.name} · {readable(queue.activePolicy?.managementMode || "unconfigured")}</option>)}</select></label>
+      <label className="routing-agent-instructions">Routing instructions<textarea maxLength={10000} required value={draft.instructions} disabled={disabled} onChange={(event) => update("instructions", event.currentTarget.value)} /></label>
+      <label>Fields shared with routing AI<select multiple size={5} value={draft.allowedFields} disabled={disabled} onChange={(event) => update("allowedFields", selectedValues(event.currentTarget))}>{ROUTING_FIELDS.map(([value, label]) => <option value={value} key={value}>{label}</option>)}</select></label>
+      <div className="routing-agent-footer"><p className="error" role="alert">{error}</p>{canManage ? <button className="primary" type="submit" disabled={disabled}>{pending ? "Publishing…" : "Publish routing version"}</button> : null}</div>
+    </form>
+  );
+}
+
+function QueueCard({ queue, canManage }: { queue: QueueRecord; canManage: boolean }) {
+  const policy = queue.activePolicy;
+  const mode = policy ? `${readable(policy.managementMode)} · ${readable(policy.rolloutMode)}` : "No published policy";
+  return (
+    <article className={`queue-card ${policy?.managementMode || "unconfigured"}`}>
+      <div><div><strong>{queue.name}</strong><small>{queue.key} · policy v{policy?.version ?? "—"}</small></div><div><span className={`badge${policy?.rolloutMode === "autonomous" ? " urgent" : ""}`}>{mode}</span><span className={`badge${queue.status === "active" ? "" : " urgent"}`}>{readable(queue.status)}</span></div></div>
+      <p>{queue.description || "No queue description."}</p>
+      <dl><dt>Open</dt><dd>{queue.counts.openReports}</dd><dt>Priority</dt><dd>{policy?.priority ?? "—"}</dd><dt>Response SLA</dt><dd>{policy?.responseSlaMinutes ? `${policy.responseSlaMinutes}m` : "—"}</dd></dl>
+      <p className="queue-instructions">{policy?.reviewerInstructions || "No reviewer instructions have been published."}</p>
+      {canManage ? <button className="secondary" type="button" onClick={() => dispatchEditQueue(queue.id)}>Publish new policy</button> : null}
+    </article>
+  );
+}
+
+export function QueueWorkspace() {
+  const snapshot = useSyncExternalStore(subscribeToQueueWorkspace, getQueueWorkspaceSnapshot, getQueueWorkspaceSnapshot);
+  return (
+    <div className="page-stack" data-react-slice="queue-workspace">
+      <PageHeader titleId="queues-title" title="Queues and policies" description="Set ownership, response targets, and safeguards.">
+        {snapshot.canManage ? <div className="surface-buttons"><button className="primary" type="button" onClick={dispatchCreateQueue}>Create queue</button></div> : null}
+      </PageHeader>
+      <section className="surface queues-surface" aria-labelledby="queues-title">
+        <div className="queue-policy-note"><strong>Ownership and rollout are separate.</strong><span>Choose who owns the work, then how far AI may proceed. Publishing locks a new policy version.</span></div>
+        <RoutingAgentForm configuration={snapshot.routingAgent} queues={snapshot.queues} loading={snapshot.routingLoading} error={snapshot.routingError} pending={snapshot.routingPending} canManage={snapshot.canManage} />
+        <div className="queue-list" aria-busy={snapshot.loading}>
+          {snapshot.loading ? <><div className="skeleton-card" /><div className="skeleton-card" /></> : snapshot.queues.length ? snapshot.queues.map((queue) => <QueueCard queue={queue} canManage={snapshot.canManage} key={queue.id} />) : <div className="empty compact"><h3>No report queues configured</h3><p>Create a queue to define ownership and response policy.</p></div>}
+        </div>
+        <p className="error surface-error" role="alert">{snapshot.error}</p>
+      </section>
+    </div>
+  );
+}

package/template/console/queues/controller.ts

@@ -0,0 +1,194 @@
+import { errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import { dispatchReportRefresh } from "../reports/events";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { queueEvents } from "./events";
+import { getQueueWorkspaceSnapshot, setQueueWorkspaceSnapshot } from "./store";
+import type { QueuePublishInput, QueueRecord, QueueWorkspaceSnapshot, RoutingAgentConfiguration, RoutingAgentInput } from "./types";
+
+interface QueueListResponse { queues?: QueueRecord[] }
+interface RoutingAgentResponse { configurations?: RoutingAgentConfiguration[] }
+
+const initialSnapshot = (): QueueWorkspaceSnapshot => ({
+  loading: true,
+  error: "",
+  routingLoading: true,
+  routingError: "",
+  routingPending: false,
+  queuePending: false,
+  queues: [],
+  routingAgent: null,
+  canManage: false,
+  editor: { open: false, queueId: null, error: "" },
+});
+
+let actorId = "";
+let started = false;
+
+function permissions(snapshot: QueueWorkspaceSnapshot): QueueWorkspaceSnapshot {
+  return { ...snapshot, canManage: getShellSnapshot().session?.permissions.manageConfiguration === true };
+}
+
+async function loadQueues(): Promise<void> {
+  const session = getShellSnapshot().session;
+  if (!session) return;
+  setQueueWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, error: "" }));
+  try {
+    const suffix = session.permissions.manageConfiguration ? "?include_archived=true" : "";
+    const response = await requestJson<QueueListResponse>(`/v1/admin/queues${suffix}`);
+    setQueueWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, queues: response.queues || [] }));
+  } catch (cause) {
+    setQueueWorkspaceSnapshot((snapshot) => ({ ...snapshot, error: errorMessage(cause, "Queues could not be loaded.") }));
+  } finally {
+    setQueueWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, loading: false }));
+  }
+}
+
+async function loadRoutingAgent(): Promise<void> {
+  if (!getShellSnapshot().session) return;
+  setQueueWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, routingError: "" }));
+  try {
+    const response = await requestJson<RoutingAgentResponse>("/v1/admin/routing-agent");
+    setQueueWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, routingAgent: response.configurations?.[0] || null }));
+  } catch (cause) {
+    setQueueWorkspaceSnapshot((snapshot) => ({ ...snapshot, routingError: errorMessage(cause, "The routing agent configuration could not be loaded.") }));
+  } finally {
+    setQueueWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, routingLoading: false }));
+  }
+}
+
+async function publishRoutingAgent(input: RoutingAgentInput): Promise<void> {
+  const snapshot = getQueueWorkspaceSnapshot();
+  if (!snapshot.canManage || snapshot.routingPending) return;
+  setQueueWorkspaceSnapshot({ ...snapshot, routingError: "", routingPending: true });
+  try {
+    await requestJson("/v1/admin/routing-agent", {
+      method: "POST",
+      headers: mutationHeaders(),
+      body: JSON.stringify({
+        enabled: input.rolloutMode !== "off",
+        rollout_mode: input.rolloutMode,
+        model: input.model,
+        instructions: input.instructions,
+        candidate_queue_ids: input.candidateQueueIds,
+        safeguard_queue_id: input.safeguardQueueId,
+        default_queue_id: input.defaultQueueId,
+        confidence_threshold: input.confidenceThreshold,
+        allowed_fields: input.allowedFields,
+      }),
+    });
+    await loadRoutingAgent();
+  } catch (cause) {
+    setQueueWorkspaceSnapshot((current) => ({ ...current, routingError: errorMessage(cause, "The routing agent configuration could not be published.") }));
+  } finally {
+    setQueueWorkspaceSnapshot((current) => permissions({ ...current, routingPending: false }));
+  }
+}
+
+function openEditor(queueId: string | null): void {
+  const snapshot = getQueueWorkspaceSnapshot();
+  if (!snapshot.canManage) return;
+  setQueueWorkspaceSnapshot({ ...snapshot, editor: { open: true, queueId, error: "" } });
+}
+
+function closeEditor(): void {
+  setQueueWorkspaceSnapshot((snapshot) => permissions({ ...snapshot, editor: { open: false, queueId: null, error: "" } }));
+}
+
+async function saveQueue(input: QueuePublishInput): Promise<void> {
+  const snapshot = getQueueWorkspaceSnapshot();
+  if (!snapshot.canManage || snapshot.queuePending || snapshot.editor.queueId !== input.queueId) return;
+  setQueueWorkspaceSnapshot({ ...snapshot, queuePending: true, editor: { ...snapshot.editor, error: "" } });
+  try {
+    const bounds = input.policy.aiBounds;
+    const policy = {
+      management_mode: input.policy.managementMode,
+      rollout_mode: input.policy.managementMode === "human" ? "off" : input.policy.rolloutMode,
+      priority: input.policy.priority,
+      response_sla_minutes: input.policy.responseSlaMinutes,
+      resolution_sla_minutes: input.policy.resolutionSlaMinutes,
+      claim_ttl_minutes: input.policy.claimTtlMinutes,
+      fallback_queue_id: input.policy.fallbackQueueId,
+      reviewer_instructions: input.policy.reviewerInstructions,
+      ai_instructions: input.policy.managementMode === "human" ? null : input.policy.aiInstructions,
+      ai_bounds: {
+        allowed_outcomes: bounds.allowedOutcomes,
+        confidence_threshold: bounds.confidenceThreshold,
+        max_follow_up_turns: bounds.maxFollowUpTurns,
+        autonomous_actions: false,
+        model: bounds.model,
+        policy_version_id: bounds.policyVersionId,
+        allowed_fields: bounds.allowedFields,
+        allowed_template_ids: bounds.allowedTemplateIds,
+        daily_report_budget: bounds.dailyReportBudget,
+        daily_cost_budget_microusd: bounds.dailyCostBudgetMicrousd,
+        input_cost_microusd_per_million: bounds.inputCostMicrousdPerMillion,
+        output_cost_microusd_per_million: bounds.outputCostMicrousdPerMillion,
+        quality_sample_rate: bounds.qualitySampleRate,
+        max_wait_hours: bounds.maxWaitHours,
+        minimum_shadow_runs: bounds.minimumShadowRuns,
+        minimum_quality_reviews: bounds.minimumQualityReviews,
+        maximum_failure_rate: bounds.maximumFailureRate,
+        maximum_disagreement_rate: bounds.maximumDisagreementRate,
+      },
+    };
+    const editingQueue = input.queueId ? snapshot.queues.find((queue) => queue.id === input.queueId) : null;
+    if (editingQueue) {
+      await requestJson(`/v1/admin/queues/${encodeURIComponent(editingQueue.id)}`, {
+        method: "PATCH",
+        headers: mutationHeaders(),
+        body: JSON.stringify({ name: input.name, description: input.description }),
+      });
+      await requestJson(`/v1/admin/queues/${encodeURIComponent(editingQueue.id)}/policy-versions`, {
+        method: "POST",
+        headers: mutationHeaders(),
+        body: JSON.stringify(policy),
+      });
+    } else {
+      const position = snapshot.queues.reduce((maximum, queue) => Math.max(maximum, Number(queue.position || 0)), 0) + 10;
+      await requestJson("/v1/admin/queues", {
+        method: "POST",
+        headers: mutationHeaders(),
+        body: JSON.stringify({ key: input.key, name: input.name, description: input.description, position, policy }),
+      });
+    }
+    closeEditor();
+    await Promise.all([loadQueues(), loadRoutingAgent()]);
+    dispatchReportRefresh();
+  } catch (cause) {
+    setQueueWorkspaceSnapshot((current) => ({
+      ...current,
+      editor: { ...current.editor, error: errorMessage(cause, "The queue policy could not be published.") },
+    }));
+  } finally {
+    setQueueWorkspaceSnapshot((current) => permissions({ ...current, queuePending: false }));
+  }
+}
+
+export function startQueueController(): void {
+  if (started) return;
+  started = true;
+  subscribeToShell(() => {
+    const session = getShellSnapshot().session;
+    const nextActorId = session?.actor.id || "";
+    if (nextActorId === actorId) {
+      setQueueWorkspaceSnapshot((snapshot) => permissions(snapshot));
+      return;
+    }
+    actorId = nextActorId;
+    setQueueWorkspaceSnapshot(initialSnapshot());
+    if (session) void Promise.all([loadQueues(), loadRoutingAgent()]);
+  });
+  window.addEventListener(queueEvents.create, () => openEditor(null));
+  window.addEventListener(queueEvents.edit, (event) => {
+    if (event instanceof CustomEvent && typeof event.detail?.queueId === "string") openEditor(event.detail.queueId);
+  });
+  window.addEventListener(queueEvents.closeEditor, closeEditor);
+  window.addEventListener(queueEvents.publishRouting, (event) => {
+    if (!(event instanceof CustomEvent) || !event.detail || !Array.isArray(event.detail.candidateQueueIds) || !Array.isArray(event.detail.allowedFields)) return;
+    void publishRoutingAgent(event.detail as RoutingAgentInput);
+  });
+  window.addEventListener(queueEvents.publishQueue, (event) => {
+    if (!(event instanceof CustomEvent) || !event.detail?.policy?.aiBounds) return;
+    void saveQueue(event.detail as QueuePublishInput);
+  });
+}