create-safest-tools 0.5.2 → 0.6.0

package/template/console/registry/RegistryWorkspace.tsx

@@ -1,39 +1,52 @@
 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 { 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";
+import { RegistryDetailsDialog } from "./RegistryDetailsDialog";
+import type { ComponentListResponse, ComponentSummary, ConnectionListResponse, ConnectionSummary, RegistryKind } 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.`);
+type RegistryItem = ComponentSummary | ConnectionSummary;
+type ToolFilter = "" | "enrichment" | "action" | "ai" | "message";
+
+function toolCategory(component: ComponentSummary): ToolFilter {
+  if (component.effectClass === "side_effecting") return "action";
+  if (["workers_ai", "specialist_agent"].includes(component.kind)) return "ai";
+  if (component.kind === "message") return "message";
+  return "enrichment";
+}
+
+function categoryLabel(component: ComponentSummary): string {
+  const category = toolCategory(component);
+  if (category === "action") return "Action";
+  if (category === "ai") return "AI analysis";
+  if (category === "message") return "Message";
+  return "Enrichment";
 }
 
-function RegistryCard({ item, kind, checking, onCheck }: {
-  item: ComponentSummary | ConnectionSummary;
-  kind: RegistryKind;
-  checking: boolean;
-  onCheck: () => void;
-}) {
+function lifecycleLabel(status: string): string {
+  if (status === "paused") return "Paused";
+  if (status === "deprecated") return "Retiring";
+  if (status === "archived") return "Archived";
+  return "Available";
+}
+
+function RegistryRow({ item, kind, onOpen }: { item: RegistryItem; kind: RegistryKind; onOpen: () => 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>
+  const category = component ? toolCategory(component) : "";
+  const iconClass = connection ? "connection" : category === "action" ? "action" : category === "ai" ? "agent" : "";
+  const icon = connection ? "↗" : category === "action" ? "⚡" : category === "ai" ? "✦" : category === "message" ? "✉" : "＋";
+  const status = lifecycleLabel(item.status || "active");
+  const statusClass = item.status === "active" ? "available" : item.status === "archived" ? "archived" : "paused";
+  const destination = connection?.baseUrl || connection?.serviceBindingName || "Destination not configured";
+  return <article className="registry-resource-row">
+    <span className={`object-icon ${iconClass}`} aria-hidden="true">{icon}</span>
+    <div className="registry-resource-main"><div className="registry-resource-title"><h3>{item.name}</h3>{component?.ownerKind === "safest" ? <span className="registry-owner-badge">Safest built-in</span> : null}</div><p>{item.description || "No description yet."}</p><div className="registry-resource-tags"><span>{component ? categoryLabel(component) : readable(connection?.kind || "Connection")}</span><span>v{item.version || 1}</span>{component ? <span>{component.effectClass === "side_effecting" ? "Approval required" : "Read-only"}</span> : <span>{readable(connection?.credentialStrategy || "No authentication")}</span>}</div></div>
+    <div className="registry-resource-relationship"><span>{component ? "Used by" : "Used by tools"}</span><strong>{item.dependencyCount || 0}</strong><small>{component ? `${item.dependencyCount === 1 ? "workflow" : "workflows"}` : `${item.dependencyCount === 1 ? "tool version" : "tool versions"}`}</small></div>
+    <div className="registry-resource-state"><span className={`registry-status ${statusClass}`}><i aria-hidden="true" />{status}</span>{connection ? <small title={destination}>{destination}</small> : <small>{readable(component?.implementationKind || component?.kind || "Not configured")}</small>}</div>
+    <button className="secondary" type="button" onClick={onOpen}>View details</button>
   </article>;
 }
 
@@ -45,12 +58,13 @@ export function RegistryWorkspace() {
   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 [tab, setTab] = useState<"tools" | "connections">("tools");
   const [search, setSearch] = useState("");
-  const [effect, setEffect] = useState("");
+  const [filter, setFilter] = useState<ToolFilter>("");
+  const [includeArchived, setIncludeArchived] = useState(false);
+  const [selected, setSelected] = useState<{ item: RegistryItem; kind: RegistryKind } | null>(null);
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
-  const [checking, setChecking] = useState("");
   const [error, setError] = useState("");
   const [notice, setNotice] = useState("");
 
@@ -58,16 +72,17 @@ export function RegistryWorkspace() {
     if (!canManage) { setComponents([]); setConnections([]); return; }
     if (refresh) setRefreshing(true); else setLoading(true);
     setError("");
+    const query = includeArchived ? "?include_archived=true" : "";
     try {
       const [componentResult, connectionResult] = await Promise.all([
-        requestJson<ComponentListResponse>("/v1/admin/components"),
-        canManageConnections ? requestJson<ConnectionListResponse>("/v1/admin/connections") : Promise.resolve({ connections: [] }),
+        requestJson<ComponentListResponse>(`/v1/admin/components${query}`),
+        canManageConnections ? requestJson<ConnectionListResponse>(`/v1/admin/connections${query}`) : Promise.resolve({ connections: [] }),
       ]);
       setComponents(componentResult.components || []);
       setConnections(connectionResult.connections || []);
-    } catch (cause) { setError(errorMessage(cause, "The component library could not be loaded.")); }
+    } catch (cause) { setError(errorMessage(cause, "Tools and connections could not be loaded.")); }
     finally { setLoading(false); setRefreshing(false); }
-  }, [canManage, canManageConnections]);
+  }, [canManage, canManageConnections, includeArchived]);
 
   useEffect(() => { if (shell.currentView === "components") void load(); }, [shell.currentView, shell.session?.actor.id, load]);
   useEffect(() => {
@@ -76,33 +91,38 @@ export function RegistryWorkspace() {
     return () => window.removeEventListener(registryEvents.changed, changed);
   }, [shell.currentView, load]);
 
-  const filtered = useMemo(() => {
+  const filteredComponents = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    return components.filter((component) => (!filter || toolCategory(component) === filter) && (!term || `${component.name} ${component.description} ${component.kind} ${component.implementationKind}`.toLowerCase().includes(term)));
+  }, [components, filter, search]);
+  const filteredConnections = 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]);
+    return connections.filter((connection) => !term || `${connection.name} ${connection.description} ${connection.kind} ${connection.baseUrl} ${connection.serviceBindingName}`.toLowerCase().includes(term));
+  }, [connections, search]);
+  const items = tab === "tools" ? filteredComponents : filteredConnections;
+  const currentKind: RegistryKind = tab === "tools" ? "component" : "connection";
+  const canCreate = tab === "tools" ? canPublishComponents : canPublishConnections;
 
-  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 changed = (message: string): void => {
+    setNotice(message);
+    window.dispatchEvent(new Event(registryEvents.changed));
   };
 
-  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>
+  return <div className="page-stack registry-workspace" data-react-slice="registry-workspace">
+    <PageHeader titleId="components-title" title="Tools & connections" description="Control what workflows can do, which data they can use, and where requests may go.">
+      <div className="surface-buttons"><button className="secondary" type="button" disabled={loading || refreshing} onClick={() => void load(true)}>{refreshing ? "Refreshing…" : "Refresh"}</button>{canCreate ? <button className="primary" type="button" onClick={() => openRegistryEditor(currentKind)}>{tab === "tools" ? "Create tool" : "Add connection"}</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>
+
+    <section className="registry-model" aria-label="How workflows, tools, and connections work together">
+      <div><span>1</span><strong>Workflow</strong><small>Chooses when work runs</small></div><b aria-hidden="true">→</b><div><span>2</span><strong>Tool</strong><small>Reads context or takes an action</small></div><b aria-hidden="true">→</b><div><span>3</span><strong>Connection</strong><small>Secures access to a service</small></div><b aria-hidden="true">→</b><div><span>4</span><strong>Your service</strong><small>Returns data or applies a change</small></div>
+    </section>
+
+    <div className="registry-tabs-row"><div className="segmented-tabs" role="tablist" aria-label="Tools and connections"><button className={tab === "tools" ? "active" : ""} type="button" role="tab" aria-selected={tab === "tools"} onClick={() => { setTab("tools"); setSearch(""); }}>Tools <span>{components.filter((item) => item.status !== "archived").length}</span></button><button className={tab === "connections" ? "active" : ""} type="button" role="tab" aria-selected={tab === "connections"} onClick={() => { setTab("connections"); setSearch(""); }}>Connections <span>{connections.filter((item) => item.status !== "archived").length}</span></button></div><p>{tab === "tools" ? "Reusable capabilities placed in workflows. Enrichments are read-only; actions require approval." : "Reusable, allowlisted routes to APIs and Workers. Credential values stay in Worker secrets."}</p></div>
+
+    {(tab === "tools" ? components.length : connections.length) ? <div className="registry-toolbar"><label className="search-field"><span aria-hidden="true">⌕</span><input type="search" placeholder={`Search ${tab}`} aria-label={`Search ${tab}`} value={search} onChange={(event) => setSearch(event.currentTarget.value)} /></label>{tab === "tools" ? <div className="registry-filter-chips" role="group" aria-label="Filter tools by purpose">{[["", "All"], ["enrichment", "Enrichments"], ["action", "Actions"], ["ai", "AI analysis"], ["message", "Messages"]].map(([value, label]) => <button className={filter === value ? "active" : ""} type="button" aria-pressed={filter === value} onClick={() => setFilter(value as ToolFilter)} key={value}>{label}</button>)}</div> : null}<label className="registry-archived-toggle"><input type="checkbox" checked={includeArchived} onChange={(event) => setIncludeArchived(event.currentTarget.checked)} />Show archived</label></div> : null}
+
+    <div className="registry-resource-list" aria-busy={loading || refreshing}>{loading ? <><div className="skeleton-card" /><div className="skeleton-card" /></> : items.length ? items.map((item) => <RegistryRow item={item} kind={currentKind} onOpen={() => setSelected({ item, kind: currentKind })} key={item.id} />) : error ? null : <div className="empty-product"><span aria-hidden="true">{tab === "tools" ? "＋" : "↗"}</span><h2>{search || filter ? `No ${tab} match` : tab === "tools" ? "Create your first tool" : "Add your first connection"}</h2><p>{search || filter ? "Change or clear your search and filters." : tab === "tools" ? "Start with an enrichment to add context, an action to change customer data, AI analysis, or a reusable message." : "Connect an HTTPS API or customer Worker, then choose it when creating a tool."}</p>{canCreate && !search && !filter ? <button className="primary" type="button" onClick={() => openRegistryEditor(currentKind)}>{tab === "tools" ? "Create tool" : "Add connection"}</button> : null}</div>}</div>
     <p className="form-message" role="status">{notice}</p><p className="error surface-error" role="alert">{error}</p>
+    <RegistryDetailsDialog item={selected?.item || null} kind={selected?.kind || currentKind} canManage={selected?.kind === "connection" ? canManageConnections : canManage} onClose={() => setSelected(null)} onChanged={changed} />
   </div>;
 }

package/template/console/registry/types.ts

@@ -45,8 +45,30 @@ export interface RegistryValidationIssue {
 
 export interface RegistryValidation {
   valid: boolean;
-  errors?: RegistryValidationIssue[];
+  errors?: Array<RegistryValidationIssue | string>;
   warnings?: RegistryValidationIssue[];
+  [key: string]: unknown;
 }
 
 export interface RegistryValidationResponse { validation: RegistryValidation }
+
+export interface RegistryDetailResponse {
+  component?: {
+    definition: Record<string, unknown>;
+    versions: Array<Record<string, unknown>>;
+    fixtures: Array<Record<string, unknown>>;
+    testRuns: Array<Record<string, unknown>>;
+  };
+  connection?: {
+    definition: Record<string, unknown>;
+    versions: Array<Record<string, unknown>>;
+  };
+}
+
+export interface RegistryDependenciesResponse {
+  dependencies: {
+    workflows?: Array<Record<string, unknown>>;
+    components?: Array<Record<string, unknown>>;
+    modelAliases?: Array<Record<string, unknown>>;
+  };
+}

package/template/console/reports/ReportDrawer.tsx

@@ -95,15 +95,6 @@ function timelineTitle(event: TimelineEvent): string {
   return readable(event.eventType || "Case activity");
 }
 
-function timelineMarker(eventType: string): string {
-  if (eventType === "finding") return "⬡";
-  if (eventType === "workflow_run") return "⌘";
-  if (eventType === "decision") return "✓";
-  if (eventType === "message") return "↗";
-  if (eventType === "action") return "!";
-  return "•";
-}
-
 const decisionOptions = [
   { value: "violation_confirmed", label: "Violation confirmed" },
   { value: "no_violation_found", label: "No violation found" },
@@ -216,7 +207,7 @@ function DetailContent({ report, actorId, generatedAt, actionCodes, claimReports
         </div></section>
       </div>
 
-      {workflowRuns.length || timeline.length ? <section className="case-activity-section"><div className="case-activity-heading"><div><h3>Case activity</h3><p>A clear record of reporter communication, review, and decisions.</p></div><span>{caseTimeline.length} event{caseTimeline.length === 1 ? "" : "s"}</span></div><div className="report-timeline">{caseTimeline.map((item, index) => <article className="timeline-event" key={item.id ?? `${item.eventType}-${item.createdAt}-${index}`}><span className={`timeline-marker ${item.eventType || "event"}`}>{timelineMarker(item.eventType)}</span><div><strong>{timelineTitle(item)}</strong><span>{timelineDetail(item)}</span><small>{dateTime(item.createdAt)} · {relativeTime(item.createdAt)} · {readable(item.actorType || "system")}</small></div></article>)}</div>{workflowRuns.length || technicalTimeline.length ? <details className="workflow-technical"><summary>Technical workflow details <span>{workflowRuns.length} workflow run{workflowRuns.length === 1 ? "" : "s"}</span></summary><div className="report-run-list">{workflowRuns.map((run) => <article className="report-run-record" key={run.id}><div><strong>{run.workflowName || run.workflowKey || `Workflow ${String(run.workflowVersionId || run.id).slice(0, 12)}`}</strong><small>{readable(run.runKind || "primary")} · {readable(run.authorityMode || "assist")} · immutable version {run.workflowVersion || String(run.workflowVersionId || "").slice(0, 12)}</small></div><span className={`badge${["failed", "repair_required"].includes(run.state) ? " urgent" : ""}`}>{readable(run.state)}</span></article>)}</div>{technicalTimeline.length ? <p className="technical-event-count">{technicalTimeline.length} low-level execution event{technicalTimeline.length === 1 ? "" : "s"} recorded in the audit trail.</p> : null}</details> : null}</section> : null}
+      {workflowRuns.length || timeline.length ? <section className="case-activity-section"><div className="case-activity-heading"><div><h3>Case activity</h3><p>A clear record of reporter communication, review, and decisions.</p></div><span>{caseTimeline.length} event{caseTimeline.length === 1 ? "" : "s"}</span></div><div className="report-timeline">{caseTimeline.map((item, index) => <article className="timeline-event" key={item.id ?? `${item.eventType}-${item.createdAt}-${index}`}><span className={`timeline-marker ${item.eventType || "event"}`} aria-hidden="true" /><div><strong>{timelineTitle(item)}</strong><span>{timelineDetail(item)}</span><small>{dateTime(item.createdAt)} · {relativeTime(item.createdAt)} · {readable(item.actorType || "system")}</small></div></article>)}</div>{workflowRuns.length || technicalTimeline.length ? <details className="workflow-technical"><summary>Technical workflow details <span>{workflowRuns.length} workflow run{workflowRuns.length === 1 ? "" : "s"}</span></summary><div className="report-run-list">{workflowRuns.map((run) => <article className="report-run-record" key={run.id}><div><strong>{run.workflowName || run.workflowKey || `Workflow ${String(run.workflowVersionId || run.id).slice(0, 12)}`}</strong><small>{readable(run.runKind || "primary")} · {readable(run.authorityMode || "assist")} · immutable version {run.workflowVersion || String(run.workflowVersionId || "").slice(0, 12)}</small></div><span className={`badge${["failed", "repair_required"].includes(run.state) ? " urgent" : ""}`}>{readable(run.state)}</span></article>)}</div>{technicalTimeline.length ? <p className="technical-event-count">{technicalTimeline.length} low-level execution event{technicalTimeline.length === 1 ? "" : "s"} recorded in the audit trail.</p> : null}</details> : null}</section> : null}
 
       <section><h3>Case messages</h3><div className="message-list">{messages.length ? messages.map((item, index) => <article className={`case-message ${item.direction}`} key={item.id ?? `${item.createdAt}-${index}`}><div>{item.body}</div><small>{readable(item.senderType)} · {dateTime(item.createdAt)} · {deliveryLabel(item.deliveryState)}{deliveryExplanation(item.deliveryState) ? ` — ${deliveryExplanation(item.deliveryState)}` : ""}</small></article>) : <EmptyLine>No case messages yet.</EmptyLine>}</div></section>
 

package/template/console/shell/navigation.ts

@@ -31,7 +31,7 @@ export const navigationGroups: NavigationGroup[] = [
     label: "Build",
     items: [
       { view: "workflows", label: "Workflows", icon: "i-workflow", visible: permission("manageWorkflows") },
-      { view: "components", label: "Components", icon: "i-component", visible: permission("manageComponents") },
+      { view: "components", label: "Tools & connections", icon: "i-component", visible: permission("manageComponents") },
       { view: "configuration", label: "Configuration", icon: "i-settings", visible: permission("manageConfiguration") },
     ],
   },

package/template/package.json

@@ -1,7 +1,7 @@
 {
   "name": "safest-resolve-installation",
-  "version": "0.5.2",
-  "safestToolsVersion": "0.5.2-resolve",
+  "version": "0.6.0",
+  "safestToolsVersion": "0.6.0-resolve",
   "private": true,
   "license": "Apache-2.0",
   "type": "module",