rapidoc 11.0.1 → 12.1.0

package/src/templates/advanced-search-dialog-template.js

@@ -0,0 +1,94 @@
+/**
+ * Renders the modal search dialog for full-text search across paths, operation summaries, descriptions, and tags.
+ */
+import { html } from "lit";
+export default function advancedSearchDialogTemplate() {
+  return html`<dialog id="advanced-search-dialog" class="dialog-box">
+    <header class="dialog-box-header">
+      <span class="dialog-box-title">Search</span>
+      <button type="button" @click="${(e) => this.onAdvancedSearchClose(e)}">&times;</button>
+    </header>
+    <div class="dialog-box-content">
+      <div class="advanced-search-options">
+        <input
+          id="input-advanced-search-dialog"
+          style="width:100%; padding-right:20px;"
+          type="text"
+          part="textbox textbox-search-dialog"
+          placeholder="search text..."
+          spellcheck="false"
+          @keyup="${(e) => this.onAdvancedSearch(e, 400)}"
+        />
+        <div class="search-options-row">
+          <label class="search-option-label" for="search-api-path">
+            <input
+              type="checkbox"
+              part="checkbox checkbox-search-dialog"
+              id="search-api-path"
+              checked
+              @change="${(e) => this.onAdvancedSearch(e, 0)}"
+            />
+            API Path
+          </label>
+          <label class="search-option-label" for="search-api-descr">
+            <input
+              type="checkbox"
+              part="checkbox checkbox-search-dialog"
+              id="search-api-descr"
+              checked
+              @change="${(e) => this.onAdvancedSearch(e, 0)}"
+            />
+            API Description
+          </label>
+          <label class="search-option-label" for="search-api-params">
+            <input
+              type="checkbox"
+              part="checkbox checkbox-search-dialog"
+              id="search-api-params"
+              @change="${(e) => this.onAdvancedSearch(e, 0)}"
+            />
+            API Parameters
+          </label>
+          <label class="search-option-label" for="search-api-request-body">
+            <input
+              type="checkbox"
+              part="checkbox checkbox-search-dialog"
+              id="search-api-request-body"
+              @change="${(e) => this.onAdvancedSearch(e, 0)}"
+            />
+            Request Body Parameters
+          </label>
+          <label class="search-option-label" for="search-api-resp-descr">
+            <input
+              type="checkbox"
+              part="checkbox checkbox-search-dialog"
+              id="search-api-resp-descr"
+              @change="${(e) => this.onAdvancedSearch(e, 0)}"
+            />
+            Response Description
+          </label>
+        </div>
+      </div>
+      ${this.advancedSearchMatches?.map(
+        (path) => html`
+          <div
+            class="mono-font small-font-size hover-bg search-match-row"
+            style="${path.deprecated ? "filter:opacity(0.5);" : ""}"
+            data-content-id="${path.elementId}"
+            tabindex="0"
+            @click="${(e) => {
+              this.searchVal = ""; // clear quick filter if applied
+              this.shadowRoot.getElementById("advanced-search-dialog").close();
+              this.requestUpdate();
+              this.scrollToEventTarget(e, true);
+            }}"
+          >
+            <span class="upper bold-text method-fg ${path.method}">${path.method}</span>
+            <span>${path.path}</span>
+            <span class="regular-font gray-text">${path.summary}</span>
+          </div>
+        `,
+      )}
+    </div>
+  </dialog>`;
+}

package/src/templates/api-response-template.js

