diff --git a/bin/gen-sidebar.ts b/bin/gen-sidebar.ts
index 8cb5d9e49..9fd391ce5 100644
--- a/bin/gen-sidebar.ts
+++ b/bin/gen-sidebar.ts
@@ -200,7 +200,7 @@ function noteOrder(groupPath: string, pages: string[]) {
 
 // ---------------------------------------------------------------- conversion
 type NimbusItem =
-  | { label: string; link: string; badge?: NavBadge; icon?: string; hidden?: boolean }
+  | { label: string; link: string; badge?: NavBadge; statusBadge?: string; deprecated?: boolean; icon?: string; hidden?: boolean }
   | { label: string; items: NimbusItem[]; collapsed?: boolean; segment?: string; landing?: string; icon?: string };
 
 function convertPages(pages: Json[], groupPath: string): NimbusItem[] {
@@ -399,6 +399,28 @@ const items: NimbusItem[] = tabs.map((t) => {
   return { label, items: [], collapsed: false };
 });
 
+// Enrich every API link, whether authored as a page, operation pointer, or tag group.
+// Keys use pageLink so localized navigation receives the same operation metadata.
+if (!previewRemote) {
+  const apiPages = new Map(
+    [...getApiOperations("cloud"), ...getApiOperations("clickstack")]
+      .map((operation) => [pageLink(operation.route), operation]),
+  );
+  const enrichApiLinks = (nodes: NimbusItem[]) => {
+    for (const item of nodes) {
+      if ("items" in item) {
+        enrichApiLinks(item.items);
+        continue;
+      }
+      const operation = apiPages.get(item.link);
+      if (!operation) continue;
+      item.statusBadge = operation.badge;
+      item.deprecated = operation.operation.deprecated || undefined;
+    }
+  };
+  enrichApiLinks(items);
+}
+
 const outFile = path.join(outDir, locale ? `sidebar.items.${locale}.json` : "sidebar.items.json");
 fs.writeFileSync(outFile, JSON.stringify(items, null, 2) + "\n");
 
diff --git a/package.json b/package.json
index 0bd3fba40..d49d921e6 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,8 @@
     "react-dom": "^19.0.0",
     "redirects-in-workers": "^0.0.7",
     "satteri": "^0.10.5",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "shiki": "^4.4.3"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a52e29cb1..23b2af82a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -82,6 +82,9 @@ importers:
       satteri:
         specifier: ^0.10.5
         version: 0.10.5
+      shiki:
+        specifier: ^4.4.3
+        version: 4.4.3
       tailwind-merge:
         specifier: ^3.5.0
         version: 3.6.0
diff --git a/src/components/api/ApiOperation.astro b/src/components/api/ApiOperation.astro
index 2afb82bf3..e4d45954d 100644
--- a/src/components/api/ApiOperation.astro
+++ b/src/components/api/ApiOperation.astro
@@ -1,4 +1,6 @@
 ---
+import ApiPlayground from "./ApiPlayground.astro";
+import type { ApiOperationPage as SourceOperation } from "@/lib/openapi";
 import ApiBody from "@/components/ui/api-layout/ApiBody.astro";
 import type { ApiSecurityScheme } from "@/components/ui/api-layout/auth";
 import { ApiCodeRail } from "@/components/ui/api-code-rail";
@@ -7,22 +9,15 @@ import type { ApiOperationPage } from "@cloudflare/nimbus-docs/api";
 interface Props {
   page: ApiOperationPage;
   authSchemes?: Record<string, ApiSecurityScheme>;
+  source: SourceOperation;
 }
 
-const { page, authSchemes = {} } = Astro.props;
-const editableParameters = page.parameters
-  .filter((group) => group.location === "path" || group.location === "query")
-  .flatMap((group) => group.fields.map((field) => ({ field, location: group.location })));
-const curlSample = page.samples.find((sample) => sample.lang === "curl")?.source ?? "";
+const { page, authSchemes = {}, source } = Astro.props;
 ---
 
 <div
   class="ch-api-operation"
   data-api-operation
-  data-method={page.method}
-  data-base-url={page.server ?? ""}
-  data-path={page.path}
-  data-curl-sample={curlSample}
 >
   <div class="ch-api-reference">
     <div class="ch-api-endpoint">
@@ -36,35 +31,14 @@ const curlSample = page.samples.find((sample) => sample.lang === "curl")?.source
           aria-label="Copy request URL"
         >Copy</button>
       </div>
-      <button type="button" class="ch-api-try" data-api-try aria-expanded="false">
-        <span data-api-try-label>Try it</span>
-        <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 2.25 9 6l-6 3.75z" fill="currentColor" /></svg>
-      </button>
-    </div>
-
-    <div class="ch-api-try-fields" hidden data-api-try-fields>
-      <label>
-        <span>Base URL</span>
-        <input value={page.server ?? ""} data-api-base />
-      </label>
-      {editableParameters.map(({ field, location }) => (
-        <label>
-          <span>
-            <code>{field.name}</code>
-            <small>{location}</small>
-            <small class:list={{ "is-required": field.required }}>{field.required ? "required" : "optional"}</small>
-          </span>
-          <input
-            placeholder={field.required ? "Required" : "Optional"}
-            data-api-parameter={field.name}
-            data-api-parameter-in={location}
-          />
-        </label>
-      ))}
+      <button type="button" class="ch-api-try" data-api-try aria-expanded="false" aria-controls="api-playground-panel" aria-haspopup="dialog">Try it out</button>
     </div>
 
+    <ApiPlayground source={source} />
+    <div class="ch-api-reference-body">
     {page.descriptionHtml && <div class="ch-api-description nb-md" set:html={page.descriptionHtml} />}
     <ApiBody page={page} authSchemes={authSchemes} embedded />
+    </div>
   </div>
 
   {(page.samples.length > 0 || page.responses.some((response) => response.example !== undefined)) && (
@@ -82,82 +56,128 @@ const curlSample = page.samples.find((sample) => sample.lang === "curl")?.source
 
 <script>
   import { mount } from "@cloudflare/nimbus-docs/client";
-
-  mount("[data-api-operation]", (element) => {
-    if (!(element instanceof HTMLElement)) return () => {};
+  mount("[data-api-operation]", container => {
+    const panel = container.querySelector<HTMLDialogElement>('#api-playground-panel')!;
+    const element = container.querySelector<HTMLElement>('[data-playground-root]')!;
+    const specElement = container.querySelector('[data-playground-config]')!;
+    const toggle = container.querySelector<HTMLButtonElement>('[data-api-try]')!;
+    const selector = panel.querySelector<HTMLButtonElement>('[data-playground-endpoint]')!;
+    const config = JSON.parse(specElement.textContent!);
+    let renderEndpoint: (() => void) | undefined;
+    let initialized = false;
+    let root: import("react-dom/client").Root | undefined;
     const controller = new AbortController();
-    let copiedTimer: ReturnType<typeof setTimeout> | undefined;
-
-    const copyText = async (value: string, button: HTMLButtonElement) => {
-      try {
-        await navigator.clipboard.writeText(value);
-      } catch {
-        return;
+    const options = panel.querySelector<HTMLElement>('#playground-endpoints')!;
+    const choices = Array.from(options.querySelectorAll<HTMLButtonElement>('[data-endpoint-value]'));
+    const openOptions = () => {
+      const bounds = selector.getBoundingClientRect();
+      options.style.left = `${bounds.left}px`;
+      options.style.top = `${bounds.bottom + 6}px`;
+      options.style.width = `${Math.min(560, window.innerWidth - bounds.left - 16)}px`;
+      options.style.maxHeight = `${Math.max(120, window.innerHeight - bounds.bottom - 24)}px`;
+      options.showPopover();
+      (choices.find(choice => choice.dataset.endpointValue === selector.value) ?? choices[0])?.focus();
+    };
+    selector.addEventListener('click', () => options.matches(':popover-open') ? options.hidePopover() : openOptions(), { signal: controller.signal });
+    selector.addEventListener('keydown', event => {
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); openOptions(); }
+    }, { signal: controller.signal });
+    options.addEventListener('toggle', () => selector.setAttribute('aria-expanded', String(options.matches(':popover-open'))), { signal: controller.signal });
+    for (const choice of choices) choice.addEventListener('click', () => {
+      selector.value = choice.dataset.endpointValue!;
+      choices.forEach(item => item.setAttribute('aria-selected', String(item === choice)));
+      options.hidePopover(); renderEndpoint?.(); selector.focus();
+    }, { signal: controller.signal });
+    options.addEventListener('keydown', event => {
+      const index = choices.indexOf(document.activeElement as HTMLButtonElement);
+      if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); options.hidePopover(); selector.focus(); }
+      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+        event.preventDefault();
+        const next = event.key === 'Home' ? 0 : event.key === 'End' ? choices.length - 1 : (index + (event.key === 'ArrowDown' ? 1 : -1) + choices.length) % choices.length;
+        choices[next]?.focus();
       }
-      const label = button.textContent;
-      button.textContent = "Copied";
-      clearTimeout(copiedTimer);
-      copiedTimer = setTimeout(() => { button.textContent = label; }, 1200);
+    }, { signal: controller.signal });
+    const status = panel.querySelector<HTMLElement>('[data-playground-status]')!;
+    const message = panel.querySelector<HTMLElement>('[data-playground-message]')!;
+    const retry = panel.querySelector<HTMLButtonElement>('[data-playground-retry]')!;
+    let loading = false;
+    const failed = (error: unknown) => {
+      initialized = false;
+      status.hidden = false;
+      retry.hidden = false;
+      message.setAttribute('role', 'alert');
+      message.textContent = `Unable to load API playground: ${error instanceof Error ? error.message : String(error)}`;
     };
-
-    for (const button of element.querySelectorAll<HTMLButtonElement>("[data-api-copy]")) {
-      button.addEventListener(
-        "click",
-        () => void copyText(button.dataset.apiCopy ?? "", button),
-        { signal: controller.signal },
-      );
-    }
-
-    const fields = element.querySelector<HTMLElement>("[data-api-try-fields]");
-    const tryButton = element.querySelector<HTMLButtonElement>("[data-api-try]");
-    tryButton?.addEventListener(
-      "click",
-      () => {
-        if (!fields) return;
-        fields.hidden = !fields.hidden;
-        tryButton.setAttribute("aria-expanded", String(!fields.hidden));
-        const label = tryButton.querySelector<HTMLElement>("[data-api-try-label]");
-        if (label) label.textContent = fields.hidden ? "Try it" : "Close";
-      },
-      { signal: controller.signal },
-    );
-
-    const rebuild = () => {
-      let apiPath = element.dataset.path ?? "";
-      const query = new URLSearchParams();
-      for (const input of element.querySelectorAll<HTMLInputElement>("[data-api-parameter]")) {
-        if (!input.value) continue;
-        const name = input.dataset.apiParameter ?? "";
-        if (input.dataset.apiParameterIn === "path") {
-          apiPath = apiPath.replace(`{${name}}`, encodeURIComponent(input.value));
-        } else {
-          query.set(name, input.value);
-        }
+    const initialize = async () => {
+      if (initialized || loading) return;
+      loading = true;
+      status.hidden = false;
+      retry.hidden = true;
+      message.setAttribute('role', 'status');
+      message.textContent = 'Loading API playground…';
+      try {
+        const [{ createRoot }, { createElement }, { default: Playground }, { flushSync }] = await Promise.all([
+          import('react-dom/client'), import('react'), import('./Playground'), import('react-dom'),
+        ]);
+        if (controller.signal.aborted) return;
+        root?.unmount();
+        root = createRoot(element, { onUncaughtError: failed });
+      renderEndpoint = () => {
+        const endpoint = config.endpoints.find((item: { id: string }) => item.id === selector.value);
+        if (!endpoint) throw new Error('Unknown playground endpoint');
+        const badge = panel.querySelector<HTMLElement>('[data-playground-method]')!;
+        panel.querySelector('[data-playground-endpoint-title]')!.textContent = endpoint.title;
+        badge.textContent = endpoint.method.toUpperCase();
+        badge.className = `pg-method is-${endpoint.method}`;
+        flushSync(() => root!.render(createElement(Playground, { key: endpoint.id, config: { ...config, ...endpoint } })));
+        panel.querySelector('.ch-playground-modal-body')!.scrollTop = 0;
+      };
+        initialized = true;
+        renderEndpoint();
+        status.hidden = initialized;
+      } catch (error) {
+        failed(error);
+      } finally {
+        loading = false;
       }
-
-      const base = element.querySelector<HTMLInputElement>("[data-api-base]")?.value.replace(/\/$/, "")
-        ?? element.dataset.baseUrl
-        ?? "";
-      const queryString = query.size ? `?${query.toString()}` : "";
-      const url = `${base}${apiPath}${queryString}`;
-      const template = element.dataset.curlSample ?? "";
-      const updated = template.split("\n").map((line) => {
-        if (!line.includes("--url")) return line;
-        const indent = line.match(/^\s*/)?.[0] ?? "";
-        return `${indent}--url ${url}${line.trimEnd().endsWith("\\") ? " \\" : ""}`;
-      }).join("\n");
-      const code = element.querySelector<HTMLElement>('[data-nb-lang-panel][data-nb-lang-value="curl"] code');
-      if (code) code.textContent = updated;
     };
-
-    for (const input of element.querySelectorAll<HTMLInputElement>("[data-api-try-fields] input")) {
-      input.addEventListener("input", rebuild, { signal: controller.signal });
-    }
-
-    return () => {
-      controller.abort();
-      clearTimeout(copiedTimer);
+    retry.addEventListener('click', initialize, { signal: controller.signal });
+    toggle.addEventListener('click', () => {
+      panel.showModal();
+      toggle.setAttribute('aria-expanded', 'true');
+      void initialize();
+    }, { signal: controller.signal });
+    panel.querySelector('[data-playground-close]')!.addEventListener('click', () => panel.close(), { signal: controller.signal });
+    const outsidePanel = (event: PointerEvent | MouseEvent) => {
+      const bounds = panel.getBoundingClientRect();
+      return event.target === panel && (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom);
     };
+    let startedOutside = false;
+    panel.addEventListener('pointerdown', event => { startedOutside = outsidePanel(event); }, { signal: controller.signal });
+    panel.addEventListener('click', event => {
+      if (startedOutside && outsidePanel(event)) panel.close();
+      startedOutside = false;
+    }, { signal: controller.signal });
+
+    panel.addEventListener('close', () => {
+      if (options.matches(':popover-open')) options.hidePopover();
+      toggle.setAttribute('aria-expanded', 'false');
+      toggle.focus({ preventScroll: true });
+    }, { signal: controller.signal });
+    return () => { controller.abort(); root?.unmount(); if (panel.open) panel.close(); };
+  });
+  mount("[data-api-copy]", element => {
+    const controller = new AbortController();
+    element.addEventListener("click", async () => {
+      if (!(element instanceof HTMLElement)) return;
+      try {
+        await navigator.clipboard.writeText(element.dataset.apiCopy ?? "");
+        element.textContent = "Copied";
+      } catch {
+        element.textContent = "Copy failed";
+      }
+    }, { signal: controller.signal });
+    return () => controller.abort();
   });
 </script>
 
@@ -170,6 +190,7 @@ const curlSample = page.samples.find((sample) => sample.lang === "curl")?.source
     margin-top: 1.25rem;
   }
 
+
   .ch-api-reference,
   .ch-api-console {
     min-width: 0;
@@ -180,9 +201,9 @@ const curlSample = page.samples.find((sample) => sample.lang === "curl")?.source
     align-items: center;
     gap: 0.5rem;
     padding: 0.375rem;
-    border: 1px solid var(--border);
+    border: 1px solid var(--color-border);
     border-radius: 0.75rem;
-    background: color-mix(in srgb, var(--muted) 58%, transparent);
+    background: color-mix(in srgb, var(--color-muted) 58%, transparent);
   }
 
   .ch-api-request-line {
@@ -193,9 +214,9 @@ const curlSample = page.samples.find((sample) => sample.lang === "curl")?.source
     align-items: center;
     gap: 0.65rem;
     padding: 0.45rem 0.65rem;
-    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
     border-radius: 0.55rem;
-    background: var(--background);
+    background: var(--color-background);
   }
 
   .ch-api-method {
@@ -230,7 +251,7 @@ const curlSample = page.samples.find((sample) => sample.lang === "curl")?.source
     margin-left: auto;
     border: 0;
     background: transparent;
-    color: var(--muted-foreground);
+    color: var(--color-muted-foreground);
   }
   .ch-api-try {
     display: inline-flex;
@@ -252,73 +273,29 @@ const curlSample = page.samples.find((sample) => sample.lang === "curl")?.source
 
   .ch-api-description {
     margin: 1.15rem 0 1.8rem;
-    color: var(--foreground);
+    color: var(--color-foreground);
     line-height: 1.75;
   }
 
-  .ch-api-try-fields {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0.7rem;
-    margin-top: 0.75rem;
-    padding: 0.85rem;
-    border: 1px solid var(--border);
-    border-radius: 0.65rem;
-    background: var(--card);
-  }
-
-  .ch-api-try-fields label,
-  .ch-api-try-fields label > span {
-    display: flex;
-  }
-
-  .ch-api-try-fields label {
-    min-width: 0;
-    flex-direction: column;
-    gap: 0.35rem;
-    color: var(--muted-foreground);
-    font-size: 0.7rem;
-  }
-
-  .ch-api-try-fields label > span {
-    align-items: center;
-    gap: 0.4rem;
-  }
-
-  .ch-api-try-fields small {
-    font-size: 0.62rem;
-    color: var(--muted-foreground);
-  }
-
-  .ch-api-try-fields small.is-required { color: var(--danger); }
-  .ch-api-try-fields input {
-    min-width: 0;
-    padding: 0.5rem 0.55rem;
-    border: 1px solid var(--border);
-    border-radius: 0.4rem;
-    background: var(--background);
-    color: var(--foreground);
-    font: inherit;
+  .ch-api-description :global(h2) {
+    margin: 2rem 0 14px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--color-border);
+    color: var(--color-foreground);
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.5;
   }
 
-  .ch-api-try-fields[hidden] { display: none; }
-  .ch-api-console {
-    position: sticky;
-    top: 5rem;
-    margin-top: -12.35rem;
-  }
+  .ch-api-try { text-decoration: none; }
+  .ch-api-console { position: sticky; top: 5rem; margin-top: -10rem; }
   .ch-api-console :global(.nb-cr-layer) { margin: 0; }
-
   @media (max-width: 79.99rem) {
     .ch-api-operation { grid-template-columns: minmax(0, 1fr); }
     .ch-api-console { position: relative; top: auto; margin-top: 0; }
   }
-
   @media (max-width: 40rem) {
-    .ch-api-endpoint { align-items: stretch; }
     .ch-api-request-line { flex-wrap: wrap; }
     .ch-api-path { order: 2; width: 100%; }
-    .ch-api-copy { margin-left: auto; }
-    .ch-api-try-fields { grid-template-columns: minmax(0, 1fr); }
   }
 </style>
diff --git a/src/components/api/ApiPage.astro b/src/components/api/ApiPage.astro
index d0befebd6..22c4026ec 100644
--- a/src/components/api/ApiPage.astro
+++ b/src/components/api/ApiPage.astro
@@ -47,12 +47,6 @@ const breadcrumbs = [
   { label: source.tag, href: tagRoute },
   { label: source.tag, href: browserPath },
 ];
-const headings = [
-  ...(view.auth.length ? [{ depth: 2, text: "Authorizations", slug: "authorizations" }] : []),
-  ...view.parameters.map((group) => ({ depth: 2, text: group.label, slug: group.anchor })),
-  ...(view.body.length || view.bodyUnion ? [{ depth: 2, text: "Request body", slug: "request-body" }] : []),
-  ...(view.responses.length ? [{ depth: 2, text: "Response", slug: "response" }] : []),
-];
 const markdownPath = withBase(`/${source.route}.md`);
 const markdownUrl = Astro.site ? new URL(markdownPath, Astro.site).href : markdownPath;
 const language = localeInfo(currentLocale);
@@ -69,6 +63,9 @@ const alternates = Astro.site
       })),
     ]
   : [];
+const issueUrl = new URL("https://github.com/ClickHouse/ClickHouse/issues/new");
+issueUrl.searchParams.set("template", "60_documentation-issue.yaml");
+issueUrl.searchParams.set("page", browserPath);
 const fallbackNotice = notTranslatedNotice(currentLocale);
 ---
 
@@ -76,10 +73,16 @@ const fallbackNotice = notTranslatedNotice(currentLocale);
   title={view.title}
   description={view.description}
   sidebar={sidebar}
-  headings={headings}
+  headings={[
+    ...(view.auth.length ? [{ depth: 2, text: "Authorizations", slug: "authorizations" }] : []),
+    ...view.parameters.map(group => ({ depth: 2, text: group.label, slug: group.anchor })),
+    ...(view.body.length || view.bodyUnion ? [{ depth: 2, text: "Request body", slug: "request-body" }] : []),
+    ...(view.responses.length ? [{ depth: 2, text: "Response", slug: "response" }] : []),
+  ]}
   breadcrumbs={breadcrumbs}
   prevNext={prevNext}
   mode="wide"
+  showPageActions={false}
   markdownUrl={markdownUrl}
   editUrl={source.editUrl}
   lang={language.hreflang}
@@ -101,10 +104,10 @@ const fallbackNotice = notTranslatedNotice(currentLocale);
       {fallbackNotice.message}
     </Aside>
   )}
