create-safest-tools 0.2.0

package/template/console/shell/navigation.ts

@@ -0,0 +1,61 @@
+import type { ConsoleSession, WorkspaceView } from "./types";
+
+export interface NavigationItem {
+  view: WorkspaceView;
+  label: string;
+  icon: string;
+  visible: (session: ConsoleSession) => boolean;
+  count?: "reports";
+}
+
+export interface NavigationGroup {
+  label: string;
+  items: NavigationItem[];
+}
+
+const always = (): boolean => true;
+const permission = (name: string) => (session: ConsoleSession): boolean => session.permissions[name] === true;
+const anyPermission = (...names: string[]) => (session: ConsoleSession): boolean => names.some((name) => session.permissions[name] === true);
+
+export const navigationGroups: NavigationGroup[] = [
+  {
+    label: "Work",
+    items: [
+      { view: "command", label: "Command centre", icon: "i-home", visible: always },
+      { view: "reports", label: "Reports", icon: "i-inbox", visible: always, count: "reports" },
+      { view: "queues", label: "Queues and policies", icon: "i-queue", visible: permission("readReports") },
+      { view: "appeals", label: "Appeals", icon: "i-appeal", visible: permission("reviewAppeals") },
+    ],
+  },
+  {
+    label: "Build",
+    items: [
+      { view: "workflows", label: "Workflows", icon: "i-workflow", visible: permission("manageWorkflows") },
+      { view: "components", label: "Components", icon: "i-component", visible: permission("manageComponents") },
+      { view: "configuration", label: "Configuration", icon: "i-settings", visible: permission("manageConfiguration") },
+    ],
+  },
+  {
+    label: "Observe",
+    items: [
+      { view: "assistant", label: "Ask Safest", icon: "i-spark", visible: permission("useAssistant") },
+      { view: "ai-quality", label: "AI quality", icon: "i-quality", visible: permission("decideReports") },
+      { view: "operations", label: "Operations", icon: "i-activity", visible: permission("readOperations") },
+      { view: "analytics", label: "Reports and outcomes", icon: "i-chart", visible: permission("readAnalytics") },
+    ],
+  },
+  {
+    label: "Admin",
+    items: [
+      { view: "settings", label: "Settings", icon: "i-settings", visible: anyPermission("manageInstallation", "manageConfiguration", "manageIntegrations") },
+      { view: "people", label: "People and roles", icon: "i-people", visible: permission("managePeople") },
+      { view: "profile", label: "My profile", icon: "i-user", visible: (session) => session.actor.type === "operator_user" },
+    ],
+  },
+];
+
+export function visibleNavigationGroups(session: ConsoleSession): NavigationGroup[] {
+  return navigationGroups
+    .map((group) => ({ ...group, items: group.items.filter((item) => item.visible(session)) }))
+    .filter((group) => group.items.length > 0);
+}

package/template/console/shell/store.ts