@@ -0,0 +1,223 @@
+/**
+ * Renders the interactive API response panel (status, headers, body, blob actions),
+ * live cURL preview/copy, and the execute/Try action controls for <api-request>.
+ */
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { copyToClipboard, downloadResource, viewResource } from "~/utils/common-utils";
+
+export function curlSyntaxTemplate(display = "flex") {
+  return html`
+    <div class="col m-markdown" style="flex:1; display:${display}; position:relative; max-width: 100%;">
+      <button
+        class="btn btn-sm btn-outline toolbar-btn"
+        style="position:absolute; top:12px; right:8px"
+        @click="${(e) => {
+          copyToClipboard(this.curlSyntax.trim().replace(/\\$/, ""), e);
+        }}"
+        part="btn btn-outline btn-copy"
+      >
+        Copy
+      </button>
+      <pre style="white-space:pre"><code class="language-shell">${this.curlSyntax.trim().replace(/\\$/, "")}</code></pre>
+    </div>
+  `;
+}
+
+export function apiResponseTabTemplate() {
+  let responseFormat = "";
+  let responseContent = "";
+  if (!this.responseIsBlob) {
+    if (
+      this.responseHeaders.includes("application/x-ndjson") ||
+      this.responseHeaders.includes("json")
+    ) {
+      responseFormat = "json";
+    } else if (this.responseHeaders.includes("html") || this.responseHeaders.includes("xml")) {
+      responseFormat = "html";
+    } else {
+      responseFormat = "text";
+    }
+    responseContent = html`<code class="language-${responseFormat}">${this.responseText}</code>`;
+  }
+  return html` <div class="row" style="font-size:var(--font-size-small); margin:5px 0; justify-content:space-between; align-items:center;">
+      <div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage}</div>
+      <button class="btn btn-outline" part="btn btn-outline btn-clear-response" @click="${this.clearResponseData}">CLEAR RESPONSE</button>
+    </div>
+    <div part="tab-panel" class="tab-panel col">
+      <div
+        id="tab_buttons"
+        part="tab-btn-row"
+        class="tab-buttons row"
+        @click="${(e) => {
+          if (
+            e.target.classList.contains("tab-btn") === false &&
+            e.target.classList.contains("tab") === false
+          ) {
+            return;
+          }
+          this.activeResponseTab = e.target.dataset.tab;
+        }}"
+      >
+        <button part="tab-btn" class="tab-btn ${this.activeResponseTab === "response" ? "active" : ""}" data-tab="response">
+          RESPONSE
+        </button>
+        <button part="tab-btn" class="tab-btn ${this.activeResponseTab === "headers" ? "active" : ""}" data-tab="headers">
+          RESPONSE HEADERS
+        </button>
+        ${
+          this.showCurlBeforeTry === "true"
+            ? ""
+            : html`<button part="tab-btn" class="tab-btn ${this.activeResponseTab === "curl" ? "active" : ""}" data-tab="curl">
+                CURL
+              </button>`
+        }
+      </div>
+      ${
+        this.responseIsBlob
+          ? html`<div
+              part="tab-content"
+              class="tab-content col"
+              style="flex:1; display:${this.activeResponseTab === "response" ? "flex" : "none"};"
+            >
+              ${
+                this.responseBlobType === "image"
+                  ? html`<img style="max-height:var(--resp-area-height); object-fit:contain;" class="mar-top-8" src="${ifDefined(this.responseBlobUrl)}"></img>`
+                  : ""
+              }
+              <button
+                class="btn btn-outline mar-top-8"
+                style="width:135px"
+                @click="${() => {
+                  downloadResource(this.responseBlobUrl, this.respContentDisposition);
+                }}"
+                part="btn btn-outline"
+              >
+                DOWNLOAD
+              </button>
+              ${
+                this.responseBlobType === "view" || this.responseBlobType === "image"
+                  ? html`<button
+                      class="btn btn-outline mar-top-8"
+                      style="width:135px"
+                      @click="${() => {
+                        viewResource(this.responseBlobUrl);
+                      }}"
+                      part="btn btn-outline"
+                    >
+                      VIEW (NEW TAB)
+                    </button>`
+                  : ""
+              }
+            </div>`
+          : html`<div
+              part="tab-content"
+              class="tab-content col m-markdown"
+              style="flex:1; display:${this.activeResponseTab === "response" ? "flex" : "none"};"
+            >
+              <button
+                class="btn btn-sm btn-outline toolbar-btn"
+                @click="${(e) => {
+                  copyToClipboard(this.responseText, e);
+                }}"
+                part="btn btn-outline btn-copy"
+              >
+                Copy
+              </button>
+              <pre style="white-space:pre; min-height:50px; height:var(--resp-area-height); resize:vertical; overflow:auto">
+${responseContent}</pre>
+            </div>`
+      }
+      <div
+        part="tab-content"
+        class="tab-content col m-markdown"
+        style="flex:1; display:${this.activeResponseTab === "headers" ? "flex" : "none"};"
+      >
+        <button
+          class="btn btn-sm btn-outline toolbar-btn"
+          @click="${(e) => {
+            copyToClipboard(this.responseHeaders, e);
+          }}"
+          part="btn btn-outline btn-copy"
+        >
+          Copy
+        </button>
+        <pre style="white-space:pre"><code class="language-css">${this.responseHeaders}</code></pre>
+      </div>
+      ${this.showCurlBeforeTry === "true" ? "" : curlSyntaxTemplate.call(this, this.activeResponseTab === "curl" ? "flex" : "none")}
+    </div>`;
+}
+
+export function apiCallTemplate() {
+  let authHtml;
+  if (this.security?.length > 0 && !this.security.every((s) => !s || Object.keys(s).length === 0)) {
+    if (this.api_keys.length > 0) {
+      authHtml = html`<span class="blue-text">
+        ${this.api_keys.length === 1 ? `${this.api_keys[0]?.typeDisplay} in ${this.api_keys[0].in}` : `${this.api_keys.length} API keys applied`}
+      </span>`;
+    } else if (this.security.some((s) => !s || Object.keys(s).length === 0)) {
+      authHtml = html`Optional (None Applied)`;
+    } else {
+      authHtml = html`Required <span class="red-text">(None Applied)</span>`;
+    }
+  } else {
+    authHtml = html`Not Required`;
+  }
+
+  return html`<div class="try-bar" part="wrap-request-btn">
+      <div class="try-layout">
+        <dl class="try-info">
+          ${
+            this.serverUrl
+              ? html`<dt>API Server</dt>
+                  <dd class="try-server-url">${this.serverUrl}</dd>`
+              : ""
+          }
+          <dt>Authentication</dt>
+          <dd>${authHtml}</dd>
+        </dl>
+        <div class="try-actions">
+          ${
+            this.parameters.length > 0 || this.request_body
+              ? html`${
+                  this.hasExampleToFill
+                    ? html`<button
+                          class="btn btn-outline"
+                          part="btn btn-outline btn-fill btn-fill-example"
+                          ?disabled="${this.loading}"
+                          @click="${this.onFillRequestData}"
+                          title="Fills the request fields with their examples"
+                        >
+                          FILL EXAMPLE
+                        </button>`
+                    : ""
+                }
+                  <button
+                    class="btn btn-outline"
+                    part="btn btn-outline btn-clear"
+                    ?disabled="${this.loading || !this.hasValueToClear}"
+                    @click="${this.onClearRequestData}"
+                  >
+                    CLEAR
+                  </button>`
+              : ""
+          }
+          <button
+            class="btn btn-primary"
+            part="btn btn-try"
+            ?disabled="${this.loading}"
+            aria-busy="${this.loading}"
+            @click="${this.onTryClick}"
+          >
+            ${this.loading ? "TRYING..." : "TRY"}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="row" style="font-size:var(--font-size-small); margin:5px 0">
+      ${this.showCurlBeforeTry === "true" ? curlSyntaxTemplate.call(this) : ""}
+    </div>
+    ${this.responseMessage === "" ? "" : apiResponseTabTemplate.call(this)} `;
+}
+
+export default apiCallTemplate;

