zudoku 0.10.0 → 0.11.0

package/lib/zudoku.plugin-api-keys.js

@@ -1,13 +1,13 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as x, R as f } from "./SlotletProvider-DJMaOUDs.js";
-import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-BEDZAKw0.js";
+import { S as x, R as f } from "./SlotletProvider-D3UD5Go3.js";
+import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-CtVUl3eT.js";
 import { a as N, L as u, O as I } from "./index-BG0g4WW0.js";
 import { u as h, a as E, b as S } from "./ZudokuContext-cr-pTRY1.js";
-import { B as l, m as A } from "./index-Zezcv0xb.js";
-import { D as C } from "./DeveloperHint-FBb2uXJe.js";
+import { B as l, m as A } from "./index-Dolisrci.js";
+import { D as C } from "./DeveloperHint-YeWHKvyr.js";
 import { RotateCwIcon as P, TrashIcon as D, EyeOffIcon as R, EyeIcon as q, CheckIcon as O, CopyIcon as z } from "lucide-react";
 import { useState as p } from "react";
-import { a as T } from "./Markdown-B4aR03g6.js";
+import { a as T } from "./Markdown-DapSf3wG.js";
 function c(t, s) {
   if (t)
     return;

package/lib/zudoku.plugin-custom-page.js

@@ -1,5 +1,5 @@
 import { j as m } from "./jsx-runtime-B6kdoens.js";
-import { P as o } from "./Markdown-B4aR03g6.js";
+import { P as o } from "./Markdown-DapSf3wG.js";
 const l = (s) => ({
   getRoutes: () => s.map(({ path: e, element: t }) => ({
     path: e,

package/lib/zudoku.plugin-markdown.js

@@ -1,29 +1,32 @@
-import { j as c } from "./jsx-runtime-B6kdoens.js";
-const i = (t, e) => Object.entries(t).flatMap(([a, s]) => {
-  const n = a.match(/pages\/(.*).mdx?$/), o = n == null ? void 0 : n.at(1);
-  return o ? {
-    path: o,
+import { j as u } from "./jsx-runtime-B6kdoens.js";
+const x = (t, e, n) => Object.entries(t).flatMap(([a, p]) => {
+  let o = e.split("**")[0];
+  o = o.replace("/**", "/");
+  const c = new RegExp(`^${o}(.*).mdx?`), r = a.match(c), s = r == null ? void 0 : r.at(1);
+  return s ? {
+    path: s,
     lazy: async () => {
-      const { MdxPage: r } = await import("./MdxPage-BZyQsH8Z.js"), { default: p, ...m } = await s();
+      const { MdxPage: i } = await import("./MdxPage-BqBWsXZ1.js"), { default: m, ...l } = await p();
       return {
-        element: /* @__PURE__ */ c.jsx(
-          r,
+        element: /* @__PURE__ */ u.jsx(
+          i,
           {
-            mdxComponent: p,
-            ...m,
-            defaultOptions: e
+            mdxComponent: m,
+            ...l,
+            defaultOptions: n
           }
         )
       };
     }
   } : [];
-}), x = ({
+}), f = ({
   markdownFiles: t,
-  defaultOptions: e
+  defaultOptions: e,
+  filesPath: n
 }) => ({
-  getRoutes: () => i(t, e)
+  getRoutes: () => x(t, n, e)
 });
 export {
-  x as markdownPlugin
+  f as markdownPlugin
 };
 //# sourceMappingURL=zudoku.plugin-markdown.js.map

package/lib/zudoku.plugin-markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-markdown.js","sources":["../src/lib/plugins/markdown/generateRoutes.tsx","../src/lib/plugins/markdown/index.tsx"],"sourcesContent":["import { type RouteObject } from \"react-router-dom\";\n\nimport {\n  MarkdownPluginDefaultOptions,\n  MarkdownPluginOptions,\n} from \"./index.js\";\n\nexport const generateRoutes = (\n  markdownFiles: MarkdownPluginOptions[\"markdownFiles\"],\n  defaultOptions?: MarkdownPluginDefaultOptions,\n): RouteObject[] =>\n  Object.entries(markdownFiles).flatMap(([file, importPromise]) => {\n    // @todo we can pass in the folder name and then filter the markdown files based on that path\n    const match = file.match(/pages\\/(.*).mdx?$/);\n    const path = match?.at(1);\n\n    if (!path) return [];\n\n    return {\n      path,\n      lazy: async () => {\n        const { MdxPage } = await import(\"./MdxPage.js\");\n        const { default: Component, ...props } = await importPromise();\n        return {\n          element: (\n            <MdxPage\n              mdxComponent={Component}\n              {...props}\n              defaultOptions={defaultOptions}\n            />\n          ),\n        };\n      },\n    } satisfies RouteObject;\n  });\n","import type { Toc } from \"@stefanprobst/rehype-extract-toc\";\nimport type { MDXProps } from \"mdx/types.js\";\nimport type { DevPortalPlugin } from \"../../core/plugins.js\";\nimport { generateRoutes } from \"./generateRoutes.js\";\n\nexport type MarkdownPluginOptions = {\n  markdownFiles: Record<string, () => Promise<MDXImport>>;\n  defaultOptions?: MarkdownPluginDefaultOptions;\n};\nexport type MarkdownPluginDefaultOptions = Pick<\n  Frontmatter,\n  \"toc\" | \"disablePager\"\n>;\n\nexport type Frontmatter = {\n  title?: string;\n  description?: string;\n  category?: string;\n  toc?: boolean;\n  disablePager?: boolean;\n};\n\nexport type MDXImport = {\n  tableOfContents: Toc;\n  frontmatter: Frontmatter;\n  default: (props: MDXProps) => JSX.Element;\n};\n\nexport const markdownPlugin = ({\n  markdownFiles,\n  defaultOptions,\n}: MarkdownPluginOptions): DevPortalPlugin => ({\n  getRoutes: () => generateRoutes(markdownFiles, defaultOptions),\n});\n"],"names":["generateRoutes","markdownFiles","defaultOptions","file","importPromise","match","path","MdxPage","Component","props","jsx","markdownPlugin"],"mappings":";AAOO,MAAMA,IAAiB,CAC5BC,GACAC,MAEA,OAAO,QAAQD,CAAa,EAAE,QAAQ,CAAC,CAACE,GAAMC,CAAa,MAAM;AAEzD,QAAAC,IAAQF,EAAK,MAAM,mBAAmB,GACtCG,IAAOD,KAAA,gBAAAA,EAAO,GAAG;AAEnB,SAACC,IAEE;AAAA,IACL,MAAAA;AAAA,IACA,MAAM,YAAY;AAChB,YAAM,EAAE,SAAAC,EAAA,IAAY,MAAM,OAAO,uBAAc,GACzC,EAAE,SAASC,GAAW,GAAGC,EAAM,IAAI,MAAML;AACxC,aAAA;AAAA,QACL,SACEM,gBAAAA,EAAA;AAAA,UAACH;AAAA,UAAA;AAAA,YACC,cAAcC;AAAA,YACb,GAAGC;AAAA,YACJ,gBAAAP;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAGN;AAAA,EAAA,IAhBgB;AAkBpB,CAAC,GCNUS,IAAiB,CAAC;AAAA,EAC7B,eAAAV;AAAA,EACA,gBAAAC;AACF,OAA+C;AAAA,EAC7C,WAAW,MAAMF,EAAeC,GAAeC,CAAc;AAC/D;"}
+{"version":3,"file":"zudoku.plugin-markdown.js","sources":["../src/lib/plugins/markdown/generateRoutes.tsx","../src/lib/plugins/markdown/index.tsx"],"sourcesContent":["import { type RouteObject } from \"react-router-dom\";\n\nimport {\n  MarkdownPluginDefaultOptions,\n  MarkdownPluginOptions,\n} from \"./index.js\";\n\nexport const generateRoutes = (\n  markdownFiles: MarkdownPluginOptions[\"markdownFiles\"],\n  filesPath: string,\n  defaultOptions?: MarkdownPluginDefaultOptions,\n): RouteObject[] =>\n  Object.entries(markdownFiles).flatMap(([file, importPromise]) => {\n    let rootDir = filesPath.split(\"**\")[0];\n    rootDir = rootDir.replace(\"/**\", \"/\");\n    const re = new RegExp(`^${rootDir}(.*).mdx?`);\n    const match = file.match(re);\n    const fsPath = match?.at(1);\n\n    if (!fsPath) return [];\n\n    return {\n      path: fsPath,\n      lazy: async () => {\n        const { MdxPage } = await import(\"./MdxPage.js\");\n        const { default: Component, ...props } = await importPromise();\n        return {\n          element: (\n            <MdxPage\n              mdxComponent={Component}\n              {...props}\n              defaultOptions={defaultOptions}\n            />\n          ),\n        };\n      },\n    } satisfies RouteObject;\n  });\n","import type { Toc } from \"@stefanprobst/rehype-extract-toc\";\nimport type { MDXProps } from \"mdx/types.js\";\nimport type { DevPortalPlugin } from \"../../core/plugins.js\";\nimport { generateRoutes } from \"./generateRoutes.js\";\n\nexport type MarkdownPluginOptions = {\n  markdownFiles: Record<string, () => Promise<MDXImport>>;\n  defaultOptions?: MarkdownPluginDefaultOptions;\n  filesPath: string;\n};\nexport type MarkdownPluginDefaultOptions = Pick<\n  Frontmatter,\n  \"toc\" | \"disablePager\"\n>;\n\nexport type Frontmatter = {\n  title?: string;\n  description?: string;\n  category?: string;\n  toc?: boolean;\n  disablePager?: boolean;\n};\n\nexport type MDXImport = {\n  tableOfContents: Toc;\n  frontmatter: Frontmatter;\n  default: (props: MDXProps) => JSX.Element;\n};\n\nexport const markdownPlugin = ({\n  markdownFiles,\n  defaultOptions,\n  filesPath,\n}: MarkdownPluginOptions): DevPortalPlugin => ({\n  getRoutes: () => generateRoutes(markdownFiles, filesPath, defaultOptions),\n});\n"],"names":["generateRoutes","markdownFiles","filesPath","defaultOptions","file","importPromise","rootDir","re","match","fsPath","MdxPage","Component","props","jsx","markdownPlugin"],"mappings":";AAOO,MAAMA,IAAiB,CAC5BC,GACAC,GACAC,MAEA,OAAO,QAAQF,CAAa,EAAE,QAAQ,CAAC,CAACG,GAAMC,CAAa,MAAM;AAC/D,MAAIC,IAAUJ,EAAU,MAAM,IAAI,EAAE,CAAC;AAC3B,EAAAI,IAAAA,EAAQ,QAAQ,OAAO,GAAG;AACpC,QAAMC,IAAK,IAAI,OAAO,IAAID,CAAO,WAAW,GACtCE,IAAQJ,EAAK,MAAMG,CAAE,GACrBE,IAASD,KAAA,gBAAAA,EAAO,GAAG;AAErB,SAACC,IAEE;AAAA,IACL,MAAMA;AAAA,IACN,MAAM,YAAY;AAChB,YAAM,EAAE,SAAAC,EAAA,IAAY,MAAM,OAAO,uBAAc,GACzC,EAAE,SAASC,GAAW,GAAGC,EAAM,IAAI,MAAMP;AACxC,aAAA;AAAA,QACL,SACEQ,gBAAAA,EAAA;AAAA,UAACH;AAAA,UAAA;AAAA,YACC,cAAcC;AAAA,YACb,GAAGC;AAAA,YACJ,gBAAAT;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAGN;AAAA,EAAA,IAhBkB;AAkBtB,CAAC,GCRUW,IAAiB,CAAC;AAAA,EAC7B,eAAAb;AAAA,EACA,gBAAAE;AAAA,EACA,WAAAD;AACF,OAA+C;AAAA,EAC7C,WAAW,MAAMF,EAAeC,GAAeC,GAAWC,CAAc;AAC1E;"}

package/lib/zudoku.plugin-openapi.js

@@ -1,12 +1,12 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as u } from "./index-Dv2KZuEw.js";
+import { o as u } from "./index-DyJyULzS.js";
 import "./urql-YhcsXYy8.js";
 import "./ZudokuContext-cr-pTRY1.js";
 import "lucide-react";
 import "zudoku/openapi-worker";
-import "./index-Zezcv0xb.js";
-import "./ErrorPage-knunPbKI.js";
-import "./Markdown-B4aR03g6.js";
+import "./index-Dolisrci.js";
+import "./ErrorPage-Dri5_2lr.js";
+import "./Markdown-DapSf3wG.js";
 import "./joinPath-B7kNnUX4.js";
 import "./router-D2p7Olpn.js";
 import "./index-BG0g4WW0.js";

package/package.json

@@ -1,7 +1,16 @@
 {
   "name": "zudoku",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
+  "homepage": "https://zudoku.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zuplo/zudoku.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zuplo/zudoku/issues"
+  },
+  "description": "Framework for building high quality, interactive API documentation.",
   "files": [
     "dist",
     "lib",
@@ -102,6 +111,7 @@
     "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-visually-hidden": "1.1.0",
     "@sentry/node": "8.11.0",
+    "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
     "@tailwindcss/typography": "0.5.13",
     "@tanstack/react-query": "5.50.1",
@@ -111,12 +121,13 @@
     "chokidar": "^3.6.0",
     "class-variance-authority": "0.7.0",
     "dotenv": "16.4.5",
-    "express": "4.19.2",
+    "express": "4.20.0",
     "glob": "^11.0.0",
     "graphql": "16.9.0",
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.2.0",
     "gray-matter": "^4.0.3",
+    "http-terminator": "^3.2.0",
     "loglevel": "^1.9.1",
     "lru-cache": "11.0.0",
     "lucide-react": "0.438.0",
@@ -146,7 +157,6 @@
     "rollup": "^4.21.2",
     "semver": "7.6.2",
     "sitemap": "^8.0.0",
-    "slugify": "1.6.6",
     "strip-ansi": "7.1.0",
     "tailwind-merge": "2.5.2",
     "tailwindcss": "3.4.4",
@@ -155,7 +165,7 @@
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
     "vaul": "0.9.2",
-    "vite": "5.3.3",
+    "vite": "5.3.6",
     "yaml": "2.5.0",
     "yargs": "17.7.2",
     "zod": "3.23.8",

package/src/lib/authentication/state.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 export const useAuthState = create<AuthState>(() => ({
   isPending: false,
@@ -19,3 +20,19 @@ export interface UserProfile {
   pictureUrl: string | undefined;
   [key: string]: string | boolean | undefined;
 }
+
+interface SelectedServerState {
+  selectedServer?: string;
+  setSelectedServer: (newServer: string) => void;
+}
+
+export const useSelectedServerStore = create<SelectedServerState>()(
+  persist(
+    (set) => ({
+      selectedServer: undefined,
+      setSelectedServer: (newServer: string) =>
+        set({ selectedServer: newServer }),
+    }),
+    { name: "zudoku-selected-server" },
+  ),
+);

package/src/lib/components/InlineCode.tsx

@@ -4,11 +4,21 @@ import { cn } from "../util/cn.js";
 export const InlineCode = ({
   className,
   children,
+  selectOnClick,
 }: {
   className?: string;
   children: ReactNode;
+  selectOnClick?: boolean;
 }) => (
   <code
+    onClick={(e) => {
+      if (!selectOnClick) return;
+      const selection = window.getSelection();
+      const range = document.createRange();
+      range.selectNodeContents(e.currentTarget);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }}
     className={cn(
       "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
       className,

package/src/lib/components/Layout.tsx

@@ -53,7 +53,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
         <Suspense
           fallback={
-            <main className="grid h-full place-items-center">
+            <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
               <Spinner />
             </main>
           }

package/src/lib/oas/graphql/index.ts

@@ -1,10 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import SchemaBuilder from "@pothos/core";
+import {
+  slugifyWithCounter,
+  type CountableSlugify,
+} from "@sindresorhus/slugify";
 import { GraphQLJSON, GraphQLJSONObject } from "graphql-type-json";
 import { createYoga, type YogaServerOptions } from "graphql-yoga";
 import { LRUCache } from "lru-cache";
 import hashit from "object-hash";
-import slugify from "../../util/slugify.js";
 import {
   HttpMethods,
   validate,
@@ -15,6 +18,7 @@ import {
   type ParameterObject,
   type PathsObject,
   type SchemaObject,
+  type ServerObject,
   type TagObject,
 } from "../parser/index.js";
 
@@ -35,7 +39,12 @@ type OperationLike = {
   path: string;
   method: string;
 };
-export const slugifyOperation = (operation: OperationLike, tag?: string) => {
+
+export const createOperationSlug = (
+  slugify: CountableSlugify,
+  operation: OperationLike,
+  tag?: string,
+) => {
   const summary =
     (operation.summary ?? "") +
     (operation.operationId
@@ -46,7 +55,6 @@ export const slugifyOperation = (operation: OperationLike, tag?: string) => {
   return slugify(
     (tag ? tag + "-" : "") +
       (summary || `${operation.method}-${operation.path}`),
-    { lower: true, trim: true },
   );
 };
 
@@ -88,6 +96,8 @@ const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
 };
 
 const getAllOperations = (paths?: PathsObject, tag?: string) => {
+  const slugify = slugifyWithCounter();
+
   return Object.entries(paths ?? {}).flatMap(([path, value]) =>
     HttpMethods.flatMap((method) => {
       if (!value?.[method]) return [];
@@ -109,21 +119,20 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
         ...operationParameters,
       ];
 
+      const slugData = {
+        summary: operation.summary,
+        operationId: operation.operationId,
+        path,
+        method,
+      };
+
       return {
         ...operation,
         method,
         path,
         parameters,
         tags: operation.tags ?? [],
-        slug: slugifyOperation(
-          {
-            summary: operation.summary,
-            operationId: operation.operationId,
-            path,
-            method,
-          },
-          tag,
-        ),
+        slug: createOperationSlug(slugify, slugData, tag),
       };
     }),
   );
@@ -150,6 +159,13 @@ const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
   }),
 });
 
+const ServerItem = builder.objectRef<ServerObject>("Server").implement({
+  fields: (t) => ({
+    url: t.exposeString("url"),
+    description: t.exposeString("description", { nullable: true }),
+  }),
+});
+
 const PathItem = builder
   .objectRef<{
     path: string;
@@ -363,6 +379,10 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
   fields: (t) => ({
     openapi: t.string({ resolve: (root) => root.openapi }),
     url: t.string({ resolve: (root) => root.servers?.at(0)?.url ?? "/" }),
+    servers: t.field({
+      type: [ServerItem],
+      resolve: (root) => root.servers ?? [],
+    }),
     title: t.string({ resolve: (root) => root.info.title }),
     version: t.string({ resolve: (root) => root.info.version }),
     description: t.string({
@@ -422,7 +442,7 @@ const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
 };
 
 const SchemaSource = builder.enumType("SchemaType", {
-  values: ["url", "file"] as const,
+  values: ["url", "file", "raw"] as const,
 });
 
 builder.queryType({

package/src/lib/oas/parser/index.ts

@@ -20,6 +20,7 @@ export type TagObject = DeepOmitReference<OpenAPIV3_1.TagObject>;
 export type ExampleObject = DeepOmitReference<OpenAPIV3_1.ExampleObject>;
 export type EncodingObject = DeepOmitReference<OpenAPIV3_1.EncodingObject>;
 export type SchemaObject = DeepOmitReference<OpenAPIV3_1.SchemaObject>;
+export type ServerObject = DeepOmitReference<OpenAPIV3_1.ServerObject>;
 
 export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
 

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -1,4 +1,5 @@
 import { useMDXComponents } from "@mdx-js/react";
+import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { type PropsWithChildren } from "react";
 import { Link } from "react-router-dom";
@@ -11,7 +12,6 @@ import {
 } from "../../components/navigation/utils.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
-import slugify from "../../util/slugify.js";
 import { Toc } from "./Toc.js";
 import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
@@ -71,7 +71,7 @@ export const MdxPage = ({
         <header>
           {category && <CategoryHeading>{category}</CategoryHeading>}
           {title && (
-            <Heading level={1} id={slugify(title, { lower: true })}>
+            <Heading level={1} id={slugify(title)}>
               {title}
             </Heading>
           )}

package/src/lib/plugins/markdown/generateRoutes.tsx

@@ -7,17 +7,20 @@ import {
 
 export const generateRoutes = (
   markdownFiles: MarkdownPluginOptions["markdownFiles"],
+  filesPath: string,
   defaultOptions?: MarkdownPluginDefaultOptions,
 ): RouteObject[] =>
   Object.entries(markdownFiles).flatMap(([file, importPromise]) => {
-    // @todo we can pass in the folder name and then filter the markdown files based on that path
-    const match = file.match(/pages\/(.*).mdx?$/);
-    const path = match?.at(1);
+    let rootDir = filesPath.split("**")[0];
+    rootDir = rootDir.replace("/**", "/");
+    const re = new RegExp(`^${rootDir}(.*).mdx?`);
+    const match = file.match(re);
+    const fsPath = match?.at(1);
 
-    if (!path) return [];
+    if (!fsPath) return [];
 
     return {
-      path,
+      path: fsPath,
       lazy: async () => {
         const { MdxPage } = await import("./MdxPage.js");
         const { default: Component, ...props } = await importPromise();

package/src/lib/plugins/markdown/index.tsx

@@ -6,6 +6,7 @@ import { generateRoutes } from "./generateRoutes.js";
 export type MarkdownPluginOptions = {
   markdownFiles: Record<string, () => Promise<MDXImport>>;
   defaultOptions?: MarkdownPluginDefaultOptions;
+  filesPath: string;
 };
 export type MarkdownPluginDefaultOptions = Pick<
   Frontmatter,
@@ -29,6 +30,7 @@ export type MDXImport = {
 export const markdownPlugin = ({
   markdownFiles,
   defaultOptions,
+  filesPath,
 }: MarkdownPluginOptions): DevPortalPlugin => ({
-  getRoutes: () => generateRoutes(markdownFiles, defaultOptions),
+  getRoutes: () => generateRoutes(markdownFiles, filesPath, defaultOptions),
 });

package/src/lib/plugins/openapi/Endpoint.tsx

@@ -1,31 +1,95 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
+import { useState, useTransition } from "react";
+import { useSelectedServerStore } from "../../authentication/state.js";
 import { InlineCode } from "../../components/InlineCode.js";
+import { Button } from "../../ui/Button.js";
+import { useOasConfig } from "./context.js";
+import { graphql } from "./graphql/index.js";
+import { SimpleSelect } from "./SimpleSelect.js";
+import { useQuery } from "./util/urql.js";
 
-export const Endpoint = ({ url }: { url: string }) => {
+const ServersQuery = graphql(/* GraphQL */ `
+  query ServersQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+      servers {
+        url
+      }
+    }
+  }
+`);
+
+const CopyButton = ({ url }: { url: string }) => {
   const [isCopied, setIsCopied] = useState(false);
 
   return (
-    <div className="my-4 flex items-center justify-end gap-2 text-sm">
-      <span className="font-medium">Endpoint:</span>
-      <InlineCode className="p-1.5 flex gap-2.5 items-center text-xs">
-        {url}
-        <button
-          onClick={() => {
-            void navigator.clipboard.writeText(url).then(() => {
-              setIsCopied(true);
-              setTimeout(() => setIsCopied(false), 2000);
-            });
-          }}
-          type="button"
-        >
-          {isCopied ? (
-            <CheckIcon className="text-green-600" size={14} />
-          ) : (
-            <CopyIcon size={14} strokeWidth={1.3} />
-          )}
-        </button>
-      </InlineCode>
+    <Button
+      onClick={() => {
+        void navigator.clipboard.writeText(url).then(() => {
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 2000);
+        });
+      }}
+      variant="ghost"
+      size="icon"
+    >
+      {isCopied ? (
+        <CheckIcon className="text-green-600" size={14} />
+      ) : (
+        <CopyIcon size={14} strokeWidth={1.3} />
+      )}
+    </Button>
+  );
+};
+
+const context = { suspense: true } as const;
+
+export const Endpoint = () => {
+  const [result] = useQuery({
+    query: ServersQuery,
+    variables: useOasConfig(),
+    context,
+  });
+  const [, startTransition] = useTransition();
+  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+
+  if (!result.data) return null;
+
+  const { servers } = result.data.schema;
+
+  if (servers.length === 1) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="font-medium text-sm">Endpoint:</span>
+        <InlineCode className="text-xs px-2 py-1.5" selectOnClick>
+          {servers[0].url}
+        </InlineCode>
+        <CopyButton url={servers[0].url} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="font-medium text-sm">
+        {servers.length > 1 ? "Endpoints" : "Endpoint"}:
+      </span>
+
+      <SimpleSelect
+        className="font-mono text-xs bg-border/50 dark:bg-border/70 py-1.5 max-w-[450px] truncate"
+        onChange={(e) =>
+          startTransition(() => {
+            setSelectedServer(e.target.value);
+          })
+        }
+        value={selectedServer ?? result.data.schema.url}
+        showChevrons={servers.length > 1}
+        options={servers.map((server) => ({
+          value: server.url,
+          label: server.url,
+        }))}
+      />
+      <CopyButton url={selectedServer ?? result.data.schema.url} />
     </div>
   );
 };

package/src/lib/plugins/openapi/OperationList.tsx

@@ -133,7 +133,9 @@ export const OperationList = () => {
         <Markdown content={result.data.schema.description ?? ""} />
       </div>
       <hr />
-      <Endpoint url={result.data.schema.url} />
+      <div className="my-4 flex justify-end">
+        <Endpoint />
+      </div>
 
       {result.data.schema.tags
         .filter((tag) => tag.operations.length > 0)

package/src/lib/plugins/openapi/OperationListItem.tsx

@@ -91,7 +91,7 @@ export const OperationListItem = ({
                     <TabsTrigger
                       value={response.statusCode}
                       key={response.statusCode}
-                      title={response.description}
+                      title={response.description ?? undefined}
                     >
                       {response.statusCode}
                     </TabsTrigger>

package/src/lib/plugins/openapi/PlaygroundDialogWrapper.tsx

@@ -3,9 +3,11 @@ import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 
 export const PlaygroundDialogWrapper = ({
   server,
+  servers,
   operation,
 }: {
   server: string;
+  servers?: string[];
   operation: OperationListItemResult;
 }) => {
   const headers = operation.parameters
@@ -29,6 +31,7 @@ export const PlaygroundDialogWrapper = ({
   return (
     <PlaygroundDialog
       server={server}
+      servers={servers}
       method={operation.method}
       url={operation.path}
       headers={headers}

package/src/lib/plugins/openapi/Sidecar.tsx

@@ -1,6 +1,7 @@
 import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { Fragment, useMemo, useTransition } from "react";
 import { useSearchParams } from "react-router-dom";
+import { useSelectedServerStore } from "../../authentication/state.js";
 import { TextColorMap } from "../../components/navigation/SidebarBadge.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
@@ -65,6 +66,9 @@ export const GetServerQuery = graphql(/* GraphQL */ `
   query getServerQuery($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       url
+      servers {
+        url
+      }
     }
   }
 `);
@@ -135,6 +139,8 @@ export const Sidecar = ({
     );
   });
 
+  const { selectedServer } = useSelectedServerStore();
+
   const code = useMemo(() => {
     const example = requestBodyContent?.[0]?.schema
       ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
@@ -143,7 +149,7 @@ export const Sidecar = ({
     const snippet = new HTTPSnippet({
       method: operation.method.toLocaleUpperCase(),
       url:
-        (result.data?.schema.url ?? "") +
+        (selectedServer ?? result.data?.schema.url ?? "") +
         operation.path.replaceAll("{", ":").replaceAll("}", ""),
       postData: example
         ? {
@@ -160,7 +166,13 @@ export const Sidecar = ({
     });
 
     return getConverted(snippet, selectedLang);
-  }, [selectedLang, operation.method, operation.path, requestBodyContent]);
+  }, [
+    selectedServer,
+    selectedLang,
+    operation.method,
+    operation.path,
+    requestBodyContent,
+  ]);
 
   return (
     <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
@@ -175,6 +187,9 @@ export const Sidecar = ({
           </span>
           <PlaygroundDialogWrapper
             server={result.data?.schema.url ?? ""}
+            servers={
+              result.data?.schema.servers.map((server) => server.url) ?? []
+            }
             operation={operation}
           />
         </SidecarBox.Head>