@kyro-cms/admin 0.9.5 → 0.9.7

package/src/components/GraphQLPlayground.tsx

@@ -2,26 +2,26 @@ import React, {
   useState,
   useCallback,
   useEffect,
-  useMemo,
+  useRef,
   Suspense,
   lazy,
 } from "react";
 import {
   Book,
-  Send,
   Trash2,
   Copy,
   RefreshCw,
-  Settings,
-  Maximize2,
   ChevronRight,
-  ChevronDown,
-  Search,
-  Type,
   Activity,
   Zap,
   Info,
-  X
+  X,
+  Download,
+  Check,
+  Code2,
+  Play,
+  Clock,
+  Terminal,
 } from "./ui/icons";
 
 interface GraphQLPlaygroundProps {
@@ -33,25 +33,47 @@ interface GraphQLPlaygroundProps {
 
 interface QueryTab {
   id: string;
-  name: string;
   query: string;
   variables: string;
   headers: string;
 }
 
-// Lazy-load CodeMirror
+interface HistoryEntry {
+  id: string;
+  query: string;
+  variables: string;
+  response: string;
+  timestamp: number;
+  duration: number;
+  statusCode: number;
+}
+
 const CodeMirrorEditor = lazy(() =>
   import("@uiw/react-codemirror").then((mod) => ({ default: mod.default })),
 );
 import { javascript } from "@codemirror/lang-javascript";
-import { githubLight } from "@uiw/codemirror-theme-github";
 import { aura } from "@uiw/codemirror-theme-aura";
-import "graphiql/graphiql.css";
+
+function prettifyQuery(query: string): string {
+  let indent = 0;
+  let result = "";
+  const lines = query.split("\n");
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    if (trimmed.startsWith("}") || trimmed.startsWith("]")) indent = Math.max(0, indent - 1);
+    result += "  ".repeat(indent) + trimmed + "\n";
+    if (trimmed.endsWith("{") || trimmed.endsWith("[")) indent++;
+    const opens = (trimmed.match(/\{/g) || []).length;
+    const closes = (trimmed.match(/\}/g) || []).length;
+    indent += opens - closes;
+  }
+  return result.trim();
+}
 
 const DEFAULT_QUERY = `# Welcome to Kyro CMS GraphQL Playground
-# Try these example queries:
+# Cmd+Enter to run, Cmd+Shift+P to prettify
 
-# 1. Introspection - Discover the schema
 {
   __schema {
     types {
@@ -65,21 +87,15 @@ const DEFAULT_QUERY = `# Welcome to Kyro CMS GraphQL Playground
   }
 }
 
