create-safest-tools 0.2.0

package/template/console/queues/events.ts

@@ -0,0 +1,34 @@
+import type { QueuePublishInput, QueueWorkspaceSnapshot, RoutingAgentInput } from "./types";
+
+export const queueEvents = {
+  state: "safest:queues:state",
+  create: "safest:queues:create",
+  edit: "safest:queues:edit",
+  closeEditor: "safest:queues:close-editor",
+  publishQueue: "safest:queues:publish-queue",
+  publishRouting: "safest:queues:publish-routing",
+} as const;
+
+function dispatch<TDetail>(type: string, detail?: TDetail): void {
+  window.dispatchEvent(detail === undefined ? new Event(type) : new CustomEvent(type, { detail }));
+}
+
+export function dispatchCreateQueue(): void { dispatch(queueEvents.create); }
+export function dispatchEditQueue(queueId: string): void { dispatch(queueEvents.edit, { queueId }); }
+export function dispatchCloseQueueEditor(): void { dispatch(queueEvents.closeEditor); }
+export function dispatchPublishQueue(input: QueuePublishInput): void { dispatch(queueEvents.publishQueue, input); }
+export function dispatchPublishRouting(input: RoutingAgentInput): void { dispatch(queueEvents.publishRouting, input); }
+
+export function isQueueWorkspaceSnapshot(value: unknown): value is QueueWorkspaceSnapshot {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as Partial<QueueWorkspaceSnapshot>;
+  return typeof candidate.loading === "boolean"
+    && typeof candidate.error === "string"
+    && typeof candidate.routingLoading === "boolean"
+    && typeof candidate.routingError === "string"
+    && typeof candidate.routingPending === "boolean"
+    && typeof candidate.queuePending === "boolean"
+    && Array.isArray(candidate.queues)
+    && typeof candidate.canManage === "boolean"
+    && typeof candidate.editor === "object";
+}

package/template/console/queues/store.ts

@@ -0,0 +1,37 @@
+import { isQueueWorkspaceSnapshot, queueEvents } from "./events";
+import type { QueueWorkspaceSnapshot } from "./types";
+
+const subscribers = new Set<() => void>();
+
+let snapshot: QueueWorkspaceSnapshot = {
+  loading: true,
+  error: "",
+  routingLoading: true,
+  routingError: "",
+  routingPending: false,
+  queuePending: false,
+  queues: [],
+  routingAgent: null,
+  canManage: false,
+  editor: { open: false, queueId: null, error: "" },
+};
+
+window.addEventListener(queueEvents.state, (event) => {
+  if (!(event instanceof CustomEvent) || !isQueueWorkspaceSnapshot(event.detail)) return;
+  snapshot = event.detail;
+  for (const subscriber of subscribers) subscriber();
+});
+
+export function getQueueWorkspaceSnapshot(): QueueWorkspaceSnapshot {
+  return snapshot;
+}
+
+export function setQueueWorkspaceSnapshot(next: QueueWorkspaceSnapshot | ((current: QueueWorkspaceSnapshot) => QueueWorkspaceSnapshot)): void {
+  snapshot = typeof next === "function" ? next(snapshot) : next;
+  for (const subscriber of subscribers) subscriber();
+}
+
+export function subscribeToQueueWorkspace(callback: () => void): () => void {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+}

package/template/console/queues/types.ts

