feat: auth support, tag filtering, input schema extraction, meta display

- Add "Authorize" button with modal (bearer, cookie, header, basic auth)
  with localStorage persistence across page refreshes
- Add tag filtering in sidebar — read meta.tags, render filter chips,
  multi-select to narrow procedures across all routers
- Display procedure .meta() as badge pills in sidebar and detail panel
  (auth lock icon, deprecated warning, custom key-value pairs)
- CLI extractor now outputs both input and output schemas for z.custom()
  support — hybrid merge uses Zod at runtime, CLI-extracted as fallback
- Updated README with auth, tags, meta, and CLI input schema docs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: sayefdeen

packages/core/src/extract.ts

@@ -154,7 +154,12 @@ function isRouterDef(defType: Type): boolean {
   return recordType.getProperties().length > 0 && !recordType.isBoolean();
 }
 
-export function extractRouterOutputSchemas(options: ExtractOptions): Record<string, JsonSchema> {
+export interface ExtractedSchemas {
+  inputs: Record<string, JsonSchema>;
+  outputs: Record<string, JsonSchema>;
+}
+
+export function extractRouterSchemas(options: ExtractOptions): ExtractedSchemas {
   const projectOptions: ConstructorParameters<typeof Project>[0] = {
     skipAddingFilesFromTsConfig: false,
   };
@@ -174,13 +179,18 @@ export function extractRouterOutputSchemas(options: ExtractOptions): Record<stri
   }
 
   const routerType = routerVar.getType();
-  const result: Record<string, JsonSchema> = {};
+  const result: SchemaResult = { inputs: {}, outputs: {} };
 
   walkRouterType(routerType, "", result);
 
   return result;
 }
 
