create-safest-tools 0.2.0

package/template/console/reports/types.ts

@@ -0,0 +1,230 @@
+import type { AnalystIdentityData } from "../components/AnalystIdentity";
+
+export type ReportPriorityFilter = "" | "high" | "medium" | "low";
+export type ReportAgeFilter = "" | "hour" | "day" | "older";
+export type ReportSort = "oldest" | "newest" | "priority";
+
+export interface ReportFilters {
+  search: string;
+  queueId: string;
+  priority: ReportPriorityFilter;
+  age: ReportAgeFilter;
+  state: string;
+  sort: ReportSort;
+}
+
+export interface ReportQueueOption {
+  id: string;
+  name: string;
+}
+
+export interface ReportOwner extends AnalystIdentityData {
+  reviewerId: string;
+  mine: boolean;
+}
+
+export interface ReportSummary {
+  id: string;
+  reference: string;
+  queueId: string;
+  targetType: string;
+  targetReference: string;
+  reasonCode: string;
+  queueName: string;
+  state: string;
+  priority: number;
+  receivedAt: string;
+  owner: ReportOwner | null;
+}
+
+export interface PresenceAnalyst extends AnalystIdentityData {
+  actorId: string;
+  activity: string;
+  activeReportId: string | null;
+  activityLabel: string;
+}
+
+export interface EvidenceReference {
+  reference: string;
+  kind: string;
+  availability: string;
+}
+
+export interface CaseMessage {
+  id?: string;
+  direction: string;
+  body: string;
+  senderType: string;
+  createdAt: string;
+  deliveryState: string;
+}
+
+export interface WorkflowRunRecord {
+  id: string;
+  workflowName?: string;
+  workflowKey?: string;
+  workflowVersionId?: string;
+  workflowVersion?: string | number;
+  runKind?: string;
+  authorityMode?: string;
+  state: string;
+}
+
+export interface TimelineEvent {
+  id?: string;
+  eventType: string;
+  code: string;
+  actorType?: string;
+  createdAt: string;
+  details?: Record<string, unknown>;
+}
+
+export interface FindingRecord {
+  id?: string;
+  findingType: string;
+  summary: string;
+  componentVersionId?: string;
+  expiresAt?: string;
+  freshness?: string;
+  status?: string;
+  data?: unknown;
+}
+
+export interface DecisionRecord {
+  id?: string;
+  decisionCode: string;
+  policyCode?: string;
+  rationale?: string;
+  makerType: string;
+  createdAt: string;
+  evidenceReferences?: string[];
+}
+
+export interface DeliveryAction {
+  id?: string;
+  actionCode: string;
+  status: string;
+  attemptCount: number;
+  errorCode?: string;
+}
+
+export interface DeliveryNotice {
+  id?: string;
+  audience: string;
+  deliveryState: string;
+  updatedAt: string;
+}
+
+export interface WorkflowActionRecord {
+  id?: string;
+  recordKind: string;
+  actionCode: string;
+  state: string;
+  authorityMode?: string;
+  attemptCount?: number;
+  errorCode?: string;
+}
+
+export interface AiRunRecord {
+  id?: string;
+  mode: string;
+  status: string;
+  model: string;
+  promptVersion: string;
+  configVersionId: string;
+  summary?: string;
+  errorCode?: string;
+  outcome?: string;
+  policyCode?: string;
+  estimatedCostMicrousd?: number;
+  uncertain?: boolean;
+}
+
+export interface PolicyRule {
+  code: string;
+  title?: string;
+}
+
+export interface ReportClaim {
+  reviewerId: string;
+  expiresAt: string;
+  analyst?: AnalystIdentityData;
+}
+
+export interface ReportDetailRecord {
+  id: string;
+  reference: string;
+  state: string;
+  queueId?: string;
+  reasonCode: string;
+  targetType: string;
+  targetReference: string;
+  customerUrl?: string;
+  ownerReference?: string;
+  reporterReference?: string;
+  policyTitle?: string;
+  policyVersionId?: string;
+  queuePolicyVersionId?: string;
+  reviewerInstructions?: string;
+  receivedAt: string;
+  policyRules?: PolicyRule[];
+  evidence?: EvidenceReference[];
+  messages?: CaseMessage[];
+  workflowRuns?: WorkflowRunRecord[];
+  timeline?: TimelineEvent[];
+  findings?: FindingRecord[];
+  decisions?: DecisionRecord[];
+  actions?: DeliveryAction[];
+  notices?: DeliveryNotice[];
+  workflowActions?: WorkflowActionRecord[];
+  aiRuns?: AiRunRecord[];
+  claim?: ReportClaim | null;
+}
+
+export type ReportPendingAction = "claim" | "release" | "message" | "decision" | null;
+
+export interface ReportDetailSnapshot {
+  reportId: string | null;
+  loading: boolean;
+  error: string;
+  pendingAction: ReportPendingAction;
+  messageMutationVersion: number;
+  report: ReportDetailRecord | null;
+}
+
+export interface ReportPermissions {
+  claimReports: boolean;
+  messageReporters: boolean;
+  decideReports: boolean;
+  readRuns: boolean;
+}
+
+export interface ReportWorkspaceSnapshot {
+  loading: boolean;
+  refreshing: boolean;
+  error: string;
+  generatedAt: string;
+  actorId: string;
+  filters: ReportFilters;
+  queues: ReportQueueOption[];
+  reports: ReportSummary[];
+  presence: PresenceAnalyst[];
+  actionCodes: string[];
+  permissions: ReportPermissions;
+  detail: ReportDetailSnapshot;
+}
+
+export interface ReporterMessageInput {
+  body: string;
+  awaitReporter: boolean;
+}
+
+export interface HumanDecisionInput {
+  decisionCode: string;
+  policyCode: string;
+  rationale: string;
+  evidenceReferences: string[];
+  reporterNotice: string;
+  affectedUserNotice: string;
+  actionCode: string;
+}