@@ -0,0 +1,102 @@
+export type QueueManagementMode = "human" | "ai" | "hybrid";
+export type QueueRolloutMode = "off" | "shadow" | "assist" | "autonomous";
+export type RoutingRolloutMode = "off" | "shadow" | "active";
+
+export interface QueueAiBounds {
+  allowedOutcomes: string[];
+  confidenceThreshold: number;
+  maxFollowUpTurns: number;
+  model: string;
+  policyVersionId: string;
+  allowedFields: string[];
+  allowedTemplateIds: string[];
+  dailyReportBudget: number;
+  dailyCostBudgetMicrousd: number;
+  inputCostMicrousdPerMillion: number;
+  outputCostMicrousdPerMillion: number;
+  qualitySampleRate: number;
+  maxWaitHours: number;
+  minimumShadowRuns: number;
+  minimumQualityReviews: number;
+  maximumFailureRate: number;
+  maximumDisagreementRate: number;
+}
+
+export interface QueuePolicy {
+  version: number;
+  managementMode: QueueManagementMode;
+  rolloutMode: QueueRolloutMode;
+  priority: number;
+  responseSlaMinutes: number | null;
+  resolutionSlaMinutes: number | null;
+  claimTtlMinutes: number;
+  fallbackQueueId: string | null;
+  reviewerInstructions: string;
+  aiInstructions: string | null;
+  aiBounds: QueueAiBounds | null;
+}
+
+export interface QueueRecord {
+  id: string;
+  key: string;
+  name: string;
+  description: string;
+  status: string;
+  position: number;
+  counts: { openReports: number };
+  activePolicy: QueuePolicy | null;
+}
+
+export interface RoutingAgentConfiguration {
+  version: number;
+  rolloutMode: RoutingRolloutMode;
+  model: string;
+  confidenceThreshold: number;
+  safeguardQueueId: string;
+  defaultQueueId: string;
+  instructions: string;
+  candidateQueueIds: string[];
+  allowedFields: string[];
+}
+
+export interface QueueEditorSnapshot {
+  open: boolean;
+  queueId: string | null;
+  error: string;
+}
+
+export interface QueueWorkspaceSnapshot {
+  loading: boolean;
+  error: string;
+  routingLoading: boolean;
+  routingError: string;
+  routingPending: boolean;
+  queuePending: boolean;
+  queues: QueueRecord[];
+  routingAgent: RoutingAgentConfiguration | null;
+  canManage: boolean;
+  editor: QueueEditorSnapshot;
+}
+
+export interface RoutingAgentInput {
+  rolloutMode: RoutingRolloutMode;
+  model: string;
+  confidenceThreshold: number;
+  safeguardQueueId: string;
+  defaultQueueId: string;
+  instructions: string;
+  candidateQueueIds: string[];
+  allowedFields: string[];
+}
+
+export interface QueuePolicyInput extends Omit<QueuePolicy, "version" | "aiBounds"> {
+  aiBounds: QueueAiBounds;
+}
+
+export interface QueuePublishInput {
+  queueId: string | null;
+  key: string;
+  name: string;
+  description: string;
+  policy: QueuePolicyInput;
+}