+/** @deprecated Use extractRouterSchemas instead — returns both inputs and outputs */
+export function extractRouterOutputSchemas(options: ExtractOptions): Record<string, JsonSchema> {
+  return extractRouterSchemas(options).outputs;
+}
+
 function extractProcedureOutputType(propDefType: Type): Type | null {
   // v10: _def._output_out
   const v10Output = getPropertyType(propDefType, "_output_out");
@@ -195,6 +205,20 @@ function extractProcedureOutputType(propDefType: Type): Type | null {
   return null;
 }
 
+function extractProcedureInputType(propDefType: Type): Type | null {
+  // v10: _def._input_in
+  const v10Input = getPropertyType(propDefType, "_input_in");
+  if (v10Input) return v10Input;
+
+  // v11: _def.$types.input
+  const $types = getPropertyType(propDefType, "$types");
+  if ($types) {
+    return getPropertyType($types, "input");
+  }
+
+  return null;
+}
+
 function isProcedureType(type: Type): boolean {
   const defType = getPropertyType(type, "_def");
   if (!defType) return false;
@@ -207,11 +231,12 @@ function isProcedureType(type: Type): boolean {
   );
 }
 
-function walkRecordEntries(
-  recordType: Type,
-  prefix: string,
-  result: Record<string, JsonSchema>,
-): void {
+interface SchemaResult {
+  inputs: Record<string, JsonSchema>;
+  outputs: Record<string, JsonSchema>;
+}
+
+function walkRecordEntries(recordType: Type, prefix: string, result: SchemaResult): void {
   for (const prop of recordType.getProperties()) {
     const propName = prop.getName();
     const path = prefix ? `${prefix}.${propName}` : propName;
@@ -227,11 +252,15 @@ function walkRecordEntries(
       continue;
     }
 
-    // Check if this is a procedure (has _def with output type info)
+    // Check if this is a procedure (has _def with type info)
     if (propDefType) {
       const outputType = extractProcedureOutputType(propDefType);
       if (outputType) {
-        result[path] = typeToJsonSchema(outputType);
+        result.outputs[path] = typeToJsonSchema(outputType);
+      }
+      const inputType = extractProcedureInputType(propDefType);
+      if (inputType && !inputType.isVoid() && !inputType.isUndefined()) {
+        result.inputs[path] = typeToJsonSchema(inputType);
       }
       continue;
     }
@@ -245,7 +274,6 @@ function walkRecordEntries(
       if (firstDecl) {
         const firstChildType = firstChild.getTypeAtLocation(firstDecl);
         if (isProcedureType(firstChildType)) {
-          // This is a v11 namespace — recurse into its properties
           walkRecordEntries(propType, path, result);
           continue;
         }
@@ -254,7 +282,7 @@ function walkRecordEntries(
   }
 }
 
-function walkRouterType(type: Type, prefix: string, result: Record<string, JsonSchema>): void {
+function walkRouterType(type: Type, prefix: string, result: SchemaResult): void {
   // Get _def.record
   const defType = getPropertyType(type, "_def");
   if (!defType) return;

packages/core/src/index.ts

@@ -1,3 +1,3 @@
-export { extractRouterOutputSchemas } from "./extract";
-export type { ExtractOptions } from "./extract";
+export { extractRouterSchemas, extractRouterOutputSchemas } from "./extract";
+export type { ExtractOptions, ExtractedSchemas } from "./extract";
 export type { JsonSchema, ProcedureType, ProcedureInfo, RouterManifest } from "./schema";

packages/core/src/schema.ts

@@ -22,6 +22,7 @@ export interface ProcedureInfo {
   inputSchema: JsonSchema | null;
   outputSchema: JsonSchema | null;
   description?: string;
+  meta?: Record<string, unknown>;
 }
 
 export interface RouterManifest {

packages/server/README.md

@@ -15,7 +15,11 @@ static type extraction via the TypeScript Compiler API.
 - **Output type visualization** — automatic runtime detection from `.output()`
   schemas, or static extraction via the CLI using the TypeScript Compiler API
 - **Sidebar navigation** — procedures grouped by router, color-coded badges
-  (query/mutation/subscription), real-time search
+  (query/mutation/subscription), real-time search, tag filtering
+- **Authentication** — configurable "Authorize" button (bearer, cookie, header,
+  basic) with localStorage persistence
+- **Procedure metadata** — automatically displays `.meta()` values (auth,
+  deprecated, tags, custom fields)
 - **Self-contained** — served as a single HTML response, no static file hosting
   needed
 - **tRPC v10 & v11** compatible
@@ -115,18 +119,26 @@ npx @srawad/trpc-studio extract --router ./src/server/router.ts
 ```
 
 This analyzes your TypeScript source and generates a `.trpc-studio.json` file
-with JSON Schema definitions for every procedure's output type.
+with JSON Schema definitions for every procedure's input and output types.
+
+This is especially useful for:
+
+- **Output types** — procedures that don't use `.output()` (most tRPC code)
+- **Input types with `z.custom<T>()`** — Zod's `z.custom()` carries no runtime
+  schema, so the UI renders it as an empty object. The CLI extractor resolves
+  the actual TypeScript type and provides full structural info.
 
 #### Step 2: Pass the schemas to renderTrpcStudio
 
 ```typescript
-import outputSchemas from "./.trpc-studio.json";
+import schemas from "./.trpc-studio.json";
 
 app.get("/studio", (_req, res) => {
   res.send(
     renderTrpcStudio(appRouter, {
       url: "http://localhost:3000/trpc",
-      outputSchemas,
+      inputSchemas: schemas.inputs,
+      outputSchemas: schemas.outputs,
     }),
   );
 });
@@ -176,49 +188,75 @@ npx @srawad/trpc-studio extract \
   --out .trpc-studio.json
 ```
 
-This generates `.trpc-studio.json`:
+This generates `.trpc-studio.json` with both input and output schemas:
 
 ```json
 {
-  "hello": {
-    "type": "object",
-    "properties": {
-      "greeting": { "type": "string" }
+  "inputs": {
+    "hello": {
+      "type": "object",
+      "properties": {
+        "name": { "type": "string" }
+      }
     },
-    "required": ["greeting"]
-  },
-  "user.getById": {
-    "type": "object",
-    "properties": {
-      "id": { "type": "string" },
-      "name": { "type": "string" },
-      "email": { "type": "string" }
+    "user.getById": {
+      "type": "object",
+      "properties": {
+        "id": { "type": "string" }
+      },
+      "required": ["id"]
     },
-    "required": ["id", "name", "email"]
+    "user.create": {
+      "type": "object",
+      "properties": {
+        "name": { "type": "string" },
+        "email": { "type": "string" }
+      },
+      "required": ["name", "email"]
+    }
   },
-  "user.create": {
-    "type": "object",
-    "properties": {
-      "id": { "type": "string" },
-      "name": { "type": "string" },
-      "email": { "type": "string" },
-      "createdAt": { "type": "string" }
+  "outputs": {
+    "hello": {
+      "type": "object",
+      "properties": {
+        "greeting": { "type": "string" }
+      },
+      "required": ["greeting"]
     },
-    "required": ["id", "name", "email", "createdAt"]
+    "user.getById": {
+      "type": "object",
+      "properties": {
+        "id": { "type": "string" },
+        "name": { "type": "string" },
+        "email": { "type": "string" }
+      },
+      "required": ["id", "name", "email"]
+    },
+    "user.create": {
+      "type": "object",
+      "properties": {
+        "id": { "type": "string" },
+        "name": { "type": "string" },
+        "email": { "type": "string" },
+        "createdAt": { "type": "string" }
+      },
+      "required": ["id", "name", "email", "createdAt"]
+    }
   }
 }
 ```
 
 Then wire it up:
 
 ```typescript
-import outputSchemas from "./.trpc-studio.json";
+import schemas from "./.trpc-studio.json";
 
 app.get("/studio", (_req, res) => {
   res.send(
     renderTrpcStudio(appRouter, {
       url: "http://localhost:3000/trpc",
-      outputSchemas,
+      inputSchemas: schemas.inputs,
+      outputSchemas: schemas.outputs,
       meta: { title: "My API", version: "1.0.0" },
     }),
   );
@@ -247,6 +285,88 @@ app.get("/studio", (_req, res) => {
 | `--name <name>`     | `appRouter`         | Name of the exported router variable  |
 | `--help`            |                     | Show help message                     |
 
+## Procedure Metadata (.meta())
+
+trpc-studio automatically reads and displays tRPC's built-in `.meta()` on each
+procedure. No configuration needed — if your procedures have meta, it shows up.
+
+```typescript
+const t = initTRPC
+  .meta<{
+    auth?: boolean;
+    deprecated?: boolean;
+    rateLimit?: number;
+    tags?: string[];
+  }>()
+  .create();
+
+const protectedProcedure = t.procedure.meta({ auth: true }).use(authMiddleware);
+
+export const appRouter = t.router({
+  getUser: protectedProcedure
+    .meta({ tags: ["billing", "v2"] })
+    .input(z.object({ id: z.string() }))
+    .query(/* ... */),
+
+  legacyReport: t.procedure
+    .meta({ deprecated: true, auth: true, tags: ["reporting"] })
+    .query(/* ... */),
+});
+```
+
+**In the UI:**
+
+- **Sidebar** — 🔒 icon for `auth: true`, ⚠️ icon for `deprecated: true`, tag
+  badges next to procedure names
+- **Detail panel** — all meta keys rendered as badge pills below the procedure
+  header (e.g., `🔒 auth`, `⚠️ deprecated`, `rateLimit: 100`)
+- **Tag filtering** — if any procedures use `meta.tags`, a filter bar appears at
+  the top of the sidebar. Click tags to filter procedures across all routers.
+  Multi-select supported.
+
+The rendering is generic — trpc-studio doesn't interpret the meta values, it
+just displays whatever keys and values are present.
+
+## Authentication
+
+Configure authentication so the "Try It Out" feature can execute protected
+procedures. An "Authorize" button appears in the top bar — click it to enter
+credentials. Values are stored in localStorage and persist across page
+refreshes.
+
+```typescript
+renderTrpcStudio(appRouter, {
+  url: "/api/trpc",
+  auth: { type: "bearer", description: "JWT token from /api/auth/login" },
+});
+```
+
+Multiple auth methods:
+
+```typescript
+renderTrpcStudio(appRouter, {
+  url: "/api/trpc",
+  auth: [
+    { type: "bearer", description: "JWT token" },
+    {
+      type: "cookie",
+      name: "next-auth.session-token",
+      description: "NextAuth session",
+    },
+    { type: "header", name: "x-api-key", description: "API key" },
+  ],
+});
+```
+
+**Supported auth types:**
+
+| Type     | Header sent                     | Use case          |
+| -------- | ------------------------------- | ----------------- |
+| `bearer` | `Authorization: Bearer <value>` | JWT, OAuth tokens |
+| `basic`  | `Authorization: Basic <value>`  | Basic auth        |
+| `header` | `<name>: <value>`               | API keys          |
+| `cookie` | `Cookie: <name>=<value>`        | Session cookies   |
+
 ## API
 
 ### `renderTrpcStudio(router, options)`
@@ -256,17 +376,31 @@ Returns a self-contained HTML string.
 ```typescript
 interface RenderOptions {
   url: string; // Base tRPC URL
-  outputSchemas?: Record<string, JsonSchema>; // From CLI extractor
+  outputSchemas?: Record<string, JsonSchema>; // From CLI: schemas.outputs
+  inputSchemas?: Record<string, JsonSchema>; // From CLI: schemas.inputs (fallback for z.custom())
   transformer?: "superjson" | "none"; // Default: "none"
+  auth?: AuthConfig | AuthConfig[]; // Authentication config for "Authorize" button
   meta?: {
     title?: string;
     description?: string;
     version?: string;
   };
-  headers?: Record<string, string>; // Auth headers for "Try It Out"
+  headers?: Record<string, string>; // Default headers for all requests
+}
+
+interface AuthConfig {
+  type: "bearer" | "cookie" | "header" | "basic";
+  name?: string; // Required for "cookie" and "header" types
+  description?: string; // Shown in the Authorize modal
 }
 ```
 
+**How input schema merging works:** Zod runtime schemas are the primary source.
+When a field produces an empty schema (e.g., `z.custom<T>()`), the CLI-extracted
+schema is used as a fallback. This gives you the best of both worlds — real Zod
+validation metadata where available, with TypeScript type info for `z.custom()`
+fields.
+
 ## Supported Zod Types
 
 | Zod Type                 | Input Form Control  | Notes              |

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srawad/trpc-studio",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "license": "MIT",
   "description": "Swagger-like UI for tRPC — auto-generated input forms, Try It Out execution, output type visualization, and a CLI for static type extraction",
   "repository": {