Function ApiKeysPage

packages/react/src/pages/api-keys.tsx:225–338

(props: { readonly orgKeysSection?: ReactNode })

}

export function ApiKeysPage(props: { readonly orgKeysSection?: ReactNode }) {
  useExecutorDocumentTitle("API keys");
  const result = useAtomValue(apiKeysAtom);
  const refreshApiKeys = useAtomRefresh(apiKeysAtom);
  const doCreate = useAtomSet(createApiKey, { mode: "promiseExit" });
  const doRevoke = useAtomSet(revokeApiKey, { mode: "promiseExit" });
  const [createOpen, setCreateOpen] = useState(false);
  // Bumped per open so the dialog body remounts with fresh state; the shell
  // stays mounted for Radix's exit animation (see CreateKeyDialogBody).
  const [openCount, setOpenCount] = useState(0);
  const [revokingId, setRevokingId] = useState<string | null>(null);

  const handleCreate = async (name: string): Promise<CreatedKey | null> => {
    const exit = await doCreate({ payload: { name }, reactivityKeys: apiKeyWriteKeys });
    trackEvent("api_key_created", { success: Exit.isSuccess(exit) });
    if (Exit.isSuccess(exit)) {
      toast.success("API key created");
      return exit.value;
    }
    toast.error("Failed to create API key");
    return null;
  };

  const handleRevoke = async (key: ApiKeySummary) => {
    setRevokingId(key.id);
    const exit = await doRevoke({ params: { apiKeyId: key.id }, reactivityKeys: apiKeyWriteKeys });
    setRevokingId(null);
    trackEvent("api_key_revoked", { success: Exit.isSuccess(exit) });
    if (Exit.isSuccess(exit)) {
      toast.success(`Revoked ${key.name}`);
      return;
    }
    toast.error("Failed to revoke API key");
  };

  return (
    <PageContainer>
      <PageHeader
        title="API keys"
        description="Keys for accessing the Executor API and MCP endpoint from scripts and tools."
        actions={
          <Button
            onClick={() => {
              setOpenCount((count) => count + 1);
              setCreateOpen(true);
            }}
          >
            <span aria-hidden="true">+</span>
            New key
          </Button>
        }
      >
        <div className="mt-4 flex max-w-2xl items-center gap-2 rounded-md border border-border bg-card px-3 py-2">
          <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">
            Authorization: Bearer &lt;api-key&gt;
          </code>
          <CopyButton value="Authorization: Bearer <api-key>" />
        </div>