@kyro-cms/admin 0.3.1 → 0.3.4

package/src/components/GraphQLPlayground.tsx

@@ -6,11 +6,29 @@ import React, {
   Suspense,
   lazy,
 } from "react";
+import {
+  Book,
+  Send,
+  Trash2,
+  Copy,
+  RefreshCw,
+  Settings,
+  Maximize2,
+  ChevronRight,
+  ChevronDown,
+  Search,
+  Type,
+  Activity,
+  Zap,
+  Info,
+  X
+} from "./ui/icons";
 
 interface GraphQLPlaygroundProps {
   endpoint?: string;
   initialQuery?: string;
   initialVariables?: string;
+  initialShowDocs?: boolean;
 }
 
 interface QueryTab {
@@ -35,13 +53,13 @@ const DEFAULT_QUERY = `# Welcome to Kyro CMS GraphQL Playground
 
 # 1. Introspection - Discover the schema
 {
-  _schema {
+  __schema {
     types {
       name
+      kind
       fields {
         name
-        type
-        required
+        type { name kind }
       }
     }
   }
@@ -52,7 +70,6 @@ const DEFAULT_QUERY = `# Welcome to Kyro CMS GraphQL Playground
   collections {
     slug
     name
-    fields
   }
 }
 
@@ -60,27 +77,47 @@ const DEFAULT_QUERY = `# Welcome to Kyro CMS GraphQL Playground
 {
   ping
 }
+`;
 