-  <ApiOperation
-    page={view}
-    authSchemes={source.document.components?.securitySchemes}
-  />
+  <ApiOperation page={view} source={source} authSchemes={source.document.components?.securitySchemes} />
+  <div slot="content-footer" class="mt-8 text-sm">
+    <a href={issueUrl.href}>Report an issue</a>
+  </div>
 </DocsLayout>
 
 <style>
@@ -130,18 +133,6 @@ const fallbackNotice = notTranslatedNotice(currentLocale);
       max-width: calc(52% - 2.5rem);
     }
 
-    :global(.ch-document-grid-wide:has(.ch-api-operation) .ch-title-page-actions) {
-      max-width: calc(52% - 2.5rem);
-      margin-top: 6px;
-      flex-wrap: nowrap;
-      gap: 0;
-      font-size: 0.72rem;
-    }
-
-    :global(.ch-document-grid-wide:has(.ch-api-operation) .ch-title-page-actions > :is(a, button)) {
-      padding-inline: 4px;
-    }
-
     :global(.ch-document-grid-wide:has(.ch-api-operation) .docs-content) {
       margin-top: 16px;
     }
diff --git a/src/components/api/ApiPlayground.astro b/src/components/api/ApiPlayground.astro
new file mode 100644
index 000000000..42356c29a
--- /dev/null
+++ b/src/components/api/ApiPlayground.astro
@@ -0,0 +1,47 @@
+---
+import { getApiOperations, getRoutedApiOperation, type ApiOperationPage } from '@/lib/openapi';
+import './playground.css';
+import Button from '@/components/ui/button/Button.astro';
+interface Props { source: ApiOperationPage }
+const { source } = Astro.props;
+const endpoints = await Promise.all(getApiOperations(source.collection).map(async page => {
+  const { view } = await getRoutedApiOperation(page.collection, page.tagSlug, page.slug);
+  return ({
+  id: `${page.method}:${page.path}`, title: page.title, method: page.method, path: page.path,
+  tag: page.tag, operation: page.operation,
+  descriptionHtml: view.descriptionHtml,
+  bodyExample: view.example?.value,
+  responses: view.responses.map(({status, example}) => ({status, example})),
+  parameters: [...new Map(page.pathParameters.map(p => [p.$ref ?? `${p.in}:${p.name}`, p])).values()],
+}); }));
+const tags = [...new Set(endpoints.map(endpoint => endpoint.tag))];
+const parameters = [...new Map(source.pathParameters.map(p => [p.$ref ?? `${p.in}:${p.name}`, p])).values()];
+const config = {
+  endpoints, title: source.title, method: source.method, path: source.path,
+  document: { ...source.document, paths: {} }, operation: source.operation, parameters,
+};
+---
+<dialog id="api-playground-panel" class="ch-api-playground" aria-labelledby="api-playground-title">
+  <header class="ch-playground-modal-header">
+    <div class="ch-playground-endpoint-picker">
+      <span id="api-playground-title" class="pg-visually-hidden">API playground</span>
+      <button type="button" id="playground-endpoint" data-playground-endpoint value={`${source.method}:${source.path}`} aria-label="API endpoint" aria-haspopup="listbox" aria-expanded="false" aria-controls="playground-endpoints">
+        <span data-playground-method class={`pg-method is-${source.method}`}>{source.method.toUpperCase()}</span>
+        <span data-playground-endpoint-title>{source.title}</span><svg class="pg-select-chevron" aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m6 9 6 6 6-6" /></svg>
+      </button>
+      <div id="playground-endpoints" class="pg-endpoint-options" popover="auto" role="listbox" aria-label="API endpoints">
+        {tags.map(tag => <div role="group" aria-label={tag}><div class="pg-endpoint-group" aria-hidden="true">{tag}</div>{endpoints.filter(endpoint => endpoint.tag === tag).map(endpoint => <button type="button" role="option" tabindex="-1" aria-selected={endpoint.method === source.method && endpoint.path === source.path} data-endpoint-value={endpoint.id}><span class={`pg-method is-${endpoint.method}`}>{endpoint.method.toUpperCase()}</span><span>{endpoint.title}</span></button>)}</div>)}
+      </div>
+    </div>
+    <div data-playground-toolbar></div>
+    <Button variant="secondary" shape="square" data-playground-close aria-label="Close API playground" autofocus>✕</Button>
+  </header>
+  <div class="ch-playground-modal-body">
+  <div data-playground-status class="p-6" hidden>
+    <p data-playground-message role="status"></p>
+    <Button data-playground-retry hidden>Retry</Button>
+  </div>
+  <div data-playground-root></div>
+  <script is:inline type="application/json" data-playground-config set:html={JSON.stringify(config).replace(/</g, '\\u003c')} />
+  </div>
+</dialog>
diff --git a/src/components/api/Playground.tsx b/src/components/api/Playground.tsx
new file mode 100644
index 000000000..3f692fe41
--- /dev/null
+++ b/src/components/api/Playground.tsx
@@ -0,0 +1,318 @@
+import { buttonVariants } from "@/components/ui/button/variants";
+// Owns endpoint-scoped request state. Fields and raw JSON intentionally keep separate drafts.
+import PlaygroundOutput from "./PlaygroundOutput";
+import { createPortal } from "react-dom";
+import { useId, useState } from "react";
+import Field from "./PlaygroundField";
+import { usePlaygroundRequest } from "./usePlaygroundRequest";
+import {
+  authType,
+  bodySchema,
+  buildRequest,
+  requestSample,
+  resolve,
+  type PlaygroundConfig,
+  type RequestState,
+} from "./playground-model";
+
+function Description({ text }: { text?: string }) {
+  if (!text) return null;
+  return (
+    <p className="pg-description">
+      {text.split(/(https?:\/\/[^\s<>]+|`[^`]+`)/g).map((part, i) =>
+        part.startsWith("http") ? (
+          <a key={i} href={part}>
+            {part}
+          </a>
+        ) : part.startsWith("`") ? (
+          <code key={i}>{part.slice(1, -1)}</code>
+        ) : (
+          part
+        ),
+      )}
+    </p>
+  );
+}
+function AuthField({
+  name,
+  label,
+  value,
+  onChange,
+  secret = false,
+}: {
+  name: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  secret?: boolean;
+}) {
+  const id = useId();
+  return (
+    <div className="pg-auth-row">
+      <label htmlFor={id}>
+        <strong>{name}</strong> <small>string</small>
+        <em>required</em>
+      </label>
+      <input
+        id={id}
+        aria-label={label}
+        required
+        autoComplete="off"
+        type={secret ? "password" : "text"}
+        placeholder={secret ? "enter password" : "enter username"}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}
+export default function Playground({ config }: { config: PlaygroundConfig }) {
+  const [state, setState] = useState<RequestState>({
+    server: config.document.servers?.[0]?.url.startsWith("http")
+      ? config.document.servers[0].url
+      : "",
+    parameters: {},
+    body: config.bodyExample,
+    username: "",
+    password: "",
+    token: "",
+  });
+  const [language, setLanguage] = useState("cURL");
+  const [mode, setMode] = useState("Fields");
+  const [jsonBody, setJsonBody] = useState(
+    () => JSON.stringify(config.bodyExample, null, 2) ?? "",
+  );
+  let activeBody = state.body;
+  let jsonError = "";
+  if (mode === "JSON") {
+    try {
+      activeBody = jsonBody.trim() ? JSON.parse(jsonBody) : undefined;
+    } catch {
+      jsonError = "Enter valid JSON.";
+    }
+  }
+  const activeState = { ...state, body: activeBody };
+  const { error, sending, response, send, cancel } = usePlaygroundRequest(
+    config,
+    activeState,
+    jsonError,
+  );
+  const update = (part: Partial<RequestState>) =>
+    setState((s) => ({ ...s, ...part }));
+  let sample = "",
+    setupError = "",
+    auth: ReturnType<typeof authType> = "none";
+  try {
+    auth = authType(config);
+    if (jsonError) throw new Error(jsonError);
+    sample = requestSample(buildRequest(config, activeState, false), language);
+  } catch (e) {
+    setupError = (e as Error).message;
+  }
+  const schema = bodySchema(config);
+  const parameters = config.parameters.map((p) => resolve(p, config.document));
+  return (
+    <form
+      id="pg-request-form"
+      className="pg-app"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        void send();
+      }}
+    >
+      <>
+        {createPortal(
+          <div className="pg-request-bar pg-app">
+            <div className="pg-endpoint">
+              <span className={`pg-method is-${config.method.toLowerCase()}`}>
+                {config.method.toUpperCase()}
+              </span>
+              <code>{config.path}</code>
+            </div>
+            {sending ? (
+              <button
+                className={buttonVariants({ size: "sm" })}
+                type="button"
+                onClick={cancel}
+              >
+                Cancel request
+              </button>
+            ) : (
+              <button
+                className={buttonVariants({ variant: "primary", size: "sm" })}
+                type="submit"
+                form="pg-request-form"
+                disabled={!!setupError}
+              >
+                Send
+              </button>
+            )}
+          </div>,
+          document.querySelector("[data-playground-toolbar]")!,
+        )}
+      </>
+      <div className="pg-columns">
+        <div className="pg-inputs">
+          <header className="pg-intro">
+            <h3>{config.title}</h3>
+            <div
+              className="pg-description"
+              dangerouslySetInnerHTML={{ __html: config.descriptionHtml ?? "" }}
+            />
+          </header>
+          {auth !== "none" && (
+            <details className="pg-panel" open>
+              <summary>Authorization</summary>
+              <div className="pg-panel-content">
+                <Description
+                  text={Object.values(
+                    config.document.components?.securitySchemes ?? {},
+                  )
+                    .filter((s) =>
+                      auth === "basic"
+                        ? s.scheme === "basic"
+                        : s.scheme === "bearer",
+                    )
+                    .map((s) => String(s.description ?? ""))
+                    .filter(Boolean)
+                    .join("\n")}
+                />
+                {auth === "basic" ? (
+                  <>
+                    <AuthField
+                      name="Authorization.username"
+                      label="Key ID"
+                      value={state.username}
+                      onChange={(username) => update({ username })}
+                    />
+                    <AuthField
+                      name="Authorization.password"
+                      label="Key secret"
+                      secret
+                      value={state.password}
+                      onChange={(password) => update({ password })}
+                    />
+                  </>
+                ) : (
+                  <AuthField
+                    name="Authorization"
+                    label="API key"
+                    secret
+                    value={state.token}
+                    onChange={(token) => update({ token })}
+                  />
+                )}
+              </div>
+            </details>
+          )}
+          {["path", "query", "header"].map(
+            (location) =>
+              parameters.some((p) => p.in === location) && (
+                <details className="pg-panel" open key={location}>
+                  <summary>
+                    {location === "path"
+                      ? "Path parameters"
+                      : location === "query"
+                        ? "Query parameters"
+                        : "Headers"}
+                  </summary>
+                  <div className="pg-panel-content">
+                    {parameters
+                      .filter((p) => p.in === location)
+                      .map((p) => (
+                        <Field
+                          key={p.name}
+                          name={p.name!}
+                          input={{
+                            ...p.schema,
+                            description: p.description ?? p.schema?.description,
+                          }}
+                          required={p.required || location === "path"}
+                          value={state.parameters[`${location}:${p.name}`]}
+                          doc={config.document}
+                          onChange={(v) =>
+                            update({
+                              parameters: {
+                                ...state.parameters,
+                                [`${location}:${p.name}`]: v,
+                              },
+                            })
+                          }
+                        />
+                      ))}
+                  </div>
+                </details>
+              ),
+          )}
+          {schema && (
+            <section className="pg-panel pg-body-panel">
+              <div className="pg-section-title">
+                <h3>Body</h3>
+                <select
+                  aria-label="Body editor"
+                  value={mode}
+                  onChange={(e) => setMode(e.target.value)}
+                >
+                  <option>Fields</option>
+                  <option>JSON</option>
+                </select>
+              </div>
+              <p className="pg-hint">
+                Fields and JSON are separate drafts. The selected mode is sent.
+              </p>
+              {mode === "JSON" ? (
+                <>
+                  <textarea
+                    aria-label="Request body JSON"
+                    spellCheck={false}
+                    value={jsonBody}
+                    onChange={(e) => setJsonBody(e.target.value)}
+                  />
+                  {jsonError && (
+                    <span role="alert" className="pg-error">
+                      {jsonError}
+                    </span>
+                  )}
+                </>
+              ) : (
+                <Field
+                  name="Request body"
+                  input={schema}
+                  value={state.body}
+                  required={config.operation.requestBody?.required}
+                  doc={config.document}
+                  onChange={(body) => update({ body })}
+                />
+              )}
+            </section>
+          )}
+          <details className="pg-panel pg-server-settings" open={!state.server}>
+            <summary>Server settings</summary>
+            <div className="pg-panel-content">
+              <label className="pg-server">
+                API server URL
+                <input
+                  aria-label="API server URL"
+                  type="url"
+                  required
+                  value={state.server}
+                  placeholder="https://your-api-host"
+                  onChange={(e) => update({ server: e.target.value })}
+                />
+              </label>
+            </div>
+          </details>
+        </div>
+        <PlaygroundOutput
+          config={config}
+          response={response}
+          error={error || setupError}
+          sending={sending}
+          sample={sample || setupError}
+          language={language}
+          setLanguage={setLanguage}
+        />
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/api/PlaygroundCode.tsx b/src/components/api/PlaygroundCode.tsx
new file mode 100644
index 000000000..3da82f56e
--- /dev/null
+++ b/src/components/api/PlaygroundCode.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+
+// Share the reference Code component's Shiki themes; load only playground languages.
+const highlighter = createHighlighterCore({
+  themes: [
+    import("shiki/themes/github-light.mjs"),
+    import("shiki/themes/github-dark.mjs"),
+  ],
+  langs: [
+    import("shiki/langs/bash.mjs"),
+    import("shiki/langs/javascript.mjs"),
+    import("shiki/langs/python.mjs"),
+    import("shiki/langs/json.mjs"),
+  ],
+  engine: createJavaScriptRegexEngine(),
+});
+export default function PlaygroundCode({
+  code,
+  language,
+}: {
+  code: string;
+  language: string;
+}) {
+  const [rendered, setRendered] = useState<{
+    code: string;
+    language: string;
+    html: string;
+  }>();
+  const [error, setError] = useState("");
+  useEffect(() => {
+    let active = true;
+    highlighter
+      .then((h) => {
+        const html = h.codeToHtml(code, {
+          lang: language,
+          themes: { light: "github-light", dark: "github-dark" },
+          defaultColor: false,
+        });
+        if (active) {
+          setRendered({ code, language, html });
+          setError("");
+        }
+      })
+      .catch((e) => {
+        if (active) setError(`Code highlighting failed: ${e.message}`);
+      });
+    return () => {
+      active = false;
+    };
+  }, [code, language]);
+  return (
+    <div className="pg-code">
+      {error && <p role="alert">{error}</p>}
+      {rendered?.code === code && rendered.language === language ? (
+        <div dangerouslySetInnerHTML={{ __html: rendered.html }} />
+      ) : (
+        <pre>
+          <code>{code}</code>
+        </pre>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/api/PlaygroundField.tsx b/src/components/api/PlaygroundField.tsx
new file mode 100644
index 000000000..23e14f560
--- /dev/null
+++ b/src/components/api/PlaygroundField.tsx
@@ -0,0 +1,325 @@
+import { buttonVariants } from "@/components/ui/button/variants";
+// Recursive schema controls. Nested JSON drafts live only as long as their field is mounted.
+import { useId, useState } from "react";
+import type { OpenApiSchema, OpenApiDocument } from "@/lib/openapi";
+import { schemaFor, validateValue, type Values } from "./playground-model";
+import PlaygroundCode from "./PlaygroundCode";
+
+function JsonInput({
+  value,
+  onChange,
+  label,
+}: {
+  value: unknown;
+  onChange: (v: unknown) => void;
+  label: string;
+}) {
+  const [draft, setDraft] = useState<{ text: string; error: string }>();
+  const text = draft?.text ?? JSON.stringify(value, null, 2) ?? "";
+  const error = draft?.error ?? "";
+  return (
+    <>
+      <textarea
+        aria-label={label}
+        value={text}
+        spellCheck={false}
+        onChange={(e) => {
+          const text = e.target.value;
+          try {
+            const next = text.trim() ? JSON.parse(text) : undefined;
+            onChange(next);
+            setDraft({ text, error: "" });
+            e.target.setCustomValidity("");
+          } catch {
+            setDraft({ text, error: "Enter valid JSON." });
+            e.target.setCustomValidity("Enter valid JSON.");
+          }
+        }}
+      />
+      {error && (
+        <span role="alert" className="pg-error">
+          {error}
+        </span>
+      )}
+    </>
+  );
+}
+
+export default function Field({
+  name,
+  input,
+  value,
+  onChange,
+  doc,
+  required = false,
+  depth = 0,
+}: {
+  name: string;
+  input: OpenApiSchema;
+  value: unknown;
+  onChange: (v: unknown) => void;
+  doc: OpenApiDocument;
+  required?: boolean;
+  depth?: number;
+}) {
+  const id = useId();
+  const [chosenVariant, setChosenVariant] = useState(0);
+  const schema = schemaFor(input, doc);
+  if (schema.readOnly) return null;
+  const variants = schema.oneOf ?? schema.anyOf;
+  if (variants?.length) {
+    const { oneOf: _oneOf, anyOf: _anyOf, ...base } = schema;
+    const matching =
+      value === undefined
+        ? -1
+        : variants.findIndex((variant) => {
+            try {
+              validateValue(variant, value, doc);
+              return true;
+            } catch {
+              return false;
+            }
+          });
+    const variantIndex = matching >= 0 ? matching : chosenVariant;
+    const selected = schemaFor(variants[variantIndex], doc);
+    const labels = variants.map((variant, index) => {
+      const option = schemaFor(variant, doc);
+      const discriminator = Object.values(option.properties ?? {}).find(
+        (p) => p.const !== undefined || p.enum?.length === 1,
+      );
+      return String(
+        option.title ??
+          discriminator?.const ??
+          discriminator?.enum?.[0] ??
+          `Option ${index + 1}`,
+      );
+    });
+    return (
+      <div className="pg-field">
+        <label htmlFor={id}>{name} type</label>
+        <select
+          id={id}
+          aria-label={`${name} type`}
+          value={variantIndex}
+          onChange={(e) => {
+            const index = Number(e.target.value);
+            setChosenVariant(index);
+            const option = schemaFor(variants[index], doc);
+            const defaults = Object.fromEntries(
+              Object.entries(option.properties ?? {})
+                .filter(
+                  ([, p]) => p.const !== undefined || p.enum?.length === 1,
+                )
+                .map(([key, p]) => [key, p.const ?? p.enum![0]]),
+            );
+            const shared =
+              value && typeof value === "object" && !Array.isArray(value)
+                ? Object.fromEntries(
+                    Object.entries(value).filter(([key, entry]) => {
+                      const property = option.properties?.[key];
+                      if (!property) return false;
+                      try {
+                        validateValue(property, entry, doc);
+                        return true;
+                      } catch {
+                        return false;
+                      }
+                    }),
+                  )
+                : {};
+            const next = { ...shared, ...defaults };
+            onChange(Object.keys(next).length ? next : undefined);
+          }}
+        >
+          {labels.map((label, index) => (
+            <option key={index} value={index}>
+              {label}
+            </option>
+          ))}
+        </select>
+        <Field
+          key={variantIndex}
+          name={name}
+          input={{ allOf: [base, selected] }}
+          value={value}
+          onChange={onChange}
+          doc={doc}
+          required={required}
+          depth={depth + 1}
+        />
+      </div>
+    );
+  }
+
+  const type = Array.isArray(schema.type)
+    ? schema.type.find((t) => t !== "null")
+    : (schema.type ?? (schema.properties ? "object" : "string"));
+  const complex = !!(
+    schema.oneOf ||
+    schema.anyOf ||
+    depth > 8 ||
+    (type === "object" && !schema.properties)
+  );
+  return (
+    <div
+      className={`pg-field ${!complex && type !== "object" && type !== "array" ? "pg-scalar" : ""}`}
+    >
+      <label htmlFor={id}>
+        <strong>{name}</strong>{" "}
+        <small>
+          {type}
+          {schema.format ? ` · ${schema.format}` : ""}
+        </small>
+        {required && <em>required</em>}
+        {schema.deprecated === true && <em>deprecated</em>}
+      </label>
+      {schema.description && <p>{schema.description}</p>}
+      {complex ? (
+        <>
+          <span className="pg-hint">
+            JSON value
+            {schema.oneOf || schema.anyOf ? " · schema alternatives" : ""}
+          </span>
+          <JsonInput label={name} value={value} onChange={onChange} />
+          <details className="pg-schema-details">
+            <summary>View schema</summary>
+            <PlaygroundCode
+              code={JSON.stringify(schema, null, 2)}
+              language="json"
+            />
+          </details>
+        </>
+      ) : schema.enum || type === "boolean" ? (
+        <select
+          id={id}
+          value={value === undefined ? "" : JSON.stringify(value)}
+          required={required}
+          onChange={(e) =>
+            onChange(
+              e.target.value === "" ? undefined : JSON.parse(e.target.value),
+            )
+          }
+        >
+          <option value="">Not set</option>
+          {(schema.enum ?? [true, false]).map((v) => (
+            <option key={JSON.stringify(v)} value={JSON.stringify(v)}>
+              {String(v)}
+            </option>
+          ))}
+        </select>
+      ) : type === "object" ? (
+        <div className="pg-nested">
+          {Object.entries(schema.properties ?? {}).map(([key, child]) => (
+            <Field
+              key={key}
+              name={key}
+              input={child}
+              value={(value as Values | undefined)?.[key]}
+              required={
+                !!schema.required?.includes(key) &&
+                (required || value !== undefined)
+              }
+              doc={doc}
+              depth={depth + 1}
+              onChange={(v) => {
+                const next = { ...((value as Values) ?? {}) };
+                if (v === undefined) delete next[key];
+                else next[key] = v;
+                onChange(Object.keys(next).length ? next : undefined);
+              }}
+            />
+          ))}
+          {schema.additionalProperties && (
+            <div className="pg-hint">
+              Use JSON mode to add custom properties.
+            </div>
+          )}
+        </div>
+      ) : type === "array" ? (
+        <div className="pg-nested">
+          {((value as unknown[]) ?? []).map((v, index) => (
+            <div className="pg-array-item" key={index}>
+              <Field
+                name={`${name}[${index}]`}
+                input={schema.items ?? {}}
+                value={v}
+                doc={doc}
+                required
+                depth={depth + 1}
+                onChange={(next) =>
+                  onChange(
+                    (value as unknown[]).map((x, i) =>
+                      i === index ? next : x,
+                    ),
+                  )
+                }
+              />
+              <button
+                className={buttonVariants({ size: "sm" })}
+                type="button"
+                onClick={() =>
+                  onChange((value as unknown[]).filter((_, i) => i !== index))
+                }
+              >
+                Remove item {index + 1}
+              </button>
+            </div>
+          ))}
+          <div className="pg-array-actions">
+            <button
+              className={buttonVariants({ size: "sm" })}
+              type="button"
+              onClick={() => {
+                const item = schemaFor(schema.items ?? {}, doc);
+                onChange([
+                  ...((value as unknown[]) ?? []),
+                  item.type === "object" || item.properties
+                    ? {}
+                    : item.type === "boolean"
+                      ? false
+                      : item.type === "number" || item.type === "integer"
+                        ? 0
+                        : "",
+                ]);
+              }}
+            >
+              Add an item
+            </button>
+            {value !== undefined && (
+              <button
+                className={buttonVariants({ size: "sm" })}
+                type="button"
+                onClick={() => onChange(undefined)}
+              >
+                Omit array
+              </button>
+            )}
+          </div>
+        </div>
+      ) : (
+        <input
+          id={id}
+          aria-label={name}
+          required={required}
+          type={type === "number" || type === "integer" ? "number" : "text"}
+          step={type === "integer" ? 1 : "any"}
+          value={value === undefined ? "" : String(value)}
+          placeholder={
+            schema.example === undefined ? name : String(schema.example)
+          }
+          min={typeof schema.minimum === "number" ? schema.minimum : undefined}
+          max={typeof schema.maximum === "number" ? schema.maximum : undefined}
+          onChange={(e) =>
+            onChange(
+              e.target.value === ""
+                ? undefined
+                : type === "number" || type === "integer"
+                  ? Number(e.target.value)
+                  : e.target.value,
+            )
+          }
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/api/PlaygroundOutput.tsx b/src/components/api/PlaygroundOutput.tsx
new file mode 100644
index 000000000..ea4544d66
--- /dev/null
+++ b/src/components/api/PlaygroundOutput.tsx
@@ -0,0 +1,197 @@
+import { layerCard, layerCardHeader } from "@/components/ui/layer-card/styles";
+import { buttonVariants } from "@/components/ui/button/variants";
+// Presentation only: request samples, example responses, and completed request results.
+import { useState } from "react";
+import PlaygroundCode from "./PlaygroundCode";
+import type { PlaygroundConfig } from "./playground-model";
+import type { PlaygroundResponse } from "./usePlaygroundRequest";
+
+function Copy({ text }: { text: string }) {
+  const [status, setStatus] = useState("Copy");
+  return (
+    <button
+      className={buttonVariants({ size: "sm" })}
+      type="button"
+      onClick={async () => {
+        try {
+          await navigator.clipboard.writeText(text);
+          setStatus("Copied");
+        } catch {
+          setStatus("Copy failed");
+        }
+      }}
+      onBlur={() => setStatus("Copy")}
+    >
+      {status}
+    </button>
+  );
+}
+interface Props {
+  config: PlaygroundConfig;
+  response?: PlaygroundResponse;
+  error: string;
+  sending: boolean;
+  sample: string;
+  language: string;
+  setLanguage: (language: string) => void;
+}
+export default function PlaygroundOutput({
+  config,
+  response,
+  error,
+  sending,
+  sample,
+  language,
+  setLanguage,
+}: Props) {
+  const [exampleIndex, setExampleIndex] = useState(0);
+  const examples = (config.responses ?? []).filter(
+    (r) => r.example !== undefined,
+  );
+  const example = examples[exampleIndex]?.example;
+  const exampleText = example
+    ? typeof example.value === "string" && !example.mediaType.includes("json")
+      ? example.value
+      : JSON.stringify(example.value, null, 2)
+    : "";
+  const [responseTab, setResponseTab] = useState("Body");
+  const shownResponse =
+    responseTab === "Headers" ? response?.headers : response?.body;
+  return (
+    <aside className="pg-output">
+      <div aria-live="polite">
+        {error && (
+          <p role="alert" className="pg-error">
+            {error}
+          </p>
+        )}
+        {sending && <p role="status">Sending request…</p>}
+      </div>
+      {response && (
+        <section
+          className={`${layerCard} pg-code-card`}
+          aria-label="Actual response"
+        >
+          <div className={`${layerCardHeader} pg-section-title`}>
+            <span className={response.status < 400 ? "pg-success" : "pg-error"}>
+              {response.status} — {response.statusText}
+            </span>
+            <small>{response.time} ms</small>
+            <select
+              aria-label="Response section"
+              value={responseTab}
+              onChange={(e) => setResponseTab(e.target.value)}
+            >
+              <option>Body</option>
+              <option>Headers</option>
+            </select>
+            <button
+              type="button"
+              className={buttonVariants({ size: "xs" })}
+              onClick={() => {
+                const url = URL.createObjectURL(new Blob([response.rawBody], { type: response.contentType }));
+                const link = document.createElement("a");
+                link.href = url;
+                link.download = `response-${response.status}.${response.contentType.includes("json") ? "json" : "txt"}`;
+                link.click();
+                setTimeout(() => URL.revokeObjectURL(url), 1000);
+              }}
+            >
+              Download
+            </button>
+            <Copy text={shownResponse ?? ""} />
+          </div>
+          <PlaygroundCode
+            code={shownResponse || "(empty response)"}
+            language={
+              responseTab === "Body" && /^[\s]*[\[{]/.test(shownResponse ?? "")
+                ? "json"
+                : "text"
+            }
+          />
+        </section>
+      )}
+      <section className={`${layerCard} pg-code-card`}>
+        <div className={`${layerCardHeader} pg-section-title`}>
+          <h3>{config.title}</h3>
+          <select
+            aria-label="Playground sample language"
+            value={language}
+            onChange={(e) => setLanguage(e.target.value)}
+          >
+            {["cURL", "JavaScript", "Python"].map((l) => (
+              <option key={l}>{l}</option>
+            ))}
+          </select>
+          <Copy text={sample} />
+        </div>
+        <PlaygroundCode
+          code={sample}
+          language={language === "cURL" ? "bash" : language.toLowerCase()}
+        />
+      </section>
+      {examples.length > 0 && (
+        <section
+          className={`${layerCard} pg-code-card`}
+          aria-label="Response examples"
+        >
+          <div className={`${layerCardHeader} pg-section-title`}>
+            <span className="pg-hint">Response example</span>
+            <div
+              className="pg-status-tabs"
+              role="tablist"
+              aria-label="Example response status"
+            >
+              {examples.map((r, i) => (
+                <button
+                  className={buttonVariants({ variant: "ghost", size: "xs" })}
+                  key={r.status}
+                  id={`pg-example-tab-${i}`}
+                  type="button"
+                  role="tab"
+                  aria-selected={i === exampleIndex}
+                  aria-controls="pg-example-panel"
+                  tabIndex={i === exampleIndex ? 0 : -1}
+                  onClick={() => setExampleIndex(i)}
+                  onKeyDown={(e) => {
+                    if (
+                      !["ArrowLeft", "ArrowRight", "Home", "End"].includes(
+                        e.key,
+                      )
+                    )
+                      return;
+                    e.preventDefault();
+                    const next =
+                      e.key === "Home"
+                        ? 0
+                        : e.key === "End"
+                          ? examples.length - 1
+                          : (i +
+                              (e.key === "ArrowRight" ? 1 : -1) +
+                              examples.length) %
+                            examples.length;
+                    setExampleIndex(next);
+                    document.getElementById(`pg-example-tab-${next}`)?.focus();
+                  }}
+                >
+                  {r.status}
+                </button>
+              ))}
+            </div>
+            <Copy text={exampleText} />
+          </div>
+          <div
+            id="pg-example-panel"
+            role="tabpanel"
+            aria-labelledby={`pg-example-tab-${exampleIndex}`}
+          >
+            <PlaygroundCode
+              code={exampleText}
+              language={example?.mediaType.includes("json") ? "json" : "text"}
+            />
+          </div>
+        </section>
+      )}
+    </aside>
+  );
+}
diff --git a/src/components/api/playground-model.ts b/src/components/api/playground-model.ts
new file mode 100644
index 000000000..79a51e7b9
--- /dev/null
+++ b/src/components/api/playground-model.ts
@@ -0,0 +1,312 @@
+import type { ApiResponseView } from "@cloudflare/nimbus-docs/api";
+import type {
+  OpenApiDocument,
+  OpenApiSchema,
+  OpenApiOperation,
+  OpenApiParameter,
+} from "@/lib/openapi";
+export interface PlaygroundConfig {
+  bodyExample?: unknown;
+  descriptionHtml?: string;
+  responses?: Pick<ApiResponseView, "status" | "example">[];
+  title: string;
+  method: string;
+  path: string;
+  document: OpenApiDocument;
+  operation: OpenApiOperation;
+  parameters: OpenApiParameter[];
+}
+export type Values = Record<string, unknown>;
+export interface RequestState {
+  server: string;
+  parameters: Values;
+  body?: unknown;
+  username: string;
+  password: string;
+  token: string;
+}
+export interface BuiltRequest {
+  url: string;
+  method: string;
+  headers: Record<string, string>;
+  body?: string;
+}
+export function resolve<T extends { $ref?: string }>(
+  value: T,
+  doc: OpenApiDocument,
+): T {
+  const seen = new Set<string>();
+  while (value.$ref) {
+    const ref = value.$ref;
+    if (!ref.startsWith("#/") || seen.has(ref))
+      throw new Error(`Unsupported or circular reference: ${ref}`);
+    seen.add(ref);
+    let target: unknown = doc;
+    for (const key of ref.slice(2).split("/"))
+      target = (target as Record<string, unknown>)?.[
+        key.replace(/~1/g, "/").replace(/~0/g, "~")
+      ];
+    if (!target || typeof target !== "object")
+      throw new Error(`Missing reference: ${ref}`);
+    const { $ref: _, ...rest } = value;
+    value = { ...target, ...rest } as T;
+  }
+  return value;
+}
+export function schemaFor(
+  input: OpenApiSchema,
+  doc: OpenApiDocument,
+  depth = 0,
+): OpenApiSchema {
+  if (depth > 30)
+    throw new Error("Schema composition exceeds the playground limit.");
+  const schema = resolve(input, doc);
+  if (!schema.allOf) return schema;
+  const { allOf, ...base } = schema;
+  return allOf.reduce((a, b) => {
+    const part = schemaFor(b, doc, depth + 1);
+    return {
+      ...a,
+      ...part,
+      properties: { ...a.properties, ...part.properties },
+      required: [...new Set([...(a.required ?? []), ...(part.required ?? [])])],
+    };
+  }, base);
+}
+export function bodySchema(
+  config: PlaygroundConfig,
+): OpenApiSchema | undefined {
+  const body =
+    config.operation.requestBody &&
+    resolve(config.operation.requestBody, config.document);
+  return body?.content?.["application/json"]?.schema;
+}
+export function authType(
+  config: PlaygroundConfig,
+): "basic" | "bearer" | "none" {
+  const requirements =
+    config.operation.security ?? config.document.security ?? [];
+  if (!requirements.length || requirements.some((r) => !Object.keys(r).length))
+    return "none";
+  const names = Object.keys(requirements[0]);
+  if (names.length !== 1)
+    throw new Error(
+      "This authentication combination is not supported by the playground yet.",
+    );
+  const scheme = config.document.components?.securitySchemes?.[names[0]];
+  if (
+    scheme?.type === "http" &&
+    (scheme.scheme === "basic" || scheme.scheme === "bearer")
+  )
+    return scheme.scheme;
+  throw new Error(
+    "This authentication scheme is not supported by the playground yet.",
+  );
+}
+export function validateValue(
+  input: OpenApiSchema,
+  value: unknown,
+  doc: OpenApiDocument,
+  name = "Body",
+  depth = 0,
+): void {
+  if (depth > 30)
+    throw new Error("Request nesting exceeds the playground limit.");
+  const schema = schemaFor(input, doc);
+  if (
+    value === null &&
+    (schema.nullable ||
+      (Array.isArray(schema.type) && schema.type.includes("null")))
+  )
+    return;
+  // Union values are checked against each declared alternative, never coerced.
+  const variants = schema.oneOf ?? schema.anyOf;
+  if (variants) {
+    const matches = variants.filter((variant) => {
+      try {
+        validateValue(variant, value, doc, name, depth + 1);
+        return true;
+      } catch {
+        return false;
+      }
+    });
+    if (!matches.length || (schema.oneOf && matches.length !== 1))
+      throw new Error(
+        `${name} must match ${schema.oneOf ? "exactly one" : "a"} schema alternative.`,
+      );
+  }
+  if (
+    schema.const !== undefined &&
+    JSON.stringify(schema.const) !== JSON.stringify(value)
+  )
+    throw new Error(`${name} must equal ${JSON.stringify(schema.const)}.`);
+  if (
+    schema.enum &&
+    !schema.enum.some((v) => JSON.stringify(v) === JSON.stringify(value))
+  )
+    throw new Error(`${name} must be one of the listed values.`);
+  const type = Array.isArray(schema.type)
+    ? schema.type.find((t) => t !== "null")
+    : (schema.type ?? (schema.properties ? "object" : undefined));
+  if (type === "null" && value !== null)
+    throw new Error(`${name} must be null.`);
+  if (type === "object") {
+    if (!value || typeof value !== "object" || Array.isArray(value))
+      throw new Error(`${name} must be an object.`);
+    const object = value as Values;
+    for (const key of schema.required ?? [])
+      if (object[key] === undefined)
+        throw new Error(`${name}.${key} is required.`);
+    for (const [key, child] of Object.entries(object)) {
+      if (schema.properties?.[key])
+        validateValue(
+          schema.properties[key],
+          child,
+          doc,
+          `${name}.${key}`,
+          depth + 1,
+        );
+      else if (schema.additionalProperties === false)
+        throw new Error(`${name}.${key} is not an allowed property.`);
+      else if (typeof schema.additionalProperties === "object")
+        validateValue(
+          schema.additionalProperties,
+          child,
+          doc,
+          `${name}.${key}`,
+          depth + 1,
+        );
+    }
+  } else if (type === "array") {
+    if (!Array.isArray(value)) throw new Error(`${name} must be an array.`);
+    value.forEach(
+      (v, i) =>
+        schema.items &&
+        validateValue(schema.items, v, doc, `${name}[${i}]`, depth + 1),
+    );
+  } else if (
+    type &&
+    type !== "null" &&
+    (typeof value !== (type === "integer" ? "number" : type) ||
+      (type === "integer" && !Number.isInteger(value)))
+  )
+    throw new Error(`${name} must be ${type}.`);
+  if (typeof value === "string") {
+    if (typeof schema.minLength === "number" && value.length < schema.minLength)
+      throw new Error(`${name} is too short.`);
+    if (typeof schema.maxLength === "number" && value.length > schema.maxLength)
+      throw new Error(`${name} is too long.`);
+    if (
+      typeof schema.pattern === "string" &&
+      !new RegExp(schema.pattern).test(value)
+    )
+      throw new Error(`${name} does not match the required pattern.`);
+  }
+  if (Array.isArray(value)) {
+    if (typeof schema.minItems === "number" && value.length < schema.minItems)
+      throw new Error(`${name} needs more items.`);
+    if (typeof schema.maxItems === "number" && value.length > schema.maxItems)
+      throw new Error(`${name} has too many items.`);
+    if (
+      schema.uniqueItems &&
+      new Set(value.map((v) => JSON.stringify(v))).size !== value.length
+    )
+      throw new Error(`${name} requires unique items.`);
+  }
+  if (
+    typeof value === "number" &&
+    ((schema.exclusiveMinimum === true && value === schema.minimum) ||
+      (typeof schema.exclusiveMinimum === "number" &&
+        value <= schema.exclusiveMinimum) ||
+      (schema.exclusiveMaximum === true && value === schema.maximum) ||
+      (typeof schema.exclusiveMaximum === "number" &&
+        value >= schema.exclusiveMaximum))
+  )
+    throw new Error(`${name} is outside the allowed range.`);
+  if (
+    typeof value === "number" &&
+    (!Number.isFinite(value) ||
+      (typeof schema.minimum === "number" && value < schema.minimum) ||
+      (typeof schema.maximum === "number" && value > schema.maximum))
+  )
+    throw new Error(`${name} is outside the allowed range.`);
+}
+export function buildRequest(
+  config: PlaygroundConfig,
+  state: RequestState,
+  strict = true,
+): BuiltRequest {
+  let path = config.path;
+  const query = new URLSearchParams();
+  const headers: Record<string, string> = { Accept: "application/json" };
+  for (const raw of config.parameters) {
+    const p = resolve(raw, config.document);
+    const key = `${p.in}:${p.name}`;
+    const value = state.parameters[key];
+    if (value === undefined || value === "") {
+      if (strict && (p.required || p.in === "path"))
+        throw new Error(`${p.name} is required.`);
+      continue;
+    }
+    if (strict && p.schema)
+      validateValue(p.schema, value, config.document, p.name);
+    if (p.in === "path")
+      path = path.replaceAll(`{${p.name}}`, encodeURIComponent(String(value)));
+    else if (p.in === "query") {
+      if (Array.isArray(value))
+        value.forEach((v) => query.append(p.name!, String(v)));
+      else if (value !== null && typeof value === "object")
+        throw new Error(
+          `Object query parameter ${p.name} is not supported yet.`,
+        );
+      else query.append(p.name!, String(value));
+    } else if (p.in === "header") headers[p.name!] = String(value);
+    else throw new Error(`Parameter location ${p.in} is not supported yet.`);
+  }
+  const server = state.server.replace(/\/$/, "");
+  if (!/^https?:\/\//.test(server) || server.includes("{"))
+    throw new Error("Choose a valid API server URL.");
+  const auth = authType(config);
+  if (auth === "basic" && (state.username || state.password)) {
+    const bytes = new TextEncoder().encode(
+      `${state.username}:${state.password}`,
+    );
+    headers.Authorization = `Basic ${btoa(Array.from(bytes, (byte) => String.fromCharCode(byte)).join(""))}`;
+  } else if (auth === "bearer" && state.token)
+    headers.Authorization = `Bearer ${state.token}`;
+  let body: string | undefined;
+  const schema = bodySchema(config);
+  const requestBody =
+    config.operation.requestBody &&
+    resolve(config.operation.requestBody, config.document);
+  if (strict && requestBody?.required && state.body === undefined)
+    throw new Error("Request body is required.");
+  if (state.body !== undefined) {
+    if (strict && schema) validateValue(schema, state.body, config.document);
+    body = JSON.stringify(state.body, null, 2);
+    headers["Content-Type"] = "application/json";
+  }
+  return {
+    url: server + path + (query.size ? `?${query}` : ""),
+    method: config.method.toUpperCase(),
+    headers,
+    body,
+  };
+}
+export function requestSample(request: BuiltRequest, language: string): string {
+  const quote = (s: string) => `'${s.replaceAll("'", "'\\''")}'`;
+  if (language === "JavaScript")
+    return `const response = await fetch(${JSON.stringify(request.url)}, ${JSON.stringify({ method: request.method, headers: request.headers, ...(request.body === undefined ? {} : { body: request.body }) }, null, 2)});\nconsole.log(await response.text());`;
+  if (language === "Python")
+    return `import requests\n\nresponse = requests.request(\n    ${JSON.stringify(request.method)},\n    ${JSON.stringify(request.url)},\n    headers=${JSON.stringify(request.headers, null, 4)},${request.body === undefined ? "" : `\n    data=${JSON.stringify(request.body)},`}\n)\nprint(response.text)`;
+  return [
+    `curl --request ${request.method}`,
+    `  --url ${quote(request.url)}`,
+    ...Object.entries(request.headers).map(
+      ([key, value]) => `  --header ${quote(`${key}: ${value}`)}`,
+    ),
+    ...(request.body === undefined
+      ? []
+      : [`  --data-raw ${quote(request.body)}`]),
+  ].join(" \\\n");
+}
diff --git a/src/components/api/playground.css b/src/components/api/playground.css
new file mode 100644
index 000000000..2441b6ab7
--- /dev/null
+++ b/src/components/api/playground.css
@@ -0,0 +1,621 @@
+.ch-api-playground:not([open]) {
+  display: none;
+}
+.ch-api-playground[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.ch-api-playground::backdrop {
+  background: #0009;
+  backdrop-filter: blur(3px);
+}
+.ch-playground-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--nb-border);
+  flex-shrink: 0;
+}
+.ch-playground-modal-body {
+  overflow: auto;
+  padding: 0;
+  overscroll-behavior: contain;
+}
+html:has(.ch-api-playground[open]) {
+  overflow: hidden;
+}
+
+.ch-playground-endpoint-picker {
+  min-width: 0;
+  flex: 1;
+}
+
+/* One persistent toolbar for selecting and sending requests. */
+.ch-playground-modal-header {
+  gap: 16px;
+  padding: 16px 20px;
+}
+.ch-playground-endpoint-picker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 1 390px;
+  min-width: 180px;
+}
+[data-playground-toolbar] {
+  min-width: 0;
+  flex: 1;
+}
+.pg-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.ch-playground-endpoint-picker > button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+  padding: 9px 10px;
+  border: 1px solid var(--nb-border);
+  border-radius: 6px;
+  color: var(--nb-foreground);
+  background: var(--nb-muted);
+  font: 600 13px var(--font-sans);
+  cursor: pointer;
+}
+[data-playground-endpoint-title] {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pg-endpoint-options {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 6px;
+  overflow: auto;
+  border: 1px solid var(--nb-border-strong);
+  border-radius: 8px;
+  background: var(--nb-background);
+  color: var(--nb-foreground);
+  box-shadow: 0 12px 36px #0006;
+}
+.pg-endpoint-options button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border: 0;
+  border-radius: 5px;
+  padding: 9px 10px;
+  text-align: left;
+  background: transparent;
+  color: inherit;
+  font: 13px/1.4 var(--font-sans);
+  cursor: pointer;
+}
+.pg-endpoint-options button:is(:hover, :focus-visible, [aria-selected="true"]) {
+  background: var(--nb-muted);
+}
+.pg-endpoint-options button:focus-visible,
+.ch-playground-endpoint-picker > button:focus-visible {
+  outline: 2px solid var(--nb-primary);
+  outline-offset: -2px;
+}
+.pg-endpoint-group {
+  padding: 10px;
+  color: var(--nb-muted-foreground);
+  font: 600 11px var(--font-sans);
+}
+
+.ch-api-playground {
+  position: fixed;
+  inset: 0;
+  width: min(1200px, calc(100vw - 48px));
+  max-width: none;
+  height: calc(100dvh - 64px);
+  max-height: none;
+  margin: auto;
+  padding: 0;
+  border: 1px solid var(--nb-border-strong);
+  border-radius: 14px;
+  background: var(--nb-background);
+  color: var(--nb-foreground);
+  overflow: hidden;
+  box-shadow: 0 24px 100px #0008;
+  --pg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+}
+.pg-app {
+  color: var(--nb-foreground);
+  font: 14px/1.6 var(--font-sans);
+}
+.pg-app * {
+  box-sizing: border-box;
+}
+.pg-request-bar {
+  display: flex;
+  align-items: center;
+}
+
+.pg-app section {
+  margin: 0 0 28px;
+}
+.pg-app h3 {
+  margin: 0 0 12px;
+  font-size: 16px;
+  font-weight: 600;
+}
+.pg-app p {
+  margin: 4px 0 12px;
+  font-size: 13px;
+}
+.pg-app label {
+  display: block;
+  font-size: 13px;
+  margin-bottom: 10px;
+}
+.pg-app :is(input, select, textarea) {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  padding: 9px 11px;
+  background: var(--nb-background);
+  color: var(--nb-foreground);
+  border: 1px solid var(--nb-border-strong);
+  border-radius: 6px;
+  font: 13px var(--font-sans);
+}
+.pg-app textarea {
+  min-height: 150px;
+  font: 12px/1.6 var(--font-mono);
+  resize: vertical;
+}
+.pg-app :is(input, textarea, select):focus-visible {
+  outline: 2px solid var(--nb-primary);
+  outline-offset: 2px;
+}
+.pg-field {
+  margin: 16px 0;
+}
+.pg-hint {
+  color: var(--nb-muted-foreground);
+}
+.pg-nested {
+  border-left: 1px solid var(--nb-border);
+  padding-left: 16px;
+}
+.pg-array-item {
+  padding-bottom: 12px;
+}
+.pg-section-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+.pg-section-title h3 {
+  margin: 0;
+  margin-right: auto;
+}
+.pg-section-title select {
+  width: auto;
+  margin: 0;
+}
+.pg-error {
+  color: #e86c6c;
+  overflow-wrap: anywhere;
+}
+.pg-success {
+  color: #58b888;
+}
+.pg-server {
+  margin-bottom: 24px;
+}
+
+.pg-app.pg-request-bar {
+  padding: 0;
+  border: 0;
+  gap: 10px;
+  flex-wrap: nowrap;
+}
+.pg-request-bar code {
+  flex: 1;
+  overflow: auto;
+  font: 13px var(--font-mono);
+  min-width: 0;
+  white-space: nowrap;
+}
+.pg-request-bar button {
+  flex-shrink: 0;
+}
+
+.pg-method {
+  flex-shrink: 0;
+}
+.pg-method.is-get {
+  color: var(--nb-success);
+  background: var(--nb-success-muted);
+}
+.pg-method.is-post,
+.pg-method.is-put,
+.pg-method.is-head,
+.pg-method.is-options {
+  color: var(--nb-info);
+  background: var(--nb-info-muted);
+}
+.pg-method.is-patch {
+  color: var(--nb-warning);
+  background: var(--nb-warning-muted);
+}
+.pg-method.is-delete {
+  color: var(--nb-danger);
+  background: var(--nb-danger-muted);
+}
+
+.pg-endpoint {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+  padding: 9px 10px;
+  background: var(--nb-muted);
+  border: 1px solid var(--nb-border);
+  border-radius: 6px;
+}
+.pg-request-bar .pg-endpoint code {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.pg-code-card > .pg-section-title {
+  padding: 10px 12px;
+  margin: 0;
+  flex-wrap: nowrap;
+  border-bottom: 1px solid var(--nb-border);
+}
+.pg-code-card .pg-section-title h3 {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pg-code-card .pg-section-title select {
+  max-width: 110px;
+  font-size: 12px;
+}
+.pg-code-card .pg-section-title button {
+  padding: 4px 8px;
+}
+.pg-app .pg-code pre {
+  margin: 0;
+  padding: 16px;
+  overflow: auto;
+  max-height: 520px;
+  white-space: pre;
+  border: 0;
+  border-radius: 0;
+  background: var(--nb-muted);
+  font: 12px/1.65 var(--font-mono);
+}
+.pg-code code {
+  padding: 0;
+  background: transparent;
+  font: inherit;
+}
+.pg-code .shiki,
+.pg-code .shiki span {
+  color: var(--shiki-light);
+}
+:root.dark .pg-code .shiki,
+:root.dark .pg-code .shiki span,
+:root[data-theme="dark"] .pg-code .shiki,
+:root[data-theme="dark"] .pg-code .shiki span {
+  color: var(--shiki-dark);
+}
+.pg-status-tabs {
+  display: flex;
+  flex: 1;
+  gap: 4px;
+}
+.pg-app .pg-status-tabs button {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+}
+.pg-app .pg-status-tabs button[aria-selected="true"] {
+  border-bottom-color: var(--nb-primary);
+}
+
+.pg-columns {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 32px;
+  padding: 24px 18px;
+}
+.pg-inputs,
+.pg-output {
+  min-width: 0;
+  padding: 0;
+}
+.pg-output {
+  background: transparent;
+  border: 0;
+}
+.pg-intro {
+  margin-bottom: 24px;
+}
+.pg-intro h3 {
+  margin-bottom: 4px;
+  font-size: 16px;
+}
+.pg-app .pg-description {
+  white-space: pre-line;
+  font-size: 14px;
+  line-height: 1.7;
+  margin: 0 0 12px;
+  overflow-wrap: anywhere;
+}
+.pg-description a {
+  color: var(--nb-primary);
+  text-decoration: none;
+}
+.pg-panel {
+  border: 1px solid var(--nb-border-strong);
+  border-radius: 14px;
+  padding: 0 16px;
+  margin-bottom: 24px;
+}
+.pg-panel > summary {
+  padding: 12px 0;
+  font-size: 14px;
+  cursor: pointer;
+}
+.pg-panel[open] > summary {
+  border-bottom: 1px solid var(--nb-border-strong);
+  margin-bottom: 10px;
+}
+.pg-panel-content > .pg-description {
+  margin-bottom: 0;
+  padding-bottom: 12px;
+}
+.pg-auth-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+  padding: 22px 0;
+  border-top: 1px solid var(--nb-border);
+}
+.pg-auth-row label {
+  margin: 0;
+}
+.pg-auth-row strong,
+.pg-field strong {
+  font: 600 12px var(--font-mono);
+  overflow-wrap: anywhere;
+}
+.pg-auth-row small,
+.pg-field small {
+  background: var(--nb-muted);
+  color: var(--nb-foreground);
+  padding: 3px 6px;
+  border-radius: 5px;
+  font: 11px var(--font-mono);
+}
+.pg-auth-row em,
+.pg-field em {
+  display: table;
+  margin: 10px 0 0;
+  background: var(--nb-danger-muted);
+  color: var(--nb-danger);
+  font: 11px var(--font-mono);
+  padding: 3px 6px;
+  border-radius: 4px;
+}
+.pg-auth-row input {
+  margin: 0;
+}
+.pg-scalar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px 20px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--nb-border);
+}
+.pg-scalar > label {
+  grid-column: 1;
+  margin: 0;
+}
+.pg-scalar > p {
+  grid-column: 1;
+  grid-row: 2;
+}
+.pg-scalar > input,
+.pg-scalar > select {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: start;
+  height: 36px;
+  min-width: 0;
+  margin: 0;
+}
+.pg-body-panel {
+  padding-top: 14px;
+}
+.pg-server-settings {
+  margin-top: 24px;
+}
+
+/* Consistent closed-state controls while retaining native select interactions. */
+.ch-api-playground .pg-app select {
+  appearance: none;
+  -webkit-appearance: none;
+  height: 36px;
+  padding: 0 34px 0 12px;
+  line-height: normal;
+  border: 1px solid var(--nb-border-strong);
+  border-radius: 6px;
+  background-color: var(--nb-background);
+  background-image: var(--pg-chevron);
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  cursor: pointer;
+}
+.ch-api-playground .pg-section-title select {
+  min-width: 88px;
+}
+.ch-api-playground .pg-code-card select {
+  height: 30px;
+}
+.ch-playground-endpoint-picker > button {
+  height: 36px;
+  padding: 0 10px;
+  border-color: var(--nb-border-strong);
+  background: var(--nb-background);
+}
+.pg-select-chevron {
+  flex: 0 0 16px;
+  color: var(--nb-muted-foreground);
+}
+.ch-playground-endpoint-picker
+  > button[aria-expanded="true"]
+  .pg-select-chevron {
+  transform: rotate(180deg);
+}
+
+.ch-api-playground .pg-app summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  list-style: none;
+  cursor: pointer;
+}
+.ch-api-playground .pg-app summary::-webkit-details-marker {
+  display: none;
+}
+.ch-api-playground .pg-app summary::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+  background: var(--pg-chevron) center / 16px no-repeat;
+  transform: rotate(-90deg);
+}
+.ch-api-playground .pg-app details[open] > summary::before {
+  transform: rotate(0deg);
+}
+.ch-api-playground .pg-app summary:focus-visible {
+  outline: 2px solid var(--nb-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Keep spec subheadings subordinate to the playground's endpoint title. */
+.ch-api-playground .pg-intro .pg-description {
+  white-space: normal;
+}
+.ch-api-playground .pg-intro .pg-description :is(h1, h2, h3, h4, h5, h6) {
+  margin: 20px 0 8px;
+  padding: 0;
+  border: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+  letter-spacing: normal;
+}
+
+.ch-api-playground .pg-schema-details {
+  margin-top: 8px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+.ch-api-playground .pg-schema-details > summary {
+  justify-content: flex-start;
+  width: fit-content;
+  margin: 0;
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  color: var(--nb-muted-foreground);
+  font: 12px/1.5 var(--font-sans);
+}
+.ch-api-playground .pg-schema-details > summary:hover {
+  color: var(--nb-foreground);
+}
+.ch-api-playground .pg-schema-details > .pg-code {
+  margin-top: 8px;
+  border: 1px solid var(--nb-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.pg-array-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 4px 0 12px;
+}
+.pg-array-item > button {
+  margin-top: 8px;
+}
+
+/* Responsive overrides follow the complete base styles. */
+@media (max-width: 640px) {
+  .ch-api-playground {
+    width: 100vw;
+    height: 100dvh;
+    border-radius: 0;
+    border: 0;
+  }
+}
+@media (max-width: 800px) {
+  .ch-playground-modal-header {
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 12px 16px;
+  }
+  .ch-playground-endpoint-picker {
+    flex: 1;
+  }
+  [data-playground-toolbar] {
+    order: 3;
+    flex-basis: 100%;
+  }
+}
+@media (max-width: 800px) {
+  .pg-columns {
+    grid-template-columns: 1fr;
+    padding: 16px;
+    gap: 20px;
+  }
+}
+@media (max-width: 480px) {
+  .pg-auth-row,
+  .pg-scalar {
+    display: block;
+  }
+  .pg-auth-row input,
+  .pg-scalar > input,
+  .pg-scalar > select {
+    margin-top: 12px;
+  }
+}
diff --git a/src/components/api/usePlaygroundRequest.ts b/src/components/api/usePlaygroundRequest.ts
new file mode 100644
index 000000000..e7ae9c1b4
--- /dev/null
+++ b/src/components/api/usePlaygroundRequest.ts
@@ -0,0 +1,80 @@
+// Owns fetch, cancellation, and response state; never persists credentials or sends on render.
+import { useEffect, useRef, useState } from "react";
+import {
+  buildRequest,
+  type PlaygroundConfig,
+  type RequestState,
+} from "./playground-model";
+
+export type PlaygroundResponse = {
+  status: number;
+  statusText: string;
+  time: number;
+  body: string;
+  rawBody: string;
+  contentType: string;
+  headers: string;
+};
+
+export function usePlaygroundRequest(
+  config: PlaygroundConfig,
+  activeState: RequestState,
+  jsonError: string,
+) {
+  const [error, setError] = useState("");
+  const [sending, setSending] = useState(false);
+  const [response, setResponse] = useState<PlaygroundResponse>();
+  const abort = useRef<AbortController | null>(null);
+  useEffect(() => () => abort.current?.abort(), []);
+  async function send() {
+    setError("");
+    try {
+      if (jsonError) throw new Error(jsonError);
+      const request = buildRequest(config, activeState);
+      const controller = new AbortController();
+      abort.current = controller;
+      setSending(true);
+      setResponse(undefined);
+      const start = performance.now();
+      const result = await fetch(request.url, {
+        method: request.method,
+        headers: request.headers,
+        body: request.body,
+        signal: controller.signal,
+        credentials: "omit",
+        redirect: "error",
+      });
+      const raw = await result.text();
+      let body = raw;
+      if (result.headers.get("content-type")?.includes("json") && raw)
+        body = JSON.stringify(JSON.parse(raw), null, 2);
+      setResponse({
+        status: result.status,
+        statusText: result.statusText,
+        time: Math.round(performance.now() - start),
+        body,
+        rawBody: raw,
+        contentType: result.headers.get("content-type") || "text/plain",
+        headers: Array.from(result.headers)
+          .map(([k, v]) => `${k}: ${v}`)
+          .join("\n"),
+      });
+    } catch (e) {
+      setError(
+        (e as Error).name === "AbortError"
+          ? "Request cancelled."
+          : (e as Error).message,
+      );
+    } finally {
+      setSending(false);
+      abort.current = null;
+    }
+  }
+  return {
+    error,
+    sending,
+    response,
+    send,
+    cancel: () => abort.current?.abort(),
+  };
+}
diff --git a/src/components/ui/layer-card/LayerCard.astro b/src/components/ui/layer-card/LayerCard.astro
index 8473c7bcd..1df6e5173 100644
--- a/src/components/ui/layer-card/LayerCard.astro
+++ b/src/components/ui/layer-card/LayerCard.astro
@@ -7,6 +7,7 @@
  *     <LayerCardContent>Main content</LayerCardContent>
  *   </LayerCard>
  */
+import { layerCard } from "./styles";
 import { cn } from "@/lib/cn";
 import type { HTMLAttributes } from "astro/types";
 
@@ -16,7 +17,7 @@ const { class: className, ...attrs } = Astro.props;
 ---
 
 <div
-  class={cn("flex w-full flex-col overflow-hidden rounded-lg bg-muted text-sm ring ring-border", className)}
+  class={cn(layerCard, className)}
   {...attrs}
 >
   <slot />
diff --git a/src/components/ui/layer-card/LayerCardHeader.astro b/src/components/ui/layer-card/LayerCardHeader.astro
index b9be40458..deb46ad88 100644
--- a/src/components/ui/layer-card/LayerCardHeader.astro
+++ b/src/components/ui/layer-card/LayerCardHeader.astro
@@ -1,5 +1,6 @@
 ---
 /** LayerCardHeader — recessed header layer of a LayerCard. */
+import { layerCardHeader } from "./styles";
 import { cn } from "@/lib/cn";
 import type { HTMLAttributes } from "astro/types";
 
@@ -9,7 +10,7 @@ const { class: className, ...attrs } = Astro.props;
 ---
 
 <div
-  class={cn("flex items-center gap-2 bg-muted px-3 py-2 text-[0.8125rem] font-medium leading-5 text-muted-foreground", className)}
+  class={cn(layerCardHeader, className)}
   {...attrs}
 >
   <slot />
diff --git a/src/components/ui/layer-card/styles.ts b/src/components/ui/layer-card/styles.ts
new file mode 100644
index 000000000..cc523b999
--- /dev/null
+++ b/src/components/ui/layer-card/styles.ts
@@ -0,0 +1,5 @@
+// Shared presentation for Astro cards and interactive React content.
+export const layerCard =
+  "flex w-full flex-col overflow-hidden rounded-lg bg-muted text-sm ring ring-border";
+export const layerCardHeader =
+  "flex items-center gap-2 bg-muted px-3 py-2 text-[0.8125rem] font-medium leading-5 text-muted-foreground";
diff --git a/src/components/ui/sidebar/Sidebar.astro b/src/components/ui/sidebar/Sidebar.astro
index 3d42cf946..f30057872 100644
--- a/src/components/ui/sidebar/Sidebar.astro
+++ b/src/components/ui/sidebar/Sidebar.astro
@@ -8,6 +8,7 @@ import { cn } from "@/lib/cn";
 import type { HTMLAttributes } from "astro/types";
 import SidebarGroup from "./SidebarGroup.astro";
 import SidebarLink from "./SidebarLink.astro";
+import type { ApiSidebarMetadata } from "@/lib/sidebar-lazy";
 import type { SidebarItem } from "@cloudflare/nimbus-docs/types";
 import { sidebarHash } from "@cloudflare/nimbus-docs";
 
@@ -25,7 +26,7 @@ const { items, persist = false, currentLocale, class: className, ...attrs } = As
 const SIDEBAR_STATE_VERSION = 2;
 const hash = `${SIDEBAR_STATE_VERSION}:${sidebarHash(items)}`;
 type LazyGroup = Extract<SidebarItem, { type: "group" }> & { _lazyKey?: string };
-type IconItem = { icon?: string };
+type IconItem = ApiSidebarMetadata & { icon?: string };
 ---
 
 <div
@@ -55,11 +56,11 @@ type IconItem = { icon?: string };
         </li>
       ) : item.type === "external" ? (
         <li>
-          <SidebarLink label={item.label} href={item.href} badge={item.badge} icon={(item as IconItem).icon} target="_blank" rel="noopener" />
+          <SidebarLink label={item.label} href={item.href} badge={item.badge} icon={(item as IconItem).icon} statusBadge={(item as IconItem).statusBadge} deprecated={(item as IconItem).deprecated} target="_blank" rel="noopener" />
         </li>
       ) : (
         <li>
-          <SidebarLink label={item.label} href={item.href} isCurrent={item.isCurrent} badge={item.badge} icon={(item as IconItem).icon} />
+          <SidebarLink label={item.label} href={item.href} isCurrent={item.isCurrent} badge={item.badge} icon={(item as IconItem).icon} statusBadge={(item as IconItem).statusBadge} deprecated={(item as IconItem).deprecated} />
         </li>
       ),
     )}
diff --git a/src/components/ui/sidebar/SidebarChildren.astro b/src/components/ui/sidebar/SidebarChildren.astro
index cd5146146..2d2dd457d 100644
--- a/src/components/ui/sidebar/SidebarChildren.astro
+++ b/src/components/ui/sidebar/SidebarChildren.astro
@@ -5,6 +5,7 @@
  */
 import SidebarGroup from "./SidebarGroup.astro";
 import SidebarLink from "./SidebarLink.astro";
+import type { ApiSidebarMetadata } from "@/lib/sidebar-lazy";
 import type { SidebarItem } from "@cloudflare/nimbus-docs/types";
 
 interface Props {
@@ -14,7 +15,7 @@ interface Props {
 
 const { items, currentLocale } = Astro.props;
 type LazyGroup = Extract<SidebarItem, { type: "group" }> & { _lazyKey?: string };
-type IconItem = { icon?: string };
+type IconItem = ApiSidebarMetadata & { icon?: string };
 ---
 
 <ul class="mt-0.5 ml-3 list-none border-l border-border p-0 pl-2 flex flex-col gap-px" data-nb-sidebar-children>
@@ -34,9 +35,9 @@ type IconItem = { icon?: string };
           currentLocale={currentLocale}
         />
       ) : item.type === "external" ? (
-        <SidebarLink label={item.label} href={item.href} badge={item.badge} icon={(item as IconItem).icon} target="_blank" rel="noopener" />
+        <SidebarLink label={item.label} href={item.href} badge={item.badge} icon={(item as IconItem).icon} statusBadge={(item as IconItem).statusBadge} deprecated={(item as IconItem).deprecated} target="_blank" rel="noopener" />
       ) : (
-        <SidebarLink label={item.label} href={item.href} isCurrent={item.isCurrent} badge={item.badge} icon={(item as IconItem).icon} />
+        <SidebarLink label={item.label} href={item.href} isCurrent={item.isCurrent} badge={item.badge} icon={(item as IconItem).icon} statusBadge={(item as IconItem).statusBadge} deprecated={(item as IconItem).deprecated} />
       )}
     </li>
   ))}
diff --git a/src/components/ui/sidebar/SidebarLink.astro b/src/components/ui/sidebar/SidebarLink.astro
index 4ec35411e..1802aae6d 100644
--- a/src/components/ui/sidebar/SidebarLink.astro
+++ b/src/components/ui/sidebar/SidebarLink.astro
@@ -12,9 +12,11 @@ interface Props extends HTMLAttributes<"a"> {
   isCurrent?: boolean;
   badge?: SidebarBadge;
   icon?: string;
+  statusBadge?: string;
+  deprecated?: boolean;
 }
 
-const { label, href, isCurrent, badge, icon, class: className, ...attrs } = Astro.props;
+const { label, href, isCurrent, badge, icon, statusBadge, deprecated, class: className, ...attrs } = Astro.props;
 const isMethodBadge = typeof badge === "object" && /^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)$/.test(badge.text);
 const iconName = icon && !icon.startsWith("/")
   ? icon.includes(":")
@@ -38,12 +40,25 @@ const imageIcon = icon?.startsWith("/") ? inlinePublicIcon(icon) : undefined;
   ) : (
     <Icon name={iconName!} class="shrink-0 h-4 w-4 text-muted-foreground" />
   ))}
