@lukoweb/apitogo-plugin-dev-portal-billing 0.1.66 → 0.1.67

package/dist/index.d.mts

@@ -1,10 +1,39 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as _lukoweb_apitogo_plugins0 from "@lukoweb/apitogo/plugins";
+import * as _tanstack_react_query0 from "@tanstack/react-query";
 
 //#region src/pages/AccountPlansPage.d.ts
 declare const AccountPlansPage: () => react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/ApiKeysPanel.d.ts
+/**
+ * Lists the developer's gateway API keys with create and revoke. The plaintext key is returned by the
+ * platform exactly once, so it is held in local state until dismissed and never re-fetched.
+ */
+declare const ApiKeysPanel: ({
+  readOnly
+}: {
+  readOnly?: boolean;
+}) => react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/types.d.ts
+type DevPortalApiKey = {
+  id: string;
+  name: string;
+  keyPrefix: string;
+  status: string;
+  createdAtUtc: string;
+  revokedAtUtc: string | null; /** Present only in the response to a successful create; never returned again. */
+  key: string | null;
+};
+type DevPortalApiKeyListResponse = {
+  keys: DevPortalApiKey[];
+  activeCount: number; /** Per-developer cap from the project's platform plan; null means unlimited. */
+  maxKeys: number | null;
+  canCreate: boolean; /** Header the key must be sent in when calling the gateway. */
+  header: string;
+  gatewayBaseUrl: string | null;
+};
 type DevPortalBillingConfig = {
   pricing?: {
     title?: string;
@@ -30,4 +59,119 @@ declare const CREDENTIALS_PATH = "/account/credentials";
 //#region src/DevPortalBillingPlugin.d.ts
 declare const devPortalBillingPlugin: (options?: DevPortalBillingConfig | undefined) => _lukoweb_apitogo_plugins0.ApitogoPlugin;
 //#endregion
-export { AccountPlansPage, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };
+//#region src/hooks/useApiKeys.d.ts
+/** Thrown when the developer has hit their plan's per-developer key cap. */
+declare const API_KEY_CAP_REACHED = "API_KEY_CAP_REACHED";
+declare function useApiKeys(): _tanstack_react_query0.QueryObserverRefetchErrorResult<DevPortalApiKeyListResponse, Error> | _tanstack_react_query0.QueryObserverLoadingErrorResult<DevPortalApiKeyListResponse, Error> | _tanstack_react_query0.QueryObserverPendingResult<DevPortalApiKeyListResponse, Error> | {
+  data: DevPortalApiKeyListResponse;
+  error: null;
+  isError: boolean;
+  isFetching: boolean;
+  isLoading: boolean;
+  isPending: boolean;
+  isSuccess: boolean;
+  status: string;
+  isLoadingError: false;
+  isRefetchError: true;
+  isPlaceholderData: false;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: _tanstack_react_query0.RefetchOptions) => Promise<_tanstack_react_query0.QueryObserverResult<DevPortalApiKeyListResponse, Error>>;
+  fetchStatus: _tanstack_react_query0.FetchStatus;
+  promise: Promise<DevPortalApiKeyListResponse>;
+} | {
+  data: DevPortalApiKeyListResponse;
+  error: null;
+  isError: boolean;
+  isFetching: boolean;
+  isLoading: boolean;
+  isPending: boolean;
+  isSuccess: boolean;
+  status: string;
+  isLoadingError: false;
+  isRefetchError: false;
+  isPlaceholderData: false;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: _tanstack_react_query0.RefetchOptions) => Promise<_tanstack_react_query0.QueryObserverResult<DevPortalApiKeyListResponse, Error>>;
+  fetchStatus: _tanstack_react_query0.FetchStatus;
+  promise: Promise<DevPortalApiKeyListResponse>;
+} | {
+  data: DevPortalApiKeyListResponse;
+  error: null;
+  isError: boolean;
+  isFetching: boolean;
+  isLoading: boolean;
+  isPending: boolean;
+  isSuccess: boolean;
+  status: string;
+  isLoadingError: true;
+  isRefetchError: false;
+  isPlaceholderData: false;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: _tanstack_react_query0.RefetchOptions) => Promise<_tanstack_react_query0.QueryObserverResult<DevPortalApiKeyListResponse, Error>>;
+  fetchStatus: _tanstack_react_query0.FetchStatus;
+  promise: Promise<DevPortalApiKeyListResponse>;
+} | {
+  data: DevPortalApiKeyListResponse;
+  error: null;
+  isError: boolean;
+  isFetching: boolean;
+  isLoading: boolean;
+  isPending: boolean;
+  isSuccess: boolean;
+  status: string;
+  isLoadingError: false;
+  isRefetchError: false;
+  isPlaceholderData: true;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: _tanstack_react_query0.RefetchOptions) => Promise<_tanstack_react_query0.QueryObserverResult<DevPortalApiKeyListResponse, Error>>;
+  fetchStatus: _tanstack_react_query0.FetchStatus;
+  promise: Promise<DevPortalApiKeyListResponse>;
+};
+declare function useCreateApiKey(): _tanstack_react_query0.UseMutationResult<DevPortalApiKey, Error, string, unknown>;
+declare function useRevokeApiKey(): _tanstack_react_query0.UseMutationResult<void, Error, string, unknown>;
+//#endregion
+export { API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { Button, Head, Heading } from "@lukoweb/apitogo/components";
-import { CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon } from "@lukoweb/apitogo/icons";
+import { CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon, TrashIcon } from "@lukoweb/apitogo/icons";
 import { createContext, useContext, useEffect, useState } from "react";
 import { Link, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@lukoweb/apitogo/ui/AlertDialog.js";
@@ -9,10 +9,14 @@ import zudokuConfig from "virtual:zudoku-config";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
-import { createPlugin } from "@lukoweb/apitogo/plugins";
-import { Alert, AlertAction, AlertDescription } from "@lukoweb/apitogo/ui/Alert";
-import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button";
+import { Alert, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
+import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@lukoweb/apitogo/ui/Dialog.js";
+import { Input } from "@lukoweb/apitogo/ui/Input.js";
 import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
+import { createPlugin } from "@lukoweb/apitogo/plugins";
+import { Alert as Alert$1, AlertAction, AlertDescription } from "@lukoweb/apitogo/ui/Alert";
+import { Button as Button$2 } from "@lukoweb/apitogo/ui/Button";
 import { Value } from "@lukoweb/apitogo/ui/Value.js";
 
 //#region src/utils/dev-portal-api.ts
@@ -286,6 +290,8 @@ function useCancelSubscription() {
 //#endregion
 //#region src/utils/demo-session.ts
 const DEMO_SUBSCRIPTION_KEY = "demo-subscription-key";
+const DEMO_GATEWAY_KEY_HEADER = "Ocp-Apim-Subscription-Key";
+const DEMO_MAX_KEYS = 5;
 function resolveDemoPlanSku(plans) {
 	return plans?.[0]?.sku ?? "free";
 }
@@ -314,6 +320,24 @@ function createDemoCredentials(plans) {
 		expiresAt: null
 	};
 }
+function createDemoApiKeys() {
+	return {
+		keys: [{
+			id: "00000000-0000-0000-0000-0000000000a1",
+			name: "default",
+			keyPrefix: DEMO_SUBSCRIPTION_KEY.slice(0, 8),
+			status: "active",
+			createdAtUtc: (/* @__PURE__ */ new Date()).toISOString(),
+			revokedAtUtc: null,
+			key: null
+		}],
+		activeCount: 1,
+		maxKeys: DEMO_MAX_KEYS,
+		canCreate: true,
+		header: DEMO_GATEWAY_KEY_HEADER,
+		gatewayBaseUrl: null
+	};
+}
 
 //#endregion
 //#region src/hooks/useMySubscriptions.ts
@@ -467,6 +491,259 @@ const AccountPlansPage = () => {
 	});
 };
 
+//#endregion
+//#region src/hooks/useApiKeys.ts
+/** Thrown when the developer has hit their plan's per-developer key cap. */
+const API_KEY_CAP_REACHED = "API_KEY_CAP_REACHED";
+function apiKeysQueryKey(apiBaseUrl) {
+	return ["dev-portal-api-keys", apiBaseUrl];
+}
+function useApiKeys() {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const liveQuery = useQuery({
+		queryKey: apiKeysQueryKey(apiBaseUrl),
+		enabled: auth.isAuthenticated && !isPreview && !isDemoSession && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (response.status === 404) throw new Error("NO_ENTITLEMENT");
+			if (!response.ok) throw new Error("Failed to load API keys.");
+			return await response.json();
+		},
+		retry: (failureCount, error) => error instanceof Error && error.message === "NO_ENTITLEMENT" ? false : failureCount < 2
+	});
+	if (isDemoSession && auth.isAuthenticated) return {
+		...liveQuery,
+		data: createDemoApiKeys(),
+		error: null,
+		isError: false,
+		isFetching: false,
+		isLoading: false,
+		isPending: false,
+		isSuccess: true,
+		status: "success"
+	};
+	return liveQuery;
+}
+function useCreateApiKey() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (name) => {
+			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys`, {
+				method: "POST",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json"
+				},
+				credentials: "include",
+				body: JSON.stringify({ name })
+			});
+			if (response.status === 409) throw new Error(API_KEY_CAP_REACHED);
+			if (!response.ok) throw new Error(await readProblemDetail(response) ?? "Failed to create API key.");
+			return await response.json();
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: apiKeysQueryKey(apiBaseUrl) });
+		}
+	});
+}
+function useRevokeApiKey() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (keyId) => {
+			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys/${keyId}`, {
+				method: "DELETE",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (!response.ok && response.status !== 204) throw new Error(await readProblemDetail(response) ?? "Failed to revoke API key.");
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: apiKeysQueryKey(apiBaseUrl) });
+		}
+	});
+}
+async function readProblemDetail(response) {
+	try {
+		return (await response.json()).detail?.trim() || null;
+	} catch {
+		return null;
+	}
+}
+
+//#endregion
+//#region src/components/ApiKeysPanel.tsx
+/**
+* Lists the developer's gateway API keys with create and revoke. The plaintext key is returned by the
+* platform exactly once, so it is held in local state until dismissed and never re-fetched.
+*/
+const ApiKeysPanel = ({ readOnly = false }) => {
+	const { data, isLoading, error } = useApiKeys();
+	const createKey = useCreateApiKey();
+	const revokeKey = useRevokeApiKey();
+	const [name, setName] = useState("");
+	const [newKey, setNewKey] = useState(null);
+	const activeKeys = data?.keys.filter((key) => key.status === "active") ?? [];
+	const capLabel = data?.maxKeys == null ? `${data?.activeCount ?? activeKeys.length} active` : `${data.activeCount} of ${data.maxKeys} used`;
+	const canCreate = !readOnly && (data?.canCreate ?? false);
+	const handleCreate = () => {
+		const trimmed = name.trim();
+		if (!trimmed) return;
+		createKey.mutate(trimmed, { onSuccess: (key) => {
+			setNewKey(key);
+			setName("");
+		} });
+	};
+	return /* @__PURE__ */ jsxs("article", {
+		className: "rounded-xl border bg-card/60 p-6 space-y-5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-lg font-medium",
+						children: "API keys"
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							"Send a key in the",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "rounded bg-muted px-1 py-0.5 text-xs",
+								children: data?.header ?? "Ocp-Apim-Subscription-Key"
+							}),
+							" ",
+							"header when calling the gateway. Keys share your plan's rate limit and quota."
+						]
+					})]
+				}), data ? /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 rounded-full border px-3 py-1 text-xs text-muted-foreground",
+					children: capLabel
+				}) : null]
+			}),
+			newKey?.key ? /* @__PURE__ */ jsxs(Alert, { children: [
+				/* @__PURE__ */ jsx(KeyRoundIcon, { size: 16 }),
+				/* @__PURE__ */ jsx(AlertTitle, { children: "Copy your new key now — it is shown only once." }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-3 space-y-3",
+					children: [/* @__PURE__ */ jsx(Secret, {
+						className: "max-w-full w-full",
+						secret: newKey.key,
+						status: "active"
+					}), /* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						onClick: () => setNewKey(null),
+						children: "Done"
+					})]
+				})
+			] }) : null,
+			createKey.isError ? /* @__PURE__ */ jsx(Alert, {
+				variant: "destructive",
+				children: /* @__PURE__ */ jsx(AlertTitle, { children: createKey.error.message === API_KEY_CAP_REACHED ? data?.maxKeys == null ? "You cannot create more API keys right now." : `You already have the maximum of ${data.maxKeys} active API keys. Revoke one to create another.` : createKey.error.message })
+			}) : null,
+			revokeKey.isError ? /* @__PURE__ */ jsx(Alert, {
+				variant: "destructive",
+				children: /* @__PURE__ */ jsx(AlertTitle, { children: revokeKey.error.message })
+			}) : null,
+			isLoading ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Loading…"
+			}) : null,
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: error instanceof Error && error.message === "NO_ENTITLEMENT" ? "Choose a plan to get your first API key." : "Unable to load your API keys. Try again in a moment."
+			}) : null,
+			data && activeKeys.length === 0 && !isLoading ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "You have no active API keys yet."
+			}) : null,
+			activeKeys.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: "divide-y rounded-lg border",
+				children: activeKeys.map((key) => /* @__PURE__ */ jsxs("li", {
+					className: "flex flex-wrap items-center justify-between gap-3 p-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 space-y-1",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "truncate font-medium",
+							children: key.name
+						}), /* @__PURE__ */ jsxs("p", {
+							className: "text-xs text-muted-foreground",
+							children: [
+								/* @__PURE__ */ jsxs("code", { children: [key.keyPrefix, "…"] }),
+								" · created",
+								" ",
+								new Date(key.createdAtUtc).toLocaleDateString()
+							]
+						})]
+					}), readOnly ? null : /* @__PURE__ */ jsxs(Dialog, { children: [/* @__PURE__ */ jsx(DialogTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs(Button$1, {
+							variant: "ghost",
+							className: "flex items-center gap-2",
+							disabled: revokeKey.isPending,
+							children: [/* @__PURE__ */ jsx(TrashIcon, { size: 16 }), /* @__PURE__ */ jsx("span", {
+								className: "hidden md:block",
+								children: "Revoke"
+							})]
+						})
+					}), /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: [
+						"Revoke “",
+						key.name,
+						"”?"
+					] }), /* @__PURE__ */ jsx(DialogDescription, { children: "Any application using this key will immediately start getting 401 responses from the gateway. This cannot be undone." })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button$1, {
+							variant: "outline",
+							children: "Cancel"
+						})
+					}), /* @__PURE__ */ jsx(DialogClose, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button$1, {
+							variant: "destructive",
+							onClick: () => revokeKey.mutate(key.id),
+							children: "Revoke key"
+						})
+					})] })] })] })]
+				}, key.id))
+			}) : null,
+			readOnly ? null : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Input, {
+					className: "max-w-xs",
+					maxLength: 64,
+					placeholder: "Key name (e.g. production)",
+					"aria-label": "New API key name",
+					value: name,
+					disabled: !canCreate || createKey.isPending,
+					onChange: (event) => setName(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key === "Enter") handleCreate();
+					}
+				}), /* @__PURE__ */ jsx(Button$1, {
+					onClick: handleCreate,
+					disabled: !canCreate || createKey.isPending || !name.trim(),
+					children: createKey.isPending ? "Creating…" : "Create API key"
+				})]
+			}),
+			data && !data.canCreate && !readOnly ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: data.maxKeys == null ? "API key creation is currently disabled for this API." : `You have reached your plan limit of ${data.maxKeys} API keys. Revoke a key to create a new one.`
+			}) : null
+		]
+	});
+};
+
 //#endregion
 //#region src/DevPortalBillingWrapper.tsx
 const DevPortalBillingWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(DevPortalBillingProvider, {
@@ -589,7 +866,7 @@ const CheckoutPage = () => {
 				className: "text-muted-foreground",
 				children: "Checkout is simulated in local demo mode. Publish your portal to APItoGo to complete real subscriptions and billing."
 			}),
-			/* @__PURE__ */ jsx(Button$1, {
+			/* @__PURE__ */ jsx(Button$2, {
 				asChild: true,
 				variant: "outline",
 				children: /* @__PURE__ */ jsx(Link, {
@@ -610,7 +887,7 @@ const CheckoutPage = () => {
 				className: "text-muted-foreground",
 				children: "Subscribe and billing flows require a live dev-portal backend. Publish your portal to APItoGo, then return here to complete checkout."
 			}),
-			/* @__PURE__ */ jsx(Button$1, {
+			/* @__PURE__ */ jsx(Button$2, {
 				asChild: true,
 				variant: "outline",
 				children: /* @__PURE__ */ jsx(Link, {
@@ -626,12 +903,12 @@ const CheckoutPage = () => {
 		title: "Establishing secure checkout…",
 		description: "Redirecting you to complete your subscription.",
 		url: checkoutQuery.data?.checkoutUrl ?? void 0,
-		children: checkoutQuery.isError ? /* @__PURE__ */ jsxs(Alert, {
+		children: checkoutQuery.isError ? /* @__PURE__ */ jsxs(Alert$1, {
 			variant: "destructive",
 			children: [/* @__PURE__ */ jsx(AlertDescription, {
 				className: "first-letter:uppercase",
 				children: checkoutQuery.error.message
-			}), /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(Button$1, {
+			}), /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(Button$2, {
 				variant: "outline",
 				size: "xs",
 				asChild: true,
@@ -707,7 +984,7 @@ const CredentialsPage = () => {
 						children: "API credentials"
 					}), /* @__PURE__ */ jsx("p", {
 						className: "text-muted-foreground",
-						children: "Use your subscription key to authenticate requests to the API gateway."
+						children: "Create API keys and use them to authenticate requests to the API gateway."
 					})]
 				})]
 			}),
@@ -727,7 +1004,7 @@ const CredentialsPage = () => {
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
 					children: "Sign in to view your subscription key."
-				}), /* @__PURE__ */ jsx(Button$1, {
+				}), /* @__PURE__ */ jsx(Button$2, {
 					className: "mt-4",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
@@ -745,7 +1022,7 @@ const CredentialsPage = () => {
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
 					children: error instanceof Error && error.message === "NO_ENTITLEMENT" ? "No active subscription found. Choose a plan to get your API key." : "Unable to load API credentials. Try again in a moment."
-				}), /* @__PURE__ */ jsx(Button$1, {
+				}), /* @__PURE__ */ jsx(Button$2, {
 					className: "mt-4",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
@@ -770,24 +1047,20 @@ const CredentialsPage = () => {
 							})]
 						})
 					}),
+					/* @__PURE__ */ jsx(ApiKeysPanel, { readOnly: isDemoSession }),
 					/* @__PURE__ */ jsxs("article", {
 						className: "rounded-xl border bg-card/60 p-6 space-y-4",
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "space-y-1",
 							children: [/* @__PURE__ */ jsx("h2", {
 								className: "text-lg font-medium",
-								children: "Subscription key"
+								children: "Default key value"
 							}), /* @__PURE__ */ jsxs("p", {
 								className: "text-sm text-muted-foreground",
 								children: [
-									"Send this value in the",
-									" ",
-									/* @__PURE__ */ jsx("code", {
-										className: "rounded bg-muted px-1 py-0.5 text-xs",
-										children: "Ocp-Apim-Subscription-Key"
-									}),
-									" ",
-									"header when calling the gateway."
+									"The full value of the ",
+									/* @__PURE__ */ jsx("code", { children: "default" }),
+									" key issued with your plan. Keys you create above are shown only once, so store them yourself."
 								]
 							})]
 						}), /* @__PURE__ */ jsx(Secret, {
@@ -821,14 +1094,14 @@ const CredentialsPage = () => {
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
 				className: "mt-8 flex flex-wrap gap-3",
-				children: [/* @__PURE__ */ jsx(Button$1, {
+				children: [/* @__PURE__ */ jsx(Button$2, {
 					variant: "outline",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
 						to: "/account/subscriptions",
 						children: "My subscriptions"
 					})
-				}), /* @__PURE__ */ jsx(Button$1, {
+				}), /* @__PURE__ */ jsx(Button$2, {
 					variant: "outline",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
@@ -975,7 +1248,7 @@ const SubscriptionsPage = () => {
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
 					children: "You do not have an active subscription yet."
-				}), /* @__PURE__ */ jsx(Button$1, {
+				}), /* @__PURE__ */ jsx(Button$2, {
 					className: "mt-4",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
@@ -1021,7 +1294,7 @@ const SubscriptionsPage = () => {
 			/* @__PURE__ */ jsxs("div", {
 				className: "mt-8 flex flex-wrap gap-3",
 				children: [
-					/* @__PURE__ */ jsx(Button$1, {
+					/* @__PURE__ */ jsx(Button$2, {
 						variant: "outline",
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Link, {
@@ -1029,7 +1302,7 @@ const SubscriptionsPage = () => {
 							children: "Change plan"
 						})
 					}),
-					/* @__PURE__ */ jsx(Button$1, {
+					/* @__PURE__ */ jsx(Button$2, {
 						variant: "outline",
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Link, {
@@ -1037,7 +1310,7 @@ const SubscriptionsPage = () => {
 							children: "Billing settings"
 						})
 					}),
-					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$1, {
+					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$2, {
 						variant: "secondary",
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Link, {
@@ -1185,4 +1458,4 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 }));
 
 //#endregion
-export { AccountPlansPage, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };
+export { API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.1.66",
+  "version": "0.1.67",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -46,7 +46,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "@lukoweb/apitogo": "0.1.66"
+    "@lukoweb/apitogo": "0.1.67"
   },
   "peerDependencies": {
     "react": ">=19.2.0",