@checkstack/api-docs-frontend 0.1.35 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @checkstack/api-docs-frontend
 
+## 0.2.0
+
+### Minor Changes
+
+- 7c97b43: Backfill missing package bumps for the `/rest` mount PR — these packages were
+  modified in that change but were not declared in its changeset:
+
+  - `@checkstack/api-docs-frontend`: schema renderer rewrite (`additionalProperties`,
+    `$ref` resolution, `oneOf`/`anyOf`/`allOf`, nullable unions, `format`
+    qualifiers) and the new path/query/header/cookie parameters table for GET
+    endpoints.
+  - `@checkstack/frontend`: Vite dev-server proxy for `/rest/*` so external REST
+    clients pointing at the Vite port resolve to the backend.
+  - `@checkstack/healthcheck-backend`: router handler now unpacks `input.systemId`
+    after `getSystemConfigurations` was refactored from `.input(z.string())` to
+    `.input(z.object({ systemId: z.string() }))`.
+
+  No behavior change beyond what the original PR already shipped.
+
+### Patch Changes
+
+- Updated dependencies [9016526]
+  - @checkstack/common@0.10.0
+  - @checkstack/api-docs-common@0.1.13
+  - @checkstack/frontend-api@0.5.1
+  - @checkstack/ui@1.8.1
+
+## 0.1.36
+
+### Patch Changes
+
+- 950d6ec: Fix mobile UserMenu items rendering at zero height, group menu items by
+  section, and unstack cramped card headers on small viewports.
+
+  - **UserMenu mobile bug**: On mobile, the user-menu Sheet rendered every
+    menu item as a grid row, which combined with `flex-shrink: 1` on each
+    item collapsed the buttons whose internal layout uses `display: flex`
+    (the items registered with `useNavigate` rather than `<Link>`) to zero
+    content height. Switched the mobile container to a flex column with
+    `[&>*]:shrink-0` and added `min-h-0` so the sheet scrolls correctly
+    when the list overflows.
+
+  - **UserMenu grouping**: Slot extensions now accept an optional `group`
+    field. The user menu buckets `UserMenuItemsSlot` extensions by `group`
+    and renders each group under a labeled header (`Workspace`,
+    `Reliability`, `Configuration`, `Documentation`, `Account`). Existing
+    core plugins are tagged with the appropriate group; third-party plugins
+    can pick any of these or supply their own label. Untagged extensions
+    render last with no header. `UserMenuItemsBottomSlot` is unaffected.
+
+  - **Card header responsiveness**: `CardHeaderRow` (the primitive shared by
+    Incident, Maintenance, Auth, Catalog, GitOps and other config cards) now
+    stacks vertically on narrow viewports and only switches to a single row
+    at the `sm` breakpoint, so titles and adjacent filter controls (e.g.
+    status `Select`, "Show resolved" checkbox) no longer cram together on
+    mobile. Refactored the Incident and Maintenance config pages to use the
+    primitive instead of a hand-rolled `flex items-center justify-between`
+    row, and made their `Select` triggers full-width on mobile.
+
+- Updated dependencies [42abfff]
+- Updated dependencies [3547670]
+- Updated dependencies [1ef2e79]
+- Updated dependencies [aa89bc5]
+- Updated dependencies [950d6ec]
+- Updated dependencies [3547670]
+  - @checkstack/common@0.9.0
+  - @checkstack/ui@1.8.0
+  - @checkstack/frontend-api@0.5.0
+  - @checkstack/api-docs-common@0.1.12
+
 ## 0.1.35
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/api-docs-frontend",
-  "version": "0.1.35",
+  "version": "0.2.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,10 +13,10 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/frontend-api": "0.4.1",
-    "@checkstack/common": "0.7.0",
-    "@checkstack/api-docs-common": "0.1.10",
-    "@checkstack/ui": "1.7.0",
+    "@checkstack/frontend-api": "0.5.0",
+    "@checkstack/common": "0.9.0",
+    "@checkstack/api-docs-common": "0.1.12",
+    "@checkstack/ui": "1.8.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "lucide-react": "^0.344.0"
@@ -24,7 +24,7 @@
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
-    "@checkstack/tsconfig": "0.0.6",
-    "@checkstack/scripts": "0.1.2"
+    "@checkstack/tsconfig": "0.0.7",
+    "@checkstack/scripts": "0.3.1"
   }
 }

