@kyro-cms/admin 0.3.2 → 0.3.4

package/src/components/RestPlayground.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useUIStore } from "../lib/stores";
+import { apiPath } from "../lib/paths";
 
 interface EnvVariable {
   key: string;
@@ -49,41 +51,38 @@ const STORAGE_KEYS = {
   folders: "kyro-rest-folders",
   history: "kyro-rest-history",
   env: "kyro-rest-env",
-  activeEnv: "kyro-rest-active-env",
 };
 
 export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
+  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 [activeEnv, setActiveEnv] = useState<string>("default");
   const [selectedRequest, setSelectedRequest] = useState<SavedRequest | null>(
     null,
   );
   const [currentRequest, setCurrentRequest] = useState<SavedRequest>({
-    id: "",
-    name: "New Request",
+    id: "new",
+    name: "Untitled Request",
     method: "GET",
     url: "",
-    headers: { "Content-Type": "application/json" },
+    headers: {},
     body: "",
   });
-  const [response, setResponse] = useState<string>("");
-  const [responseStatus, setResponseStatus] = useState<number | null>(null);
-  const [responseTime, setResponseTime] = useState<number | null>(null);
+  const [response, setResponse] = useState<Record<string, unknown> | null>(null);
   const [loading, setLoading] = useState(false);
-  const [activeTab, setActiveTab] = useState<"headers" | "body" | "params">(
-    "headers",
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<"params" | "headers" | "body">(
+    "params",
   );
+  const [showFolderModal, setShowFolderModal] = useState(false);
   const [showSaveModal, setShowSaveModal] = useState(false);
-  const [showEnvModal, setShowEnvModal] = useState(false);
-  const [showExportModal, setShowExportModal] = useState(false);
-  const [saveName, setSaveName] = useState("");
-  const [saveFolder, setSaveFolder] = useState<string | null>(null);
-  const [sidebarTab, setSidebarTab] = useState<
-    "collections" | "saved" | "history" | "env"
-  >("collections");
-  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const [newFolderName, setNewFolderName] = useState("");
+  const [saveToFolderId, setSaveToFolderId] = useState("");
+  const [saveRequestName, setSaveRequestName] = useState("");
+  const { confirm, alert } = useUIStore();
 
   // Load from localStorage
   useEffect(() => {
@@ -97,184 +96,160 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
     if (savedEnv) setEnvVars(JSON.parse(savedEnv));
     else
       setEnvVars([
-        { key: "baseUrl", value: "/api", enabled: true },
+        { key: "baseUrl", value: apiPath, enabled: true },
         { key: "token", value: "", enabled: true },
       ]);
 
-    const savedActiveEnv = localStorage.getItem(STORAGE_KEYS.activeEnv);
-    if (savedActiveEnv) setActiveEnv(savedActiveEnv);
+    setIsMounted(true);
   }, []);
 
+  const [isMounted, setIsMounted] = useState(false);
+
   // Save to localStorage
   useEffect(() => {
-    localStorage.setItem(STORAGE_KEYS.folders, JSON.stringify(folders));
-  }, [folders]);
+    if (isMounted) {
+      localStorage.setItem(STORAGE_KEYS.folders, JSON.stringify(folders));
+    }
+  }, [folders, isMounted]);
 
   useEffect(() => {
-    localStorage.setItem(
-      STORAGE_KEYS.history,
-      JSON.stringify(history.slice(0, 50)),
-    );
-  }, [history]);
+    if (isMounted) {
+      localStorage.setItem(STORAGE_KEYS.history, JSON.stringify(history));
+    }
+  }, [history, isMounted]);
 
   useEffect(() => {
-    localStorage.setItem(STORAGE_KEYS.env, JSON.stringify(envVars));
-  }, [envVars]);
+    if (isMounted) {
+      localStorage.setItem(STORAGE_KEYS.env, JSON.stringify(envVars));
+    }
+  }, [envVars, isMounted]);
 
