JSON Tool & Schema Inspector

1"use client";
2
3import * as React from "react";
4
5interface JsonToolSchemaProps {
6  variant?: string;
7}
8
9export default function JsonToolSchema({ variant = "Visualizer" }: JsonToolSchemaProps) {
10  const [selectedTool, setSelectedTool] = React.useState<"execute_sql" | "create_sandbox">("execute_sql");
11
12  const toolSchemas = {
13    execute_sql: {
14      name: "execute_sql",
15      description: "Executes verified read/write query against PostgreSQL cluster.",
16      strict: true,
17      parameters: [
18        { name: "query", type: "string", required: true, desc: "Parameterized SQL statement" },
19        { name: "timeout_ms", type: "number", required: false, desc: "Max query runtime limit (default: 5000)" },
20        { name: "transaction_mode", type: "enum<'READ_COMMITTED' | 'SERIALIZABLE'>", required: false, desc: "Isolation level" },
21      ],
22      sampleCall: {
23        query: "SELECT org_id, count(*) FROM billing_records GROUP BY org_id HAVING count(*) > 100;",
24        timeout_ms: 3000,
25        transaction_mode: "READ_COMMITTED",
26      },
27    },
28    create_sandbox: {
29      name: "create_sandbox",
30      description: "Spawns ephemeral Docker microVM container for untrusted code execution.",
31      strict: true,
32      parameters: [
33        { name: "runtime", type: "enum<'node20' | 'python312' | 'rust180'>", required: true, desc: "Container base image" },
34        { name: "memory_mb", type: "number", required: true, desc: "RAM limit in MB (max: 4096)" },
35        { name: "network_access", type: "boolean", required: false, desc: "Allow outbound HTTPS egress" },
36      ],
37      sampleCall: {
38        runtime: "node20",
39        memory_mb: 2048,
40        network_access: false,
41      },
42    },
43  };
44
45  const current = toolSchemas[selectedTool];
46
47  return (
48    <div className="w-full max-w-120 overflow-hidden rounded-card bg-surface shadow-card border border-line">
49      {/* Header */}
50      <div className="primitive-card-bar flex flex-wrap items-center justify-between gap-2 border-b border-line bg-surface/90 px-4 py-3">
51        <div className="flex items-center gap-2">
52          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
53            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
54          </svg>
55          <span className="font-display font-semibold text-[14px] text-ink">
56            JSON Tool & Schema Inspector
57          </span>
58        </div>
59
60        <div className="flex items-center gap-1 font-mono text-[10.5px]">
61          {(["execute_sql", "create_sandbox"] as const).map((t) => (
62            <button
63              key={t}
64              onClick={() => setSelectedTool(t)}
65              className={`rounded-chip px-2.5 py-0.5 transition-colors border ${
66                selectedTool === t
67                  ? "bg-accent text-accent-ink font-bold border-accent"
68                  : "bg-field text-ink-3 hover:text-ink border-line"
69              }`}
70            >
71              {t}
72            </button>
73          ))}
74        </div>
75      </div>
76
77      {/* Tool Spec Body */}
78      <div className="p-4 space-y-3 font-mono text-[11.5px]">
79        <div>
80          <div className="flex items-center justify-between">
81            <span className="font-bold text-ink text-[13px] text-accent">{current.name}()</span>
82            <span className="rounded-full bg-green/10 text-green px-2 py-0.2 text-[10px]">
83              Strict Mode: ON
84            </span>
85          </div>
86          <p className="text-ink-3 text-[11px] font-body mt-0.5">{current.description}</p>
87        </div>
88
89        {/* Parameters Grid */}
90        <div className="space-y-1.5 border-t border-line/60 pt-2.5">
91          <span className="text-ink-3 text-[10px] uppercase font-bold">Parameters</span>
92          <div className="space-y-1.5">
93            {current.parameters.map((p) => (
94              <div key={p.name} className="rounded-control bg-inset/70 p-2 border border-line/40 flex items-start justify-between gap-2">
95                <div>
96                  <div className="flex items-center gap-1.5">
97                    <span className="font-bold text-ink">{p.name}</span>
98                    <span className="text-amber-400 text-[10.5px]">{p.type}</span>
99                    {p.required && (
100                      <span className="text-red text-[9.5px] font-bold">REQUIRED</span>
101                    )}
102                  </div>
103                  <p className="text-ink-3 text-[10.5px] font-body mt-0.5">{p.desc}</p>
104                </div>
105              </div>
106            ))}
107          </div>
108        </div>
109
110        {/* Live Payload Preview */}
111        <div className="space-y-1.5 border-t border-line/60 pt-2.5">
112          <span className="text-ink-3 text-[10px] uppercase font-bold">Validated Invocation Payload</span>
113          <pre className="rounded-control bg-field p-2.5 text-emerald-400 text-[11px] overflow-x-auto border border-line/40">
114            {JSON.stringify(current.sampleCall, null, 2)}
115          </pre>
116        </div>
117      </div>
118    </div>
119  );
120}
121