package/src/ApiDocsPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import {
   Card,
   CardContent,
@@ -29,6 +29,17 @@ interface OpenApiSpec {
     description?: string;
   };
   paths: Record<string, Record<string, OperationObject>>;
+  components?: {
+    schemas?: Record<string, SchemaObject>;
+  };
+}
+
+interface ParameterObject {
+  name: string;
+  in: "query" | "path" | "header" | "cookie";
+  required?: boolean;
+  description?: string;
+  schema?: SchemaObject;
 }
 
 interface OperationObject {
@@ -36,6 +47,7 @@ interface OperationObject {
   description?: string;
   operationId?: string;
   tags?: string[];
+  parameters?: ParameterObject[];
   requestBody?: {
     content?: {
       "application/json"?: {
@@ -57,31 +69,37 @@ interface OperationObject {
 }
 
 interface SchemaObject {
-  type?: string;
+  type?: string | string[];
   properties?: Record<string, SchemaObject>;
   items?: SchemaObject;
   required?: string[];
   description?: string;
-  enum?: string[];
+  enum?: (string | number | boolean | null)[];
+  format?: string;
+  nullable?: boolean;
   $ref?: string;
+  additionalProperties?: SchemaObject | boolean;
+  oneOf?: SchemaObject[];
+  anyOf?: SchemaObject[];
+  allOf?: SchemaObject[];
 }
 
 function getUserTypeIcon(userType?: string) {
   switch (userType) {
     case "public": {
-      return <Globe className="h-4 w-4 text-green-500" />;
+      return <Globe className="w-4 h-4 text-green-500" />;
     }
     case "user": {
-      return <User className="h-4 w-4 text-blue-500" />;
+      return <User className="w-4 h-4 text-blue-500" />;
     }
     case "service": {
-      return <Server className="h-4 w-4 text-purple-500" />;
+      return <Server className="w-4 h-4 text-purple-500" />;
     }
     case "authenticated": {
-      return <Lock className="h-4 w-4 text-amber-500" />;
+      return <Lock className="w-4 h-4 text-amber-500" />;
     }
     default: {
-      return <Lock className="h-4 w-4 text-gray-500" />;
+      return <Lock className="w-4 h-4 text-gray-500" />;
     }
   }
 }
@@ -120,7 +138,7 @@ function CopyButton({ text }: { text: string }) {
 
   return (
     <Button variant="ghost" size="sm" onClick={handleCopy}>
-      {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+      {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
     </Button>
   );
 }
@@ -131,19 +149,30 @@ function generateFetchExample(
   operation: OperationObject,
 ): string {
   const baseUrl = "http://localhost:3000";
+  const upperMethod = method.toUpperCase();
   const hasBody = operation.requestBody?.content?.["application/json"]?.schema;
 
-  let example = `const response = await fetch("${baseUrl}${path}", {
-  method: "${method.toUpperCase()}",
+  const queryParams =
+    operation.parameters?.filter((p) => p.in === "query") ?? [];
+  const queryString =
+    queryParams.length > 0
+      ? "?" +
+        queryParams
+          .map((p) => `${p.name}=<${p.required ? "required" : "optional"}>`)
+          .join("&")
+      : "";
+
+  const includeContentType = hasBody;
+  let example = `const response = await fetch("${baseUrl}${path}${queryString}", {
+  method: "${upperMethod}",
   headers: {
-    "Content-Type": "application/json",
-    "Authorization": "Bearer ck_<application-id>_<secret>"
+${includeContentType ? '    "Content-Type": "application/json",\n' : ""}    "Authorization": "Bearer ck_<application-id>_<secret>"
   }`;
 
   if (hasBody) {
     example += `,
   body: JSON.stringify({
-    // Request body - see schema below
+    // Request body - see schema above
   })`;
   }
 
@@ -155,45 +184,118 @@ const data = await response.json();`;
   return example;
 }
 
+const SchemasContext = createContext<Record<string, SchemaObject>>({});
+
+const PRIMITIVE_COLORS: Record<string, string> = {
+  string: "text-green-600 dark:text-green-400",
+  number: "text-amber-600 dark:text-amber-400",
+  boolean: "text-red-600 dark:text-red-400",
+  integer: "text-amber-600 dark:text-amber-400",
+  null: "text-gray-500",
+};
+
+function PrimitiveType({ type, format }: { type: string; format?: string }) {
+  const className = PRIMITIVE_COLORS[type] ?? "text-gray-600";
+  return (
+    <span className={className}>
+      {type}
+      {format ? (
+        <span className="text-muted-foreground"> &lt;{format}&gt;</span>
+      ) : null}
+    </span>
+  );
+}
+
+const MAX_DEPTH = 12;
+
 function SchemaDisplay({
   schema,
   depth = 0,
+  refStack = [],
 }: {
   schema?: SchemaObject;
   depth?: number;
+  /** Tracks $refs already in the current chain to halt cycles. */
+  refStack?: string[];
 }) {
+  const schemas = useContext(SchemasContext);
+
   if (!schema) return <span className="text-muted-foreground">unknown</span>;
+  if (depth > MAX_DEPTH) {
+    return <span className="text-muted-foreground">…</span>;
+  }
 
+  // Resolve $ref via the spec's components.schemas registry, guarding against
+  // cycles. If the ref can't be resolved we show its name as a leaf.
   if (schema.$ref) {
-    const refName = schema.$ref.split("/").pop();
+    const refName = schema.$ref.split("/").pop() ?? schema.$ref;
+    if (refStack.includes(schema.$ref)) {
+      return (
+        <span
+          className="text-purple-600 dark:text-purple-400"
+          title="recursive reference"
+        >
+          {refName} ↻
+        </span>
+      );
+    }
+    const resolved = schemas[refName];
+    if (!resolved) {
+      return (
+        <span className="text-purple-600 dark:text-purple-400">{refName}</span>
+      );
+    }
     return (
-      <span className="text-purple-600 dark:text-purple-400">{refName}</span>
+      <span>
+        <span className="mr-1 text-purple-600 dark:text-purple-400">
+          {refName}
+        </span>
+        <SchemaDisplay
+          schema={resolved}
+          depth={depth}
+          refStack={[...refStack, schema.$ref]}
+        />
+      </span>
     );
   }
 
-  if (schema.type === "object" && schema.properties) {
+  // Union / intersection — render variants separated by | or & .
+  const variants = schema.oneOf ?? schema.anyOf;
+  if (variants && variants.length > 0) {
     return (
-      <div className="font-mono text-sm" style={{ marginLeft: depth * 16 }}>
-        {"{"}
-        {Object.entries(schema.properties).map(([key, value]) => (
-          <div key={key} className="ml-4">
-            <span className="text-blue-600 dark:text-blue-400">{key}</span>
-            {schema.required?.includes(key) && (
-              <span className="text-red-500">*</span>
-            )}
-            : <SchemaDisplay schema={value} depth={depth + 1} />
-          </div>
+      <span>
+        {variants.map((v, i) => (
+          <span key={i}>
+            {i > 0 && <span className="text-muted-foreground"> | </span>}
+            <SchemaDisplay schema={v} depth={depth} refStack={refStack} />
+          </span>
+        ))}
+      </span>
+    );
+  }
+  if (schema.allOf && schema.allOf.length > 0) {
+    return (
+      <span>
+        {schema.allOf.map((v, i) => (
+          <span key={i}>
+            {i > 0 && <span className="text-muted-foreground"> &amp; </span>}
+            <SchemaDisplay schema={v} depth={depth} refStack={refStack} />
+          </span>
         ))}
-        {"}"}
-      </div>
+      </span>
     );
   }
 
-  if (schema.type === "array" && schema.items) {
+  // Treat type: ["string", "null"] as a nullable union.
+  if (Array.isArray(schema.type)) {
     return (
       <span>
-        <SchemaDisplay schema={schema.items} depth={depth} />
-        []
+        {schema.type.map((t, i) => (
+          <span key={i}>
+            {i > 0 && <span className="text-muted-foreground"> | </span>}
+            <PrimitiveType type={t} format={schema.format} />
+          </span>
+        ))}
       </span>
     );
   }
@@ -201,22 +303,167 @@ function SchemaDisplay({
   if (schema.enum) {
     return (
       <span className="text-green-600 dark:text-green-400">
-        {schema.enum.map((e) => `"${e}"`).join(" | ")}
+        {schema.enum
+          .map((e) => (typeof e === "string" ? `"${e}"` : String(e)))
+          .join(" | ")}
       </span>
     );
   }
 
-  const typeColors: Record<string, string> = {
-    string: "text-green-600 dark:text-green-400",
-    number: "text-amber-600 dark:text-amber-400",
-    boolean: "text-red-600 dark:text-red-400",
-    integer: "text-amber-600 dark:text-amber-400",
+  if (
+    schema.type === "object" ||
+    schema.properties ||
+    schema.additionalProperties !== undefined
+  ) {
+    const props = schema.properties;
+    const ap = schema.additionalProperties;
+
+    // zod `z.record(K, V)` → no `properties`, just `additionalProperties: V`.
+    // Render as `{ [key]: V }` so the value type is visible.
+    if (!props && ap !== undefined && ap !== false) {
+      return (
+        <div
+          className="inline-block font-mono text-sm align-top"
+          style={{ marginLeft: depth * 16 }}
+        >
+          {"{ "}
+          <span className="text-muted-foreground">[key]</span>:{" "}
+          {ap === true ? (
+            <span className="text-gray-600">any</span>
+          ) : (
+            <SchemaDisplay schema={ap} depth={depth + 1} refStack={refStack} />
+          )}
+          {" }"}
+        </div>
+      );
+    }
+
+    if (props) {
+      return (
+        <div
+          className="inline-block font-mono text-sm align-top"
+          style={{ marginLeft: depth * 16 }}
+        >
+          {"{"}
+          {Object.entries(props).map(([key, value]) => (
+            <div key={key} className="ml-4">
+              <span className="text-blue-600 dark:text-blue-400">{key}</span>
+              {schema.required?.includes(key) && (
+                <span className="text-red-500">*</span>
+              )}
+              :{" "}
+              <SchemaDisplay
+                schema={value}
+                depth={depth + 1}
+                refStack={refStack}
+              />
+            </div>
+          ))}
+          {ap !== undefined && ap !== false && (
+            <div className="ml-4">
+              <span className="text-muted-foreground">[key]</span>:{" "}
+              {ap === true ? (
+                <span className="text-gray-600">any</span>
+              ) : (
+                <SchemaDisplay
+                  schema={ap}
+                  depth={depth + 1}
+                  refStack={refStack}
+                />
+              )}
+            </div>
+          )}
+          {"}"}
+        </div>
+      );
+    }
+
+    return <PrimitiveType type="object" />;
+  }
+
+  if (schema.type === "array" && schema.items) {
+    return (
+      <span>
+        <SchemaDisplay
+          schema={schema.items}
+          depth={depth}
+          refStack={refStack}
+        />
+        []
+      </span>
+    );
+  }
+
+  if (typeof schema.type === "string") {
+    return <PrimitiveType type={schema.type} format={schema.format} />;
+  }
+
+  return <span className="text-gray-600">unknown</span>;
+}
+
+function ParametersTable({
+  parameters,
+}: {
+  parameters: ParameterObject[];
+}) {
+  const byLocation: Record<string, ParameterObject[]> = {};
+  for (const p of parameters) {
+    (byLocation[p.in] ??= []).push(p);
+  }
+
+  const sectionTitle: Record<string, string> = {
+    query: "Query Parameters",
+    path: "Path Parameters",
+    header: "Header Parameters",
+    cookie: "Cookie Parameters",
   };
 
   return (
-    <span className={typeColors[schema.type ?? ""] ?? "text-gray-600"}>
-      {schema.type ?? "unknown"}
-    </span>
+    <div className="space-y-3">
+      {(["path", "query", "header", "cookie"] as const).map((loc) => {
+        const items = byLocation[loc];
+        if (!items || items.length === 0) return null;
+        return (
+          <div key={loc}>
+            <h4 className="mb-2 text-sm font-medium">{sectionTitle[loc]}</h4>
+            <div className="overflow-x-auto rounded-md bg-muted">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="text-left border-b border-border/50">
+                    <th className="px-3 py-2 font-medium">Name</th>
+                    <th className="px-3 py-2 font-medium">Type</th>
+                    <th className="px-3 py-2 font-medium">Description</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((p) => (
+                    <tr
+                      key={`${p.in}:${p.name}`}
+                      className="align-top border-t border-border/30"
+                    >
+                      <td className="px-3 py-2 font-mono">
+                        <span className="text-blue-600 dark:text-blue-400">
+                          {p.name}
+                        </span>
+                        {p.required && (
+                          <span className="text-red-500">*</span>
+                        )}
+                      </td>
+                      <td className="px-3 py-2 font-mono">
+                        <SchemaDisplay schema={p.schema} />
+                      </td>
+                      <td className="px-3 py-2 text-muted-foreground">
+                        {p.description ?? ""}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        );
+      })}
+    </div>
   );
 }
 
@@ -248,21 +495,21 @@ function EndpointCard({
   return (
     <Card className="mb-2">
       <CardHeader
-        className="cursor-pointer hover:bg-accent/50 transition-colors py-3"
+        className="py-3 transition-colors cursor-pointer hover:bg-accent/50"
         onClick={() => setIsOpen(!isOpen)}
       >
         <div className="flex items-center gap-3">
           {isOpen ? (
-            <ChevronDown className="h-4 w-4" />
+            <ChevronDown className="w-4 h-4" />
           ) : (
-            <ChevronRight className="h-4 w-4" />
+            <ChevronRight className="w-4 h-4" />
           )}
           <Badge
             className={`${methodColors[method]} text-white uppercase text-xs font-mono`}
           >
             {method}
           </Badge>
-          <code className="font-mono text-sm flex-1 text-left">{path}</code>
+          <code className="flex-1 font-mono text-sm text-left">{path}</code>
           <div className="flex items-center gap-2">
             {getUserTypeIcon(meta?.userType)}
             <Badge
@@ -295,7 +542,7 @@ function EndpointCard({
 
           {meta?.accessRules && meta.accessRules.length > 0 && (
             <div>
-              <h4 className="text-sm font-medium mb-2">
+              <h4 className="mb-2 text-sm font-medium">
                 Required Access Rules
               </h4>
               <div className="flex flex-wrap gap-2">
@@ -308,11 +555,19 @@ function EndpointCard({
             </div>
           )}
 
+          {operation.parameters && operation.parameters.length > 0 && (
+            <ParametersTable parameters={operation.parameters} />
+          )}
+
           <div className="grid gap-4 md:grid-cols-2">
             {inputSchema && (
               <div>
-                <h4 className="text-sm font-medium mb-2">Input Schema</h4>
-                <div className="bg-muted rounded-md p-3 overflow-x-auto">
+                <h4 className="mb-2 text-sm font-medium">
+                  {method.toLowerCase() === "get"
+                    ? "Input Schema (encoded as query params)"
+                    : "Input Schema"}
+                </h4>
+                <div className="p-3 overflow-x-auto rounded-md bg-muted">
                   <SchemaDisplay schema={inputSchema} />
                 </div>
               </div>
@@ -320,8 +575,8 @@ function EndpointCard({
 
             {outputSchema && (
               <div>
-                <h4 className="text-sm font-medium mb-2">Output Schema</h4>
-                <div className="bg-muted rounded-md p-3 overflow-x-auto">
+                <h4 className="mb-2 text-sm font-medium">Output Schema</h4>
+                <div className="p-3 overflow-x-auto rounded-md bg-muted">
                   <SchemaDisplay schema={outputSchema} />
                 </div>
               </div>
@@ -335,7 +590,7 @@ function EndpointCard({
                 text={generateFetchExample(path, method, operation)}
               />
             </div>
-            <pre className="bg-muted rounded-md p-3 overflow-x-auto text-sm">
+            <pre className="p-3 overflow-x-auto text-sm rounded-md bg-muted">
               <code>{generateFetchExample(path, method, operation)}</code>
             </pre>
           </div>
@@ -419,9 +674,10 @@ export function ApiDocsPage() {
         continue;
       }
 
-      // Extract plugin name from path (e.g., /catalog/getEntities -> catalog)
-      // Path can be /api/plugin/... or /plugin/... depending on OpenAPI prefix setting
-      const pluginMatch = path.match(/^\/?(?:api\/)?([^/]+)/);
+      // Extract plugin name from path (e.g. /rest/catalog/getEntities -> catalog).
+      // Paths in the generated spec are prefixed with /rest (the REST mount); a
+      // bare /plugin/... fallback is kept in case the prefix is ever stripped.
+      const pluginMatch = path.match(/^\/?(?:rest\/)?([^/]+)/);
       const pluginName = pluginMatch?.[1] ?? "other";
 
       if (!endpointsByPlugin[pluginName]) {
@@ -432,91 +688,95 @@ export function ApiDocsPage() {
   }
 
   return (
-    <PageLayout
-      title={spec.info.title}
-      subtitle={spec.info.description}
-      icon={FileCode}
-      loading={loading}
-      maxWidth="full"
-    >
-      <Badge variant="secondary">v{spec.info.version}</Badge>
-
-      <div className="flex flex-wrap items-center gap-2">
-        <span className="text-sm text-muted-foreground">Filter by access:</span>
-        <Button
-          variant={selectedTypes.size === 0 ? "primary" : "outline"}
-          size="sm"
-          onClick={showAll}
-        >
-          All
-        </Button>
-        <Button
-          variant={selectedTypes.has("authenticated") ? "primary" : "outline"}
-          size="sm"
-          onClick={() => toggleType("authenticated")}
-        >
-          Authenticated
-        </Button>
-        <Button
-          variant={selectedTypes.has("public") ? "primary" : "outline"}
-          size="sm"
-          onClick={() => toggleType("public")}
-        >
-          Public
-        </Button>
-        <Button
-          variant={selectedTypes.has("user") ? "primary" : "outline"}
-          size="sm"
-          onClick={() => toggleType("user")}
-        >
-          User Only
-        </Button>
-        <Button
-          variant={selectedTypes.has("service") ? "primary" : "outline"}
-          size="sm"
-          onClick={() => toggleType("service")}
-        >
-          Service Only
-        </Button>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Authentication</CardTitle>
-          <CardDescription>
-            Endpoints marked as <strong>authenticated</strong> or{" "}
-            <strong>public</strong> can be accessed using an application token.
-            Other endpoints are for internal use only.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <pre className="bg-muted rounded-md p-3 overflow-x-auto text-sm">
-            <code>
-              Authorization: Bearer ck_{"<application-id>"}_{"<secret>"}
-            </code>
-          </pre>
-        </CardContent>
-      </Card>
-
-      <div className="space-y-8">
-        {Object.entries(endpointsByPlugin)
-          .toSorted(([a], [b]) => a.localeCompare(b))
-          .map(([pluginName, endpoints]) => (
-            <div key={pluginName}>
-              <h2 className="text-xl font-semibold mb-4 capitalize">
-                {pluginName}
-              </h2>
-              {endpoints.map(({ path, method, operation }) => (
-                <EndpointCard
-                  key={`${method}-${path}`}
-                  path={path}
-                  method={method}
-                  operation={operation}
-                />
-              ))}
-            </div>
-          ))}
-      </div>
-    </PageLayout>
+    <SchemasContext.Provider value={spec.components?.schemas ?? {}}>
+      <PageLayout
+        title={spec.info.title}
+        subtitle={spec.info.description}
+        icon={FileCode}
+        loading={loading}
+        maxWidth="full"
+      >
+        <Badge variant="secondary">v{spec.info.version}</Badge>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm text-muted-foreground">
+            Filter by access:
+          </span>
+          <Button
+            variant={selectedTypes.size === 0 ? "primary" : "outline"}
+            size="sm"
+            onClick={showAll}
+          >
+            All
+          </Button>
+          <Button
+            variant={selectedTypes.has("authenticated") ? "primary" : "outline"}
+            size="sm"
+            onClick={() => toggleType("authenticated")}
+          >
+            Authenticated
+          </Button>
+          <Button
+            variant={selectedTypes.has("public") ? "primary" : "outline"}
+            size="sm"
+            onClick={() => toggleType("public")}
+          >
+            Public
+          </Button>
+          <Button
+            variant={selectedTypes.has("user") ? "primary" : "outline"}
+            size="sm"
+            onClick={() => toggleType("user")}
+          >
+            User Only
+          </Button>
+          <Button
+            variant={selectedTypes.has("service") ? "primary" : "outline"}
+            size="sm"
+            onClick={() => toggleType("service")}
+          >
+            Service Only
+          </Button>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Authentication</CardTitle>
+            <CardDescription>
+              Endpoints marked as <strong>authenticated</strong> or{" "}
+              <strong>public</strong> can be accessed using an application
+              token. Other endpoints are for internal use only.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <pre className="p-3 overflow-x-auto text-sm rounded-md bg-muted">
+              <code>
+                Authorization: Bearer ck_{"<application-id>"}_{"<secret>"}
+              </code>
+            </pre>
+          </CardContent>
+        </Card>
+
+        <div className="space-y-8">
+          {Object.entries(endpointsByPlugin)
+            .toSorted(([a], [b]) => a.localeCompare(b))
+            .map(([pluginName, endpoints]) => (
+              <div key={pluginName}>
+                <h2 className="mb-4 text-xl font-semibold capitalize">
+                  {pluginName}
+                </h2>
+                {endpoints.map(({ path, method, operation }) => (
+                  <EndpointCard
+                    key={`${method}-${path}`}
+                    path={path}
+                    method={method}
+                    operation={operation}
+                  />
+                ))}
+              </div>
+            ))}
+        </div>
+      </PageLayout>
+    </SchemasContext.Provider>
   );
 }

package/src/index.tsx

@@ -25,6 +25,7 @@ export const apiDocsPlugin = createFrontendPlugin({
     createSlotExtension(UserMenuItemsSlot, {
       id: "api-docs.user-menu.link",
       component: ApiDocsMenuItem,
+      metadata: { group: "Documentation" },
     }),
   ],
 });