-  {isMethodBadge && typeof badge === "object" && <Badge text={badge.text} variant={badge.variant} class="ch-sidebar-method" />}
-  <span class="break-words">{label}</span>
-  {badge && !isMethodBadge &&
-    (typeof badge === "string" ? (
-      <Badge text={badge} />
-    ) : (
-      <Badge text={badge.text} variant={badge.variant} />
-    ))}
+  {isMethodBadge && typeof badge === "object" && (statusBadge || deprecated) ? (
+    <span class="flex min-w-0 flex-col gap-1">
+      <span class="flex flex-wrap items-center gap-1">
+        <Badge text={badge.text} variant={badge.variant} class="ch-sidebar-method" />
+        {statusBadge && <Badge text={statusBadge} variant="info" />}
+        {deprecated && <Badge text="deprecated" variant="warning" />}
+      </span>
+      <span class:list={["break-words", deprecated && "line-through"]}>{label}</span>
+    </span>
+  ) : (
+    <>
+      {isMethodBadge && typeof badge === "object" && <Badge text={badge.text} variant={badge.variant} class="ch-sidebar-method" />}
+      <span class="break-words">{label}</span>
+      {badge && !isMethodBadge &&
+        (typeof badge === "string" ? (
+          <Badge text={badge} />
+        ) : (
+          <Badge text={badge.text} variant={badge.variant} />
+        ))}
+    </>
+  )}
 </a>
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index eab6718a4..a2753411a 100644
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -29,6 +29,7 @@ import type { Alternate } from "./BaseLayout.astro";
 type Props = Omit<DocsPageProps, "mode"> & {
   mode?: "doc" | "custom" | "wide";
   audience?: "human";
+  showPageActions?: boolean;
   lang?: string;
   alternates?: Alternate[];
   canonicalUrl?: string;
@@ -39,7 +40,7 @@ type Props = Omit<DocsPageProps, "mode"> & {
   activeLocales?: string[];
 };
 
-const { title, description, sidebar, headings, breadcrumbs, prevNext, mode = "doc", banner, head = [], searchable, noindex, markdownUrl, socialImage, lastUpdated, editUrl, draft, audience, collection, entryId, lang, alternates, canonicalUrl, sections, currentLocale, activeLocales } = Astro.props;
+const { showPageActions = true, title, description, sidebar, headings, breadcrumbs, prevNext, mode = "doc", banner, head = [], searchable, noindex, markdownUrl, socialImage, lastUpdated, editUrl, draft, audience, collection, entryId, lang, alternates, canonicalUrl, sections, currentLocale, activeLocales } = Astro.props;
 
 // `searchable` derives from `noindex` when omitted: a non-crawlable page is
 // by default not in the site search either. Explicit `searchable: true`
@@ -280,13 +281,13 @@ const messages = uiStrings(currentLocale);
                     )}
                   </Fragment>
                 )}