-  useEffect(() => {
-    localStorage.setItem(STORAGE_KEYS.activeEnv, activeEnv);
-  }, [activeEnv]);
-
-  const replaceEnvVars = useCallback(
-    (text: string): string => {
-      if (!text) return text;
-      let result = text;
-      for (const env of envVars.filter((e) => e.enabled)) {
-        const pattern = new RegExp(`\\{\\{${env.key}\\}\\}`, "g");
-        result = result.replace(pattern, env.value);
+  const resolveUrl = (url: string) => {
+    let resolved = url;
+    envVars.forEach((v) => {
+      if (v.enabled) {
+        resolved = resolved.replace(`{{${v.key}}}`, v.value);
       }
-      return result;
-    },
-    [envVars],
-  );
-
-  const executeRequest = async () => {
-    const url = replaceEnvVars(currentRequest.url);
-    if (!url) return;
-
-    setLoading(true);
-    setResponse("");
-    setResponseStatus(null);
-    setResponseTime(null);
-
-    const startTime = performance.now();
-    const headers: Record<string, string> = {};
-    for (const [key, value] of Object.entries(currentRequest.headers)) {
-      headers[key] = replaceEnvVars(value);
+    });
+    // Default base URL if relative
+    if (resolved.startsWith("/")) {
+      const baseUrl = envVars.find((v) => v.key === "baseUrl" && v.enabled)?.value || apiPath;
+      resolved = `${baseUrl}${resolved}`;
     }
+    return resolved;
+  };
 
+  const handleSend = async () => {
+    setLoading(true);
+    setError(null);
+    const start = Date.now();
     try {
-      const options: RequestInit = {
-        method: currentRequest.method,
-        headers,
-      };
+      const url = resolveUrl(currentRequest.url);
+      const headers: Record<string, string> = { ...currentRequest.headers };
 
-      if (
-        ["POST", "PUT", "PATCH"].includes(currentRequest.method) &&
-        currentRequest.body
-      ) {
-        options.body = replaceEnvVars(currentRequest.body);
-      }
-
-      const res = await fetch(url, options);
-      const endTime = performance.now();
-
-      setResponseStatus(res.status);
-      setResponseTime(Math.round(endTime - startTime));
+      const token = envVars.find(v => v.key === 'token' && v.enabled)?.value;
+      if (token) headers['Authorization'] = `Bearer ${token}`;
 
-      const contentType = res.headers.get("content-type");
-      if (contentType?.includes("application/json")) {
-        const data = await res.json();
-        setResponse(JSON.stringify(data, null, 2));
-      } else {
-        setResponse(await res.text());
-      }
+      const res = await fetch(url, {
+        method: currentRequest.method,
+        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,
+      });
 
       // Add to history
-      setHistory((prev) =>
-        [
-          {
-            id: Date.now().toString(),
-            timestamp: Date.now(),
-            method: currentRequest.method,
-            url: currentRequest.url,
-            status: res.status,
-            duration: Math.round(endTime - startTime),
-          },
-          ...prev,
-        ].slice(0, 50),
-      );
-    } catch (error) {
-      setResponseStatus(0);
-      setResponse(error instanceof Error ? error.message : "Request failed");
+      const historyItem: HistoryItem = {
+        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);
     } finally {
       setLoading(false);
     }
   };
 
-  const saveRequest = () => {
-    const request: SavedRequest = {
-      ...currentRequest,
-      id: currentRequest.id || Date.now().toString(),
-      name: saveName || currentRequest.name,
-      folderId: saveFolder || undefined,
-    };
-
-    if (saveFolder) {
-      setFolders((prev) =>
-        prev
-          .map((f) =>
-            f.id === saveFolder
-              ? { ...f, requests: [...f.requests, request] }
-              : f,
-          )
-          .concat(
-            prev.find((f) => f.id === saveFolder)
-              ? []
-              : [{ id: saveFolder, name: saveFolder, requests: [request] }],
-          ),
-      );
-    } else {
-      setFolders((prev) => [
-        ...prev,
-        { id: "default", name: "Uncategorized", requests: [request] },
-      ]);
-    }
-
-    setCurrentRequest(request);
-    setShowSaveModal(false);
-    setSaveName("");
+  const loadRequest = (req: SavedRequest) => {
+    setCurrentRequest(req);
+    setSelectedRequest(req);
+    setResponse(null);
+    setError(null);
   };
 
-  const loadRequest = (request: SavedRequest) => {
-    setSelectedRequest(request);
-    setCurrentRequest({ ...request });
-    setResponse("");
-    setResponseStatus(null);
+  const createFolder = () => {
+    if (!newFolderName.trim()) return;
+    const newFolder: RequestFolder = {
+      id: Date.now().toString(),
+      name: newFolderName,
+      requests: [],
+    };
+    setFolders((prev) => [...prev, newFolder]);
+    setNewFolderName("");
+    setShowFolderModal(false);
   };
 
-  const deleteRequest = (requestId: string) => {
-    setFolders((prev) =>
-      prev
-        .map((f) => ({
-          ...f,
-          requests: f.requests.filter((r) => r.id !== requestId),
-        }))
-        .filter((f) => f.requests.length > 0),
-    );
-    if (selectedRequest?.id === requestId) {
-      setSelectedRequest(null);
-    }
+  const deleteFolder = (id: string) => {
+    confirm({
+      title: "Delete Folder",
+      message: "Are you sure? All requests inside will be deleted.",
+      variant: "danger",
+      onConfirm: () => {
+        setFolders((prev) => prev.filter((f) => f.id !== id));
+      }
+    });
   };
 
-  const updateHeader = (key: string, value: string) => {
-    setCurrentRequest((prev) => ({
-      ...prev,
-      headers: { ...prev.headers, [key]: value },
-    }));
-  };
+  const saveRequest = () => {
+    if (!saveRequestName.trim() || !saveToFolderId) return;
 
-  const removeHeader = (key: string) => {
-    const newHeaders = { ...currentRequest.headers };
-    delete newHeaders[key];
-    setCurrentRequest((prev) => ({ ...prev, headers: newHeaders }));
+    const newSavedRequest: SavedRequest = {
+      ...currentRequest,
+      id: Date.now().toString(),
+      name: saveRequestName,
+      folderId: saveToFolderId,
+    };
+
+    setFolders((prev) =>
+      prev.map((f) =>
+        f.id === saveToFolderId
+          ? { ...f, requests: [...f.requests, newSavedRequest] }
+          : f,
+      ),
+    );
+    setSelectedRequest(newSavedRequest);
+    setShowSaveModal(false);
   };
 
-  const addHeader = () => {
-    setCurrentRequest((prev) => ({
-      ...prev,
-      headers: { ...prev.headers, "": "" },
-    }));
+  const deleteRequest = (id: string) => {
+    setFolders((prev) =>
+      prev.map((f) => ({
+        ...f,
+        requests: f.requests.filter((r) => r.id !== id),
+      })),
+    );
+    if (selectedRequest?.id === id) setSelectedRequest(null);
   };
 
   const getMethodColor = (method: string) => {
@@ -283,8 +258,6 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
         return "bg-green-500";
       case "POST":
         return "bg-blue-500";
-      case "PUT":
-        return "bg-blue-500";
       case "PATCH":
         return "bg-yellow-500";
       case "DELETE":
@@ -352,9 +325,9 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
           setEnvVars((prev) => [...prev, ...data.envVars]);
         }
 
-        alert("Import successful!");
+        alert({ title: "Import Successful", message: "Your playground data has been imported." });
       } catch (error) {
-        alert("Failed to import: Invalid JSON file");
+        alert({ title: "Import Failed", message: "Invalid JSON file structure." });
       }
     };
     reader.readAsText(file);
@@ -362,21 +335,22 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
 
   // Clear all data
   const clearAllData = () => {
-    if (
-      confirm(
-        "Are you sure you want to clear all saved requests, history, and environment variables?",
-      )
-    ) {
-      setFolders([]);
-      setHistory([]);
-      setEnvVars([
-        { key: "baseUrl", value: "/api", enabled: true },
-        { key: "token", value: "", enabled: true },
-      ]);
-      localStorage.removeItem(STORAGE_KEYS.folders);
-      localStorage.removeItem(STORAGE_KEYS.history);
-      localStorage.removeItem(STORAGE_KEYS.env);
-    }
+    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.",
+      variant: "danger",
+      onConfirm: () => {
+        setFolders([]);
+        setHistory([]);
+        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);
+      }
+    });
   };
 
   return (
@@ -389,11 +363,10 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
             <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)]"
-              }`}
+              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>
@@ -407,7 +380,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
             <div className="space-y-3">
               {collections.map((col) => (
                 <div key={col.slug}>
-                  <h3 className="text-xs font-bold text-[var(--kyro-text-muted)] uppercase mb-2 px-2">
+                  <h3 className="text-xs font-bold text-[var(--kyro-text-muted)]  mb-2 px-2">
                     {col.name}
                   </h3>
                   {[
@@ -438,7 +411,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
                       onClick={() => {
                         setCurrentRequest((prev) => ({
                           ...prev,
-                          method: endpoint.method as any,
+                          method: endpoint.method as SavedRequest["method"],
                           url: endpoint.path,
                           name: `${col.name} - ${endpoint.name}`,
                         }));
@@ -464,6 +437,23 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
           {/* 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>
+              </div>
               {folders.length === 0 && (
                 <p className="text-xs text-[var(--kyro-text-muted)] text-center py-4">
                   No saved requests yet
@@ -471,17 +461,21 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
               )}
               {folders.map((folder) => (
                 <div key={folder.id}>
-                  <h3 className="text-xs font-bold text-[var(--kyro-text-muted)] uppercase mb-2 px-2">
-                    {folder.name}
-                  </h3>
+                  <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">
+                      ×
+                    </button>
+                  </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)]"
-                      }`}
+                      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
@@ -489,7 +483,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
                       >
                         {req.method}
                       </span>