package/template/console/registry/RegistryDialog.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type FormEvent } from "react";
+import { errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { announceRegistryChanged, registryEvents } from "./events";
+import type { ConnectionListResponse, ConnectionSummary, RegistryKind } from "./types";
+
+type ComponentKind = "built_in" | "webhook_enrichment" | "api_enrichment" | "workers_ai" | "specialist_agent" | "action" | "message";
+type ImplementationKind = "built_in" | "webhook" | "external_api" | "workers_ai" | "specialist_agent" | "message_template";
+type ConnectionKind = "webhook" | "external_api" | "customer_worker" | "ai_provider" | "notification" | "email";
+type CredentialStrategy = "none" | "static_header" | "bearer" | "hmac" | "service_binding";
+
+const inputSchemaDefault = JSON.stringify({ type: "object", properties: { report: { type: "object" } } }, null, 2);
+const outputSchemaDefault = JSON.stringify({ type: "object", properties: { result: { type: "string" } } }, null, 2);
+
+function slug(value: string): string {
+  return value.toLowerCase().trim().replace(/[^a-z0-9]+/gu, "-").replace(/^-|-$/gu, "").slice(0, 100);
+}
+
+function commaValues(value: string): string[] {
+  return value.split(",").map((entry) => entry.trim()).filter(Boolean);
+}
+
+function jsonObject(value: string, label: string): Record<string, unknown> {
+  const parsed: unknown = JSON.parse(value);
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) throw new Error(`${label} must be a JSON object.`);
+  return parsed as Record<string, unknown>;
+}
+
+function defaultsForComponentKind(kind: ComponentKind): { implementation: ImplementationKind; reference: string } {
+  if (kind === "action") return { implementation: "webhook", reference: "POST /" };
+  if (kind === "webhook_enrichment") return { implementation: "webhook", reference: "POST /" };
+  if (kind === "api_enrichment") return { implementation: "external_api", reference: "POST /" };
+  if (kind === "workers_ai") return { implementation: "workers_ai", reference: "@cf/meta/llama-3.1-8b-instruct" };
+  if (kind === "specialist_agent") return { implementation: "specialist_agent", reference: "custom-specialist-v1" };
+  if (kind === "message") return { implementation: "message_template", reference: "report-update-v1" };
+  return { implementation: "built_in", reference: "custom-enrichment-v1" };
+}
+
+export function RegistryDialog() {
+  const shell = useSyncExternalStore(subscribeToShell, getShellSnapshot, getShellSnapshot);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const [kind, setKind] = useState<RegistryKind | null>(null);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+  const [name, setName] = useState("");
+  const [key, setKey] = useState("");
+  const [keyEdited, setKeyEdited] = useState(false);
+  const [description, setDescription] = useState("");
+  const [componentKind, setComponentKind] = useState<ComponentKind>("built_in");
+  const [owner, setOwner] = useState<"customer" | "safest">("customer");
+  const [implementation, setImplementation] = useState<ImplementationKind>("built_in");
+  const [reference, setReference] = useState("custom-enrichment-v1");
+  const [connectionVersionId, setConnectionVersionId] = useState("");
+  const [risk, setRisk] = useState("low");
+  const [inputFields, setInputFields] = useState("report.id,report.reason_code");
+  const [classifications, setClassifications] = useState("report_operational");
+  const [inputSchema, setInputSchema] = useState(inputSchemaDefault);
+  const [outputSchema, setOutputSchema] = useState(outputSchemaDefault);
+  const [connections, setConnections] = useState<ConnectionSummary[]>([]);
+  const [connectionKind, setConnectionKind] = useState<ConnectionKind>("webhook");
+  const [targetMode, setTargetMode] = useState<"url" | "service">("url");
+  const [baseUrl, setBaseUrl] = useState("");
+  const [serviceBinding, setServiceBinding] = useState("");
+  const [methods, setMethods] = useState("POST");
+  const [paths, setPaths] = useState("/");
+  const [credential, setCredential] = useState<CredentialStrategy>("none");
+  const [secretReference, setSecretReference] = useState("");
+
+  const reset = (): void => {
+    setName(""); setKey(""); setKeyEdited(false); setDescription(""); setComponentKind("built_in"); setOwner("customer");
+    setImplementation("built_in"); setReference("custom-enrichment-v1"); setConnectionVersionId(""); setRisk("low");
+    setInputFields("report.id,report.reason_code"); setClassifications("report_operational"); setInputSchema(inputSchemaDefault); setOutputSchema(outputSchemaDefault);
+    setConnectionKind("webhook"); setTargetMode("url"); setBaseUrl(""); setServiceBinding(""); setMethods("POST"); setPaths("/"); setCredential("none"); setSecretReference(""); setError("");
+  };
+  const close = (): void => { if (!pending) { setKind(null); reset(); } };
+
+  useEffect(() => {
+    const open = (event: Event): void => {
+      if (!(event instanceof CustomEvent) || (event.detail?.kind !== "component" && event.detail?.kind !== "connection")) return;
+      const requested = event.detail.kind as RegistryKind;
+      const allowed = requested === "component" ? shell.session?.permissions.publishComponents === true : shell.session?.permissions.publishConnections === true;
+      if (!allowed) return;
+      reset(); setKind(requested);
+    };
+    window.addEventListener(registryEvents.openEditor, open);
+    return () => window.removeEventListener(registryEvents.openEditor, open);
+  }, [shell.session?.permissions.publishComponents, shell.session?.permissions.publishConnections]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (kind && !dialog.open) { dialog.showModal(); requestAnimationFrame(() => nameRef.current?.focus()); }
+    if (!kind && dialog.open) dialog.close();
+  }, [kind]);
+  useEffect(() => {
+    if (kind !== "component" || shell.session?.permissions.manageConnections !== true) return;
+    let active = true;
+    void requestJson<ConnectionListResponse>("/v1/admin/connections").then((response) => {
+      if (active) setConnections((response.connections || []).filter((connection) => connection.status === "active" && Boolean(connection.activeVersionId)));
+    }).catch(() => { if (active) setConnections([]); });
+    return () => { active = false; };
+  }, [kind, shell.session?.permissions.manageConnections]);
+
+  const isAction = componentKind === "action";
+  const needsConnection = implementation === "webhook" || implementation === "external_api";
+  const needsSecret = credential !== "none" && credential !== "service_binding";
+  const title = kind === "connection" ? "Create connection" : "Create component";
+  const subtitle = kind === "connection" ? "Allow one destination and refer to credentials by Worker secret binding." : "Define its authority and immutable runtime contract.";
+  const authority = isAction ? "Side-effecting action" : "Read-only enrichment";
+  const authorityDetail = isAction ? "This component can change customer data. Workflows must provide explicit approval." : "This component may add findings but cannot change customer data.";
+  const activeConnections = useMemo(() => connections.filter((connection) => connection.activeVersionId), [connections]);
+
+  const changeComponentKind = (next: ComponentKind): void => {
+    setComponentKind(next);
+    const defaults = defaultsForComponentKind(next);
+    setImplementation(defaults.implementation); setReference(defaults.reference); setRisk(next === "action" ? "high" : "low");
+  };
+  const changeTargetMode = (next: "url" | "service"): void => {
+    setTargetMode(next);
+    if (next === "service") { setBaseUrl(""); setCredential("service_binding"); setSecretReference(""); }
+    else { setServiceBinding(""); if (credential === "service_binding") setCredential("none"); }
+  };
+
+  const submit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault();
+    if (!kind) return;
+    setPending(true); setError("");
+    try {
+      if (kind === "connection") {
+        await requestJson("/v1/admin/connections", {
+          method: "POST", headers: mutationHeaders(), body: JSON.stringify({
+            key, name, description, kind: connectionKind,
+            version: {
+              base_url: targetMode === "url" ? baseUrl : null,
+              service_binding_name: targetMode === "service" ? serviceBinding : null,
+              allowed_methods: commaValues(methods), allowed_path_prefixes: commaValues(paths),
+              credential_strategy: credential, secret_reference: needsSecret ? secretReference : null,
+            },
+          }),
+        });
+      } else {
+        const parsedInput = jsonObject(inputSchema, "Input schema");
+        const parsedOutput = jsonObject(outputSchema, "Output schema");
+        await requestJson("/v1/admin/components", {
+          method: "POST", headers: mutationHeaders(), body: JSON.stringify({
+            key, name, description, kind: componentKind, effect_class: isAction ? "side_effecting" : "read_only", owner_kind: owner,
+            version: {
+              implementation_kind: implementation, implementation_reference: reference,
+              input_schema: parsedInput, output_schema: parsedOutput,
+              allowed_input_fields: commaValues(inputFields), data_classifications: commaValues(classifications),
+              connection_version_id: needsConnection ? connectionVersionId : null, risk_class: risk,
+              timeout_policy: { timeout_ms: 5000 }, retry_policy: { maximum_attempts: isAction ? 5 : 3, backoff: "exponential" },
+              cache_policy: { enabled: !isAction }, concurrency_policy: { maximum_concurrency: 8 }, budget_policy: {},
+              approval_policy: isAction ? { mode: "human" } : {}, tool_manifest: [],
+              compatibility: { fixture_evidence: { fixtures: [{ name: "Contract example", input: { report: {} }, expected_output: { result: "ok" }, expected_status: "succeeded", mode: "simulated" }] } },
+            },
+          }),
+        });
+      }
+      setPending(false); setKind(null); reset(); announceRegistryChanged();
+    } catch (cause) { setError(errorMessage(cause, `The ${kind} could not be created.`)); setPending(false); }
+  };
+
+  return <dialog ref={dialogRef} className="editor-dialog registry-dialog" aria-labelledby="registry-dialog-title" onCancel={(event) => { event.preventDefault(); close(); }} data-react-slice="registry-dialog">
+    <div className="detail-head"><div><h2 id="registry-dialog-title">{title}</h2><p>{subtitle}</p></div><button className="icon-button" type="button" aria-label="Close" disabled={pending} onClick={close}>×</button></div>
+    <form className="editor-form registry-form" onSubmit={(event) => void submit(event)}>
+      <div className="form-grid">
+        <label>Name<input ref={nameRef} maxLength={160} required disabled={pending} value={name} onChange={(event) => { const value = event.currentTarget.value; setName(value); if (!keyEdited) setKey(slug(value)); }} /></label>
+        <label>Key<input maxLength={100} pattern="[a-z0-9]+(?:-[a-z0-9]+)*" required disabled={pending} value={key} onChange={(event) => { setKeyEdited(true); setKey(event.currentTarget.value); }} /></label>
+        {kind === "component" ? <><label>Type<select disabled={pending} value={componentKind} onChange={(event) => changeComponentKind(event.currentTarget.value as ComponentKind)}><option value="built_in">Built-in enrichment</option><option value="webhook_enrichment">Webhook enrichment</option><option value="api_enrichment">API enrichment</option><option value="workers_ai">Workers AI</option><option value="specialist_agent">Specialist agent</option><option value="action">Action</option><option value="message">Message</option></select></label><label>Owner<select disabled={pending} value={owner} onChange={(event) => setOwner(event.currentTarget.value as "customer" | "safest")}><option value="customer">Customer</option><option value="safest">Safest built-in</option></select></label></> : <><label>Type<select disabled={pending} value={connectionKind} onChange={(event) => setConnectionKind(event.currentTarget.value as ConnectionKind)}><option value="webhook">Webhook</option><option value="external_api">External API</option><option value="customer_worker">Customer Worker</option><option value="ai_provider">AI provider</option><option value="notification">Notification</option><option value="email">Email</option></select></label><label>Destination<select disabled={pending} value={targetMode} onChange={(event) => changeTargetMode(event.currentTarget.value as "url" | "service")}><option value="url">HTTPS endpoint</option><option value="service">Worker service binding</option></select></label></>}
+        <label className="wide-field">Description<textarea maxLength={2000} disabled={pending} value={description} onChange={(event) => setDescription(event.currentTarget.value)} /></label>
+      </div>
+      {kind === "component" ? <>
+        <div className="safety-boundary"><strong>{authority}</strong><span>{authorityDetail}</span></div>
+        <div className="form-grid">
+          <label>Implementation<select disabled={pending} value={implementation} onChange={(event) => setImplementation(event.currentTarget.value as ImplementationKind)}><option value="built_in">Built-in</option><option value="workers_ai">Workers AI</option><option value="specialist_agent">Specialist agent</option><option value="webhook">Webhook</option><option value="external_api">External API</option><option value="message_template">Message template</option></select></label>
+          <label>Implementation reference<input required disabled={pending} value={reference} onChange={(event) => setReference(event.currentTarget.value)} /></label>
+          {needsConnection ? <label>Connection<select required disabled={pending} value={connectionVersionId} onChange={(event) => setConnectionVersionId(event.currentTarget.value)}><option value="">Select a published connection</option>{activeConnections.map((connection) => <option value={connection.activeVersionId || ""} key={connection.id}>{connection.name} · v{connection.version || 1}</option>)}</select></label> : null}
+          <label>Risk class<select disabled={pending} value={risk} onChange={(event) => setRisk(event.currentTarget.value)}><option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option><option value="critical">Critical</option></select></label>
+          <label>Allowed input fields<input required disabled={pending} value={inputFields} onChange={(event) => setInputFields(event.currentTarget.value)} /></label>
+          <label>Data classifications<input required disabled={pending} value={classifications} onChange={(event) => setClassifications(event.currentTarget.value)} /></label>
+          <label className="wide-field">Input schema<textarea className="code-input" spellCheck={false} required disabled={pending} value={inputSchema} onChange={(event) => setInputSchema(event.currentTarget.value)} /></label>
+          <label className="wide-field">Output schema<textarea className="code-input" spellCheck={false} required disabled={pending} value={outputSchema} onChange={(event) => setOutputSchema(event.currentTarget.value)} /></label>
+        </div>
+      </> : kind === "connection" ? <>
+        <div className="safety-boundary"><strong>Outbound access stays allowlisted.</strong><span>Enter a public HTTPS origin or a Worker service binding. Store credential values only in Worker secrets.</span></div>
+        <div className="form-grid">
+          {targetMode === "url" ? <label>HTTPS origin<input type="url" placeholder="https://api.example.com" required disabled={pending} value={baseUrl} onChange={(event) => setBaseUrl(event.currentTarget.value)} /></label> : <label>Service binding<input placeholder="CUSTOMER_API" required disabled={pending} value={serviceBinding} onChange={(event) => setServiceBinding(event.currentTarget.value)} /></label>}
+          <label>Allowed methods<input required disabled={pending} value={methods} onChange={(event) => setMethods(event.currentTarget.value)} /></label>
+          <label>Allowed paths<input required disabled={pending} value={paths} onChange={(event) => setPaths(event.currentTarget.value)} /></label>
+          <label>Credential strategy<select disabled={pending || targetMode === "service"} value={credential} onChange={(event) => { setCredential(event.currentTarget.value as CredentialStrategy); setSecretReference(""); }}><option value="none">None</option><option value="bearer">Bearer token</option><option value="hmac">HMAC signing</option><option value="static_header">Static header</option><option value="service_binding">Service binding</option></select></label>
+          {needsSecret ? <label className="wide-field">Worker secret binding <small>Enter the binding name, never the credential value.</small><input pattern="(?:CONNECTION|OAUTH|ACTION|NOTIFICATION|EMAIL|AI)_[A-Z0-9_]{2,96}" placeholder="CONNECTION_CUSTOMER_API" required disabled={pending} value={secretReference} onChange={(event) => setSecretReference(event.currentTarget.value)} /></label> : null}
+        </div>
+      </> : null}
+      <div className="editor-footer"><p className="error" role="alert">{error}</p><div><button className="secondary" type="button" disabled={pending} onClick={close}>Cancel</button><button className="primary" type="submit" disabled={pending}>{pending ? "Creating…" : `Create ${kind || "item"}`}</button></div></div>
+    </form>
+  </dialog>;
+}

