@tanstack/query-devtools 5.76.0 → 5.80.0

package/build/chunk/{U3MG367F.js → HASRA6WW.js}

@@ -9471,17 +9471,18 @@ var _tmpl$182 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-contain
 var _tmpl$192 = /* @__PURE__ */ template(`<div><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div></div><div><div><div><input aria-label="Filter queries by query key"type=text placeholder=Filter name=tsqd-query-filter-input></div><div></div><button class=tsqd-query-filter-sort-order-btn></button></div><div><button aria-label="Clear query cache"></button><button>`);
 var _tmpl$202 = /* @__PURE__ */ template(`<option>Sort by `);
 var _tmpl$212 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
-var _tmpl$222 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
-var _tmpl$232 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
-var _tmpl$242 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$252 = /* @__PURE__ */ template(`<button><span></span><span>`);
-var _tmpl$262 = /* @__PURE__ */ template(`<button><span></span> Error`);
-var _tmpl$27 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
-var _tmpl$28 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
-var _tmpl$29 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
-var _tmpl$30 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data </div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
-var _tmpl$31 = /* @__PURE__ */ template(`<option>`);
-var _tmpl$322 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
+var _tmpl$222 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator>static`);
+var _tmpl$232 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
+var _tmpl$242 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
+var _tmpl$252 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$262 = /* @__PURE__ */ template(`<button><span></span><span>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<button><span></span> Error`);
+var _tmpl$28 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
+var _tmpl$30 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
+var _tmpl$31 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data </div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
+var _tmpl$322 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$332 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
 var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
 var [selectedMutationId, setSelectedMutationId] = createSignal(null);
 var [panelWidth, setPanelWidth] = createSignal(0);
@@ -10404,6 +10405,9 @@ var QueryRow = (props) => {
   const isDisabled = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
   })?.isDisabled() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
+  const isStatic = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
+    queryKey: props.query.queryKey
+  })?.isStatic() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
   const isStale = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
     queryKey: props.query.queryKey
   })?.isStale() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
@@ -10432,7 +10436,7 @@ var QueryRow = (props) => {
       return queryState();
     },
     get children() {
-      var _el$47 = _tmpl$222(), _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling;
+      var _el$47 = _tmpl$232(), _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling;
       _el$47.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
       insert(_el$48, observers);
       insert(_el$49, () => props.query.queryHash);
@@ -10444,6 +10448,14 @@ var QueryRow = (props) => {
           return _tmpl$212();
         }
       }), null);
+      insert(_el$47, createComponent(Show, {
+        get when() {
+          return isStatic();
+        },
+        get children() {
+          return _tmpl$222();
+        }
+      }), null);
       createRenderEffect((_p$) => {
         var _v$24 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$25 = `Query key ${props.query.queryHash}`, _v$26 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
         _v$24 !== _p$.e && className(_el$47, _p$.e = _v$24);
@@ -10510,11 +10522,11 @@ var MutationRow = (props) => {
       return mutationState();
     },
     get children() {
-      var _el$51 = _tmpl$222(), _el$52 = _el$51.firstChild, _el$53 = _el$52.nextSibling;
-      _el$51.$$click = () => {
+      var _el$52 = _tmpl$232(), _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling;
+      _el$52.$$click = () => {
         setSelectedMutationId(props.mutation.mutationId === selectedMutationId() ? null : props.mutation.mutationId);
       };
-      insert(_el$52, createComponent(Show, {
+      insert(_el$53, createComponent(Show, {
         get when() {
           return color() === "purple";
         },
@@ -10522,7 +10534,7 @@ var MutationRow = (props) => {
           return createComponent(PauseCircle, {});
         }
       }), null);
-      insert(_el$52, createComponent(Show, {
+      insert(_el$53, createComponent(Show, {
         get when() {
           return color() === "green";
         },
@@ -10530,7 +10542,7 @@ var MutationRow = (props) => {
           return createComponent(CheckCircle, {});
         }
       }), null);
-      insert(_el$52, createComponent(Show, {
+      insert(_el$53, createComponent(Show, {
         get when() {
           return color() === "red";
         },
@@ -10538,7 +10550,7 @@ var MutationRow = (props) => {
           return createComponent(XCircle, {});
         }
       }), null);
-      insert(_el$52, createComponent(Show, {
+      insert(_el$53, createComponent(Show, {
         get when() {
           return color() === "yellow";
         },
@@ -10546,7 +10558,7 @@ var MutationRow = (props) => {
           return createComponent(LoadingCircle, {});
         }
       }), null);
-      insert(_el$53, createComponent(Show, {
+      insert(_el$54, createComponent(Show, {
         get when() {
           return props.mutation.options.mutationKey;
         },
@@ -10554,19 +10566,19 @@ var MutationRow = (props) => {
           return [createMemo(() => JSON.stringify(props.mutation.options.mutationKey)), " -", " "];
         }
       }), null);
-      insert(_el$53, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
+      insert(_el$54, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
       createRenderEffect((_p$) => {
         var _v$27 = clsx(styles().queryRow, selectedMutationId() === props.mutation.mutationId && styles().selectedQueryRow, "tsqd-query-row"), _v$28 = `Mutation submitted at ${new Date(props.mutation.state.submittedAt).toLocaleString()}`, _v$29 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
-        _v$27 !== _p$.e && className(_el$51, _p$.e = _v$27);
-        _v$28 !== _p$.t && setAttribute(_el$51, "aria-label", _p$.t = _v$28);
-        _v$29 !== _p$.a && className(_el$52, _p$.a = _v$29);
+        _v$27 !== _p$.e && className(_el$52, _p$.e = _v$27);
+        _v$28 !== _p$.t && setAttribute(_el$52, "aria-label", _p$.t = _v$28);
+        _v$29 !== _p$.a && className(_el$53, _p$.a = _v$29);
         return _p$;
       }, {
         e: void 0,
         t: void 0,
         a: void 0
       });
-      return _el$51;
+      return _el$52;
     }
   });
 };
@@ -10584,44 +10596,44 @@ var QueryStatusCount = () => {
     return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   return (() => {
-    var _el$54 = _tmpl$26();
-    insert(_el$54, createComponent(QueryStatus, {
+    var _el$55 = _tmpl$26();
+    insert(_el$55, createComponent(QueryStatus, {
       label: "Fresh",
       color: "green",
       get count() {
         return fresh();
       }
     }), null);
-    insert(_el$54, createComponent(QueryStatus, {
+    insert(_el$55, createComponent(QueryStatus, {
       label: "Fetching",
       color: "blue",
       get count() {
         return fetching();
       }
     }), null);
-    insert(_el$54, createComponent(QueryStatus, {
+    insert(_el$55, createComponent(QueryStatus, {
       label: "Paused",
       color: "purple",
       get count() {
         return paused();
       }
     }), null);
-    insert(_el$54, createComponent(QueryStatus, {
+    insert(_el$55, createComponent(QueryStatus, {
       label: "Stale",
       color: "yellow",
       get count() {
         return stale();
       }
     }), null);
-    insert(_el$54, createComponent(QueryStatus, {
+    insert(_el$55, createComponent(QueryStatus, {
       label: "Inactive",
       color: "gray",
       get count() {
         return inactive();
       }
     }), null);
-    createRenderEffect(() => className(_el$54, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
-    return _el$54;
+    createRenderEffect(() => className(_el$55, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+    return _el$55;
   })();
 };
 var MutationStatusCount = () => {
@@ -10649,37 +10661,37 @@ var MutationStatusCount = () => {
     return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   return (() => {
-    var _el$55 = _tmpl$26();
-    insert(_el$55, createComponent(QueryStatus, {
+    var _el$56 = _tmpl$26();
+    insert(_el$56, createComponent(QueryStatus, {
       label: "Paused",
       color: "purple",
       get count() {
         return paused();
       }
     }), null);
-    insert(_el$55, createComponent(QueryStatus, {
+    insert(_el$56, createComponent(QueryStatus, {
       label: "Pending",
       color: "yellow",
       get count() {
         return pending();
       }
     }), null);
-    insert(_el$55, createComponent(QueryStatus, {
+    insert(_el$56, createComponent(QueryStatus, {
       label: "Success",
       color: "green",
       get count() {
         return success();
       }
     }), null);
-    insert(_el$55, createComponent(QueryStatus, {
+    insert(_el$56, createComponent(QueryStatus, {
       label: "Error",
       color: "red",
       get count() {
         return error();
       }
     }), null);
-    createRenderEffect(() => className(_el$55, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
-    return _el$55;
+    createRenderEffect(() => className(_el$56, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+    return _el$56;
   })();
 };
 var QueryStatus = (props) => {
@@ -10710,17 +10722,17 @@ var QueryStatus = (props) => {
     return true;
   });
   return (() => {
-    var _el$56 = _tmpl$252(), _el$58 = _el$56.firstChild, _el$60 = _el$58.nextSibling;
+    var _el$57 = _tmpl$262(), _el$59 = _el$57.firstChild, _el$61 = _el$59.nextSibling;
     var _ref$5 = tagRef;
-    typeof _ref$5 === "function" ? use(_ref$5, _el$56) : tagRef = _el$56;
-    _el$56.addEventListener("mouseleave", () => {
+    typeof _ref$5 === "function" ? use(_ref$5, _el$57) : tagRef = _el$57;
+    _el$57.addEventListener("mouseleave", () => {
       setMouseOver(false);
       setFocused(false);
     });
-    _el$56.addEventListener("mouseenter", () => setMouseOver(true));
-    _el$56.addEventListener("blur", () => setFocused(false));
-    _el$56.addEventListener("focus", () => setFocused(true));
-    spread(_el$56, mergeProps({
+    _el$57.addEventListener("mouseenter", () => setMouseOver(true));
+    _el$57.addEventListener("blur", () => setFocused(false));
+    _el$57.addEventListener("focus", () => setFocused(true));
+    spread(_el$57, mergeProps({
       get disabled() {
         return showLabel();
       },
@@ -10735,29 +10747,29 @@ var QueryStatus = (props) => {
     }, () => mouseOver() || focused() ? {
       "aria-describedby": "tsqd-status-tooltip"
     } : {}), false, true);
-    insert(_el$56, createComponent(Show, {
+    insert(_el$57, createComponent(Show, {
       get when() {
         return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
       },
       get children() {
-        var _el$57 = _tmpl$232();
-        insert(_el$57, () => props.label);
-        createRenderEffect(() => className(_el$57, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
-        return _el$57;
+        var _el$58 = _tmpl$242();
+        insert(_el$58, () => props.label);
+        createRenderEffect(() => className(_el$58, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
+        return _el$58;
       }
-    }), _el$58);
-    insert(_el$56, createComponent(Show, {
+    }), _el$59);
+    insert(_el$57, createComponent(Show, {
       get when() {
         return showLabel();
       },
       get children() {
-        var _el$59 = _tmpl$242();
-        insert(_el$59, () => props.label);
-        createRenderEffect(() => className(_el$59, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
-        return _el$59;
+        var _el$60 = _tmpl$252();
+        insert(_el$60, () => props.label);
+        createRenderEffect(() => className(_el$60, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
+        return _el$60;
       }
-    }), _el$60);
-    insert(_el$60, () => props.count);
+    }), _el$61);
+    insert(_el$61, () => props.count);
     createRenderEffect((_p$) => {
       var _v$30 = clsx(css`
             width: ${tokens.size[1.5]};
