@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/RestPlayground.tsx

@@ -0,0 +1,951 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+
+interface EnvVariable {
+  key: string;
+  value: string;
+  enabled: boolean;
+}
+
+interface RequestFolder {
+  id: string;
+  name: string;
+  requests: SavedRequest[];
+}
+
+interface SavedRequest {
+  id: string;
+  name: string;
+  method: string;
+  url: string;
+  headers: Record<string, string>;
+  body?: string;
+  folderId?: string;
+}
+
+interface HistoryItem {
+  id: string;
+  timestamp: number;
+  method: string;
+  url: string;
+  status: number;
+  duration: number;
+}
+
+interface RestPlaygroundProps {
+  collections?: Array<{
+    name: string;
+    slug: string;
+    endpoints: {
+      list: string;
+      create: string;
+      read: string;
+      update: string;
+      delete: string;
+    };
+  }>;
+}
+
+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 [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",
+    method: "GET",
+    url: "",
+    headers: { "Content-Type": "application/json" },
+    body: "",
+  });
+  const [response, setResponse] = useState<string>("");
+  const [responseStatus, setResponseStatus] = useState<number | null>(null);
+  const [responseTime, setResponseTime] = useState<number | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState<"headers" | "body" | "params">(
+    "headers",
+  );
+  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);
+
+  // 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: "/api", enabled: true },
+        { key: "token", value: "", enabled: true },
+      ]);
+
+    const savedActiveEnv = localStorage.getItem(STORAGE_KEYS.activeEnv);
+    if (savedActiveEnv) setActiveEnv(savedActiveEnv);
+  }, []);
+
+  // Save to localStorage
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEYS.folders, JSON.stringify(folders));
+  }, [folders]);
+
+  useEffect(() => {
+    localStorage.setItem(
+      STORAGE_KEYS.history,
+      JSON.stringify(history.slice(0, 50)),
+    );
+  }, [history]);
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEYS.env, JSON.stringify(envVars));
+  }, [envVars]);
+
+  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);
+      }
+      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);
+    }
+
+    try {
+      const options: RequestInit = {
+        method: currentRequest.method,
+        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 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());
+      }
+
+      // 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");
+    } 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 = (request: SavedRequest) => {
+    setSelectedRequest(request);
+    setCurrentRequest({ ...request });
+    setResponse("");
+    setResponseStatus(null);
+  };
+
+  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 updateHeader = (key: string, value: string) => {
+    setCurrentRequest((prev) => ({
+      ...prev,
+      headers: { ...prev.headers, [key]: value },
+    }));
+  };
+
+  const removeHeader = (key: string) => {
+    const newHeaders = { ...currentRequest.headers };
+    delete newHeaders[key];
+    setCurrentRequest((prev) => ({ ...prev, headers: newHeaders }));
+  };
+
+  const addHeader = () => {
+    setCurrentRequest((prev) => ({
+      ...prev,
+      headers: { ...prev.headers, "": "" },
+    }));
+  };
+
+  const getMethodColor = (method: string) => {
+    switch (method) {
+      case "GET":
+        return "bg-green-500";
+      case "POST":
+        return "bg-blue-500";
+      case "PUT":
+        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);
+    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 a = document.createElement("a");
+    a.href = url;
+    a.download = `kyro-rest-playground-${Date.now()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  // 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]);
+        }
+
+        alert("Import successful!");
+      } catch (error) {
+        alert("Failed to import: Invalid JSON file");
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  // 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);
+    }
+  };
+
+  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>
+
+        {/* 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)] uppercase 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 any,
+                          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>
+          )}
+
+          {/* Saved */}
+          {sidebarTab === "saved" && (
+            <div className="space-y-3">
+              {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}>
+                  <h3 className="text-xs font-bold text-[var(--kyro-text-muted)] uppercase mb-2 px-2">
+                    {folder.name}
+                  </h3>
+                  {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 text-[var(--kyro-text-secondary)] truncate">
+                        {req.name}
+                      </span>
+                      <button type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          deleteRequest(req.id);
+                        }}
+                        className="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-600"
+                      >
+                        <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>
+              )}
+              {history.map((item) => (
+                <button type="button"
+                  key={item.id}
+                  onClick={() => {
+                    setCurrentRequest((prev) => ({
+                      ...prev,
+                      method: item.method as any,
+                      url: item.url,
+                    }));
+                    setResponse("");
+                  }}
+                  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>
+                  <span
+                    className={`${getStatusColor(item.status)} text-white px-1.5 py-0.5 rounded text-[10px] font-bold`}
+                  >
+                    {item.status || "ERR"}
+                  </span>
+                </button>
+              ))}
+            </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
+                </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">
+        {/* URL Bar */}
+        <div className="flex items-center gap-3 p-4 border-b border-[var(--kyro-border)]">
+          <select
+            value={currentRequest.method}
+            onChange={(e) =>
+              setCurrentRequest((prev) => ({ ...prev, method: e.target.value }))
+            }
+            className={`px-3 py-2 rounded-lg font-bold text-sm ${getMethodColor(currentRequest.method)} text-white`}
+          >
+            {["GET", "POST", "PUT", "PATCH", "DELETE"].map((m) => (
+              <option key={m} value={m}>
+                {m}
+              </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"
+          />
+          <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"
+          >
+            {loading ? "Sending..." : "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"
+          >
+            <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>
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-[var(--kyro-border)]">
+          {(["headers", "body", "params"] 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)]"
+              }`}
+            >
+              {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>
+              )}
+            </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>
+              ))}
+              <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>
+
+        {/* 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
+                    </span>
+                  )}
+                </>
+              )}
+            </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 */}
+      {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="space-y-4">
+              <div>
+                <label className="block text-sm font-bold text-[var(--kyro-text-secondary)] mb-1">
+                  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"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-bold text-[var(--kyro-text-secondary)] 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"
+                >
+                  <option value="">Uncategorized</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>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}