raffel 1.1.48 → 1.1.50

package/dist/docs/ui/runtime/index.js

@@ -1214,60 +1214,247 @@ function generateExampleFromSchema(schema) {
         default: return null;
     }
 }
+function httpBaseUrl() {
+    return String(spec?.servers?.[0]?.url ?? 'http://localhost:3000').replace(/\/$/, '');
+}
+// Collect JSON-Schema validation constraints as readable chips.
+function schemaConstraintChips(schema) {
+    if (!schema || typeof schema !== 'object')
+        return [];
+    const chips = [];
+    if (schema.format)
+        chips.push(`format: ${schema.format}`);
+    if (typeof schema.minLength === 'number')
+        chips.push(`min length: ${schema.minLength}`);
+    if (typeof schema.maxLength === 'number')
+        chips.push(`max length: ${schema.maxLength}`);
+    if (typeof schema.minimum === 'number')
+        chips.push(`>= ${schema.minimum}`);
+    if (typeof schema.exclusiveMinimum === 'number')
+        chips.push(`> ${schema.exclusiveMinimum}`);
+    if (typeof schema.maximum === 'number')
+        chips.push(`<= ${schema.maximum}`);
+    if (typeof schema.exclusiveMaximum === 'number')
+        chips.push(`< ${schema.exclusiveMaximum}`);
+    if (typeof schema.multipleOf === 'number')
+        chips.push(`multiple of ${schema.multipleOf}`);
+    if (typeof schema.minItems === 'number')
+        chips.push(`min items: ${schema.minItems}`);
+    if (typeof schema.maxItems === 'number')
+        chips.push(`max items: ${schema.maxItems}`);
+    if (schema.uniqueItems)
+        chips.push('unique items');
+    if (typeof schema.pattern === 'string')
+        chips.push(`pattern: ${schema.pattern}`);
+    if (schema.nullable)
+        chips.push('nullable');
+    if (schema.readOnly)
+        chips.push('read-only');
+    if (schema.writeOnly)
+        chips.push('write-only');
+    return chips;
+}
+// Append constraint / default / enum chips to a row element.
+function appendConstraintChips(row, schema) {
+    if (!schema || typeof schema !== 'object')
+        return;
+    const chips = schemaConstraintChips(schema);
+    const hasDefault = schema.default !== undefined;
+    const enumValues = Array.isArray(schema.enum) ? schema.enum : [];
+    if (!chips.length && !hasDefault && enumValues.length === 0)
+        return;
+    const wrap = doc.createElement('div');
+    wrap.className = 'constraint-chips';
+    if (hasDefault) {
+        const chip = doc.createElement('span');
+        chip.className = 'constraint-chip';
+        chip.textContent = `default: ${JSON.stringify(schema.default)}`;
+        wrap.appendChild(chip);
+    }
+    chips.forEach(text => {
+        const chip = doc.createElement('span');
+        chip.className = 'constraint-chip';
+        chip.textContent = text;
+        wrap.appendChild(chip);
+    });
+    enumValues.forEach(value => {
+        const chip = doc.createElement('span');
+        chip.className = 'constraint-chip constraint-enum';
+        chip.textContent = String(value);
+        wrap.appendChild(chip);
+    });
+    row.appendChild(wrap);
+}
+// Render a JSON value as a Python literal (for the Python request sample).
+function pyLiteral(value) {
+    if (value === null || value === undefined)
+        return 'None';
+    if (value === true)
+        return 'True';
+    if (value === false)
+        return 'False';
+    if (typeof value === 'number')
+        return String(value);
+    if (typeof value === 'string')
+        return JSON.stringify(value);
+    if (Array.isArray(value))
+        return `[${value.map(pyLiteral).join(', ')}]`;
+    if (typeof value === 'object') {
+        return `{${Object.entries(value).map(([k, v]) => `${JSON.stringify(k)}: ${pyLiteral(v)}`).join(', ')}}`;
+    }
+    return 'None';
+}
+// Build request samples in cURL, JavaScript, Python and Rust.
+function buildHttpSamples(method, url, body) {
+    const hasBody = body !== null && body !== undefined && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method);
+    const jsonPretty = hasBody ? JSON.stringify(body, null, 2) : '';
+    const samples = {};
+    let curl = `curl -X ${method} "${url}"`;
+    if (hasBody)
+        curl += ` \\\n  -H "Content-Type: application/json" \\\n  -d '${JSON.stringify(body)}'`;
+    samples.curl = curl;
+    let js = `const res = await fetch(${JSON.stringify(url)}, {\n  method: ${JSON.stringify(method)},`;
+    if (hasBody)
+        js += `\n  headers: { "Content-Type": "application/json" },\n  body: JSON.stringify(${jsonPretty.split('\n').join('\n  ')}),`;
+    js += `\n});\nconst data = await res.json();\nconsole.log(data);`;
+    samples.javascript = js;
+    let py = `import requests\n\nres = requests.${method.toLowerCase()}(\n    ${JSON.stringify(url)},`;
+    if (hasBody)
+        py += `\n    json=${pyLiteral(body)},`;
+    py += `\n)\nprint(res.json())`;
+    samples.python = py;
+    let rust = `use reqwest::Client;\n\nlet client = Client::new();\nlet res = client\n    .${method.toLowerCase()}(${JSON.stringify(url)})`;
+    if (hasBody)
+        rust += `\n    .json(&serde_json::json!(${jsonPretty.split('\n').join('\n    ')}))`;
+    rust += `\n    .send()\n    .await?;\nlet body = res.text().await?;\nprintln!("{}", body);`;
+    samples.rust = rust;
+    return samples;
+}
 function renderCodeExamples(endpoint, data) {
-    const container = doc.createElement('div');
-    container.style.marginTop = '20px';
-    container.style.paddingTop = '16px';
-    container.style.borderTop = '1px solid var(--border-color)';
-    // cURL example
-    const method = endpoint.method?.toUpperCase() || 'GET';
-    const path = endpoint.path || '/';
-    const baseUrl = 'http://localhost:3000';
-    const curlSection = doc.createElement('div');
-    curlSection.style.marginBottom = '20px';
-    curlSection.innerHTML = '<div style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px;">cURL EXAMPLE</div>';
-    const curlCode = doc.createElement('pre');
-    curlCode.style.backgroundColor = 'var(--bg-secondary)';
-    curlCode.style.padding = '12px';
-    curlCode.style.borderRadius = '4px';
-    curlCode.style.fontSize = '12px';
-    curlCode.style.overflow = 'auto';
-    let curlCmd = `curl -X ${method} "${baseUrl}${path}"`;
-    const reqBody = data.requestBody?.content?.[Object.keys(data.requestBody.content)[0]];
-    if (reqBody && ['POST', 'PUT', 'PATCH'].includes(method)) {
-        const example = generateExampleFromSchema(reqBody.schema);
-        curlCmd += ` \\\n  -H "Content-Type: application/json" \\\n  -d '${JSON.stringify(example, null, 2).split('\n').join('\n  ')}'`;
-    }
-    curlCode.textContent = curlCmd;
-    curlSection.appendChild(curlCode);
-    container.appendChild(curlSection);
-    // Response example
-    if (data.responses) {
-        const responses = Object.entries(data.responses);
-        if (responses.length > 0) {
-            const [status, resp] = responses[0];
-            const respSection = doc.createElement('div');
-            respSection.innerHTML = `<div style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px;">RESPONSE ${status}</div>`;
-            const respCode = doc.createElement('pre');
-            respCode.style.backgroundColor = 'var(--bg-secondary)';
-            respCode.style.padding = '12px';
-            respCode.style.borderRadius = '4px';
-            respCode.style.fontSize = '12px';
-            respCode.style.overflow = 'auto';
-            if (resp.content) {
-                const contentType = Object.keys(resp.content)[0];
-                const schema = resp.content[contentType]?.schema;
-                const example = generateExampleFromSchema(schema);
-                respCode.textContent = JSON.stringify(example, null, 2);
-            }
-            else {
-                respCode.textContent = `{}`;
+    const method = (endpoint.method || 'GET').toUpperCase();
+    const url = `${httpBaseUrl()}${endpoint.path || '/'}`;
+    const reqContent = data.requestBody?.content;
+    const reqSchema = reqContent ? reqContent[Object.keys(reqContent)[0]]?.schema : null;
+    const bodyExample = reqSchema ? generateExampleFromSchema(reqSchema) : null;
+    const samples = buildHttpSamples(method, url, bodyExample);
+    const langs = [['curl', 'cURL'], ['javascript', 'JavaScript'], ['python', 'Python'], ['rust', 'Rust']];
+    const wrap = doc.createElement('div');
+    wrap.className = 'http-code-samples';
+    const tabs = doc.createElement('div');
+    tabs.className = 'code-tabs';
+    const contents = doc.createElement('div');
+    contents.className = 'code-contents';
+    langs.forEach(([key, label], index) => {
+        const tab = doc.createElement('button');
+        tab.type = 'button';
+        tab.className = `code-tab${index === 0 ? ' active' : ''}`;
+        tab.textContent = label;
+        const content = doc.createElement('div');
+        content.className = `code-content${index === 0 ? ' active' : ''}`;
+        const pre = doc.createElement('pre');
+        pre.className = 'http-code-sample-pre';
+        pre.textContent = samples[key];
+        content.appendChild(pre);
+        tab.onclick = () => {
+            tabs.querySelectorAll('.code-tab').forEach((t) => t.classList.remove('active'));
+            contents.querySelectorAll('.code-content').forEach((c) => c.classList.remove('active'));
+            tab.classList.add('active');
+            content.classList.add('active');
+        };
+        tabs.appendChild(tab);
+        contents.appendChild(content);
+    });
+    const copy = doc.createElement('button');
+    copy.type = 'button';
+    copy.className = 'http-code-copy';
+    copy.textContent = 'Copy';
+    copy.onclick = () => {
+        const active = contents.querySelector('.code-content.active pre');
+        const text = active?.textContent ?? '';
+        const clip = globalThis.navigator?.clipboard;
+        if (clip?.writeText) {
+            clip.writeText(text).then(() => {
+                copy.textContent = 'Copied';
+                setTimeout(() => { copy.textContent = 'Copy'; }, 1200);
+            });
+        }
+    };
+    tabs.appendChild(copy);
+    wrap.appendChild(tabs);
+    wrap.appendChild(contents);
+    return wrap;
+}
+// Append a JSON example block to a container.
+// Syntax-highlight a JSON value into HTML using the .sample-json token classes.
+function highlightJsonHtml(value) {
+    let json = JSON.stringify(value, null, 2);
+    if (json === undefined)
+        return '';
+    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return json.replace(/("(?:\\.|[^"\\])*"(\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g, (match, _token, colon) => {
+        let cls = 'json-number';
+        if (match[0] === '"')
+            cls = colon ? 'json-key' : 'json-string';
+        else if (match === 'true' || match === 'false')
+            cls = 'json-boolean';
+        else if (match === 'null')
+            cls = 'json-null';
+        return `<span class="${cls}">${match}</span>`;
+    });
+}
+// Right-panel response samples: one status tab per response, each showing the
+// generated JSON example (colorized) — ReDoc's response sample switcher.
+function renderResponseSamples(responses) {
+    const wrap = doc.createElement('div');
+    const tabs = doc.createElement('div');
+    tabs.className = 'sample-tabs';
+    const contents = doc.createElement('div');
+    contents.className = 'sample-contents';
+    const entries = Object.entries(responses);
+    entries.forEach(([status, resp], index) => {
+        const statusClass = status.startsWith('2') ? 'status-2xx'
+            : status.startsWith('4') ? 'status-4xx'
+                : status.startsWith('5') ? 'status-5xx'
+                    : '';
+        const tab = doc.createElement('button');
+        tab.type = 'button';
+        tab.className = `sample-tab ${statusClass}${index === 0 ? ' active' : ''}`;
+        tab.textContent = status;
+        const content = doc.createElement('div');
+        content.className = `sample-content${index === 0 ? ' active' : ''}`;
+        const ct = resp.content ? Object.keys(resp.content)[0] : null;
+        const schema = ct ? resp.content[ct]?.schema : null;
+        const example = schema ? generateExampleFromSchema(schema) : null;
+        if (example !== null && example !== undefined) {
+            if (ct) {
+                const typeLine = doc.createElement('div');
+                typeLine.className = 'sample-content-type';
+                typeLine.textContent = ct;
+                content.appendChild(typeLine);
             }
-            respSection.appendChild(respCode);
-            container.appendChild(respSection);
+            const pre = doc.createElement('pre');
+            pre.className = 'sample-json';
+            pre.innerHTML = highlightJsonHtml(example);
+            content.appendChild(pre);
         }
-    }
-    return container;
+        else {
+            const empty = doc.createElement('div');
+            empty.className = 'no-example';
+            empty.textContent = resp.description || 'No response body.';
+            content.appendChild(empty);
+        }
+        tab.onclick = () => {
+            tabs.querySelectorAll('.sample-tab').forEach((t) => t.classList.remove('active'));
+            contents.querySelectorAll('.sample-content').forEach((c) => c.classList.remove('active'));
+            tab.classList.add('active');
+            content.classList.add('active');
+        };
+        tabs.appendChild(tab);
+        contents.appendChild(content);
+    });
+    wrap.appendChild(tabs);
+    wrap.appendChild(contents);
+    return wrap;
 }
 function renderSchemaTree(parent, schema, depth = 0) {
     if (!schema)
@@ -1290,8 +1477,7 @@ function renderSchemaTree(parent, schema, depth = 0) {
             row.style.paddingLeft = depth === 0 ? '8px' : '0';
             const type = prop.type || 'any';
             const required = schema.required?.includes(key) ? '<span style="color: #ef4444; margin-left: 4px;">*</span>' : '';
-            const format = prop.format ? ` (${prop.format})` : '';
-            row.innerHTML = `<div style="font-weight: 500; color: var(--text-primary); display: flex; align-items: center;">${esc(key)}${required} <span style="color: var(--text-secondary); font-weight: normal; margin-left: 8px;">${type}${format}</span></div>`;
+            row.innerHTML = `<div style="font-weight: 500; color: var(--text-primary); display: flex; align-items: center;">${esc(key)}${required} <span class="schema-type type-${esc(prop.type || 'null')}" style="margin-left: 8px;">${esc(type)}</span></div>`;
             if (prop.description) {
                 const desc = doc.createElement('div');
                 desc.style.fontSize = '12px';
@@ -1300,33 +1486,20 @@ function renderSchemaTree(parent, schema, depth = 0) {
                 desc.textContent = prop.description;
                 row.appendChild(desc);
             }
-            if (prop.example !== undefined) {
-                const ex = doc.createElement('div');
-                ex.style.fontSize = '11px';
-                ex.style.color = '#888';
-                ex.style.marginTop = '2px';
-                ex.style.fontFamily = 'monospace';
-                ex.textContent = `Example: ${JSON.stringify(prop.example)}`;
-                row.appendChild(ex);
-            }
-            if (prop.enum) {
-                const en = doc.createElement('div');
-                en.style.fontSize = '11px';
-                en.style.color = '#888';
-                en.style.marginTop = '2px';
-                en.textContent = `Values: ${prop.enum.join(', ')}`;
-                row.appendChild(en);
-            }
+            appendConstraintChips(row, prop);
             div.appendChild(row);
-            if (prop.properties) {
+            if (prop.type === 'object' && prop.properties) {
                 renderSchemaTree(div, prop, depth + 1);
             }
+            else if (prop.type === 'array' && prop.items?.properties) {
+                renderSchemaTree(div, prop.items, depth + 1);
+            }
         });
     }
     else if (schema.type === 'array' && schema.items) {
         const row = doc.createElement('div');
         row.style.padding = '6px 0';
-        row.innerHTML = `<span style="color: var(--text-primary); font-weight: 500;">array</span> <span style="color: var(--text-secondary);">of ${schema.items.type || 'object'}</span>`;
+        row.innerHTML = `<span style="color: var(--text-primary); font-weight: 500;">array</span> <span style="color: var(--text-secondary);">of ${esc(schema.items.type || 'object')}</span>`;
         div.appendChild(row);
         if (schema.items.properties) {
             renderSchemaTree(div, schema.items, depth + 1);
@@ -1336,10 +1509,107 @@ function renderSchemaTree(parent, schema, depth = 0) {
         const row = doc.createElement('div');
         row.style.padding = '6px 0';
         row.innerHTML = `<span style="color: var(--text-secondary);">${esc(schema.type || 'any')}</span>`;
+        appendConstraintChips(row, schema);
         div.appendChild(row);
     }
     parent.appendChild(div);
 }
+// Render one HTTP parameter group (path/query/header/cookie) ReDoc-style.
+function renderParamGroup(title, params) {
+    const group = doc.createElement('div');
+    group.className = 'http-param-group';
+    const heading = doc.createElement('div');
+    heading.className = 'http-param-group-title';
+    heading.textContent = title;
+    group.appendChild(heading);
+    const list = doc.createElement('div');
+    list.className = 'http-params';
+    params.forEach(param => {
+        const item = doc.createElement('div');
+        item.className = 'http-param';
+        const schema = param.schema || {};
+        const typeName = schema.type === 'array' ? `${schema.items?.type || 'any'}[]` : (schema.type || 'string');
+        const head = doc.createElement('div');
+        head.className = 'http-param-head';
+        head.innerHTML = `<span class="http-param-name">${esc(param.name)}</span>` +
+            `<span class="schema-type type-${esc(schema.type || 'string')}">${esc(typeName)}</span>` +
+            (param.required ? '<span class="http-param-required">required</span>' : '') +
+            (param.deprecated ? '<span class="http-param-deprecated">deprecated</span>' : '');
+        item.appendChild(head);
+        const description = param.description || schema.description;
+        if (description) {
+            const desc = doc.createElement('div');
+            desc.className = 'http-param-desc';
+            desc.textContent = description;
+            item.appendChild(desc);
+        }
+        appendConstraintChips(item, schema);
+        list.appendChild(item);
+    });
+    group.appendChild(list);
+    return group;
+}
+// Render a single response as a collapsible accordion (ReDoc-style).
+function renderResponseAccordion(status, resp, openByDefault) {
+    const statusClass = status.startsWith('2') ? 'status-2xx'
+        : status.startsWith('3') ? 'status-3xx'
+            : status.startsWith('4') ? 'status-4xx'
+                : 'status-5xx';
+    const acc = doc.createElement('div');
+    acc.className = `response-accordion${openByDefault ? ' open' : ''}`;
+    const header = doc.createElement('button');
+    header.type = 'button';
+    header.className = 'response-accordion-header';
+    header.innerHTML = `<span class="response-accordion-caret">▶</span>` +
+        `<span class="response-status-dot ${statusClass}"></span>` +
+        `<span class="response-status-code">${esc(status)}</span>` +
+        `<span class="response-status-desc">${esc(resp.description || '')}</span>`;
+    const body = doc.createElement('div');
+    body.className = 'response-accordion-body';
+    if (resp.headers && Object.keys(resp.headers).length > 0) {
+        const block = doc.createElement('div');
+        block.className = 'response-block';
+        const sub = doc.createElement('div');
+        sub.className = 'response-subhead';
+        sub.textContent = 'Response Headers';
+        block.appendChild(sub);
+        const list = doc.createElement('div');
+        list.className = 'http-params';
+        Object.entries(resp.headers).forEach(([name, def]) => {
+            const item = doc.createElement('div');
+            item.className = 'http-param';
+            const hschema = def.schema || {};
+            item.innerHTML = `<div class="http-param-head"><span class="http-param-name">${esc(name)}</span><span class="schema-type type-${esc(hschema.type || 'string')}">${esc(hschema.type || 'string')}</span></div>` +
+                (def.description ? `<div class="http-param-desc">${esc(def.description)}</div>` : '');
+            list.appendChild(item);
+        });
+        block.appendChild(list);
+        body.appendChild(block);
+    }
+    const content = resp.content;
+    const contentType = content ? Object.keys(content)[0] : null;
+    const schema = contentType ? content[contentType]?.schema : null;
+    if (schema) {
+        const block = doc.createElement('div');
+        block.className = 'response-block';
+        const sub = doc.createElement('div');
+        sub.className = 'response-subhead';
+        sub.textContent = `Response Body${contentType ? ` · ${contentType}` : ''}`;
+        block.appendChild(sub);
+        renderSchemaTree(block, schema);
+        body.appendChild(block);
+    }
+    if (!body.children.length) {
+        const empty = doc.createElement('div');
+        empty.className = 'response-desc-only';
+        empty.textContent = resp.description || 'No content.';
+        body.appendChild(empty);
+    }
+    header.onclick = () => acc.classList.toggle('open');
+    acc.appendChild(header);
+    acc.appendChild(body);
+    return acc;
+}
 function renderEndpointDetails(endpoint) {
     const container = doc.createElement('div');
     container.className = 'endpoint-details';
@@ -1347,82 +1617,81 @@ function renderEndpointDetails(endpoint) {
     appendProtocolConsole(container, { doc, spec, wsSpec, streamsSpec, jsonrpcSpec, activeProtocol, endpoint, data, esc, escapeAttr });
     const appendMany = (items) => items.forEach(([title, value]) => appendSchemaSubsection(container, title, value));
     if (activeProtocol === 'http') {
+        // Two-column operation layout (ReDoc-style): the left column carries the
+        // contract (params + schemas + responses); the right column is a sticky
+        // dark panel with the request samples and response examples.
+        const content = doc.createElement('div');
+        content.className = 'endpoint-content';
+        const left = doc.createElement('div');
+        left.className = 'endpoint-left';
+        const right = doc.createElement('div');
+        right.className = 'endpoint-right';
         const params = (data.parameters ?? []);
         if (params.length > 0) {
             const section = doc.createElement('div');
             section.className = 'endpoint-subsection';
             section.innerHTML = '<div class="subsection-label">PARAMETERS</div>';
-            const grid = doc.createElement('div');
-            grid.className = 'info-grid';
-            params.forEach(p => {
-                grid.innerHTML += `<div class="info-card"><div class="info-card-title">${esc(p.name)}</div><div class="info-card-value">${esc(p.in || 'query')} • ${esc(p.schema?.type || 'string')}${p.required ? ' *' : ''}</div></div>`;
+            const groups = [
+                ['path', 'Path Parameters'],
+                ['query', 'Query Parameters'],
+                ['header', 'Header Parameters'],
+                ['cookie', 'Cookie Parameters'],
+            ];
+            groups.forEach(([location, title]) => {
+                const inGroup = params.filter(p => (p.in || 'query') === location);
+                if (inGroup.length > 0)
+                    section.appendChild(renderParamGroup(title, inGroup));
             });
-            section.appendChild(grid);
-            container.appendChild(section);
+            left.appendChild(section);
         }
         const reqBody = data.requestBody;
         if (reqBody?.content) {
             const section = doc.createElement('div');
             section.className = 'endpoint-subsection';
-            section.innerHTML = '<div class="subsection-label">REQUEST BODY</div>';
-            const content = reqBody.content[Object.keys(reqBody.content)[0]];
-            if (content?.schema) {
-                renderSchemaTree(section, content.schema);
-            }
-            container.appendChild(section);
+            const contentType = Object.keys(reqBody.content)[0];
+            section.innerHTML = `<div class="subsection-label">REQUEST BODY${reqBody.required ? ' <span style="color:#ef4444">required</span>' : ''}${contentType ? ` · ${esc(contentType)}` : ''}</div>`;
+            const bodyContent = reqBody.content[contentType];
+            if (bodyContent?.schema)
+                renderSchemaTree(section, bodyContent.schema);
+            left.appendChild(section);
         }
         const responses = data.responses;
         if (responses && Object.keys(responses).length > 0) {
             const section = doc.createElement('div');
             section.className = 'endpoint-subsection';
             section.innerHTML = '<div class="subsection-label">RESPONSES</div>';
-            Object.entries(responses).forEach(([status, resp]) => {
-                const statusClass = status.startsWith('2') ? 'status-2xx' : status.startsWith('4') ? 'status-4xx' : 'status-5xx';
-                const item = doc.createElement('div');
-                item.style.marginBottom = '16px';
-                item.style.padding = '12px';
-                item.style.borderRadius = '6px';
-                item.style.backgroundColor = 'var(--bg-secondary)';
-                item.innerHTML = `<div style="color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;"><span class="badge badge-${statusClass}">${status}</span> <strong>${esc(resp.description || '')}</strong></div>`;
-                // Headers
-                if (resp.headers && Object.keys(resp.headers).length > 0) {
-                    const headersDiv = doc.createElement('div');
-                    headersDiv.style.marginBottom = '12px';
-                    headersDiv.innerHTML = '<div style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px;">HEADERS</div>';
-                    const headersList = doc.createElement('div');
-                    headersList.style.fontSize = '12px';
-                    Object.entries(resp.headers).forEach(([headerName, headerDef]) => {
-                        const headerRow = doc.createElement('div');
-                        headerRow.style.padding = '4px 0';
-                        headerRow.style.borderLeft = '2px solid var(--border-color)';
-                        headerRow.style.paddingLeft = '8px';
-                        const headerType = headerDef.schema?.type || 'string';
-                        headerRow.innerHTML = `<div style="font-weight: 500; color: var(--text-primary);">${esc(headerName)}</div><div style="color: var(--text-muted); font-size: 11px;">${headerType}</div>${headerDef.description ? `<div style="color: var(--text-muted); font-size: 11px; margin-top: 2px;">${esc(headerDef.description)}</div>` : ''}`;
-                        headersList.appendChild(headerRow);
-                    });
-                    headersDiv.appendChild(headersList);
-                    item.appendChild(headersDiv);
-                }
-                // Schema
-                if (resp.content) {
-                    const contentType = Object.keys(resp.content)[0];
-                    const schema = resp.content[contentType]?.schema;
-                    if (schema) {
-                        const schemaDiv = doc.createElement('div');
-                        schemaDiv.innerHTML = '<div style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px;">SCHEMA</div>';
-                        renderSchemaTree(schemaDiv, schema);
-                        item.appendChild(schemaDiv);
-                    }
-                }
-                section.appendChild(item);
+            const entries = Object.entries(responses);
+            let opened = false;
+            entries.forEach(([status, resp]) => {
+                const open = !opened && status.startsWith('2');
+                if (open)
+                    opened = true;
+                section.appendChild(renderResponseAccordion(status, resp, open));
             });
-            container.appendChild(section);
+            if (!opened) {
+                const first = section.querySelector('.response-accordion');
+                if (first)
+                    first.classList.add('open');
+            }
+            left.appendChild(section);
+        }
+        // Right column: request samples (cURL / JavaScript / Python / Rust).
+        const samplesSection = doc.createElement('div');
+        samplesSection.className = 'endpoint-right-section';
+        samplesSection.innerHTML = '<div class="endpoint-right-header">Request samples</div>';
+        samplesSection.appendChild(renderCodeExamples(endpoint, data));
+        right.appendChild(samplesSection);
+        // Right column: response samples (JSON examples per status code).
+        if (responses && Object.keys(responses).length > 0) {
+            const respSamples = doc.createElement('div');
+            respSamples.className = 'endpoint-right-section';
+            respSamples.innerHTML = '<div class="endpoint-right-header">Response samples</div>';
+            respSamples.appendChild(renderResponseSamples(responses));
+            right.appendChild(respSamples);
         }
-        // Code examples
-        const examplesSection = doc.createElement('div');
-        examplesSection.className = 'endpoint-subsection';
-        examplesSection.appendChild(renderCodeExamples(endpoint, data));
-        container.appendChild(examplesSection);
+        content.appendChild(left);
+        content.appendChild(right);
+        container.appendChild(content);
     }
     if (activeProtocol === 'websocket') {
         appendInfoGrid(container, [['Channel Type', data.type], ['Path', endpoint.path]]);
@@ -1705,23 +1974,35 @@ function pageNavCard(entry, label, direction) {
     button.onclick = () => setDocsPage(entry.path);
     return button;
 }
+function setTocColumn(visible) {
+    const shell = doc.querySelector?.('.main-shell');
+    if (shell)
+        shell.classList.toggle('main-shell-no-toc', !visible);
+}
 function renderToc(root) {
     const toc = byId('pageToc');
     if (!toc)
         return;
     toc.textContent = '';
-    if (tocConfig.enabled === false)
+    if (tocConfig.enabled === false) {
+        setTocColumn(false);
         return;
-    if (root.querySelector?.('[data-markdown-ignore-all="true"]'))
+    }
+    if (root.querySelector?.('[data-markdown-ignore-all="true"]')) {
+        setTocColumn(false);
         return;
+    }
     const min = Number(tocConfig.minLevel ?? 2);
     const max = Number(tocConfig.maxLevel ?? 3);
     const headings = Array.from(root.querySelectorAll('h1,h2,h3,h4,h5,h6') ?? []).filter((heading) => {
         const level = Number(heading.tagName.slice(1));
         return heading.id && level >= min && level <= max && heading.dataset?.markdownIgnore !== 'true';
     });
-    if (headings.length === 0)
+    if (headings.length === 0) {
+        setTocColumn(false);
         return;
+    }
+    setTocColumn(true);
     const title = doc.createElement('div');
     title.className = 'toc-title';
     title.textContent = 'On this page';