-                      <span className="flex-1 text-xs text-[var(--kyro-text-secondary)] truncate">
+                      <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"
@@ -497,451 +491,295 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
                           e.stopPropagation();
                           deleteRequest(req.id);
                         }}
-                        className="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-600"
+                        className="opacity-0 group-hover:opacity-100 text-[var(--kyro-text-muted)] hover:text-red-500"
                       >
-                        <svg
-                          className="w-3 h-3"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M6 18L18 6M6 6l12 12"
-                          />
-                        </svg>
+                        ×
                       </button>
                     </div>
                   ))}
                 </div>
               ))}
-
-              {/* Export/Import/Clear Actions */}
-              <div className="flex gap-2 mt-4 pt-4 border-t border-[var(--kyro-border]">
-                <button type="button"
-                  onClick={exportData}
-                  className="flex-1 px-3 py-2 text-xs font-bold bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] rounded-lg hover:bg-[var(--kyro-surface)] transition-colors"
-                  title="Export all data"
-                >
-                  Export
-                </button>
-                <button type="button"
-                  onClick={() => fileInputRef.current?.click()}
-                  className="flex-1 px-3 py-2 text-xs font-bold bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] rounded-lg hover:bg-[var(--kyro-surface)] transition-colors"
-                  title="Import data"
-                >
-                  Import
-                </button>
-                <button type="button"
-                  onClick={clearAllData}
-                  className="px-3 py-2 text-xs font-bold bg-red-500/10 text-red-600 rounded-lg hover:bg-red-500/20 transition-colors"
-                  title="Clear all data"
-                >
-                  <svg
-                    className="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept=".json"
-                onChange={(e) => {
-                  const file = e.target.files?.[0];
-                  if (file) importData(file);
-                  e.target.value = "";
-                }}
-                className="hidden"
-              />
             </div>
           )}
 
           {/* History */}
           {sidebarTab === "history" && (
             <div className="space-y-1">
-              {history.length === 0 && (
-                <p className="text-xs text-[var(--kyro-text-muted)] text-center py-4">
-                  No history yet
-                </p>
-              )}
+              <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) => (
-                <button type="button"
+                <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 any,
+                      method: item.method as SavedRequest["method"],
                       url: item.url,
                     }));
