Build an approval UI

{
  "apiVersion": "v1",
  "run_id": "2f47a86e-72ce-4f27-8ff0-7dc0c959fd35",
  "sequence": 14,
  "at": "2026-07-30T18:04:11.203Z",
  "type": "approval.required",
  "approvalId": "approval:browser:1",
  "action_digest": "5f1d2c9a4e7b0f3d6c8a1b2e9f4d7c0a3b6e9f2c5a8d1b4e7f0c3a6d9b2e5f8c",
  "summary": "Publish the reviewed release\nTarget: console.example.com",
  "expiresAt": "2026-07-30T18:19:11.203Z"
}

POST /v1/runs/2f47a86e-72ce-4f27-8ff0-7dc0c959fd35/approve
Authorization: Bearer praxa_sk_...
Content-Type: application/json

{
  "action_digest": "5f1d2c9a4e7b0f3d6c8a1b2e9f4d7c0a3b6e9f2c5a8d1b4e7f0c3a6d9b2e5f8c",
  "decision": "approve"
}

async function postDecision(
  runId: string,
  apiKey: string,
  actionDigest: string,
  decision: "approve" | "deny",
): Promise<void> {
  const response = await fetch(`https://api.praxa.io/v1/runs/${runId}/approve`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${apiKey}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ action_digest: actionDigest, decision }),
  });

  if (!response.ok) {
    const problem = await response.json().catch(() => null);
    throw new Error(problem?.detail ?? problem?.title ?? `approval failed (${response.status})`);
  }
}

import { useMemo, useState } from "react";

type ApprovalEvent = {
  type: "approval.required";
  run_id: string;
  approvalId: string;
  action_digest: string;
  summary: string;
  expiresAt?: string;
};

export function ApprovalGate({
  event,
  onDecision,
}: {
  event: ApprovalEvent;
  onDecision: (decision: "approve" | "deny") => Promise<void>;
}) {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const expired = useMemo(
    () => Boolean(event.expiresAt && Date.parse(event.expiresAt) <= Date.now()),
    [event.expiresAt],
  );

  async function decide(decision: "approve" | "deny") {
    setBusy(true);
    setError(null);
    try {
      await onDecision(decision);
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Decision failed");
    } finally {
      setBusy(false);
    }
  }

  return (
    <section aria-labelledby={`approval-${event.approvalId}`}>
      <h2 id={`approval-${event.approvalId}`}>Approval required</h2>
      <pre style={{ whiteSpace: "pre-wrap", maxHeight: "12rem", overflow: "auto" }}>
        {event.summary}
      </pre>
      {event.expiresAt && <p>Expires at {event.expiresAt}</p>}
      <button disabled={busy || expired} onClick={() => void decide("approve")}>
        Approve
      </button>
      <button disabled={busy || expired} onClick={() => void decide("deny")}>
        Deny
      </button>
      {error && <p role="alert">{error}</p>}
    </section>
  );
}