-# 2. List all collections
-{
-  collections {
-    slug
-    name
-  }
-}
-
-# 3. Ping the API
-{
-  ping
-}
+# Example: fetch all posts (uncomment to use)
+# {
+#   posts(page: 1, limit: 10) {
+#     docs { id title slug status }
+#     totalDocs
+#   }
+# }
 `;
 
-// --- Docs Types ---
 interface TypeInfo {
   name: string;
   kind: string;
@@ -120,38 +136,40 @@ export function GraphQLPlayground({
   initialShowDocs = false,
 }: GraphQLPlaygroundProps) {
   const [token, setToken] = useState<string>("");
+  const [showToken, setShowToken] = useState(false);
   const [isConnected, setIsConnected] = useState(false);
-  const [tabs, setTabs] = useState<QueryTab[]>([
-    {
-      id: "default",
-      name: "Query",
-      query: initialQuery || DEFAULT_QUERY,
-      variables: initialVariables || "{}",
-      headers: "",
-    },
-  ]);
-  const [currentTabId, setCurrentTabId] = useState("default");
+  const [tab, setTab] = useState<QueryTab>({
+    id: "default",
+    query: initialQuery || DEFAULT_QUERY,
+    variables: initialVariables || "{}",
+    headers: "",
+  });
   const [response, setResponse] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<"query" | "variables" | "headers">(
-    "query",
-  );
+  const [activeEditorTab, setActiveEditorTab] = useState<"query" | "variables" | "headers">("query");
   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);
+  const [rightTab, setRightTab] = useState<"response" | "docs" | "history">(
+    initialShowDocs ? "docs" : "response",
+  );
+  const [history, setHistory] = useState<HistoryEntry[]>([]);
+  const [lastDuration, setLastDuration] = useState<number>(0);
+  const [lastStatus, setLastStatus] = useState<number>(0);
+  const [copied, setCopied] = useState(false);
+  const [splitPos, setSplitPos] = useState(50);
+  const [mobilePanel, setMobilePanel] = useState<"editor" | "response">("editor");
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const cursorPos = useRef({ line: 1, col: 1 });
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
-  const currentTab = useMemo(
-    () => tabs.find((t) => t.id === currentTabId) || tabs[0],
-    [tabs, currentTabId],
-  );
-
   const fetchSchema = useCallback(async () => {
     setLoadingSchema(true);
     try {
@@ -212,55 +230,110 @@ export function GraphQLPlayground({
   }, [endpoint]);
 
   useEffect(() => {
-    if (showDocs && !schema) {
-      fetchSchema();
-    }
+    if (showDocs && !schema) fetchSchema();
   }, [showDocs, schema, fetchSchema]);
 
-  const handleRun = async () => {
+  const handleRun = useCallback(async () => {
     setIsLoading(true);
     setError(null);
+    const startTime = performance.now();
     try {
       const headers: Record<string, string> = {
         "Content-Type": "application/json",
       };
       if (token) headers["Authorization"] = `Bearer ${token}`;
-
-      // Add custom headers from tab
-      if (currentTab.headers) {
+      if (tab.headers) {
         try {
-          const customHeaders = JSON.parse(currentTab.headers);
+          const customHeaders = JSON.parse(tab.headers);
           Object.assign(headers, customHeaders);
-        } catch (e) {
-          console.warn("Invalid custom headers JSON");
-        }
+        } catch { /* ignore invalid */ }
       }
 
       const res = await fetch(endpoint, {
         method: "POST",
         headers,
         body: JSON.stringify({
-          query: currentTab.query,
-          variables: currentTab.variables ? JSON.parse(currentTab.variables) : {},
+          query: tab.query,
+          variables: tab.variables ? JSON.parse(tab.variables) : {},
         }),
       });
 
+      const endTime = performance.now();
+      const duration = Math.round(endTime - startTime);
+      setLastDuration(duration);
+      setLastStatus(res.status);
+
       const data = await res.json();
-      setResponse(JSON.stringify(data, null, 2));
+      const formatted = JSON.stringify(data, null, 2);
+      setResponse(formatted);
       if (data.errors) setError("Query returned errors");
+
+      setHistory((prev) => [
+        {
+          id: Date.now().toString(),
+          query: tab.query,
+          variables: tab.variables,
+          response: formatted,
+          timestamp: Date.now(),
+          duration,
+          statusCode: res.status,
+        },
+        ...prev.slice(0, 49),
+      ]);
     } catch (err: unknown) {
       const message = err instanceof Error ? err.message : "Request failed";
-      setError(message || "Request failed");
+      setError(message);
       setResponse(JSON.stringify({ error: message }, null, 2));
     } finally {
       setIsLoading(false);
     }
+  }, [endpoint, token, tab]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        handleRun();
+      }
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "p") {
+        e.preventDefault();
+        handlePrettify();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [handleRun]);
+
+  const updateTab = (key: "query" | "variables" | "headers", value: string) => {
+    setTab((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handlePrettify = () => {
+    const pretty = prettifyQuery(tab.query);
+    setTab((prev) => ({ ...prev, query: pretty }));
+  };
+
+  const handleCopyResponse = async () => {
+    if (response) {
+      await navigator.clipboard.writeText(response);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleDownloadResponse = () => {
+    if (!response) return;
+    const blob = new Blob([response], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "graphql-response.json";
+    a.click();
+    URL.revokeObjectURL(url);
   };
 
-  const updateTab = (key: keyof QueryTab, value: string) => {
-    setTabs((prev) =>
-      prev.map((t) => (t.id === currentTabId ? { ...t, [key]: value } : t)),
-    );
+  const handleClearEditor = () => {
+    setTab((prev) => ({ ...prev, query: "" }));
   };
 
   const extensions = [javascript()];
@@ -268,218 +341,395 @@ export function GraphQLPlayground({
 
   const renderType = (type: Record<string, unknown>): string => {
     if (!type) return "Unknown";
-    if (type.name) return type.name;
+    if (type.name) return type.name as string;
     if (type.ofType) {
-      if (type.kind === "NON_NULL") return `${renderType(type.ofType)}!`;
-      if (type.kind === "LIST") return `[${renderType(type.ofType)}]`;
-      return renderType(type.ofType);
+      if (type.kind === "NON_NULL") return `${renderType(type.ofType as Record<string, unknown>)}!`;
+      if (type.kind === "LIST") return `[${renderType(type.ofType as Record<string, unknown>)}]`;
+      return renderType(type.ofType as Record<string, unknown>);
     }
     return "Unknown";
   };
 
+  const startDrag = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const onMove = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const pct = ((e.clientX - rect.left) / rect.width) * 100;
+      setSplitPos(Math.max(20, Math.min(80, pct)));
+    };
+    const onUp = () => setIsDragging(false);
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, [isDragging]);
+
+  const editorPills = [
+    { key: "query" as const, label: "Query", shortcut: "" },
+    { key: "variables" as const, label: "Variables", shortcut: "" },
+    { key: "headers" as const, label: "Headers", shortcut: "" },
+  ];
+
+  const rightPills = [
+    { key: "response" as const, label: "Response", badge: lastStatus ? `${lastStatus}ms` : undefined },
+    { key: "docs" as const, label: "Docs" },
+    { key: "history" as const, label: `History${history.length ? ` (${history.length})` : ""}` },
+  ];
+
+  const editorValue =
+    activeEditorTab === "query"
+      ? tab.query
+      : activeEditorTab === "variables"
+        ? tab.variables
+        : tab.headers;
+
   return (
-    <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 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2">
-            <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 ref={containerRef} className="h-full flex flex-col bg-[var(--kyro-bg)] overflow-hidden rounded-lg border border-[var(--kyro-border)]">
+      {/* Compact top bar */}
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
+        <div className="flex items-center gap-1.5 min-w-0">
+          <div className="w-7 h-7 rounded-lg bg-[var(--kyro-primary)]/10 flex items-center justify-center text-[var(--kyro-primary)] shrink-0">
+            <Zap className="w-3.5 h-3.5" />
           </div>
-          <div className="h-4 w-px bg-[var(--kyro-border)]" />
+          <span className="text-xs font-semibold hidden sm:inline">GraphQL</span>
+        </div>
+        <div className="flex items-center gap-1.5 text-[10px] text-[var(--kyro-text-muted)]">
+          <div className={`w-1.5 h-1.5 rounded-full ${isConnected ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-danger)]"}`} />
+          <span className="hidden sm:inline">{isConnected ? "Connected" : "Disconnected"}</span>
+        </div>
+        <div className="h-4 w-px bg-[var(--kyro-border)]" />
+        {token ? (
+          <div className="flex items-center gap-1 px-2 py-1 rounded-md bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] text-[10px] font-mono text-[var(--kyro-text-muted)]">
+            <span className="w-2 h-2 rounded-full bg-[var(--kyro-success)]" />
+            Bearer ••••{token.slice(-4)}
+            <button onClick={() => { setToken(""); setShowToken(false); }} className="ml-1 hover:text-[var(--kyro-danger)]">
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        ) : (
           <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>
+            <input
+              type={showToken ? "text" : "password"}
+              value={token}
+              onChange={(e) => setToken(e.target.value)}
+              placeholder="Bearer token"
+              className="w-24 px-2 py-1 text-[10px] font-mono bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-md text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:border-[var(--kyro-primary)]"
+            />
+            <button onClick={() => setShowToken(!showToken)} className="p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">
+              {showToken ? <X className="w-3 h-3" /> : <Info className="w-3 h-3" />}
+            </button>
           </div>
-        </div>
-        <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"
-              }`}
-          >
+        )}
+        <div className="ml-auto flex items-center gap-1 flex-wrap justify-end">
+          <button onClick={() => { setShowDocs(!showDocs); setRightTab("docs"); }} className={`p-1.5 rounded-lg transition-all ${rightTab === "docs" && showDocs ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="Schema docs">
             <Book className="w-3.5 h-3.5" />
-            Documentation
           </button>
+          <button onClick={() => setRightTab("history")} className={`p-1.5 rounded-lg transition-all ${rightTab === "history" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="History">
+            <Clock className="w-3.5 h-3.5" />
+          </button>
+          <button onClick={handlePrettify} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Prettify (Cmd+Shift+P)">
+            <Code2 className="w-3.5 h-3.5" />
+          </button>
+          <button onClick={handleCopyResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Copy response">
+            {copied ? <Check className="w-3.5 h-3.5 text-[var(--kyro-success)]" /> : <Copy className="w-3.5 h-3.5" />}
+          </button>
+          <button onClick={handleDownloadResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Download response">
+            <Download className="w-3.5 h-3.5" />
+          </button>
+          <button onClick={handleClearEditor} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger-bg)]" title="Clear editor">
+            <Trash2 className="w-3.5 h-3.5" />
+          </button>
+          <div className="h-4 w-px bg-[var(--kyro-border)] mx-1" />
           <button
             onClick={handleRun}
             disabled={isLoading}
-            className="kyro-btn kyro-btn-md kyro-btn-primary flex items-center gap-2"
+            className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-[var(--kyro-primary)] text-white text-xs font-semibold hover:opacity-90 disabled:opacity-50 transition-all shadow-sm"
           >
-            <Send className="w-3.5 h-3.5" />
-            {isLoading ? "Running..." : "Run Query"}
+            <Play className="w-3 h-3" />
+            {isLoading ? "..." : "Run"}
           </button>
         </div>
       </div>
 
-      <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) => (
+      {/* Main split area */}
+      <div className="flex-1 flex flex-col md:flex-row overflow-hidden relative">
+        {/* Mobile panel switcher */}
+        <div className="flex md:hidden gap-1 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
+          <button
+            onClick={() => setMobilePanel("editor")}
+            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "editor" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+          >
+            Editor
+          </button>
+          <button
+            onClick={() => setMobilePanel("response")}
+            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "response" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+          >
+            Output
+          </button>
+        </div>
+
+        {/* Left: editor */}
+        <div className={`${mobilePanel === "editor" ? "flex" : "hidden"} md:flex flex-col overflow-hidden border-r border-[var(--kyro-border)] w-full md:w-auto`} style={{ flex: 'none', width: typeof window !== "undefined" && window.innerWidth >= 768 ? `${splitPos}%` : "100%" }}>
+          {/* Editor pills */}
+          <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+            {editorPills.map((p) => (
               <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)]"
+                key={p.key}
+                onClick={() => setActiveEditorTab(p.key)}
+                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${activeEditorTab === p.key
+                    ? "bg-[var(--kyro-primary)] text-white"
+                    : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
                   }`}
               >
-                {tab}
+                {p.label}
               </button>
             ))}
           </div>
 
