zudoku 0.0.0-f42e3678 → 0.0.0-f46233e4

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -16,7 +16,7 @@ type Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.ServersQueryDocument;
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n": typeof types.OperationsFragmentFragmentDoc;
   "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n": typeof types.SchemaWarmupDocument;
-  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\n        }\n      }\n    }\n  }\n": typeof types.OperationsForTagDocument;
+  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        extensions\n        next {\n          name\n          slug\n          extensions\n        }\n        prev {\n          name\n          slug\n          extensions\n        }\n      }\n    }\n  }\n": typeof types.OperationsForTagDocument;
   "\n  query GetSchemas($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      title\n      description\n      summary\n      components {\n        schemas {\n          name\n          schema\n          extensions\n        }\n      }\n    }\n  }\n": typeof types.GetSchemasDocument;
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.GetServerQueryDocument;
   "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n": typeof types.GetNavigationOperationsDocument;
@@ -28,7 +28,7 @@ const documents: Documents = {
     types.OperationsFragmentFragmentDoc,
   "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n":
     types.SchemaWarmupDocument,
-  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\n        }\n      }\n    }\n  }\n":
+  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        extensions\n        next {\n          name\n          slug\n          extensions\n        }\n        prev {\n          name\n          slug\n          extensions\n        }\n      }\n    }\n  }\n":
     types.OperationsForTagDocument,
   "\n  query GetSchemas($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      title\n      description\n      summary\n      components {\n        schemas {\n          name\n          schema\n          extensions\n        }\n      }\n    }\n  }\n":
     types.GetSchemasDocument,
@@ -60,7 +60,7 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\n        }\n      }\n    }\n  }\n",
+  source: "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        extensions\n        next {\n          name\n          slug\n          extensions\n        }\n        prev {\n          name\n          slug\n          extensions\n        }\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").OperationsForTagDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.

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

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { DocumentTypeDecoration } from "@graphql-typed-document-node/core";
 export type Maybe<T> = T | null;
-export type InputMaybe<T> = Maybe<T>;
+export type InputMaybe<T> = T | null | undefined;
 export type Exact<T extends { [key: string]: unknown }> = {
   [K in keyof T]: T[K];
 };