-# 4. Query posts (if available)
-{
-  posts(page: 1, limit: 10) {
-    docs {
-      id
-      title
-      slug
-      status
-    }
-    totalDocs
-    totalPages
-    page
-  }
+// --- Docs Types ---
+interface TypeInfo {
+  name: string;
+  kind: string;
+  description?: string;
+  fields?: FieldInfo[];
+  inputFields?: FieldInfo[];
+  enumValues?: { name: string; description?: string; isDeprecated: boolean }[];
+  isDeprecated?: boolean;
+}
+
+interface FieldInfo {
+  name: string;
+  description?: string;
+  type: { name?: string; kind?: string; ofType?: Record<string, unknown> };
+  args: ArgInfo[];
+  isDeprecated?: boolean;
+  deprecationReason?: string;
+}
+
+interface ArgInfo {
+  name: string;
+  description?: string;
+  type: { name?: string; kind?: string; ofType?: Record<string, unknown> };
+  defaultValue?: string;
+}
+
+interface SchemaInfo {
+  queryType: { name: string };
+  mutationType?: { name: string };
+  subscriptionType?: { name: string };
+  types: TypeInfo[];
 }
-`;
 
 export function GraphQLPlayground({
   endpoint = "/api/graphql",
   initialQuery,
   initialVariables,
+  initialShowDocs = false,
 }: GraphQLPlaygroundProps) {
   const [token, setToken] = useState<string>("");
   const [isConnected, setIsConnected] = useState(false);
@@ -100,91 +137,102 @@ export function GraphQLPlayground({
   const [activeTab, setActiveTab] = useState<"query" | "variables" | "headers">(
     "query",
   );
-  const [isDark, setIsDark] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
+  const [showDocs, setShowDocs] = useState(initialShowDocs);
+  const [schema, setSchema] = useState<SchemaInfo | null>(null);
+  const [loadingSchema, setLoadingSchema] = useState(false);
+  const [selectedType, setSelectedType] = useState<TypeInfo | null>(null);
 
   useEffect(() => {
     setIsMounted(true);
-    setIsDark(document.documentElement.classList.contains("dark"));
-
-    const storedToken = localStorage.getItem("graphql_auth_token");
-    if (storedToken) {
-      setToken(storedToken);
-      setIsConnected(true);
-    }
-
-    const observer = new MutationObserver(() => {
-      setIsDark(document.documentElement.classList.contains("dark"));
-    });
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-
-    return () => observer.disconnect();
   }, []);
 
-  const currentTab = tabs.find((t) => t.id === currentTabId) || tabs[0];
+  const currentTab = useMemo(
+    () => tabs.find((t) => t.id === currentTabId) || tabs[0],
+    [tabs, currentTabId],
+  );
 
-  const handleTokenSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      if (token.trim()) {
-        localStorage.setItem("graphql_auth_token", token.trim());
+  const fetchSchema = useCallback(async () => {
+    setLoadingSchema(true);
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          query: `
+            {
+              __schema {
+                queryType { name }
+                mutationType { name }
+                subscriptionType { name }
+                types {
+                  name
+                  kind
+                  description
+                  fields {
+                    name
+                    description
+                    type { name kind ofType { name kind ofType { name kind } } }
+                    args {
+                      name
+                      description
+                      type { name kind ofType { name kind } }
+                      defaultValue
+                    }
+                    isDeprecated
+                    deprecationReason
+                  }
+                  inputFields {
+                    name
+                    description
+                    type { name kind ofType { name kind } }
+                    defaultValue
+                  }
+                  enumValues {
+                    name
+                    description
+                    isDeprecated
+                  }
+                }
+              }
+            }
+          `,
+        }),
+      });
+      const data = await response.json();
+      if (data.data && data.data.__schema) {
+        setSchema(data.data.__schema);
         setIsConnected(true);
-        setTabs((prev) =>
-          prev.map((tab) => ({
-            ...tab,
-            headers: JSON.stringify(
-              { Authorization: `Bearer ${token.trim()}` },
-              null,
-              2,
-            ),
-          })),
-        );
       }
-    },
-    [token],
-  );
-
-  const clearToken = useCallback(() => {
-    localStorage.removeItem("graphql_auth_token");
-    setToken("");
-    setIsConnected(false);
-  }, []);
+    } catch (err) {
+      console.error("Failed to fetch schema", err);
+    } finally {
+      setLoadingSchema(false);
+    }
+  }, [endpoint]);
 
-  const executeQuery = useCallback(async () => {
-    if (!currentTab.query.trim()) {
-      setError("Please enter a query");
-      return;
+  useEffect(() => {
+    if (showDocs && !schema) {
+      fetchSchema();
     }
+  }, [showDocs, schema, fetchSchema]);
 
+  const handleRun = async () => {
     setIsLoading(true);
     setError(null);
-
     try {
-      let variables: Record<string, any> | undefined;
-      if (currentTab.variables.trim()) {
-        try {
-          variables = JSON.parse(currentTab.variables);
-        } catch {
-          setError("Invalid JSON in variables");
-          setIsLoading(false);
-          return;
-        }
-      }
-
-      let headers: Record<string, string> = {
+      const headers: Record<string, string> = {
         "Content-Type": "application/json",
       };
-      if (currentTab.headers.trim()) {
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+
+      // Add custom headers from tab
+      if (currentTab.headers) {
         try {
-          headers = { ...headers, ...JSON.parse(currentTab.headers) };
-        } catch {
-          setError("Invalid JSON in headers");
-          setIsLoading(false);
-          return;
+          const customHeaders = JSON.parse(currentTab.headers);
+          Object.assign(headers, customHeaders);
+        } catch (e) {
+          console.warn("Invalid custom headers JSON");
         }
       }
 
@@ -193,433 +241,245 @@ export function GraphQLPlayground({
         headers,
         body: JSON.stringify({
           query: currentTab.query,
-          variables,
+          variables: currentTab.variables ? JSON.parse(currentTab.variables) : {},
         }),
       });
 
       const data = await res.json();
       setResponse(JSON.stringify(data, null, 2));
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Request failed");
+      if (data.errors) setError("Query returned errors");
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Request failed";
+      setError(message || "Request failed");
+      setResponse(JSON.stringify({ error: message }, null, 2));
     } finally {
       setIsLoading(false);
     }
-  }, [currentTab, endpoint]);
-
-  const addNewTab = useCallback(() => {
-    const newTab: QueryTab = {
-      id: `tab-${Date.now()}`,
-      name: `Query ${tabs.length + 1}`,
-      query: "# New Query\n{\n  \n}",
-      variables: "{}",
-      headers: token
-        ? JSON.stringify({ Authorization: `Bearer ${token}` }, null, 2)
-        : "",
-    };
-    setTabs((prev) => [...prev, newTab]);
-    setCurrentTabId(newTab.id);
-  }, [tabs.length, token]);
-
-  const closeTab = useCallback(
-    (tabId: string, e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (tabs.length <= 1) return;
-
-      const newTabs = tabs.filter((t) => t.id !== tabId);
-      setTabs(newTabs);
-      if (currentTabId === tabId) {
-        setCurrentTabId(newTabs[0].id);
-      }
-    },
-    [tabs, currentTabId],
-  );
-
-  const updateTab = useCallback(
-    (field: keyof QueryTab, value: string) => {
-      setTabs((prev) =>
-        prev.map((tab) =>
-          tab.id === currentTabId ? { ...tab, [field]: value } : tab,
-        ),
-      );
-    },
-    [currentTabId],
-  );
-
-  // Keyboard shortcut: Ctrl+Enter to run
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-        e.preventDefault();
-        executeQuery();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [executeQuery]);
-
-  const theme = isDark ? aura : githubLight;
-
-  const extensions = useMemo(() => [javascript({ jsx: true })], []);
+  };
+
+  const updateTab = (key: keyof QueryTab, value: string) => {
+    setTabs((prev) =>
+      prev.map((t) => (t.id === currentTabId ? { ...t, [key]: value } : t)),
+    );
+  };
+
+  const extensions = [javascript()];
+  const theme = aura;
+
+  const renderType = (type: Record<string, unknown>): string => {
+    if (!type) return "Unknown";
+    if (type.name) return type.name;
+    if (type.ofType) {
+      if (type.kind === "NON_NULL") return `${renderType(type.ofType)}!`;
+      if (type.kind === "LIST") return `[${renderType(type.ofType)}]`;
+      return renderType(type.ofType);
+    }
+    return "Unknown";
+  };
 
   return (
-    <div className="h-full flex flex-col bg-[var(--kyro-surface)] rounded-lg overflow-hidden border border-[var(--kyro-border)]">
+    <div className="h-full flex flex-col bg-[var(--kyro-bg)] overflow-hidden rounded-lg border border-[var(--kyro-border)]">
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 bg-[var(--kyro-surface-accent)] border-b border-[var(--kyro-border)]">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2">
-            <svg
-              className="w-5 h-5 text-pink-500"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M13 10V3L4 14h7v7l9-11h-7z"
-              />
-            </svg>
-            <span className="font-bold text-sm text-[var(--kyro-text-primary)]">
-              GraphQL
-            </span>
+            <div className="w-8 h-8 rounded-lg bg-pink-500/10 flex items-center justify-center text-pink-500">
+              <Zap className="w-4 h-4" />
+            </div>
+            <span className="font-bold text-sm tracking-tight">GraphQL Playground</span>
           </div>
-          <div className="flex items-center gap-1 px-2 py-1 rounded bg-green-500/10">
-            <div
-              className={`w-2 h-2 rounded-full ${
-                isConnected ? "bg-green-500" : "bg-gray-500"
-              }`}
-            />
-            <span className="text-xs text-[var(--kyro-text-secondary)]">
-              {isConnected ? "Connected" : "Not connected"}
+          <div className="h-4 w-px bg-[var(--kyro-border)]" />
+          <div className="flex items-center gap-1">
+            <div className={`w-2 h-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"} animate-pulse`} />
+            <span className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)]">
+              {isConnected ? "Connected" : "Disconnected"}
             </span>
           </div>
         </div>
