create-safest-tools 0.2.0

package/template/console/auth/OAuthButtons.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+
+type Provider = {
+  providerId: "google" | "github" | "cloudflare";
+  displayName: string;
+};
+
+interface OAuthButtonsProps {
+  disabled?: boolean;
+  onError: (message: string) => void;
+}
+
+export function OAuthButtons({ disabled = false, onError }: OAuthButtonsProps) {
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const [pending, setPending] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    void fetch("/v1/auth/providers", { credentials: "same-origin" })
+      .then(async (response) => response.ok ? response.json() : Promise.reject(new Error("Provider discovery failed.")))
+      .then((body: { providers?: Provider[] }) => {
+        if (active && Array.isArray(body.providers)) setProviders(body.providers);
+      })
+      .catch(() => {
+        if (active) setProviders([]);
+      });
+    return () => { active = false; };
+  }, []);
+
+  async function signIn(provider: Provider) {
+    if (disabled || pending) return;
+    onError("");
+    setPending(provider.providerId);
+    try {
+      const response = await fetch("/api/auth/sign-in/social", {
+        method: "POST",
+        credentials: "same-origin",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          provider: provider.providerId,
+          callbackURL: `${window.location.origin}/`,
+          newUserCallbackURL: `${window.location.origin}/`,
+          errorCallbackURL: `${window.location.origin}/`,
+        }),
+      });
+      const body = await response.json().catch(() => ({})) as { url?: unknown; message?: unknown };
+      if (!response.ok || typeof body.url !== "string") {
+        throw new Error(typeof body.message === "string" ? body.message : `Could not continue with ${provider.displayName}.`);
+      }
+      sessionStorage.removeItem("safest-reports-force-login");
+      window.location.assign(body.url);
+    } catch (error) {
+      setPending(null);
+      onError(error instanceof Error ? error.message : `Could not continue with ${provider.displayName}.`);
+    }
+  }
+
+  if (!providers.length) return null;
+  return (
+    <div className="oauth-sign-in" aria-label="Single sign-on options">
+      <div className="oauth-buttons">
+        {providers.map((provider) => (
+          <button
+            key={provider.providerId}
+            className="secondary wide"
+            type="button"
+            data-auth-provider={provider.providerId}
+            disabled={disabled || pending !== null}
+            onClick={() => { void signIn(provider); }}
+          >
+            {pending === provider.providerId ? "Opening…" : `Continue with ${provider.displayName}`}
+          </button>
+        ))}
+      </div>
+      <div className="auth-divider" role="separator"><span>or use your password</span></div>
+    </div>
+  );
+}

