@kyro-cms/admin 0.9.5 → 0.9.7

package/src/components/RestPlayground.tsx

@@ -2,6 +2,15 @@ import React, { useState, useEffect, useCallback, useRef } from "react";
 import { useUIStore, toast } from "../lib/stores";
 import { apiPath } from "../lib/paths";
 import { Modal } from "./ui/Modal";
+import {
+  Copy,
+  Download,
+  Check,
+  Play,
+  Plus,
+  X,
+  ChevronRight,
+} from "./ui/icons";
 
 interface EnvVariable {
   key: string;
@@ -54,16 +63,26 @@ const STORAGE_KEYS = {
   env: "kyro-rest-env",
 };
 
+const METHOD_COLORS: Record<string, string> = {
+  GET: "#22c55e",
+  POST: "#3b82f6",
+  PATCH: "#eab308",
+  DELETE: "#ef4444",
+};
+
+const METHOD_BG: Record<string, string> = {
+  GET: "rgba(34,197,94,0.12)",
+  POST: "rgba(59,130,246,0.12)",
+  PATCH: "rgba(234,179,8,0.12)",
+  DELETE: "rgba(239,68,68,0.12)",
+};
+
 export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
-  const [sidebarTab, setSidebarTab] = useState<
-    "collections" | "saved" | "history" | "env"
-  >("collections");
+  const [sidebarTab, setSidebarTab] = useState<"collections" | "saved" | "history" | "env">("collections");
   const [folders, setFolders] = useState<RequestFolder[]>([]);
   const [history, setHistory] = useState<HistoryItem[]>([]);
   const [envVars, setEnvVars] = useState<EnvVariable[]>([]);
-  const [selectedRequest, setSelectedRequest] = useState<SavedRequest | null>(
-    null,
-  );
+  const [selectedRequest, setSelectedRequest] = useState<SavedRequest | null>(null);
   const [currentRequest, setCurrentRequest] = useState<SavedRequest>({
     id: "new",
     name: "Untitled Request",
@@ -72,67 +91,56 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
     headers: {},
     body: "",
   });
-  const [response, setResponse] = useState<Record<string, unknown> | null>(null);
+  const [response, setResponse] = useState<{ status: number; duration: number; size: number; data: any } | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<"params" | "headers" | "body">(
-    "params",
-  );
+  const [activeEditorTab, setActiveEditorTab] = useState<"params" | "headers" | "body">("params");
   const [showFolderModal, setShowFolderModal] = useState(false);
   const [showSaveModal, setShowSaveModal] = useState(false);
   const [newFolderName, setNewFolderName] = useState("");
   const [saveToFolderId, setSaveToFolderId] = useState("");
   const [saveRequestName, setSaveRequestName] = useState("");
+  const [copied, setCopied] = useState(false);
+  const [showSidebar, setShowSidebar] = useState(true);
+  const [mobilePanel, setMobilePanel] = useState<"editor" | "response">("editor");
+  const [splitPos, setSplitPos] = useState(50);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const { confirm } = useUIStore();
+  const [isMounted, setIsMounted] = useState(false);
 
-  // Load from localStorage
   useEffect(() => {
     const savedFolders = localStorage.getItem(STORAGE_KEYS.folders);
     if (savedFolders) setFolders(JSON.parse(savedFolders));
-
     const savedHistory = localStorage.getItem(STORAGE_KEYS.history);
     if (savedHistory) setHistory(JSON.parse(savedHistory));
-
     const savedEnv = localStorage.getItem(STORAGE_KEYS.env);
     if (savedEnv) setEnvVars(JSON.parse(savedEnv));
-    else
-      setEnvVars([
-        { key: "baseUrl", value: apiPath, enabled: true },
-        { key: "token", value: "", enabled: true },
-      ]);
-
+    else setEnvVars([
+      { key: "baseUrl", value: apiPath, enabled: true },
+      { key: "token", value: "", enabled: true },
+    ]);
     setIsMounted(true);
   }, []);
 
-  const [isMounted, setIsMounted] = useState(false);
-
-  // Save to localStorage
   useEffect(() => {
-    if (isMounted) {
-      localStorage.setItem(STORAGE_KEYS.folders, JSON.stringify(folders));
-    }
+    if (isMounted) localStorage.setItem(STORAGE_KEYS.folders, JSON.stringify(folders));
   }, [folders, isMounted]);
 
   useEffect(() => {
-    if (isMounted) {
-      localStorage.setItem(STORAGE_KEYS.history, JSON.stringify(history));
-    }
+    if (isMounted) localStorage.setItem(STORAGE_KEYS.history, JSON.stringify(history));
   }, [history, isMounted]);
 
   useEffect(() => {
-    if (isMounted) {
-      localStorage.setItem(STORAGE_KEYS.env, JSON.stringify(envVars));
-    }
+    if (isMounted) localStorage.setItem(STORAGE_KEYS.env, JSON.stringify(envVars));
   }, [envVars, isMounted]);
 
   const resolveUrl = (url: string) => {
     let resolved = url;
     envVars.forEach((v) => {
-      if (v.enabled) {
-        resolved = resolved.replace(`{{${v.key}}}`, v.value);
-      }
+      if (v.enabled) resolved = resolved.replace(`{{${v.key}}}`, v.value);
     });
-    // Default base URL if relative
     if (resolved.startsWith("/")) {
       const baseUrl = envVars.find((v) => v.key === "baseUrl" && v.enabled)?.value || apiPath;
       resolved = `${baseUrl}${resolved}`;
@@ -140,57 +148,53 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
     return resolved;
   };
 
-  const handleSend = async () => {
+  const handleSend = useCallback(async () => {
     setLoading(true);
     setError(null);
     const start = Date.now();
     try {
       const url = resolveUrl(currentRequest.url);
       const headers: Record<string, string> = { ...currentRequest.headers };
-
       const token = envVars.find(v => v.key === 'token' && v.enabled)?.value;
       if (token) headers['Authorization'] = `Bearer ${token}`;
 
       const res = await fetch(url, {
         method: currentRequest.method,
-        headers: {
-          "Content-Type": "application/json",
-          ...headers,
-        },
-        body:
-          currentRequest.method !== "GET" && currentRequest.body
-            ? currentRequest.body
-            : undefined,
+        headers: { "Content-Type": "application/json", ...headers },
+        body: currentRequest.method !== "GET" && currentRequest.body ? currentRequest.body : undefined,
       });
 
       const duration = Date.now() - start;
       const status = res.status;
       const data = await res.json().catch(() => ({}));
 
-      setResponse({
-        status,
-        duration,
-        size: JSON.stringify(data).length,
-        data,
-      });
+      setResponse({ status, duration, size: JSON.stringify(data).length, data });
 
-      // Add to history
-      const historyItem: HistoryItem = {
+      setHistory((prev) => [{
         id: Date.now().toString(),
         timestamp: Date.now(),
         method: currentRequest.method,
         url: currentRequest.url,
         status,
         duration,
-      };
-      setHistory((prev) => [historyItem, ...prev].slice(0, 50));
-} catch (err: unknown) {
-       const message = err instanceof Error ? err.message : "Unknown error";
-       setError(message);
+      }, ...prev].slice(0, 50));
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Unknown error");
     } finally {
       setLoading(false);
     }
-  };
+  }, [currentRequest, envVars]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        handleSend();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [handleSend]);
 
   const loadRequest = (req: SavedRequest) => {
     setCurrentRequest(req);
@@ -201,12 +205,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
 
   const createFolder = () => {
     if (!newFolderName.trim()) return;
-    const newFolder: RequestFolder = {
-      id: Date.now().toString(),
-      name: newFolderName,
-      requests: [],
-    };
-    setFolders((prev) => [...prev, newFolder]);
+    setFolders((prev) => [...prev, { id: Date.now().toString(), name: newFolderName, requests: [] }]);
     setNewFolderName("");
     setShowFolderModal(false);
   };
@@ -216,514 +215,498 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
       title: "Delete Folder",
       message: "Are you sure? All requests inside will be deleted.",
       variant: "danger",
-      onConfirm: () => {
-        setFolders((prev) => prev.filter((f) => f.id !== id));
-      }
+      onConfirm: () => setFolders((prev) => prev.filter((f) => f.id !== id)),
     });
   };
 
   const saveRequest = () => {
     if (!saveRequestName.trim() || !saveToFolderId) return;
-
     const newSavedRequest: SavedRequest = {
-      ...currentRequest,
-      id: Date.now().toString(),
-      name: saveRequestName,
-      folderId: saveToFolderId,
+      ...currentRequest, id: Date.now().toString(), name: saveRequestName, folderId: saveToFolderId,
     };
-
-    setFolders((prev) =>
-      prev.map((f) =>
-        f.id === saveToFolderId
-          ? { ...f, requests: [...f.requests, newSavedRequest] }
-          : f,
-      ),
-    );
+    setFolders((prev) => prev.map((f) => f.id === saveToFolderId ? { ...f, requests: [...f.requests, newSavedRequest] } : f));
     setSelectedRequest(newSavedRequest);
     setShowSaveModal(false);
   };
 
   const deleteRequest = (id: string) => {
-    setFolders((prev) =>
-      prev.map((f) => ({
-        ...f,
-        requests: f.requests.filter((r) => r.id !== id),
-      })),
-    );
+    setFolders((prev) => prev.map((f) => ({ ...f, requests: f.requests.filter((r) => r.id !== id) })));
     if (selectedRequest?.id === id) setSelectedRequest(null);
   };
 