+          {/* CodeMirror */}
           <div className="flex-1 overflow-hidden relative bg-[var(--kyro-bg)]">
-            <Suspense fallback={<div className="p-4 text-xs">Loading editor...</div>}>
+            <Suspense fallback={<div className="p-3 text-[10px] text-[var(--kyro-text-muted)]">Loading editor...</div>}>
               {isMounted && (
                 <CodeMirrorEditor
-                  value={activeTab === "query" ? currentTab.query : activeTab === "variables" ? currentTab.variables : currentTab.headers}
+                  value={editorValue}
                   height="100%"
                   extensions={extensions}
                   theme={theme}
-                  onChange={(val) => updateTab(activeTab, val)}
-                  basicSetup={true}
+                  onChange={(val) => updateTab(activeEditorTab, val)}
+                  basicSetup={{ lineNumbers: true, foldGutter: true, highlightActiveLine: true }}
                   style={{
                     height: "100%",
-                    fontSize: "13px",
+                    fontSize: "12px",
                     fontFamily: "'Fira Code', monospace",
                   }}
                 />
               )}
             </Suspense>
           </div>
+
+          {/* Status bar */}
+          <div className="flex items-center justify-between px-3 py-1 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[9px] text-[var(--kyro-text-muted)] font-mono">
+            <span>Ln {cursorPos.current.line}, Col {cursorPos.current.col}</span>
+            <span>{tab.query.length} chars</span>
+          </div>
         </div>
 