@@ -0,0 +1,56 @@
+import { isShellSnapshot, shellEvents } from "./events";
+import { profileEvents } from "../profile/events";
+import type { ShellSnapshot } from "./types";
+
+const subscribers = new Set<() => void>();
+
+let snapshot: ShellSnapshot = {
+  session: null,
+  currentView: "command",
+  reportCount: 0,
+  health: { status: "checking", label: "Checking storage" },
+};
+
+window.addEventListener(shellEvents.state, (event) => {
+  if (!(event instanceof CustomEvent) || !isShellSnapshot(event.detail)) return;
+  snapshot = { ...event.detail, reportCount: snapshot.reportCount };
+  for (const subscriber of subscribers) subscriber();
+});
+
+window.addEventListener(profileEvents.updated, (event) => {
+  if (!(event instanceof CustomEvent) || !event.detail?.profile || !snapshot.session) return;
+  const profile = event.detail.profile;
+  if (profile.actor?.type !== "operator_user" || profile.actor.id !== snapshot.session.actor.id) return;
+  snapshot = {
+    ...snapshot,
+    session: {
+      ...snapshot.session,
+      ...profile,
+      avatarUrl: profile.avatarUrl ?? undefined,
+      profile: {
+        ...(snapshot.session.profile ?? {}),
+        actorId: profile.actor.id,
+        displayName: profile.displayName,
+        email: profile.email ?? null,
+        avatarUrl: profile.avatarUrl ?? null,
+        avatarColor: snapshot.session.profile?.avatarColor ?? "#315d4d",
+        roles: profile.roles,
+      },
+    },
+  };
+  for (const subscriber of subscribers) subscriber();
+});
+
+export function getShellSnapshot(): ShellSnapshot {
+  return snapshot;
+}
+
+export function setShellSnapshot(next: ShellSnapshot | ((current: ShellSnapshot) => ShellSnapshot)): void {
+  snapshot = typeof next === "function" ? next(snapshot) : next;
+  for (const subscriber of subscribers) subscriber();
+}
+
+export function subscribeToShell(callback: () => void): () => void {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+}

package/template/console/shell/types.ts

@@ -0,0 +1,86 @@
+export type WorkspaceView =
+  | "command"
+  | "reports"
+  | "queues"
+  | "appeals"
+  | "workflows"
+  | "components"
+  | "configuration"
+  | "assistant"
+  | "ai-quality"
+  | "operations"
+  | "analytics"
+  | "settings"
+  | "people"
+  | "profile";
+
+export type ShellHealthStatus = "checking" | "ready" | "failed";
+
+export interface ConsoleAnalystProfile {
+  actorId: string;
+  displayName: string;
+  email: string | null;
+  avatarUrl: string | null;
+  avatarColor: string;
+  roles: string[];
+}
+
+export interface ConsoleSession {
+  actor: {
+    type: "operator_user";
+    id: string;
+  };
+  authMethod: "cloudflare_access" | "better_auth";
+  displayName: string;
+  email?: string;
+  avatarUrl?: string;
+  roles: string[];
+  permissions: Record<string, boolean>;
+  queueScope?: string[] | null;
+  profile?: ConsoleAnalystProfile;
+}
+
+export interface ShellSnapshot {
+  session: ConsoleSession | null;
+  configuration?: {
+    allowed_action_codes?: string[];
+    action_delivery_enabled?: boolean;
+  } | null;
+  currentView: WorkspaceView;
+  reportCount: number;
+  health: {
+    status: ShellHealthStatus;
+    label: string;
+  };
+}
+
+export interface CustomerBrand {
+  organization_name: string;
+  logo_url: string;
+  logo_alt: string;
+}
+
+export interface WorkspaceBrand extends CustomerBrand {
+  primary_color: string;
+  primary_contrast_color: string;
+  accent_color: string;
+  background_color: string;
+  surface_color: string;
+  text_color: string;
+  muted_color: string;
+  border_color: string;
+  body_font_family: string;
+  heading_font_family: string;
+  font_css_url: string;
+  border_radius: number;
+}
+
+declare global {
+  interface Window {
+    SafestBrand?: {
+      defaults?: WorkspaceBrand;
+      applyBrand(value: Partial<WorkspaceBrand>, options?: { title?: string }): WorkspaceBrand;
+      loadBrand(path?: string, options?: { title?: string }): Promise<WorkspaceBrand>;
+    };
+  }
+}