-  const getMethodColor = (method: string) => {
-    switch (method) {
-      case "GET":
-        return "bg-green-500";
-      case "POST":
-        return "bg-blue-500";
-      case "PATCH":
-        return "bg-yellow-500";
-      case "DELETE":
-        return "bg-red-500";
-      default:
-        return "bg-gray-500";
-    }
-  };
-
-  const getStatusColor = (status: number) => {
-    if (status === 0) return "bg-red-500";
-    if (status < 300) return "bg-green-500";
-    if (status < 400) return "bg-blue-500";
-    if (status < 500) return "bg-yellow-500";
-    return "bg-red-500";
-  };
-
   const duplicateRequest = () => {
-    const duplicate: SavedRequest = {
-      ...currentRequest,
-      id: Date.now().toString(),
-      name: `${currentRequest.name} (copy)`,
-    };
-    setCurrentRequest(duplicate);
+    setCurrentRequest({ ...currentRequest, id: Date.now().toString(), name: `${currentRequest.name} (copy)` });
     setSelectedRequest(null);
   };
 
-  // Export all data
   const exportData = () => {
-    const data = {
-      version: "1.0",
-      exportedAt: new Date().toISOString(),
-      folders,
-      history: history.slice(0, 50),
-      envVars,
-    };
-
-    const blob = new Blob([JSON.stringify(data, null, 2)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
+    const blob = new Blob([JSON.stringify({ version: "1.0", exportedAt: new Date().toISOString(), folders, history: history.slice(0, 50), envVars }, null, 2)], { type: "application/json" });
+    const blobUrl = URL.createObjectURL(blob);
     const a = document.createElement("a");
-    a.href = url;
+    a.href = blobUrl;
     a.download = `kyro-rest-playground-${Date.now()}.json`;
-    document.body.appendChild(a);
     a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
+    URL.revokeObjectURL(blobUrl);
   };
 
-  // Import data
   const importData = (file: File) => {
     const reader = new FileReader();
     reader.onload = (e) => {
       try {
         const data = JSON.parse(e.target?.result as string);
-
-        if (data.folders) {
-          setFolders((prev) => [...prev, ...data.folders]);
-        }
-        if (data.history) {
-          setHistory((prev) => [...data.history, ...prev].slice(0, 50));
-        }
-        if (data.envVars) {
-          setEnvVars((prev) => [...prev, ...data.envVars]);
-        }
-
+        if (data.folders) setFolders((prev) => [...prev, ...data.folders]);
+        if (data.history) setHistory((prev) => [...data.history, ...prev].slice(0, 50));
+        if (data.envVars) setEnvVars((prev) => [...prev, ...data.envVars]);
         toast.success("Your playground data has been imported.");
-      } catch (err) {
-        toast.error("Invalid JSON file structure.");
-      }
+      } catch { toast.error("Invalid JSON file structure."); }
     };
     reader.readAsText(file);
   };
 
-  // Clear all data
   const clearAllData = () => {
     confirm({
       title: "Clear All Data?",
-      message: "Are you sure you want to clear all saved requests, history, and environment variables? This action cannot be undone.",
+      message: "Are you sure? This action cannot be undone.",
       variant: "danger",
       onConfirm: () => {
         setFolders([]);
         setHistory([]);
-        setEnvVars([
-          { key: "baseUrl", value: apiPath, enabled: true },
-          { key: "token", value: "", enabled: true },
-        ]);
+        setEnvVars([{ key: "baseUrl", value: apiPath, enabled: true }, { key: "token", value: "", enabled: true }]);
         localStorage.removeItem(STORAGE_KEYS.folders);
         localStorage.removeItem(STORAGE_KEYS.history);
         localStorage.removeItem(STORAGE_KEYS.env);
-      }
+      },
     });
   };
 