package/src/templates/callback-template.js

@@ -0,0 +1,86 @@
+/**
+ * Renders OpenAPI callback requests and nested response definitions within an endpoint.
+ */
+import { html } from "lit";
+
+export default function callbackTemplate(callbacks) {
+  return html`
+    <h4 class="rapidoc-heading label-heading req-res-title" part="heading heading-4">Callbacks</h4>
+    ${Object.entries(callbacks).map(
+      (kv) => html`
+        <div class="tiny-title" style="padding: 12px; border:1px solid var(--border)">
+          <h5 class="rapidoc-heading callback-name" part="heading heading-5">${kv[0]}</h5>
+          ${Object.entries(kv[1]).map(
+            (pathObj) => html`
+              <div class="callback-operation-list mono-font small-font-size">
+                ${Object.entries(pathObj[1]).map(
+                  (method) => html`
+                    <div class="callback-operation-item">
+                      <div class="callback-operation-header">
+                        <div class="method method-fg ${method[0]} callback-method">
+                          <span style="font-size:20px;"> &#x2944; </span>
+                          ${method[0]}
+                        </div>
+                        <span style="line-height:20px; vertical-align: baseline;">${pathObj[0]}</span>
+                      </div>
+                      <div class="expanded-req-resp-container">
+                        <api-request
+                          .config="${this.config}"
+                          class="${this.renderStyle}-mode callback"
+                          style="width:100%;"
+                          callback="true"
+                          method="${method[0] || ""}"
+                          path="${pathObj[0] || ""}"
+                          .parameters="${method[1]?.parameters || ""}"
+                          .request_body="${method[1]?.requestBody || ""}"
+                          fill-request-fields-with-example="${this.fillRequestFieldsWithExample}"
+                          allow-try="false"
+                          render-style="${this.renderStyle}"
+                          schema-style="${this.schemaStyle}"
+                          active-schema-tab="${this.defaultSchemaTab}"
+                          schema-expand-level="${this.schemaExpandLevel}"
+                          schema-description-expanded="${this.schemaDescriptionExpanded}"
+                          allow-schema-description-expand-toggle="${this.allowSchemaDescriptionExpandToggle}"
+                          schema-hide-read-only="false"
+                          schema-hide-write-only="${this.schemaHideWriteOnly === "never" ? "false" : "true"}"
+                          fetch-credentials="${this.fetchCredentials}"
+                          exportparts="section-request-title:section-request-title, heading:heading, heading-4:heading-4, heading-5:heading-5, heading-6:heading-6,
+            wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-fill-example:btn-fill-example, btn-clear-resp:btn-clear-resp,
+                          tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-content:tab-content, 
+                          file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+                          anchor:anchor, anchor-param-example:anchor-param-example, anchor-param-constraint:anchor-param-constraint, param-list:param-list, param:param, param-label:param-label, param-name:param-name, param-type:param-type, param-input:param-input, param-constraint:param-constraint, param-constraint-label:param-constraint-label, param-details:param-details, param-example-list:param-example-list, value-list:value-list, value-list-label:value-list-label, value-list-items:value-list-items, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+                        >
+                        </api-request>
+
+                        <api-response
+                          .config="${this.config}"
+                          style="width:100%;"
+                          class="${this.renderStyle}-mode"
+                          callback="true"
+                          .responses="${method[1]?.responses}"
+                          render-style="${this.renderStyle}"
+                          schema-style="${this.schemaStyle}"
+                          active-schema-tab="${this.defaultSchemaTab}"
+                          schema-expand-level="${this.schemaExpandLevel}"
+                          schema-description-expanded="${this.schemaDescriptionExpanded}"
+                          allow-schema-description-expand-toggle="${this.allowSchemaDescriptionExpandToggle}"
+                          schema-hide-read-only="${this.schemaHideReadOnly === "never" ? "false" : "true"}"
+                          schema-hide-write-only="false"
+                          exportparts="section-response-title:section-response-title, heading:heading, heading-4:heading-4, heading-5:heading-5, heading-6:heading-6,
+            btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-outline:btn-outline, btn-copy:btn-copy,
+                          tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-content:tab-content, 
+                          schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle, param-list:param-list, param:param, param-label:param-label, param-name:param-name, param-type:param-type, param-constraint:param-constraint, param-constraint-label:param-constraint-label, param-details:param-details, param-example-list:param-example-list, value-list:value-list, value-list-label:value-list-label, value-list-items:value-list-items"
+                        >
+                        </api-response>
+                      </div>
+                    </div>
+                  `,
+                )}
+              </div>
+            `,
+          )}
+        </div>
+      `,
+    )}
+  `;
+}