package/template/console/registry/RegistryWorkspace.tsx

@@ -0,0 +1,108 @@
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { PageHeader } from "../components/PageHeader";
+import { readable } from "../lib/format";
+import { ApiRequestError, errorMessage, requestJson } from "../lib/http";
+import { getShellSnapshot, subscribeToShell } from "../shell/store";
+import { openRegistryEditor, registryEvents } from "./events";
+import type { ComponentListResponse, ComponentSummary, ConnectionListResponse, ConnectionSummary, RegistryKind, RegistryValidationResponse } from "./types";
+
+function validationMessage(cause: unknown, name: string): string {
+  if (cause instanceof ApiRequestError && cause.status === 422 && cause.body && typeof cause.body === "object") {
+    const response = cause.body as RegistryValidationResponse;
+    const issues = response.validation?.errors?.map((issue) => issue.message).filter(Boolean) || [];
+    if (issues.length) return `${name} needs changes: ${issues.join(" ")}`;
+  }
+  return errorMessage(cause, `${name} could not be checked.`);
+}
+
+function RegistryCard({ item, kind, checking, onCheck }: {
+  item: ComponentSummary | ConnectionSummary;
+  kind: RegistryKind;
+  checking: boolean;
+  onCheck: () => void;
+}) {
+  const connection = kind === "connection" ? item as ConnectionSummary : null;
+  const component = kind === "component" ? item as ComponentSummary : null;
+  const iconClass = connection ? "connection" : component?.effectClass === "side_effecting" ? "action" : ["workers_ai", "specialist_agent"].includes(component?.kind || "") ? "agent" : "";
+  const icon = connection ? "↗" : component?.effectClass === "side_effecting" ? "⚡" : component?.kind === "specialist_agent" ? "✦" : "⬡";
+  const meta = connection
+    ? [["Type", readable(connection.kind)], ["Version", connection.version ? `v${connection.version}` : "—"], ["Health", readable(connection.healthState || "unknown")]]
+    : [["Capability", component?.effectClass === "side_effecting" ? "Action" : "Enrichment"], ["Version", component?.version ? `v${component.version}` : "—"], ["Used by", `${component?.dependencyCount || 0} workflows`]];
+  const footer = connection ? connection.baseUrl || connection.serviceBindingName || "No endpoint" : readable(component?.implementationKind || component?.kind || "Not configured");
+  return <article className="object-card registry-card">
+    <div className="object-card-head"><span className={`object-icon ${iconClass}`} aria-hidden="true">{icon}</span><span className={`badge${item.status !== "active" ? " urgent" : ""}`}>{readable(item.status || "active")}</span></div>
+    <h3>{item.name}</h3><p>{item.description || "No description yet."}</p>
+    <div className="object-card-meta">{meta.map(([label, value]) => <div key={label}><span>{label}</span><strong>{value}</strong></div>)}</div>
+    <div className="object-card-footer"><small>{footer}</small><button className="secondary" type="button" disabled={checking} onClick={onCheck}>{checking ? "Checking…" : "Check"}</button></div>
+  </article>;
+}
+
+export function RegistryWorkspace() {
+  const shell = useSyncExternalStore(subscribeToShell, getShellSnapshot, getShellSnapshot);
+  const canManage = shell.session?.permissions.manageComponents === true;
+  const canManageConnections = shell.session?.permissions.manageConnections === true;
+  const canPublishComponents = shell.session?.permissions.publishComponents === true;
+  const canPublishConnections = shell.session?.permissions.publishConnections === true;
+  const [components, setComponents] = useState<ComponentSummary[]>([]);
+  const [connections, setConnections] = useState<ConnectionSummary[]>([]);
+  const [tab, setTab] = useState<"library" | "connections">("library");
+  const [search, setSearch] = useState("");
+  const [effect, setEffect] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [checking, setChecking] = useState("");
+  const [error, setError] = useState("");
+  const [notice, setNotice] = useState("");
+
+  const load = useCallback(async (refresh = false): Promise<void> => {
+    if (!canManage) { setComponents([]); setConnections([]); return; }
+    if (refresh) setRefreshing(true); else setLoading(true);
+    setError("");
+    try {
+      const [componentResult, connectionResult] = await Promise.all([
+        requestJson<ComponentListResponse>("/v1/admin/components"),
+        canManageConnections ? requestJson<ConnectionListResponse>("/v1/admin/connections") : Promise.resolve({ connections: [] }),
+      ]);
+      setComponents(componentResult.components || []);
+      setConnections(connectionResult.connections || []);
+    } catch (cause) { setError(errorMessage(cause, "The component library could not be loaded.")); }
+    finally { setLoading(false); setRefreshing(false); }
+  }, [canManage, canManageConnections]);
+
+  useEffect(() => { if (shell.currentView === "components") void load(); }, [shell.currentView, shell.session?.actor.id, load]);
+  useEffect(() => {
+    const changed = (): void => { if (shell.currentView === "components") void load(true); };
+    window.addEventListener(registryEvents.changed, changed);
+    return () => window.removeEventListener(registryEvents.changed, changed);
+  }, [shell.currentView, load]);
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    return components.filter((component) => (!effect || component.effectClass === effect) && (!term || `${component.name} ${component.description} ${component.kind}`.toLowerCase().includes(term)));
+  }, [components, effect, search]);
+
+  const check = async (item: ComponentSummary | ConnectionSummary, kind: RegistryKind): Promise<void> => {
+    setChecking(`${kind}:${item.id}`); setError(""); setNotice("");
+    try {
+      const result = await requestJson<RegistryValidationResponse>(`/v1/admin/${kind === "connection" ? "connections" : "components"}/${encodeURIComponent(item.id)}/validate`, { method: "POST" });
+      setNotice(result.validation.valid ? `${item.name} is valid and ready.` : `${item.name} needs changes.`);
+    } catch (cause) { setError(validationMessage(cause, item.name)); }
+    finally { setChecking(""); }
+  };
+
+  const items = tab === "library" ? filtered : connections;
+  const canCreate = tab === "library" ? canPublishComponents : canPublishConnections;
+  return <div className="page-stack" data-react-slice="registry-workspace">
+    <PageHeader titleId="components-title" title="Components" description="Create reusable checks, messages, and actions for workflows.">
+      <div className="surface-buttons">
+        <button className="secondary" type="button" disabled={loading || refreshing} onClick={() => void load(true)}>{refreshing ? "Refreshing…" : "Refresh"}</button>
+        {canPublishConnections ? <button className="secondary" type="button" onClick={() => openRegistryEditor("connection")}>New connection</button> : null}
+        {canPublishComponents ? <button className="primary" type="button" onClick={() => openRegistryEditor("component")}>New component</button> : null}
+      </div>
+    </PageHeader>
+    <div className="segmented-tabs" role="tablist" aria-label="Component library views"><button className={tab === "library" ? "active" : ""} type="button" role="tab" aria-selected={tab === "library"} onClick={() => setTab("library")}>Library</button><button className={tab === "connections" ? "active" : ""} type="button" role="tab" aria-selected={tab === "connections"} onClick={() => setTab("connections")}>Connections</button></div>
+    {tab === "library" ? <div className="component-filters"><label className="search-field"><span aria-hidden="true">⌕</span><input type="search" placeholder="Search components" aria-label="Search components" value={search} onChange={(event) => setSearch(event.currentTarget.value)} /></label><label>Capability<select value={effect} onChange={(event) => setEffect(event.currentTarget.value)}><option value="">All capabilities</option><option value="read_only">Enrichments</option><option value="side_effecting">Actions</option></select></label></div> : null}
+    <div className="object-grid registry-list" aria-busy={loading || refreshing}>{loading ? <><div className="skeleton-card" /><div className="skeleton-card" /></> : items.length ? items.map((item) => <RegistryCard item={item} kind={tab === "library" ? "component" : "connection"} checking={checking === `${tab === "library" ? "component" : "connection"}:${item.id}`} onCheck={() => void check(item, tab === "library" ? "component" : "connection")} key={item.id} />) : error ? null : <div className="empty-product"><span aria-hidden="true">{tab === "library" ? "⬡" : "↗"}</span><h2>{tab === "library" ? components.length ? "No components match" : "No components yet" : "No connections yet"}</h2><p>{tab === "library" ? components.length ? "Change the search or capability filter." : "Create a reusable check, message, or action." : "Add an endpoint when a component needs an external service."}</p>{canCreate ? <button className="primary" type="button" onClick={() => openRegistryEditor(tab === "library" ? "component" : "connection")}>{tab === "library" ? "New component" : "New connection"}</button> : null}</div>}</div>
+    <p className="form-message" role="status">{notice}</p><p className="error surface-error" role="alert">{error}</p>
+  </div>;
+}