package/template/console/workflows/CreateWorkflowDialog.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState, type FormEvent } from "react";
+import { errorMessage, mutationHeaders, requestJson } from "../lib/http";
+import { announceWorkflowChanged, openWorkflowStudio, workflowEvents } from "./events";
+import { happyPathFixture, workflowTemplate, workflowTemplateOptions, type WorkflowTemplate } from "./templates";
+import type { WorkflowCreateResponse, WorkflowPurpose } from "./types";
+
+function slug(value: string): string {
+  return value.toLowerCase().trim().replace(/[^a-z0-9]+/gu, "-").replace(/^-|-$/gu, "").slice(0, 100);
+}
+
+export function CreateWorkflowDialog() {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [key, setKey] = useState("");
+  const [keyEdited, setKeyEdited] = useState(false);
+  const [description, setDescription] = useState("");
+  const [purpose, setPurpose] = useState<WorkflowPurpose>("report");
+  const [template, setTemplate] = useState<WorkflowTemplate>("human");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+
+  const reset = (): void => {
+    setName(""); setKey(""); setKeyEdited(false); setDescription(""); setPurpose("report"); setTemplate("human"); setError("");
+  };
+  const close = (): void => {
+    if (pending) return;
+    setOpen(false);
+    reset();
+  };
+
+  useEffect(() => {
+    const show = (): void => { reset(); setOpen(true); };
+    window.addEventListener(workflowEvents.openCreate, show);
+    return () => window.removeEventListener(workflowEvents.openCreate, show);
+  }, []);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) { dialog.showModal(); requestAnimationFrame(() => nameRef.current?.focus()); }
+    if (!open && dialog.open) dialog.close();
+  }, [open]);
+
+  const submit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault(); setPending(true); setError("");
+    try {
+      const result = await requestJson<WorkflowCreateResponse>("/v1/admin/workflows", {
+        method: "POST",
+        headers: mutationHeaders(),
+        body: JSON.stringify({ key, name, description, purpose, graph: workflowTemplate(template, purpose) }),
+      });
+      let fixtureWarning = "";
+      try {
+        await requestJson(`/v1/admin/workflows/${encodeURIComponent(result.workflowId)}/fixtures`, {
+          method: "POST", headers: mutationHeaders(), body: JSON.stringify(happyPathFixture),
+        });
+      } catch (cause) {
+        fixtureWarning = errorMessage(cause, "The starter fixture could not be created.");
+      }
+      setPending(false);
+      setOpen(false);
+      reset();
+      announceWorkflowChanged();
+      openWorkflowStudio(result.workflowId, fixtureWarning ? `The workflow was created, but its starter fixture was not: ${fixtureWarning}` : "");
+    } catch (cause) {
+      setError(errorMessage(cause, "The workflow could not be created."));
+      setPending(false);
+    }
+  };
+
+  return (
+    <dialog ref={dialogRef} className="editor-dialog workflow-create-dialog" aria-labelledby="workflow-create-title" onCancel={(event) => { event.preventDefault(); close(); }} data-react-slice="workflow-create-dialog">
+      <div className="detail-head"><div><h2 id="workflow-create-title">Create a workflow</h2><p>Start from a template, then adjust every step.</p></div><button className="icon-button" type="button" aria-label="Close" disabled={pending} onClick={close}>×</button></div>
+      <form className="editor-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>
+          <label className="wide-field">Description<textarea maxLength={2000} disabled={pending} value={description} onChange={(event) => setDescription(event.currentTarget.value)} /></label>
+          <label>Purpose<select disabled={pending} value={purpose} onChange={(event) => setPurpose(event.currentTarget.value as WorkflowPurpose)}><option value="report">Report handling</option><option value="appeal">Appeal review</option><option value="quality">Quality review</option><option value="operations">Operations recovery</option></select></label>
+        </div>
+        <fieldset><legend>Starting template</legend>{workflowTemplateOptions.map((option) => <label className="template-choice" key={option.value}><input type="radio" name="workflow-template" value={option.value} checked={template === option.value} disabled={pending} onChange={() => setTemplate(option.value)} /><span><strong>{option.name}</strong><small>{option.detail}</small></span></label>)}</fieldset>
+        <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 workflow"}</button></div></div>
+      </form>
+    </dialog>
+  );
+}

package/template/console/workflows/WorkflowCanvas.tsx