package/src/templates/code-samples-template.js

@@ -0,0 +1,52 @@
+/**
+ * Renders multi-language code snippets and custom x-codeSamples / x-code-samples tab panels.
+ */
+import { html } from "lit";
+
+import { copyToClipboard } from "~/utils/common-utils";
+import { scheduleHighlight } from "~/utils/highlighter";
+
+export default function codeSamplesTemplate(xCodeSamples) {
+  return html` <div class="code-samples-container">
+    <h4 class="rapidoc-heading label-heading table-title top-gap" part="heading heading-4">Code samples</h4>
+    <div
+      part="tab-panel"
+      class="tab-panel col"
+      @click="${(e) => {
+        if (!e.target.classList.contains("tab-btn")) {
+          return;
+        }
+        const clickedTab = e.target.dataset.tab;
+
+        const tabButtons = [...e.currentTarget.querySelectorAll(".tab-btn")];
+        const tabContents = [...e.currentTarget.querySelectorAll(".tab-content")];
+        tabButtons.forEach((tabBtnEl) =>
+          tabBtnEl.classList[tabBtnEl.dataset.tab === clickedTab ? "add" : "remove"]("active"),
+        );
+        tabContents.forEach((tabBodyEl) => {
+          tabBodyEl.style.display = tabBodyEl.dataset.tab === clickedTab ? "block" : "none";
+        });
+        scheduleHighlight(e.currentTarget.getRootNode()?.host?.shadowRoot || e.currentTarget);
+      }}"
+    >
+      <div part="tab-btn-row" class="tab-buttons row" style="width:100%; overflow:auto;">
+        ${xCodeSamples.map((v, i) => html`<button part="tab-btn" class="tab-btn ${i === 0 ? "active" : ""}" data-tab="${v.lang}${i}">${v.label || v.lang}</button>`)}
+      </div>
+      ${xCodeSamples.map(
+        (v, i) =>
+          html`<div class="tab-content m-markdown" style="display:${i === 0 ? "block" : "none"}" data-tab="${v.lang}${i}">
+            <button
+              class="btn btn-sm btn-outline toolbar-btn"
+              part="btn btn-outline btn-copy"
+              @click="${(e) => {
+                copyToClipboard(v.source, e);
+              }}"
+            >
+              Copy
+            </button>
+            <pre><code class="language-${v.lang?.toLowerCase()}">${v.source}</code></pre>
+          </div>`,
+      )}
+    </div>
+  </div>`;
+}