-                    setResponse("");
+                    setResponse(null);
                   }}
-                  className="w-full flex items-center gap-2 px-2 py-2 rounded hover:bg-[var(--kyro-surface-accent)] transition-colors"
                 >
-                  <span
-                    className={`${getMethodColor(item.method)} text-white px-1 py-0.5 rounded text-[10px] font-bold`}
-                  >
-                    {item.method}
-                  </span>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-xs text-[var(--kyro-text-secondary)] truncate">
-                      {item.url}
-                    </p>
-                    <p className="text-[10px] text-[var(--kyro-text-muted)]">
-                      {new Date(item.timestamp).toLocaleTimeString()} •{" "}
-                      {item.duration}ms
-                    </p>
+                  <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>
-                  <span
-                    className={`${getStatusColor(item.status)} text-white px-1.5 py-0.5 rounded text-[10px] font-bold`}
-                  >
-                    {item.status || "ERR"}
-                  </span>
-                </button>
+                  <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>
+                  </div>
+                </div>
               ))}
             </div>
           )}
 
           {/* Environment */}
           {sidebarTab === "env" && (
-            <div className="space-y-3">
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-xs font-bold text-[var(--kyro-text-muted)] uppercase">
-                  Variables
-                </span>
-                <button type="button"
-                  onClick={() => {
-                    setEnvVars((prev) => [
-                      ...prev,
-                      { key: "", value: "", enabled: true },
-                    ]);
-                  }}
-                  className="text-xs text-pink-500 hover:text-pink-600"
-                >
-                  + Add
+            <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"
+                    />
+                  </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="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    checked={env.enabled}
-                    onChange={(e) => {
-                      const newVars = [...envVars];
-                      newVars[i].enabled = e.target.checked;
-                      setEnvVars(newVars);
-                    }}
-                    className="rounded"
-                  />
-                  <input
-                    type="text"
-                    value={env.key}
-                    onChange={(e) => {
-                      const newVars = [...envVars];
-                      newVars[i].key = e.target.value;
-                      setEnvVars(newVars);
-                    }}
-                    placeholder="key"
-                    className="flex-1 px-2 py-1 text-xs bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded"
-                  />
-                  <input
-                    type="text"
-                    value={env.value}
-                    onChange={(e) => {
-                      const newVars = [...envVars];
-                      newVars[i].value = e.target.value;
-                      setEnvVars(newVars);
-                    }}
-                    placeholder="value"
-                    className="flex-1 px-2 py-1 text-xs bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded"
-                  />
-                  <button type="button"
-                    onClick={() =>
-                      setEnvVars((prev) => prev.filter((_, j) => j !== i))
-                    }
-                    className="text-red-500 hover:text-red-600"
-                  >
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M6 18L18 6M6 6l12 12"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              ))}
-              <p className="text-xs text-[var(--kyro-text-muted)]">
-                Use {"{{variableName}}"} in URLs, headers, and body
-              </p>
             </div>
           )}
         </div>
       </div>
 
