@nextsparkjs/core 0.1.0-beta.181 → 0.1.0-beta.183

package/dist/components/api/keys/CreateApiKeyDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateApiKeyDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/api/keys/CreateApiKeyDialog.tsx"],"names":[],"mappings":"AA+BA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC3G;AAED,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,uBAAuB,2CAgRvF"}
+{"version":3,"file":"CreateApiKeyDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/api/keys/CreateApiKeyDialog.tsx"],"names":[],"mappings":"AA+BA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC3G;AAuBD,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,uBAAuB,2CAkRvF"}

package/dist/components/api/keys/CreateApiKeyDialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { Button } from "../../ui/button.js";
 import { Input } from "../../ui/input.js";
@@ -26,11 +26,27 @@ import { Badge } from "../../ui/badge.js";
 import { Separator } from "../../ui/separator.js";
 import { AlertTriangle, Info } from "lucide-react";
 import { toast } from "sonner";
-import { API_SCOPES, SCOPE_CATEGORIES } from "../../../lib/api/keys.js";
+import { SCOPE_CATEGORIES, getApiScopes, getAppApiScopes } from "../../../lib/api/keys.js";
 import { sel } from "../../../lib/test/index.js";
+function useScopeCatalogue() {
+  return useMemo(() => {
+    const appScopes = Object.keys(getAppApiScopes());
+    if (appScopes.length === 0) return SCOPE_CATEGORIES;
+    return {
+      ...SCOPE_CATEGORIES,
+      app: {
+        name: "Aplicaci\xF3n",
+        description: "Scopes que esta aplicaci\xF3n define para sus propias rutas",
+        scopes: appScopes
+      }
+    };
+  }, []);
+}
 function CreateApiKeyDialog({ open, onClose, onSuccess }) {
   const [name, setName] = useState("");
   const [selectedScopes, setSelectedScopes] = useState([]);
+  const scopeCatalogue = useScopeCatalogue();
+  const scopeLabels = useMemo(() => getApiScopes(), []);
   const [expiresAt, setExpiresAt] = useState("");
   const [expiryOption, setExpiryOption] = useState("never");
   const createApiKey = useMutation({
@@ -168,7 +184,7 @@ function CreateApiKeyDialog({ open, onClose, onSuccess }) {
           /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx(AlertDescription, { children: "Solo puedes asignar permisos que tu rol actual permite. Los permisos no se pueden cambiar despu\xE9s de crear la API key." })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.entries(SCOPE_CATEGORIES).map(([categoryKey, category]) => {
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.entries(scopeCatalogue).map(([categoryKey, category]) => {
           const isFullySelected = isCategoryFullySelected(category.scopes);
           const isPartiallySelected = isCategoryPartiallySelected(category.scopes);
           return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -208,7 +224,7 @@ function CreateApiKeyDialog({ open, onClose, onSuccess }) {
               ),
               /* @__PURE__ */ jsxs(Label, { htmlFor: scope, className: "text-sm", children: [
                 /* @__PURE__ */ jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded mr-2", children: scope }),
-                API_SCOPES[scope]
+                scopeLabels[scope]
               ] })
             ] }, scope)) }),
             categoryKey !== "system" && /* @__PURE__ */ jsx(Separator, {})

package/dist/components/devtools/api-explorer/ApiEndpointsSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiEndpointsSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiEndpointsSidebar.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAC5F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AA4CrD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,UAAU,CAAA;CACnB;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,aAAa,EAAE,CAAC,CAAA;IAC9C,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAClF,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,GACjB,EAAE,wBAAwB,2CAkQ1B"}
+{"version":3,"file":"ApiEndpointsSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiEndpointsSidebar.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAC5F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AA4CrD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,UAAU,CAAA;CACnB;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,aAAa,EAAE,CAAC,CAAA;IAC9C,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAClF,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,GACjB,EAAE,wBAAwB,2CAyQ1B"}

package/dist/components/devtools/api-explorer/ApiEndpointsSidebar.js

@@ -50,7 +50,10 @@ function ApiEndpointsSidebar({
   });
   const [expandedPrefixes, setExpandedPrefixes] = useState(() => {
     const saved = loadState("sidebar:expandedPrefixes");
-    return new Set(saved ?? []);
+    if (saved) return new Set(saved);
+    return new Set(
+      groupByPathPrefix(routes.theme ?? []).map((group) => `theme:${group.prefix}`)
+    );
   });
   useEffect(() => {
     saveState("sidebar:expandedCategories", Array.from(expandedCategories));

package/dist/components/devtools/api-explorer/ApiExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiExplorer.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiExplorer.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAqB5F,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,aAAa,EAAE,CAAC,CAAA;IAC9C,eAAe,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CAC1D;AAwBD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,gBAAgB,2CAibxE"}
+{"version":3,"file":"ApiExplorer.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiExplorer.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAA;AA2B5F,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,aAAa,EAAE,CAAC,CAAA;IAC9C,eAAe,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CAC1D;AAwBD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,gBAAgB,2CA4dxE"}

package/dist/components/devtools/api-explorer/ApiExplorer.js

@@ -8,12 +8,17 @@ import { sel } from "../../../lib/test/index.js";
 import { ApiEndpointsSidebar } from "./ApiEndpointsSidebar.js";
 import { ApiRequestPanel } from "./ApiRequestPanel.js";
 import { ApiResponsePanel } from "./ApiResponsePanel.js";
+import { PanelDivider } from "./PanelDivider.js";
 import { useApiRequest } from "../api-tester/hooks/useApiRequest.js";
 import { useApiExplorerNavigation } from "../../../hooks/useApiExplorerNavigation.js";
 import { extractPathParams, buildUrl } from "../api-tester/utils/url-builder.js";
 import { ApiPresetsService } from "../../../lib/services/api-presets.service.js";
 import { ApiDocsService } from "../../../lib/services/api-docs.service.js";
 import { loadState, saveState, draftKey } from "./explorer-storage.js";
+import {
+  createPresetPlaceholderValues,
+  resolvePresetPlaceholders
+} from "./preset-placeholders.js";
 function findRouteByPath(routes, path) {
   for (const category of Object.keys(routes)) {
     const found = routes[category].find((r) => r.path === path);
@@ -50,6 +55,24 @@ function ApiExplorer({ routes, initialEndpoint }) {
   });
   const [body, setBody] = useState("");
   const [actAsUserId, setActAsUserId] = useState(() => loadState("actAsUserId") ?? "");
+  const [splitPercent, setSplitPercent] = useState(55);
+  const splitRowRef = useRef(null);
+  useEffect(() => {
+    const saved = loadState("splitPercent");
+    if (typeof saved === "number") setSplitPercent(saved);
+  }, []);
+  const handleSplitChange = useCallback((percent) => {
+    setSplitPercent(percent);
+    saveState("splitPercent", percent);
+  }, []);
+  const [isSideBySide, setIsSideBySide] = useState(false);
+  useEffect(() => {
+    const query = window.matchMedia("(min-width: 1024px)");
+    const sync = () => setIsSideBySide(query.matches);
+    sync();
+    query.addEventListener("change", sync);
+    return () => query.removeEventListener("change", sync);
+  }, []);
   const [tabsModifiedByPreset, setTabsModifiedByPreset] = useState(
     () => /* @__PURE__ */ new Set()
   );
@@ -126,7 +149,16 @@ function ApiExplorer({ routes, initialEndpoint }) {
       apiKey: authType === "apiKey" ? apiKey : void 0
     });
   }, [selectedEndpoint, pathParams, queryParams, headers, method, body, authType, apiKey, bypassMode, selectedTeamId, actAsUserId, execute]);
-  const handleApplyPreset = useCallback((preset) => {
+  const handleApplyPreset = useCallback((rawPreset) => {
+    const values = createPresetPlaceholderValues();
+    const preset = {
+      ...rawPreset,
+      pathParams: resolvePresetPlaceholders(rawPreset.pathParams, values),
+      params: resolvePresetPlaceholders(rawPreset.params, values),
+      headers: resolvePresetPlaceholders(rawPreset.headers, values),
+      payload: resolvePresetPlaceholders(rawPreset.payload, values),
+      sessionConfig: resolvePresetPlaceholders(rawPreset.sessionConfig, values)
+    };
     const modifiedTabs = /* @__PURE__ */ new Set();
     if (preset.method) {
       setMethod(preset.method);
@@ -172,11 +204,7 @@ function ApiExplorer({ routes, initialEndpoint }) {
         setBypassMode(preset.sessionConfig.crossTeam);
       }
       if (preset.sessionConfig.teamId) {
-        let teamId = preset.sessionConfig.teamId;
-        if (teamId === "{{FIRST_TEAM_ID}}" && typeof window !== "undefined") {
-          teamId = localStorage.getItem("firstTeamId") || localStorage.getItem("activeTeamId") || "";
-        }
-        setSelectedTeamId(teamId);
+        setSelectedTeamId(preset.sessionConfig.teamId);
       }
       if (preset.sessionConfig.authType) {
         setAuthType(preset.sessionConfig.authType);
@@ -258,7 +286,7 @@ function ApiExplorer({ routes, initialEndpoint }) {
     }
   }, [routes, initialEndpoint, urlPath, urlMethod, navigateToEndpoint, applyEndpointState]);
   const totalRoutes = Object.values(routes).reduce((sum, arr) => sum + arr.length, 0);
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100vh-4rem)] w-full overflow-hidden", "data-cy": sel("devtools.apiExplorer.container"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full overflow-hidden", "data-cy": sel("devtools.apiExplorer.container"), children: [
     /* @__PURE__ */ jsxs("div", { className: "lg:hidden fixed top-0 left-0 right-0 z-50 h-14 bg-background border-b flex items-center px-4 gap-3", children: [
       /* @__PURE__ */ jsx(
         Button,
@@ -307,49 +335,65 @@ function ApiExplorer({ routes, initialEndpoint }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col lg:flex-row min-w-0 pt-14 lg:pt-0", children: selectedEndpoint ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-1 lg:flex-[1.2] min-h-0 border-b lg:border-b-0 lg:border-r overflow-hidden", children: /* @__PURE__ */ jsx(
-        ApiRequestPanel,
+    /* @__PURE__ */ jsx("div", { ref: splitRowRef, className: "flex-1 flex flex-col lg:flex-row min-w-0 pt-14 lg:pt-0", children: selectedEndpoint ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          route: selectedEndpoint.route,
-          basePath: selectedEndpoint.path,
-          method,
-          pathParams,
-          queryParams,
-          headers,
-          authType,
-          apiKey,
-          bypassMode,
-          selectedTeamId,
-          actAsUserId,
-          body,
-          status,
-          onMethodChange: setMethod,
-          onPathParamsChange: setPathParams,
-          onQueryParamsChange: setQueryParams,
-          onHeadersChange: setHeaders,
-          onAuthTypeChange: setAuthType,
-          onApiKeyChange: setApiKey,
-          onBypassModeChange: setBypassMode,
-          onTeamChange: setSelectedTeamId,
-          onActAsUserChange: setActAsUserId,
-          onBodyChange: setBody,
-          onSend: handleSend,
-          onCancel: cancel,
-          endpointPresets,
-          endpointDoc,
-          onApplyPreset: handleApplyPreset,
-          tabsModifiedByPreset,
-          onClearPresetIndicator: (tab) => {
-            setTabsModifiedByPreset((prev) => {
-              const next = new Set(prev);
-              next.delete(tab);
-              return next;
-            });
-          }
+          className: "flex-1 min-h-0 min-w-0 border-b lg:border-b-0 overflow-hidden",
+          style: isSideBySide ? { flex: `0 0 ${splitPercent}%` } : void 0,
+          "data-split-panel": "request",
+          children: /* @__PURE__ */ jsx(
+            ApiRequestPanel,
+            {
+              route: selectedEndpoint.route,
+              basePath: selectedEndpoint.path,
+              method,
+              pathParams,
+              queryParams,
+              headers,
+              authType,
+              apiKey,
+              bypassMode,
+              selectedTeamId,
+              actAsUserId,
+              body,
+              status,
+              onMethodChange: setMethod,
+              onPathParamsChange: setPathParams,
+              onQueryParamsChange: setQueryParams,
+              onHeadersChange: setHeaders,
+              onAuthTypeChange: setAuthType,
+              onApiKeyChange: setApiKey,
+              onBypassModeChange: setBypassMode,
+              onTeamChange: setSelectedTeamId,
+              onActAsUserChange: setActAsUserId,
+              onBodyChange: setBody,
+              onSend: handleSend,
+              onCancel: cancel,
+              endpointPresets,
+              endpointDoc,
+              onApplyPreset: handleApplyPreset,
+              tabsModifiedByPreset,
+              onClearPresetIndicator: (tab) => {
+                setTabsModifiedByPreset((prev) => {
+                  const next = new Set(prev);
+                  next.delete(tab);
+                  return next;
+                });
+              }
+            }
+          )
         }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: "h-[40vh] lg:h-auto lg:flex-1 min-h-[200px] overflow-hidden", children: /* @__PURE__ */ jsx(
+      ),
+      /* @__PURE__ */ jsx(
+        PanelDivider,
+        {
+          value: splitPercent,
+          onChange: handleSplitChange,
+          containerRef: splitRowRef
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "h-[40vh] lg:h-auto lg:flex-1 min-h-[200px] min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx(
         ApiResponsePanel,
         {
           status,

package/dist/components/devtools/api-explorer/ApiRequestPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiRequestPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiRequestPanel.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACvG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAa/E,UAAU,oBAAoB;IAC5B,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,UAAU,CAAA;IAClB,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB,WAAW,EAAE,YAAY,EAAE,CAAA;IAC3B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,QAAQ,EAAE,QAAQ,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,aAAa,CAAA;IACrB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,kBAAkB,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAA;IACjD,mBAAmB,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IACrD,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IAClD,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC1C,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,kBAAkB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IAEpB,eAAe,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IACpD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAA;IAE3C,oBAAoB,CAAC,EAAE,GAAG,CAAC,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA;IACzD,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,KAAK,IAAI,CAAA;CACtE;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,cAAc,EACd,WAAW,EACX,IAAI,EACJ,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,eAAe,EACf,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,sBAAsB,GACvB,EAAE,oBAAoB,2CAgOtB"}
+{"version":3,"file":"ApiRequestPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiRequestPanel.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACvG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAc/E,UAAU,oBAAoB;IAC5B,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,UAAU,CAAA;IAClB,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB,WAAW,EAAE,YAAY,EAAE,CAAA;IAC3B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,QAAQ,EAAE,QAAQ,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,aAAa,CAAA;IACrB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,kBAAkB,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAA;IACjD,mBAAmB,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IACrD,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IAClD,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC1C,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,kBAAkB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IAEpB,eAAe,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IACpD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAA;IAE3C,oBAAoB,CAAC,EAAE,GAAG,CAAC,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA;IACzD,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,KAAK,IAAI,CAAA;CACtE;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,cAAc,EACd,WAAW,EACX,IAAI,EACJ,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,eAAe,EACf,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,sBAAsB,GACvB,EAAE,oBAAoB,2CAiQtB"}

package/dist/components/devtools/api-explorer/ApiRequestPanel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { Send, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { ChevronRight, Send, X } from "lucide-react";
 import { Button } from "../../ui/button.js";
 import { Badge } from "../../ui/badge.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.js";
@@ -17,6 +17,7 @@ import { PayloadEditor } from "../api-tester/PayloadEditor.js";
 import { buildUrl, validatePathParams, validateJsonBody } from "../api-tester/utils/url-builder.js";
 import { PresetsTab } from "./PresetsTab.js";
 import { ApiDocsModal } from "./ApiDocsModal.js";
+import { loadState, saveState } from "./explorer-storage.js";
 const methodColors = {
   GET: "bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border-emerald-500/30",
   POST: "bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30",
@@ -68,6 +69,20 @@ function ApiRequestPanel({
     return pathErrors.length === 0 && !bodyError;
   }, [pathParams, method, body]);
   const showPayloadEditor = ["POST", "PATCH", "PUT"].includes(method);
+  const [sessionOpen, setSessionOpen] = useState(true);
+  useEffect(() => {
+    setSessionOpen(loadState("sessionOpen") ?? true);
+  }, []);
+  useEffect(() => {
+    saveState("sessionOpen", sessionOpen);
+  }, [sessionOpen]);
+  const sessionSummary = useMemo(() => {
+    const parts = [authType === "apiKey" ? "API key" : "session"];
+    if (bypassMode) parts.push("cross-team");
+    if (selectedTeamId) parts.push(selectedTeamId);
+    if (actAsUserId.trim()) parts.push(`as ${actAsUserId.trim()}`);
+    return parts.join(" \xB7 ");
+  }, [authType, bypassMode, selectedTeamId, actAsUserId]);
   const handlePathParamsChange = (params) => {
     onPathParamsChange(params);
     onClearPresetIndicator == null ? void 0 : onClearPresetIndicator("params");
@@ -127,7 +142,22 @@ function ApiRequestPanel({
         /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground uppercase tracking-wide mb-1", children: t("urlPreview") }),
         /* @__PURE__ */ jsx("code", { className: "font-mono text-xs break-all text-foreground", children: previewUrl })
       ] }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSessionOpen((open) => !open),
+          className: "flex w-full items-center gap-2 pt-2 border-t text-left text-xs text-muted-foreground hover:text-foreground",
+          "aria-expanded": sessionOpen,
+          "data-cy": sel("devtools.apiExplorer.request.toggleSession"),
+          children: [
+            /* @__PURE__ */ jsx(ChevronRight, { className: cn("h-3.5 w-3.5 transition-transform", sessionOpen && "rotate-90") }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Session" }),
+            !sessionOpen && /* @__PURE__ */ jsx("span", { className: "truncate", children: sessionSummary })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: cn(!sessionOpen && "hidden"), children: /* @__PURE__ */ jsx(
         AuthSelector,
         {
           authType,
@@ -141,9 +171,9 @@ function ApiRequestPanel({
           onTeamChange,
           onActAsUserChange
         }
-      )
+      ) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "params", className: "flex-1 flex flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "params", className: "flex-1 flex flex-col min-h-0", children: [
       /* @__PURE__ */ jsx("div", { className: "border-b px-4", children: /* @__PURE__ */ jsxs(TabsList, { className: "h-9 bg-transparent p-0 border-0", children: [
         /* @__PURE__ */ jsxs(
           TabsTrigger,
@@ -196,7 +226,7 @@ function ApiRequestPanel({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs(ScrollArea, { className: "flex-1", children: [
+      /* @__PURE__ */ jsxs(ScrollArea, { className: "flex-1 min-h-0", children: [
         /* @__PURE__ */ jsxs(TabsContent, { value: "params", className: "m-0 p-4 space-y-4", children: [
           pathParams.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Path Parameters" }),

package/dist/components/devtools/api-explorer/JsonViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/JsonViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,qCAAqC,CAAA;AAM5C,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAA;AACpD,KAAK,WAAW,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;AAE1C,UAAU,eAAe;IACvB,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,eAAmB,EAAE,EAAE,eAAe,2CAqBnF;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,mCAAmC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,SAAS,EACT,eAAmB,EACnB,YAAmB,GACpB,EAAE,2BAA2B,2CA+E7B"}
+{"version":3,"file":"JsonViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/JsonViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,qCAAqC,CAAA;AAM5C,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAA;AACpD,KAAK,WAAW,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;AAE1C,UAAU,eAAe;IACvB,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,eAAmB,EAAE,EAAE,eAAe,2CA4BnF;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,mCAAmC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,SAAS,EACT,eAAmB,EACnB,YAAmB,GACpB,EAAE,2BAA2B,2CAoF7B"}

package/dist/components/devtools/api-explorer/JsonViewer.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { JsonView, allExpanded, collapseAllNested, defaultStyles, darkStyles } from "react-json-view-lite";
 import "react-json-view-lite/dist/index.css";
 import { useTheme } from "next-themes";
@@ -10,7 +10,10 @@ import { Button } from "../../ui/button.js";
 function JsonViewer({ data, className, initialExpanded = 2 }) {
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
-  const shouldExpandNode = initialExpanded === "all" ? allExpanded : initialExpanded === "none" ? collapseAllNested : (level) => level < initialExpanded;
+  const shouldExpandNode = useMemo(
+    () => initialExpanded === "all" ? allExpanded : initialExpanded === "none" ? collapseAllNested : (level) => level < initialExpanded,
+    [initialExpanded]
+  );
   return /* @__PURE__ */ jsx("div", { className: cn("font-mono text-sm", className), children: /* @__PURE__ */ jsx(
     JsonView,
     {
@@ -29,19 +32,22 @@ function JsonViewerWithControls({
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
   const [expandState, setExpandState] = useState(initialExpanded);
-  const [viewKey, setViewKey] = useState(0);
+  const [applyNonce, setApplyNonce] = useState(0);
   const handleExpandAll = useCallback(() => {
     setExpandState("all");
-    setViewKey((k) => k + 1);
+    setApplyNonce((n) => n + 1);
   }, []);
   const handleCollapseAll = useCallback(() => {
     setExpandState("none");
-    setViewKey((k) => k + 1);
+    setApplyNonce((n) => n + 1);
   }, []);
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(JSON.stringify(data, null, 2));
   }, [data]);
-  const shouldExpandNode = expandState === "all" ? allExpanded : expandState === "none" ? collapseAllNested : (level) => level < expandState;
+  const shouldExpandNode = useMemo(
+    () => expandState === "all" ? allExpanded : expandState === "none" ? collapseAllNested : (level) => level < expandState,
+    [expandState, applyNonce]
+  );
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
     showControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mb-2", "data-cy": "json-viewer-controls", children: [
       /* @__PURE__ */ jsxs(
@@ -94,8 +100,7 @@ function JsonViewerWithControls({
         data,
         shouldExpandNode,
         style: isDark ? darkStyles : defaultStyles
-      },
-      viewKey
+      }
     ) })
   ] });
 }

package/dist/components/devtools/api-explorer/PanelDivider.d.ts

@@ -0,0 +1,26 @@
+interface PanelDividerProps {
+    /** Current split, as the percentage of the container the LEFT panel takes. */
+    value: number;
+    onChange: (percent: number) => void;
+    /** The element the percentage is measured against. */
+    containerRef: React.RefObject<HTMLElement | null>;
+    min?: number;
+    max?: number;
+    label?: string;
+}
+/**
+ * Drag handle between two horizontally-split panels.
+ *
+ * Hand-rolled rather than pulled from a panel library: it needs one number, and a devtools
+ * screen is not worth a dependency in every app the framework ships.
+ *
+ * It reports a PERCENTAGE, not pixels, so a split chosen on a wide monitor still looks
+ * deliberate on a laptop. Pointer capture means a fast drag that outruns the cursor keeps
+ * working instead of being dropped the moment the pointer leaves the 6px strip.
+ *
+ * It is also a real `separator` widget: focusable, moved with the arrow keys, and it reports
+ * its position — dragging cannot be the only way to reach a layout.
+ */
+export declare function PanelDivider({ value, onChange, containerRef, min, max, label, }: PanelDividerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PanelDivider.d.ts.map

package/dist/components/devtools/api-explorer/PanelDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/PanelDivider.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,sDAAsD;IACtD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,GAAQ,EACR,GAAQ,EACR,KAAuB,GACxB,EAAE,iBAAiB,2CAiGnB"}

package/dist/components/devtools/api-explorer/PanelDivider.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+function PanelDivider({
+  value,
+  onChange,
+  containerRef,
+  min = 25,
+  max = 75,
+  label = "Resize panels"
+}) {
+  const draggingRef = useRef(false);
+  const clamp = useCallback((percent) => Math.min(max, Math.max(min, percent)), [min, max]);
+  const percentFromClientX = useCallback(
+    (clientX) => {
+      const container = containerRef.current;
+      if (!container) return null;
+      const rect = container.getBoundingClientRect();
+      if (rect.width === 0) return null;
+      return clamp((clientX - rect.left) / rect.width * 100);
+    },
+    [containerRef, clamp]
+  );
+  const handlePointerDown = useCallback((event) => {
+    draggingRef.current = true;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+  }, []);
+  const handlePointerMove = useCallback(
+    (event) => {
+      if (!draggingRef.current) return;
+      const next = percentFromClientX(event.clientX);
+      if (next !== null) onChange(next);
+    },
+    [percentFromClientX, onChange]
+  );
+  const endDrag = useCallback((event) => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+  }, []);
+  useEffect(
+    () => () => {
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    },
+    []
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      const step = event.shiftKey ? 10 : 2;
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        onChange(clamp(value - step));
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        onChange(clamp(value + step));
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        onChange(min);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        onChange(max);
+      }
+    },
+    [value, onChange, clamp, min, max]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": label,
+      "aria-valuenow": Math.round(value),
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      tabIndex: 0,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "hidden lg:flex shrink-0 w-1.5 cursor-col-resize items-center justify-center",
+        "bg-border/40 hover:bg-primary/60 focus-visible:bg-primary/60 transition-colors",
+        "focus-visible:outline-none"
+      ),
+      "data-cy": sel("devtools.apiExplorer.panelDivider"),
+      children: /* @__PURE__ */ jsx("div", { className: "h-8 w-0.5 rounded-full bg-foreground/25" })
+    }
+  );
+}
+export {
+  PanelDivider
+};

package/dist/components/devtools/api-explorer/PresetsTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PresetsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/PresetsTab.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAErD,UAAU,eAAe;IACvB,eAAe,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC1C,aAAa,EAAE,UAAU,CAAA;IACzB,aAAa,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAA;CAC3C;AAED,wBAAgB,UAAU,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,eAAe,2CA8H5F"}
+{"version":3,"file":"PresetsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/PresetsTab.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AA0CrD,UAAU,eAAe;IACvB,eAAe,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC1C,aAAa,EAAE,UAAU,CAAA;IACzB,aAAa,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAA;CAC3C;AAED,wBAAgB,UAAU,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,eAAe,2CAgI5F"}

package/dist/components/devtools/api-explorer/PresetsTab.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Play, Eye, BookOpen } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Play, Eye, BookOpen, RefreshCw } from "lucide-react";
 import { Button } from "../../ui/button.js";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card.js";
 import { Badge } from "../../ui/badge.js";
@@ -15,6 +15,38 @@ import {
 } from "../../ui/dialog.js";
 import { ScrollArea } from "../../ui/scroll-area.js";
 import { sel } from "../../../lib/test/index.js";
+import { readPresetRunToken, regeneratePresetRunToken } from "./preset-placeholders.js";
+function RunTokenBar({ presets }) {
+  const [token, setToken] = useState(null);
+  useEffect(() => {
+    setToken(readPresetRunToken());
+  }, []);
+  const usesRunToken = presets.some((preset) => JSON.stringify(preset).includes("{{RUN}}"));
+  if (!usesRunToken || !token) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Run" }),
+    /* @__PURE__ */ jsx("code", { className: "font-mono text-xs text-foreground", children: token }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 px-2",
+        onClick: () => setToken(regeneratePresetRunToken()),
+        "data-cy": sel("devtools.apiExplorer.presets.regenerateRunToken"),
+        children: [
+          /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3 mr-1" }),
+          "New run"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      "Every ",
+      "{{RUN}}",
+      " in these presets resolves to this. Start a new run to send values nothing has used before."
+    ] })
+  ] });
+}
 function PresetsTab({ endpointPresets, currentMethod, onApplyPreset }) {
   const [selectedPreset, setSelectedPreset] = useState(null);
   const [isDetailOpen, setIsDetailOpen] = useState(false);
@@ -44,6 +76,7 @@ function PresetsTab({ endpointPresets, currentMethod, onApplyPreset }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", "data-cy": sel("devtools.apiExplorer.presets.tab"), children: [
     endpointPresets.summary && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: endpointPresets.summary }),
+    /* @__PURE__ */ jsx(RunTokenBar, { presets: endpointPresets.presets }),
     filteredPresets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground p-4 bg-muted/30 rounded-lg", children: [
       /* @__PURE__ */ jsxs("p", { children: [
         "No presets for ",