package/src/templates/components-template.js

@@ -0,0 +1,86 @@
+/**
+ * Renders reusable OpenAPI component definitions (schemas, models) in the document.
+ */
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { sanitizeHTML } from "../utils/sanitize.js";
+import { marked } from "marked";
+import { schemaToAST } from "~/utils/schema-utils";
+import "~/components/json-tree";
+import "~/components/schema-tree";
+import "~/components/schema-table";
+
+function schemaBodyTemplate(sComponent) {
+  return html` <div class="expanded-endpoint-body observe-me ${sComponent.name}" id="cmp--${sComponent.id}">
+    <h3 class="rapidoc-heading component-title" part="heading heading-3">
+      ${sComponent.name} <span style="color:var(--muted-foreground); font-size:var(--font-size-small); font-weight:400;"> Schema </span>
+    </h3>
+    ${
+      this.schemaStyle === "table"
+        ? html` <schema-table
+            .data="${schemaToAST(sComponent.component)}"
+            schema-expand-level="${this.schemaExpandLevel}"
+            schema-description-expanded="${this.schemaDescriptionExpanded}"
+            allow-schema-description-expand-toggle="${this.allowSchemaDescriptionExpandToggle}"
+            schema-hide-read-only="false"
+            schema-hide-write-only="${this.schemaHideWriteOnly}"
+            exportparts="schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+          >
+          </schema-table>`
+        : html`<schema-tree
+            .data="${schemaToAST(sComponent.component)}"
+            schema-expand-level="${this.schemaExpandLevel}"
+            schema-description-expanded="${this.schemaDescriptionExpanded}"
+            allow-schema-description-expand-toggle="${this.allowSchemaDescriptionExpandToggle}"
+            schema-hide-read-only="false"
+            schema-hide-write-only="${this.schemaHideWriteOnly}"
+            exportparts="schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+          >
+          </schema-tree>`
+    }
+  </div>`;
+}
+
+function componentBodyTemplate(sComponent, componentType) {
+  if (sComponent.id.indexOf("schemas-") !== -1) {
+    return schemaBodyTemplate.call(this, sComponent);
+  }
+  return html`
+    <div class="expanded-endpoint-body observe-me ${sComponent.name}" id="cmp--${sComponent.id}">
+      ${html`
+        <h3 class="rapidoc-heading component-title" part="heading heading-3">
+          ${sComponent.name}
+          <span style="color:var(--muted-foreground); font-size:var(--font-size-small); font-weight:400"> ${componentType} </span>
+        </h3>
+        ${
+          sComponent.component
+            ? html`<div class="mono-font regular-font-size" style="padding: 8px 0; color:var(--card-foreground)">
+                <json-tree class="border tree" render-style="${this.renderStyle}" .data="${sComponent.component}"> </json-tree>
+              </div>`
+            : ""
+        }
+      `}
+    </div>
+  `;
+}
+
+export default function componentsTemplate() {
+  if (!this.resolvedSpec) {
+    return "";
+  }
+  return html`
+    ${this.resolvedSpec.components.map(
+      (component) => html`
+        <div id="cmp--${component.name.toLowerCase()}" class="regular-font section-gap--read-mode observe-me read-mode-tag">
+          <h2 class="rapidoc-heading title tag" part="heading heading-2">${component.name}</h2>
+          ${unsafeHTML(`<div class='m-markdown regular-font'>${sanitizeHTML(marked(component.description || ""))}</div>`)}
+        </div>
+        <div class="regular-font section-gap--read-mode">
+          ${component.subComponents
+            .filter((c) => c.expanded !== false)
+            .map((sComponent) => componentBodyTemplate.call(this, sComponent, component.name))}
+        </div>
+      `,
+    )}
+  `;
+}

