khotan-data 0.0.1 → 0.1.0

package/dist/templates/plug-debugger.tsx

@@ -0,0 +1,1185 @@
+"use client";
+
+import React, { useEffect, useState, useCallback, useRef } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+// ============================================================================
+// Plug Debugger — Lightweight Postman for your plugs
+// Generated by khotan CLI · https://github.com/khotan-data
+//
+// Fires requests through the real plug code path (auth, retry, hooks).
+// Gated behind KHOTAN_DEBUG env var — hidden in production.
+// ============================================================================
+
+interface EndpointMeta {
+  method: string;
+  path: string;
+  description?: string;
+  body?: Record<string, unknown> | null;
+  query?: Record<string, unknown> | null;
+  responses?: Record<string, Record<string, unknown> | null> | null;
+}
+
+interface Endpoint {
+  name: string;
+  method: string;
+  path: string;
+  description?: string;
+  body?: Record<string, unknown> | null;
+  query?: Record<string, unknown> | null;
+  responses?: Record<string, Record<string, unknown> | null> | null;
+}
+
+interface VarField {
+  key: string;
+  label: string;
+  type: string;
+  secret?: boolean;
+  defaultValue?: string;
+}
+
+interface PlugMeta {
+  name: string;
+  baseUrl: string;
+  authType: string;
+  endpoints: Record<string, EndpointMeta> | null;
+  vars: {
+    fields: VarField[];
+    configured: boolean;
+    values?: Record<string, string>;
+  };
+}
+
+interface DebugResponse {
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  body: unknown;
+  timing: number;
+  endpoint?: { name: string; method: string; path: string };
+  error?: string;
+}
+
+interface HistoryEntry {
+  id: string;
+  method: string;
+  path: string;
+  status: number;
+  timing: number;
+  timestamp: number;
+  body?: string;
+  params?: string;
+  headers?: string;
+}
+
+interface PlugDebuggerProps {
+  plugName: string;
+  basePath?: string;
+}
+
+const METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"] as const;
+
+const METHOD_COLORS: Record<string, string> = {
+  GET: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20",
+  POST: "bg-amber-500/10 text-amber-700 border-amber-500/20",
+  PUT: "bg-blue-500/10 text-blue-700 border-blue-500/20",
+  PATCH: "bg-purple-500/10 text-purple-700 border-purple-500/20",
+  DELETE: "bg-red-500/10 text-red-700 border-red-500/20",
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  "2": "text-emerald-600",
+  "4": "text-red-600",
+  "5": "text-red-600",
+};
+
+function getStatusColor(status: number): string {
+  return STATUS_COLORS[String(status)[0] ?? ""] ?? "text-amber-600";
+}
+
+// ---------------------------------------------------------------------------
+// Path param detection — extracts :param segments from a path template
+// ---------------------------------------------------------------------------
+
+function extractPathParams(pathTemplate: string): string[] {
+  return (pathTemplate.match(/:([a-zA-Z_]\w*)/g) ?? []).map((p) => p.slice(1));
+}
+
+function interpolatePath(
+  pathTemplate: string,
+  values: Record<string, string>,
+): string {
+  let result = pathTemplate;
+  for (const [key, val] of Object.entries(values)) {
+    if (val) result = result.replace(`:${key}`, encodeURIComponent(val));
+  }
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// JSON path builder — builds dot-notation paths for nested objects
+// ---------------------------------------------------------------------------
+
+interface DiffInfo {
+  matched: Set<string>;
+  unexpected: Set<string>;
+  missing: string[];
+}
+
+function buildJsonTree(
+  obj: unknown,
+  prefix: string,
+  onCopy: (path: string) => void,
+  diff?: DiffInfo,
+  depth = 0,
+): React.ReactNode {
+  if (obj === null || obj === undefined) {
+    return <span className="text-muted-foreground">null</span>;
+  }
+  if (typeof obj !== "object") {
+    return <span className="text-foreground">{JSON.stringify(obj)}</span>;
+  }
+  if (Array.isArray(obj)) {
+    if (obj.length === 0)
+      return <span className="text-muted-foreground">[]</span>;
+    return (
+      <div className="pl-3">
+        {obj.slice(0, 20).map((item, i) => (
+          <div key={i} className="border-l border-border/50 pl-2 my-0.5">
+            <button
+              onClick={() => onCopy(`${prefix}[${i}]`)}
+              className="text-[10px] text-muted-foreground/60 hover:text-foreground mr-1"
+              title={`Copy path: ${prefix}[${i}]`}
+            >
+              [{i}]
+            </button>
+            {buildJsonTree(
+              item,
+              `${prefix}[${i}]`,
+              onCopy,
+              undefined,
+              depth + 1,
+            )}
+          </div>
+        ))}
+        {obj.length > 20 && (
+          <p className="text-[10px] text-muted-foreground italic">
+            ...{obj.length - 20} more items
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  const entries = Object.entries(obj as Record<string, unknown>);
+  return (
+    <div className={depth > 0 ? "pl-3" : ""}>
+      {/* Missing fields at top (only at depth 0) */}
+      {diff &&
+        depth === 0 &&
+        diff.missing.map((key) => (
+          <div
+            key={`missing-${key}`}
+            className="my-0.5 -mx-1 px-1 rounded bg-red-500/10"
+          >
+            <span className="select-none inline-block w-4 text-[10px] text-red-500">
+              −
+            </span>
+            <span className="text-xs font-mono text-red-400 line-through">
+              {key}
+            </span>
+            <span className="text-red-400/60 text-xs">: ...</span>
+          </div>
+        ))}
+      {entries.map(([key, val]) => {
+        const fullPath = prefix ? `${prefix}.${key}` : key;
+        const isObject = val !== null && typeof val === "object";
+        let bgClass = "";
+        let prefixChar = " ";
+        if (diff && depth === 0) {
+          if (diff.matched.has(key)) {
+            bgClass = "bg-emerald-500/10 -mx-1 px-1 rounded";
+          } else if (diff.unexpected.has(key)) {
+            bgClass = "bg-amber-500/10 -mx-1 px-1 rounded";
+            prefixChar = "+";
+          }
+        }
+        return (
+          <div key={key} className={`my-0.5 ${bgClass}`}>
+            {diff && depth === 0 && (
+              <span
+                className={`select-none inline-block w-4 text-[10px] ${prefixChar === "+" ? "text-amber-600" : "text-transparent"}`}
+              >
+                {prefixChar}
+              </span>
+            )}
+            <button
+              onClick={() => onCopy(fullPath)}
+              className="text-xs font-mono font-medium text-foreground hover:text-blue-600 transition-colors"
+              title={`Copy path: ${fullPath}`}
+            >
+              {key}
+            </button>
+            <span className="text-muted-foreground text-xs">: </span>
+            {isObject ? (
+              buildJsonTree(val, fullPath, onCopy, undefined, depth + 1)
+            ) : (
+              <span className="text-xs font-mono text-foreground">
+                {JSON.stringify(val)}
+              </span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Schema block display
+// ---------------------------------------------------------------------------
+
+function SchemaBlock({
+  title,
+  schema,
+}: {
+  title: string;
+  schema: Record<string, unknown>;
+}) {
+  if (schema._type === "array" && schema.items) {
+    return (
+      <div className="space-y-1">
+        <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+          {title}
+        </p>
+        <div className="rounded bg-muted/50 p-2 font-mono text-[11px]">
+          <span className="text-muted-foreground">Array of:</span>
+          <div className="pl-2 mt-0.5">
+            {Object.entries(schema.items as Record<string, unknown>).map(
+              ([key, val]) => (
+                <div key={key}>
+                  <span className="text-foreground">{key}</span>
+                  <span className="text-muted-foreground">: {String(val)}</span>
+                </div>
+              ),
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const entries = Object.entries(schema).filter(([k]) => k !== "_type");
+  if (entries.length === 0) return null;
+
+  return (
+    <div className="space-y-1">
+      <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+        {title}
+      </p>
+      <div className="rounded bg-muted/50 p-2 font-mono text-[11px] space-y-0.5">
+        {entries.map(([key, val]) => (
+          <div key={key}>
+            <span className="text-foreground">{key}</span>
+            <span className="text-muted-foreground">
+              : {typeof val === "object" && val ? "object" : String(val)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// History helpers
+// ---------------------------------------------------------------------------
+
+const HISTORY_KEY = "khotan-debug-history";
+const MAX_HISTORY = 20;
+
+function loadHistory(plugName: string): HistoryEntry[] {
+  try {
+    const raw = sessionStorage.getItem(`${HISTORY_KEY}:${plugName}`);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveHistory(plugName: string, entries: HistoryEntry[]) {
+  try {
+    sessionStorage.setItem(
+      `${HISTORY_KEY}:${plugName}`,
+      JSON.stringify(entries.slice(0, MAX_HISTORY)),
+    );
+  } catch {
+    /* quota exceeded */
+  }
+}
+
+// ===========================================================================
+// Main component
+// ===========================================================================
+
+export function PlugDebugger({
+  plugName,
+  basePath = "/api/khotan",
+}: PlugDebuggerProps) {
+  const [meta, setMeta] = useState<PlugMeta | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const [method, setMethod] = useState<string>("GET");
+  const [path, setPath] = useState("");
+  const [pathParams, setPathParams] = useState<Record<string, string>>({});
+  const [body, setBody] = useState("");
+  const [params, setParams] = useState("");
+  const [headers, setHeaders] = useState("");
+  const [activeTab, setActiveTab] = useState<"body" | "params" | "headers">(
+    "params",
+  );
+
+  const [sending, setSending] = useState(false);
+  const [response, setResponse] = useState<DebugResponse | null>(null);
+  const [responseTab, setResponseTab] = useState<"body" | "headers">("body");
+  const [responseView, setResponseView] = useState<"raw" | "tree">("raw");
+
+  const [history, setHistory] = useState<HistoryEntry[]>([]);
+  const [copiedPath, setCopiedPath] = useState<string | null>(null);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const fetchMeta = useCallback(async () => {
+    try {
+      const res = await fetch(`${basePath}/debug/${plugName}`);
+      if (!res.ok) {
+        setMeta(null);
+        return;
+      }
+      setMeta(await res.json());
+    } catch {
+      setMeta(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [basePath, plugName]);
+
+  useEffect(() => {
+    fetchMeta();
+  }, [fetchMeta]);
+  useEffect(() => {
+    setHistory(loadHistory(plugName));
+  }, [plugName]);
+
+  // Cmd+Enter global shortcut
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        if (path && !sending) fireRequest();
+      }
+    }
+    const el = containerRef.current;
+    el?.addEventListener("keydown", handleKeyDown);
+    return () => el?.removeEventListener("keydown", handleKeyDown);
+  });
+
+  // Detect path params when path changes
+  const detectedParams = extractPathParams(path);
+  const resolvedPath =
+    detectedParams.length > 0 ? interpolatePath(path, pathParams) : path;
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="h-8 w-64 animate-pulse rounded bg-muted" />
+        <div className="h-64 animate-pulse rounded bg-muted" />
+      </div>
+    );
+  }
+
+  if (!meta) {
+    return (
+      <div className="rounded-lg border border-border p-6 text-center">
+        <p className="text-muted-foreground">
+          Debug mode is not available for this plug.
+        </p>
+      </div>
+    );
+  }
+
+  const endpointList: Endpoint[] = meta.endpoints
+    ? Object.entries(meta.endpoints).map(([name, ep]) => ({
+        name,
+        method: ep.method.toUpperCase(),
+        path: ep.path,
+        description: ep.description,
+        body: ep.body,
+        query: ep.query,
+        responses: ep.responses,
+      }))
+    : [];
+
+  const selectedEndpoint = endpointList.find(
+    (ep) => ep.method === method && ep.path === path,
+  );
+
+  function selectEndpoint(ep: Endpoint) {
+    setMethod(ep.method);
+    setPath(ep.path);
+    setPathParams({});
+    setResponse(null);
+  }
+
+  function loadFromHistory(entry: HistoryEntry) {
+    setMethod(entry.method);
+    setPath(entry.path);
+    setBody(entry.body ?? "");
+    setParams(entry.params ?? "");
+    setHeaders(entry.headers ?? "");
+    setPathParams({});
+    setResponse(null);
+  }
+
+  async function fireRequest() {
+    const finalPath = resolvedPath || path;
+    if (!finalPath) return;
+    setSending(true);
+    setResponse(null);
+    try {
+      const payload: Record<string, unknown> = { method, path: finalPath };
+
+      if (body.trim()) {
+        try {
+          payload.body = JSON.parse(body);
+        } catch {
+          payload.body = body;
+        }
+      }
+      if (params.trim()) {
+        try {
+          payload.params = JSON.parse(params);
+        } catch {
+          /* skip */
+        }
+      }
+      if (headers.trim()) {
+        try {
+          payload.headers = JSON.parse(headers);
+        } catch {
+          /* skip */
+        }
+      }
+
+      const res = await fetch(`${basePath}/debug/${plugName}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      const data: DebugResponse = await res.json();
+      setResponse(data);
+
+      const entry: HistoryEntry = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+        method,
+        path: finalPath,
+        status: data.status,
+        timing: data.timing,
+        timestamp: Date.now(),
+        body: body || undefined,
+        params: params || undefined,
+        headers: headers || undefined,
+      };
+      const updated = [entry, ...history].slice(0, MAX_HISTORY);
+      setHistory(updated);
+      saveHistory(plugName, updated);
+    } catch (err) {
+      setResponse({
+        status: 0,
+        statusText: "Network Error",
+        headers: {},
+        body: null,
+        timing: 0,
+        error: err instanceof Error ? err.message : "Unknown error",
+      });
+    } finally {
+      setSending(false);
+    }
+  }
+
+  function handleBodyBlur() {
+    if (!body.trim()) return;
+    try {
+      const parsed = JSON.parse(body);
+      const formatted = JSON.stringify(parsed, null, 2);
+      if (formatted !== body) setBody(formatted);
+    } catch {
+      /* not valid JSON, leave as-is */
+    }
+  }
+
+  function copyJsonPath(jsonPath: string) {
+    navigator.clipboard.writeText(jsonPath);
+    setCopiedPath(jsonPath);
+    setTimeout(() => setCopiedPath(null), 1500);
+  }
+
+  const statusColor = response ? getStatusColor(response.status) : "";
+
+  // Compute response size
+  const responseRaw =
+    response?.body != null
+      ? typeof response.body === "string"
+        ? response.body
+        : JSON.stringify(response.body)
+      : "";
+  const responseSizeKB = responseRaw
+    ? (new Blob([responseRaw]).size / 1024).toFixed(1)
+    : "0";
+
+  // Schema diff computation
+  const schemaDiff = (() => {
+    if (
+      !selectedEndpoint?.responses ||
+      !response?.body ||
+      typeof response.body !== "object"
+    )
+      return null;
+    const schemaForStatus = selectedEndpoint.responses[String(response.status)];
+    if (!schemaForStatus) return null;
+    const expectedKeys = new Set(
+      Object.keys(schemaForStatus).filter((k) => k !== "_type"),
+    );
+    const actualKeys = new Set(
+      Object.keys(response.body as Record<string, unknown>),
+    );
+    const matched = [...expectedKeys].filter((k) => actualKeys.has(k));
+    const unexpected = [...actualKeys].filter((k) => !expectedKeys.has(k));
+    const missing = [...expectedKeys].filter((k) => !actualKeys.has(k));
+    return { matched, unexpected, missing, expectedKeys };
+  })();
+
+  return (
+    <div ref={containerRef} className="flex gap-6" tabIndex={-1}>
+      {/* Sidebar */}
+      <div className="w-56 shrink-0 space-y-4">
+        {/* Plug info */}
+        <div className="rounded-lg border border-border p-3 space-y-2">
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {meta.name}
+          </p>
+          <p
+            className="text-xs text-muted-foreground truncate"
+            title={meta.baseUrl}
+          >
+            {meta.baseUrl}
+          </p>
+          <div className="flex items-center gap-2 flex-wrap">
+            {meta.authType && meta.authType !== "none" && (
+              <Badge variant="outline" className="text-[10px]">
+                {meta.authType}
+              </Badge>
+            )}
+            <Badge
+              variant={meta.vars.configured ? "default" : "secondary"}
+              className="text-[10px]"
+            >
+              {meta.vars.configured ? "Vars ✓" : "No vars"}
+            </Badge>
+          </div>
+          {meta.vars.fields.length > 0 && (
+            <div className="pt-1 space-y-1">
+              {meta.vars.fields.map((f) => {
+                const value = meta.vars.values?.[f.key];
+                return (
+                  <div key={f.key} className="text-[10px]">
+                    <span className="text-muted-foreground">
+                      {f.label || f.key}
+                    </span>
+                    {value && (
+                      <span className="ml-1.5 font-mono text-foreground">
+                        {f.secret ? "••••••••" : value}
+                      </span>
+                    )}
+                    {!value && (
+                      <span className="ml-1.5 text-muted-foreground/50 italic">
+                        not set
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* New request */}
+        <div className="space-y-1">
+          <button
+            onClick={() => {
+              setMethod("GET");
+              setPath("");
+              setBody("");
+              setParams("");
+              setHeaders("");
+              setPathParams({});
+              setResponse(null);
+            }}
+            className={`w-full text-left rounded-md px-2 py-1.5 text-xs font-medium transition-colors hover:bg-muted ${
+              !selectedEndpoint && !path ? "bg-muted" : ""
+            }`}
+          >
+            + New Request
+          </button>
+        </div>
+
+        {/* Endpoints */}
+        {endpointList.length > 0 && (
+          <div className="space-y-1">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1">
+              Endpoints
+            </p>
+            {endpointList.map((ep) => (
+              <button
+                key={ep.name}
+                onClick={() => selectEndpoint(ep)}
+                className={`w-full text-left rounded-md px-2 py-1.5 text-xs transition-colors hover:bg-muted ${
+                  method === ep.method && path === ep.path
+                    ? "bg-muted font-medium"
+                    : ""
+                }`}
+              >
+                <span
+                  className={`inline-block w-12 font-mono text-[10px] font-semibold ${METHOD_COLORS[ep.method]?.split(" ")[1] ?? ""}`}
+                >
+                  {ep.method}
+                </span>
+                <span className="text-muted-foreground ml-1">{ep.path}</span>
+                <span className="block text-[10px] text-muted-foreground/60 pl-[52px]">
+                  {ep.name}
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+
+        {endpointList.length === 0 && (
+          <div className="rounded-lg border border-dashed border-border p-3 text-center">
+            <p className="text-[10px] text-muted-foreground">
+              No typed endpoints registered. Add{" "}
+              <code className="bg-muted px-1 rounded">endpoints</code> to your
+              plug config to see them here.
+            </p>
+          </div>
+        )}
+
+        {/* History */}
+        {history.length > 0 && (
+          <div className="space-y-1">
+            <div className="flex items-center justify-between px-1">
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                History
+              </p>
+              <button
+                onClick={() => {
+                  setHistory([]);
+                  saveHistory(plugName, []);
+                }}
+                className="text-[10px] text-muted-foreground hover:text-foreground"
+              >
+                Clear
+              </button>
+            </div>
+            {history.slice(0, 8).map((entry) => (
+              <button
+                key={entry.id}
+                onClick={() => loadFromHistory(entry)}
+                className="w-full text-left rounded-md px-2 py-1 text-[10px] transition-colors hover:bg-muted"
+              >
+                <span
+                  className={`inline-block w-10 font-mono font-semibold ${METHOD_COLORS[entry.method]?.split(" ")[1] ?? ""}`}
+                >
+                  {entry.method}
+                </span>
+                <span className="text-muted-foreground ml-1 truncate">
+                  {entry.path}
+                </span>
+                <span className="float-right">
+                  <span className={`font-mono ${getStatusColor(entry.status)}`}>
+                    {entry.status}
+                  </span>
+                  <span className="text-muted-foreground/50 ml-1">
+                    {entry.timing}ms
+                  </span>
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Main pane */}
+      <div className="flex-1 min-w-0 space-y-4">
+        {/* URL bar */}
+        <div className="flex gap-2">
+          <select
+            className={`w-24 rounded-md border px-2 py-2 text-xs font-mono font-semibold ${METHOD_COLORS[method] ?? ""}`}
+            value={method}
+            onChange={(e) => setMethod(e.target.value)}
+          >
+            {METHODS.map((m) => (
+              <option key={m} value={m}>
+                {m}
+              </option>
+            ))}
+          </select>
+          <div className="flex-1 relative">
+            <Input
+              className="font-mono text-sm pr-20"
+              placeholder="/products"
+              value={path}
+              onChange={(e) => setPath(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && path) fireRequest();
+              }}
+            />
+            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground pointer-events-none">
+              ⌘↵
+            </span>
+          </div>
+          <Button
+            onClick={fireRequest}
+            disabled={sending || !path}
+            size="sm"
+            className="px-4"
+          >
+            {sending ? "..." : "Send"}
+          </Button>
+        </div>
+
+        {/* Path params interpolation */}
+        {detectedParams.length > 0 && (
+          <div className="flex items-center gap-3 flex-wrap">
+            {detectedParams.map((param) => (
+              <div key={param} className="flex items-center gap-1.5">
+                <Label className="text-[10px] text-muted-foreground font-mono">
+                  :{param}
+                </Label>
+                <Input
+                  className="w-32 h-7 text-xs font-mono"
+                  placeholder={param}
+                  value={pathParams[param] ?? ""}
+                  onChange={(e) =>
+                    setPathParams((prev) => ({
+                      ...prev,
+                      [param]: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+            ))}
+            {Object.values(pathParams).some(Boolean) && (
+              <span className="text-[10px] text-muted-foreground font-mono">
+                → {resolvedPath}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Request tabs */}
+        <div className="rounded-lg border border-border">
+          <div className="flex border-b border-border">
+            {(["params", "body", "headers"] as const).map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                className={`px-4 py-2 text-xs font-medium transition-colors ${
+                  activeTab === tab
+                    ? "border-b-2 border-foreground text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {tab === "body"
+                  ? "Body"
+                  : tab === "params"
+                    ? "Params"
+                    : "Headers"}
+              </button>
+            ))}
+          </div>
+          <div className="p-3">
+            {activeTab === "params" && (
+              <div className="space-y-1">
+                <Label className="text-[10px] text-muted-foreground">
+                  Query parameters as JSON
+                </Label>
+                <Input
+                  className="font-mono text-xs"
+                  placeholder='{ "limit": "10", "page": "1" }'
+                  value={params}
+                  onChange={(e) => setParams(e.target.value)}
+                />
+              </div>
+            )}
+            {activeTab === "body" && (
+              <div className="space-y-1">
+                <Label className="text-[10px] text-muted-foreground">
+                  Request body (JSON) — auto-formats on blur
+                </Label>
+                <textarea
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-xs min-h-[120px] resize-y"
+                  placeholder='{ "key": "value" }'
+                  value={body}
+                  onChange={(e) => setBody(e.target.value)}
+                  onBlur={handleBodyBlur}
+                />
+              </div>
+            )}
+            {activeTab === "headers" && (
+              <div className="space-y-1">
+                <Label className="text-[10px] text-muted-foreground">
+                  Extra headers as JSON (auth headers are added automatically)
+                </Label>
+                <Input
+                  className="font-mono text-xs"
+                  placeholder='{ "X-Custom-Header": "value" }'
+                  value={headers}
+                  onChange={(e) => setHeaders(e.target.value)}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Schema info for selected endpoint */}
+        {selectedEndpoint &&
+          (selectedEndpoint.body ||
+            selectedEndpoint.query ||
+            selectedEndpoint.responses) && (
+            <div className="rounded-lg border border-border">
+              <div className="px-4 py-2 border-b border-border">
+                <p className="text-xs font-medium">
+                  {selectedEndpoint.description || selectedEndpoint.name}
+                </p>
+              </div>
+              <div className="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
+                {selectedEndpoint.body && (
+                  <SchemaBlock
+                    title="Request Body"
+                    schema={selectedEndpoint.body}
+                  />
+                )}
+                {selectedEndpoint.query && (
+                  <SchemaBlock
+                    title="Query Params"
+                    schema={selectedEndpoint.query}
+                  />
+                )}
+                {selectedEndpoint.responses &&
+                  Object.entries(selectedEndpoint.responses).map(
+                    ([code, schema]) =>
+                      schema ? (
+                        <SchemaBlock
+                          key={code}
+                          title={`Response ${code}`}
+                          schema={schema}
+                        />
+                      ) : null,
+                  )}
+              </div>
+            </div>
+          )}
+
+        {/* Response */}
+        {response && (
+          <div className="rounded-lg border border-border">
+            <div className="flex items-center justify-between border-b border-border px-4 py-2">
+              <div className="flex items-center gap-3">
+                <span className={`font-mono text-sm font-bold ${statusColor}`}>
+                  {response.status}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {response.statusText}
+                </span>
+                {response.endpoint && (
+                  <Badge variant="outline" className="text-[10px]">
+                    {response.endpoint.name}
+                  </Badge>
+                )}
+              </div>
+              <div className="flex items-center gap-2 text-xs font-mono text-muted-foreground">
+                <span>{response.timing}ms</span>
+                <span className="text-muted-foreground/40">·</span>
+                <span>{responseSizeKB} KB</span>
+              </div>
+            </div>
+
+            {response.error && (
+              <div className="px-4 py-2 border-b border-border bg-red-500/5">
+                <p className="text-xs text-red-600">{response.error}</p>
+              </div>
+            )}
+
+            {/* Schema diff summary */}
+            {schemaDiff &&
+              (schemaDiff.unexpected.length > 0 ||
+                schemaDiff.missing.length > 0) && (
+                <div className="px-4 py-2 border-b border-border bg-muted/30">
+                  <div className="flex flex-wrap gap-2 text-[10px]">
+                    {schemaDiff.matched.length > 0 && (
+                      <span className="text-emerald-600">
+                        ✓ {schemaDiff.matched.length} matched
+                      </span>
+                    )}
+                    {schemaDiff.unexpected.length > 0 && (
+                      <span className="text-amber-600">
+                        + {schemaDiff.unexpected.length} undocumented:{" "}
+                        <span className="font-mono">
+                          {schemaDiff.unexpected.join(", ")}
+                        </span>
+                      </span>
+                    )}
+                    {schemaDiff.missing.length > 0 && (
+                      <span className="text-red-600">
+                        − {schemaDiff.missing.length} missing:{" "}
+                        <span className="font-mono">
+                          {schemaDiff.missing.join(", ")}
+                        </span>
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )}
+
+            <div className="flex items-center border-b border-border">
+              <div className="flex flex-1">
+                {(["body", "headers"] as const).map((tab) => (
+                  <button
+                    key={tab}
+                    onClick={() => setResponseTab(tab)}
+                    className={`px-4 py-1.5 text-xs font-medium transition-colors ${
+                      responseTab === tab
+                        ? "border-b-2 border-foreground text-foreground"
+                        : "text-muted-foreground hover:text-foreground"
+                    }`}
+                  >
+                    {tab === "body"
+                      ? "Body"
+                      : `Headers (${Object.keys(response.headers).length})`}
+                  </button>
+                ))}
+                {responseTab === "body" && (
+                  <div className="flex items-center gap-1 ml-2">
+                    <button
+                      onClick={() => setResponseView("raw")}
+                      className={`px-2 py-0.5 text-[10px] rounded transition-colors ${responseView === "raw" ? "bg-muted text-foreground" : "text-muted-foreground"}`}
+                    >
+                      Raw
+                    </button>
+                    <button
+                      onClick={() => setResponseView("tree")}
+                      className={`px-2 py-0.5 text-[10px] rounded transition-colors ${responseView === "tree" ? "bg-muted text-foreground" : "text-muted-foreground"}`}
+                    >
+                      Tree
+                    </button>
+                  </div>
+                )}
+              </div>
+              <div className="flex items-center gap-1">
+                {copiedPath && (
+                  <span className="text-[10px] text-emerald-600 mr-1">
+                    {copiedPath}
+                  </span>
+                )}
+                {responseTab === "body" && (
+                  <button
+                    onClick={() => {
+                      const text =
+                        typeof response.body === "string"
+                          ? response.body
+                          : JSON.stringify(response.body, null, 2);
+                      navigator.clipboard.writeText(text);
+                    }}
+                    className="px-3 py-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+                    title="Copy response body"
+                  >
+                    Copy
+                  </button>
+                )}
+              </div>
+            </div>
+
+            <div className="p-4 max-h-[480px] overflow-auto">
+              {responseTab === "body" &&
+                responseView === "raw" &&
+                (() => {
+                  const raw =
+                    typeof response.body === "string"
+                      ? response.body
+                      : JSON.stringify(response.body, null, 2);
+                  const MAX_DISPLAY = 50_000;
+                  const truncated = raw.length > MAX_DISPLAY;
+                  const displayRaw = truncated
+                    ? raw.slice(0, MAX_DISPLAY)
+                    : raw;
+
+                  if (
+                    !schemaDiff ||
+                    typeof response.body !== "object" ||
+                    response.body === null
+                  ) {
+                    return (
+                      <>
+                        <pre className="text-xs font-mono whitespace-pre-wrap break-words">
+                          {displayRaw}
+                        </pre>
+                        {truncated && (
+                          <div className="mt-3 rounded bg-muted/50 px-3 py-2 text-center">
+                            <p className="text-[10px] text-muted-foreground">
+                              Response truncated (
+                              {(raw.length / 1024).toFixed(0)} KB total). Copy
+                              to see full output.
+                            </p>
+                          </div>
+                        )}
+                      </>
+                    );
+                  }
+
+                  const lines = displayRaw.split("\n");
+                  const topLevelKeys = new Set([
+                    ...schemaDiff.matched,
+                    ...schemaDiff.unexpected,
+                  ]);
+                  const keyLineMap = new Map<
+                    string,
+                    "matched" | "unexpected"
+                  >();
+                  for (const k of schemaDiff.matched)
+                    keyLineMap.set(k, "matched");
+                  for (const k of schemaDiff.unexpected)
+                    keyLineMap.set(k, "unexpected");
+
+                  const missingLines = schemaDiff.missing.map((key) => ({
+                    key,
+                    line: `  "${key}": ...`,
+                  }));
+
+                  return (
+                    <>
+                      <div className="text-xs font-mono whitespace-pre-wrap break-words">
+                        {lines.map((line, i) => {
+                          const isOpeningBrace = line.trim() === "{";
+
+                          const keyMatch = line.match(/^\s+"([^"]+)":/);
+                          let bg = "";
+                          let prefix = " ";
+                          if (keyMatch && topLevelKeys.has(keyMatch[1])) {
+                            const status = keyLineMap.get(keyMatch[1]);
+                            if (status === "matched") {
+                              bg = "bg-emerald-500/10";
+                            } else if (status === "unexpected") {
+                              bg = "bg-amber-500/10";
+                              prefix = "+";
+                            }
+                          }
+
+                          return (
+                            <React.Fragment key={i}>
+                              <div className={`px-1 -mx-1 rounded-sm ${bg}`}>
+                                <span
+                                  className={`select-none inline-block w-4 text-[10px] ${prefix === "+" ? "text-amber-600" : "text-transparent"}`}
+                                >
+                                  {prefix}
+                                </span>
+                                {line}
+                              </div>
+                              {isOpeningBrace &&
+                                missingLines.length > 0 &&
+                                missingLines.map((m) => (
+                                  <div
+                                    key={m.key}
+                                    className="px-1 -mx-1 rounded-sm bg-red-500/10"
+                                  >
+                                    <span className="select-none inline-block w-4 text-[10px] text-red-500">
+                                      −
+                                    </span>
+                                    <span className="text-red-400 line-through">
+                                      {m.line}
+                                    </span>
+                                  </div>
+                                ))}
+                            </React.Fragment>
+                          );
+                        })}
+                      </div>
+                      {truncated && (
+                        <div className="mt-3 rounded bg-muted/50 px-3 py-2 text-center">
+                          <p className="text-[10px] text-muted-foreground">
+                            Response truncated ({(raw.length / 1024).toFixed(0)}{" "}
+                            KB total). Copy to see full output.
+                          </p>
+                        </div>
+                      )}
+                    </>
+                  );
+                })()}
+              {responseTab === "body" && responseView === "tree" && (
+                <div className="text-xs">
+                  {buildJsonTree(
+                    response.body,
+                    "",
+                    copyJsonPath,
+                    schemaDiff
+                      ? {
+                          matched: new Set(schemaDiff.matched),
+                          unexpected: new Set(schemaDiff.unexpected),
+                          missing: schemaDiff.missing,
+                        }
+                      : undefined,
+                  )}
+                </div>
+              )}
+              {responseTab === "headers" && (
+                <div className="space-y-1">
+                  {Object.entries(response.headers).map(([key, value]) => (
+                    <div key={key} className="flex gap-2 text-xs">
+                      <span className="font-mono font-medium text-foreground">
+                        {key}:
+                      </span>
+                      <span className="text-muted-foreground break-all">
+                        {value}
+                      </span>
+                    </div>
+                  ))}
+                  {Object.keys(response.headers).length === 0 && (
+                    <p className="text-xs text-muted-foreground">
+                      No headers returned.
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {!response && !sending && (
+          <div className="rounded-lg border border-dashed border-border p-12 text-center">
+            <p className="text-sm text-muted-foreground">
+              {endpointList.length > 0
+                ? "Select an endpoint or enter a path and hit Send."
+                : "Enter a path and hit Send to fire a request through this plug."}
+            </p>
+            <p className="text-xs text-muted-foreground mt-2">
+              Requests flow through the real plug code path — auth, retry, and
+              hooks all apply.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}