package/template/console/registry/events.ts

@@ -0,0 +1,14 @@
+import type { RegistryKind } from "./types";
+
+export const registryEvents = {
+  openEditor: "safest:registry:editor-open",
+  changed: "safest:registry:changed",
+} as const;
+
+export function openRegistryEditor(kind: RegistryKind): void {
+  window.dispatchEvent(new CustomEvent(registryEvents.openEditor, { detail: { kind } }));
+}
+
+export function announceRegistryChanged(): void {
+  window.dispatchEvent(new Event(registryEvents.changed));
+}

package/template/console/registry/types.ts

@@ -0,0 +1,52 @@
+export type RegistryKind = "component" | "connection";
+export type ComponentEffect = "read_only" | "side_effecting";
+
+export interface ComponentSummary {
+  id: string;
+  key: string;
+  name: string;
+  description: string;
+  kind: string;
+  effectClass: ComponentEffect;
+  ownerKind: "safest" | "customer";
+  status: string;
+  activeVersionId: string | null;
+  version: number | null;
+  implementationKind: string | null;
+  riskClass: string | null;
+  connectionVersionId: string | null;
+  dependencyCount: number;
+}
+
+export interface ConnectionSummary {
+  id: string;
+  key: string;
+  name: string;
+  description: string;
+  kind: string;
+  status: string;
+  activeVersionId: string | null;
+  version: number | null;
+  baseUrl: string | null;
+  serviceBindingName: string | null;
+  credentialStrategy: string | null;
+  healthState: string | null;
+  dependencyCount: number;
+}
+
+export interface ComponentListResponse { components: ComponentSummary[] }
+export interface ConnectionListResponse { connections: ConnectionSummary[] }
+
+export interface RegistryValidationIssue {
+  code?: string;
+  message: string;
+  path?: string;
+}
+
+export interface RegistryValidation {
+  valid: boolean;
+  errors?: RegistryValidationIssue[];
+  warnings?: RegistryValidationIssue[];
+}
+
+export interface RegistryValidationResponse { validation: RegistryValidation }