+  const handleCopyResponse = async () => {
+    if (response?.data) {
+      await navigator.clipboard.writeText(JSON.stringify(response.data, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleDownloadResponse = () => {
+    if (!response?.data) return;
+    const blob = new Blob([JSON.stringify(response.data, null, 2)], { type: "application/json" });
+    const blobUrl = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = blobUrl;
+    a.download = "rest-response.json";
+    a.click();
+    URL.revokeObjectURL(blobUrl);
+  };
+
+  const handlePrettifyBody = () => {
+    try {
+      const parsed = JSON.parse(currentRequest.body || "{}");
+      setCurrentRequest((prev) => ({ ...prev, body: JSON.stringify(parsed, null, 2) }));
+    } catch { /* ignore */ }
+  };
+
+  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();
+      setSplitPos(Math.max(20, Math.min(80, ((e.clientX - rect.left) / rect.width) * 100)));
+    };
+    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: "params" as const, label: "Params" },
+    { key: "headers" as const, label: "Headers" },
+    { key: "body" as const, label: "Body" },
+  ];
+
+  const sidebarPills = [
+    { key: "collections" as const, label: "Collections" },
+    { key: "saved" as const, label: "Saved" },
+    { key: "history" as const, label: "History" },
+    { key: "env" as const, label: "Env" },
+  ];
+
+  const methodColor = METHOD_COLORS[currentRequest.method] || "#6b7280";
+
   return (
-    <div className="h-full flex">
-      {/* Left Sidebar */}
-      <div className="w-72 flex-shrink-0 flex flex-col border-r border-[var(--kyro-border)]">
-        {/* Tabs */}
-        <div className="flex border-b border-[var(--kyro-border)]">
-          {(["collections", "saved", "history", "env"] as const).map((tab) => (
-            <button type="button"
-              key={tab}
-              onClick={() => setSidebarTab(tab)}
-              className={`flex-1 px-2 py-2 text-xs font-bold transition-colors ${sidebarTab === tab
-                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] border-b-2 border-pink-500"
-                : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-                }`}
-            >
-              {tab.charAt(0).toUpperCase() + tab.slice(1)}
-            </button>
-          ))}
+    <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 items-center gap-2 px-3 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
+        <button
+          onClick={() => setShowSidebar(!showSidebar)}
+          className="p-1 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
+          title="Toggle sidebar"
+        >
+          <ChevronRight className={`w-4 h-4 transition-transform ${showSidebar ? "rotate-180" : ""}`} />
+        </button>
+        <select
+          value={currentRequest.method}
+          onChange={(e) => setCurrentRequest({ ...currentRequest, method: e.target.value })}
+          className="px-2 py-1 text-[10px] font-bold rounded-md border-0 text-white"
+          style={{ backgroundColor: methodColor }}
+        >
+          <option value="GET">GET</option>
+          <option value="POST">POST</option>
+          <option value="PATCH">PATCH</option>
+          <option value="DELETE">DELETE</option>
+        </select>
+        <input
+          ref={inputRef}
+          type="text"
+          value={currentRequest.url}
+          onChange={(e) => setCurrentRequest({ ...currentRequest, url: e.target.value })}
+          placeholder="https://api.example.com/endpoint"
+          className="flex-1 min-w-0 px-3 py-1.5 text-xs 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)] font-mono"
+        />
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setShowSaveModal(true)}
+            className="px-2.5 py-1.5 text-[10px] font-semibold rounded-md border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
+          >
+            Save
+          </button>
+          <button
+            onClick={handleSend}
+            disabled={loading || !currentRequest.url}
+            className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-[var(--kyro-primary)] text-white text-xs font-semibold hover:opacity-90 disabled:opacity-50 transition-all shadow-sm"
+          >
+            <Play className="w-3 h-3" />
+            {loading ? "..." : "Send"}
+          </button>
         </div>
+      </div>
 
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto p-3">
-          {/* Collections */}
-          {sidebarTab === "collections" && (
-            <div className="space-y-3">
-              {collections.map((col) => (
-                <div key={col.slug}>
-                  <h3 className="text-xs font-bold text-[var(--kyro-text-muted)]  mb-2 px-2">
-                    {col.name}
-                  </h3>
-                  {[
-                    { method: "GET", path: col.endpoints.list, name: "List" },
-                    {
-                      method: "POST",
-                      path: col.endpoints.create,
-                      name: "Create",
-                    },
-                    {
-                      method: "GET",
-                      path: col.endpoints.read,
-                      name: "Get by ID",
-                    },
-                    {
-                      method: "PATCH",
-                      path: col.endpoints.update,
-                      name: "Update",
-                    },
-                    {
-                      method: "DELETE",
-                      path: col.endpoints.delete,
-                      name: "Delete",
-                    },
-                  ].map((endpoint, i) => (
-                    <button type="button"
-                      key={i}
-                      onClick={() => {
-                        setCurrentRequest((prev) => ({
-                          ...prev,
-                          method: endpoint.method as SavedRequest["method"],
-                          url: endpoint.path,
-                          name: `${col.name} - ${endpoint.name}`,
-                        }));
-                        setResponse("");
-                      }}
-                      className="w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs hover:bg-[var(--kyro-surface-accent)] transition-colors"
-                    >
-                      <span
-                        className={`${getMethodColor(endpoint.method)} text-white px-1.5 py-0.5 rounded text-[10px] font-bold`}
-                      >
-                        {endpoint.method}
-                      </span>
-                      <span className="text-[var(--kyro-text-secondary)] truncate">
-                        {endpoint.name}
-                      </span>
-                    </button>
-                  ))}
-                </div>
+      <div className="flex-1 flex overflow-hidden relative">
+        {/* Mobile sidebar backdrop */}
+        {showSidebar && (
+          <div
+            className="fixed inset-0 bg-black/40 z-10 md:hidden"
+            onClick={() => setShowSidebar(false)}
+          />
+        )}
+
+        {/* Left sidebar */}
+        {showSidebar && (
+          <div className="absolute md:relative z-20 h-full w-60 flex-shrink-0 flex flex-col border-r border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+            <div className="flex border-b border-[var(--kyro-border)]">
+              {sidebarPills.map((p) => (
+                <button
+                  key={p.key}
+                  onClick={() => setSidebarTab(p.key)}
+                  className={`flex-1 px-1 py-1.5 text-[9px] font-semibold tracking-wider transition-all ${
+                    sidebarTab === p.key
+                      ? "text-[var(--kyro-primary)] border-b-2 border-[var(--kyro-primary)] bg-[var(--kyro-surface-accent)]"
+                      : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]"
+                  }`}
+                >
+                  {p.label}
+                </button>
               ))}
             </div>
-          )}
 
-          {/* Saved */}
-          {sidebarTab === "saved" && (
-            <div className="space-y-3">
-              <div className="flex items-center justify-between mb-2">
-                <button type="button"
-                  onClick={() => setShowFolderModal(true)}
-                  className="text-xs font-bold text-pink-500 hover:underline"
-                >
-                  + New Folder
-                </button>
-                <div className="flex gap-2">
-                  <button type="button" onClick={exportData} className="text-xs text-[var(--kyro-text-muted)] hover:text-pink-500" title="Export">
-                    Export
-                  </button>
-                  <label className="text-xs text-[var(--kyro-text-muted)] hover:text-pink-500 cursor-pointer">
-                    Import
-                    <input type="file" className="hidden" accept=".json" onChange={(e) => e.target.files?.[0] && importData(e.target.files[0])} />
-                  </label>
+            <div className="flex-1 overflow-y-auto p-2">
+              {sidebarTab === "collections" && (
+                <div className="space-y-2">
+                  {collections.map((col) => (
+                    <div key={col.slug}>
+                      <h3 className="text-[10px] font-bold text-[var(--kyro-text-muted)] mb-1 px-2">{col.name}</h3>
+                      {[
+                        { method: "GET", path: col.endpoints.list, name: "List" },
+                        { method: "POST", path: col.endpoints.create, name: "Create" },
+                        { method: "GET", path: col.endpoints.read, name: "Get" },
+                        { method: "PATCH", path: col.endpoints.update, name: "Update" },
+                        { method: "DELETE", path: col.endpoints.delete, name: "Delete" },
+                      ].map((ep, i) => (
+                        <button
+                          key={i}
+                          onClick={() => {
+                            setCurrentRequest((prev) => ({ ...prev, method: ep.method, url: ep.path, name: `${col.name} - ${ep.name}` }));
+                            setResponse(null);
+                          }}
+                          className="w-full flex items-center gap-2 px-2 py-1 rounded text-[10px] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+                        >
+                          <span
+                            className="text-white px-1 py-0.5 rounded text-[8px] font-bold"
+                            style={{ backgroundColor: METHOD_COLORS[ep.method] }}
+                          >
+                            {ep.method}
+                          </span>
+                          <span className="text-[var(--kyro-text-secondary)] truncate">{ep.name}</span>
+                        </button>
+                      ))}
+                    </div>
+                  ))}
                 </div>
-              </div>
-              {folders.length === 0 && (
-                <p className="text-xs text-[var(--kyro-text-muted)] text-center py-4">
-                  No saved requests yet
-                </p>
               )}
-              {folders.map((folder) => (
-                <div key={folder.id}>
-                  <div className="flex items-center justify-between mb-2 px-2">
-                    <h3 className="text-xs font-bold text-[var(--kyro-text-muted)] ">
-                      {folder.name}
-                    </h3>
-                    <button type="button" onClick={() => deleteFolder(folder.id)} className="text-[var(--kyro-text-muted)] hover:text-red-500">
-                      ×
+
+              {sidebarTab === "saved" && (
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between px-2 mb-1">
+                    <button onClick={() => setShowFolderModal(true)} className="text-[10px] font-semibold text-[var(--kyro-primary)] hover:underline flex items-center gap-1">
+                      <Plus className="w-3 h-3" /> Folder
                     </button>
+                    <div className="flex gap-2">
+                      <button onClick={exportData} className="text-[9px] text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">Export</button>
+                      <label className="text-[9px] text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] cursor-pointer">
+                        Import
+                        <input type="file" className="hidden" accept=".json" onChange={(e) => e.target.files?.[0] && importData(e.target.files[0])} />
+                      </label>
+                    </div>
                   </div>
-                  {folder.requests.map((req) => (
-                    <div
-                      key={req.id}
-                      className={`group flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer transition-colors ${selectedRequest?.id === req.id
-                        ? "bg-[var(--kyro-sidebar-active)]"
-                        : "hover:bg-[var(--kyro-surface-accent)]"
-                        }`}
-                      onClick={() => loadRequest(req)}
-                    >
-                      <span
-                        className={`${getMethodColor(req.method)} text-white px-1 py-0.5 rounded text-[10px] font-bold`}
-                      >
-                        {req.method}
-                      </span>
-                      <span className={`flex-1 text-xs truncate ${selectedRequest?.id === req.id ? "text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-secondary)]"}`}>
-                        {req.name}
-                      </span>
-                      <button type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          deleteRequest(req.id);
-                        }}
-                        className="opacity-0 group-hover:opacity-100 text-[var(--kyro-text-muted)] hover:text-red-500"
-                      >
-                        ×
-                      </button>
+                  {folders.length === 0 && (
+                    <p className="text-[10px] text-[var(--kyro-text-muted)] text-center py-4">No saved requests yet</p>
+                  )}
+                  {folders.map((folder) => (
+                    <div key={folder.id}>
+                      <div className="flex items-center justify-between px-2 mb-1">
+                        <h3 className="text-[10px] font-bold text-[var(--kyro-text-muted)]">{folder.name}</h3>
+                        <button onClick={() => deleteFolder(folder.id)} className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)]">
+                          <X className="w-3 h-3" />
+                        </button>
+                      </div>
+                      {folder.requests.map((req) => (
+                        <div
+                          key={req.id}
+                          className={`flex items-center gap-2 px-2 py-1 rounded cursor-pointer transition-colors ${
+                            selectedRequest?.id === req.id
+                              ? "bg-[var(--kyro-primary)] text-white"
+                              : "hover:bg-[var(--kyro-surface-accent)]"
+                          }`}
+                          onClick={() => loadRequest(req)}
+                        >
+                          <span
+                            className="text-white px-1 py-0.5 rounded text-[8px] font-bold"
+                            style={{ backgroundColor: METHOD_COLORS[req.method] }}
+                          >
+                            {req.method}
+                          </span>
+                          <span className={`flex-1 text-[10px] truncate ${selectedRequest?.id === req.id ? "text-white" : "text-[var(--kyro-text-secondary)]"}`}>
+                            {req.name}
+                          </span>
+                          <button onClick={(e) => { e.stopPropagation(); deleteRequest(req.id); }}
+                            className="opacity-0 group-hover:opacity-100 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)]"
+                          >
+                            <X className="w-2.5 h-2.5" />
+                          </button>
+                        </div>
+                      ))}
                     </div>
                   ))}
                 </div>
-              ))}
-            </div>
-          )}
+              )}
 
-          {/* History */}
-          {sidebarTab === "history" && (
-            <div className="space-y-1">
-              <div className="flex justify-end mb-2">
-                <button type="button" onClick={() => setHistory([])} className="text-[10px] font-bold text-red-500 hover:underline">
-                  Clear History
-                </button>
-              </div>
-              {history.map((item) => (
-                <div
-                  key={item.id}
-                  className="p-2 rounded hover:bg-[var(--kyro-surface-accent)] cursor-pointer transition-colors border-b border-[var(--kyro-border)] last:border-0"
-                  onClick={() => {
-                    setCurrentRequest((prev) => ({
-                      ...prev,
-                      method: item.method as SavedRequest["method"],
-                      url: item.url,
-                    }));
-                    setResponse(null);
-                  }}
-                >
-                  <div className="flex items-center justify-between mb-1">
-                    <span
-                      className={`${getMethodColor(item.method)} text-white px-1 py-0.5 rounded text-[10px] font-bold`}
-                    >
-                      {item.method}
-                    </span>
-                    <span
-                      className={`${getStatusColor(item.status)} text-white px-1 py-0.5 rounded text-[10px] font-bold`}
-                    >
-                      {item.status}
-                    </span>
-                  </div>
-                  <div className="text-[10px] text-[var(--kyro-text-secondary)] truncate mb-1">
-                    {item.url}
-                  </div>
-                  <div className="text-[9px] text-[var(--kyro-text-muted)] flex justify-between">
-                    <span>{new Date(item.timestamp).toLocaleTimeString()}</span>
-                    <span>{item.duration}ms</span>
+              {sidebarTab === "history" && (
+                <div className="space-y-1">
+                  <div className="flex justify-end px-2 mb-1">
+                    <button onClick={() => setHistory([])} className="text-[9px] font-semibold text-[var(--kyro-danger)] hover:underline">Clear</button>
                   </div>
+                  {history.map((item) => (
+                    <div
+                      key={item.id}
+                      className="p-1.5 rounded hover:bg-[var(--kyro-surface-accent)] cursor-pointer transition-colors border-b border-[var(--kyro-border)] last:border-0"
+                      onClick={() => { setCurrentRequest((prev) => ({ ...prev, method: item.method, url: item.url })); setResponse(null); }}
+                    >
+                      <div className="flex items-center justify-between gap-1 mb-0.5">
+                        <span className="text-white px-1 py-0.5 rounded text-[8px] font-bold" style={{ backgroundColor: METHOD_COLORS[item.method] }}>
+                          {item.method}
+                        </span>
+                        <span
+                          className="text-white px-1 py-0.5 rounded text-[8px] font-bold"
+                          style={{ backgroundColor: item.status < 400 ? METHOD_COLORS.GET : METHOD_COLORS.DELETE }}
+                        >
+                          {item.status}
+                        </span>
+                      </div>
+                      <div className="text-[9px] text-[var(--kyro-text-secondary)] truncate mb-0.5">{item.url}</div>
+                      <div className="text-[8px] text-[var(--kyro-text-muted)] flex justify-between">
+                        <span>{new Date(item.timestamp).toLocaleTimeString()}</span>
+                        <span>{item.duration}ms</span>
+                      </div>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
-          )}
+              )}
 
-          {/* Environment */}
-          {sidebarTab === "env" && (
-            <div className="space-y-4">
-              <div className="flex justify-between items-center">
-                <h3 className="text-xs font-bold text-[var(--kyro-text-muted)] ">Environment</h3>
-                <button type="button" onClick={clearAllData} className="text-[10px] text-red-500 font-bold hover:underline">Reset All</button>
-              </div>
-              <div className="space-y-3">
-                {envVars.map((env, i) => (
-                  <div key={i} className="p-3 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)] space-y-2">
-                    <div className="flex items-center justify-between">
-                      <span className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)]">{env.key}</span>
-                      <input type="checkbox" checked={env.enabled} onChange={() => {
-                        const next = [...envVars];
-                        next[i].enabled = !next[i].enabled;
-                        setEnvVars(next);
-                      }} />
-                    </div>
-                    <input
-                      type="text"
-                      value={env.value}
-                      onChange={(e) => {
-                        const next = [...envVars];
-                        next[i].value = e.target.value;
-                        setEnvVars(next);
-                      }}
-                      className="w-full bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded px-2 py-1 text-xs"
-                    />
+              {sidebarTab === "env" && (
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center px-2">
+                    <h3 className="text-[10px] font-bold text-[var(--kyro-text-muted)]">Variables</h3>
+                    <button onClick={clearAllData} className="text-[9px] text-[var(--kyro-danger)] font-semibold hover:underline">Reset</button>
                   </div>
-                ))}
-                <button type="button" onClick={() => setEnvVars([...envVars, { key: "", value: "", enabled: true }])} className="w-full py-2 border-2 border-dashed border-[var(--kyro-border)] rounded-lg text-xs text-[var(--kyro-text-muted)] hover:border-pink-500 hover:text-pink-500 transition-all">
-                  + Add Variable
-                </button>
-              </div>
+                  {envVars.map((env, i) => (
+                    <div key={i} className="p-2 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)] space-y-1.5">
+                      <div className="flex items-center justify-between">
+                        <span className="text-[9px] font-bold text-[var(--kyro-text-muted)]">{env.key}</span>
+                        <input type="checkbox" checked={env.enabled} onChange={() => { const n = [...envVars]; n[i].enabled = !n[i].enabled; setEnvVars(n); }} className="accent-[var(--kyro-primary)]" />
+                      </div>
+                      <input type="text" value={env.value} onChange={(e) => { const n = [...envVars]; n[i].value = e.target.value; setEnvVars(n); }}
+                        className="w-full bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded px-2 py-1 text-[10px] font-mono text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+                      />
+                    </div>
+                  ))}
+                  <button onClick={() => setEnvVars([...envVars, { key: "", value: "", enabled: true }])}
+                    className="w-full py-1.5 border-2 border-dashed border-[var(--kyro-border)] rounded-lg text-[10px] text-[var(--kyro-text-muted)] hover:border-[var(--kyro-primary)] hover:text-[var(--kyro-primary)] transition-all"
+                  >
+                    + Add Variable
+                  </button>
+                </div>
+              )}
             </div>
-          )}
-        </div>
-      </div>
-
-      {/* Main Area */}
-      <div className="flex-1 flex flex-col bg-[var(--kyro-bg)]">
-        {/* URL Bar */}
-        <div className="p-4 border-b border-[var(--kyro-border)] flex gap-2">
-          <select
-            value={currentRequest.method}
-            onChange={(e) =>
-              setCurrentRequest({ ...currentRequest, method: e.target.value })
-            }
-            className={`px-3 py-2 rounded-lg font-bold text-white ${getMethodColor(currentRequest.method)}`}
-          >
-            <option value="GET">GET</option>
-            <option value="POST">POST</option>
-            <option value="PATCH">PATCH</option>
-            <option value="DELETE">DELETE</option>
-          </select>
-          <div className="flex-1 relative">
-            <input
-              type="text"
-              value={currentRequest.url}
-              onChange={(e) =>
-                setCurrentRequest({ ...currentRequest, url: e.target.value })
-              }
-              placeholder="Enter request URL..."
-              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-pink-500"
-            />
           </div>
-          <button type="button"
-            onClick={handleSend}
-            disabled={loading}
-            className="px-6 py-2 bg-pink-500 text-white rounded-lg font-bold hover:bg-pink-600 transition-colors disabled:opacity-50"
-          >
-            {loading ? "..." : "Send"}
-          </button>
-          <button type="button"
-            onClick={() => setShowSaveModal(true)}
-            className="px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold hover:bg-[var(--kyro-surface)] border border-[var(--kyro-border)]"
-          >
-            Save
-          </button>
-        </div>
-
-        {/* Request Tabs */}
-        <div className="flex border-b border-[var(--kyro-border)]">
-          {(["params", "headers", "body"] as const).map((tab) => (
-            <button type="button"
-              key={tab}
-              onClick={() => setActiveTab(tab)}
-              className={`px-6 py-2 text-xs font-bold  tracking-widest ${activeTab === tab
-                ? "text-pink-500 border-b-2 border-pink-500"
-                : "text-[var(--kyro-text-muted)]"
-                }`}
+        )}
+
+        {/* Main split area */}
+        <div className="flex-1 flex flex-col md:flex-row overflow-hidden">
+          {/* Mobile panel switcher */}
+          <div className="flex md:hidden border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] px-3 py-1.5 gap-1">
+            <button
+              onClick={() => setMobilePanel("editor")}
+              className={`flex-1 px-3 py-1 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)]"
+              }`}
             >
-              {tab}
+              Request
             </button>
-          ))}
-        </div>
+            <button
+              onClick={() => setMobilePanel("response")}
+              className={`flex-1 px-3 py-1 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)]"
+              }`}
+            >
+              Response
+            </button>
+          </div>
 
-        <div className="flex-1 flex flex-col overflow-hidden">
-          <div className="flex-1 p-4 overflow-y-auto">
-            {activeTab === "params" && (
-              <div className="text-xs text-[var(--kyro-text-muted)]">
-                Use query parameters in the URL (e.g. ?limit=10)
-              </div>
-            )}
-            {activeTab === "headers" && (
-              <div className="space-y-2">
-                <div className="text-xs text-[var(--kyro-text-muted)] mb-4">
-                  Add custom headers as JSON
+          {/* 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={{ width: typeof window !== "undefined" && window.innerWidth >= 768 ? `${splitPos}%` : undefined }}
+          >
+            {/* 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={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)]"
+                  }`}
+                >
+                  {p.label}
+                </button>
+              ))}
+              {activeEditorTab === "body" && (
+                <button onClick={handlePrettifyBody} className="ml-auto px-2 py-1 text-[10px] font-semibold rounded-md text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]">
+                  Prettify
+                </button>
+              )}
+            </div>
+
+            {/* Editor content */}
+            <div className="flex-1 overflow-hidden">
+              {activeEditorTab === "params" && (
+                <div className="flex items-center justify-center h-full text-[11px] text-[var(--kyro-text-muted)]">
+                  Use query parameters in the URL (e.g. <code className="mx-1 px-1 py-0.5 bg-[var(--kyro-surface-accent)] rounded font-mono">?limit=10</code>)
                 </div>
+              )}
+              {activeEditorTab === "headers" && (
                 <textarea
                   value={JSON.stringify(currentRequest.headers, null, 2)}
-                  onChange={(e) => {
-                    try {
-                      const headers = JSON.parse(e.target.value);
-                      setCurrentRequest({ ...currentRequest, headers });
-                    } catch (e) { }
-                  }}
-                  className="w-full h-40 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg p-3 font-mono text-xs focus:outline-none focus:border-pink-500"
+                  onChange={(e) => { try { setCurrentRequest({ ...currentRequest, headers: JSON.parse(e.target.value) }); } catch { /* ignore */ } }}
+                  className="w-full h-full bg-[var(--kyro-bg)] border-0 p-3 font-mono text-[11px] text-[var(--kyro-text-primary)] resize-none focus:outline-none placeholder:text-[var(--kyro-text-muted)]"
                   placeholder='{ "X-Custom-Header": "value" }'
                 />
-              </div>
-            )}
-            {activeTab === "body" && (
-              <div className="h-full flex flex-col">
-                <div className="text-xs text-[var(--kyro-text-muted)] mb-4">
-                  Request Body (JSON)
-                </div>
+              )}
+              {activeEditorTab === "body" && (
                 <textarea
                   value={currentRequest.body}
-                  onChange={(e) =>
-                    setCurrentRequest({ ...currentRequest, body: e.target.value })
-                  }
-                  className="flex-1 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg p-3 font-mono text-xs focus:outline-none focus:border-pink-500 min-h-[200px]"
+                  onChange={(e) => setCurrentRequest({ ...currentRequest, body: e.target.value })}
+                  className="w-full h-full bg-[var(--kyro-bg)] border-0 p-3 font-mono text-[11px] text-[var(--kyro-text-primary)] resize-none focus:outline-none placeholder:text-[var(--kyro-text-muted)]"
                   placeholder='{ "key": "value" }'
                 />
-              </div>
-            )}
+              )}
+            </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>{currentRequest.method} {currentRequest.url || "No URL"}</span>
+              <span>{currentRequest.body?.length || 0} chars</span>
+            </div>
           </div>
 
-          {/* Response Pane */}
-          <div className="h-1/2 border-t border-[var(--kyro-border)] flex flex-col overflow-hidden bg-[var(--kyro-bg-secondary)]">
-            <div className="px-4 py-2 bg-[var(--kyro-surface)] border-b border-[var(--kyro-border)] flex items-center justify-between">
-              <span className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-widest">
-                Response
-              </span>
+          {/* Drag handle - hidden on mobile */}
+          {showSidebar && (
+            <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: Response */}
+          <div
+            className={`${mobilePanel === "response" ? "flex" : "hidden"} md:flex flex-1 flex-col overflow-hidden min-w-0 w-full md:w-auto`}
+            style={{ width: typeof window !== "undefined" && window.innerWidth >= 768 ? (showSidebar ? `${100 - splitPos}%` : "50%") : undefined }}
+          >
+            <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>
               {response && (
-                <div className="flex gap-4">
-                  <span className="text-[10px] font-bold">
-                    STATUS:{" "}
-                    <span className={response.status < 400 ? "text-green-500" : "text-red-500"}>
-                      {response.status}
-                    </span>
-                  </span>
-                  <span className="text-[10px] font-bold text-[var(--kyro-text-muted)]">
-                    TIME: {response.duration}ms
+                <>
+                  {response.duration > 0 && (
+                    <span className="text-[9px] font-mono text-[var(--kyro-text-muted)]">{response.duration}ms</span>
+                  )}
+                  <span className={`text-[9px] font-semibold px-1.5 py-0.5 rounded ${
+                    (response.status as number) < 400 ? "bg-[var(--kyro-success-bg)] text-[var(--kyro-success)]" : "bg-[var(--kyro-danger-bg)] text-[var(--kyro-danger)]"
+                  }`}>
+                    {response.status as number}
                   </span>
-                  <span className="text-[10px] font-bold text-[var(--kyro-text-muted)]">
-                    SIZE: {response.size}B
-                  </span>
-                </div>
+                  <span className="text-[9px] font-mono text-[var(--kyro-text-muted)]">{response.size}B</span>
+                </>
               )}
+              <div className="ml-auto flex items-center gap-1">
+                <button onClick={handleCopyResponse} className="p-1 rounded 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 h-3 text-[var(--kyro-success)]" /> : <Copy className="w-3 h-3" />}
+                </button>
+                <button onClick={handleDownloadResponse} className="p-1 rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Download response">
+                  <Download className="w-3 h-3" />
+                </button>
+              </div>
             </div>
-            <div className="flex-1 p-4 overflow-auto">
+            <div className="flex-1 overflow-auto bg-[var(--kyro-bg-secondary)]">
               {loading ? (
                 <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" />
+                  <div className="animate-spin w-6 h-6 border-2 border-[var(--kyro-primary)] border-t-transparent rounded-full" />
                 </div>
               ) : error ? (
-                <div className="text-red-500 text-sm font-bold">{error}</div>
+                <div className="p-3 m-3 rounded bg-[var(--kyro-danger-bg)] border border-[var(--kyro-danger)]/20 text-[11px] text-[var(--kyro-danger)] font-medium">
+                  ⚠ {error}
+                </div>
               ) : response ? (
-                <pre className="text-xs font-mono text-[var(--kyro-text-primary)]">
+                <pre className="text-[11px] font-mono text-[var(--kyro-text-primary)] whitespace-pre-wrap p-3">
                   {JSON.stringify(response.data, null, 2)}
                 </pre>
               ) : (
-                <div className="h-full flex items-center justify-center text-[var(--kyro-text-muted)] text-sm italic">
-                  Send a request to see the response
+                <div className="flex flex-col items-center justify-center h-full opacity-30">
+                  <Play className="w-10 h-10 mb-2" />
+                  <p className="text-[11px] font-bold">Send a request</p>
                 </div>
               )}
             </div>
@@ -732,58 +715,38 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
       </div>
 
       {/* Modals */}
-      <Modal
-        open={showFolderModal}
-        onClose={() => setShowFolderModal(false)}
-        title="Create Folder"
-        size="md"
+      <Modal open={showFolderModal} onClose={() => setShowFolderModal(false)} title="Create Folder" size="sm"
         footer={
-          <>
-            <button type="button" onClick={() => setShowFolderModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
-            <button type="button" onClick={createFolder} className="kyro-btn kyro-btn-md bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600">Create</button>
-          </>
+          <div className="flex gap-2">
+            <button onClick={() => setShowFolderModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
+            <button onClick={createFolder} className="kyro-btn kyro-btn-md kyro-btn-primary">Create</button>
+          </div>
         }
       >
-        <div className="py-2">
-          <input
-            type="text"
-            value={newFolderName}
-            onChange={(e) => setNewFolderName(e.target.value)}
-            placeholder="Folder name..."
-            className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
-          />
-        </div>
+        <input type="text" value={newFolderName} onChange={(e) => setNewFolderName(e.target.value)}
+          placeholder="Folder name..." className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-3 py-2 text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+        />
       </Modal>
 
-      <Modal
-        open={showSaveModal}
-        onClose={() => setShowSaveModal(false)}
-        title="Save Request"
-        size="md"
+      <Modal open={showSaveModal} onClose={() => setShowSaveModal(false)} title="Save Request" size="sm"
         footer={
-          <>
-            <button type="button" onClick={() => setShowSaveModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
-            <button type="button" onClick={saveRequest} className="kyro-btn kyro-btn-md bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled={!saveRequestName || !saveToFolderId}>Save</button>
-          </>
+          <div className="flex gap-2">
+            <button onClick={() => setShowSaveModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
+            <button onClick={saveRequest} className="kyro-btn kyro-btn-md kyro-btn-primary" disabled={!saveRequestName || !saveToFolderId}>Save</button>
+          </div>
         }
       >
-        <div className="space-y-4 py-2">
+        <div className="space-y-3">
           <div>
-            <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Request Name</label>
-            <input
-              type="text"
-              value={saveRequestName}
-              onChange={(e) => setSaveRequestName(e.target.value)}
-              placeholder="e.g. List Posts..."
-              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
+            <label className="text-[10px] font-bold text-[var(--kyro-text-muted)] block mb-1">Request Name</label>
+            <input type="text" value={saveRequestName} onChange={(e) => setSaveRequestName(e.target.value)}
+              placeholder="e.g. List Posts" className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-3 py-2 text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
             />
           </div>
           <div>
-            <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Folder</label>
-            <select
-              value={saveToFolderId}
-              onChange={(e) => setSaveToFolderId(e.target.value)}
-              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
+            <label className="text-[10px] font-bold text-[var(--kyro-text-muted)] block mb-1">Folder</label>
+            <select value={saveToFolderId} onChange={(e) => setSaveToFolderId(e.target.value)}
+              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-3 py-2 text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
             >
               <option value="">Select Folder...</option>
               {folders.map(f => <option key={f.id} value={f.id}>{f.name}</option>)}