create-safest-tools 0.2.0

package/template/console/configuration/ConfigurationWorkspace.tsx

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { PageHeader } from "../components/PageHeader";
+import { readable, relativeTime } from "../lib/format";
+import { errorMessage, requestJson } from "../lib/http";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { configurationEndpoint, configurationLabel } from "./api";
+import { configurationEvents, openConfigurationEditor } from "./events";
+import type { ConfigurationListResponse, ConfigurationSummary, ConfigurationType } from "./types";
+
+const tabs: Array<{ type: ConfigurationType; label: string }> = [
+  { type: "form", label: "Intake forms" },
+  { type: "routing_rules", label: "Routing rules" },
+  { type: "policy", label: "Decision policies" },
+  { type: "template", label: "Message templates" },
+];
+
+function ConfigurationCard({ item, type }: { item: ConfigurationSummary; type: ConfigurationType }) {
+  const updated = item.draft?.updatedAt || item.latestPublishedAt || "";
+  const title = item.configurationKey === "default" ? "Workspace routing" : readable(item.configurationKey);
+  return <article className="object-card configuration-card">
+    <div className="object-card-head"><span className="object-icon" aria-hidden="true">⌗</span><span className={`badge${item.draft?.validationStatus === "invalid" ? " urgent" : ""}`}>{item.draft ? "Draft" : "Published"}</span></div>
+    <h3>{title}</h3><p>{item.draft ? `Revision ${item.draft.revision} · ${readable(item.draft.validationStatus)}` : "No unpublished changes."}</p>
+    <div className="object-card-meta"><div><span>Type</span><strong>{configurationLabel(type)}</strong></div><div><span>Published</span><strong>{item.latestVersion ? `v${item.latestVersion}` : "Never"}</strong></div><div><span>Updated</span><strong>{relativeTime(updated)}</strong></div></div>
+    <div className="object-card-footer"><small>{item.draft ? "Unpublished changes" : "Immutable version"}</small><button className="secondary" type="button" onClick={() => openConfigurationEditor(type, item.configurationKey, true)}>{item.draft ? "Edit draft" : "Create next version"}</button></div>
+  </article>;
+}
+
+export function ConfigurationWorkspace() {
+  const shell = useSyncExternalStore(subscribeToShell, getShellSnapshot, getShellSnapshot);
+  const canManage = shell.session?.permissions.manageConfiguration === true;
+  const [type, setType] = useState<ConfigurationType>("form");
+  const [configurations, setConfigurations] = useState<ConfigurationSummary[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState("");
+
+  const load = useCallback(async (refresh = false): Promise<void> => {
+    if (!canManage) { setConfigurations([]); return; }
+    if (refresh) setRefreshing(true); else setLoading(true);
+    setError("");
+    try {
+      const result = await requestJson<ConfigurationListResponse>(`/v1/admin/${configurationEndpoint(type)}`);
+      setConfigurations(result.configurations || []);
+    } catch (cause) { setError(errorMessage(cause, "Configuration could not be loaded.")); }
+    finally { setLoading(false); setRefreshing(false); }
+  }, [canManage, type]);
+
+  useEffect(() => { if (shell.currentView === "configuration") void load(); }, [shell.currentView, shell.session?.actor.id, load]);
+  useEffect(() => {
+    const changed = (): void => { if (shell.currentView === "configuration") void load(true); };
+    window.addEventListener(configurationEvents.changed, changed);
+    return () => window.removeEventListener(configurationEvents.changed, changed);
+  }, [shell.currentView, load]);
+
+  const routing = configurations.find((item) => item.configurationKey === "default");
+  const create = (): void => openConfigurationEditor(type, type === "routing_rules" ? "default" : "", type === "routing_rules" && Boolean(routing));
+  return <div className="page-stack" data-react-slice="configuration-workspace">
+    <PageHeader titleId="configuration-title" title="Configuration" description="Manage intake forms, routing, policies, and messages.">
+      <div className="surface-buttons"><button className="secondary" type="button" disabled={loading || refreshing} onClick={() => void load(true)}>{refreshing ? "Refreshing…" : "Refresh"}</button><button className="primary" type="button" disabled={!canManage} onClick={create}>{type === "routing_rules" && routing ? "Open routing" : "Create draft"}</button></div>
+    </PageHeader>
+    <div className="segmented-tabs configuration-tabs" role="tablist" aria-label="Configuration type">{tabs.map((tab) => <button className={type === tab.type ? "active" : ""} type="button" role="tab" aria-selected={type === tab.type} onClick={() => setType(tab.type)} key={tab.type}>{tab.label}</button>)}</div>
+    {type === "routing_rules" ? <div className="safety-boundary routing-boundary"><strong>Safeguards run before AI.</strong><span>The router sees only approved fields and queues. Uncertain results go to General triage.</span></div> : null}
+    <div className="object-grid configuration-list" aria-busy={loading || refreshing}>{loading ? <div className="skeleton-card" /> : configurations.length ? configurations.map((item) => <ConfigurationCard item={item} type={type} key={item.configurationKey} />) : error ? null : <div className="empty-product"><span aria-hidden="true">⌗</span><h2>No {configurationLabel(type).toLowerCase()} yet</h2><p>Create, check, and publish an immutable version.</p>{canManage ? <button className="primary" type="button" onClick={create}>Create draft</button> : null}</div>}</div>
+    <p className="error surface-error" role="alert">{error}</p>
+  </div>;
+}

package/template/console/configuration/FormBuilder.tsx

@@ -0,0 +1,143 @@
+import { createElement, useEffect, useRef, useState } from "react";
+import { readable } from "../lib/format";
+import type { WorkspaceBrand } from "../shell/types";
+import { configurationKeySlug } from "./api";
+import type { FormChoice, FormField, FormFieldType, FormReason, JsonObject, ReportFormContent } from "./types";
+
+interface TargetRow { id: string; label: string; value: string }
+interface ReasonRow extends FormReason { id: string; codeEdited: boolean }
+interface ChoiceRow extends FormChoice { id: string; valueEdited: boolean }
+interface FieldRow extends Omit<FormField, "options"> { id: string; keyEdited: boolean; options: ChoiceRow[] }
+
+export interface EditableReportForm {
+  title: string;
+  description: string;
+  targets: TargetRow[];
+  reasons: ReasonRow[];
+  fields: FieldRow[];
+  consent: string;
+}
+
+function id(): string { return crypto.randomUUID(); }
+function object(value: unknown): Record<string, unknown> { return value && typeof value === "object" && !Array.isArray(value) ? value as Record<string, unknown> : {}; }
+function text(value: unknown): string { return typeof value === "string" ? value : ""; }
+function number(value: unknown): number | undefined { return typeof value === "number" && Number.isFinite(value) ? value : undefined; }
+function fieldType(value: unknown): FormFieldType {
+  return ["short_text", "long_text", "select", "multi_select", "boolean", "number", "url"].includes(String(value)) ? value as FormFieldType : "long_text";
+}
+
+export function editableReportForm(value: JsonObject): EditableReportForm {
+  const targets = Array.isArray(value.target_types) ? value.target_types.filter((entry): entry is string => typeof entry === "string").map((entry) => ({ id: id(), value: entry, label: readable(entry) })) : [];
+  const reasons = Array.isArray(value.reasons) ? value.reasons.map((entry) => object(entry)).map((entry) => ({ id: id(), label: text(entry.label), code: text(entry.code), codeEdited: true })) : [];
+  const fields = Array.isArray(value.fields) ? value.fields.map((entry) => object(entry)).map((entry): FieldRow => {
+    const type = fieldType(entry.type);
+    const options = Array.isArray(entry.options) ? entry.options.map((option) => object(option)).map((option) => ({ id: id(), label: text(option.label), value: text(option.value), valueEdited: true })) : [];
+    return {
+      id: id(), key: text(entry.key), keyEdited: true, label: text(entry.label), type, required: entry.required === true,
+      ...(text(entry.help_text) ? { help_text: text(entry.help_text) } : {}),
+      ...(text(entry.placeholder) ? { placeholder: text(entry.placeholder) } : {}),
+      ...(["short_text", "long_text", "url"].includes(type) ? { max_length: number(entry.max_length) ?? (type === "short_text" ? 512 : type === "url" ? 2048 : 4000) } : {}),
+      ...(type === "number" && number(entry.min_value) !== undefined ? { min_value: number(entry.min_value) } : {}),
+      ...(type === "number" && number(entry.max_value) !== undefined ? { max_value: number(entry.max_value) } : {}),
+      options,
+    };
+  }) : [];
+  return {
+    title: text(value.title), description: text(value.description),
+    targets: targets.length ? targets : [{ id: id(), value: "", label: "" }],
+    reasons: reasons.length ? reasons : [{ id: id(), label: "", code: "", codeEdited: false }],
+    fields,
+    consent: text(value.consent_notice),
+  };
+}
+
+export function reportFormContent(value: EditableReportForm): ReportFormContent {
+  const content = {
+    title: value.title.trim(), description: value.description.trim(),
+    target_types: value.targets.map((target) => target.value || configurationKeySlug(target.label, "")).filter(Boolean),
+    reasons: value.reasons.map((reason) => ({ label: reason.label.trim(), code: reason.code.trim() || configurationKeySlug(reason.label) })),
+    fields: value.fields.map((field): FormField => {
+      const result: FormField = { key: field.key.trim() || configurationKeySlug(field.label), label: field.label.trim(), type: field.type, required: field.required };
+      if (field.help_text?.trim()) result.help_text = field.help_text.trim();
+      if (field.placeholder?.trim()) result.placeholder = field.placeholder.trim();
+      if (["short_text", "long_text", "url"].includes(field.type)) result.max_length = field.max_length ?? (field.type === "short_text" ? 512 : field.type === "url" ? 2048 : 4000);
+      if (field.type === "number" && field.min_value !== undefined) result.min_value = field.min_value;
+      if (field.type === "number" && field.max_value !== undefined) result.max_value = field.max_value;
+      if (field.type === "select" || field.type === "multi_select") result.options = field.options.map((option) => ({ label: option.label.trim(), value: option.value.trim() || configurationKeySlug(option.label) }));
+      return result;
+    }),
+    consent_notice: value.consent.trim(),
+  };
+  return content as ReportFormContent;
+}
+
+function move<Item>(items: Item[], index: number, direction: -1 | 1): Item[] {
+  const destination = index + direction;
+  if (destination < 0 || destination >= items.length) return items;
+  const copy = [...items];
+  [copy[index], copy[destination]] = [copy[destination] as Item, copy[index] as Item];
+  return copy;
+}
+
+function RowActions({ label, first, last, onMove, onRemove }: { label: string; first: boolean; last: boolean; onMove: (direction: -1 | 1) => void; onRemove: () => void }) {
+  return <div className="builder-row-actions"><button className="icon-button compact-button" type="button" aria-label={`Move ${label} up`} title="Move up" disabled={first} onClick={() => onMove(-1)}>↑</button><button className="icon-button compact-button" type="button" aria-label={`Move ${label} down`} title="Move down" disabled={last} onClick={() => onMove(1)}>↓</button><button className="icon-button compact-button danger-text" type="button" aria-label={`Remove ${label}`} title="Remove" onClick={onRemove}>×</button></div>;
+}
+
+function FieldCard({ field, index, count, onChange, onMove, onRemove }: { field: FieldRow; index: number; count: number; onChange: (field: FieldRow) => void; onMove: (direction: -1 | 1) => void; onRemove: () => void }) {
+  const set = <Key extends keyof FieldRow>(key: Key, value: FieldRow[Key]): void => onChange({ ...field, [key]: value });
+  const setType = (type: FormFieldType): void => {
+    let options = field.options;
+    if ((type === "select" || type === "multi_select") && !options.length) options = [{ id: id(), label: "", value: "", valueEdited: false }];
+    const maximum = type === "short_text" ? Math.min(field.max_length ?? 512, 512) : type === "url" ? Math.min(field.max_length ?? 2048, 2048) : field.max_length ?? 4000;
+    onChange({ ...field, type, options, ...(["short_text", "long_text", "url"].includes(type) ? { max_length: maximum } : {}) });
+  };
+  const setChoice = (choiceIndex: number, choice: ChoiceRow): void => set("options", field.options.map((candidate, current) => current === choiceIndex ? choice : candidate));
+  const choices = field.type === "select" || field.type === "multi_select";
+  return <article className="form-field-card">
+    <div className="form-field-head"><strong className="field-card-title">{field.label || "New question"}</strong><RowActions label={field.label || "question"} first={index === 0} last={index === count - 1} onMove={onMove} onRemove={onRemove} /></div>
+    <div className="form-field-grid">
+      <label>Question<input required value={field.label} placeholder="What happened?" onChange={(event) => { const label = event.currentTarget.value; onChange({ ...field, label, key: field.keyEdited ? field.key : configurationKeySlug(label, "") }); }} /></label>
+      <label>Internal reference<input pattern="[a-z0-9]+(?:-[a-z0-9]+)*" required value={field.key} placeholder="Generated automatically" onChange={(event) => onChange({ ...field, key: event.currentTarget.value, keyEdited: true })} /></label>
+      <label>Answer type<select value={field.type} onChange={(event) => setType(event.currentTarget.value as FormFieldType)}><option value="short_text">Short answer</option><option value="long_text">Long answer</option><option value="select">One choice</option><option value="multi_select">Multiple choices</option><option value="boolean">Yes or no</option><option value="number">Number</option><option value="url">Website address</option></select></label>
+      <label className="checkbox builder-checkbox"><input type="checkbox" checked={field.required} onChange={(event) => set("required", event.currentTarget.checked)} />Required</label>
+      <label>Help text<textarea maxLength={500} value={field.help_text || ""} placeholder="Optional guidance shown below the question" onChange={(event) => set("help_text", event.currentTarget.value)} /></label>
+      <label>Placeholder<input maxLength={300} value={field.placeholder || ""} placeholder="Optional example answer" onChange={(event) => set("placeholder", event.currentTarget.value)} /></label>
+      {["short_text", "long_text", "url"].includes(field.type) ? <label className="field-length-label">Character limit<input type="number" min={1} max={4000} required value={field.max_length || ""} onChange={(event) => set("max_length", event.currentTarget.value ? Number(event.currentTarget.value) : undefined)} /></label> : null}
+      {field.type === "number" ? <div className="field-number-bounds"><label>Minimum<input type="number" value={field.min_value ?? ""} placeholder="No minimum" onChange={(event) => set("min_value", event.currentTarget.value === "" ? undefined : Number(event.currentTarget.value))} /></label><label>Maximum<input type="number" value={field.max_value ?? ""} placeholder="No maximum" onChange={(event) => set("max_value", event.currentTarget.value === "" ? undefined : Number(event.currentTarget.value))} /></label></div> : null}
+    </div>
+    {choices ? <section className="field-options-section"><div className="builder-section-head"><div><strong>Choices</strong><small>The label is shown to reporters; the reference is stored.</small></div><button className="secondary compact-button" type="button" onClick={() => set("options", [...field.options, { id: id(), label: "", value: "", valueEdited: false }])}>Add choice</button></div><div className="field-options">{field.options.map((option, optionIndex) => <div className="field-option-row" key={option.id}><input aria-label={`Choice ${optionIndex + 1} label`} required value={option.label} placeholder="Choice label" onChange={(event) => { const label = event.currentTarget.value; setChoice(optionIndex, { ...option, label, value: option.valueEdited ? option.value : configurationKeySlug(label, "") }); }} /><input aria-label={`Choice ${optionIndex + 1} reference`} required value={option.value} placeholder="Reference" onChange={(event) => setChoice(optionIndex, { ...option, value: event.currentTarget.value, valueEdited: true })} /><button className="icon-button compact-button danger-text" type="button" aria-label={`Remove choice ${optionIndex + 1}`} onClick={() => set("options", field.options.filter((_, current) => current !== optionIndex))}>×</button></div>)}</div></section> : null}
+  </article>;
+}
+
+export function FormBuilder({ value, onChange, disabled = false }: { value: EditableReportForm; onChange: (value: EditableReportForm) => void; disabled?: boolean }) {
+  const previewRef = useRef<HTMLElement & { previewConfig?: unknown; previewBrand?: WorkspaceBrand }>(null);
+  const [brand, setBrand] = useState<WorkspaceBrand | undefined>(() => window.SafestBrand?.defaults);
+  const content = reportFormContent(value);
+  useEffect(() => {
+    const preview = previewRef.current;
+    if (!preview) return;
+    preview.previewConfig = { id: "preview", ...content };
+    if (brand) preview.previewBrand = brand;
+  }, [content, brand]);
+  useEffect(() => {
+    const applied = (event: Event): void => {
+      if (event instanceof CustomEvent && event.detail?.brand) setBrand(event.detail.brand as WorkspaceBrand);
+    };
+    window.addEventListener("safest-brand-applied", applied);
+    return () => window.removeEventListener("safest-brand-applied", applied);
+  }, []);
+  const set = <Key extends keyof EditableReportForm>(key: Key, next: EditableReportForm[Key]): void => onChange({ ...value, [key]: next });
+  return <fieldset className="form-builder" disabled={disabled}>
+    <legend className="visually-hidden">Intake form fields</legend>
+    <div className="form-builder-layout">
+      <div className="form-builder-controls">
+        <section><h3>Form introduction</h3><label>Title<input maxLength={160} required value={value.title} onChange={(event) => set("title", event.currentTarget.value)} /></label><label>Description<textarea maxLength={2000} value={value.description} onChange={(event) => set("description", event.currentTarget.value)} /></label></section>
+        <section><div className="builder-section-head"><div><h3>What can be reported?</h3><p>Add the object types this form accepts.</p></div><button className="secondary compact-button" type="button" onClick={() => set("targets", [...value.targets, { id: id(), label: "", value: "" }])}>Add type</button></div><div className="builder-rows">{value.targets.map((target, index) => <div className="builder-row target-type-row" key={target.id}><label>Type name<input required value={target.label} placeholder="Message, listing, account…" onChange={(event) => { const label = event.currentTarget.value; set("targets", value.targets.map((candidate, current) => current === index ? { ...candidate, label, value: configurationKeySlug(label, "") } : candidate)); }} /></label><RowActions label={target.label || "type"} first={index === 0} last={index === value.targets.length - 1} onMove={(direction) => set("targets", move(value.targets, index, direction))} onRemove={() => set("targets", value.targets.filter((_, current) => current !== index))} /></div>)}</div></section>
+        <section><div className="builder-section-head"><div><h3>Reasons</h3><p>These appear in the first dropdown.</p></div><button className="secondary compact-button" type="button" onClick={() => set("reasons", [...value.reasons, { id: id(), label: "", code: "", codeEdited: false }])}>Add reason</button></div><div className="builder-rows">{value.reasons.map((reason, index) => <div className="builder-row reason-row" key={reason.id}><label>Reason shown to reporters<input required value={reason.label} placeholder="Spam or scam" onChange={(event) => { const label = event.currentTarget.value; set("reasons", value.reasons.map((candidate, current) => current === index ? { ...candidate, label, code: candidate.codeEdited ? candidate.code : configurationKeySlug(label, "") } : candidate)); }} /></label><label>Internal reference<input pattern="[A-Za-z0-9][A-Za-z0-9._:-]*" required value={reason.code} placeholder="Generated automatically" onChange={(event) => set("reasons", value.reasons.map((candidate, current) => current === index ? { ...candidate, code: event.currentTarget.value, codeEdited: true } : candidate))} /></label><RowActions label={reason.label || "reason"} first={index === 0} last={index === value.reasons.length - 1} onMove={(direction) => set("reasons", move(value.reasons, index, direction))} onRemove={() => set("reasons", value.reasons.filter((_, current) => current !== index))} /></div>)}</div></section>
+        <section><div className="builder-section-head"><div><h3>Questions</h3><p>Questions appear in this order.</p></div><button className="secondary compact-button" type="button" onClick={() => set("fields", [...value.fields, { id: id(), key: "", keyEdited: false, label: "", type: "long_text", required: false, max_length: 4000, options: [] }])}>Add question</button></div><div className="form-field-list">{value.fields.map((field, index) => <FieldCard field={field} index={index} count={value.fields.length} onChange={(next) => set("fields", value.fields.map((candidate, current) => current === index ? next : candidate))} onMove={(direction) => set("fields", move(value.fields, index, direction))} onRemove={() => set("fields", value.fields.filter((_, current) => current !== index))} key={field.id} />)}</div></section>
+        <section><h3>Consent</h3><label>Consent notice<textarea maxLength={4000} required value={value.consent} onChange={(event) => set("consent", event.currentTarget.value)} /></label></section>
+      </div>
+      <aside className="form-builder-preview"><div><p className="preview-label">Preview</p><span>Updates while you edit</span></div>{createElement("safest-report", { "integration-id": "default", preview: "", ref: previewRef })}</aside>
+    </div>
+  </fieldset>;
+}

package/template/console/configuration/api.ts

@@ -0,0 +1,40 @@
+import type { ConfigurationType, JsonObject, QueueSummary } from "./types";
+
+export function configurationEndpoint(type: ConfigurationType): string {
+  if (type === "form") return "forms";
+  if (type === "policy") return "policies";
+  if (type === "template") return "templates";
+  return "routing-rules";
+}
+
+export function configurationActionPath(type: ConfigurationType, key: string, action: "draft" | "validate" | "publish"): string {
+  const root = `/v1/admin/${configurationEndpoint(type)}`;
+  return type === "routing_rules" ? `${root}/${action}` : `${root}/${encodeURIComponent(key)}/${action}`;
+}
+
+export function configurationLabel(type: ConfigurationType): string {
+  if (type === "form") return "Intake form";
+  if (type === "routing_rules") return "Routing rules";
+  if (type === "policy") return "Decision policy";
+  return "Message template";
+}
+
+export function configurationDefault(type: ConfigurationType, queues: QueueSummary[] = []): JsonObject {
+  const general = queues.find((queue) => /general/iu.test(queue.name)) || queues[0];
+  const safeguard = queues.find((queue) => /urgent|protect/iu.test(queue.name)) || general;
+  if (type === "form") return {
+    title: "Report a concern",
+    description: "Tell our safety team what happened.",
+    target_types: ["message"],
+    reasons: [{ code: "other", label: "Something else" }],
+    fields: [{ key: "details", label: "What happened?", type: "long_text", required: true, max_length: 4000 }],
+    consent_notice: "Your report will be reviewed according to the service’s safety policy.",
+  };
+  if (type === "policy") return { title: "General safety policy", rules: [{ code: "manual-review", title: "Manual review required" }] };
+  if (type === "template") return { audience: "reporter", purpose: "follow_up", locale: "en", body_template: "We need a little more information about report {{report_reference}}.", automation_allowed: false, variables_schema: { report_reference: { type: "string" } } };
+  return { rules: [], default_queue_id: general?.id || "general-triage", safeguard_queue_id: safeguard?.id || "urgent-human", intake_enrichments: [], fixtures: [] };
+}
+
+export function configurationKeySlug(value: string, fallback = "item"): string {
+  return value.toLowerCase().trim().replace(/[^a-z0-9]+/gu, "-").replace(/^-|-$/gu, "").slice(0, 64) || fallback;
+}

package/template/console/configuration/events.ts

@@ -0,0 +1,14 @@
+import type { ConfigurationType } from "./types";
+
+export const configurationEvents = {
+  openEditor: "safest:configuration:editor-open",
+  changed: "safest:configuration:changed",
+} as const;
+
+export function openConfigurationEditor(type: ConfigurationType, key = "", exists = false): void {
+  window.dispatchEvent(new CustomEvent(configurationEvents.openEditor, { detail: { type, key, exists } }));
+}
+
+export function announceConfigurationChanged(): void {
+  window.dispatchEvent(new Event(configurationEvents.changed));
+}

package/template/console/configuration/types.ts

@@ -0,0 +1,79 @@
+export type ConfigurationType = "form" | "routing_rules" | "policy" | "template";
+export type JsonPrimitive = string | number | boolean | null;
+export type JsonValue = JsonPrimitive | JsonValue[] | JsonObject;
+export interface JsonObject { [key: string]: JsonValue }
+
+export interface ConfigurationValidationIssue {
+  code: string;
+  message: string;
+  path?: string;
+}
+
+export interface ConfigurationValidation {
+  valid: boolean;
+  errors: ConfigurationValidationIssue[];
+  warnings: ConfigurationValidationIssue[];
+}
+
+export interface ConfigurationDraftSummary {
+  id: string;
+  configurationKey: string;
+  revision: number;
+  validationStatus: string;
+  lastPublishedVersionId: string | null;
+  updatedAt: string;
+}
+
+export interface ConfigurationSummary {
+  configurationKey: string;
+  latestVersion: number | null;
+  latestPublishedAt: string | null;
+  draft: ConfigurationDraftSummary | null;
+}
+
+export interface ConfigurationDraft extends ConfigurationDraftSummary {
+  content: JsonObject;
+  validation: ConfigurationValidation;
+}
+
+export interface ConfigurationVersion {
+  id: string;
+  version: number;
+  content: JsonObject;
+  published_at?: string;
+  publishedAt?: string;
+}
+
+export interface ConfigurationListResponse { configurations: ConfigurationSummary[] }
+export interface ConfigurationDetailResponse { draft: ConfigurationDraft | null; versions: ConfigurationVersion[] }
+export interface ConfigurationSaveResponse { draftId: string; revision: number; validation: ConfigurationValidation; idempotentReplay?: boolean }
+export interface ConfigurationValidationResponse { validation: ConfigurationValidation }
+export interface ConfigurationPublishResponse { versionId: string; version: number; idempotentReplay?: boolean }
+
+export type FormFieldType = "short_text" | "long_text" | "select" | "multi_select" | "boolean" | "number" | "url";
+export interface FormChoice { label: string; value: string }
+export interface FormReason { label: string; code: string }
+export interface FormField {
+  key: string;
+  label: string;
+  type: FormFieldType;
+  required: boolean;
+  help_text?: string;
+  placeholder?: string;
+  max_length?: number;
+  min_value?: number;
+  max_value?: number;
+  options?: FormChoice[];
+}
+
+export interface ReportFormContent {
+  title: string;
+  description: string;
+  target_types: string[];
+  reasons: FormReason[];
+  fields: FormField[];
+  consent_notice: string;
+}
+
+export interface QueueSummary { id: string; name: string; status: string }
+export interface QueueListResponse { queues: QueueSummary[] }

package/template/console/lib/format.ts

@@ -0,0 +1,49 @@
+const acronyms: Record<string, string> = {
+  ai: "AI",
+  api: "API",
+  csv: "CSV",
+  d1: "D1",
+  http: "HTTP",
+  https: "HTTPS",
+  id: "ID",
+  json: "JSON",
+  r2: "R2",
+  sla: "SLA",
+  url: "URL",
+};
+
+const acronymPattern = /\b(ai|api|csv|d1|http|https|id|json|r2|sla|url)\b/giu;
+
+export function readable(value: unknown): string {
+  const copy = String(value || "").replaceAll("_", " ");
+  if (!copy) return "";
+  const sentence = `${copy.charAt(0).toUpperCase()}${copy.slice(1)}`;
+  return sentence.replace(acronymPattern, (match) => acronyms[match.toLowerCase()] ?? match);
+}
+
+export function relativeTime(value: string, now = Date.now()): string {
+  const milliseconds = now - Date.parse(value);
+  if (!Number.isFinite(milliseconds)) return "Unknown";
+  const minutes = Math.max(0, Math.floor(milliseconds / 60_000));
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 48) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+export function dateTime(value: string): string {
+  const parsed = new Date(value);
+  return Number.isFinite(parsed.getTime()) ? parsed.toLocaleString() : "Unknown";
+}
+
+export function safeCustomerUrl(value: string | null | undefined): string | null {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    const local = url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "[::1]";
+    return url.protocol === "https:" || local && url.protocol === "http:" ? url.toString() : null;
+  } catch {
+    return null;
+  }
+}