package/src/templates/downloads-template.js

@@ -0,0 +1,70 @@
+/**
+ * Dedicated Download & Export Action Bar for OpenAPI specs and curated MCP servers.
+ * Rendered independently of show-info to guarantee accessibility across all render modes.
+ */
+import { html } from "lit";
+import { downloadResource, viewResource } from "~/utils/common-utils";
+import { parseMcpEnabled } from "~/utils/mcp-generator";
+
+export default function downloadsTemplate() {
+  const showSpecDownload = this.specUrl && this.allowSpecFileDownload === "true";
+  const showMcpExport = parseMcpEnabled(this.mcp);
+
+  if (!showSpecDownload && !showMcpExport) {
+    return "";
+  }
+
+  let sectionClass = "section-gap";
+  if (this.renderStyle === "focused") {
+    sectionClass = "section-gap--focused-mode";
+  } else if (this.renderStyle === "read") {
+    sectionClass = "section-gap--read-mode";
+  }
+
+  return html`
+    <section id="downloads" part="section-downloads" class="downloads-bar observe-me ${sectionClass}">
+      ${
+        showSpecDownload
+          ? html`
+              <button
+                class="btn btn-outline download-btn"
+                part="btn btn-outline"
+                @click="${() => {
+                  downloadResource(this.specUrl, "openapi-spec");
+                }}"
+              >
+                Download OpenAPI spec
+              </button>
+              ${
+                this.specUrl?.trim().toLowerCase().endsWith("json")
+                  ? html`<button
+                      class="btn btn-outline download-btn view-spec"
+                      part="btn btn-outline"
+                      @click="${() => {
+                        viewResource(this.specUrl);
+                      }}"
+                    >
+                      View OpenAPI spec (New Tab)
+                    </button>`
+                  : ""
+              }
+            `
+          : ""
+      }
+      ${
+        showMcpExport
+          ? html`<button
+              class="btn btn-outline download-btn"
+              part="btn btn-outline btn-mcp-export"
+              title="Download an MCP server project (manifest, runtime and stdio server) as a zip"
+              @click="${() => {
+                this.downloadMcpServer();
+              }}"
+            >
+              Export MCP Server
+            </button>`
+          : ""
+      }
+    </section>
+  `;
+}