-
-        <div className="flex items-center gap-3">
-          {isConnected && (
-            <span className="text-xs text-[var(--kyro-text-muted)] font-mono">
-              {token.slice(0, 12)}...
-            </span>
-          )}
-          <button type="button"
-            onClick={clearToken}
-            className="text-xs text-pink-500 hover:text-pink-600 font-medium"
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowDocs(!showDocs)}
+            className={`kyro-btn kyro-btn-md flex items-center gap-2 ${showDocs
+              ? "bg-pink-500 text-white border-pink-500 hover:bg-pink-600 hover:border-pink-600 shadow-[0_0_15px_rgba(236,72,153,0.3)]"
+              : "kyro-btn-ghost"
+              }`}
           >
-            {isConnected ? "Disconnect" : "Connect"}
+            <Book className="w-3.5 h-3.5" />
+            Documentation
+          </button>
+          <button
+            onClick={handleRun}
+            disabled={isLoading}
+            className="kyro-btn kyro-btn-md kyro-btn-primary flex items-center gap-2"
+          >
+            <Send className="w-3.5 h-3.5" />
+            {isLoading ? "Running..." : "Run Query"}
           </button>
         </div>
       </div>
 
-      {/* Token Input (when not connected) */}
-      {!isConnected && (
-        <div className="p-6 border-b border-[var(--kyro-border)]">
-          <form onSubmit={handleTokenSubmit} className="flex gap-3">
-            <input
-              type="text"
-              value={token}
-              onChange={(e) => setToken(e.target.value)}
-              placeholder="Enter auth token (Bearer ...)"
-              className="flex-1 px-4 py-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg text-sm font-mono focus:outline-none focus:border-pink-500"
-            />
-            <button
-              type="submit"
-              disabled={!token.trim()}
-              className="px-6 py-2 bg-pink-500 text-white rounded-lg font-bold text-sm hover:bg-pink-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              Connect
-            </button>
-          </form>
-          <p className="text-xs text-[var(--kyro-text-muted)] mt-2">
-            Get your token from the Auth section or login endpoint
-          </p>
-        </div>
-      )}
-
-      {/* Tabs */}
-      <div className="flex items-center gap-1 px-2 py-2 bg-[var(--kyro-surface-accent)] border-b border-[var(--kyro-border)] overflow-x-auto">
-        {tabs.map((tab) => (
-          <div
-            key={tab.id}
-            className={`group flex items-center gap-2 px-3 py-1.5 rounded-t cursor-pointer transition-colors ${
-              currentTabId === tab.id
-                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
-                : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)]"
-            }`}
-            onClick={() => setCurrentTabId(tab.id)}
-          >
-            <span className="text-xs font-medium">{tab.name}</span>
-            {tabs.length > 1 && (
-              <button type="button"
-                onClick={(e) => closeTab(tab.id, e)}
-                className="opacity-0 group-hover:opacity-100 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]"
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left: Editor and Schema */}
+        <div className={`flex flex-col border-r border-[var(--kyro-border)] transition-all duration-300 ${showDocs ? "w-1/2" : "w-1/2"}`}>
+          {/* Tabs for Query/Vars/Headers */}
+          <div className="flex border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+            {(["query", "variables", "headers"] as const).map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                className={`px-4 py-2 text-xs font-bold  tracking-widest transition-all ${activeTab === tab
+                  ? "text-pink-500 border-b-2 border-pink-500"
+                  : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]"
+                  }`}
               >
-                <svg
-                  className="w-3 h-3"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
+                {tab}
               </button>
-            )}
+            ))}
           </div>
-        ))}
-        <button type="button"
-          onClick={addNewTab}
-          className="p-1.5 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded"
-        >
-          <svg
-            className="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M12 4v16m8-8H4"
-            />
-          </svg>
-        </button>
-      </div>
 
-      {/* Editor Area */}
-      <div className="flex-1 flex overflow-hidden">
-        {/* Left: Query Editor */}
-        <div className="flex-1 flex flex-col border-r border-[var(--kyro-border)]">
-          {/* Editor Toolbar */}
-          <div className="flex items-center gap-2 px-3 py-2 bg-[var(--kyro-surface)] border-b border-[var(--kyro-border)]">
-            <button type="button"
-              onClick={() => setActiveTab("query")}
-              className={`px-3 py-1 text-xs font-bold rounded transition-colors ${
-                activeTab === "query"
-                  ? "bg-pink-500 text-white"
-                  : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-              }`}
-            >
-              Query
-            </button>
-            <button type="button"
-              onClick={() => setActiveTab("variables")}
-              className={`px-3 py-1 text-xs font-bold rounded transition-colors ${
-                activeTab === "variables"
-                  ? "bg-pink-500 text-white"
-                  : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-              }`}
-            >
-              Variables
-            </button>
-            <button type="button"
-              onClick={() => setActiveTab("headers")}
-              className={`px-3 py-1 text-xs font-bold rounded transition-colors ${
-                activeTab === "headers"
-                  ? "bg-pink-500 text-white"
-                  : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-              }`}
-            >
-              Headers
-            </button>
-
-            <div className="flex-1" />
-
-            <button type="button"
-              onClick={executeQuery}
-              disabled={isLoading}
-              className="flex items-center gap-2 px-4 py-1.5 bg-pink-500 text-white rounded font-bold text-xs hover:bg-pink-600 transition-colors disabled:opacity-50"
-            >
-              {isLoading ? (
-                <svg
-                  className="w-4 h-4 animate-spin"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
-                  <circle
-                    className="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    strokeWidth="4"
-                  />
-                  <path
-                    className="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  />
-                </svg>
-              ) : (
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
+          <div className="flex-1 overflow-hidden relative bg-[var(--kyro-bg)]">
+            <Suspense fallback={<div className="p-4 text-xs">Loading editor...</div>}>
+              {isMounted && (
+                <CodeMirrorEditor
+                  value={activeTab === "query" ? currentTab.query : activeTab === "variables" ? currentTab.variables : currentTab.headers}
+                  height="100%"
+                  extensions={extensions}
+                  theme={theme}
+                  onChange={(val) => updateTab(activeTab, val)}
+                  basicSetup={true}
+                  style={{
+                    height: "100%",
+                    fontSize: "13px",
+                    fontFamily: "'Fira Code', monospace",
+                  }}
+                />
               )}
-              Run
-              <kbd className="ml-1 px-1 py-0.5 bg-white/20 rounded text-[10px]">
-                ⌘↵
-              </kbd>
-            </button>
-          </div>
-
-          {/* Editor Content */}
-          <div className="flex-1 overflow-auto">
-            {activeTab === "query" && (
-              <Suspense
-                fallback={
-                  <textarea
-                    value={currentTab.query}
-                    onChange={(e) => updateTab("query", e.target.value)}
-                    className="w-full h-full min-h-[300px] p-4 bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] font-mono text-sm resize-none focus:outline-none"
-                    placeholder="Enter your GraphQL query..."
-                    spellCheck={false}
-                  />
-                }
-              >
-                {isMounted && (
-                  <CodeMirrorEditor
-                    value={currentTab.query}
-                    height="100%"
-                    extensions={extensions}
-                    theme={theme}
-                    onChange={(value) => updateTab("query", value)}
-                    basicSetup={true}
-                    style={{
-                      height: "100%",
-                      minHeight: "300px",
-                      fontSize: "13px",
-                      fontFamily: "'Fira Code', 'JetBrains Mono', monospace",
-                    }}
-                  />
-                )}
-              </Suspense>
-            )}
-            {activeTab === "variables" && (
-              <Suspense
-                fallback={
-                  <textarea
-                    value={currentTab.variables}
-                    onChange={(e) => updateTab("variables", e.target.value)}
-                    className="w-full h-full min-h-[300px] p-4 bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] font-mono text-sm resize-none focus:outline-none"
-                    placeholder='{ "key": "value" }'
-                    spellCheck={false}
-                  />
-                }
-              >
-                {isMounted && (
-                  <CodeMirrorEditor
-                    value={currentTab.variables}
-                    height="100%"
-                    extensions={extensions}
-                    theme={theme}
-                    onChange={(value) => updateTab("variables", value)}
-                    basicSetup={true}
-                    style={{
-                      height: "100%",
-                      minHeight: "300px",
-                      fontSize: "13px",
-                      fontFamily: "'Fira Code', 'JetBrains Mono', monospace",
-                    }}
-                  />
-                )}
-              </Suspense>
-            )}
-            {activeTab === "headers" && (
-              <Suspense
-                fallback={
-                  <textarea
-                    value={currentTab.headers}
-                    onChange={(e) => updateTab("headers", e.target.value)}
-                    className="w-full h-full min-h-[300px] p-4 bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] font-mono text-sm resize-none focus:outline-none"
-                    placeholder='{ "Authorization": "Bearer your-token" }'
-                    spellCheck={false}
-                  />
-                }
-              >
-                {isMounted && (
-                  <CodeMirrorEditor
-                    value={currentTab.headers}
-                    height="100%"
-                    extensions={extensions}
-                    theme={theme}
-                    onChange={(value) => updateTab("headers", value)}
-                    basicSetup={true}
-                    style={{
-                      height: "100%",
-                      minHeight: "300px",
-                      fontSize: "13px",
-                      fontFamily: "'Fira Code', 'JetBrains Mono', monospace",
-                    }}
-                  />
-                )}
-              </Suspense>
-            )}
+            </Suspense>
           </div>
         </div>
 
-        {/* Right: Response */}
-        <div className="flex-1 flex flex-col">
-          <div className="flex items-center gap-2 px-3 py-2 bg-[var(--kyro-surface)] border-b border-[var(--kyro-border)]">
-            <span className="text-xs font-bold text-[var(--kyro-text-secondary)]">
-              Response
-            </span>
-            {error && (
-              <span className="px-2 py-0.5 bg-red-500/10 text-red-500 text-xs rounded">
-                Error
-              </span>
-            )}
-          </div>
-          <div className="flex-1 overflow-auto p-4">
-            {isLoading ? (
-              <div className="flex items-center justify-center h-full">
-                <div className="animate-spin w-8 h-8 border-2 border-pink-500 border-t-transparent rounded-full" />
+        {/* Center/Right: Response or Docs */}
+        <div className="flex-1 flex flex-col min-w-0">
+          {showDocs ? (
+            <div className="flex-1 flex flex-col overflow-hidden bg-[var(--kyro-surface)]">
+              <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--kyro-border)]">
+                <span className="text-xs font-bold  tracking-widest text-[var(--kyro-text-secondary)]">Schema Explorer</span>
+                <button onClick={() => setShowDocs(false)} className="text-[var(--kyro-text-muted)] hover:text-red-500">
+                  <X className="w-4 h-4" />
+                </button>
               </div>
-            ) : response ? (
-              <pre className="text-sm font-mono text-[var(--kyro-text-primary)] whitespace-pre-wrap">
-                {response}
-              </pre>
-            ) : (
-              <div className="flex flex-col items-center justify-center h-full text-[var(--kyro-text-muted)]">
-                <svg
-                  className="w-12 h-12 mb-4 opacity-50"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="1.5"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                <p className="text-sm">Run a query to see the response</p>
-                <p className="text-xs mt-1">Press Cmd+Enter to run</p>
+              <div className="flex-1 overflow-y-auto p-4 space-y-4">
+                {loadingSchema ? (
+                  <div className="flex items-center justify-center h-40">
+                    <RefreshCw className="w-6 h-6 animate-spin text-pink-500" />
+                  </div>
+                ) : schema ? (
+                  <div className="space-y-6">
+                    {selectedType ? (
+                      <div className="space-y-4">
+                        <button
+                          onClick={() => setSelectedType(null)}
+                          className="flex items-center gap-1 text-xs text-pink-500 font-bold hover:underline"
+                        >
+                          ← Back to types
+                        </button>
+                        <div>
+                          <h3 className="text-lg font-bold text-[var(--kyro-text-primary)]">{selectedType.name}</h3>
+                          <p className="text-xs text-[var(--kyro-text-muted)] italic">{selectedType.kind}</p>
+                          {selectedType.description && (
+                            <p className="mt-2 text-sm text-[var(--kyro-text-secondary)] leading-relaxed">{selectedType.description}</p>
+                          )}
+                        </div>
+                        {selectedType.fields && (
+                          <div className="space-y-3">
+                            <h4 className="text-xs font-bold  tracking-widest text-[var(--kyro-text-muted)] pt-4">Fields</h4>
+                            {selectedType.fields.map(f => (
+                              <div key={f.name} className="p-3 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]">
+                                <div className="flex items-center justify-between gap-2">
+                                  <span className="font-bold text-sm text-[var(--kyro-text-primary)]">{f.name}</span>
+                                  <span className="text-[10px] font-mono text-pink-500 bg-pink-500/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
+                                </div>
+                                {f.description && <p className="text-xs text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
+                                {f.args && f.args.length > 0 && (
+                                  <div className="mt-2 pl-4 border-l-2 border-[var(--kyro-border)] space-y-1">
+                                    {f.args.map(a => (
+                                      <div key={a.name} className="text-[10px]">
+                                        <span className="text-[var(--kyro-text-muted)]">{a.name}:</span> <span className="text-pink-400">{renderType(a.type)}</span>
+                                      </div>
+                                    ))}
+                                  </div>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="space-y-4">
+                        <div className="grid grid-cols-2 gap-2">
+                          {["Query", "Mutation"].map(t => {
+                            const found = schema.types.find(type => type.name === t);
+                            if (!found) return null;
+                            return (
+                              <button
+                                key={t}
+                                onClick={() => setSelectedType(found)}
+                                className="flex items-center justify-between p-4 bg-[var(--kyro-surface-accent)] rounded-xl border border-[var(--kyro-border)] hover:border-pink-500 transition-all text-left group"
+                              >
+                                <div>
+                                  <span className="text-xs font-bold text-[var(--kyro-text-muted)]  block">{t}</span>
+                                  <span className="text-sm font-bold text-[var(--kyro-text-primary)]">Root Operations</span>
+                                </div>
+                                <ChevronRight className="w-4 h-4 text-pink-500 group-hover:translate-x-1 transition-transform" />
+                              </button>
+                            );
+                          })}
+                        </div>
+                        <div className="space-y-2">
+                          <h4 className="text-xs font-bold  tracking-widest text-[var(--kyro-text-muted)] pt-4">All Types</h4>
+                          {schema.types.filter(t => !t.name.startsWith("__") && t.kind === "OBJECT").map(t => (
+                            <button
+                              key={t.name}
+                              onClick={() => setSelectedType(t)}
+                              className="w-full flex items-center justify-between px-4 py-2 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left"
+                            >
+                              <span className="text-sm font-medium text-[var(--kyro-text-primary)]">{t.name}</span>
+                              <ChevronRight className="w-3.5 h-3.5 opacity-30" />
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <p className="text-xs text-[var(--kyro-text-muted)]">No schema loaded.</p>
+                )}
               </div>
-            )}
-          </div>
+            </div>
+          ) : (
+            <div className="flex-1 flex flex-col overflow-hidden">
+              <div className="flex items-center px-4 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+                <span className="text-xs font-bold  tracking-widest text-[var(--kyro-text-secondary)]">Response</span>
+              </div>
+              <div className="flex-1 overflow-auto p-4 bg-[var(--kyro-bg-secondary)]">
+                {isLoading ? (
+                  <div className="flex flex-col items-center justify-center h-full gap-4">
+                    <RefreshCw className="w-8 h-8 animate-spin text-pink-500" />
+                    <span className="text-xs font-bold text-[var(--kyro-text-muted)]">Running Query...</span>
+                  </div>
+                ) : response ? (
+                  <pre className="text-[13px] font-mono text-[var(--kyro-text-primary)] whitespace-pre-wrap selection:bg-pink-500/20">
+                    {response}
+                  </pre>
+                ) : (
+                  <div className="flex flex-col items-center justify-center h-full opacity-30">
+                    <Activity className="w-16 h-16 mb-4" />
+                    <p className="text-sm font-bold">Query output will appear here</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>