-        {/* 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>
-              <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>
+        {/* Drag handle */}
+        <div
+          className="hidden md:block absolute top-0 bottom-0 z-10 w-1.5 cursor-col-resize group"
+          style={{ left: `calc(${splitPos}% - 3px)` }}
+          onMouseDown={startDrag}
+        >
+          <div className="w-0.5 h-full mx-auto bg-transparent group-hover:bg-[var(--kyro-primary)] group-hover:opacity-40 transition-all" />
+        </div>
+
+        {/* Right panel */}
+        <div className={`${mobilePanel === "response" ? "flex" : "hidden"} md:flex flex-1 flex-col overflow-hidden min-w-0 w-full md:w-auto`} style={{ flex: undefined, width: typeof window !== "undefined" && window.innerWidth >= 768 ? `${100 - splitPos}%` : "100%" }}>
+          {/* Right pills */}
+          <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+            {rightPills.map((p) => (
+              <button
+                key={p.key}
+                onClick={() => { setRightTab(p.key); if (p.key === "docs") setShowDocs(true); }}
+                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${rightTab === p.key
+                    ? "bg-[var(--kyro-primary)] text-white"
+                    : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
+                  }`}
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+
+          <div className="flex-1 overflow-hidden">
+            {rightTab === "docs" ? (
+              <div className="h-full flex flex-col overflow-hidden bg-[var(--kyro-surface)]">
+                <div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--kyro-border)]">
+                  <span className="text-[10px] font-semibold text-[var(--kyro-text-secondary)]">Schema Explorer</span>
+                  <button onClick={() => setShowDocs(false)} className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+                <div className="flex-1 overflow-y-auto p-3 space-y-3">
+                  {loadingSchema ? (
+                    <div className="flex items-center justify-center h-32">
+                      <RefreshCw className="w-5 h-5 animate-spin text-[var(--kyro-primary)]" />
+                    </div>
+                  ) : schema ? (
+                    <div className="space-y-4">
+                      {selectedType ? (
+                        <div className="space-y-3">
+                          <button
+                            onClick={() => setSelectedType(null)}
+                            className="flex items-center gap-1 text-[10px] text-[var(--kyro-primary)] font-semibold hover:underline"
+                          >
+                            ← Back to types
+                          </button>
+                          <div>
+                            <h3 className="text-sm font-bold text-[var(--kyro-text-primary)]">{selectedType.name}</h3>
+                            <p className="text-[10px] text-[var(--kyro-text-muted)] italic">{selectedType.kind}</p>
+                            {selectedType.description && (
+                              <p className="mt-1.5 text-[11px] text-[var(--kyro-text-secondary)] leading-relaxed">{selectedType.description}</p>
+                            )}
+                          </div>
+                          {selectedType.fields && (
+                            <div className="space-y-2">
+                              <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Fields</h4>
+                              {selectedType.fields.map(f => (
+                                <div key={f.name} className="p-2.5 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]">
+                                  <div className="flex items-center justify-between gap-2">
+                                    <span className="font-semibold text-[11px] text-[var(--kyro-text-primary)]">{f.name}</span>
+                                    <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
+                                  </div>
+                                  {f.description && <p className="text-[10px] text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
+                                  {f.args && f.args.length > 0 && (
+                                    <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-border)] space-y-0.5">
+                                      {f.args.map(a => (
+                                        <div key={a.name} className="text-[9px]">
+                                          <span className="text-[var(--kyro-text-muted)]">{a.name}:</span>{" "}
+                                          <span className="text-[var(--kyro-primary)]">{renderType(a.type)}</span>
+                                        </div>
+                                      ))}
+                                    </div>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
                           )}
                         </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 className="space-y-3">
+                          <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-3 bg-[var(--kyro-surface-accent)] rounded-md border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-all text-left group"
+                                >
+                                  <div>
+                                    <span className="text-[10px] font-semibold text-[var(--kyro-text-muted)] block">{t}</span>
+                                    <span className="text-[11px] font-bold text-[var(--kyro-text-primary)]">Root Operations</span>
                                   </div>
-                                )}
-                              </div>
-                            ))}
+                                  <ChevronRight className="w-3.5 h-3.5 text-[var(--kyro-primary)] group-hover:translate-x-1 transition-transform" />
+                                </button>
+                              );
+                            })}
                           </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 (
+                          <div className="space-y-1.5">
+                            <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">All Types</h4>
+                            {schema.types.filter(t => !t.name.startsWith("__") && t.kind === "OBJECT").map(t => (
                               <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"
+                                key={t.name}
+                                onClick={() => setSelectedType(t)}
+                                className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left"
                               >
-                                <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" />
+                                <span className="text-[11px] font-medium text-[var(--kyro-text-primary)]">{t.name}</span>
+                                <ChevronRight className="w-3 h-3 opacity-30" />
                               </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>
-                    )}
-                  </div>
-                ) : (
-                  <p className="text-xs text-[var(--kyro-text-muted)]">No schema loaded.</p>
-                )}
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-[10px] 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>
+            ) : rightTab === "history" ? (
+              <div className="h-full flex flex-col overflow-hidden bg-[var(--kyro-surface)]">
+                <div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--kyro-border)]">
+                  <span className="text-[10px] font-semibold text-[var(--kyro-text-secondary)]">Query History</span>
+                  {history.length > 0 && (
+                    <button onClick={() => setHistory([])} className="text-[9px] text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)]">Clear</button>
+                  )}
+                </div>
+                <div className="flex-1 overflow-y-auto">
+                  {history.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center h-32 text-[var(--kyro-text-muted)]">
+                      <Terminal className="w-8 h-8 mb-2 opacity-30" />
+                      <p className="text-[10px]">No queries executed yet</p>
+                    </div>
+                  ) : (
+                    <div className="p-2 space-y-1">
+                      {history.map((entry) => (
+                        <button
+                          key={entry.id}
+                          onClick={() => {
+                            setTab((prev) => ({ ...prev, query: entry.query, variables: entry.variables }));
+                            setResponse(entry.response);
+                          }}
+                          className="w-full text-left p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)] border border-transparent hover:border-[var(--kyro-border)] transition-all"
+                        >
+                          <div className="text-[10px] font-mono text-[var(--kyro-text-primary)] truncate leading-relaxed">
+                            {entry.query.split("\n").slice(0, 3).join(" ").substring(0, 80)}
+                          </div>
+                          <div className="flex items-center gap-2 mt-1 text-[9px] text-[var(--kyro-text-muted)]">
+                            <span>{new Date(entry.timestamp).toLocaleTimeString()}</span>
+                            <span>{entry.duration}ms</span>
+                            <span className={`${entry.statusCode < 400 ? "text-[var(--kyro-success)]" : "text-[var(--kyro-danger)]"}`}>
+                              {entry.statusCode}
+                            </span>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
               </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 className="h-full flex flex-col overflow-hidden">
+                <div className="flex items-center gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+                  <span className="text-[10px] font-semibold text-[var(--kyro-text-secondary)]">Response</span>
+                  {lastDuration > 0 && (
+                    <span className="text-[9px] font-mono text-[var(--kyro-text-muted)]">
+                      {lastDuration}ms
+                    </span>
+                  )}
+                  {lastStatus > 0 && (
+                    <span className={`text-[9px] font-semibold px-1.5 py-0.5 rounded ${lastStatus < 400 ? "bg-[var(--kyro-success-bg)] text-[var(--kyro-success)]" : "bg-[var(--kyro-danger-bg)] text-[var(--kyro-danger)]"
+                      }`}>
+                      {lastStatus}
+                    </span>
+                  )}
+                </div>
+                <div className="flex-1 overflow-auto bg-[var(--kyro-bg-secondary)]">
+                  {isLoading ? (
+                    <div className="flex flex-col items-center justify-center h-full gap-3">
+                      <RefreshCw className="w-6 h-6 animate-spin text-[var(--kyro-primary)]" />
+                      <span className="text-[10px] font-semibold text-[var(--kyro-text-muted)]">Running Query...</span>
+                    </div>
+                  ) : response ? (
+                    <pre className="text-[11px] font-mono text-[var(--kyro-text-primary)] whitespace-pre-wrap p-3 selection:bg-[var(--kyro-primary)]/20">
+                      {error && (
+                        <div className="mb-2 p-2 rounded bg-[var(--kyro-danger-bg)] border border-[var(--kyro-danger)]/20 text-[10px] text-[var(--kyro-danger)] font-medium">
+                          ⚠ {error}
+                        </div>
+                      )}
+                      {response}
+                    </pre>
+                  ) : (
+                    <div className="flex flex-col items-center justify-center h-full opacity-30">
+                      <Activity className="w-12 h-12 mb-3" />
+                      <p className="text-[11px] font-bold">Press Run to execute</p>
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </div>