khotan-dataalpha
View as Markdown
Dashboards

Plug Debugger

Lightweight Postman for your plugs. Endpoint sidebar with click-to-load, path param interpolation, Zod schema display, git-diff style response validation, request history, copy-to-clipboard, and auto-format. Fires through the real plug code path (auth, retry, hooks). Gated behind `KHOTAN_DEBUG` — zero production footprint.

dev-only
DebugDEV
GET
/products
200 OK
142ms

Install

terminal
$ npx khotan add plug-debugger

Highlights

  • Typed endpoints from plug config with Zod request/response schemas
  • Path param interpolation — :id fields get dedicated inputs
  • Git-diff response view — green matched, amber undocumented, red missing
  • Request history in sessionStorage — click to replay
  • Auto-format JSON body on blur
  • Response size (KB) alongside timing
  • Tree view with click-to-copy JSON paths
  • ⌘Enter to send from anywhere

Modes

Standalone panel

Drop the debugger on any page — scoped to a single plug. Self-hides when the debug route is disabled.

ts
import { PlugDebugger } from '@/components/khotan/plug-debugger'

// Renders only when KHOTAN_DEBUG is set
<PlugDebugger plugName="pollinate" />

Defining endpoints

Endpoints live on the plug config with optional Zod schemas for request/response validation.

ts
import { z } from "zod"
import { plug } from "./plug"

export const pollinatePlug = plug({
  name: "pollinate",
  baseUrl: "https://api.pollinate.tech",
  endpoints: {
    listProducts: {
      method: "GET",
      path: "/products",
      query: z.object({ page: z.number().optional() }),
      responses: {
        200: z.object({
          data: z.array(z.object({ id: z.string(), name: z.string() })),
          total: z.number(),
        }),
      },
    },
    getOrder: {
      method: "GET",
      path: "/orders/:id",
      responses: { 200: z.object({ id: z.string(), status: z.string() }) },
    },
  },
  vars: [...]
})

Hub integration

The Hub shows a Debug button on each plug card when KHOTAN_DEBUG is set. Links to /debug/[plugName].

ts
// Hub automatically detects debug mode and shows buttons.
// Add the block for a ready-made page:
// $ npx khotan add debug-page-1

// Creates: app/debug/page.tsx (index listing all plugs)
// Creates: app/debug/[plugName]/page.tsx (per-plug debugger)
// Navigate: /debug/pollinate

What to expect from add

Running npx khotan add plug-debugger scaffolds one or more files into your khotan runtime, React component directory, or app routes depending on the component. khotan may also prompt to install dependent components, npm packages, shadcn pieces, or Workflow integration when this component needs them.

Usage

Use the generated builder or UI inside your khotan setup and operational surfaces. For live runtime inspection, pair this component with the CLI and the built-in docs markdown routes.

Next steps