-      {/* Main Content */}
-      <div className="flex-1 flex flex-col min-w-0">
+      {/* Main Area */}
+      <div className="flex-1 flex flex-col bg-[var(--kyro-bg)]">
         {/* URL Bar */}
-        <div className="flex items-center gap-3 p-4 border-b border-[var(--kyro-border)]">
+        <div className="p-4 border-b border-[var(--kyro-border)] flex gap-2">
           <select
             value={currentRequest.method}
             onChange={(e) =>
-              setCurrentRequest((prev) => ({ ...prev, method: e.target.value }))
+              setCurrentRequest({ ...currentRequest, method: e.target.value })
             }
-            className={`px-3 py-2 rounded-lg font-bold text-sm ${getMethodColor(currentRequest.method)} text-white`}
+            className={`px-3 py-2 rounded-lg font-bold text-white ${getMethodColor(currentRequest.method)}`}
           >
-            {["GET", "POST", "PUT", "PATCH", "DELETE"].map((m) => (
-              <option key={m} value={m}>
-                {m}
-              </option>
-            ))}
+            <option value="GET">GET</option>
+            <option value="POST">POST</option>
+            <option value="PATCH">PATCH</option>
+            <option value="DELETE">DELETE</option>
           </select>
-          <input
-            type="text"
-            value={currentRequest.url}
-            onChange={(e) =>
-              setCurrentRequest((prev) => ({ ...prev, url: e.target.value }))
-            }
-            placeholder="Enter URL or paste {{variable}}"
-            className="flex-1 px-4 py-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg text-sm font-mono focus:outline-none focus:border-pink-500"
-          />
+          <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={executeRequest}
-            disabled={loading || !currentRequest.url}
-            className="px-6 py-2 bg-pink-500 text-white rounded-lg font-bold text-sm hover:bg-pink-600 disabled:opacity-50 transition-colors"
+            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 ? "Sending..." : "Send"}
+            {loading ? "..." : "Send"}
           </button>
           <button type="button"
             onClick={() => setShowSaveModal(true)}