-                <PageActions
+                {showPageActions && <PageActions
                   markdownUrl={markdownUrl}
                   lastUpdated={lastUpdated}
                   editUrl={editUrl}
                   currentLocale={currentLocale}
                   class="ch-title-page-actions"
-                />
+                />}
                 <div class="ch-title-path-row">
                   <ViewSwitcher compact showPathCue currentLocale={currentLocale} />
                 </div>
diff --git a/src/lib/openapi.ts b/src/lib/openapi.ts
index 55723bba4..96837d4d4 100644
--- a/src/lib/openapi.ts
+++ b/src/lib/openapi.ts
@@ -64,6 +64,7 @@ export interface OpenApiOperation {
   deprecated?: boolean;
   parameters?: OpenApiParameter[];
   requestBody?: {
+    $ref?: string;
     required?: boolean;
     description?: string;
     content?: Record<string, OpenApiMediaType>;
@@ -258,6 +259,27 @@ export function getApiOperationByPointer(collection: ApiCollection, pointer: str
   return operation;
 }
 
+/** Describe Cloud API permissions without flattening alternative security requirements. */
+export function cloudPermissionMarkdown(security: Array<Record<string, string[]>>): string {
+  const alternatives = security.map((requirement) => requirement.basicAuth ?? []);
+  if (!alternatives.some((permissions) => permissions.length > 0)) return "";
+
+  const descriptions = alternatives.map((permissions) => {
+    if (permissions.length === 0) return "No additional API-key permissions are required for this alternative.";
+    // Use a delimiter longer than any backtick run in the spec-provided value.
+    const names = permissions.map((permission) => {
+      const delimiter = "`".repeat(Math.max(0, ...(permission.match(/`+/g) ?? []).map((run) => run.length)) + 1);
+      return `${delimiter} ${permission} ${delimiter}`;
+    });
+    return `The API key must have the ${names.join(" and ")} ${names.length === 1 ? "permission" : "permissions"}.`;
+  });
+
+  const body = descriptions.length === 1
+    ? descriptions[0]
+    : `One of the following alternatives must be satisfied:\n\n${descriptions.map((description) => `- ${description}`).join("\n")}`;
+  return `## Permission\n\n${body}`;
+}
+
 async function getNativeApiModel(collection: ApiCollection): Promise<ApiModel> {
   const cached = nativeModelCache.get(collection);
   if (cached) return cached;
@@ -269,6 +291,19 @@ async function getNativeApiModel(collection: ApiCollection): Promise<ApiModel> {
   // model does not need it here and otherwise reports self-parent warnings.
   delete document["x-tagGroups"];
 
+  // Cloud carries API-key permissions in Basic auth scopes. Include them in the
+  // description before building the model so HTML and Markdown share the content.
+  if (collection === "cloud") {
+    for (const pathItem of Object.values(document.paths)) {
+      for (const method of HTTP_METHODS) {
+        const operation = pathItem[method];
+        if (!operation) continue;
+        const permissions = cloudPermissionMarkdown(operation.security ?? document.security ?? []);
+        if (permissions) operation.description = [operation.description, permissions].filter(Boolean).join("\n\n");
+      }
+    }
+  }
+
   const promise = buildApiModel({
     collection: `${collection}-api`,
     spec: JSON.stringify(document),
diff --git a/src/lib/sidebar-lazy.ts b/src/lib/sidebar-lazy.ts
index 1d4ae6296..7f2879395 100644
--- a/src/lib/sidebar-lazy.ts
+++ b/src/lib/sidebar-lazy.ts
@@ -14,8 +14,13 @@ import { withBase } from "./base";
 /** Groups with fewer children than this are rendered inline even when collapsed. */
 export const LAZY_MIN_CHILDREN = 6;
 
+export interface ApiSidebarMetadata {
+  statusBadge?: string;
+  deprecated?: boolean;
+}
+
 export type ConfigItem =
-  | { label: string; link: string; badge?: import("@cloudflare/nimbus-docs/types").SidebarBadge; icon?: string; hidden?: boolean }
+  | ApiSidebarMetadata & { label: string; link: string; badge?: import("@cloudflare/nimbus-docs/types").SidebarBadge; icon?: string; hidden?: boolean }
   | { label: string; items: ConfigItem[]; collapsed?: boolean; segment?: string; landing?: string; icon?: string };
 
 export function slugifyLabel(label: string): string {
@@ -153,8 +158,8 @@ export function toRendered(items: ConfigItem[], path: string[]): SidebarItem[] {
     const href = /^(https?:)?\/\//.test(item.link) ? item.link : withBase(item.link);
     return [
       /^(https?:)?\/\//.test(item.link)
-        ? ({ type: "external", label: item.label, href, order, badge: item.badge, icon: item.icon } as SidebarItem)
-        : ({ type: "link", label: item.label, href, order, badge: item.badge, icon: item.icon } as SidebarItem),
+        ? ({ type: "external", label: item.label, href, order, badge: item.badge, statusBadge: item.statusBadge, deprecated: item.deprecated, icon: item.icon } as SidebarItem)
+        : ({ type: "link", label: item.label, href, order, badge: item.badge, statusBadge: item.statusBadge, deprecated: item.deprecated, icon: item.icon } as SidebarItem),
     ];
   });
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 77c23f7a6..3219c38a0 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -678,7 +678,12 @@ body:not(:has([data-mobile-sidebar])) [data-menu-btn] {
 	border-left-color: #1c1c1c;
 }
 
-.nb-sidebar-link .ch-sidebar-method {
+.nb-sidebar-link .ch-sidebar-method,
+.pg-method {
+	display: inline-flex;
+	align-items: center;
+	line-height: 1;
+	white-space: nowrap;
 	min-width: 34px;
 	justify-content: center;
 	padding: 3px 4px;
diff --git a/tests/playground-model.test.ts b/tests/playground-model.test.ts
new file mode 100644
index 000000000..e6517d1b6
--- /dev/null
+++ b/tests/playground-model.test.ts
@@ -0,0 +1,177 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import {
+  buildRequest,
+  schemaFor,
+  validateValue,
+  requestSample,
+} from "../src/components/api/playground-model.ts";
+import type {
+  PlaygroundConfig,
+  RequestState,
+} from "../src/components/api/playground-model.ts";
+const config: PlaygroundConfig = {
+  title: "Test",
+  method: "patch",
+  path: "/v1/items/{id}",
+  document: {
+    openapi: "3.0.0",
+    paths: {},
+    security: [{ basic: [] }],
+    components: {
+      securitySchemes: { basic: { type: "http", scheme: "basic" } },
+      schemas: {
+        Body: {
+          type: "object",
+          required: ["enabled"],
+          properties: {
+            enabled: { type: "boolean" },
+            count: { type: "integer", minimum: 0 },
+          },
+        },
+      },
+    },
+  },
+  operation: {
+    requestBody: {
+      required: true,
+      content: {
+        "application/json": { schema: { $ref: "#/components/schemas/Body" } },
+      },
+    },
+  },
+  parameters: [
+    { name: "id", in: "path", required: true, schema: { type: "string" } },
+    {
+      name: "tag",
+      in: "query",
+      schema: { type: "array", items: { type: "string" } },
+    },
+  ],
+};
+const state: RequestState = {
+  server: "https://example.com",
+  parameters: { "path:id": "a/b ?", "query:tag": ["a&b", "c"] },
+  body: { enabled: false, count: 0 },
+  username: "key",
+  password: "secret",
+  token: "",
+};
+test("encodes paths and repeated query values, preserves false/zero and Basic Auth", () => {
+  const r = buildRequest(config, state);
+  assert.equal(
+    r.url,
+    "https://example.com/v1/items/a%2Fb%20%3F?tag=a%26b&tag=c",
+  );
+  assert.equal(r.headers.Authorization, "Basic a2V5OnNlY3JldA==");
+  assert.deepEqual(JSON.parse(r.body!), { enabled: false, count: 0 });
+});
+test("rejects missing required path/body and invalid nested values", () => {
+  assert.throws(
+    () => buildRequest(config, { ...state, parameters: {} }),
+    /id is required/,
+  );
+  assert.throws(
+    () => buildRequest(config, { ...state, body: undefined }),
+    /body is required/,
+  );
+  assert.throws(
+    () => buildRequest(config, { ...state, body: { enabled: "false" } }),
+    /boolean/,
+  );
+  assert.throws(
+    () =>
+      buildRequest(config, { ...state, body: { enabled: false, count: -1 } }),
+    /range/,
+  );
+});
+test("explicitly empty operation security overrides document authentication", () => {
+  assert.equal(
+    buildRequest(
+      { ...config, operation: { ...config.operation, security: [] } },
+      state,
+    ).headers.Authorization,
+    undefined,
+  );
+});
+test("merges allOf properties and validates required members", () => {
+  const input = {
+    allOf: [
+      {
+        type: "object",
+        properties: { a: { type: "string" } },
+        required: ["a"],
+      },
+      {
+        type: "object",
+        properties: { b: { type: "boolean" } },
+        required: ["b"],
+      },
+    ],
+  };
+  assert.deepEqual(schemaFor(input, config.document).required, ["a", "b"]);
+  assert.throws(
+    () => validateValue(input, { a: "ok" }, config.document),
+    /b is required/,
+  );
+});
+test("samples contain the same URL and payload as the executed request", () => {
+  const r = buildRequest(config, state);
+  for (const language of ["cURL", "Python", "JavaScript"]) {
+    const sample = requestSample(r, language);
+    assert.ok(sample.includes(r.url));
+    assert.ok(sample.includes("enabled"));
+    assert.ok(sample.includes(r.headers.Authorization));
+  }
+});
+test("validates discriminated alternatives and exclusive bounds", () => {
+  const union = {
+    oneOf: [
+      {
+        type: "object",
+        required: ["kind"],
+        properties: { kind: { const: "a" } },
+      },
+      {
+        type: "object",
+        required: ["kind"],
+        properties: { kind: { const: "b" } },
+      },
+    ],
+  };
+  validateValue(union, { kind: "a" }, config.document);
+  assert.throws(
+    () => validateValue(union, { kind: "c" }, config.document),
+    /exactly one/,
+  );
+  assert.throws(
+    () =>
+      validateValue(
+        { type: "number", minimum: 0, exclusiveMinimum: true },
+        0,
+        config.document,
+      ),
+    /range/,
+  );
+});
+test("bearer auth and optional body omission", () => {
+  const c = {
+    ...config,
+    document: {
+      ...config.document,
+      security: [{ bearer: [] }],
+      components: {
+        securitySchemes: { bearer: { type: "http", scheme: "bearer" } },
+      },
+    },
+    operation: {},
+  };
+  const r = buildRequest(c, {
+    ...state,
+    token: "example-token",
+    body: undefined,
+  });
+  assert.equal(r.headers.Authorization, "Bearer example-token");
+  assert.equal(r.body, undefined);
+  assert.equal(r.headers["Content-Type"], undefined);
+});