package/template/console/settings/BrandEditor.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useMemo, useState, type CSSProperties, type FormEvent } from "react";
+import { errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import type { WorkspaceBrand } from "../shell/types";
+import type { BrandResponse } from "./types";
+
+const fallbackBrand: WorkspaceBrand = {
+  organization_name: "Safest Resolve",
+  logo_url: "",
+  logo_alt: "",
+  primary_color: "#154e3a",
+  primary_contrast_color: "#ffffff",
+  accent_color: "#cbef68",
+  background_color: "#f5f6f1",
+  surface_color: "#ffffff",
+  text_color: "#14231c",
+  muted_color: "#637168",
+  border_color: "#dfe6e0",
+  body_font_family: '"Safest Sans", Manrope, ui-sans-serif, system-ui, sans-serif',
+  heading_font_family: '"Safest Serif", Newsreader, Georgia, serif',
+  font_css_url: "",
+  border_radius: 12,
+};
+
+function completeBrand(brand: WorkspaceBrand | null, displayName: string): WorkspaceBrand {
+  return {
+    ...fallbackBrand,
+    ...(window.SafestBrand?.defaults ?? {}),
+    ...(brand ?? {}),
+    organization_name: brand?.organization_name || displayName || "Safest Resolve",
+  };
+}
+
+function initials(value: string): string {
+  return value.split(/\s+/u).filter(Boolean).slice(0, 2).map((part) => part[0] ?? "").join("").toUpperCase() || "YO";
+}
+
+export function BrandEditor({ brand, displayName, loading, onSaved }: {
+  brand: WorkspaceBrand | null;
+  displayName: string;
+  loading: boolean;
+  onSaved: (brand: WorkspaceBrand) => void;
+}) {
+  const resolved = useMemo(() => completeBrand(brand, displayName), [brand, displayName]);
+  const [draft, setDraft] = useState<WorkspaceBrand>(resolved);
+  const [saving, setSaving] = useState(false);
+  const [savedMessage, setSavedMessage] = useState("");
+  const [error, setError] = useState("");
+
+  useEffect(() => { setDraft(resolved); setSavedMessage(""); setError(""); }, [resolved]);
+
+  const dirty = JSON.stringify(draft) !== JSON.stringify(resolved);
+  const update = <Key extends keyof WorkspaceBrand>(key: Key, value: WorkspaceBrand[Key]): void => {
+    setDraft((current) => ({ ...current, [key]: value }));
+    setSavedMessage("");
+  };
+
+  const save = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault();
+    setSaving(true);
+    setError("");
+    setSavedMessage("");
+    try {
+      const result = await requestJson<BrandResponse>("/v1/admin/brand", {
+        method: "PATCH",
+        headers: mutationHeaders(),
+        body: JSON.stringify({ brand: draft }),
+      });
+      setDraft(result.brand);
+      onSaved(result.brand);
+      window.SafestBrand?.applyBrand(result.brand, { title: "Settings" });
+      setSavedMessage("Branding saved across the workspace.");
+    } catch (cause) {
+      setError(errorMessage(cause, "Branding could not be saved."));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const previewStyle = {
+    "--preview-primary": draft.primary_color,
+    "--preview-primary-text": draft.primary_contrast_color,
+    "--preview-bg": draft.background_color,
+    "--preview-surface": draft.surface_color,
+    "--preview-text": draft.text_color,
+    "--preview-muted": draft.muted_color,
+    "--preview-line": draft.border_color,
+    "--preview-radius": `${draft.border_radius}px`,
+    "--preview-body": draft.body_font_family || "system-ui",
+    "--preview-heading": draft.heading_font_family || "Georgia",
+  } as CSSProperties;
+  const logoStyle = draft.logo_url
+    ? ({ backgroundImage: `url("${draft.logo_url.replaceAll('"', "%22")}")` } as CSSProperties)
+    : undefined;
+
+  return (
+    <section className="surface settings-card settings-wide brand-settings-card" aria-labelledby="branding-title">
+      <div className="surface-head">
+        <div><h2 id="branding-title">Branding</h2><p>Your logo and colours appear in the widget, report form, emails, and console.</p></div>
+        <span className={`badge${dirty ? " urgent" : ""}`}>{loading ? "Loading" : dirty ? "Unsaved changes" : "Saved"}</span>
+      </div>
+      {loading ? <div className="settings-card-loading"><div className="skeleton-block" /></div> : (
+        <form className="brand-form" onSubmit={(event) => void save(event)}>
+          <div className="brand-controls">
+            <label>Organisation name<input maxLength={120} required value={draft.organization_name} onChange={(event) => update("organization_name", event.currentTarget.value)} /></label>
+            <label>Logo URL<input type="url" maxLength={2048} placeholder="https://cdn.example.com/logo.svg" value={draft.logo_url} onChange={(event) => update("logo_url", event.currentTarget.value)} /></label>
+            <label>Logo alt text<input maxLength={160} placeholder="Example Company logo" value={draft.logo_alt} onChange={(event) => update("logo_alt", event.currentTarget.value)} /></label>
+            <label>Primary colour<input type="color" value={draft.primary_color} onChange={(event) => update("primary_color", event.currentTarget.value)} /></label>
+            <label>Text on primary<input type="color" value={draft.primary_contrast_color} onChange={(event) => update("primary_contrast_color", event.currentTarget.value)} /></label>
+            <label>Accent colour<input type="color" value={draft.accent_color} onChange={(event) => update("accent_color", event.currentTarget.value)} /></label>
+            <label>Page background<input type="color" value={draft.background_color} onChange={(event) => update("background_color", event.currentTarget.value)} /></label>
+            <label>Surface colour<input type="color" value={draft.surface_color} onChange={(event) => update("surface_color", event.currentTarget.value)} /></label>
+            <label>Text colour<input type="color" value={draft.text_color} onChange={(event) => update("text_color", event.currentTarget.value)} /></label>
+            <label>Muted text<input type="color" value={draft.muted_color} onChange={(event) => update("muted_color", event.currentTarget.value)} /></label>
+            <label>Border colour<input type="color" value={draft.border_color} onChange={(event) => update("border_color", event.currentTarget.value)} /></label>
+            <label>Corner roundness<input type="range" min={0} max={32} step={1} value={draft.border_radius} onChange={(event) => update("border_radius", Number(event.currentTarget.value))} /><output>{draft.border_radius}px</output></label>
+            <label>Body font family<input maxLength={180} placeholder="Inter, system-ui, sans-serif" value={draft.body_font_family} onChange={(event) => update("body_font_family", event.currentTarget.value)} /></label>
+            <label>Heading font family<input maxLength={180} placeholder="Georgia, serif" value={draft.heading_font_family} onChange={(event) => update("heading_font_family", event.currentTarget.value)} /></label>
+            <label className="wide-field">Web font stylesheet <small>Optional. Use an HTTPS stylesheet from your font provider.</small><input type="url" maxLength={2048} placeholder="https://fonts.example.com/brand.css" value={draft.font_css_url} onChange={(event) => update("font_css_url", event.currentTarget.value)} /></label>
+          </div>
+          <div className="brand-preview"><p className="preview-label">Preview</p><div className="brand-preview-card" style={previewStyle}><span className={`brand-preview-logo${draft.logo_url ? " has-image" : ""}`} style={logoStyle}>{initials(draft.organization_name)}</span><div><h3>{draft.organization_name || "Your organisation"}</h3><p>Report a safety concern</p><button type="button">Submit report</button></div></div></div>
+          <div className="editor-footer"><div className="settings-form-feedback"><p className="form-message" role="status">{savedMessage}</p><p className="error" role="alert">{error}</p></div><button className="primary" type="submit" disabled={!dirty || saving}>{saving ? "Saving…" : "Save branding"}</button></div>
+        </form>
+      )}
+    </section>
+  );
+}

package/template/console/settings/ChannelDialog.tsx

@@ -0,0 +1,241 @@
+import { createElement, useEffect, useRef, useState, type FormEvent } from "react";
+import { errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { useSyncExternalStore } from "react";
+import { dispatchChannelsChanged, settingsEvents } from "./events";
+import { widgetHandoff } from "./handoff";
+import type {
+  ChannelMode,
+  ContextField,
+  ContextFieldSensitivity,
+  ContextFieldType,
+  ContextSchema,
+  HostedChannelResponse,
+  PublishedForm,
+  PublishedFormsResponse,
+  WidgetChannelResponse,
+} from "./types";
+
+type ChannelResult =
+  | { kind: "hosted"; url: string }
+  | {
+    kind: "widget";
+    mode: "contextual" | "anonymous";
+    apiKey: string;
+    handoff: string;
+    publicBaseUrl: string;
+    integrationId: string;
+    formVersion: string;
+  };
+
+function newContextField(): ContextField {
+  return { id: crypto.randomUUID(), key: "", label: "", type: "string", sensitivity: "standard", required: false, rule_eligible: true };
+}
+
+function integrationKey(name: string): string {
+  const base = name.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/gu, "-").replace(/^-+|-+$/gu, "").slice(0, 60) || "channel";
+  return `${base}-${crypto.randomUUID().slice(0, 6)}`;
+}
+
+async function copyText(value: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(value);
+  } catch {
+    const input = document.createElement("textarea");
+    input.value = value;
+    input.style.position = "fixed";
+    input.style.opacity = "0";
+    document.body.append(input);
+    input.select();
+    document.execCommand("copy");
+    input.remove();
+  }
+}
+
+function contextSchema(fields: ContextField[]): ContextSchema {
+  const clean = fields.map((field) => ({
+    key: field.key.trim(),
+    label: field.label.trim(),
+    type: field.type,
+    sensitivity: field.sensitivity,
+    required: field.required,
+    rule_eligible: field.rule_eligible,
+  }));
+  if (clean.some((field) => !/^[A-Za-z][A-Za-z0-9_-]{0,63}$/u.test(field.key) || !field.label)) {
+    throw new Error("Each trusted field needs a simple key and a clear label.");
+  }
+  if (new Set(clean.map((field) => field.key)).size !== clean.length) throw new Error("Trusted field keys must be unique.");
+  return { version: 1, allow_unknown: false, fields: clean };
+}
+
+export function ChannelDialog() {
+  const shell = useSyncExternalStore(subscribeToShell, getShellSnapshot, getShellSnapshot);
+  const canManageIntegrations = shell.session?.permissions.manageIntegrations === true;
+  const canReadForms = shell.session?.permissions.manageConfiguration === true;
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const formSelectRef = useRef<HTMLSelectElement>(null);
+  const [forms, setForms] = useState<PublishedForm[]>([]);
+  const [formsLoading, setFormsLoading] = useState(false);
+  const [mode, setMode] = useState<ChannelMode>("hosted");
+  const [formVersion, setFormVersion] = useState("");
+  const [name, setName] = useState("");
+  const [origin, setOrigin] = useState("");
+  const [fields, setFields] = useState<ContextField[]>([]);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  const [result, setResult] = useState<ChannelResult | null>(null);
+  const [revealKey, setRevealKey] = useState(false);
+  const [copied, setCopied] = useState("");
+
+  const clearSensitiveState = (): void => {
+    setResult(null);
+    setRevealKey(false);
+    setCopied("");
+  };
+
+  useEffect(() => {
+    const open = (): void => {
+      if (!canManageIntegrations) return;
+      setMode("hosted");
+      setFormVersion("");
+      setName("");
+      setOrigin("");
+      setFields([]);
+      setError("");
+      clearSensitiveState();
+      setForms([]);
+      const dialog = dialogRef.current;
+      if (dialog && !dialog.open) dialog.showModal();
+      if (!canReadForms) {
+        setError("You also need configuration access to choose a published report form.");
+        return;
+      }
+      setFormsLoading(true);
+      void requestJson<PublishedFormsResponse>("/v1/admin/forms/published")
+        .then((response) => {
+          const published = Array.isArray(response.forms) ? response.forms : [];
+          setForms(published);
+          setFormVersion(published[0]?.id ?? "");
+        })
+        .catch((cause) => setError(errorMessage(cause, "Published forms could not be loaded.")))
+        .finally(() => setFormsLoading(false));
+    };
+    window.addEventListener(settingsEvents.openChannel, open);
+    return () => window.removeEventListener(settingsEvents.openChannel, open);
+  }, [canManageIntegrations, canReadForms]);
+
+  useEffect(() => {
+    if (formsLoading || !forms.length || !dialogRef.current?.open) return;
+    const frame = window.requestAnimationFrame(() => formSelectRef.current?.focus());
+    return () => window.cancelAnimationFrame(frame);
+  }, [formsLoading, forms.length]);
+
+  const close = (): void => { if (!pending) dialogRef.current?.close(); };
+  const changeField = (id: string, update: Partial<ContextField>): void => {
+    setFields((current) => current.map((field) => field.id === id ? { ...field, ...update } : field));
+  };
+  const copy = async (value: string, key: string): Promise<void> => {
+    await copyText(value);
+    setCopied(key);
+    window.setTimeout(() => setCopied((current) => current === key ? "" : current), 1_500);
+  };
+
+  const create = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault();
+    setError("");
+    if (!formVersion) { setError("Publish an intake form before adding a reporting channel."); return; }
+    setPending(true);
+    try {
+      if (mode === "hosted") {
+        const response = await requestJson<HostedChannelResponse>("/v1/admin/reporting-channels", {
+          method: "POST",
+          headers: mutationHeaders(),
+          body: JSON.stringify({ mode: "hosted", form_version_id: formVersion }),
+        });
+        setResult({ kind: "hosted", url: response.channel.url });
+      } else {
+        let website: URL;
+        try { website = new URL(origin); }
+        catch { throw new Error("Enter the complete website address, including https://."); }
+        const local = ["localhost", "127.0.0.1", "[::1]"].includes(website.hostname);
+        if ((website.protocol !== "https:" && !(local && website.protocol === "http:")) || website.username || website.password) {
+          throw new Error("Use an HTTPS website origin. Localhost may use HTTP for development.");
+        }
+        const schema = mode === "contextual" ? contextSchema(fields) : { version: 1, allow_unknown: false, fields: [] } satisfies ContextSchema;
+        const response = await requestJson<WidgetChannelResponse>("/v1/admin/integrations", {
+          method: "POST",
+          headers: mutationHeaders(),
+          body: JSON.stringify({
+            integration_key: integrationKey(name),
+            name,
+            allowed_origins: [website.origin],
+            scopes: mode === "contextual" ? ["submit_reports", "mint_context_tokens"] : ["submit_reports"],
+            channel_mode: mode,
+            form_version_id: formVersion,
+            context_schema: schema,
+          }),
+        });
+        setResult({
+          kind: "widget",
+          mode,
+          apiKey: response.apiKey ?? "",
+          handoff: widgetHandoff(response, website.origin, formVersion, mode, schema),
+          publicBaseUrl: response.publicBaseUrl || window.location.origin,
+          integrationId: response.integrationId,
+          formVersion,
+        });
+      }
+      dispatchChannelsChanged();
+    } catch (cause) {
+      setError(errorMessage(cause, "The reporting channel could not be created."));
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const widgetResult = result?.kind === "widget" ? result : null;
+
+  return (
+    <dialog ref={dialogRef} className="editor-dialog integration-dialog" onCancel={(event) => { if (pending) event.preventDefault(); }} onClose={clearSensitiveState} data-react-slice="channel-dialog">
+      <div className="detail-head"><div><h2>Add reporting channel</h2><p>Choose how people will open and submit the report form.</p></div><button className="icon-button" type="button" aria-label="Close" disabled={pending} onClick={close}>×</button></div>
+      <form className="integration-wizard" onSubmit={(event) => void create(event)}>
+        {!result ? <div className="integration-setup-step">
+          <label>Published report form<select ref={formSelectRef} required disabled={formsLoading || !forms.length} value={formVersion} onChange={(event) => setFormVersion(event.currentTarget.value)}>{formsLoading ? <option value="">Loading forms…</option> : forms.length ? forms.map((form) => <option key={form.id} value={form.id}>{form.title} · v{form.version}</option>) : <option value="">Publish an intake form first</option>}</select></label>
+          <fieldset><legend>Where will people report?</legend>
+            <label className="channel-choice"><input type="radio" name="channel-mode" value="hosted" checked={mode === "hosted"} onChange={() => setMode("hosted")} /><span><strong>Hosted report form</strong><small>Share a link. Reporters enter their email so you can reply, but their identity is not verified.</small></span></label>
+            <label className="channel-choice"><input type="radio" name="channel-mode" value="contextual" checked={mode === "contextual"} onChange={() => setMode("contextual")} /><span><strong>Signed-in product widget</strong><small>Your backend verifies the reporter, the item being reported, and any trusted facts.</small></span></label>
+            <label className="channel-choice"><input type="radio" name="channel-mode" value="anonymous" checked={mode === "anonymous"} onChange={() => setMode("anonymous")} /><span><strong>Anonymous product widget</strong><small>No backend setup. Reporters provide an email for replies; page context remains unverified.</small></span></label>
+          </fieldset>
+          {mode !== "hosted" ? <>
+            <label>Channel name<input maxLength={120} minLength={2} required placeholder="Customer web app" value={name} onChange={(event) => setName(event.currentTarget.value)} /></label>
+            <label>Website origin <small>Only this exact website may display the widget.</small><input type="url" required placeholder="https://app.example.com" value={origin} onChange={(event) => setOrigin(event.currentTarget.value)} /></label>
+          </> : null}
+          {mode === "contextual" ? <fieldset>
+            <legend>Trusted context your backend may send</legend>
+            <p className="field-help">Optional. Register only facts that reviewers or rules need. Reporter identity and the report target are handled separately.</p>
+            <div className="context-field-list">{fields.map((field) => <div className="context-field-row" key={field.id}>
+              <input className="context-field-key" aria-label="Field key" maxLength={64} placeholder="account_age_days" value={field.key} onChange={(event) => changeField(field.id, { key: event.currentTarget.value })} />
+              <input className="context-field-label" aria-label="Field label" maxLength={120} placeholder="Account age in days" value={field.label} onChange={(event) => changeField(field.id, { label: event.currentTarget.value })} />
+              <select aria-label="Field type" value={field.type} onChange={(event) => changeField(field.id, { type: event.currentTarget.value as ContextFieldType })}><option value="string">Text</option><option value="number">Number</option><option value="boolean">Yes / no</option></select>
+              <select aria-label="Field sensitivity" value={field.sensitivity} onChange={(event) => changeField(field.id, { sensitivity: event.currentTarget.value as ContextFieldSensitivity })}><option value="standard">Standard</option><option value="sensitive">Sensitive</option></select>
+              <label className="context-field-check"><input type="checkbox" checked={field.required} onChange={(event) => changeField(field.id, { required: event.currentTarget.checked })} />Required</label>
+              <label className="context-field-check"><input type="checkbox" checked={field.rule_eligible} onChange={(event) => changeField(field.id, { rule_eligible: event.currentTarget.checked })} />May be used in rules</label>
+              <button className="icon-button context-field-remove" type="button" aria-label="Remove trusted field" onClick={() => setFields((current) => current.filter((candidate) => candidate.id !== field.id))}>×</button>
+            </div>)}</div>
+            <button className="secondary compact-button" type="button" onClick={() => setFields((current) => [...current, newContextField()])}>Add trusted field</button>
+          </fieldset> : null}
+          <div className="editor-footer"><p className="error" role="alert">{error}</p><button className="primary" type="submit" disabled={pending || formsLoading || !forms.length}>{pending ? "Creating…" : "Create channel"}</button></div>
+        </div> : <div className="integration-result">
+          <div className="success-heading"><span>✓</span><div><h3>{result.kind === "hosted" ? "Hosted report form ready" : result.mode === "contextual" ? "Signed-in widget ready" : "Anonymous widget ready"}</h3><p>{result.kind === "hosted" ? "Share this link or add it to your website navigation. No code or API key is required." : result.mode === "contextual" ? "Your developer embeds one component and adds a small backend endpoint for verified identity and trusted context." : "The widget is ready without a backend secret. Reporter identity and page-supplied context remain unverified."}</p></div></div>
+          {result.kind === "hosted" ? <div className="channel-result-block"><label>Hosted report link<div className="copy-control"><input readOnly value={result.url} /><button className="secondary" type="button" onClick={() => void copy(result.url, "url")}>{copied === "url" ? "Copied" : "Copy link"}</button></div></label><a className="primary link-button" href={result.url} target="_blank" rel="noopener">Open report form</a></div> : null}
+          {widgetResult ? <div className="channel-result-block">
+            {widgetResult.mode === "contextual" ? <div className="secret-callout"><strong>One-time backend key</strong><p>Store this in your backend secret manager now. It must never be placed in the page or sent to a browser.</p><div className="copy-control"><input type={revealKey ? "text" : "password"} readOnly value={widgetResult.apiKey} aria-label="One-time backend key" /><button className="secondary" type="button" onClick={() => setRevealKey((value) => !value)}>{revealKey ? "Hide" : "Show"}</button><button className="secondary" type="button" onClick={() => void copy(widgetResult.apiKey, "key")}>{copied === "key" ? "Copied" : "Copy"}</button></div></div> : null}
+            <label>Developer handoff<div className="copy-control"><textarea readOnly value={widgetResult.handoff} /><button className="secondary" type="button" onClick={() => void copy(widgetResult.handoff, "handoff")}>{copied === "handoff" ? "Copied" : "Copy handoff"}</button></div></label>
+            <details><summary>Preview generated widget</summary><div className="integration-widget-preview">{createElement("safest-report", { preview: "", "api-base": widgetResult.publicBaseUrl, "integration-id": widgetResult.integrationId, "form-version": widgetResult.formVersion })}</div></details>
+          </div> : null}
+          <div className="editor-footer"><span /><button className="primary" type="button" onClick={close}>Done</button></div>
+        </div>}
+      </form>
+    </dialog>
+  );
+}