@@ -315,6 +315,7 @@ export type OperationsForTagQuery = {
       __typename?: "SchemaTag";
       name?: string | null;
       description?: string | null;
+      extensions?: any | null;
       operations: Array<
         { __typename?: "OperationItem"; slug: string } & {
           " $fragmentRefs"?: {
@@ -326,11 +327,13 @@ export type OperationsForTagQuery = {
         __typename?: "SchemaTag";
         name?: string | null;
         slug?: string | null;
+        extensions?: any | null;
       } | null;
       prev?: {
         __typename?: "SchemaTag";
         name?: string | null;
         slug?: string | null;
+        extensions?: any | null;
       } | null;
     } | null;
   };
@@ -409,7 +412,9 @@ export class TypedDocumentString<TResult, TVariables>
   extends String
   implements DocumentTypeDecoration<TResult, TVariables>
 {
-  __apiType?: DocumentTypeDecoration<TResult, TVariables>["__apiType"];
+  __apiType?: NonNullable<
+    DocumentTypeDecoration<TResult, TVariables>["__apiType"]
+  >;
   private value: string;
   public __meta__?: Record<string, any> | undefined;
 
@@ -419,7 +424,7 @@ export class TypedDocumentString<TResult, TVariables>
     this.__meta__ = __meta__;
   }
 
-  toString(): string & DocumentTypeDecoration<TResult, TVariables> {
+  override toString(): string & DocumentTypeDecoration<TResult, TVariables> {
     return this.value;
   }
 }
@@ -533,13 +538,16 @@ export const OperationsForTagDocument = new TypedDocumentString(`
         slug
         ...OperationsFragment
       }
+      extensions
       next {
         name
         slug
+        extensions
       }
       prev {
         name
         slug
+        extensions
       }
     }
   }

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

@@ -1,16 +1,16 @@
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import { matchPath } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
-import { type ZudokuPlugin } from "../../core/plugins.js";
+import type { ZudokuPlugin } from "../../core/plugins.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
 import { createQuery } from "./client/useCreateQuery.js";
 import type { GetNavigationOperationsQuery as GetNavigationOperationsQueryResult } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
-import { type OasPluginConfig } from "./interfaces.js";
+import type { OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 import { createNavigationCategory } from "./util/createNavigationCategory.js";
@@ -133,6 +133,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         const versionParam = match?.params.version;
         const version = versionParam ?? getVersions(config).at(0);
         const { type } = config;
+        // biome-ignore lint/style/noNonNullAssertion: version is guaranteed to be defined
         const input = type === "file" ? config.input[version!] : config.input;
 
         const query = createQuery(client, GetNavigationOperationsQuery, {
@@ -160,7 +161,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
               return [
                 tag.name,
                 createNavigationCategory({
-                  label: tag.name,
+                  label: tag.extensions?.["x-displayName"] ?? tag.name,
                   path: categoryPath,
                   operations: tag.operations,
                   collapsed: isCollapsed,

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

@@ -1,7 +1,7 @@
-import { type AuthState } from "../../authentication/state.js";
-import { type ZudokuContext } from "../../core/ZudokuContext.js";
+import type { AuthState } from "../../authentication/state.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import type { SchemaImports } from "../../oas/graphql/index.js";
-import { type OperationListItemResult } from "./OperationList.js";
+import type { OperationsFragmentFragment } from "./graphql/graphql.js";
 
 type DynamicInput = () => Promise<unknown>;
 
@@ -19,12 +19,14 @@ type Example = {
   name: string;
   description?: string | null;
   externalValue?: string | null;
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   value?: any | null;
   summary?: string | null;
 };
 
 type Content = {
   mediaType: string;
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   schema?: any | null;
   encoding?: Array<{
     name: string;
@@ -36,7 +38,7 @@ export type TransformExamplesFn = (options: {
   content: Content[];
   context: ZudokuContext;
   auth: AuthState;
-  operation: OperationListItemResult;
+  operation: OperationsFragmentFragment;
   type: "request" | "response";
 }) => Content[];
 
@@ -52,6 +54,7 @@ type BaseOasConfig = {
     disableSidecar?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
     expandAllTags?: boolean;
+    expandApiInformation?: boolean;
     transformExamples?: TransformExamplesFn;
   };
 };

package/src/lib/plugins/openapi/playground/BodyPanel.tsx

@@ -3,15 +3,15 @@ import { useFormContext } from "react-hook-form";
 import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
 import { Textarea } from "zudoku/ui/Textarea.js";
 import { cn } from "../../../util/cn.js";
-import { type Content } from "../SidecarExamples.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
 import {
   CollapsibleHeader,
   CollapsibleHeaderTrigger,
 } from "./CollapsibleHeader.js";
 import ExamplesDropdown from "./ExamplesDropdown.js";
-import { type PlaygroundForm } from "./Playground.js";
+import type { PlaygroundForm } from "./Playground.js";
 
-export const BodyPanel = ({ content }: { content?: Content }) => {
+export const BodyPanel = ({ content }: { content?: MediaTypeObject[] }) => {
   const { register, setValue, watch } = useFormContext<PlaygroundForm>();
   const examples = (content ?? []).flatMap((e) => e.examples);
   const headers = watch("headers");

package/src/lib/plugins/openapi/playground/ExamplesDropdown.tsx

@@ -9,14 +9,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "zudoku/ui/DropdownMenu.js";
-import type { Content, Example } from "../SidecarExamples.js";
+import type { ExampleItem, MediaTypeObject } from "../graphql/graphql.js";
 
 const ExamplesDropdown = ({
   examples,
   onSelect,
 }: {
-  examples: Content;
-  onSelect: (example: Example, mediaType: string) => void;
+  examples: MediaTypeObject[];
+  onSelect: (example: ExampleItem, mediaType: string) => void;
 }) => {
   return (
     <DropdownMenu>

package/src/lib/plugins/openapi/playground/Headers.tsx

@@ -24,7 +24,7 @@ import {
   CollapsibleHeaderTrigger,
 } from "./CollapsibleHeader.js";
 import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
-import { type Header, type PlaygroundForm } from "./Playground.js";
+import type { Header, PlaygroundForm } from "./Playground.js";
 
 const headerOptions = Object.freeze([
   "Accept",

package/src/lib/plugins/openapi/playground/IdentityDialog.tsx

@@ -10,7 +10,7 @@ import {
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
 import { Label } from "zudoku/ui/Label.js";
-import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import type { ApiIdentity } from "../../../core/ZudokuContext.js";
 import IdentitySelector from "./IdentitySelector.js";
 
 const IdentityDialog = ({

package/src/lib/plugins/openapi/playground/IdentitySelector.tsx

@@ -1,6 +1,6 @@
 import { Label } from "zudoku/ui/Label.js";
 import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
-import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import type { ApiIdentity } from "../../../core/ZudokuContext.js";
 import { NO_IDENTITY } from "./Playground.js";
 
 const IdentitySelector = ({

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -23,7 +23,7 @@ import { useHotkey } from "../../../hooks/useHotkey.js";
 import { cn } from "../../../util/cn.js";
 import { useCopyToClipboard } from "../../../util/useCopyToClipboard.js";
 import { useLatest } from "../../../util/useLatest.js";
-import { type Content } from "../SidecarExamples.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
 import { useSelectedServer } from "../state.js";
 import BodyPanel from "./BodyPanel.js";
 import {
@@ -37,10 +37,10 @@ import { IdentityDialog } from "./IdentityDialog.js";
 import IdentitySelector from "./IdentitySelector.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
+import RequestLoginDialog from "./RequestLoginDialog.js";
 import { useIdentityStore } from "./rememberedIdentity.js";
 import { UrlPath } from "./request-panel/UrlPath.js";
 import { UrlQueryParams } from "./request-panel/UrlQueryParams.js";
-import RequestLoginDialog from "./RequestLoginDialog.js";
 import { ResultPanel } from "./result-panel/ResultPanel.js";
 import { useRememberSkipLoginDialog } from "./useRememberSkipLoginDialog.js";
 
@@ -117,7 +117,7 @@ export type PlaygroundContentProps = {
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
   defaultBody?: string;
-  examples?: Content;
+  examples?: MediaTypeObject[];
   requiresLogin?: boolean;
   onLogin?: () => void;
   onSignUp?: () => void;
@@ -285,7 +285,7 @@ export const Playground = ({
         return {
           status: response.status,
           headers: responseHeaders,
-          size: responseSize ? parseInt(responseSize) : body.length,
+          size: responseSize ? Number(responseSize) : body.length,
           body,
           time,
           isBinary,

package/src/lib/plugins/openapi/playground/PlaygroundDialog.tsx

@@ -1,5 +1,6 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { type PropsWithChildren, useState } from "react";
+import { useAuth } from "zudoku/hooks";
 import {
   Dialog,
   DialogContent,
@@ -35,6 +36,9 @@ const HeroPlayIcon = ({
 
 const PlaygroundDialog = (props: PlaygroundDialogProps) => {
   const [open, setOpen] = useState(false);
+  const { isAuthEnabled, login, signup, isPending, isAuthenticated } =
+    useAuth();
+
   return (
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
@@ -57,7 +61,14 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>
         </VisuallyHidden>
-        {open && <Playground {...props} />}
+        {open && (
+          <Playground
+            requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
+            onLogin={() => login()}
+            onSignUp={() => signup()}
+            {...props}
+          />
+        )}
       </DialogContent>
     </Dialog>
   );

package/src/lib/plugins/openapi/playground/QueryParams.tsx

@@ -17,7 +17,7 @@ import {
 } from "./CollapsibleHeader.js";
 import { InlineInput } from "./InlineInput.js";
 import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
-import { type PlaygroundForm, type QueryParam } from "./Playground.js";
+import type { PlaygroundForm, QueryParam } from "./Playground.js";
 
 export const QueryParams = ({
   control,

package/src/lib/plugins/openapi/playground/request-panel/UrlPath.tsx

@@ -1,7 +1,7 @@
 import { useFormContext } from "react-hook-form";
 import { PathRenderer } from "../../../../components/PathRenderer.js";
 import { ColorizedParam } from "../../ColorizedParam.js";
-import { type PlaygroundForm } from "../Playground.js";
+import type { PlaygroundForm } from "../Playground.js";
 
 export const UrlPath = ({ url }: { url: string }) => {
   const { watch, setFocus } = useFormContext<PlaygroundForm>();

package/src/lib/plugins/openapi/playground/request-panel/UrlQueryParams.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
 import { useFormContext } from "react-hook-form";
-import { type PlaygroundForm } from "../Playground.js";
+import type { PlaygroundForm } from "../Playground.js";
 
 export const UrlQueryParams = () => {
   const { watch } = useFormContext<PlaygroundForm>();

package/src/lib/plugins/openapi/playground/result-panel/ResponseStatusBar.tsx

@@ -31,9 +31,11 @@ const RealTimeCounter = () => {
   }, []);
 
   useLayoutEffect(() => {
+    const currentSpanRef = spanRef.current;
+    if (!currentSpanRef) return;
+
     // Create a text node and attach it to the span
     const textNode = document.createTextNode("0");
-    const currentSpanRef = spanRef.current!;
 
     currentSpanRef.appendChild(textNode);
     textRef.current = textNode;

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -3,6 +3,8 @@ import {
   CornerDownLeftIcon,
   CornerDownRightIcon,
   DownloadIcon,
+  EyeIcon,
+  EyeOffIcon,
   PlusCircleIcon,
 } from "lucide-react";
 import { useState } from "react";
@@ -12,6 +14,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "zudoku/ui/Collapsible.js";
+import { SecretText } from "zudoku/ui/Secret.js";
 import {
   Select,
   SelectContent,
@@ -19,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+import { cn } from "../../../../util/cn.js";
 import createVariantComponent from "../../../../util/createVariantComponent.js";
 import { humanFileSize } from "../../../../util/humanFileSize.js";
 import {
@@ -89,6 +93,30 @@ const Row = createVariantComponent(
 );
 
 const RowContent = createVariantComponent("div", "py-1 break-all");
+const RowValue = ({ value, header }: { value: string; header: string }) => {
+  const secretHeaders = ["authorization", "key", "secret", "token"];
+  const isSecret = secretHeaders.includes(header.toLowerCase());
+  const [revealed, setRevealed] = useState(!isSecret);
+  return (
+    <RowContent
+      className={cn(isSecret && "cursor-pointer flex group")}
+      onClick={() => {
+        if (isSecret) {
+          setRevealed((prev) => !prev);
+        }
+      }}
+    >
+      <SecretText secret={value} previewChars={0} revealed={revealed} />
+      {isSecret ? (
+        revealed ? (
+          <EyeOffIcon size={14} className={cn("hidden group-hover:block")} />
+        ) : (
+          <EyeIcon size={14} className={cn("hidden group-hover:block")} />
+        )
+      ) : null}
+    </RowContent>
+  );
+};
 
 export const ResponseTab = ({
   body = "",
@@ -158,7 +186,7 @@ export const ResponseTab = ({
               .map(([key, value]) => (
                 <Row key={key}>
                   <RowContent>{key}</RowContent>
-                  <RowContent>{value}</RowContent>
+                  <RowValue value={value} header={key} />
                 </Row>
               ))}
           </div>
@@ -177,7 +205,7 @@ export const ResponseTab = ({
             {sortedHeaders.slice(0, MAX_HEADERS_TO_SHOW).map(([key, value]) => (
               <Row key={key}>
                 <RowContent>{key}</RowContent>
-                <RowContent>{value}</RowContent>
+                <RowValue value={value} header={key} />
               </Row>
             ))}
             {sortedHeaders.length > MAX_HEADERS_TO_SHOW && (
@@ -195,7 +223,7 @@ export const ResponseTab = ({
                     .map(([key, value]) => (
                       <Row key={key}>
                         <RowContent>{key}</RowContent>
-                        <RowContent>{value}</RowContent>
+                        <RowValue value={value} header={key} />
                       </Row>
                     ))}
                 </CollapsibleContent>

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -1,10 +1,10 @@
-import { type UseMutationResult } from "@tanstack/react-query";
+import type { UseMutationResult } from "@tanstack/react-query";
 import { SendIcon, UnplugIcon } from "lucide-react";
 import { Spinner } from "zudoku/components";
 import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
 import { Button } from "../../../../ui/Button.js";
 import { cn } from "../../../../util/cn.js";
-import { type PlaygroundResult } from "../Playground.js";
+import type { PlaygroundResult } from "../Playground.js";
 import ResponseStatusBar from "./ResponseStatusBar.js";
 import { ResponseTab } from "./ResponseTab.js";
 
@@ -16,7 +16,7 @@ export const ResultPanel = ({
   isFinished,
   progress,
 }: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
   showLongRunningWarning?: boolean;
   onCancel?: () => void;

package/src/lib/plugins/openapi/playground/result-panel/convertToTypes.ts

@@ -17,7 +17,7 @@ function inferType(value: JsonValue): string {
   return typeof value;
 }
 
-export function generateInterface(obj: JsonObject, indentation = ""): string {
+export function generateInterface(obj: JsonObject, _indentation = ""): string {
   const lines: string[] = ["{"];
 
   for (const [key, value] of Object.entries(obj)) {

package/src/lib/plugins/openapi/processors/removeExtensions.test.ts

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: Allow any type
 import { describe, expect, it } from "vitest";
 import { removeExtensions } from "./removeExtensions.js";
 

package/src/lib/plugins/openapi/processors/removeParameters.test.ts

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: Allow any type
 import { describe, expect, it } from "vitest";
 import type { OpenAPIDocument } from "../../../oas/parser/index.js";
 import { removeParameters } from "./removeParameters.js";

package/src/lib/plugins/openapi/processors/traverse.ts

@@ -1 +1 @@
-export { traverse, type RecordAny } from "../../../util/traverse.js";
+export { type RecordAny, traverse } from "../../../util/traverse.js";

package/src/lib/plugins/openapi/schema/{LogicalGroup/LogicalGroupConnector.tsx → AllOfGroup/AllOfGroupConnector.tsx}

@@ -1,32 +1,11 @@
-import {
-  ChevronDownIcon,
-  CircleDotIcon,
-  CircleFadingPlusIcon,
-  CircleIcon,
-} from "lucide-react";
+import { ChevronDownIcon, CircleFadingPlusIcon } from "lucide-react";
 import { cn } from "../../../../util/cn.js";
 
-import type { LogicalGroupType } from "../utils.js";
-
-const iconMap = {
-  AND: <CircleFadingPlusIcon size={16} className="fill-card" />,
-  OR: <CircleDotIcon size={16} className="fill-card" />,
-  ONE: <CircleIcon size={14} className="fill-card" />,
-} as const;
-
-const colorClass = {
-  AND: "text-green-500 dark:text-green-300/60",
-  OR: "text-blue-400 dark:text-blue-500",
-  ONE: "text-purple-500 dark:text-purple-300/60",
-} as const;
-
-export const LogicalGroupConnector = ({
-  type,
+export const AllOfGroupConnector = ({
   isOpen,
   className,
   schemeName,
 }: {
-  type: LogicalGroupType;
   isOpen: boolean;
   className?: string;
   schemeName?: string;
@@ -34,14 +13,14 @@ export const LogicalGroupConnector = ({
   return (
     <div
       className={cn(
-        colorClass[type],
+        "text-green-500 dark:text-green-300/60",
         "relative text-sm flex py-2",
         "before:border-l before:absolute before:-top-2 before:-bottom-2 before:border-border before:border-dashed before:content-['']",
         className,
       )}
     >
       <div className="-translate-x-[7px] flex gap-1 items-center">
-        {iconMap[type]}
+        <CircleFadingPlusIcon size={16} className="fill-card" />
         <div
           className={cn(
             "translate-y-px mx-px opacity-0 group-hover:opacity-100 transition",

package/src/lib/plugins/openapi/schema/{LogicalGroup/LogicalGroupItem.tsx → AllOfGroup/AllOfGroupItem.tsx}

@@ -2,13 +2,9 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { useState } from "react";
 import type { SchemaObject } from "../../../../oas/parser/index.js";
 import { SchemaView } from "../SchemaView.js";
-import type { LogicalGroupType } from "../utils.js";
-import { LogicalGroupConnector } from "./LogicalGroupConnector.js";
+import { AllOfGroupConnector } from "./AllOfGroupConnector.js";
 
-export const LogicalGroupItem = (props: {
-  type: LogicalGroupType;
-  schema: SchemaObject;
-}) => {
+export const AllOfGroupItem = (props: { schema: SchemaObject }) => {
   const [isOpen, setIsOpen] = useState(true);
 
   return (
@@ -18,11 +14,7 @@ export const LogicalGroupItem = (props: {
       className="group"
     >
       <Collapsible.Trigger>
-        <LogicalGroupConnector
-          type={props.type}
-          isOpen={isOpen}
-          schemeName={props.schema.title}
-        />
+        <AllOfGroupConnector isOpen={isOpen} schemeName={props.schema.title} />
       </Collapsible.Trigger>
       {!isOpen && <div className="wavy-line bg-border translate-y-1" />}
       <Collapsible.Content>

package/src/lib/plugins/openapi/schema/AllOfGroup/AllOfGroupView.tsx

@@ -0,0 +1,42 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { SquareMinusIcon, SquarePlusIcon } from "lucide-react";
+import { useCallback, useState } from "react";
+import type { SchemaObject } from "../../../../oas/parser/index.js";
+import { Card } from "../../../../ui/Card.js";
+import { AllOfGroupItem } from "./AllOfGroupItem.js";
+
+export const AllOfGroupView = ({
+  schema,
+  cardHeader,
+}: {
+  schema: SchemaObject;
+  cardHeader?: React.ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
+
+  if (!schema.allOf) return null;
+
+  return (
+    <Collapsible.Root open={isOpen} onOpenChange={toggleOpen} asChild>
+      <Card className="overflow-hidden">
+        {cardHeader}
+        <Collapsible.Trigger className="flex gap-2 items-center py-2 px-6 w-full text-sm text-muted-foreground -translate-x-1.5">
+          {isOpen ? (
+            <SquareMinusIcon size={14} />
+          ) : (
+            <SquarePlusIcon size={14} />
+          )}
+          <span>All of</span>
+        </Collapsible.Trigger>
+
+        <Collapsible.Content className="pb-4 px-6">
+          {schema.allOf.map((subSchema, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: Index needed for key
+            <AllOfGroupItem key={index} schema={subSchema} />
+          ))}
+        </Collapsible.Content>
+      </Card>
+    </Collapsible.Root>
+  );
+};