package/template/console/lib/http.ts

@@ -0,0 +1,96 @@
+type ApiErrorBody = {
+  error?: {
+    code?: string;
+    message?: string;
+  };
+};
+
+export class ApiRequestError extends Error {
+  readonly body: unknown;
+  readonly code?: string;
+  readonly status: number;
+
+  constructor(message: string, status: number, code?: string, body?: unknown) {
+    super(message);
+    this.name = "ApiRequestError";
+    this.status = status;
+    this.code = code;
+    this.body = body;
+  }
+}
+
+function cookieValue(name: string): string {
+  const prefix = `${name}=`;
+  const part = document.cookie.split(";").map((value) => value.trim()).find((value) => value.startsWith(prefix));
+  return part ? part.slice(prefix.length) : "";
+}
+
+function csrfHeaders(): Record<string, string> {
+  const name = window.location.protocol === "https:" ? "__Host-safest_csrf" : "safest_csrf";
+  const token = cookieValue(name);
+  return token ? { "x-csrf-token": token } : {};
+}
+
+function authenticationHeaders(): Record<string, string> {
+  return csrfHeaders();
+}
+
+export function hasSessionCredentials(): boolean {
+  return Boolean(Object.keys(csrfHeaders()).length);
+}
+
+function notifyExpiredSession(path: string, status: number): void {
+  if (status !== 401 || (path !== "/v1/admin/session" && !path.startsWith("/v1/admin/"))) return;
+  if (!Object.keys(csrfHeaders()).length) return;
+  window.dispatchEvent(new CustomEvent("safest:auth:expired", { detail: { message: "Your session expired. Sign in again." } }));
+}
+
+export function authorizedFetch(path: string, options: RequestInit = {}): Promise<Response> {
+  return fetch(path, {
+    ...options,
+    credentials: "same-origin",
+    headers: { ...authenticationHeaders(), ...(options.headers || {}) },
+  });
+}
+
+export async function requestJson<TResponse>(path: string, options: RequestInit = {}): Promise<TResponse> {
+  const response = await authorizedFetch(path, options);
+  const value = (response.status === 204 ? {} : await response.json().catch(() => ({}))) as TResponse & ApiErrorBody;
+  if (!response.ok) {
+    notifyExpiredSession(path, response.status);
+    throw new ApiRequestError(
+      value.error?.message || `Request failed (${response.status})`,
+      response.status,
+      value.error?.code,
+      value,
+    );
+  }
+  return value;
+}
+
+export function postJson<TResponse>(path: string, body: unknown): Promise<TResponse> {
+  return requestJson<TResponse>(path, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+  });
+}
+
+export function mutationHeaders(json = true): Record<string, string> {
+  return {
+    ...(json ? { "content-type": "application/json" } : {}),
+    "idempotency-key": crypto.randomUUID(),
+  };
+}
+
+export function putBinary<TResponse>(path: string, body: Blob, contentType: string): Promise<TResponse> {
+  return requestJson<TResponse>(path, {
+    method: "PUT",
+    headers: { "content-type": contentType, ...csrfHeaders() },
+    body,
+  });
+}
+
+export function errorMessage(error: unknown, fallback: string): string {
+  return error instanceof Error && error.message ? error.message : fallback;
+}