@@ -0,0 +1,42 @@
+import { readable } from "../lib/format";
+import { canvasSize, nodePosition, nodeVisualClass, workflowEdgeGeometry, workflowEdgeLabel, workflowEdgePath, workflowEdgeTone } from "./graph";
+import type { WorkflowGraph } from "./types";
+
+export function WorkflowCanvas({ graph, selectedNodeId, onSelect }: { graph: WorkflowGraph; selectedNodeId: string | null; onSelect: (nodeId: string) => void }) {
+  const { width, height, positions } = canvasSize(graph);
+  const groups = new Map<string, string[]>();
+  for (const edge of graph.edges) {
+    const key = `${edge.from.node_id}:${edge.to.node_id}`;
+    groups.set(key, [...(groups.get(key) ?? []), edge.id]);
+  }
+  return (
+    <div className="workflow-canvas" style={{ minWidth: width, minHeight: height }}>
+      <svg className="workflow-edge-layer" viewBox={`0 0 ${width} ${height}`} width={width} height={height} aria-hidden="true">
+        <defs>
+          {(["standard", "warning", "exception"] as const).map((tone) => <marker id={`workflow-arrow-${tone}`} markerWidth="13" markerHeight="11" refX="12" refY="5.5" orient="auto" markerUnits="userSpaceOnUse" key={tone}><path d="M 0 0 L 13 5.5 L 0 11 Z" className={`workflow-arrow-head ${tone}`} /></marker>)}
+        </defs>
+        {graph.edges.map((edge) => {
+          const from = positions.get(edge.from.node_id);
+          const to = positions.get(edge.to.node_id);
+          if (!from || !to) return null;
+          const siblings = groups.get(`${edge.from.node_id}:${edge.to.node_id}`) ?? [edge.id];
+          const lane = siblings.indexOf(edge.id) - (siblings.length - 1) / 2;
+          const geometry = workflowEdgeGeometry(from, to, lane);
+          const tone = workflowEdgeTone(edge);
+          const label = workflowEdgeLabel(edge);
+          const labelLength = Math.hypot(geometry.end.x - geometry.start.x, geometry.end.y - geometry.start.y);
+          return <g className={`workflow-edge-group ${tone}`} key={edge.id}>
+            <path className="workflow-edge-path" d={workflowEdgePath(geometry, lane)} markerEnd={`url(#workflow-arrow-${tone})`}><title>{edge.label || `${edge.from.port} → ${edge.to.port}`}</title></path>
+            {label && labelLength >= Math.max(70, label.length * 5.2 + 18) ? <text className="workflow-edge-label" x={(geometry.start.x + geometry.end.x) / 2} y={(geometry.start.y + geometry.end.y) / 2 - 7} textAnchor="middle">{label}</text> : null}
+          </g>;
+        })}
+      </svg>
+      {graph.nodes.map((node, index) => {
+        const position = positions.get(node.id) ?? nodePosition(node, index);
+        return <button className={`canvas-node ${nodeVisualClass(node.kind)}${selectedNodeId === node.id ? " selected" : ""}`} type="button" data-kind={node.kind} aria-pressed={selectedNodeId === node.id} style={{ left: position.x, top: position.y }} onClick={() => onSelect(node.id)} key={node.id}>
+          <span className="canvas-node-kind"><i />{readable(node.kind)}</span><h4>{node.name}</h4><p>{node.description || (node.kind === "action" ? "Customer-side effect" : "Typed workflow step")}</p>
+        </button>;
+      })}
+    </div>
+  );
+}

package/template/console/workflows/WorkflowDialogs.tsx

@@ -0,0 +1,6 @@
+import { CreateWorkflowDialog } from "./CreateWorkflowDialog";
+import { WorkflowStudio } from "./WorkflowStudio";
+
+export function WorkflowDialogs() {
+  return <><CreateWorkflowDialog /><WorkflowStudio /></>;
+}