@@ -10768,14 +10780,14 @@ var QueryStatus = (props) => {
               background-color: ${t2(colors[props.color][100], colors[props.color][900])};
               color: ${t2(colors[props.color][700], colors[props.color][300])};
             `, "tsqd-query-status-tag-count");
-      _v$30 !== _p$.e && className(_el$58, _p$.e = _v$30);
-      _v$31 !== _p$.t && className(_el$60, _p$.t = _v$31);
+      _v$30 !== _p$.e && className(_el$59, _p$.e = _v$30);
+      _v$31 !== _p$.t && className(_el$61, _p$.t = _v$31);
       return _p$;
     }, {
       e: void 0,
       t: void 0
     });
-    return _el$56;
+    return _el$57;
   })();
 };
 var QueryDetails = () => {
@@ -10892,27 +10904,27 @@ var QueryDetails = () => {
       return createMemo(() => !!activeQuery())() && activeQueryState();
     },
     get children() {
-      var _el$61 = _tmpl$30(), _el$62 = _el$61.firstChild, _el$63 = _el$62.nextSibling, _el$64 = _el$63.firstChild, _el$65 = _el$64.firstChild, _el$66 = _el$65.firstChild, _el$67 = _el$65.nextSibling, _el$68 = _el$64.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$69.nextSibling, _el$71 = _el$68.nextSibling, _el$72 = _el$71.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$63.nextSibling, _el$75 = _el$74.nextSibling, _el$76 = _el$75.firstChild, _el$77 = _el$76.firstChild, _el$78 = _el$76.nextSibling, _el$79 = _el$78.firstChild, _el$80 = _el$78.nextSibling, _el$81 = _el$80.firstChild, _el$82 = _el$80.nextSibling, _el$83 = _el$82.firstChild, _el$84 = _el$82.nextSibling, _el$85 = _el$84.firstChild, _el$86 = _el$85.nextSibling, _el$95 = _el$75.nextSibling; _el$95.firstChild; var _el$105 = _el$95.nextSibling, _el$106 = _el$105.nextSibling;
-      insert(_el$66, () => displayValue(activeQuery().queryKey, true));
-      insert(_el$67, statusLabel);
-      insert(_el$70, observerCount);
-      insert(_el$73, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
-      _el$76.$$click = handleRefetch;
-      _el$78.$$click = () => {
+      var _el$62 = _tmpl$31(), _el$63 = _el$62.firstChild, _el$64 = _el$63.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$65.firstChild, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$65.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$70.nextSibling, _el$72 = _el$69.nextSibling, _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling, _el$75 = _el$64.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.firstChild, _el$78 = _el$77.firstChild, _el$79 = _el$77.nextSibling, _el$80 = _el$79.firstChild, _el$81 = _el$79.nextSibling, _el$82 = _el$81.firstChild, _el$83 = _el$81.nextSibling, _el$84 = _el$83.firstChild, _el$85 = _el$83.nextSibling, _el$86 = _el$85.firstChild, _el$87 = _el$86.nextSibling, _el$96 = _el$76.nextSibling; _el$96.firstChild; var _el$106 = _el$96.nextSibling, _el$107 = _el$106.nextSibling;
+      insert(_el$67, () => displayValue(activeQuery().queryKey, true));
+      insert(_el$68, statusLabel);
+      insert(_el$71, observerCount);
+      insert(_el$74, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
+      _el$77.$$click = handleRefetch;
+      _el$79.$$click = () => {
         sendDevToolsEvent({
           type: "INVALIDATE",
           queryHash: activeQuery()?.queryHash
         });
         queryClient.invalidateQueries(activeQuery());
       };
-      _el$80.$$click = () => {
+      _el$81.$$click = () => {
         sendDevToolsEvent({
           type: "RESET",
           queryHash: activeQuery()?.queryHash
         });
         queryClient.resetQueries(activeQuery());
       };
-      _el$82.$$click = () => {
+      _el$83.$$click = () => {
         sendDevToolsEvent({
           type: "REMOVE",
           queryHash: activeQuery()?.queryHash
@@ -10920,7 +10932,7 @@ var QueryDetails = () => {
         queryClient.removeQueries(activeQuery());
         setSelectedQueryHash(null);
       };
-      _el$84.$$click = () => {
+      _el$85.$$click = () => {
         if (activeQuery()?.state.data === void 0) {
           setRestoringLoading(true);
           restoreQueryAfterLoadingOrError();
@@ -10950,14 +10962,14 @@ var QueryDetails = () => {
           });
         }
       };
-      insert(_el$84, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$86);
-      insert(_el$75, createComponent(Show, {
+      insert(_el$85, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$87);
+      insert(_el$76, createComponent(Show, {
         get when() {
           return errorTypes().length === 0 || queryStatus() === "error";
         },
         get children() {
-          var _el$87 = _tmpl$262(), _el$88 = _el$87.firstChild, _el$89 = _el$88.nextSibling;
-          _el$87.$$click = () => {
+          var _el$88 = _tmpl$27(), _el$89 = _el$88.firstChild, _el$90 = _el$89.nextSibling;
+          _el$88.$$click = () => {
             if (!activeQuery().state.error) {
               triggerError();
             } else {
@@ -10968,71 +10980,71 @@ var QueryDetails = () => {
               queryClient.resetQueries(activeQuery());
             }
           };
-          insert(_el$87, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$89);
+          insert(_el$88, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$90);
           createRenderEffect((_p$) => {
             var _v$32 = clsx(css`
                   color: ${t2(colors.red[500], colors.red[400])};
                 `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$33 = queryStatus() === "pending", _v$34 = css`
                   background-color: ${t2(colors.red[500], colors.red[400])};
                 `;
-            _v$32 !== _p$.e && className(_el$87, _p$.e = _v$32);
-            _v$33 !== _p$.t && (_el$87.disabled = _p$.t = _v$33);
-            _v$34 !== _p$.a && className(_el$88, _p$.a = _v$34);
+            _v$32 !== _p$.e && className(_el$88, _p$.e = _v$32);
+            _v$33 !== _p$.t && (_el$88.disabled = _p$.t = _v$33);
+            _v$34 !== _p$.a && className(_el$89, _p$.a = _v$34);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           });
-          return _el$87;
+          return _el$88;
         }
       }), null);
-      insert(_el$75, createComponent(Show, {
+      insert(_el$76, createComponent(Show, {
         get when() {
           return !(errorTypes().length === 0 || queryStatus() === "error");
         },
         get children() {
-          var _el$90 = _tmpl$27(), _el$91 = _el$90.firstChild, _el$92 = _el$91.nextSibling, _el$93 = _el$92.nextSibling; _el$93.firstChild;
-          _el$93.addEventListener("change", (e2) => {
+          var _el$91 = _tmpl$28(), _el$92 = _el$91.firstChild, _el$93 = _el$92.nextSibling, _el$94 = _el$93.nextSibling; _el$94.firstChild;
+          _el$94.addEventListener("change", (e2) => {
             const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
             triggerError(errorType);
           });
-          insert(_el$93, createComponent(For, {
+          insert(_el$94, createComponent(For, {
             get each() {
               return errorTypes();
             },
             children: (errorType) => (() => {
-              var _el$107 = _tmpl$31();
-              insert(_el$107, () => errorType.name);
-              createRenderEffect(() => _el$107.value = errorType.name);
-              return _el$107;
+              var _el$108 = _tmpl$322();
+              insert(_el$108, () => errorType.name);
+              createRenderEffect(() => _el$108.value = errorType.name);
+              return _el$108;
             })()
           }), null);
-          insert(_el$90, createComponent(ChevronDown, {}), null);
+          insert(_el$91, createComponent(ChevronDown, {}), null);
           createRenderEffect((_p$) => {
             var _v$35 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$36 = css`
                   background-color: ${tokens.colors.red[400]};
                 `, _v$37 = queryStatus() === "pending";
-            _v$35 !== _p$.e && className(_el$90, _p$.e = _v$35);
-            _v$36 !== _p$.t && className(_el$91, _p$.t = _v$36);
-            _v$37 !== _p$.a && (_el$93.disabled = _p$.a = _v$37);
+            _v$35 !== _p$.e && className(_el$91, _p$.e = _v$35);
+            _v$36 !== _p$.t && className(_el$92, _p$.t = _v$36);
+            _v$37 !== _p$.a && (_el$94.disabled = _p$.a = _v$37);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           });
-          return _el$90;
+          return _el$91;
         }
       }), null);
-      insert(_el$95, () => dataMode() === "view" ? "Explorer" : "Editor", null);
-      insert(_el$61, createComponent(Show, {
+      insert(_el$96, () => dataMode() === "view" ? "Explorer" : "Editor", null);
+      insert(_el$62, createComponent(Show, {
         get when() {
           return dataMode() === "view";
         },
         get children() {
-          var _el$97 = _tmpl$28();
-          insert(_el$97, createComponent(Explorer, {
+          var _el$98 = _tmpl$29();
+          insert(_el$98, createComponent(Explorer, {
             label: "Data",
             defaultExpanded: ["Data"],
             get value() {
@@ -11044,17 +11056,17 @@ var QueryDetails = () => {
               return activeQuery();
             }
           }));
-          createRenderEffect((_$p) => (_$p = tokens.size[2]) != null ? _el$97.style.setProperty("padding", _$p) : _el$97.style.removeProperty("padding"));
-          return _el$97;
+          createRenderEffect((_$p) => (_$p = tokens.size[2]) != null ? _el$98.style.setProperty("padding", _$p) : _el$98.style.removeProperty("padding"));
+          return _el$98;
         }
-      }), _el$105);
-      insert(_el$61, createComponent(Show, {
+      }), _el$106);
+      insert(_el$62, createComponent(Show, {
         get when() {
           return dataMode() === "edit";
         },
         get children() {
-          var _el$98 = _tmpl$29(), _el$99 = _el$98.firstChild, _el$100 = _el$99.nextSibling, _el$101 = _el$100.firstChild, _el$102 = _el$101.nextSibling, _el$103 = _el$102.firstChild, _el$104 = _el$103.nextSibling;
-          _el$98.addEventListener("submit", (e2) => {
+          var _el$99 = _tmpl$30(), _el$100 = _el$99.firstChild, _el$101 = _el$100.nextSibling, _el$102 = _el$101.firstChild, _el$103 = _el$102.nextSibling, _el$104 = _el$103.firstChild, _el$105 = _el$104.nextSibling;
+          _el$99.addEventListener("submit", (e2) => {
             e2.preventDefault();
             const formData = new FormData(e2.currentTarget);
             const data = formData.get("data");
@@ -11069,23 +11081,23 @@ var QueryDetails = () => {
               setDataEditError(true);
             }
           });
-          _el$99.addEventListener("focus", () => setDataEditError(false));
-          insert(_el$101, () => dataEditError() ? "Invalid Value" : "");
-          _el$103.$$click = () => setDataMode("view");
+          _el$100.addEventListener("focus", () => setDataEditError(false));
+          insert(_el$102, () => dataEditError() ? "Invalid Value" : "");
+          _el$104.$$click = () => setDataMode("view");
           createRenderEffect((_p$) => {
             var _v$38 = clsx(styles().devtoolsEditForm, "tsqd-query-details-data-editor"), _v$39 = styles().devtoolsEditTextarea, _v$40 = dataEditError(), _v$41 = styles().devtoolsEditFormActions, _v$42 = styles().devtoolsEditFormError, _v$43 = styles().devtoolsEditFormActionContainer, _v$44 = clsx(styles().devtoolsEditFormAction, css`
                       color: ${t2(colors.gray[600], colors.gray[300])};
                     `), _v$45 = clsx(styles().devtoolsEditFormAction, css`
                       color: ${t2(colors.blue[600], colors.blue[400])};
                     `);
-            _v$38 !== _p$.e && className(_el$98, _p$.e = _v$38);
-            _v$39 !== _p$.t && className(_el$99, _p$.t = _v$39);
-            _v$40 !== _p$.a && setAttribute(_el$99, "data-error", _p$.a = _v$40);
-            _v$41 !== _p$.o && className(_el$100, _p$.o = _v$41);
-            _v$42 !== _p$.i && className(_el$101, _p$.i = _v$42);
-            _v$43 !== _p$.n && className(_el$102, _p$.n = _v$43);
-            _v$44 !== _p$.s && className(_el$103, _p$.s = _v$44);
-            _v$45 !== _p$.h && className(_el$104, _p$.h = _v$45);
+            _v$38 !== _p$.e && className(_el$99, _p$.e = _v$38);
+            _v$39 !== _p$.t && className(_el$100, _p$.t = _v$39);
+            _v$40 !== _p$.a && setAttribute(_el$100, "data-error", _p$.a = _v$40);
+            _v$41 !== _p$.o && className(_el$101, _p$.o = _v$41);
+            _v$42 !== _p$.i && className(_el$102, _p$.i = _v$42);
+            _v$43 !== _p$.n && className(_el$103, _p$.n = _v$43);
+            _v$44 !== _p$.s && className(_el$104, _p$.s = _v$44);
+            _v$45 !== _p$.h && className(_el$105, _p$.h = _v$45);
             return _p$;
           }, {
             e: void 0,
@@ -11097,11 +11109,11 @@ var QueryDetails = () => {
             s: void 0,
             h: void 0
           });
-          createRenderEffect(() => _el$99.value = JSON.stringify(activeQueryStateData(), null, 2));
-          return _el$98;
+          createRenderEffect(() => _el$100.value = JSON.stringify(activeQueryStateData(), null, 2));
+          return _el$99;
         }
-      }), _el$105);
-      insert(_el$106, createComponent(Explorer, {
+      }), _el$106);
+      insert(_el$107, createComponent(Explorer, {
         label: "Query",
         defaultExpanded: ["Query", "queryKey"],
         get value() {
@@ -11130,30 +11142,30 @@ var QueryDetails = () => {
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$65 = restoringLoading(), _v$66 = css`
                 background-color: ${t2(colors.cyan[500], colors.cyan[400])};
               `, _v$67 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$68 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$69 = tokens.size[2];
-        _v$46 !== _p$.e && className(_el$61, _p$.e = _v$46);
-        _v$47 !== _p$.t && className(_el$62, _p$.t = _v$47);
-        _v$48 !== _p$.a && className(_el$63, _p$.a = _v$48);
-        _v$49 !== _p$.o && className(_el$67, _p$.o = _v$49);
-        _v$50 !== _p$.i && className(_el$74, _p$.i = _v$50);
-        _v$51 !== _p$.n && className(_el$75, _p$.n = _v$51);
-        _v$52 !== _p$.s && className(_el$76, _p$.s = _v$52);
-        _v$53 !== _p$.h && (_el$76.disabled = _p$.h = _v$53);
-        _v$54 !== _p$.r && className(_el$77, _p$.r = _v$54);
-        _v$55 !== _p$.d && className(_el$78, _p$.d = _v$55);
-        _v$56 !== _p$.l && (_el$78.disabled = _p$.l = _v$56);
-        _v$57 !== _p$.u && className(_el$79, _p$.u = _v$57);
-        _v$58 !== _p$.c && className(_el$80, _p$.c = _v$58);
-        _v$59 !== _p$.w && (_el$80.disabled = _p$.w = _v$59);
-        _v$60 !== _p$.m && className(_el$81, _p$.m = _v$60);
-        _v$61 !== _p$.f && className(_el$82, _p$.f = _v$61);
-        _v$62 !== _p$.y && (_el$82.disabled = _p$.y = _v$62);
-        _v$63 !== _p$.g && className(_el$83, _p$.g = _v$63);
-        _v$64 !== _p$.p && className(_el$84, _p$.p = _v$64);
-        _v$65 !== _p$.b && (_el$84.disabled = _p$.b = _v$65);
-        _v$66 !== _p$.T && className(_el$85, _p$.T = _v$66);
-        _v$67 !== _p$.A && className(_el$95, _p$.A = _v$67);
-        _v$68 !== _p$.O && className(_el$105, _p$.O = _v$68);
-        _v$69 !== _p$.I && ((_p$.I = _v$69) != null ? _el$106.style.setProperty("padding", _v$69) : _el$106.style.removeProperty("padding"));
+        _v$46 !== _p$.e && className(_el$62, _p$.e = _v$46);
+        _v$47 !== _p$.t && className(_el$63, _p$.t = _v$47);
+        _v$48 !== _p$.a && className(_el$64, _p$.a = _v$48);
+        _v$49 !== _p$.o && className(_el$68, _p$.o = _v$49);
+        _v$50 !== _p$.i && className(_el$75, _p$.i = _v$50);
+        _v$51 !== _p$.n && className(_el$76, _p$.n = _v$51);
+        _v$52 !== _p$.s && className(_el$77, _p$.s = _v$52);
+        _v$53 !== _p$.h && (_el$77.disabled = _p$.h = _v$53);
+        _v$54 !== _p$.r && className(_el$78, _p$.r = _v$54);
+        _v$55 !== _p$.d && className(_el$79, _p$.d = _v$55);
+        _v$56 !== _p$.l && (_el$79.disabled = _p$.l = _v$56);
+        _v$57 !== _p$.u && className(_el$80, _p$.u = _v$57);
+        _v$58 !== _p$.c && className(_el$81, _p$.c = _v$58);
+        _v$59 !== _p$.w && (_el$81.disabled = _p$.w = _v$59);
+        _v$60 !== _p$.m && className(_el$82, _p$.m = _v$60);
+        _v$61 !== _p$.f && className(_el$83, _p$.f = _v$61);
+        _v$62 !== _p$.y && (_el$83.disabled = _p$.y = _v$62);
+        _v$63 !== _p$.g && className(_el$84, _p$.g = _v$63);
+        _v$64 !== _p$.p && className(_el$85, _p$.p = _v$64);
+        _v$65 !== _p$.b && (_el$85.disabled = _p$.b = _v$65);
+        _v$66 !== _p$.T && className(_el$86, _p$.T = _v$66);
+        _v$67 !== _p$.A && className(_el$96, _p$.A = _v$67);
+        _v$68 !== _p$.O && className(_el$106, _p$.O = _v$68);
+        _v$69 !== _p$.I && ((_p$.I = _v$69) != null ? _el$107.style.setProperty("padding", _v$69) : _el$107.style.removeProperty("padding"));
         return _p$;
       }, {
         e: void 0,
@@ -11181,7 +11193,7 @@ var QueryDetails = () => {
         O: void 0,
         I: void 0
       });
-      return _el$61;
+      return _el$62;
     }
   });
 };
@@ -11233,8 +11245,8 @@ var MutationDetails = () => {
       return activeMutation();
     },
     get children() {
-      var _el$108 = _tmpl$322(), _el$109 = _el$108.firstChild, _el$110 = _el$109.nextSibling, _el$111 = _el$110.firstChild, _el$112 = _el$111.firstChild, _el$113 = _el$112.firstChild, _el$114 = _el$112.nextSibling, _el$115 = _el$111.nextSibling, _el$116 = _el$115.firstChild, _el$117 = _el$116.nextSibling, _el$118 = _el$110.nextSibling, _el$119 = _el$118.nextSibling, _el$120 = _el$119.nextSibling, _el$121 = _el$120.nextSibling, _el$122 = _el$121.nextSibling, _el$123 = _el$122.nextSibling, _el$124 = _el$123.nextSibling, _el$125 = _el$124.nextSibling;
-      insert(_el$113, createComponent(Show, {
+      var _el$109 = _tmpl$332(), _el$110 = _el$109.firstChild, _el$111 = _el$110.nextSibling, _el$112 = _el$111.firstChild, _el$113 = _el$112.firstChild, _el$114 = _el$113.firstChild, _el$115 = _el$113.nextSibling, _el$116 = _el$112.nextSibling, _el$117 = _el$116.firstChild, _el$118 = _el$117.nextSibling, _el$119 = _el$111.nextSibling, _el$120 = _el$119.nextSibling, _el$121 = _el$120.nextSibling, _el$122 = _el$121.nextSibling, _el$123 = _el$122.nextSibling, _el$124 = _el$123.nextSibling, _el$125 = _el$124.nextSibling, _el$126 = _el$125.nextSibling;
+      insert(_el$114, createComponent(Show, {
         get when() {
           return activeMutation().options.mutationKey;
         },
@@ -11243,13 +11255,13 @@ var MutationDetails = () => {
           return displayValue(activeMutation().options.mutationKey, true);
         }
       }));
-      insert(_el$114, createComponent(Show, {
+      insert(_el$115, createComponent(Show, {
         get when() {
           return color() === "purple";
         },
         children: "pending"
       }), null);
-      insert(_el$114, createComponent(Show, {
+      insert(_el$115, createComponent(Show, {
         get when() {
           return color() !== "purple";
         },
@@ -11257,29 +11269,29 @@ var MutationDetails = () => {
           return status();
         }
       }), null);
-      insert(_el$117, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
-      insert(_el$119, createComponent(Explorer, {
+      insert(_el$118, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
+      insert(_el$120, createComponent(Explorer, {
         label: "Variables",
         defaultExpanded: ["Variables"],
         get value() {
           return activeMutation().state.variables;
         }
       }));
-      insert(_el$121, createComponent(Explorer, {
+      insert(_el$122, createComponent(Explorer, {
         label: "Context",
         defaultExpanded: ["Context"],
         get value() {
           return activeMutation().state.context;
         }
       }));
-      insert(_el$123, createComponent(Explorer, {
+      insert(_el$124, createComponent(Explorer, {
         label: "Data",
         defaultExpanded: ["Data"],
         get value() {
           return activeMutation().state.data;
         }
       }));
-      insert(_el$125, createComponent(Explorer, {
+      insert(_el$126, createComponent(Explorer, {
         label: "Mutation",
         defaultExpanded: ["Mutation"],
         get value() {
@@ -11288,18 +11300,18 @@ var MutationDetails = () => {
       }));
       createRenderEffect((_p$) => {
         var _v$70 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$71 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$72 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$73 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$74 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$75 = tokens.size[2], _v$76 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$77 = tokens.size[2], _v$78 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$79 = tokens.size[2], _v$80 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$81 = tokens.size[2];
-        _v$70 !== _p$.e && className(_el$108, _p$.e = _v$70);
-        _v$71 !== _p$.t && className(_el$109, _p$.t = _v$71);
-        _v$72 !== _p$.a && className(_el$110, _p$.a = _v$72);
-        _v$73 !== _p$.o && className(_el$114, _p$.o = _v$73);
-        _v$74 !== _p$.i && className(_el$118, _p$.i = _v$74);
-        _v$75 !== _p$.n && ((_p$.n = _v$75) != null ? _el$119.style.setProperty("padding", _v$75) : _el$119.style.removeProperty("padding"));
-        _v$76 !== _p$.s && className(_el$120, _p$.s = _v$76);
-        _v$77 !== _p$.h && ((_p$.h = _v$77) != null ? _el$121.style.setProperty("padding", _v$77) : _el$121.style.removeProperty("padding"));
-        _v$78 !== _p$.r && className(_el$122, _p$.r = _v$78);
-        _v$79 !== _p$.d && ((_p$.d = _v$79) != null ? _el$123.style.setProperty("padding", _v$79) : _el$123.style.removeProperty("padding"));
-        _v$80 !== _p$.l && className(_el$124, _p$.l = _v$80);
-        _v$81 !== _p$.u && ((_p$.u = _v$81) != null ? _el$125.style.setProperty("padding", _v$81) : _el$125.style.removeProperty("padding"));
+        _v$70 !== _p$.e && className(_el$109, _p$.e = _v$70);
+        _v$71 !== _p$.t && className(_el$110, _p$.t = _v$71);
+        _v$72 !== _p$.a && className(_el$111, _p$.a = _v$72);
+        _v$73 !== _p$.o && className(_el$115, _p$.o = _v$73);
+        _v$74 !== _p$.i && className(_el$119, _p$.i = _v$74);
+        _v$75 !== _p$.n && ((_p$.n = _v$75) != null ? _el$120.style.setProperty("padding", _v$75) : _el$120.style.removeProperty("padding"));
+        _v$76 !== _p$.s && className(_el$121, _p$.s = _v$76);
+        _v$77 !== _p$.h && ((_p$.h = _v$77) != null ? _el$122.style.setProperty("padding", _v$77) : _el$122.style.removeProperty("padding"));
+        _v$78 !== _p$.r && className(_el$123, _p$.r = _v$78);
+        _v$79 !== _p$.d && ((_p$.d = _v$79) != null ? _el$124.style.setProperty("padding", _v$79) : _el$124.style.removeProperty("padding"));
+        _v$80 !== _p$.l && className(_el$125, _p$.l = _v$80);
+        _v$81 !== _p$.u && ((_p$.u = _v$81) != null ? _el$126.style.setProperty("padding", _v$81) : _el$126.style.removeProperty("padding"));
         return _p$;
       }, {
         e: void 0,
@@ -11315,7 +11327,7 @@ var MutationDetails = () => {
         l: void 0,
         u: void 0
       });
-      return _el$108;
+      return _el$109;
     }
   });
 };
@@ -12079,6 +12091,17 @@ var stylesFactory2 = (theme, css) => {
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         font-size: ${font.size.xs};
       }
+
+      & .tsqd-query-static-indicator {
+        align-self: stretch;
+        display: flex;
+        align-items: center;
+        padding: 0 ${tokens.size[2]};
+        color: ${t2(colors.teal[800], colors.teal[300])};
+        background-color: ${t2(colors.teal[100], colors.teal[900])};
+        border-bottom: 1px solid ${t2(colors.teal[300], colors.teal[700])};
+        font-size: ${font.size.xs};
+      }
     `,
     selectedQueryRow: css`
       background-color: ${t2(colors.gray[200], colors.darkGray[500])};