-            className="px-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-colors"
-            title="Save request"
-          >
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
-              />
-            </svg>
-          </button>
-          <button type="button"
-            onClick={duplicateRequest}
-            className="px-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-colors"
-            title="Duplicate"
+            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)]"
           >
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-              />
-            </svg>
+            Save
           </button>
         </div>
 
-        {/* Tabs */}
+        {/* Request Tabs */}
         <div className="flex border-b border-[var(--kyro-border)]">
-          {(["headers", "body", "params"] as const).map((tab) => (
+          {(["params", "headers", "body"] as const).map((tab) => (
             <button type="button"
               key={tab}
               onClick={() => setActiveTab(tab)}
-              className={`px-4 py-2 text-sm font-bold transition-colors ${
-                activeTab === 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)]"
-              }`}
+              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)]"
+                }`}
             >
-              {tab.charAt(0).toUpperCase() + tab.slice(1)}
-              {tab === "headers" && (
-                <span className="ml-2 text-xs text-[var(--kyro-text-muted)]">
-                  ({Object.keys(currentRequest.headers).filter((k) => k).length}
-                  )
-                </span>
-              )}
+              {tab}
             </button>
           ))}
         </div>
 
-        {/* Tab Content */}
-        <div className="flex-1 overflow-auto p-4">
-          {activeTab === "headers" && (
-            <div className="space-y-2">
-              {Object.entries(currentRequest.headers).map(([key, value], i) => (
-                <div key={i} className="flex items-center gap-2">
-                  <input
-                    type="text"
-                    value={key}
-                    onChange={(e) => updateHeader(e.target.value, value)}
-                    placeholder="Header name"
-                    className="flex-1 px-3 py-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded text-sm focus:outline-none focus:border-pink-500"
-                  />
-                  <input
-                    type="text"
-                    value={value}
-                    onChange={(e) => updateHeader(key, e.target.value)}
-                    placeholder="Value"
-                    className="flex-1 px-3 py-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded text-sm font-mono focus:outline-none focus:border-pink-500"
-                  />
-                  <button type="button"
-                    onClick={() => removeHeader(key)}
-                    className="p-2 text-red-500 hover:text-red-600"
-                  >
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M6 18L18 6M6 6l12 12"
-                      />
-                    </svg>
-                  </button>
+        <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
                 </div>
-              ))}
-              <button type="button"
-                onClick={addHeader}
-                className="text-xs text-pink-500 hover:text-pink-600 font-medium"
-              >
-                + Add Header
-              </button>
-            </div>
-          )}
-
-          {activeTab === "body" && (
-            <textarea
-              value={currentRequest.body}
-              onChange={(e) =>
-                setCurrentRequest((prev) => ({ ...prev, body: e.target.value }))
-              }
-              placeholder='{"key": "value"}'
-              className="w-full h-full min-h-[200px] p-4 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg text-sm font-mono resize-none focus:outline-none focus:border-pink-500"
-            />
-          )}
-
-          {activeTab === "params" && (
-            <div className="text-sm text-[var(--kyro-text-secondary)]">
-              <p>Add query parameters to your URL using:</p>
-              <code className="block mt-2 p-2 bg-[var(--kyro-surface-accent)] rounded text-xs">
-                ?param1=value1&param2=value2
-              </code>
-            </div>
-          )}
-        </div>
+                <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"
+                  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>
+                <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]"
+                  placeholder='{ "key": "value" }'
+                />
+              </div>
+            )}
+          </div>
 
-        {/* Response */}
-        <div className="border-t border-[var(--kyro-border)]">
-          <div className="flex items-center justify-between px-4 py-2 bg-[var(--kyro-surface-accent)]">
-            <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
-              Response
-            </span>
-            <div className="flex items-center gap-3">
-              {responseStatus && (
-                <>
-                  <span
-                    className={`px-2 py-0.5 rounded text-xs font-bold text-white ${getStatusColor(responseStatus)}`}
-                  >
-                    {responseStatus}
-                  </span>
-                  {responseTime && (
-                    <span className="text-xs text-[var(--kyro-text-muted)]">
-                      {responseTime}ms
+          {/* 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>
+              {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
+                  </span>
+                  <span className="text-[10px] font-bold text-[var(--kyro-text-muted)]">
+                    SIZE: {response.size}B
+                  </span>
+                </div>
+              )}
+            </div>
+            <div className="flex-1 p-4 overflow-auto">
+              {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>
+              ) : error ? (
+                <div className="text-red-500 text-sm font-bold">{error}</div>
+              ) : response ? (
+                <pre className="text-xs font-mono text-[var(--kyro-text-primary)]">
+                  {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>
               )}
             </div>
           </div>
-          <pre className="max-h-64 overflow-auto p-4 text-xs font-mono bg-[var(--kyro-surface)]">
-            {response || "Send a request to see the response"}
-          </pre>
         </div>
       </div>
 
-      {/* Save Modal */}
+      {/* Modals */}
+      {showFolderModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
+          <div className="surface-tile w-full max-w-md p-6 rounded-2xl shadow-2xl border border-[var(--kyro-border)]">
+            <h2 className="text-xl font-bold mb-4">Create Folder</h2>
+            <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 mb-6"
+            />
+            <div className="p-4 border-t border-[var(--kyro-border)] flex justify-end gap-2 bg-[var(--kyro-surface-accent)]">
+              <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 kyro-btn-primary bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600">Create</button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showSaveModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-[var(--kyro-surface)] rounded-lg p-6 w-96 border border-[var(--kyro-border)]">
-            <h3 className="text-lg font-bold text-[var(--kyro-text-primary)] mb-4">
-              Save Request
-            </h3>
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
+          <div className="surface-tile w-full max-w-md p-6 rounded-2xl shadow-2xl border border-[var(--kyro-border)]">
+            <h2 className="text-xl font-bold mb-4">Save Request</h2>
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-bold text-[var(--kyro-text-secondary)] mb-1">
-                  Name
-                </label>
+                <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Request Name</label>
                 <input
                   type="text"
-                  value={saveName}
-                  onChange={(e) => setSaveName(e.target.value)}
-                  placeholder={currentRequest.name}
-                  className="w-full px-3 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded text-sm focus:outline-none focus:border-pink-500"
+                  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"
                 />
               </div>
               <div>
-                <label className="block text-sm font-bold text-[var(--kyro-text-secondary)] mb-1">
-                  Folder
-                </label>
+                <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Folder</label>
                 <select
-                  value={saveFolder || ""}
-                  onChange={(e) => setSaveFolder(e.target.value || null)}
-                  className="w-full px-3 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded text-sm focus:outline-none focus:border-pink-500"
+                  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"
                 >
-                  <option value="">Uncategorized</option>
-                  {folders.map((f) => (
-                    <option key={f.id} value={f.id}>
-                      {f.name}
-                    </option>
-                  ))}
+                  <option value="">Select Folder...</option>
+                  {folders.map(f => <option key={f.id} value={f.id}>{f.name}</option>)}
                 </select>
               </div>
             </div>
-            <div className="flex gap-3 mt-6">
-              <button type="button"
-                onClick={() => setShowSaveModal(false)}
-                className="flex-1 px-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)]"
-              >
-                Cancel
-              </button>
-              <button type="button"
-                onClick={saveRequest}
-                className="flex-1 px-4 py-2 bg-pink-500 text-white rounded-lg font-bold text-sm hover:bg-pink-600"
-              >
-                Save
-              </button>
+            <div className="p-4 border-t border-[var(--kyro-border)] flex justify-end gap-2 bg-[var(--kyro-surface-accent)]">
+              <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 kyro-btn-primary 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>
           </div>
         </div>