zudoku 0.91.0 → 0.92.0

package/dist/cli/cli.js

@@ -3402,6 +3402,7 @@ var ApiOptionsSchema = z7.object({
   supportedLanguages: z7.array(LanguageOption),
   disablePlayground: z7.boolean(),
   disableSidecar: z7.boolean(),
+  disableRequestBox: z7.boolean(),
   showVersionSelect: z7.enum(["always", "if-available", "hide"]),
   expandAllTags: z7.boolean(),
   showInfoPage: z7.boolean(),
@@ -6816,6 +6817,7 @@ var generateDefaultApiOptionsCode = () => [
   `  supportedLanguages: config.defaults?.apis?.supportedLanguages,`,
   `  disablePlayground: config.defaults?.apis?.disablePlayground,`,
   `  disableSidecar: config.defaults?.apis?.disableSidecar,`,
+  `  disableRequestBox: config.defaults?.apis?.disableRequestBox,`,
   `  disableSecurity: config.defaults?.apis?.disableSecurity ?? true,`,
   `  disableMcpAuthInstructions: config.defaults?.apis?.disableMcpAuthInstructions,`,
   `  showVersionSelect: config.defaults?.apis?.showVersionSelect ?? "if-available",`,

package/dist/cli/worker.js

@@ -2514,6 +2514,7 @@ var ApiOptionsSchema = z4.object({
   supportedLanguages: z4.array(LanguageOption),
   disablePlayground: z4.boolean(),
   disableSidecar: z4.boolean(),
+  disableRequestBox: z4.boolean(),
   showVersionSelect: z4.enum(["always", "if-available", "hide"]),
   expandAllTags: z4.boolean(),
   showInfoPage: z4.boolean(),

package/dist/declarations/config/validators/ZudokuConfig.d.ts

@@ -49,6 +49,7 @@ declare const ApiOptionsSchema: z.ZodObject<{
     }, z.core.$strip>>>;
     disablePlayground: z.ZodOptional<z.ZodBoolean>;
     disableSidecar: z.ZodOptional<z.ZodBoolean>;
+    disableRequestBox: z.ZodOptional<z.ZodBoolean>;
     showVersionSelect: z.ZodOptional<z.ZodEnum<{
         always: "always";
         hide: "hide";
@@ -7741,6 +7742,7 @@ export declare const ZudokuConfig: z.ZodObject<{
             }, z.core.$strip>>>;
             disablePlayground: z.ZodOptional<z.ZodBoolean>;
             disableSidecar: z.ZodOptional<z.ZodBoolean>;
+            disableRequestBox: z.ZodOptional<z.ZodBoolean>;
             showVersionSelect: z.ZodOptional<z.ZodEnum<{
                 always: "always";
                 hide: "hide";
@@ -7778,6 +7780,7 @@ export declare const ZudokuConfig: z.ZodObject<{
             }, z.core.$strip>>>;
             disablePlayground: z.ZodOptional<z.ZodBoolean>;
             disableSidecar: z.ZodOptional<z.ZodBoolean>;
+            disableRequestBox: z.ZodOptional<z.ZodBoolean>;
             showVersionSelect: z.ZodOptional<z.ZodEnum<{
                 always: "always";
                 hide: "hide";
@@ -7819,6 +7822,7 @@ export declare const ZudokuConfig: z.ZodObject<{
             }, z.core.$strip>>>;
             disablePlayground: z.ZodOptional<z.ZodBoolean>;
             disableSidecar: z.ZodOptional<z.ZodBoolean>;
+            disableRequestBox: z.ZodOptional<z.ZodBoolean>;
             showVersionSelect: z.ZodOptional<z.ZodEnum<{
                 always: "always";
                 hide: "hide";
@@ -7852,6 +7856,7 @@ export declare const ZudokuConfig: z.ZodObject<{
             }, z.core.$strip>>>;
             disablePlayground: z.ZodOptional<z.ZodBoolean>;
             disableSidecar: z.ZodOptional<z.ZodBoolean>;
+            disableRequestBox: z.ZodOptional<z.ZodBoolean>;
             showVersionSelect: z.ZodOptional<z.ZodEnum<{
                 always: "always";
                 hide: "hide";
@@ -7889,6 +7894,7 @@ export declare const ZudokuConfig: z.ZodObject<{
             }, z.core.$strip>>>;
             disablePlayground: z.ZodOptional<z.ZodBoolean>;
             disableSidecar: z.ZodOptional<z.ZodBoolean>;
+            disableRequestBox: z.ZodOptional<z.ZodBoolean>;
             showVersionSelect: z.ZodOptional<z.ZodEnum<{
                 always: "always";
                 hide: "hide";
@@ -7930,6 +7936,7 @@ export declare const ZudokuConfig: z.ZodObject<{
             }, z.core.$strip>>>;
             disablePlayground: z.ZodOptional<z.ZodBoolean>;
             disableSidecar: z.ZodOptional<z.ZodBoolean>;
+            disableRequestBox: z.ZodOptional<z.ZodBoolean>;
             showVersionSelect: z.ZodOptional<z.ZodEnum<{
                 always: "always";
                 hide: "hide";
@@ -8032,6 +8039,7 @@ export declare const ZudokuConfig: z.ZodObject<{
             }, z.core.$strip>>>;
             disablePlayground: z.ZodOptional<z.ZodBoolean>;
             disableSidecar: z.ZodOptional<z.ZodBoolean>;
+            disableRequestBox: z.ZodOptional<z.ZodBoolean>;
             showVersionSelect: z.ZodOptional<z.ZodEnum<{
                 always: "always";
                 hide: "hide";

package/dist/declarations/lib/plugins/openapi/interfaces.d.ts

@@ -76,6 +76,7 @@ type BaseOasConfig = {
         }[];
         disablePlayground?: boolean;
         disableSidecar?: boolean;
+        disableRequestBox?: boolean;
         disableSecurity?: boolean;
         disableMcpAuthInstructions?: boolean;
         showVersionSelect?: "always" | "if-available" | "hide";

package/dist/declarations/lib/plugins/openapi/util/shouldShowRequestBox.d.ts

@@ -0,0 +1 @@
+export declare const shouldShowRequestBox: (extensions: Record<string, unknown> | null | undefined, disableRequestBox: boolean | undefined) => boolean;

package/dist/flat-config.d.ts

@@ -538,6 +538,7 @@ export interface _Schema20 {
   }[]
   disablePlayground?: boolean
   disableSidecar?: boolean
+  disableRequestBox?: boolean
   showVersionSelect?: ("always" | "if-available" | "hide")
   expandAllTags?: boolean
   showInfoPage?: boolean

package/docs/configuration/api-reference.md

@@ -251,6 +251,7 @@ const config = {
       ],
       disablePlayground: false, // Disable the interactive API playground
       disableSidecar: false, // Disable the sidecar completely
+      disableRequestBox: false, // Hide the request box at the top of the sidecar
       disableSecurity: true, // Disable security scheme display and playground auth (default)
       disableMcpAuthInstructions: false, // Hide auth steps in the MCP server card
       showVersionSelect: "if-available", // Control version selector visibility
@@ -272,6 +273,11 @@ Available options:
   identifier) and `label` (display name)
 - `disablePlayground`: Disable the interactive API playground globally
 - `disableSidecar`: Disable the sidecar panel completely
+- `disableRequestBox`: Hide the request box at the top of the sidecar. The box holds the method and
+  path, the generated code snippet with its language selector, the auth selector and the button that
+  opens the playground, so hiding it also removes the way to open the playground. The request body
+  and response examples below it are still shown. Operations can override this with
+  [`x-zudoku-request-box-enabled`](../openapi-extensions/x-zudoku-request-box-enabled)
 - `disableSecurity`: Disable OpenAPI security scheme display (auth badges on operations, security
   schemes section on the info page, and the Authorize dialog in the playground). Disabled by default
   (`true`). Set to `false` to enable security scheme support
@@ -310,6 +316,7 @@ const config = {
       examplesLanguage: "shell", // Default language for code examples
       disablePlayground: false, // Disable the interactive API playground
       disableSidecar: false, // Disable the sidecar completely
+      disableRequestBox: false, // Hide the request box at the top of the sidecar
       disableSecurity: true, // Disable security scheme display and playground auth (default)
       disableMcpAuthInstructions: false, // Hide auth steps in the MCP server card
       showVersionSelect: "if-available", // Control version selector visibility
@@ -399,9 +406,14 @@ different levels of your API documentation.
 ### Operations
 
 - `x-zudoku-playground-enabled`: Control playground visibility for an operation (default: `true`)
+- `x-zudoku-request-box-enabled`: Control request box visibility in the sidecar for an operation
+  (default: `true`). See
+  [`x-zudoku-request-box-enabled`](../openapi-extensions/x-zudoku-request-box-enabled)
 - `x-internal`: Hide an operation from the documentation. Also works on path items and parameters.
   See [`x-internal`](../openapi-extensions/x-internal)
-- `x-explorer-enabled`: Alias for `x-zudoku-playground-enabled` for compatibility Example:
+- `x-explorer-enabled`: Alias for `x-zudoku-playground-enabled` for compatibility
+
+Example:
 
 ```json
 {
@@ -409,7 +421,8 @@ different levels of your API documentation.
     "/users": {
       "get": {
         "summary": "Get users",
-        "x-zudoku-playground-enabled": false // Disable playground for this operation
+        "x-zudoku-playground-enabled": false, // Disable playground for this operation
+        "x-zudoku-request-box-enabled": false // Hide the sidecar request box for this operation
       }
     }
   }

package/docs/openapi-extensions/x-zudoku-request-box-enabled.md

@@ -0,0 +1,47 @@
+---
+title: x-zudoku-request-box-enabled
+sidebar_icon: square-code
+---
+
+Use `x-zudoku-request-box-enabled` to show or hide the request box at the top of an operation's
+sidecar for a specific operation. By default, the request box is shown for all operations unless
+globally disabled via the [`disableRequestBox`](/docs/configuration/api-reference) option.
+
+The request box holds the method and path, the generated code snippet (or your
+[`x-code-samples`](./x-code-samples)) with its language selector, the auth selector and the button
+that opens the playground. Hiding it also removes the way to open the playground for that operation.
+The request body and response examples below it are still shown.
+
+## Location
+
+The extension is added at the **Operation Object** level.
+
+| Option                         | Type      | Description                                      |
+| ------------------------------ | --------- | ------------------------------------------------ |
+| `x-zudoku-request-box-enabled` | `boolean` | Show (`true`) or hide (`false`) the request box. |
+
+If the extension is not set, the request box visibility falls back to the global `disableRequestBox`
+configuration.
+
+## Example
+
+```yaml
+paths:
+  /users:
+    get:
+      summary: List users
+      x-zudoku-request-box-enabled: true
+      responses:
+        "200":
+          description: Successful response
+  /webhooks/trigger:
+    post:
+      summary: Trigger webhook
+      x-zudoku-request-box-enabled: false
+      responses:
+        "200":
+          description: Accepted
+```
+
+In this example, `List users` shows the request box while `Trigger webhook` hides it regardless of
+the global setting.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.91.0",
+  "version": "0.92.0",
   "type": "module",
   "engines": {
     "node": ">=22.22.0"

package/src/config/validators/ZudokuConfig.ts

@@ -93,6 +93,7 @@ const ApiOptionsSchema = z
     supportedLanguages: z.array(LanguageOption),
     disablePlayground: z.boolean(),
     disableSidecar: z.boolean(),
+    disableRequestBox: z.boolean(),
     showVersionSelect: z.enum(["always", "if-available", "hide"]),
     expandAllTags: z.boolean(),
     showInfoPage: z.boolean(),

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

@@ -33,6 +33,7 @@ import {
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 import { getGraphQLEndpoint } from "./util/graphqlEndpoint.js";
 import { methodForColor } from "./util/methodToColor.js";
+import { shouldShowRequestBox } from "./util/shouldShowRequestBox.js";
 import { useResolvedAuth } from "./util/useResolvedAuth.js";
 
 export const GetServerQuery = graphql(/* GraphQL */ `
@@ -221,7 +222,14 @@ export const Sidecar = ({
   const graphQLEndpoint = getGraphQLEndpoint(operation);
   const isGraphQLEndpoint = graphQLEndpoint !== undefined;
 
+  const showRequestBox = shouldShowRequestBox(
+    operation.extensions,
+    options?.disableRequestBox,
+  );
+
   const httpSnippetCode = useMemo<string | undefined>(() => {
+    if (!showRequestBox) return;
+
     if (codeSamples && !hasResolvedAuth) {
       const match = codeSamples.find((s) => s.lang === selectedLang);
       return match?.source;
@@ -258,6 +266,7 @@ export const Sidecar = ({
 
     return getConverted(snippet, selectedLang);
   }, [
+    showRequestBox,
     codeSamples,
     currentExampleCode,
     operation,
@@ -331,82 +340,84 @@ export const Sidecar = ({
       className="flex flex-col sticky top-(--scroll-padding) gap-4"
       data-pagefind-ignore="all"
     >
-      <SidecarBox.Root>
-        <SidecarBox.Head className="py-1.5">
-          <div className="flex items-center flex-wrap gap-2 justify-between w-full">
-            <span className="font-mono wrap-break-word leading-6 space-x-1">
-              <Badge
-                variant="outline"
-                className={cn(
-                  methodTextColor,
-                  "px-1.5 rounded-md border-none bg-current/7 dark:bg-current/15",
-                )}
-              >
-                {operation.method.toUpperCase()}
-              </Badge>
-              {path}
-            </span>
-            {showPlayground &&
-              (isGraphQLEndpoint ? (
-                <GraphiQLDialog
-                  endpoint={graphQLEndpoint?.endpoint ?? operationUrl}
-                  operation={operation}
-                  securitySchemes={securitySchemes}
-                  defaultTabs={
-                    graphQLTabs && graphQLTabs.length > 0
-                      ? graphQLTabs
-                      : undefined
-                  }
-                />
-              ) : (
-                <PlaygroundDialogWrapper
-                  servers={operation.servers}
-                  operation={operation}
-                  examples={requestBodyContent ?? undefined}
-                />
+      {showRequestBox && (
+        <SidecarBox.Root>
+          <SidecarBox.Head className="py-1.5">
+            <div className="flex items-center flex-wrap gap-2 justify-between w-full">
+              <span className="font-mono wrap-break-word leading-6 space-x-1">
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    methodTextColor,
+                    "px-1.5 rounded-md border-none bg-current/7 dark:bg-current/15",
+                  )}
+                >
+                  {operation.method.toUpperCase()}
+                </Badge>
+                {path}
+              </span>
+              {showPlayground &&
+                (isGraphQLEndpoint ? (
+                  <GraphiQLDialog
+                    endpoint={graphQLEndpoint?.endpoint ?? operationUrl}
+                    operation={operation}
+                    securitySchemes={securitySchemes}
+                    defaultTabs={
+                      graphQLTabs && graphQLTabs.length > 0
+                        ? graphQLTabs
+                        : undefined
+                    }
+                  />
+                ) : (
+                  <PlaygroundDialogWrapper
+                    servers={operation.servers}
+                    operation={operation}
+                    examples={requestBodyContent ?? undefined}
+                  />
+                ))}
+            </div>
+          </SidecarBox.Head>
+          <SidecarBox.Body>
+            {shouldLazyHighlight && !isOnScreen ? (
+              <NonHighlightedCode code={httpSnippetCode ?? ""} />
+            ) : (
+              <SyntaxHighlight
+                embedded
+                language={selectedLang}
+                showLanguageIndicator={false}
+                className="[--scrollbar-color:gray] rounded-none text-xs max-h-50"
+                // biome-ignore lint/style/noNonNullAssertion: code is guaranteed to be defined
+                code={httpSnippetCode!}
+              />
+            )}
+          </SidecarBox.Body>
+          <SidecarBox.Footer className="text-xs self-end flex justify-between items-center gap-2">
+            <NativeSelect
+              className="text-xs h-fit py-1 max-w-32 truncate bg-background"
+              value={selectedLang}
+              onChange={(e) => {
+                startTransition(() => {
+                  setSearchParams((prev) => {
+                    prev.set("lang", e.target.value);
+                    return prev;
+                  });
+                });
+              }}
+            >
+              {supportedLanguages.map((language) => (
+                <NativeSelectOption key={language.value} value={language.value}>
+                  {language.label}
+                </NativeSelectOption>
               ))}
-          </div>
-        </SidecarBox.Head>
-        <SidecarBox.Body>
-          {shouldLazyHighlight && !isOnScreen ? (
-            <NonHighlightedCode code={httpSnippetCode ?? ""} />
-          ) : (
-            <SyntaxHighlight
-              embedded
-              language={selectedLang}
-              showLanguageIndicator={false}
-              className="[--scrollbar-color:gray] rounded-none text-xs max-h-50"
-              // biome-ignore lint/style/noNonNullAssertion: code is guaranteed to be defined
-              code={httpSnippetCode!}
+            </NativeSelect>
+            <AuthSelectorPopover
+              operation={operation}
+              url={operationUrl}
+              securitySchemes={securitySchemes}
             />
-          )}
-        </SidecarBox.Body>
-        <SidecarBox.Footer className="text-xs self-end flex justify-between items-center gap-2">
-          <NativeSelect
-            className="text-xs h-fit py-1 max-w-32 truncate bg-background"
-            value={selectedLang}
-            onChange={(e) => {
-              startTransition(() => {
-                setSearchParams((prev) => {
-                  prev.set("lang", e.target.value);
-                  return prev;
-                });
-              });
-            }}
-          >
-            {supportedLanguages.map((language) => (
-              <NativeSelectOption key={language.value} value={language.value}>
-                {language.label}
-              </NativeSelectOption>
-            ))}
-          </NativeSelect>
-          <AuthSelectorPopover
-            operation={operation}
-            url={operationUrl}
-            securitySchemes={securitySchemes}
-          />
-        </SidecarBox.Footer>
-      </SidecarBox.Root>
+          </SidecarBox.Footer>
+        </SidecarBox.Root>
+      )}
 
       {transformedRequestBodyContent && currentExample ? (
         <RequestBodySidecarBox

package/src/lib/plugins/openapi/interfaces.ts

@@ -88,6 +88,7 @@ type BaseOasConfig = {
     supportedLanguages?: { value: string; label: string }[];
     disablePlayground?: boolean;
     disableSidecar?: boolean;
+    disableRequestBox?: boolean;
     disableSecurity?: boolean;
     disableMcpAuthInstructions?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";

package/src/lib/plugins/openapi/util/shouldShowRequestBox.ts

@@ -0,0 +1,18 @@
+/**
+ * Decides whether the request box (method and path, code snippet, language
+ * selector, playground button and auth selector) is shown at the top of an
+ * operation's sidecar.
+ *
+ * - `x-zudoku-request-box-enabled: true` shows it, even if the API sets
+ *   `disableRequestBox`.
+ * - Any other explicit value hides it, matching `x-zudoku-playground-enabled`.
+ * - When unset (`undefined`), it falls back to the API's `disableRequestBox`.
+ */
+export const shouldShowRequestBox = (
+  extensions: Record<string, unknown> | null | undefined,
+  disableRequestBox: boolean | undefined,
+) => {
+  const enabled = extensions?.["x-zudoku-request-box-enabled"];
+  if (enabled === undefined) return !disableRequestBox;
+  return enabled === true;
+};

package/src/vite/plugin-api.ts

@@ -52,6 +52,7 @@ export const generateDefaultApiOptionsCode = () => [
   `  supportedLanguages: config.defaults?.apis?.supportedLanguages,`,
   `  disablePlayground: config.defaults?.apis?.disablePlayground,`,
   `  disableSidecar: config.defaults?.apis?.disableSidecar,`,
+  `  disableRequestBox: config.defaults?.apis?.disableRequestBox,`,
   `  disableSecurity: config.defaults?.apis?.disableSecurity ?? true,`,
   `  disableMcpAuthInstructions: config.defaults?.apis?.disableMcpAuthInstructions,`,
   `  showVersionSelect: config.defaults?.apis?.showVersionSelect ?? "if-available",`,