@veluai/velu 0.2.25 → 0.2.28

package/runtime/velu-ui/components/ApiReferencePage.jsx

@@ -1,384 +1,384 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import MethodBadge from './MethodBadge.jsx';
-import ApiPath from './ApiPath.jsx';
-import TryItBar from './TryItBar.jsx';
-import ApiClient from './ApiClient.jsx';
-import ApiField from './ApiField.jsx';
-import Field from './Field.jsx';
-import Accordion, { AccordionGroup } from './Accordion.jsx';
-import CodeBlock, { CodeGroup } from './CodeBlock.jsx';
-import ApiSamples from './ApiSamples.jsx';
-import Callout from './Callout.jsx';
-import { sendApiRequest } from '../lib/api-send.js';
-
-/**
- * ApiReferencePage — the full, auto-generated reference page for one OpenAPI
- * operation. Driven entirely by the normalized `operation` model (see the
- * CLI's src/openapi/parse.js). Renders the doc body (auth, params, body,
- * responses) and an interactive "Try It" playground that builds + sends the
- * request (through the dev proxy by default — see lib/api-send.js).
- *
- * The right-rail code samples live in the page's right aside (the runtime
- * renders <ApiSamples> there for API pages) — this component owns the main
- * column + the playground only.
- *
- * @param {{ operation: object, api?: { proxy?: boolean, server?: string } }} props
- */
-const LOCATION_LABEL = { path: 'Path Parameters', query: 'Query Parameters', header: 'Header Parameters' };
-
-export default function ApiReferencePage({ operation, samples = [], apiOperations = [], api = {} }) {
-  const [open, setOpen] = useState(false);
-  // Which operation the playground is currently showing. Defaults to this
-  // page's own operation; the dropdown can switch it to any sibling.
-  const [activeId, setActiveId] = useState(operation.id);
-
-  // The switchable list — fall back to just this page's operation.
-  const ops =
-    apiOperations.length > 0
-      ? apiOperations
-      : [{ id: operation.id, method: operation.method, title: operation.title, operation, samples, api }];
-  const current = ops.find((o) => o.id === activeId) || { operation, samples, api };
-  // Each operation carries its own (section-level) api config; fall back to
-  // this page's config.
-  const currentApi = current.api ?? api;
-  const server = currentApi.server || current.operation.servers?.[0] || '';
-
-  // While the playground modal is open, close on Escape and lock the
-  // page scroll so the dimmed backdrop reads as a true overlay.
-  useEffect(() => {
-    if (!open || typeof document === 'undefined') return undefined;
-    const onKey = (e) => {
-      if (e.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('keydown', onKey);
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.removeEventListener('keydown', onKey);
-      document.body.style.overflow = prev;
-    };
-  }, [open]);
-
-  if (!operation) return null;
-
-  return (
-    <div className="velu-api-page">
-      {/* The page title + description come from the page frontmatter heading
-          (rendered by the runtime), so this component starts at the Try-It bar
-          to avoid a duplicate title. */}
-      <TryItBar
-        method={operation.method}
-        path={operation.path}
-        cta="Try It"
-        onTry={() => {
-          setActiveId(operation.id);
-          setOpen(true);
-        }}
-        className="velu-api-page__tryit"
-      />
-
-      {/* Authorizations */}
-      {operation.auth?.length > 0 && (
-        <section className="velu-api-page__section">
-          <h2>Authorizations</h2>
-          {operation.auth.map((a, i) => (
-            <Field key={i} name={a.name} pre={a.prefix} type={a.type} required={a.required} post={a.in}>
-              {a.description}
-            </Field>
-          ))}
-        </section>
-      )}
-
-      {/* Parameters, by location */}
-      {['path', 'query', 'header'].map((loc) => {
-        const rows = operation.parameters?.[loc] || [];
-        if (!rows.length) return null;
-        return (
-          <section key={loc} className="velu-api-page__section">
-            <h2>{LOCATION_LABEL[loc]}</h2>
-            {rows.map((p, i) => (
-              <Field key={i} name={p.name} type={p.type} required={p.required}>
-                {p.description}
-                {p.enum && <EnumHint values={p.enum} />}
-              </Field>
-            ))}
-          </section>
-        );
-      })}
-
-      {/* Request body */}
-      {operation.body?.fields?.length > 0 && (
-        <section className="velu-api-page__section">
-          <h2>Body</h2>
-          {operation.body.fields.map((f, i) => (
-            <Field key={i} name={f.name} type={f.type} required={f.required}>
-              {f.description}
-              {f.enum && <EnumHint values={f.enum} />}
-            </Field>
-          ))}
-        </section>
-      )}
-
-      {/* Responses */}
-      {operation.responses?.length > 0 && (
-        <section className="velu-api-page__section">
-          <h2>Response</h2>
-          <ResponseSections responses={operation.responses} />
-        </section>
-      )}
-
-      {/* Try-It playground — rendered as an overlay above the page, with a
-          blurred backdrop, rather than inline. Portaled to <body> so the
-          docs layout's @container containment can't clip the fixed overlay. */}
-      {open && typeof document !== 'undefined' &&
-        createPortal(
-          <div
-            className="velu-api-modal"
-            role="presentation"
-            onClick={() => setOpen(false)}
-          >
-            <div
-              className="velu-api-modal__panel"
-              role="dialog"
-              aria-modal="true"
-              aria-label={`${operation.title} playground`}
-              onClick={(e) => e.stopPropagation()}
-            >
-              <Playground
-                key={current.operation.id}
-                operation={current.operation}
-                samples={current.samples}
-                operations={ops}
-                activeId={activeId}
-                onSelectOperation={setActiveId}
-                server={server}
-                proxy={currentApi.proxy !== false}
-                onClose={() => setOpen(false)}
-              />
-            </div>
-          </div>,
-          document.body,
-        )}
-    </div>
-  );
-}
-
-function EnumHint({ values }) {
-  return (
-    <p className="velu-api-page__enum">
-      Allowed values:{' '}
-      {values.map((v, i) => (
-        <code key={i}>{String(v)}</code>
-      ))}
-    </p>
-  );
-}
-
-function ResponseSections({ responses }) {
-  return (
-    <AccordionGroup className="velu-api-resp">
-      {responses.map((r, i) => {
-        return (
-          <Accordion
-            key={i}
-            defaultOpen
-            title={
-              <span className="velu-api-resp__head">
-                <span className="velu-api-resp__status">{r.status}</span>
-                {r.contentType && (
-                  <span className="velu-api-resp__ctype">{r.contentType}</span>
-                )}
-              </span>
-            }
-          >
-            {r.description && <p className="velu-api-resp__desc">{r.description}</p>}
-            {r.fields?.map((f, j) => (
-              <Field key={j} name={f.name} type={f.type} required={f.required}>
-                {f.description}
-              </Field>
-            ))}
-          </Accordion>
-        );
-      })}
-    </AccordionGroup>
-  );
-}
-
-// ── The interactive playground ──────────────────────────────────────────────
-
-function Playground({
-  operation,
-  samples = [],
-  operations = [],
-  activeId,
-  onSelectOperation,
-  server,
-  proxy,
-  onClose,
-}) {
-  const [values, setValues] = useState({});
-  const [bodyText, setBodyText] = useState(
-    operation.body ? JSON.stringify(operation.body.example ?? {}, null, 2) : '',
-  );
-  const [busy, setBusy] = useState(false);
-  const [resp, setResp] = useState(null);
-
-  const set = (loc, name, v) =>
-    setValues((prev) => ({ ...prev, [loc]: { ...(prev[loc] || {}), [name]: v } }));
-
-  const onSend = useCallback(async () => {
-    setBusy(true);
-    setResp(null);
-    try {
-      const result = await sendApiRequest({ operation, server, proxy, values, bodyText });
-      setResp(result);
-    } catch (err) {
-      setResp({ error: String(err?.message || err) });
-    } finally {
-      setBusy(false);
-    }
-  }, [operation, server, proxy, values, bodyText]);
-
-  const sections = [];
-  if (operation.auth?.length) sections.push(['auth', 'Authorization', operation.auth]);
-  for (const loc of ['path', 'query', 'header']) {
-    const rows = operation.parameters?.[loc] || [];
-    if (rows.length) sections.push([loc, LOCATION_LABEL[loc].replace(' Parameters', ''), rows]);
-  }
-
-  return (
-    <ApiClient
-      method={operation.method}
-      label={operation.title}
-      path={operation.path}
-      description={operation.description}
-      operations={operations}
-      activeId={activeId}
-      onSelectOperation={onSelectOperation}
-      onSend={onSend}
-      sending={busy}
-      onClose={onClose}
-      response={resp ? <ResponsePanel resp={resp} /> : null}
-      aside={<ApiSamples samples={samples} responses={operation.responses} />}
-    >
-      <AccordionGroup>
-        {sections.map(([loc, title, rows]) => (
-          <Accordion key={loc} title={title} defaultOpen>
-            {rows.map((f, i) => (
-              <ApiField
-                key={i}
-                name={f.name}
-                type={f.type}
-                required={f.required}
-                prefix={f.prefix}
-                value={values[loc]?.[f.name] ?? ''}
-                onChange={(e) => set(loc, f.name, e.target.value)}
-              >
-                {f.description}
-              </ApiField>
-            ))}
-          </Accordion>
-        ))}
-        {operation.body && (
-          <Accordion title="Body" defaultOpen>
-            <textarea
-              className="velu-api-body-input"
-              spellCheck={false}
-              rows={Math.min(14, bodyText.split('\n').length + 1)}
-              value={bodyText}
-              onChange={(e) => setBodyText(e.target.value)}
-            />
-          </Accordion>
-        )}
-      </AccordionGroup>
-    </ApiClient>
-  );
-}
-
-/**
- * ResponsePanel — the live-response viewer: a Body / Header tabbed card.
- *  - Body:   a status-colored Callout (green for 2xx, red otherwise) plus the
- *            response body.
- *  - Header: the response headers as a key/value table.
- */
-function ResponsePanel({ resp }) {
-  const [tab, setTab] = useState('body');
-  if (!resp) return null;
-
-  const isError = resp.error != null;
-  const ok = !isError && resp.status >= 200 && resp.status < 300;
-  const statusLabel = isError
-    ? 'Request failed'
-    : `${resp.status}${resp.statusText ? ` - ${resp.statusText}` : ''}`;
-  const bodyStr = isError
-    ? resp.error
-    : typeof resp.body === 'string'
-      ? resp.body
-      : JSON.stringify(resp.body, null, 2);
-  const headerRows = Object.entries(resp.headers || {});
-
-  // Reuse the CodeGroup's tab chrome (velu-code-block__*) so the Body/Header
-  // switcher looks identical to the code-sample tabs.
-  const tabCls = (name) =>
-    `velu-code-block__tab${tab === name ? ' velu-code-block__tab--active' : ''}`;
-
-  return (
-    <div className="velu-code-block velu-api-resp-panel">
-      <div className="velu-code-block__header">
-        <div className="velu-code-block__tabs" role="tablist">
-          <button
-            type="button"
-            role="tab"
-            aria-selected={tab === 'body'}
-            className={tabCls('body')}
-            onClick={() => setTab('body')}
-          >
-            <span className="velu-code-block__tab-label">Body</span>
-          </button>
-          <button
-            type="button"
-            role="tab"
-            aria-selected={tab === 'header'}
-            className={tabCls('header')}
-            onClick={() => setTab('header')}
-            disabled={!headerRows.length || undefined}
-          >
-            <span className="velu-code-block__tab-label">Header</span>
-          </button>
-        </div>
-      </div>
-
-      <div className="velu-api-resp-panel__content">
-        {tab === 'body' ? (
-          <>
-            <Callout
-              type={ok ? 'check' : 'danger'}
-              className="velu-api-resp-panel__status"
-            >
-              {statusLabel}
-            </Callout>
-            {!isError && (
-              <div className="velu-api-resp-body__scroll velu-hide-scrollbar">
-                <CodeBlock language="json">{bodyStr || '(empty)'}</CodeBlock>
-              </div>
-            )}
-          </>
-        ) : (
-          <div className="velu-api-resp-headers__scroll velu-hide-scrollbar">
-            <table className="velu-api-resp-headers">
-              <tbody>
-                {headerRows.map(([k, val]) => (
-                  <tr key={k}>
-                    <td className="velu-api-resp-headers__key">{k}</td>
-                    <td className="velu-api-resp-headers__val">{val}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+import React, { useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import MethodBadge from './MethodBadge.jsx';
+import ApiPath from './ApiPath.jsx';
+import TryItBar from './TryItBar.jsx';
+import ApiClient from './ApiClient.jsx';
+import ApiField from './ApiField.jsx';
+import Field from './Field.jsx';
+import Accordion, { AccordionGroup } from './Accordion.jsx';
+import CodeBlock, { CodeGroup } from './CodeBlock.jsx';
+import ApiSamples from './ApiSamples.jsx';
+import Callout from './Callout.jsx';
+import { sendApiRequest } from '../lib/api-send.js';
+
+/**
+ * ApiReferencePage — the full, auto-generated reference page for one OpenAPI
+ * operation. Driven entirely by the normalized `operation` model (see the
+ * CLI's src/openapi/parse.js). Renders the doc body (auth, params, body,
+ * responses) and an interactive "Try It" playground that builds + sends the
+ * request (through the dev proxy by default — see lib/api-send.js).
+ *
+ * The right-rail code samples live in the page's right aside (the runtime
+ * renders <ApiSamples> there for API pages) — this component owns the main
+ * column + the playground only.
+ *
+ * @param {{ operation: object, api?: { proxy?: boolean, server?: string } }} props
+ */
+const LOCATION_LABEL = { path: 'Path Parameters', query: 'Query Parameters', header: 'Header Parameters' };
+
+export default function ApiReferencePage({ operation, samples = [], apiOperations = [], api = {} }) {
+  const [open, setOpen] = useState(false);
+  // Which operation the playground is currently showing. Defaults to this
+  // page's own operation; the dropdown can switch it to any sibling.
+  const [activeId, setActiveId] = useState(operation.id);
+
+  // The switchable list — fall back to just this page's operation.
+  const ops =
+    apiOperations.length > 0
+      ? apiOperations
+      : [{ id: operation.id, method: operation.method, title: operation.title, operation, samples, api }];
+  const current = ops.find((o) => o.id === activeId) || { operation, samples, api };
+  // Each operation carries its own (section-level) api config; fall back to
+  // this page's config.
+  const currentApi = current.api ?? api;
+  const server = currentApi.server || current.operation.servers?.[0] || '';
+
+  // While the playground modal is open, close on Escape and lock the
+  // page scroll so the dimmed backdrop reads as a true overlay.
+  useEffect(() => {
+    if (!open || typeof document === 'undefined') return undefined;
+    const onKey = (e) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  if (!operation) return null;
+
+  return (
+    <div className="velu-api-page">
+      {/* The page title + description come from the page frontmatter heading
+          (rendered by the runtime), so this component starts at the Try-It bar
+          to avoid a duplicate title. */}
+      <TryItBar
+        method={operation.method}
+        path={operation.path}
+        cta="Try It"
+        onTry={() => {
+          setActiveId(operation.id);
+          setOpen(true);
+        }}
+        className="velu-api-page__tryit"
+      />
+
+      {/* Authorizations */}
+      {operation.auth?.length > 0 && (
+        <section className="velu-api-page__section">
+          <h2>Authorizations</h2>
+          {operation.auth.map((a, i) => (
+            <Field key={i} name={a.name} pre={a.prefix} type={a.type} required={a.required} post={a.in}>
+              {a.description}
+            </Field>
+          ))}
+        </section>
+      )}
+
+      {/* Parameters, by location */}
+      {['path', 'query', 'header'].map((loc) => {
+        const rows = operation.parameters?.[loc] || [];
+        if (!rows.length) return null;
+        return (
+          <section key={loc} className="velu-api-page__section">
+            <h2>{LOCATION_LABEL[loc]}</h2>
+            {rows.map((p, i) => (
+              <Field key={i} name={p.name} type={p.type} required={p.required}>
+                {p.description}
+                {p.enum && <EnumHint values={p.enum} />}
+              </Field>
+            ))}
+          </section>
+        );
+      })}
+
+      {/* Request body */}
+      {operation.body?.fields?.length > 0 && (
+        <section className="velu-api-page__section">
+          <h2>Body</h2>
+          {operation.body.fields.map((f, i) => (
+            <Field key={i} name={f.name} type={f.type} required={f.required}>
+              {f.description}
+              {f.enum && <EnumHint values={f.enum} />}
+            </Field>
+          ))}
+        </section>
+      )}
+
+      {/* Responses */}
+      {operation.responses?.length > 0 && (
+        <section className="velu-api-page__section">
+          <h2>Response</h2>
+          <ResponseSections responses={operation.responses} />
+        </section>
+      )}
+
+      {/* Try-It playground — rendered as an overlay above the page, with a
+          blurred backdrop, rather than inline. Portaled to <body> so the
+          docs layout's @container containment can't clip the fixed overlay. */}
+      {open && typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            className="velu-api-modal"
+            role="presentation"
+            onClick={() => setOpen(false)}
+          >
+            <div
+              className="velu-api-modal__panel"
+              role="dialog"
+              aria-modal="true"
+              aria-label={`${operation.title} playground`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Playground
+                key={current.operation.id}
+                operation={current.operation}
+                samples={current.samples}
+                operations={ops}
+                activeId={activeId}
+                onSelectOperation={setActiveId}
+                server={server}
+                proxy={currentApi.proxy !== false}
+                onClose={() => setOpen(false)}
+              />
+            </div>
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+}
+
+function EnumHint({ values }) {
+  return (
+    <p className="velu-api-page__enum">
+      Allowed values:{' '}
+      {values.map((v, i) => (
+        <code key={i}>{String(v)}</code>
+      ))}
+    </p>
+  );
+}
+
+function ResponseSections({ responses }) {
+  return (
+    <AccordionGroup className="velu-api-resp">
+      {responses.map((r, i) => {
+        return (
+          <Accordion
+            key={i}
+            defaultOpen
+            title={
+              <span className="velu-api-resp__head">
+                <span className="velu-api-resp__status">{r.status}</span>
+                {r.contentType && (
+                  <span className="velu-api-resp__ctype">{r.contentType}</span>
+                )}
+              </span>
+            }
+          >
+            {r.description && <p className="velu-api-resp__desc">{r.description}</p>}
+            {r.fields?.map((f, j) => (
+              <Field key={j} name={f.name} type={f.type} required={f.required}>
+                {f.description}
+              </Field>
+            ))}
+          </Accordion>
+        );
+      })}
+    </AccordionGroup>
+  );
+}
+
+// ── The interactive playground ──────────────────────────────────────────────
+
+function Playground({
+  operation,
+  samples = [],
+  operations = [],
+  activeId,
+  onSelectOperation,
+  server,
+  proxy,
+  onClose,
+}) {
+  const [values, setValues] = useState({});
+  const [bodyText, setBodyText] = useState(
+    operation.body ? JSON.stringify(operation.body.example ?? {}, null, 2) : '',
+  );
+  const [busy, setBusy] = useState(false);
+  const [resp, setResp] = useState(null);
+
+  const set = (loc, name, v) =>
+    setValues((prev) => ({ ...prev, [loc]: { ...(prev[loc] || {}), [name]: v } }));
+
+  const onSend = useCallback(async () => {
+    setBusy(true);
+    setResp(null);
+    try {
+      const result = await sendApiRequest({ operation, server, proxy, values, bodyText });
+      setResp(result);
+    } catch (err) {
+      setResp({ error: String(err?.message || err) });
+    } finally {
+      setBusy(false);
+    }
+  }, [operation, server, proxy, values, bodyText]);
+
+  const sections = [];
+  if (operation.auth?.length) sections.push(['auth', 'Authorization', operation.auth]);
+  for (const loc of ['path', 'query', 'header']) {
+    const rows = operation.parameters?.[loc] || [];
+    if (rows.length) sections.push([loc, LOCATION_LABEL[loc].replace(' Parameters', ''), rows]);
+  }
+
+  return (
+    <ApiClient
+      method={operation.method}
+      label={operation.title}
+      path={operation.path}
+      description={operation.description}
+      operations={operations}
+      activeId={activeId}
+      onSelectOperation={onSelectOperation}
+      onSend={onSend}
+      sending={busy}
+      onClose={onClose}
+      response={resp ? <ResponsePanel resp={resp} /> : null}
+      aside={<ApiSamples samples={samples} responses={operation.responses} />}
+    >
+      <AccordionGroup>
+        {sections.map(([loc, title, rows]) => (
+          <Accordion key={loc} title={title} defaultOpen>
+            {rows.map((f, i) => (
+              <ApiField
+                key={i}
+                name={f.name}
+                type={f.type}
+                required={f.required}
+                prefix={f.prefix}
+                value={values[loc]?.[f.name] ?? ''}
+                onChange={(e) => set(loc, f.name, e.target.value)}
+              >
+                {f.description}
+              </ApiField>
+            ))}
+          </Accordion>
+        ))}
+        {operation.body && (
+          <Accordion title="Body" defaultOpen>
+            <textarea
+              className="velu-api-body-input"
+              spellCheck={false}
+              rows={Math.min(14, bodyText.split('\n').length + 1)}
+              value={bodyText}
+              onChange={(e) => setBodyText(e.target.value)}
+            />
+          </Accordion>
+        )}
+      </AccordionGroup>
+    </ApiClient>
+  );
+}
+
+/**
+ * ResponsePanel — the live-response viewer: a Body / Header tabbed card.
+ *  - Body:   a status-colored Callout (green for 2xx, red otherwise) plus the
+ *            response body.
+ *  - Header: the response headers as a key/value table.
+ */
+function ResponsePanel({ resp }) {
+  const [tab, setTab] = useState('body');
+  if (!resp) return null;
+
+  const isError = resp.error != null;
+  const ok = !isError && resp.status >= 200 && resp.status < 300;
+  const statusLabel = isError
+    ? 'Request failed'
+    : `${resp.status}${resp.statusText ? ` - ${resp.statusText}` : ''}`;
+  const bodyStr = isError
+    ? resp.error
+    : typeof resp.body === 'string'
+      ? resp.body
+      : JSON.stringify(resp.body, null, 2);
+  const headerRows = Object.entries(resp.headers || {});
+
+  // Reuse the CodeGroup's tab chrome (velu-code-block__*) so the Body/Header
+  // switcher looks identical to the code-sample tabs.
+  const tabCls = (name) =>
+    `velu-code-block__tab${tab === name ? ' velu-code-block__tab--active' : ''}`;
+
+  return (
+    <div className="velu-code-block velu-api-resp-panel">
+      <div className="velu-code-block__header">
+        <div className="velu-code-block__tabs" role="tablist">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === 'body'}
+            className={tabCls('body')}
+            onClick={() => setTab('body')}
+          >
+            <span className="velu-code-block__tab-label">Body</span>
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === 'header'}
+            className={tabCls('header')}
+            onClick={() => setTab('header')}
+            disabled={!headerRows.length || undefined}
+          >
+            <span className="velu-code-block__tab-label">Header</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="velu-api-resp-panel__content">
+        {tab === 'body' ? (
+          <>
+            <Callout
+              type={ok ? 'check' : 'danger'}
+              className="velu-api-resp-panel__status"
+            >
+              {statusLabel}
+            </Callout>
+            {!isError && (
+              <div className="velu-api-resp-body__scroll velu-hide-scrollbar">
+                <CodeBlock language="json">{bodyStr || '(empty)'}</CodeBlock>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="velu-api-resp-headers__scroll velu-hide-scrollbar">
+            <table className="velu-api-resp-headers">
+              <tbody>
+                {headerRows.map(([k, val]) => (
+                  <tr key={k}>
+                    <td className="velu-api-resp-headers__key">{k}</td>
+                    <td className="velu-api-resp-headers__val">{val}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}