package/template/console/auth/OperatorLogin.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useState, type FormEvent, type RefObject } from "react";
+import { authEvents, dispatchAuthEvent } from "./events";
+import { errorMessage, postJson } from "../lib/http";
+import { OAuthButtons } from "./OAuthButtons";
+
+interface OperatorLoginProps {
+  email: string;
+  emailInput: RefObject<HTMLInputElement | null>;
+  onEmailChange: (value: string) => void;
+  onForgotPassword: () => void;
+  onError: (message: string) => void;
+}
+
+export function OperatorLogin({ email, emailInput, onEmailChange, onForgotPassword, onError }: OperatorLoginProps) {
+  const [password, setPassword] = useState("");
+  const [pending, setPending] = useState(false);
+
+  useEffect(() => {
+    const resetPendingAction = (): void => {
+      setPending(false);
+    };
+    window.addEventListener(authEvents.error, resetPendingAction);
+    window.addEventListener(authEvents.focusEmail, resetPendingAction);
+    return () => {
+      window.removeEventListener(authEvents.error, resetPendingAction);
+      window.removeEventListener(authEvents.focusEmail, resetPendingAction);
+    };
+  }, []);
+
+  async function signIn(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (pending) return;
+    onError("");
+    setPending(true);
+    try {
+      await postJson("/v1/auth/login", { email: email.trim(), password });
+      setPassword("");
+      sessionStorage.removeItem("safest-reports-force-login");
+      dispatchAuthEvent(authEvents.authenticated);
+    } catch (caught) {
+      setPending(false);
+      onError(errorMessage(caught, "Sign in failed."));
+      emailInput.current?.focus();
+    }
+  }
+
+  function requestPasswordReset() {
+    onError("");
+    setPassword("");
+    onForgotPassword();
+  }
+
+  return (
+    <div className="auth-panel" data-auth-view="login" data-react-slice="operator-login">
+      <p className="eyebrow">Private safety workspace</p>
+      <h2 id="login-title">Sign in to Safest</h2>
+      <p id="operator-login-help" className="auth-copy">
+        Admins and analysts use their invited Safest account. They do not need a Cloudflare account.
+      </p>
+      <OAuthButtons disabled={pending} onError={onError} />
+      <form id="operator-login-form" aria-busy={pending} onSubmit={signIn}>
+        <label htmlFor="operator-email">Work email</label>
+        <input
+          ref={emailInput}
+          id="operator-email"
+          name="email"
+          type="email"
+          inputMode="email"
+          autoComplete="username"
+          autoCapitalize="none"
+          spellCheck={false}
+          value={email}
+          onChange={(event) => onEmailChange(event.currentTarget.value)}
+          disabled={pending}
+          required
+          autoFocus
+        />
+        <label htmlFor="operator-password">Password</label>
+        <input
+          id="operator-password"
+          name="password"
+          type="password"
+          autoComplete="current-password"
+          value={password}
+          onChange={(event) => setPassword(event.currentTarget.value)}
+          disabled={pending}
+          required
+        />
+        <button className="primary wide" type="submit" disabled={pending}>
+          {pending ? "Signing in…" : "Sign in"}
+        </button>
+      </form>
+      <button id="forgot-password-link" className="text-button" type="button" onClick={requestPasswordReset}>
+        Forgot password?
+      </button>
+      <details className="infrastructure-access">
+        <summary>Infrastructure owner access</summary>
+        <p>This separate route is only for the allowlisted infrastructure owner. Cloudflare Access handles authentication and recovery.</p>
+        <button
+          id="access-login"
+          className="secondary wide"
+          type="button"
+          onClick={() => window.location.assign("/v1/infrastructure/bootstrap")}
+        >
+          Continue with Cloudflare Access
+        </button>
+      </details>
+    </div>
+  );
+}

package/template/console/auth/PasswordRecovery.tsx

@@ -0,0 +1,132 @@
+import { useRef, useState, type FormEvent } from "react";
+import { errorMessage, postJson } from "../lib/http";
+
+interface PasswordRecoveryProps {
+  email: string;
+  onEmailChange: (value: string) => void;
+  onBack: () => void;
+  onError: (message: string) => void;
+}
+
+interface PasswordResetRequestResponse {
+  message: string;
+}
+
+export function PasswordRecovery({ email, onEmailChange, onBack, onError }: PasswordRecoveryProps) {
+  const [pending, setPending] = useState(false);
+  const [message, setMessage] = useState("");
+
+  async function requestReset(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (pending) return;
+    onError("");
+    setMessage("");
+    setPending(true);
+    try {
+      const result = await postJson<PasswordResetRequestResponse>("/v1/auth/password-resets", { email: email.trim() });
+      setMessage(result.message);
+    } catch (caught) {
+      onError(errorMessage(caught, "Password reset instructions could not be requested."));
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="auth-panel" data-auth-view="forgot">
+      <p className="eyebrow">Account recovery</p>
+      <h2 id="login-title">Reset your password</h2>
+      <p className="auth-copy">Enter your work email. If the account can be reset, we’ll send a single-use link through your workspace notification channel.</p>
+      <form id="forgot-password-form" aria-busy={pending} onSubmit={requestReset}>
+        <label htmlFor="forgot-password-email">Work email</label>
+        <input
+          id="forgot-password-email"
+          type="email"
+          inputMode="email"
+          autoComplete="email"
+          autoCapitalize="none"
+          spellCheck={false}
+          value={email}
+          onChange={(event) => {
+            onEmailChange(event.currentTarget.value);
+            setMessage("");
+          }}
+          disabled={pending}
+          required
+          autoFocus
+        />
+        <button className="primary wide" type="submit" disabled={pending}>{pending ? "Sending…" : "Send reset instructions"}</button>
+      </form>
+      <button className="text-button auth-back" type="button" onClick={onBack}>Back to sign in</button>
+      <p id="forgot-password-message" className="form-message" role="status">{message}</p>
+    </div>
+  );
+}
+
+interface PasswordResetProps {
+  token: string;
+  onBack: () => void;
+  onError: (message: string) => void;
+}
+
+export function PasswordReset({ token, onBack, onError }: PasswordResetProps) {
+  const confirmInput = useRef<HTMLInputElement>(null);
+  const [password, setPassword] = useState("");
+  const [confirmation, setConfirmation] = useState("");
+  const [pending, setPending] = useState(false);
+  const [completed, setCompleted] = useState(false);
+
+  async function resetPassword(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (pending) return;
+    onError("");
+    if (password !== confirmation) {
+      onError("The new passwords do not match.");
+      confirmInput.current?.focus();
+      return;
+    }
+    if (!token) {
+      onError("This password reset link is invalid or expired.");
+      return;
+    }
+    setPending(true);
+    try {
+      await postJson("/v1/auth/password-resets/complete", { token, password });
+      setPassword("");
+      setConfirmation("");
+      setPending(false);
+      setCompleted(true);
+    } catch (caught) {
+      setPending(false);
+      onError(errorMessage(caught, "The password could not be reset."));
+    }
+  }
+
+  if (completed) {
+    return (
+      <div className="auth-panel" data-auth-view="reset-complete">
+        <p className="eyebrow">Password updated</p>
+        <h2 id="login-title">Your password is ready</h2>
+        <p className="auth-copy">Sign in with your new password. Your other sessions have been closed.</p>
+        <button className="primary wide" type="button" onClick={onBack}>Back to sign in</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="auth-panel" data-auth-view="reset">
+      <p className="eyebrow">Account recovery</p>
+      <h2 id="login-title">Choose a new password</h2>
+      <p className="auth-copy">Create a new password for this workspace. The reset link works once and expires automatically.</p>
+      <form id="password-reset-form" aria-busy={pending} onSubmit={resetPassword}>
+        <label htmlFor="password-reset-password">New password</label>
+        <input id="password-reset-password" type="password" autoComplete="new-password" minLength={12} maxLength={128} value={password} onChange={(event) => setPassword(event.currentTarget.value)} disabled={pending} required autoFocus />
+        <label htmlFor="password-reset-confirm">Confirm new password</label>
+        <input ref={confirmInput} id="password-reset-confirm" type="password" autoComplete="new-password" minLength={12} maxLength={128} value={confirmation} onChange={(event) => setConfirmation(event.currentTarget.value)} disabled={pending} required />
+        <small className="field-help">Use at least 12 characters. A passphrase works well.</small>
+        <button className="primary wide" type="submit" disabled={pending}>{pending ? "Resetting…" : "Reset password"}</button>
+      </form>
+      <button className="text-button auth-back" type="button" onClick={onBack}>Back to sign in</button>
+    </div>
+  );
+}

package/template/console/auth/account-route.ts

@@ -0,0 +1,15 @@
+export type AccountView = "login" | "forgot" | "reset" | "invite";
+
+export interface AccountRoute {
+  view: AccountView;
+  token: string;
+}
+
+export function accountRouteFromHash(hash: string): AccountRoute {
+  const parameters = new URLSearchParams(hash.replace(/^#/u, ""));
+  const invitationToken = parameters.get("invite") || "";
+  if (invitationToken) return { view: "invite", token: invitationToken };
+  const resetToken = parameters.get("reset") || "";
+  if (resetToken) return { view: "reset", token: resetToken };
+  return { view: "login", token: "" };
+}

package/template/console/auth/browser-navigation.ts

@@ -0,0 +1,7 @@
+export function removeAccountHash(): void {
+  history.replaceState(null, "", `${window.location.pathname}${window.location.search}`);
+}
+
+export function replaceWithWorkspaceRoute(): void {
+  history.replaceState(null, "", "#reports");
+}

package/template/console/auth/events.ts

@@ -0,0 +1,15 @@
+export const authEvents = {
+  authenticated: "safest:auth:authenticated",
+  error: "safest:auth:error",
+  focusEmail: "safest:auth:focus-email",
+} as const;
+
+export interface AuthErrorDetail {
+  message: string;
+}
+
+export type AuthEventName = (typeof authEvents)[keyof typeof authEvents];
+
+export function dispatchAuthEvent(name: AuthEventName, detail?: unknown): void {
+  window.dispatchEvent(new CustomEvent(name, { detail }));
+}

package/template/console/command/CommandCentre.tsx

@@ -0,0 +1,119 @@
+import { useSyncExternalStore } from "react";
+import { PageHeader } from "../components/PageHeader";
+import { getCommandSnapshot, subscribeToCommand } from "./store";
+import type { CommandAction, CommandMetricSnapshot, CommandQueueLoad, CommandRunSummary } from "./types";
+import { dispatchOpenReport } from "../reports/events";
+import { dispatchNavigation } from "../shell/events";
+
+function performAction(action: CommandAction): void {
+  if (action.type === "report") dispatchOpenReport(action.reportId);
+  else dispatchNavigation(action.view);
+}
+
+function formattedDate(value: string): string {
+  const date = new Date(value);
+  if (!Number.isFinite(date.getTime())) return "Today";
+  return new Intl.DateTimeFormat(undefined, { weekday: "long", day: "numeric", month: "long" }).format(date);
+}
+
+function greeting(value: string, firstName: string): string {
+  const hour = new Date(value).getHours();
+  const timeOfDay = hour < 12 ? "morning" : hour < 18 ? "afternoon" : "evening";
+  return `Good ${timeOfDay}, ${firstName || "there"}.`;
+}
+
+function EmptyProduct({ icon, title, description }: { icon: string; title: string; description: string }) {
+  return <div className="empty-product"><span aria-hidden="true">{icon}</span><h2>{title}</h2><p>{description}</p></div>;
+}
+
+function Metrics({ metrics, loading }: { metrics: CommandMetricSnapshot; loading: boolean }) {
+  const values = [
+    { label: "Open reports", detail: "Accepted allegations", icon: "i-inbox", value: metrics.openReports },
+    { label: "Needs a person", detail: "Unclaimed or waiting", icon: "i-user", value: metrics.needsHuman },
+    { label: "Workflow runs", detail: "Running or waiting", icon: "i-workflow", value: metrics.activeRuns },
+    { label: "Unresolved incidents", detail: "Waiting for repair", icon: "i-activity", value: metrics.unresolvedIncidents },
+  ];
+  return (
+    <section className="metrics command-metrics" aria-label="Workspace summary" aria-busy={loading}>
+      {values.map((item) => (
+        <article key={item.label}><span>{item.label} <svg aria-hidden="true"><use href={`#${item.icon}`} /></svg></span><strong>{loading ? "—" : item.value}</strong><small>{item.detail}</small></article>
+      ))}
+    </section>
+  );
+}
+
+function QueueLoadRow({ queue }: { queue: CommandQueueLoad }) {
+  const tone = queue.pressure >= 80 ? " danger" : queue.pressure >= 55 ? " warning" : "";
+  const width = Math.max(queue.openCount ? 8 : 0, queue.pressure);
+  return (
+    <article className="queue-load-row">
+      <div className="queue-load-label"><strong>{queue.name}</strong><small>{queue.targetMinutes}m first-response target</small></div>
+      <span className="queue-load-track" role="progressbar" aria-label={`${queue.name} response pressure`} aria-valuemin={0} aria-valuemax={100} aria-valuenow={queue.pressure}>
+        <i className={`queue-load-fill${tone}`} style={{ width: `${width}%` }} />
+      </span>
+      <strong className="queue-load-count">{queue.openCount} open</strong>
+    </article>
+  );
+}
+
+function RunRow({ run }: { run: CommandRunSummary }) {
+  const tone = run.tone === "neutral" ? "" : ` ${run.tone}`;
+  return (
+    <article className="compact-run-row">
+      <span className="run-glyph" aria-hidden="true">⌘</span>
+      <div><strong>{run.title}</strong><small>{run.detail}</small></div>
+      <span className={`run-status${tone}`}>{run.status}</span>
+      <span className="run-age">{run.age}</span>
+      <button className="text-button run-open" type="button" onClick={() => performAction(run.action)}>Open</button>
+    </article>
+  );
+}
+
+function LoadingRows() {
+  return <div className="skeleton-block" aria-hidden="true" />;
+}
+
+export function CommandCentre() {
+  const snapshot = useSyncExternalStore(subscribeToCommand, getCommandSnapshot, getCommandSnapshot);
+  const welcome = greeting(snapshot.generatedAt, snapshot.firstName);
+  const attentionSummary = snapshot.metrics.needsHuman
+    ? `${snapshot.metrics.needsHuman} item${snapshot.metrics.needsHuman === 1 ? "" : "s"} need attention.`
+    : "No reports or workflow issues need attention.";
+
+  return (
+    <div data-react-slice="command-centre">
+      <PageHeader
+        className="command-head"
+        title="Command centre"
+        description={`${formattedDate(snapshot.generatedAt)} · ${welcome} ${snapshot.loading ? "Loading workspace status." : attentionSummary}`}
+      >
+        <div className="surface-buttons">
+          {snapshot.permissions.useAssistant ? <button className="secondary command-assistant-action" type="button" onClick={() => dispatchNavigation("assistant")}><svg aria-hidden="true"><use href="#i-spark" /></svg>Ask Safest</button> : null}
+          {snapshot.permissions.manageWorkflows ? <button className="primary" type="button" onClick={() => dispatchNavigation("workflows")}><svg aria-hidden="true"><use href="#i-plus" /></svg>New workflow</button> : null}
+        </div>
+      </PageHeader>
+
+      {snapshot.permissions.manageInstallation && snapshot.incompleteSetupCount > 0 ? (
+        <div className="attention-banner"><div><strong>{snapshot.incompleteSetupCount} setup item{snapshot.incompleteSetupCount === 1 ? "" : "s"} need attention</strong><span>Finish setup to verify reporting and delivery.</span></div><button className="secondary" type="button" onClick={() => dispatchNavigation("settings")}>Open setup</button></div>
+      ) : null}
+
+      <Metrics metrics={snapshot.metrics} loading={snapshot.loading} />
+
+      <div className="command-grid">
+        <section className="surface command-panel"><div className="surface-head"><h2>Needs attention</h2><button className="text-button" type="button" onClick={() => dispatchNavigation("reports")}>View all</button></div><div className="attention-list" aria-busy={snapshot.loading}>
+          {snapshot.loading ? <LoadingRows /> : snapshot.attention.length ? snapshot.attention.map((item) => (
+            <button className="attention-row" type="button" key={item.id} onClick={() => performAction(item.action)}><span className={`attention-glyph${item.urgent ? " danger" : ""}`} aria-hidden="true">{item.icon}</span><span><strong>{item.title}</strong><small>{item.detail}</small></span><span className="attention-meta">{item.meta}</span></button>
+          )) : <EmptyProduct icon="✓" title="You’re all caught up" description="No reports or workflow issues need attention." />}
+        </div></section>
+
+        <section className="surface command-panel queue-load-panel"><div className="surface-head"><h2>Queue load</h2><span className="live-label"><i />Live</span></div><div className="queue-load-list" aria-busy={snapshot.loading}>
+          {snapshot.loading ? <LoadingRows /> : snapshot.queueLoads.length ? snapshot.queueLoads.map((queue) => <QueueLoadRow queue={queue} key={queue.id} />) : <EmptyProduct icon="≋" title="Queue load unavailable" description="Your role does not include queue load data." />}
+        </div></section>
+      </div>
+
+      <section className="surface command-panel recent-runs-panel"><div className="surface-head"><h2>Recent workflow runs</h2>{snapshot.permissions.viewAudit ? <button className="text-button" type="button" onClick={() => dispatchNavigation("operations")}>View runs</button> : null}</div><div className="compact-run-list" aria-busy={snapshot.loading}>
+        {snapshot.loading ? <LoadingRows /> : snapshot.recentRuns.length ? snapshot.recentRuns.map((run) => <RunRow run={run} key={run.id} />) : <EmptyProduct icon="⌘" title="No recent runs" description="Runs appear here when a report starts a workflow." />}
+      </div></section>
+    </div>
+  );
+}